Revert "fix: Sticky offset in nested AppLayout (#3013)"

This reverts commit 40eb1f8.
cloudscape-design · Dec 9, 2024 · d245130 · d245130
1 parent 3c11f26
commit d245130
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 106 deletions.
diff --git a/pages/app-layout/multi-layout-with-table-sticky-header.page.tsx b/pages/app-layout/multi-layout-with-table-sticky-header.page.tsx
diff --git a/src/app-layout/__integ__/awsui-applayout.test.ts b/src/app-layout/__integ__/awsui-applayout.test.ts
@@ -5,7 +5,7 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper from '../../../lib/components/test-utils/selectors';
 import { viewports } from './constants';
-import { getUrlParams, testIf, Theme } from './utils';
+import { getUrlParams, Theme } from './utils';
 
 import testutilStyles from '../../../lib/components/app-layout/test-classes/styles.selectors.js';
 
@@ -197,15 +197,4 @@ describe.each(['classic', 'refresh', 'refresh-toolbar'] as Theme[])('%s', theme
       await expect(page.getNavPosition()).resolves.toEqual(navBefore);
     })
   );
-
-  testIf(theme === 'refresh-toolbar')(
-    'should keep header visible and in position while scrolling',
-    setupTest({ pageName: 'multi-layout-with-table-sticky-header' }, async page => {
-      const tableWrapper = createWrapper().findTable();
-      const { top: headerOldOffset } = await page.getBoundingBox(tableWrapper.findHeaderSlot().toSelector());
-      await page.windowScrollTo({ top: 200 });
-      const { top: headerNewOffset } = await page.getBoundingBox(tableWrapper.findHeaderSlot().toSelector());
-      expect(headerOldOffset).toEqual(headerNewOffset);
-    })
-  );
 });
diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useImperativeHandle, useState } from 'react';
 
 import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
 
@@ -9,7 +9,6 @@ import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-co
 import { fireNonCancelableEvent } from '../../internal/events';
 import { useControllable } from '../../internal/hooks/use-controllable';
 import { useIntersectionObserver } from '../../internal/hooks/use-intersection-observer';
-import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
 import { useMobile } from '../../internal/hooks/use-mobile';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';
@@ -79,8 +78,6 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
     const [notificationsHeight, setNotificationsHeight] = useState(0);
     const [navigationAnimationDisabled, setNavigationAnimationDisabled] = useState(true);
     const [splitPanelAnimationDisabled, setSplitPanelAnimationDisabled] = useState(true);
-    const [isNested, setIsNested] = useState(false);
-    const rootRef = useRef<HTMLDivElement>(null);
 
     const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {
       componentName: 'AppLayout',
@@ -435,45 +432,16 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       placement.inlineSize,
     ]);
 
-    /**
-     * Returns true if the AppLayout is nested
-     * Does not apply to iframe
-     */
-    const getIsNestedInAppLayout = (element: HTMLElement | null): boolean => {
-      let currentElement: Element | null = element?.parentElement ?? null;
-
-      // this traverse is needed only for JSDOM
-      // in real browsers the globalVar will be propagated to all descendants and this loops exits after initial iteration
-      while (currentElement) {
-        if (getComputedStyle(currentElement).getPropertyValue(globalVars.stickyVerticalTopOffset)) {
-          return true;
-        }
-        currentElement = currentElement.parentElement;
-      }
-
-      return false;
-    };
-
-    useLayoutEffect(() => {
-      if (!hasToolbar) {
-        setIsNested(getIsNestedInAppLayout(rootRef.current));
-      }
-    }, [hasToolbar]);
-
     return (
       <>
         {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */}
         {!hasToolbar && breadcrumbs ? <ScreenreaderOnly>{breadcrumbs}</ScreenreaderOnly> : null}
         <SkeletonLayout
-          ref={useMergeRefs(intersectionObserverRef, rootRef)}
+          ref={intersectionObserverRef}
           style={{
+            [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,
+            [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,
             paddingBlockEnd: splitPanelOpen && splitPanelPosition === 'bottom' ? splitPanelReportedSize : '',
-            ...(hasToolbar || !isNested
-              ? {
-                  [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,
-                  [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,
-                }
-              : {}),
             ...(!isMobile ? { minWidth: `${minContentWidth}px` } : {}),
           }}
           toolbar={