From 475165dc544ecd3e0018645dade3ae1c7fb93484 Mon Sep 17 00:00:00 2001
From: Boris Serdiuk <serdiuk@amazon.com>
Date: Wed, 16 Oct 2024 14:07:28 +0200
Subject: [PATCH] fix: Fix forwardRef warning in split panel

---
 src/internal/widgets/index.tsx     |  17 --
 src/split-panel/implementation.tsx | 404 ++++++++++++++---------------
 src/split-panel/index.tsx          |   2 +-
 3 files changed, 201 insertions(+), 222 deletions(-)

diff --git a/src/internal/widgets/index.tsx b/src/internal/widgets/index.tsx
index 7464fe4aa7..d506b91120 100644
--- a/src/internal/widgets/index.tsx
+++ b/src/internal/widgets/index.tsx
@@ -21,20 +21,3 @@ export function createWidgetizedComponent<Component extends FunctionComponent<an
     }) as Component;
   };
 }
-
-export function createWidgetizedForwardRef<
-  Props,
-  RefType,
-  Component extends React.ForwardRefExoticComponent<Props & React.RefAttributes<RefType>>,
->(Implementation: Component) {
-  return (Loader?: Component): Component => {
-    return React.forwardRef<RefType, Props>((props, ref) => {
-      const isRefresh = useVisualRefresh();
-      if (isRefresh && getGlobalFlag('appLayoutWidget') && Loader) {
-        return <Loader ref={ref} {...(props as any)} />;
-      }
-
-      return <Implementation ref={ref} {...(props as any)} />;
-    }) as Component;
-  };
-}
diff --git a/src/split-panel/implementation.tsx b/src/split-panel/implementation.tsx
index b41b60f570..cb2b9d6b4d 100644
--- a/src/split-panel/implementation.tsx
+++ b/src/split-panel/implementation.tsx
@@ -11,11 +11,12 @@ import { InternalButton } from '../button/internal';
 import { getBaseProps } from '../internal/base-component';
 import PanelResizeHandle from '../internal/components/panel-resize-handle';
 import { useSplitPanelContext } from '../internal/context/split-panel-context';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { useMergeRefs } from '../internal/hooks/use-merge-refs';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import globalVars from '../internal/styles/global-vars';
-import { createWidgetizedForwardRef } from '../internal/widgets';
+import { createWidgetizedComponent } from '../internal/widgets';
 import { SplitPanelContentBottom } from './bottom';
 import { SplitPanelProps } from './interfaces';
 import PreferencesModal from './preferences-modal';
@@ -24,133 +25,133 @@ import { SplitPanelContentSide } from './side';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
 
-export { SplitPanelProps };
+type SplitPanelImplementationProps = SplitPanelProps & InternalBaseComponentProps;
 
-export const SplitPanelImplementation = React.forwardRef<HTMLElement, SplitPanelProps>(
-  (
-    { header, children, hidePreferencesButton = false, closeBehavior = 'collapse', i18nStrings = {}, ...restProps },
-    __internalRootRef
-  ) => {
-    const isRefresh = useVisualRefresh();
-    const isToolbar = useAppLayoutToolbarEnabled();
+export function SplitPanelImplementation({
+  __internalRootRef,
+  header,
+  children,
+  hidePreferencesButton = false,
+  closeBehavior = 'collapse',
+  i18nStrings = {},
+  ...restProps
+}: SplitPanelImplementationProps) {
+  const isRefresh = useVisualRefresh();
+  const isToolbar = useAppLayoutToolbarEnabled();
 
-    const {
-      position,
-      topOffset,
-      bottomOffset,
-      rightOffset,
-      contentWidthStyles,
-      isOpen,
-      isForcedPosition,
-      onPreferencesChange,
-      onResize,
-      onToggle,
-      size,
-      relativeSize,
-      setSplitPanelToggle,
-      refs,
-    } = useSplitPanelContext();
-    const baseProps = getBaseProps(restProps);
-    const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);
+  const {
+    position,
+    topOffset,
+    bottomOffset,
+    rightOffset,
+    contentWidthStyles,
+    isOpen,
+    isForcedPosition,
+    onPreferencesChange,
+    onResize,
+    onToggle,
+    size,
+    relativeSize,
+    setSplitPanelToggle,
+    refs,
+  } = useSplitPanelContext();
+  const baseProps = getBaseProps(restProps);
+  const [isPreferencesOpen, setPreferencesOpen] = useState<boolean>(false);
 
-    const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;
+  const appLayoutMaxWidth = isRefresh && position === 'bottom' ? contentWidthStyles : undefined;
 
-    const openButtonAriaLabel = i18nStrings.openButtonAriaLabel;
-    useEffect(() => {
-      setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });
+  const openButtonAriaLabel = i18nStrings.openButtonAriaLabel;
+  useEffect(() => {
+    setSplitPanelToggle({ displayed: closeBehavior === 'collapse', ariaLabel: openButtonAriaLabel });
 
-      return () => {
-        setSplitPanelToggle({ displayed: false, ariaLabel: undefined });
-      };
-    }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);
-
-    const splitPanelRefObject = useRef<HTMLDivElement>(null);
-
-    const sizeControlProps: SizeControlProps = {
-      position,
-      panelRef: splitPanelRefObject,
-      handleRef: refs.slider,
-      onResize,
-      hasTransitions: true,
+    return () => {
+      setSplitPanelToggle({ displayed: false, ariaLabel: undefined });
     };
-    const onSliderPointerDown = usePointerEvents(sizeControlProps);
-    const onKeyDown = useKeyboardEvents(sizeControlProps);
+  }, [setSplitPanelToggle, openButtonAriaLabel, closeBehavior]);
 
-    const contentStyle = {
-      [globalVars.stickyVerticalTopOffset]: topOffset,
-      [globalVars.stickyVerticalBottomOffset]: bottomOffset,
-    };
+  const splitPanelRefObject = useRef<HTMLDivElement>(null);
 
-    const panelHeaderId = useUniqueId('split-panel-header');
+  const sizeControlProps: SizeControlProps = {
+    position,
+    panelRef: splitPanelRefObject,
+    handleRef: refs.slider,
+    onResize,
+    hasTransitions: true,
+  };
+  const onSliderPointerDown = usePointerEvents(sizeControlProps);
+  const onKeyDown = useKeyboardEvents(sizeControlProps);
 
-    const wrappedHeader = (
-      <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>
-        <h2 className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>
-          {header}
-        </h2>
-        <div className={styles['header-actions']}>
-          {!hidePreferencesButton && isOpen && (
-            <>
-              <InternalButton
-                className={testUtilStyles['preferences-button']}
-                iconName="settings"
-                variant="icon"
-                onClick={() => setPreferencesOpen(true)}
-                formAction="none"
-                ariaLabel={i18nStrings.preferencesTitle}
-                ref={refs.preferences}
-              />
-              <span className={styles.divider} />
-            </>
-          )}
+  const contentStyle = {
+    [globalVars.stickyVerticalTopOffset]: topOffset,
+    [globalVars.stickyVerticalBottomOffset]: bottomOffset,
+  };
 
-          {isOpen ? (
-            <InternalButton
-              className={testUtilStyles['close-button']}
-              iconName={
-                isRefresh && closeBehavior === 'collapse'
-                  ? position === 'side'
-                    ? 'angle-right'
-                    : 'angle-down'
-                  : 'close'
-              }
-              variant="icon"
-              onClick={onToggle}
-              formAction="none"
-              ariaLabel={i18nStrings.closeButtonAriaLabel}
-              ariaExpanded={isOpen}
-            />
-          ) : isToolbar || position === 'side' ? null : (
+  const panelHeaderId = useUniqueId('split-panel-header');
+
+  const wrappedHeader = (
+    <div className={clsx(styles.header, isToolbar && styles['with-toolbar'])} style={appLayoutMaxWidth}>
+      <h2 className={clsx(styles['header-text'], testUtilStyles['header-text'])} id={panelHeaderId}>
+        {header}
+      </h2>
+      <div className={styles['header-actions']}>
+        {!hidePreferencesButton && isOpen && (
+          <>
             <InternalButton
-              className={testUtilStyles['open-button']}
-              iconName="angle-up"
+              className={testUtilStyles['preferences-button']}
+              iconName="settings"
               variant="icon"
+              onClick={() => setPreferencesOpen(true)}
               formAction="none"
-              ariaLabel={i18nStrings.openButtonAriaLabel}
-              ref={refs.toggle}
-              ariaExpanded={isOpen}
+              ariaLabel={i18nStrings.preferencesTitle}
+              ref={refs.preferences}
             />
-          )}
-        </div>
+            <span className={styles.divider} />
+          </>
+        )}
+
+        {isOpen ? (
+          <InternalButton
+            className={testUtilStyles['close-button']}
+            iconName={
+              isRefresh && closeBehavior === 'collapse' ? (position === 'side' ? 'angle-right' : 'angle-down') : 'close'
+            }
+            variant="icon"
+            onClick={onToggle}
+            formAction="none"
+            ariaLabel={i18nStrings.closeButtonAriaLabel}
+            ariaExpanded={isOpen}
+          />
+        ) : isToolbar || position === 'side' ? null : (
+          <InternalButton
+            className={testUtilStyles['open-button']}
+            iconName="angle-up"
+            variant="icon"
+            formAction="none"
+            ariaLabel={i18nStrings.openButtonAriaLabel}
+            ref={refs.toggle}
+            ariaExpanded={isOpen}
+          />
+        )}
       </div>
-    );
+    </div>
+  );
 
-    const resizeHandle = (
-      <PanelResizeHandle
-        ref={refs.slider}
-        className={testUtilStyles.slider}
-        ariaLabel={i18nStrings.resizeHandleAriaLabel}
-        // Allows us to use the logical left/right keys to move the slider left/right,
-        // but match aria keyboard behavior of using left/right to decrease/increase
-        // the slider value.
-        ariaValuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}
-        position={position}
-        onKeyDown={onKeyDown}
-        onPointerDown={onSliderPointerDown}
-      />
-    );
+  const resizeHandle = (
+    <PanelResizeHandle
+      ref={refs.slider}
+      className={testUtilStyles.slider}
+      ariaLabel={i18nStrings.resizeHandleAriaLabel}
+      // Allows us to use the logical left/right keys to move the slider left/right,
+      // but match aria keyboard behavior of using left/right to decrease/increase
+      // the slider value.
+      ariaValuenow={position === 'bottom' ? relativeSize : 100 - relativeSize}
+      position={position}
+      onKeyDown={onKeyDown}
+      onPointerDown={onSliderPointerDown}
+    />
+  );
 
-    /*
+  /*
     This effect forces the browser to recalculate the layout
     whenever the split panel might have moved.
 
@@ -158,106 +159,101 @@ export const SplitPanelImplementation = React.forwardRef<HTMLElement, SplitPanel
     not automatically calculate the new position of the split panel
     _content_ when the split panel moves.
   */
-    useLayoutEffect(() => {
-      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' && (
-          <SplitPanelContentSide
-            style={contentStyle}
-            resizeHandle={resizeHandle}
-            baseProps={baseProps}
-            isOpen={isOpen}
-            splitPanelRef={mergedRef}
-            cappedSize={size}
-            onToggle={onToggle}
-            openButtonAriaLabel={openButtonAriaLabel}
-            toggleRef={refs.toggle}
-            header={wrappedHeader}
-            panelHeaderId={panelHeaderId}
-          >
-            {children}
-          </SplitPanelContentSide>
-        )}
+  if (closeBehavior === 'hide' && !isOpen) {
+    return <></>;
+  }
 
-        {position === 'bottom' && (
-          <SplitPanelContentBottom
-            style={contentStyle}
-            resizeHandle={resizeHandle}
-            baseProps={baseProps}
-            isOpen={isOpen}
-            splitPanelRef={mergedRef}
-            cappedSize={size}
-            onToggle={onToggle}
-            header={wrappedHeader}
-            panelHeaderId={panelHeaderId}
-            appLayoutMaxWidth={appLayoutMaxWidth}
-          >
-            {children}
-          </SplitPanelContentBottom>
-        )}
-        {isPreferencesOpen && (
-          <PreferencesModal
-            visible={true}
-            preferences={{ position }}
-            disabledSidePosition={position === 'bottom' && isForcedPosition}
-            isRefresh={isRefresh}
-            i18nStrings={{
-              header: i18nStrings.preferencesTitle,
-              confirm: i18nStrings.preferencesConfirm,
-              cancel: i18nStrings.preferencesCancel,
-              positionLabel: i18nStrings.preferencesPositionLabel,
-              positionDescription: i18nStrings.preferencesPositionDescription,
-              positionBottom: i18nStrings.preferencesPositionBottom,
-              positionSide: i18nStrings.preferencesPositionSide,
-            }}
-            onConfirm={preferences => {
-              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' && (
+        <SplitPanelContentSide
+          style={contentStyle}
+          resizeHandle={resizeHandle}
+          baseProps={baseProps}
+          isOpen={isOpen}
+          splitPanelRef={mergedRef}
+          cappedSize={size}
+          onToggle={onToggle}
+          openButtonAriaLabel={openButtonAriaLabel}
+          toggleRef={refs.toggle}
+          header={wrappedHeader}
+          panelHeaderId={panelHeaderId}
+        >
+          {children}
+        </SplitPanelContentSide>
+      )}
+
+      {position === 'bottom' && (
+        <SplitPanelContentBottom
+          style={contentStyle}
+          resizeHandle={resizeHandle}
+          baseProps={baseProps}
+          isOpen={isOpen}
+          splitPanelRef={mergedRef}
+          cappedSize={size}
+          onToggle={onToggle}
+          header={wrappedHeader}
+          panelHeaderId={panelHeaderId}
+          appLayoutMaxWidth={appLayoutMaxWidth}
+        >
+          {children}
+        </SplitPanelContentBottom>
+      )}
+      {isPreferencesOpen && (
+        <PreferencesModal
+          visible={true}
+          preferences={{ position }}
+          disabledSidePosition={position === 'bottom' && isForcedPosition}
+          isRefresh={isRefresh}
+          i18nStrings={{
+            header: i18nStrings.preferencesTitle,
+            confirm: i18nStrings.preferencesConfirm,
+            cancel: i18nStrings.preferencesCancel,
+            positionLabel: i18nStrings.preferencesPositionLabel,
+            positionDescription: i18nStrings.preferencesPositionDescription,
+            positionBottom: i18nStrings.preferencesPositionBottom,
+            positionSide: i18nStrings.preferencesPositionSide,
+          }}
+          onConfirm={preferences => {
+            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 (
     <SplitPanelInternal
       {...restProps}
-      ref={__internalRootRef}
+      __internalRootRef={__internalRootRef}
       hidePreferencesButton={hidePreferencesButton}
       closeBehavior={closeBehavior}
       i18nStrings={{