-
-
- {!hidePreferencesButton && isOpen && (
- <>
-
setPreferencesOpen(true)}
- formAction="none"
- ariaLabel={i18nStrings.preferencesTitle}
- ref={refs.preferences}
- />
-
- >
- )}
+ const contentStyle = {
+ [globalVars.stickyVerticalTopOffset]: topOffset,
+ [globalVars.stickyVerticalBottomOffset]: bottomOffset,
+ };
- {isOpen ? (
-
- ) : isToolbar || position === 'side' ? null : (
+ const panelHeaderId = useUniqueId('split-panel-header');
+
+ const wrappedHeader = (
+
+
+
+ {!hidePreferencesButton && isOpen && (
+ <>
setPreferencesOpen(true)}
formAction="none"
- ariaLabel={i18nStrings.openButtonAriaLabel}
- ref={refs.toggle}
- ariaExpanded={isOpen}
+ ariaLabel={i18nStrings.preferencesTitle}
+ ref={refs.preferences}
/>
- )}
-
+
+ >
+ )}
+
+ {isOpen ? (
+
+ ) : isToolbar || position === 'side' ? null : (
+
+ )}
- );
+
+ );
- const resizeHandle = (
-
- );
+ const resizeHandle = (
+
+ );
- /*
+ /*
This effect forces the browser to recalculate the layout
whenever the split panel might have moved.
@@ -158,106 +161,101 @@ export const SplitPanelImplementation = React.forwardRef
{
- const root = splitPanelRefObject.current;
-
- if (root) {
- const property = 'transform';
- const temporaryValue = 'translateZ(0)';
-
- const valueBefore = root.style[property];
- root.style[property] = temporaryValue;
+ useLayoutEffect(() => {
+ const root = splitPanelRefObject.current;
- // This line forces the browser to recalculate the layout
- void root.offsetHeight;
+ if (root) {
+ const property = 'transform';
+ const temporaryValue = 'translateZ(0)';
- root.style[property] = valueBefore;
- }
- }, [rightOffset, __internalRootRef]);
+ const valueBefore = root.style[property];
+ root.style[property] = temporaryValue;
- const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);
+ // This line forces the browser to recalculate the layout
+ void root.offsetHeight;
- if (closeBehavior === 'hide' && !isOpen) {
- return <>>;
+ root.style[property] = valueBefore;
}
+ }, [rightOffset, __internalRootRef]);
- /**
- * The AppLayout factor moved the circular buttons out of the
- * SplitPanel and into the Tools component. This conditional
- * is still needed for the early return to prevent execution
- * of the following code.
- */
- if (isRefresh && !isToolbar && !isOpen && position === 'side') {
- return <>>;
- }
+ const mergedRef = useMergeRefs(splitPanelRefObject, __internalRootRef);
- return (
- <>
- {position === 'side' && (
-
- {children}
-
- )}
+ if (closeBehavior === 'hide' && !isOpen) {
+ return <>>;
+ }
- {position === 'bottom' && (
-
- {children}
-
- )}
- {isPreferencesOpen && (
- {
- onPreferencesChange({ ...preferences });
- setPreferencesOpen(false);
- }}
- onDismiss={() => {
- setPreferencesOpen(false);
- }}
- />
- )}
- >
- );
+ /**
+ * The AppLayout factor moved the circular buttons out of the
+ * SplitPanel and into the Tools component. This conditional
+ * is still needed for the early return to prevent execution
+ * of the following code.
+ */
+ if (isRefresh && !isToolbar && !isOpen && position === 'side') {
+ return <>>;
}
-);
-export const createWidgetizedSplitPanel = createWidgetizedForwardRef<
- SplitPanelProps,
- HTMLElement,
- typeof SplitPanelImplementation
->(SplitPanelImplementation);
+ return (
+ <>
+ {position === 'side' && (
+
+ {children}
+
+ )}
+
+ {position === 'bottom' && (
+
+ {children}
+
+ )}
+ {isPreferencesOpen && (
+ {
+ onPreferencesChange({ ...preferences });
+ setPreferencesOpen(false);
+ }}
+ onDismiss={() => {
+ setPreferencesOpen(false);
+ }}
+ />
+ )}
+ >
+ );
+}
+
+export const createWidgetizedSplitPanel = createWidgetizedComponent(SplitPanelImplementation);
diff --git a/src/split-panel/index.tsx b/src/split-panel/index.tsx
index 699f87627b..64f8732524 100644
--- a/src/split-panel/index.tsx
+++ b/src/split-panel/index.tsx
@@ -23,7 +23,7 @@ export default function SplitPanel({
return (