@cloudscape-design/components 3.0.618 → 3.0.620

package/app-layout/visual-refresh/styles.selectors.js

@@ -2,86 +2,86 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "background": "awsui_background_hyvsj_oarcx_99",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_oarcx_102",
-  "sticky-background": "awsui_sticky-background_hyvsj_oarcx_108",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_oarcx_116",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_oarcx_129",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_oarcx_139",
-  "drawers-container": "awsui_drawers-container_hyvsj_oarcx_151",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_oarcx_162",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_oarcx_185",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_oarcx_190",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_oarcx_231",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_oarcx_241",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_oarcx_245",
-  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_oarcx_259",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_oarcx_245",
-  "drawer": "awsui_drawer_hyvsj_oarcx_151",
-  "drawer-content-container": "awsui_drawer-content-container_hyvsj_oarcx_290",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_oarcx_299",
-  "drawer-content": "awsui_drawer-content_hyvsj_oarcx_290",
-  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_oarcx_307",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_oarcx_310",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_oarcx_317",
-  "content": "awsui_content_hyvsj_oarcx_343",
-  "layout": "awsui_layout_hyvsj_oarcx_364",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_oarcx_445",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_oarcx_460",
-  "content-type-table": "awsui_content-type-table_hyvsj_oarcx_474",
-  "content-type-cards": "awsui_content-type-cards_hyvsj_oarcx_474",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_oarcx_480",
-  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_oarcx_483",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_oarcx_515",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_oarcx_518",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_oarcx_528",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_oarcx_531",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_oarcx_534",
-  "has-header": "awsui_has-header_hyvsj_oarcx_534",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_oarcx_552",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_oarcx_552",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_oarcx_589",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_oarcx_589",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_oarcx_605",
-  "unfocusable": "awsui_unfocusable_hyvsj_oarcx_610",
-  "container": "awsui_container_hyvsj_oarcx_620",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_oarcx_646",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_oarcx_649",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_oarcx_649",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_oarcx_649",
-  "has-active-drawer": "awsui_has-active-drawer_hyvsj_oarcx_649",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_oarcx_658",
-  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_oarcx_675",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_oarcx_679",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_oarcx_683",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_oarcx_687",
-  "navigation-container": "awsui_navigation-container_hyvsj_oarcx_696",
-  "show-navigation": "awsui_show-navigation_hyvsj_oarcx_734",
-  "animating": "awsui_animating_hyvsj_oarcx_757",
-  "showButtons": "awsui_showButtons_hyvsj_oarcx_1",
-  "navigation": "awsui_navigation_hyvsj_oarcx_696",
-  "openNavigation": "awsui_openNavigation_hyvsj_oarcx_1",
-  "animated-content": "awsui_animated-content_hyvsj_oarcx_819",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_oarcx_828",
-  "notifications": "awsui_notifications_hyvsj_oarcx_838",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_oarcx_844",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_oarcx_861",
-  "position-bottom": "awsui_position-bottom_hyvsj_oarcx_908",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_oarcx_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_oarcx_937",
-  "position-side": "awsui_position-side_hyvsj_oarcx_950",
-  "tools-container": "awsui_tools-container_hyvsj_oarcx_972",
-  "tools": "awsui_tools_hyvsj_oarcx_972",
-  "openTools": "awsui_openTools_hyvsj_oarcx_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_oarcx_1063",
-  "hide-tools": "awsui_hide-tools_hyvsj_oarcx_1073",
-  "show-tools": "awsui_show-tools_hyvsj_oarcx_1085",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_oarcx_1063",
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_oarcx_1168",
-  "trigger": "awsui_trigger_hyvsj_oarcx_1168",
-  "selected": "awsui_selected_hyvsj_oarcx_1245",
-  "badge": "awsui_badge_hyvsj_oarcx_1265",
-  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_oarcx_1269",
-  "dot": "awsui_dot_hyvsj_oarcx_1280"
+  "background": "awsui_background_hyvsj_nbcko_99",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_nbcko_102",
+  "sticky-background": "awsui_sticky-background_hyvsj_nbcko_108",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_nbcko_116",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_nbcko_129",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_nbcko_139",
+  "drawers-container": "awsui_drawers-container_hyvsj_nbcko_151",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_nbcko_162",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_nbcko_185",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_nbcko_190",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_nbcko_231",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_hyvsj_nbcko_241",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_nbcko_245",
+  "drawers-trigger-overflow": "awsui_drawers-trigger-overflow_hyvsj_nbcko_259",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_nbcko_245",
+  "drawer": "awsui_drawer_hyvsj_nbcko_151",
+  "drawer-content-container": "awsui_drawer-content-container_hyvsj_nbcko_290",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_nbcko_299",
+  "drawer-content": "awsui_drawer-content_hyvsj_nbcko_290",
+  "drawer-content-hidden": "awsui_drawer-content-hidden_hyvsj_nbcko_307",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_nbcko_310",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_nbcko_317",
+  "content": "awsui_content_hyvsj_nbcko_343",
+  "layout": "awsui_layout_hyvsj_nbcko_364",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_nbcko_435",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_nbcko_450",
+  "content-type-table": "awsui_content-type-table_hyvsj_nbcko_464",
+  "content-type-cards": "awsui_content-type-cards_hyvsj_nbcko_464",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_nbcko_470",
+  "is-hide-mobile-toolbar": "awsui_is-hide-mobile-toolbar_hyvsj_nbcko_473",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_nbcko_487",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_nbcko_490",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_nbcko_500",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_nbcko_503",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_nbcko_506",
+  "has-header": "awsui_has-header_hyvsj_nbcko_506",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_nbcko_524",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_nbcko_524",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_nbcko_561",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_nbcko_561",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_nbcko_569",
+  "unfocusable": "awsui_unfocusable_hyvsj_nbcko_574",
+  "container": "awsui_container_hyvsj_nbcko_584",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_nbcko_610",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_nbcko_613",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_nbcko_613",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_nbcko_613",
+  "has-active-drawer": "awsui_has-active-drawer_hyvsj_nbcko_613",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_nbcko_622",
+  "remove-high-contrast-header": "awsui_remove-high-contrast-header_hyvsj_nbcko_639",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_nbcko_643",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_nbcko_647",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_nbcko_651",
+  "navigation-container": "awsui_navigation-container_hyvsj_nbcko_660",
+  "show-navigation": "awsui_show-navigation_hyvsj_nbcko_698",
+  "animating": "awsui_animating_hyvsj_nbcko_721",
+  "showButtons": "awsui_showButtons_hyvsj_nbcko_1",
+  "navigation": "awsui_navigation_hyvsj_nbcko_660",
+  "openNavigation": "awsui_openNavigation_hyvsj_nbcko_1",
+  "animated-content": "awsui_animated-content_hyvsj_nbcko_783",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_nbcko_792",
+  "notifications": "awsui_notifications_hyvsj_nbcko_802",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_nbcko_808",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_nbcko_825",
+  "position-bottom": "awsui_position-bottom_hyvsj_nbcko_872",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_nbcko_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_nbcko_901",
+  "position-side": "awsui_position-side_hyvsj_nbcko_914",
+  "tools-container": "awsui_tools-container_hyvsj_nbcko_936",
+  "tools": "awsui_tools_hyvsj_nbcko_936",
+  "openTools": "awsui_openTools_hyvsj_nbcko_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_nbcko_1027",
+  "hide-tools": "awsui_hide-tools_hyvsj_nbcko_1037",
+  "show-tools": "awsui_show-tools_hyvsj_nbcko_1049",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_nbcko_1027",
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_hyvsj_nbcko_1132",
+  "trigger": "awsui_trigger_hyvsj_nbcko_1132",
+  "selected": "awsui_selected_hyvsj_nbcko_1209",
+  "badge": "awsui_badge_hyvsj_nbcko_1229",
+  "trigger-wrapper": "awsui_trigger-wrapper_hyvsj_nbcko_1233",
+  "dot": "awsui_dot_hyvsj_nbcko_1244"
 };
   

package/container/use-sticky-header.d.ts

@@ -4,15 +4,11 @@ interface StickyHeaderContextProps {
 }
 interface ComputeOffsetProps {
     isMobile: boolean;
-    isVisualRefresh: boolean;
-    customCssProps: Record<string, string>;
     __stickyOffset?: number;
     __mobileStickyOffset?: number;
-    mobileBarHeight?: number;
-    stickyOffsetTop: number;
     hasInnerOverflowParents: boolean;
 }
-export declare function computeOffset({ isMobile, isVisualRefresh, customCssProps, __stickyOffset, __mobileStickyOffset, mobileBarHeight, stickyOffsetTop, hasInnerOverflowParents, }: ComputeOffsetProps): string;
+export declare function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, }: ComputeOffsetProps): string;
 export declare const StickyHeaderContext: import("react").Context<StickyHeaderContextProps>;
 export declare const useStickyHeader: (rootRef: RefObject<HTMLDivElement>, headerRef: RefObject<HTMLDivElement>, __stickyHeader?: boolean, __stickyOffset?: number, __mobileStickyOffset?: number, __disableMobile?: boolean) => {
     isSticky: boolean;

package/container/use-sticky-header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoE,MAAM,OAAO,CAAC;AAOpG,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,eAAe,EACf,cAAc,EACd,cAAc,EACd,oBAAoB,EACpB,eAAmB,EACnB,eAAe,EACf,uBAAuB,GACxB,EAAE,kBAAkB,UA8BpB;AAED,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM,yBACA,MAAM;;;;;;;;;;CA2E9B,CAAC"}
+{"version":3,"file":"use-sticky-header.d.ts","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAoE,MAAM,OAAO,CAAC;AAMpG,UAAU,wBAAwB;IAChC,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;CAClC;AAED,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,cAAc,EACd,oBAAoB,EACpB,uBAAuB,GACxB,EAAE,kBAAkB,GAAG,MAAM,CAQ7B;AAED,eAAO,MAAM,mBAAmB,mDAE9B,CAAC;AAEH,eAAO,MAAM,eAAe,YACjB,UAAU,cAAc,CAAC,aACvB,UAAU,cAAc,CAAC,mBACnB,OAAO,mBACP,MAAM,yBACA,MAAM;;;;;;;;;;CAmE9B,CAAC"}

package/container/use-sticky-header.js

@@ -1,48 +1,25 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';
-import { useAppLayoutContext } from '../internal/context/app-layout-context';
 import { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';
 import { getOverflowParents } from '../internal/utils/scrollable-containers';
-import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-import customCssProps from '../internal/generated/custom-css-properties';
 import { useMobile } from '../internal/hooks/use-mobile';
-export function computeOffset({ isMobile, isVisualRefresh, customCssProps, __stickyOffset, __mobileStickyOffset, mobileBarHeight = 0, stickyOffsetTop, hasInnerOverflowParents, }) {
-    const effectiveStickyOffset = __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : (hasInnerOverflowParents ? 0 : stickyOffsetTop);
-    /**
-     * The AppLayout refactor removed the need for passing the sticky offset in px all the time through the
-     * AppLayoutDomContext provider because that information already exists on the DOM in a custom property
-     * on the Layout subcomponent. Thus, if the Container header is sticky, we are in Visual Refresh and use
-     * body scroll then we will use that property. When a component is used outside AppLayout, we fall back
-     * to the default offset calculated in AppLayoutDomContext.
-     */
-    let computedOffset = `${effectiveStickyOffset}px`;
-    if (isMobile) {
-        // This mobile offset is only relevant for full page tables in the mobile viewport.
-        // It is obtained by the sum of stickyOffsetTop (AppLayout header height), mobileBarHeight (AppLayout mobile bar height) and
-        // __stickyOffset (value of the stickyHeaderVerticalOffset, set by users), from which we subtract __mobileStickyOffset (which is the table tools header height).
-        // Classic offset is calculated using the AppLayout context
-        const classicOffset = `${stickyOffsetTop + mobileBarHeight + (__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0) - (__mobileStickyOffset !== null && __mobileStickyOffset !== void 0 ? __mobileStickyOffset : 0)}px`;
-        // VR offset is calculated using CSS custom properties
-        const visualRefreshOffset = `calc(var(${customCssProps.offsetTop}, 0px) + var(${customCssProps.mobileBarHeight}, 0px) + ${(__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0) - (__mobileStickyOffset !== null && __mobileStickyOffset !== void 0 ? __mobileStickyOffset : 0)}px)`;
-        computedOffset = isVisualRefresh ? visualRefreshOffset : classicOffset;
+import globalVars from '../internal/styles/global-vars';
+export function computeOffset({ isMobile, __stickyOffset, __mobileStickyOffset, hasInnerOverflowParents, }) {
+    const localOffset = isMobile ? (__stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0) - (__mobileStickyOffset !== null && __mobileStickyOffset !== void 0 ? __mobileStickyOffset : 0) : __stickyOffset !== null && __stickyOffset !== void 0 ? __stickyOffset : 0;
+    if (hasInnerOverflowParents) {
+        return `${localOffset}px`;
     }
-    else if (isVisualRefresh && !hasInnerOverflowParents) {
-        computedOffset = `var(${customCssProps.offsetTopWithNotifications}, ${computedOffset})`;
-    }
-    return computedOffset;
+    const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;
+    return `calc(${globalOffset} + ${localOffset}px)`;
 }
 export const StickyHeaderContext = createContext({
     isStuck: false,
 });
 export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffset, __mobileStickyOffset, __disableMobile = true) => {
     const isMobile = useMobile();
-    // We reach into AppLayoutContext in case sticky header needs to be offset down by the height
-    // of other sticky elements positioned on top of the view.
-    const { stickyOffsetTop, mobileBarHeight } = useAppLayoutContext();
     const disableSticky = isMobile && __disableMobile;
     const isSticky = supportsStickyPosition() && !disableSticky && !!__stickyHeader;
-    const isVisualRefresh = useVisualRefresh();
     // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.
     const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);
     const [isStuck, setIsStuck] = useState(false);
@@ -59,12 +36,8 @@ export const useStickyHeader = (rootRef, headerRef, __stickyHeader, __stickyOffs
     }, [rootRef]);
     const computedOffset = computeOffset({
         isMobile,
-        isVisualRefresh,
-        customCssProps,
         __stickyOffset,
         __mobileStickyOffset,
-        mobileBarHeight,
-        stickyOffsetTop,
         hasInnerOverflowParents,
     });
     const stickyStyles = isSticky

package/container/use-sticky-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';\nimport { useAppLayoutContext } from '../internal/context/app-layout-context';\nimport { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { useMobile } from '../internal/hooks/use-mobile';\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  isVisualRefresh: boolean;\n  customCssProps: Record<string, string>;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  mobileBarHeight?: number;\n  stickyOffsetTop: number;\n  hasInnerOverflowParents: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  isVisualRefresh,\n  customCssProps,\n  __stickyOffset,\n  __mobileStickyOffset,\n  mobileBarHeight = 0,\n  stickyOffsetTop,\n  hasInnerOverflowParents,\n}: ComputeOffsetProps) {\n  const effectiveStickyOffset = __stickyOffset ?? (hasInnerOverflowParents ? 0 : stickyOffsetTop);\n  /**\n   * The AppLayout refactor removed the need for passing the sticky offset in px all the time through the\n   * AppLayoutDomContext provider because that information already exists on the DOM in a custom property\n   * on the Layout subcomponent. Thus, if the Container header is sticky, we are in Visual Refresh and use\n   * body scroll then we will use that property. When a component is used outside AppLayout, we fall back\n   * to the default offset calculated in AppLayoutDomContext.\n   */\n  let computedOffset = `${effectiveStickyOffset}px`;\n  if (isMobile) {\n    // This mobile offset is only relevant for full page tables in the mobile viewport.\n    // It is obtained by the sum of stickyOffsetTop (AppLayout header height), mobileBarHeight (AppLayout mobile bar height) and\n    // __stickyOffset (value of the stickyHeaderVerticalOffset, set by users), from which we subtract __mobileStickyOffset (which is the table tools header height).\n\n    // Classic offset is calculated using the AppLayout context\n    const classicOffset = `${\n      stickyOffsetTop + mobileBarHeight + (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0)\n    }px`;\n\n    // VR offset is calculated using CSS custom properties\n    const visualRefreshOffset = `calc(var(${customCssProps.offsetTop}, 0px) + var(${\n      customCssProps.mobileBarHeight\n    }, 0px) + ${(__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0)}px)`;\n\n    computedOffset = isVisualRefresh ? visualRefreshOffset : classicOffset;\n  } else if (isVisualRefresh && !hasInnerOverflowParents) {\n    computedOffset = `var(${customCssProps.offsetTopWithNotifications}, ${computedOffset})`;\n  }\n  return computedOffset;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile = true\n) => {\n  const isMobile = useMobile();\n  // We reach into AppLayoutContext in case sticky header needs to be offset down by the height\n  // of other sticky elements positioned on top of the view.\n  const { stickyOffsetTop, mobileBarHeight } = useAppLayoutContext();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = supportsStickyPosition() && !disableSticky && !!__stickyHeader;\n  const isVisualRefresh = useVisualRefresh();\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const computedOffset = computeOffset({\n    isMobile,\n    isVisualRefresh,\n    customCssProps,\n    __stickyOffset,\n    __mobileStickyOffset,\n    mobileBarHeight,\n    stickyOffsetTop,\n    hasInnerOverflowParents,\n  });\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n\n      if (rootTop < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n"]}
+{"version":3,"file":"use-sticky-header.js","sourceRoot":"","sources":["../../../src/container/use-sticky-header.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { RefObject, useState, useLayoutEffect, useCallback, useEffect, createContext } from 'react';\nimport { findUpUntil, supportsStickyPosition } from '../internal/utils/dom';\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport globalVars from '../internal/styles/global-vars';\n\ninterface StickyHeaderContextProps {\n  isStuck: boolean;\n}\n\ninterface ComputeOffsetProps {\n  isMobile: boolean;\n  __stickyOffset?: number;\n  __mobileStickyOffset?: number;\n  hasInnerOverflowParents: boolean;\n}\n\nexport function computeOffset({\n  isMobile,\n  __stickyOffset,\n  __mobileStickyOffset,\n  hasInnerOverflowParents,\n}: ComputeOffsetProps): string {\n  const localOffset = isMobile ? (__stickyOffset ?? 0) - (__mobileStickyOffset ?? 0) : __stickyOffset ?? 0;\n  if (hasInnerOverflowParents) {\n    return `${localOffset}px`;\n  }\n  const globalOffset = `var(${globalVars.stickyVerticalTopOffset}, 0px)`;\n\n  return `calc(${globalOffset} + ${localOffset}px)`;\n}\n\nexport const StickyHeaderContext = createContext<StickyHeaderContextProps>({\n  isStuck: false,\n});\n\nexport const useStickyHeader = (\n  rootRef: RefObject<HTMLDivElement>,\n  headerRef: RefObject<HTMLDivElement>,\n  __stickyHeader?: boolean,\n  __stickyOffset?: number,\n  __mobileStickyOffset?: number,\n  __disableMobile = true\n) => {\n  const isMobile = useMobile();\n  const disableSticky = isMobile && __disableMobile;\n  const isSticky = supportsStickyPosition() && !disableSticky && !!__stickyHeader;\n\n  // If it has overflow parents inside the app layout, we shouldn't apply a sticky offset.\n  const [hasInnerOverflowParents, setHasInnerOverflowParents] = useState(false);\n  const [isStuck, setIsStuck] = useState(false);\n  useLayoutEffect(() => {\n    if (rootRef.current) {\n      const overflowParents = getOverflowParents(rootRef.current);\n      const mainElement = findUpUntil(rootRef.current, elem => elem.tagName === 'MAIN');\n      // In both versions of the app layout, the scrolling element for disableBodyScroll\n      // is the <main>. If the closest overflow parent is also the closest <main> and we have\n      // offset values, it's safe to assume that it's the app layout scroll root and we\n      // should stop there.\n      setHasInnerOverflowParents(overflowParents.length > 0 && overflowParents[0] !== mainElement);\n    }\n  }, [rootRef]);\n\n  const computedOffset = computeOffset({\n    isMobile,\n    __stickyOffset,\n    __mobileStickyOffset,\n    hasInnerOverflowParents,\n  });\n\n  const stickyStyles = isSticky\n    ? {\n        style: {\n          top: computedOffset,\n        },\n      }\n    : {};\n\n  // \"stuck\" state, when the header has moved from its original posititon has a\n  // box-shadow, applied here by a \"header-stuck\" className\n  const checkIfStuck = useCallback(() => {\n    if (rootRef.current && headerRef.current) {\n      const rootTopBorderWidth = parseFloat(getComputedStyle(rootRef.current).borderTopWidth) || 0;\n      const rootTop = rootRef.current.getBoundingClientRect().top + rootTopBorderWidth;\n      const headerTop = headerRef.current.getBoundingClientRect().top;\n\n      if (rootTop < headerTop) {\n        setIsStuck(true);\n      } else {\n        setIsStuck(false);\n      }\n    }\n  }, [rootRef, headerRef]);\n  useEffect(() => {\n    if (isSticky) {\n      window.addEventListener('scroll', checkIfStuck, true);\n      window.addEventListener('resize', checkIfStuck);\n      return () => {\n        window.removeEventListener('scroll', checkIfStuck, true);\n        window.removeEventListener('resize', checkIfStuck);\n      };\n    }\n  }, [isSticky, checkIfStuck]);\n  return {\n    isSticky,\n    isStuck,\n    stickyStyles,\n  };\n};\n"]}

package/flashbar/styles.css.js

@@ -1,52 +1,52 @@
 
     import './styles.scoped.css';
     export default {
-  "flash-with-motion": "awsui_flash-with-motion_1q84n_pgrle_99",
-  "enter": "awsui_enter_1q84n_pgrle_99",
-  "flash-body": "awsui_flash-body_1q84n_pgrle_113",
-  "flash-message": "awsui_flash-message_1q84n_pgrle_113",
-  "flash-header": "awsui_flash-header_1q84n_pgrle_113",
-  "flash-content": "awsui_flash-content_1q84n_pgrle_114",
-  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_pgrle_115",
-  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_pgrle_116",
-  "flash-icon": "awsui_flash-icon_1q84n_pgrle_139",
-  "entering": "awsui_entering_1q84n_pgrle_152",
-  "entered": "awsui_entered_1q84n_pgrle_173",
-  "exiting": "awsui_exiting_1q84n_pgrle_278",
-  "stack": "awsui_stack_1q84n_pgrle_300",
-  "animation-running": "awsui_animation-running_1q84n_pgrle_300",
-  "item": "awsui_item_1q84n_pgrle_300",
-  "flash-list-item": "awsui_flash-list-item_1q84n_pgrle_301",
-  "notification-bar": "awsui_notification-bar_1q84n_pgrle_302",
-  "collapsed": "awsui_collapsed_1q84n_pgrle_322",
-  "animation-ready": "awsui_animation-ready_1q84n_pgrle_322",
-  "expanded-only": "awsui_expanded-only_1q84n_pgrle_322",
-  "expanded": "awsui_expanded_1q84n_pgrle_322",
-  "flash": "awsui_flash_1q84n_pgrle_99",
-  "collapsible": "awsui_collapsible_1q84n_pgrle_386",
-  "short-list": "awsui_short-list_1q84n_pgrle_392",
-  "visual-refresh": "awsui_visual-refresh_1q84n_pgrle_392",
-  "status": "awsui_status_1q84n_pgrle_605",
-  "header": "awsui_header_1q84n_pgrle_605",
-  "item-count": "awsui_item-count_1q84n_pgrle_606",
-  "button": "awsui_button_1q84n_pgrle_607",
-  "type-count": "awsui_type-count_1q84n_pgrle_640",
-  "count-number": "awsui_count-number_1q84n_pgrle_640",
-  "icon": "awsui_icon_1q84n_pgrle_674",
-  "floating": "awsui_floating_1q84n_pgrle_715",
-  "flashbar": "awsui_flashbar_1q84n_pgrle_723",
-  "flash-refresh": "awsui_flash-refresh_1q84n_pgrle_798",
-  "flash-list": "awsui_flash-list_1q84n_pgrle_301",
-  "flash-focus-container": "awsui_flash-focus-container_1q84n_pgrle_819",
-  "flash-text": "awsui_flash-text_1q84n_pgrle_849",
-  "dismiss-button": "awsui_dismiss-button_1q84n_pgrle_116",
-  "breakpoint-default": "awsui_breakpoint-default_1q84n_pgrle_891",
-  "action-button": "awsui_action-button_1q84n_pgrle_115",
-  "action-slot": "awsui_action-slot_1q84n_pgrle_901",
-  "flash-type-success": "awsui_flash-type-success_1q84n_pgrle_905",
-  "flash-type-error": "awsui_flash-type-error_1q84n_pgrle_909",
-  "flash-type-info": "awsui_flash-type-info_1q84n_pgrle_913",
-  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_pgrle_914",
-  "flash-type-warning": "awsui_flash-type-warning_1q84n_pgrle_918"
+  "flash-with-motion": "awsui_flash-with-motion_1q84n_sj5ey_99",
+  "enter": "awsui_enter_1q84n_sj5ey_99",
+  "flash-body": "awsui_flash-body_1q84n_sj5ey_113",
+  "flash-message": "awsui_flash-message_1q84n_sj5ey_113",
+  "flash-header": "awsui_flash-header_1q84n_sj5ey_113",
+  "flash-content": "awsui_flash-content_1q84n_sj5ey_114",
+  "action-button-wrapper": "awsui_action-button-wrapper_1q84n_sj5ey_115",
+  "dismiss-button-wrapper": "awsui_dismiss-button-wrapper_1q84n_sj5ey_116",
+  "flash-icon": "awsui_flash-icon_1q84n_sj5ey_139",
+  "entering": "awsui_entering_1q84n_sj5ey_152",
+  "entered": "awsui_entered_1q84n_sj5ey_173",
+  "exiting": "awsui_exiting_1q84n_sj5ey_278",
+  "stack": "awsui_stack_1q84n_sj5ey_300",
+  "animation-running": "awsui_animation-running_1q84n_sj5ey_300",
+  "item": "awsui_item_1q84n_sj5ey_300",
+  "flash-list-item": "awsui_flash-list-item_1q84n_sj5ey_301",
+  "notification-bar": "awsui_notification-bar_1q84n_sj5ey_302",
+  "collapsed": "awsui_collapsed_1q84n_sj5ey_322",
+  "animation-ready": "awsui_animation-ready_1q84n_sj5ey_322",
+  "expanded-only": "awsui_expanded-only_1q84n_sj5ey_322",
+  "expanded": "awsui_expanded_1q84n_sj5ey_322",
+  "flash": "awsui_flash_1q84n_sj5ey_99",
+  "collapsible": "awsui_collapsible_1q84n_sj5ey_386",
+  "short-list": "awsui_short-list_1q84n_sj5ey_392",
+  "visual-refresh": "awsui_visual-refresh_1q84n_sj5ey_392",
+  "status": "awsui_status_1q84n_sj5ey_605",
+  "header": "awsui_header_1q84n_sj5ey_605",
+  "item-count": "awsui_item-count_1q84n_sj5ey_606",
+  "button": "awsui_button_1q84n_sj5ey_607",
+  "type-count": "awsui_type-count_1q84n_sj5ey_640",
+  "count-number": "awsui_count-number_1q84n_sj5ey_640",
+  "icon": "awsui_icon_1q84n_sj5ey_674",
+  "floating": "awsui_floating_1q84n_sj5ey_715",
+  "flashbar": "awsui_flashbar_1q84n_sj5ey_723",
+  "flash-refresh": "awsui_flash-refresh_1q84n_sj5ey_798",
+  "flash-list": "awsui_flash-list_1q84n_sj5ey_301",
+  "flash-focus-container": "awsui_flash-focus-container_1q84n_sj5ey_819",
+  "flash-text": "awsui_flash-text_1q84n_sj5ey_849",
+  "dismiss-button": "awsui_dismiss-button_1q84n_sj5ey_116",
+  "breakpoint-default": "awsui_breakpoint-default_1q84n_sj5ey_891",
+  "action-button": "awsui_action-button_1q84n_sj5ey_115",
+  "action-slot": "awsui_action-slot_1q84n_sj5ey_901",
+  "flash-type-success": "awsui_flash-type-success_1q84n_sj5ey_905",
+  "flash-type-error": "awsui_flash-type-error_1q84n_sj5ey_909",
+  "flash-type-info": "awsui_flash-type-info_1q84n_sj5ey_913",
+  "flash-type-in-progress": "awsui_flash-type-in-progress_1q84n_sj5ey_914",
+  "flash-type-warning": "awsui_flash-type-warning_1q84n_sj5ey_918"
 };