@cloudscape-design/components-themeable 3.0.1070 → 3.0.1071

package/lib/internal/template/app-layout/visual-refresh-toolbar/index.js

@@ -1,359 +1,46 @@
-import { __rest } from "tslib";
 // 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 { useMergeRefs, useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { unstable_batchedUpdates } from 'react-dom';
 import ScreenreaderOnly from '../../internal/components/screenreader-only';
-import { fireNonCancelableEvent } from '../../internal/events';
-import { useControllable } from '../../internal/hooks/use-controllable';
-import { useIntersectionObserver } from '../../internal/hooks/use-intersection-observer';
-import { useMobile } from '../../internal/hooks/use-mobile';
-import { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';
-import globalVars from '../../internal/styles/global-vars';
-import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
-import { MIN_DRAWER_SIZE, useDrawers } from '../utils/use-drawers';
-import { useFocusControl, useMultipleFocusControl } from '../utils/use-focus-control';
-import { useGlobalScrollPadding } from '../utils/use-global-scroll-padding';
-import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
-import { ActiveDrawersContext } from '../utils/visibility-context';
-import { computeHorizontalLayout, computeSplitPanelOffsets, computeVerticalLayout, CONTENT_PADDING, } from './compute-layout';
 import { AppLayoutVisibilityContext } from './contexts';
-import { AppLayoutDrawer, AppLayoutGlobalDrawers, AppLayoutNavigation, AppLayoutNotifications, AppLayoutSplitPanelBottom, AppLayoutSplitPanelSide, AppLayoutToolbar, } from './internal';
-import { useMultiAppLayout } from './multi-layout';
+import { AppLayoutWidgetizedState } from './internal';
 import { SkeletonLayout } from './skeleton';
-const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
-    var _b, _c;
-    var { ariaLabels, contentHeader, content, navigationOpen, navigationWidth, navigation, navigationHide, onNavigationChange, tools, toolsOpen: controlledToolsOpen, onToolsChange, toolsHide, toolsWidth, contentType, headerVariant, breadcrumbs, notifications, stickyNotifications, splitPanelPreferences: controlledSplitPanelPreferences, splitPanelOpen: controlledSplitPanelOpen, splitPanel, splitPanelSize: controlledSplitPanelSize, onSplitPanelToggle, onSplitPanelResize, onSplitPanelPreferencesChange, disableContentPaddings, minContentWidth, maxContentWidth, placement, navigationTriggerHide } = _a, rest = __rest(_a, ["ariaLabels", "contentHeader", "content", "navigationOpen", "navigationWidth", "navigation", "navigationHide", "onNavigationChange", "tools", "toolsOpen", "onToolsChange", "toolsHide", "toolsWidth", "contentType", "headerVariant", "breadcrumbs", "notifications", "stickyNotifications", "splitPanelPreferences", "splitPanelOpen", "splitPanel", "splitPanelSize", "onSplitPanelToggle", "onSplitPanelResize", "onSplitPanelPreferencesChange", "disableContentPaddings", "minContentWidth", "maxContentWidth", "placement", "navigationTriggerHide"]);
-    const isMobile = useMobile();
-    const { __embeddedViewMode: embeddedViewMode, __forceDeduplicationType: forceDeduplicationType } = rest;
-    const splitPanelControlId = useUniqueId('split-panel');
-    const [toolbarState, setToolbarState] = useState('show');
-    const [toolbarHeight, setToolbarHeight] = useState(0);
-    const [notificationsHeight, setNotificationsHeight] = useState(0);
-    const [navigationAnimationDisabled, setNavigationAnimationDisabled] = useState(true);
-    const [splitPanelAnimationDisabled, setSplitPanelAnimationDisabled] = useState(true);
-    const [isNested, setIsNested] = useState(false);
-    const rootRef = useRef(null);
-    const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {
-        componentName: 'AppLayout',
-        controlledProp: 'toolsOpen',
-        changeHandler: 'onToolsChange',
-    });
-    const onToolsToggle = (open) => {
-        setToolsOpen(open);
-        drawersFocusControl.setFocus();
-        fireNonCancelableEvent(onToolsChange, { open });
-    };
-    const onGlobalDrawerFocus = (drawerId, open) => {
-        globalDrawersFocusControl.setFocus({ force: true, drawerId, open });
-    };
-    const onAddNewActiveDrawer = (drawerId) => {
-        var _a, _b;
-        // If a local drawer is already open, and we attempt to open a new one,
-        // it will replace the existing one instead of opening an additional drawer,
-        // since only one local drawer is supported. Therefore, layout calculations are not necessary.
-        if (activeDrawer && (drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === drawerId))) {
-            return;
-        }
-        // get the size of drawerId. it could be either local or global drawer
-        const combinedDrawers = [...(drawers || []), ...globalDrawers];
-        const newDrawer = combinedDrawers.find(drawer => drawer.id === drawerId);
-        if (!newDrawer) {
-            return;
-        }
-        const newDrawerSize = Math.min((_b = (_a = newDrawer.defaultSize) !== null && _a !== void 0 ? _a : drawerSizes[drawerId]) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
-        //   check if the active drawers could be resized to fit the new drawers
-        //   to do this, we need to take all active drawers, sum up their min sizes, truncate it from resizableSpaceAvailable
-        //   and compare a given number with the new drawer id min size
-        // the total size of all global drawers resized to their min size
-        const availableSpaceForNewDrawer = resizableSpaceAvailable - totalActiveDrawersMinSize;
-        if (availableSpaceForNewDrawer >= newDrawerSize) {
-            return;
-        }
-        // now we made sure we cannot accommodate the new drawer with existing ones
-        closeFirstDrawer();
-    };
-    const { drawers, activeDrawer, minDrawerSize, minGlobalDrawersSizes, activeDrawerSize, ariaLabelsWithDrawers, globalDrawers, activeGlobalDrawers, activeGlobalDrawersIds, activeGlobalDrawersSizes, drawerSizes, drawersOpenQueue, onActiveDrawerChange, onActiveDrawerResize, onActiveGlobalDrawersChange, expandedDrawerId, setExpandedDrawerId, } = useDrawers(Object.assign(Object.assign({}, rest), { onGlobalDrawerFocus, onAddNewActiveDrawer }), ariaLabels, {
-        ariaLabels,
-        toolsHide,
-        toolsOpen,
-        tools,
-        toolsWidth,
-        onToolsToggle,
-    });
-    const onActiveDrawerChangeHandler = (drawerId, params = { initiatedByUserAction: true }) => {
-        onActiveDrawerChange(drawerId, params);
-        drawersFocusControl.setFocus();
-    };
-    const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(controlledSplitPanelOpen, onSplitPanelToggle, false, {
-        componentName: 'AppLayout',
-        controlledProp: 'splitPanelOpen',
-        changeHandler: 'onSplitPanelToggle',
-    });
-    const onSplitPanelToggleHandler = () => {
-        setSplitPanelAnimationDisabled(false);
-        setSplitPanelOpen(!splitPanelOpen);
-        splitPanelFocusControl.setLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });
-        fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });
-    };
-    const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(controlledSplitPanelPreferences, onSplitPanelPreferencesChange, undefined, {
-        componentName: 'AppLayout',
-        controlledProp: 'splitPanelPreferences',
-        changeHandler: 'onSplitPanelPreferencesChange',
-    });
-    const onSplitPanelPreferencesChangeHandler = (detail) => {
-        setSplitPanelPreferences(detail);
-        splitPanelFocusControl.setLastInteraction({ type: 'position' });
-        fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);
-    };
-    const [splitPanelSize = 0, setSplitPanelSize] = useControllable(controlledSplitPanelSize, onSplitPanelResize, getSplitPanelDefaultSize((_b = splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== null && _b !== void 0 ? _b : 'bottom'), { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' });
-    const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);
-    const [splitPanelHeaderBlockSize, setSplitPanelHeaderBlockSize] = useState(0);
-    const onSplitPanelResizeHandler = (size) => {
-        setSplitPanelSize(size);
-        fireNonCancelableEvent(onSplitPanelResize, { size });
-    };
-    const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState({
-        ariaLabel: undefined,
-        displayed: false,
-    });
-    const globalDrawersFocusControl = useMultipleFocusControl(true, activeGlobalDrawersIds);
-    const drawersFocusControl = useFocusControl(!!(activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id), true, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id);
-    const navigationFocusControl = useFocusControl(navigationOpen, navigationTriggerHide);
-    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);
-    const onNavigationToggle = useStableCallback((open) => {
-        setNavigationAnimationDisabled(false);
-        navigationFocusControl.setFocus();
-        fireNonCancelableEvent(onNavigationChange, { open });
-    });
-    useImperativeHandle(forwardRef, () => ({
-        closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),
-        openTools: () => onToolsToggle(true),
-        focusToolsClose: () => drawersFocusControl.setFocus(true),
-        focusActiveDrawer: () => drawersFocusControl.setFocus(true),
-        focusSplitPanel: () => { var _a; return (_a = splitPanelFocusControl.refs.slider.current) === null || _a === void 0 ? void 0 : _a.focus(); },
-        focusNavigation: () => navigationFocusControl.setFocus(true),
-    }));
-    const resolvedStickyNotifications = !!stickyNotifications && !isMobile;
-    //navigation must be null if hidden so toolbar knows to hide the toggle button
-    const resolvedNavigation = navigationHide ? null : navigation || React.createElement(React.Fragment, null);
-    //navigation must not be open if navigationHide is true
-    const resolvedNavigationOpen = !!resolvedNavigation && navigationOpen;
-    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition, maxGlobalDrawersSizes, resizableSpaceAvailable, } = computeHorizontalLayout({
-        activeDrawerSize: activeDrawer ? activeDrawerSize : 0,
-        splitPanelSize,
-        minContentWidth,
-        navigationOpen: resolvedNavigationOpen,
-        navigationWidth,
-        placement,
-        splitPanelOpen,
-        splitPanelPosition: splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position,
-        isMobile,
-        activeGlobalDrawersSizes,
-    });
-    const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });
-    const { registered, toolbarProps } = useMultiAppLayout({
-        forceDeduplicationType,
-        ariaLabels: ariaLabelsWithDrawers,
-        navigation: resolvedNavigation && !navigationTriggerHide,
-        navigationOpen: resolvedNavigationOpen,
-        onNavigationToggle,
-        navigationFocusRef: navigationFocusControl.refs.toggle,
-        breadcrumbs,
-        activeDrawerId: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) !== null && _c !== void 0 ? _c : null,
-        // only pass it down if there are non-empty drawers or tools
-        drawers: (drawers === null || drawers === void 0 ? void 0 : drawers.length) || !toolsHide ? drawers : undefined,
-        globalDrawersFocusControl,
-        globalDrawers: (globalDrawers === null || globalDrawers === void 0 ? void 0 : globalDrawers.length) ? globalDrawers : undefined,
-        activeGlobalDrawersIds,
-        onActiveGlobalDrawersChange,
-        onActiveDrawerChange: onActiveDrawerChangeHandler,
-        drawersFocusRef: drawersFocusControl.refs.toggle,
-        splitPanel,
-        splitPanelToggleProps: Object.assign(Object.assign({}, splitPanelToggleConfig), { active: splitPanelOpen, controlId: splitPanelControlId, position: splitPanelPosition }),
-        splitPanelFocusRef: splitPanelFocusControl.refs.toggle,
-        onSplitPanelToggle: onSplitPanelToggleHandler,
-        expandedDrawerId,
-        setExpandedDrawerId,
-    }, isIntersecting);
-    const hasToolbar = !embeddedViewMode && !!toolbarProps;
-    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar && !breadcrumbs);
-    const verticalOffsets = computeVerticalLayout({
-        topOffset: placement.insetBlockStart,
-        hasVisibleToolbar: hasToolbar && toolbarState !== 'hide',
-        notificationsHeight: notificationsHeight !== null && notificationsHeight !== void 0 ? notificationsHeight : 0,
-        toolbarHeight: toolbarHeight !== null && toolbarHeight !== void 0 ? toolbarHeight : 0,
-        stickyNotifications: resolvedStickyNotifications,
-    });
-    useGlobalScrollPadding(verticalOffsets.header);
-    const appLayoutInternals = {
-        ariaLabels: ariaLabelsWithDrawers,
-        headerVariant,
-        isMobile,
-        breadcrumbs,
-        discoveredBreadcrumbs,
-        stickyNotifications: resolvedStickyNotifications,
-        navigationOpen: resolvedNavigationOpen,
-        navigation: resolvedNavigation,
-        navigationFocusControl,
-        activeDrawer,
-        activeDrawerSize,
-        minDrawerSize,
-        maxDrawerSize,
-        minGlobalDrawersSizes,
-        maxGlobalDrawersSizes,
-        drawers: drawers,
-        globalDrawers,
-        activeGlobalDrawers,
-        activeGlobalDrawersIds,
-        activeGlobalDrawersSizes,
-        onActiveGlobalDrawersChange,
-        drawersFocusControl,
-        globalDrawersFocusControl,
-        splitPanelPosition,
-        splitPanelToggleConfig,
-        splitPanelOpen,
-        splitPanelControlId,
-        splitPanelFocusControl,
-        placement,
-        toolbarState,
-        setToolbarState,
-        verticalOffsets,
-        drawersOpenQueue,
-        setToolbarHeight,
-        setNotificationsHeight,
-        onSplitPanelToggle: onSplitPanelToggleHandler,
-        onNavigationToggle,
-        onActiveDrawerChange: onActiveDrawerChangeHandler,
-        onActiveDrawerResize,
-        splitPanelAnimationDisabled,
-        expandedDrawerId,
-        setExpandedDrawerId,
-    };
-    const splitPanelInternals = {
-        bottomOffset: 0,
-        getMaxHeight: () => {
-            const availableHeight = document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;
-            // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.
-            return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;
-        },
-        maxWidth: maxSplitPanelSize,
-        isForcedPosition: splitPanelForcedPosition,
-        isOpen: splitPanelOpen,
-        leftOffset: 0,
-        onPreferencesChange: onSplitPanelPreferencesChangeHandler,
-        onResize: onSplitPanelResizeHandler,
-        onToggle: onSplitPanelToggleHandler,
-        position: splitPanelPosition,
-        reportSize: size => setSplitPanelReportedSize(size),
-        reportHeaderHeight: size => setSplitPanelHeaderBlockSize(size),
-        headerHeight: splitPanelHeaderBlockSize,
-        rightOffset: 0,
-        size: splitPanelSize,
-        topOffset: 0,
-        setSplitPanelToggle: setSplitPanelToggleConfig,
-        refs: splitPanelFocusControl.refs,
-    };
-    const closeFirstDrawer = useStableCallback(() => {
-        const drawerToClose = drawersOpenQueue[drawersOpenQueue.length - 1];
-        if (activeDrawer && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) === drawerToClose) {
-            onActiveDrawerChange(null, { initiatedByUserAction: true });
-        }
-        else if (activeGlobalDrawersIds.includes(drawerToClose)) {
-            onActiveGlobalDrawersChange(drawerToClose, { initiatedByUserAction: true });
-        }
-    });
-    useEffect(() => {
-        // Close navigation drawer on mobile so that the main content is visible
-        if (isMobile) {
-            onNavigationToggle(false);
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isMobile]);
-    const getTotalActiveDrawersMinSize = () => {
-        var _a;
-        const combinedDrawers = [...(drawers || []), ...globalDrawers];
-        let result = activeGlobalDrawersIds
-            .map(activeDrawerId => {
-            var _a, _b;
-            return Math.min((_b = (_a = combinedDrawers.find(drawer => drawer.id === activeDrawerId)) === null || _a === void 0 ? void 0 : _a.defaultSize) !== null && _b !== void 0 ? _b : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
-        })
-            .reduce((acc, curr) => acc + curr, 0);
-        if (activeDrawer) {
-            result += Math.min((_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _a !== void 0 ? _a : MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);
-        }
-        return result;
-    };
-    const totalActiveDrawersMinSize = getTotalActiveDrawersMinSize();
-    useEffect(() => {
-        if (isMobile) {
-            return;
-        }
-        const activeNavigationWidth = !navigationHide && navigationOpen ? navigationWidth : 0;
-        const scrollWidth = activeNavigationWidth + CONTENT_PADDING + totalActiveDrawersMinSize;
-        const hasHorizontalScroll = scrollWidth > placement.inlineSize;
-        if (hasHorizontalScroll) {
-            if (!navigationHide && navigationOpen) {
-                onNavigationToggle(false);
-                return;
-            }
-            closeFirstDrawer();
-        }
-    }, [
-        totalActiveDrawersMinSize,
-        closeFirstDrawer,
-        isMobile,
-        navigationHide,
-        navigationOpen,
-        navigationWidth,
-        onNavigationToggle,
-        placement.inlineSize,
-    ]);
-    /**
-     * Returns true if the AppLayout is nested
-     * Does not apply to iframe
-     */
-    const getIsNestedInAppLayout = (element) => {
-        var _a;
-        let currentElement = (_a = element === null || element === void 0 ? void 0 : element.parentElement) !== null && _a !== void 0 ? _a : 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;
-    };
+import { useMultiAppLayout } from './skeleton/multi-layout';
+import { getPropsToMerge, mergeProps } from './state/props-merger';
+const AppLayoutStateProvider = ({ forceDeduplicationType, appLayoutProps, stateManager, children }) => {
+    const [appLayoutState, setAppLayoutState] = useState({ isIntersecting: true });
+    const [skeletonAttributes, setSkeletonAttributes] = useState({});
+    // use { fn: } object wrapper to avoid confusion with callback form of setState
+    const [deduplicator, setDeduplicator] = useState({ fn: mergeProps });
+    const [deduplicationProps, setDeduplicationProps] = useState(() => getPropsToMerge(appLayoutProps, appLayoutState));
+    const { registered, toolbarProps } = useMultiAppLayout(forceDeduplicationType, appLayoutState.isIntersecting, deduplicationProps, deduplicator.fn);
     useLayoutEffect(() => {
-        if (!hasToolbar) {
-            setIsNested(getIsNestedInAppLayout(rootRef.current));
-        }
-    }, [hasToolbar]);
-    const splitPanelOffsets = computeSplitPanelOffsets({
-        placement,
-        hasSplitPanel: !!splitPanel,
-        splitPanelOpen,
-        splitPanelPosition,
-        splitPanelFullHeight: splitPanelReportedSize,
-        splitPanelHeaderHeight: splitPanelHeaderBlockSize,
-    });
-    return (React.createElement(AppLayoutVisibilityContext.Provider, { value: isIntersecting },
-        !hasToolbar && breadcrumbs ? React.createElement(ScreenreaderOnly, null, breadcrumbs) : null,
-        React.createElement(SkeletonLayout, { ref: useMergeRefs(intersectionObserverRef, rootRef), isNested: isNested, 
-            // Why not use drawerExpandedMode={!!expandedDrawerId || !!toolbarProps?.expandedDrawerId} instead?
-            // Because in nested layouts, the parent layout hides its main content area,
-            // which means the child layout isn't rendered at all in that case
-            drawerExpandedModeInChildLayout: !!(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.expandedDrawerId), drawerExpandedMode: !!expandedDrawerId, style: Object.assign(Object.assign({ paddingBlockEnd: splitPanelOffsets.mainContentPaddingBlockEnd }, (hasToolbar || !isNested
-                ? {
-                    [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,
-                    [globalVars.stickyVerticalBottomOffset]: `${splitPanelOffsets.stickyVerticalBottomOffset}px`,
-                }
-                : {})), (!isMobile ? { minWidth: `${minContentWidth}px` } : {})), toolbar: hasToolbar && React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutInternals, toolbarProps: toolbarProps }), notifications: notifications && (React.createElement(AppLayoutNotifications, { appLayoutInternals: appLayoutInternals }, notifications)), headerVariant: headerVariant, contentHeader: contentHeader, 
-            // delay rendering the content until registration of this instance is complete
-            content: registered ? content : null, navigation: resolvedNavigation && React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutInternals }), navigationOpen: resolvedNavigationOpen, navigationWidth: navigationWidth, navigationAnimationDisabled: navigationAnimationDisabled, tools: drawers && drawers.length > 0 && React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutInternals }), globalTools: React.createElement(ActiveDrawersContext.Provider, { value: activeGlobalDrawersIds },
-                React.createElement(AppLayoutGlobalDrawers, { appLayoutInternals: appLayoutInternals })), globalToolsOpen: !!activeGlobalDrawersIds.length, toolsOpen: !!activeDrawer, toolsWidth: activeDrawerSize, sideSplitPanel: splitPanelPosition === 'side' && (React.createElement(AppLayoutSplitPanelSide, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), bottomSplitPanel: splitPanelPosition === 'bottom' && (React.createElement(AppLayoutSplitPanelBottom, { appLayoutInternals: appLayoutInternals, splitPanelInternals: splitPanelInternals }, splitPanel)), splitPanelOpen: splitPanelOpen, placement: placement, contentType: contentType, maxContentWidth: maxContentWidth, disableContentPaddings: disableContentPaddings })));
+        stateManager.current.setState = (appLayoutState, skeletonAttributes, deduplicationProps, mergeProps) => {
+            unstable_batchedUpdates(() => {
+                setAppLayoutState(appLayoutState);
+                setSkeletonAttributes(skeletonAttributes);
+                setDeduplicationProps(deduplicationProps);
+                setDeduplicator({ fn: mergeProps });
+            });
+        };
+    }, [stateManager]);
+    const hasToolbar = !!toolbarProps;
+    useEffect(() => {
+        var _a, _b;
+        stateManager.current.hasToolbar = hasToolbar;
+        (_b = (_a = stateManager.current).setToolbar) === null || _b === void 0 ? void 0 : _b.call(_a, hasToolbar);
+    }, [stateManager, hasToolbar]);
+    return React.createElement(React.Fragment, null, children(registered, appLayoutState, toolbarProps, skeletonAttributes));
+};
+const AppLayoutVisualRefreshToolbar = React.forwardRef((props, forwardRef) => {
+    const stateManager = useRef({ setState: undefined, hasToolbar: true, setToolbar: undefined });
+    const { __forceDeduplicationType: forceDeduplicationType, __embeddedViewMode: embeddedViewMode } = props;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(AppLayoutStateProvider, { forceDeduplicationType: forceDeduplicationType, appLayoutProps: props, stateManager: stateManager }, (registered, appLayoutState, toolbarProps, skeletonAttributes) => (React.createElement(AppLayoutVisibilityContext.Provider, { value: appLayoutState.isIntersecting },
+            (embeddedViewMode || !toolbarProps) && props.breadcrumbs ? (React.createElement(ScreenreaderOnly, null, props.breadcrumbs)) : null,
+            React.createElement(SkeletonLayout, { registered: registered, toolbarProps: toolbarProps, appLayoutProps: props, appLayoutState: appLayoutState, skeletonSlotsAttributes: skeletonAttributes })))),
+        React.createElement(AppLayoutWidgetizedState, { forwardRef: forwardRef, appLayoutProps: props, stateManager: stateManager })));
 });
 export default AppLayoutVisualRefreshToolbar;
 //# sourceMappingURL=index.js.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"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 React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';\n\nimport { useMergeRefs, useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { useIntersectionObserver } from '../../internal/hooks/use-intersection-observer';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';\nimport globalVars from '../../internal/styles/global-vars';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport { AppLayoutProps } from '../interfaces';\nimport { SplitPanelProviderProps } from '../split-panel';\nimport { MIN_DRAWER_SIZE, OnChangeParams, useDrawers } from '../utils/use-drawers';\nimport { useFocusControl, useMultipleFocusControl } from '../utils/use-focus-control';\nimport { useGlobalScrollPadding } from '../utils/use-global-scroll-padding';\nimport { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { ActiveDrawersContext } from '../utils/visibility-context';\nimport {\n  computeHorizontalLayout,\n  computeSplitPanelOffsets,\n  computeVerticalLayout,\n  CONTENT_PADDING,\n} from './compute-layout';\nimport { AppLayoutVisibilityContext } from './contexts';\nimport { AppLayoutInternalProps, AppLayoutInternals } from './interfaces';\nimport {\n  AppLayoutDrawer,\n  AppLayoutGlobalDrawers,\n  AppLayoutNavigation,\n  AppLayoutNotifications,\n  AppLayoutSplitPanelBottom,\n  AppLayoutSplitPanelSide,\n  AppLayoutToolbar,\n} from './internal';\nimport { useMultiAppLayout } from './multi-layout';\nimport { SkeletonLayout } from './skeleton';\n\nconst AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLayoutInternalProps>(\n  (\n    {\n      ariaLabels,\n      contentHeader,\n      content,\n      navigationOpen,\n      navigationWidth,\n      navigation,\n      navigationHide,\n      onNavigationChange,\n      tools,\n      toolsOpen: controlledToolsOpen,\n      onToolsChange,\n      toolsHide,\n      toolsWidth,\n      contentType,\n      headerVariant,\n      breadcrumbs,\n      notifications,\n      stickyNotifications,\n      splitPanelPreferences: controlledSplitPanelPreferences,\n      splitPanelOpen: controlledSplitPanelOpen,\n      splitPanel,\n      splitPanelSize: controlledSplitPanelSize,\n      onSplitPanelToggle,\n      onSplitPanelResize,\n      onSplitPanelPreferencesChange,\n      disableContentPaddings,\n      minContentWidth,\n      maxContentWidth,\n      placement,\n      navigationTriggerHide,\n      ...rest\n    },\n    forwardRef\n  ) => {\n    const isMobile = useMobile();\n    const { __embeddedViewMode: embeddedViewMode, __forceDeduplicationType: forceDeduplicationType } = rest as any;\n    const splitPanelControlId = useUniqueId('split-panel');\n    const [toolbarState, setToolbarState] = useState<'show' | 'hide'>('show');\n    const [toolbarHeight, setToolbarHeight] = useState(0);\n    const [notificationsHeight, setNotificationsHeight] = useState(0);\n    const [navigationAnimationDisabled, setNavigationAnimationDisabled] = useState(true);\n    const [splitPanelAnimationDisabled, setSplitPanelAnimationDisabled] = useState(true);\n    const [isNested, setIsNested] = useState(false);\n    const rootRef = useRef<HTMLDivElement>(null);\n\n    const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, false, {\n      componentName: 'AppLayout',\n      controlledProp: 'toolsOpen',\n      changeHandler: 'onToolsChange',\n    });\n    const onToolsToggle = (open: boolean) => {\n      setToolsOpen(open);\n      drawersFocusControl.setFocus();\n      fireNonCancelableEvent(onToolsChange, { open });\n    };\n\n    const onGlobalDrawerFocus = (drawerId: string, open: boolean) => {\n      globalDrawersFocusControl.setFocus({ force: true, drawerId, open });\n    };\n\n    const onAddNewActiveDrawer = (drawerId: string) => {\n      // If a local drawer is already open, and we attempt to open a new one,\n      // it will replace the existing one instead of opening an additional drawer,\n      // since only one local drawer is supported. Therefore, layout calculations are not necessary.\n      if (activeDrawer && drawers?.find(drawer => drawer.id === drawerId)) {\n        return;\n      }\n      // get the size of drawerId. it could be either local or global drawer\n      const combinedDrawers = [...(drawers || []), ...globalDrawers];\n      const newDrawer = combinedDrawers.find(drawer => drawer.id === drawerId);\n      if (!newDrawer) {\n        return;\n      }\n      const newDrawerSize = Math.min(\n        newDrawer.defaultSize ?? drawerSizes[drawerId] ?? MIN_DRAWER_SIZE,\n        MIN_DRAWER_SIZE\n      );\n      //   check if the active drawers could be resized to fit the new drawers\n      //   to do this, we need to take all active drawers, sum up their min sizes, truncate it from resizableSpaceAvailable\n      //   and compare a given number with the new drawer id min size\n\n      // the total size of all global drawers resized to their min size\n      const availableSpaceForNewDrawer = resizableSpaceAvailable - totalActiveDrawersMinSize;\n      if (availableSpaceForNewDrawer >= newDrawerSize) {\n        return;\n      }\n\n      // now we made sure we cannot accommodate the new drawer with existing ones\n      closeFirstDrawer();\n    };\n\n    const {\n      drawers,\n      activeDrawer,\n      minDrawerSize,\n      minGlobalDrawersSizes,\n      activeDrawerSize,\n      ariaLabelsWithDrawers,\n      globalDrawers,\n      activeGlobalDrawers,\n      activeGlobalDrawersIds,\n      activeGlobalDrawersSizes,\n      drawerSizes,\n      drawersOpenQueue,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n      onActiveGlobalDrawersChange,\n      expandedDrawerId,\n      setExpandedDrawerId,\n    } = useDrawers({ ...rest, onGlobalDrawerFocus, onAddNewActiveDrawer }, ariaLabels, {\n      ariaLabels,\n      toolsHide,\n      toolsOpen,\n      tools,\n      toolsWidth,\n      onToolsToggle,\n    });\n\n    const onActiveDrawerChangeHandler = (\n      drawerId: string | null,\n      params: OnChangeParams = { initiatedByUserAction: true }\n    ) => {\n      onActiveDrawerChange(drawerId, params);\n      drawersFocusControl.setFocus();\n    };\n\n    const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(\n      controlledSplitPanelOpen,\n      onSplitPanelToggle,\n      false,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelOpen',\n        changeHandler: 'onSplitPanelToggle',\n      }\n    );\n\n    const onSplitPanelToggleHandler = () => {\n      setSplitPanelAnimationDisabled(false);\n      setSplitPanelOpen(!splitPanelOpen);\n      splitPanelFocusControl.setLastInteraction({ type: splitPanelOpen ? 'close' : 'open' });\n      fireNonCancelableEvent(onSplitPanelToggle, { open: !splitPanelOpen });\n    };\n\n    const [splitPanelPreferences, setSplitPanelPreferences] = useControllable(\n      controlledSplitPanelPreferences,\n      onSplitPanelPreferencesChange,\n      undefined,\n      {\n        componentName: 'AppLayout',\n        controlledProp: 'splitPanelPreferences',\n        changeHandler: 'onSplitPanelPreferencesChange',\n      }\n    );\n\n    const onSplitPanelPreferencesChangeHandler = (detail: AppLayoutProps.SplitPanelPreferences) => {\n      setSplitPanelPreferences(detail);\n      splitPanelFocusControl.setLastInteraction({ type: 'position' });\n      fireNonCancelableEvent(onSplitPanelPreferencesChange, detail);\n    };\n\n    const [splitPanelSize = 0, setSplitPanelSize] = useControllable(\n      controlledSplitPanelSize,\n      onSplitPanelResize,\n      getSplitPanelDefaultSize(splitPanelPreferences?.position ?? 'bottom'),\n      { componentName: 'AppLayout', controlledProp: 'splitPanelSize', changeHandler: 'onSplitPanelResize' }\n    );\n\n    const [splitPanelReportedSize, setSplitPanelReportedSize] = useState(0);\n    const [splitPanelHeaderBlockSize, setSplitPanelHeaderBlockSize] = useState(0);\n\n    const onSplitPanelResizeHandler = (size: number) => {\n      setSplitPanelSize(size);\n      fireNonCancelableEvent(onSplitPanelResize, { size });\n    };\n\n    const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState<SplitPanelSideToggleProps>({\n      ariaLabel: undefined,\n      displayed: false,\n    });\n\n    const globalDrawersFocusControl = useMultipleFocusControl(true, activeGlobalDrawersIds);\n    const drawersFocusControl = useFocusControl(!!activeDrawer?.id, true, activeDrawer?.id);\n    const navigationFocusControl = useFocusControl(navigationOpen, navigationTriggerHide);\n    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);\n\n    const onNavigationToggle = useStableCallback((open: boolean) => {\n      setNavigationAnimationDisabled(false);\n      navigationFocusControl.setFocus();\n      fireNonCancelableEvent(onNavigationChange, { open });\n    });\n\n    useImperativeHandle(forwardRef, () => ({\n      closeNavigationIfNecessary: () => isMobile && onNavigationToggle(false),\n      openTools: () => onToolsToggle(true),\n      focusToolsClose: () => drawersFocusControl.setFocus(true),\n      focusActiveDrawer: () => drawersFocusControl.setFocus(true),\n      focusSplitPanel: () => splitPanelFocusControl.refs.slider.current?.focus(),\n      focusNavigation: () => navigationFocusControl.setFocus(true),\n    }));\n\n    const resolvedStickyNotifications = !!stickyNotifications && !isMobile;\n    //navigation must be null if hidden so toolbar knows to hide the toggle button\n    const resolvedNavigation = navigationHide ? null : navigation || <></>;\n    //navigation must not be open if navigationHide is true\n    const resolvedNavigationOpen = !!resolvedNavigation && navigationOpen;\n    const {\n      maxDrawerSize,\n      maxSplitPanelSize,\n      splitPanelForcedPosition,\n      splitPanelPosition,\n      maxGlobalDrawersSizes,\n      resizableSpaceAvailable,\n    } = computeHorizontalLayout({\n      activeDrawerSize: activeDrawer ? activeDrawerSize : 0,\n      splitPanelSize,\n      minContentWidth,\n      navigationOpen: resolvedNavigationOpen,\n      navigationWidth,\n      placement,\n      splitPanelOpen,\n      splitPanelPosition: splitPanelPreferences?.position,\n      isMobile,\n      activeGlobalDrawersSizes,\n    });\n\n    const { ref: intersectionObserverRef, isIntersecting } = useIntersectionObserver({ initialState: true });\n    const { registered, toolbarProps } = useMultiAppLayout(\n      {\n        forceDeduplicationType,\n        ariaLabels: ariaLabelsWithDrawers,\n        navigation: resolvedNavigation && !navigationTriggerHide,\n        navigationOpen: resolvedNavigationOpen,\n        onNavigationToggle,\n        navigationFocusRef: navigationFocusControl.refs.toggle,\n        breadcrumbs,\n        activeDrawerId: activeDrawer?.id ?? null,\n        // only pass it down if there are non-empty drawers or tools\n        drawers: drawers?.length || !toolsHide ? drawers : undefined,\n        globalDrawersFocusControl,\n        globalDrawers: globalDrawers?.length ? globalDrawers : undefined,\n        activeGlobalDrawersIds,\n        onActiveGlobalDrawersChange,\n        onActiveDrawerChange: onActiveDrawerChangeHandler,\n        drawersFocusRef: drawersFocusControl.refs.toggle,\n        splitPanel,\n        splitPanelToggleProps: {\n          ...splitPanelToggleConfig,\n          active: splitPanelOpen,\n          controlId: splitPanelControlId,\n          position: splitPanelPosition,\n        },\n        splitPanelFocusRef: splitPanelFocusControl.refs.toggle,\n        onSplitPanelToggle: onSplitPanelToggleHandler,\n        expandedDrawerId,\n        setExpandedDrawerId,\n      },\n      isIntersecting\n    );\n\n    const hasToolbar = !embeddedViewMode && !!toolbarProps;\n    const discoveredBreadcrumbs = useGetGlobalBreadcrumbs(hasToolbar && !breadcrumbs);\n\n    const verticalOffsets = computeVerticalLayout({\n      topOffset: placement.insetBlockStart,\n      hasVisibleToolbar: hasToolbar && toolbarState !== 'hide',\n      notificationsHeight: notificationsHeight ?? 0,\n      toolbarHeight: toolbarHeight ?? 0,\n      stickyNotifications: resolvedStickyNotifications,\n    });\n\n    useGlobalScrollPadding(verticalOffsets.header);\n\n    const appLayoutInternals: AppLayoutInternals = {\n      ariaLabels: ariaLabelsWithDrawers,\n      headerVariant,\n      isMobile,\n      breadcrumbs,\n      discoveredBreadcrumbs,\n      stickyNotifications: resolvedStickyNotifications,\n      navigationOpen: resolvedNavigationOpen,\n      navigation: resolvedNavigation,\n      navigationFocusControl,\n      activeDrawer,\n      activeDrawerSize,\n      minDrawerSize,\n      maxDrawerSize,\n      minGlobalDrawersSizes,\n      maxGlobalDrawersSizes,\n      drawers: drawers!,\n      globalDrawers,\n      activeGlobalDrawers,\n      activeGlobalDrawersIds,\n      activeGlobalDrawersSizes,\n      onActiveGlobalDrawersChange,\n      drawersFocusControl,\n      globalDrawersFocusControl,\n      splitPanelPosition,\n      splitPanelToggleConfig,\n      splitPanelOpen,\n      splitPanelControlId,\n      splitPanelFocusControl,\n      placement,\n      toolbarState,\n      setToolbarState,\n      verticalOffsets,\n      drawersOpenQueue,\n      setToolbarHeight,\n      setNotificationsHeight,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n      onNavigationToggle,\n      onActiveDrawerChange: onActiveDrawerChangeHandler,\n      onActiveDrawerResize,\n      splitPanelAnimationDisabled,\n      expandedDrawerId,\n      setExpandedDrawerId,\n    };\n\n    const splitPanelInternals: SplitPanelProviderProps = {\n      bottomOffset: 0,\n      getMaxHeight: () => {\n        const availableHeight =\n          document.documentElement.clientHeight - placement.insetBlockStart - placement.insetBlockEnd;\n        // If the page is likely zoomed in at 200%, allow the split panel to fill the content area.\n        return availableHeight < 400 ? availableHeight - 40 : availableHeight - 250;\n      },\n      maxWidth: maxSplitPanelSize,\n      isForcedPosition: splitPanelForcedPosition,\n      isOpen: splitPanelOpen,\n      leftOffset: 0,\n      onPreferencesChange: onSplitPanelPreferencesChangeHandler,\n      onResize: onSplitPanelResizeHandler,\n      onToggle: onSplitPanelToggleHandler,\n      position: splitPanelPosition,\n      reportSize: size => setSplitPanelReportedSize(size),\n      reportHeaderHeight: size => setSplitPanelHeaderBlockSize(size),\n      headerHeight: splitPanelHeaderBlockSize,\n      rightOffset: 0,\n      size: splitPanelSize,\n      topOffset: 0,\n      setSplitPanelToggle: setSplitPanelToggleConfig,\n      refs: splitPanelFocusControl.refs,\n    };\n\n    const closeFirstDrawer = useStableCallback(() => {\n      const drawerToClose = drawersOpenQueue[drawersOpenQueue.length - 1];\n      if (activeDrawer && activeDrawer?.id === drawerToClose) {\n        onActiveDrawerChange(null, { initiatedByUserAction: true });\n      } else if (activeGlobalDrawersIds.includes(drawerToClose)) {\n        onActiveGlobalDrawersChange(drawerToClose, { initiatedByUserAction: true });\n      }\n    });\n\n    useEffect(() => {\n      // Close navigation drawer on mobile so that the main content is visible\n      if (isMobile) {\n        onNavigationToggle(false);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [isMobile]);\n\n    const getTotalActiveDrawersMinSize = () => {\n      const combinedDrawers = [...(drawers || []), ...globalDrawers];\n      let result = activeGlobalDrawersIds\n        .map(activeDrawerId =>\n          Math.min(\n            combinedDrawers.find(drawer => drawer.id === activeDrawerId)?.defaultSize ?? MIN_DRAWER_SIZE,\n            MIN_DRAWER_SIZE\n          )\n        )\n        .reduce((acc, curr) => acc + curr, 0);\n      if (activeDrawer) {\n        result += Math.min(activeDrawer?.defaultSize ?? MIN_DRAWER_SIZE, MIN_DRAWER_SIZE);\n      }\n\n      return result;\n    };\n\n    const totalActiveDrawersMinSize = getTotalActiveDrawersMinSize();\n\n    useEffect(() => {\n      if (isMobile) {\n        return;\n      }\n\n      const activeNavigationWidth = !navigationHide && navigationOpen ? navigationWidth : 0;\n      const scrollWidth = activeNavigationWidth + CONTENT_PADDING + totalActiveDrawersMinSize;\n      const hasHorizontalScroll = scrollWidth > placement.inlineSize;\n      if (hasHorizontalScroll) {\n        if (!navigationHide && navigationOpen) {\n          onNavigationToggle(false);\n          return;\n        }\n\n        closeFirstDrawer();\n      }\n    }, [\n      totalActiveDrawersMinSize,\n      closeFirstDrawer,\n      isMobile,\n      navigationHide,\n      navigationOpen,\n      navigationWidth,\n      onNavigationToggle,\n      placement.inlineSize,\n    ]);\n\n    /**\n     * Returns true if the AppLayout is nested\n     * Does not apply to iframe\n     */\n    const getIsNestedInAppLayout = (element: HTMLElement | null): boolean => {\n      let currentElement: Element | null = element?.parentElement ?? null;\n\n      // this traverse is needed only for JSDOM\n      // in real browsers the globalVar will be propagated to all descendants and this loops exits after initial iteration\n      while (currentElement) {\n        if (getComputedStyle(currentElement).getPropertyValue(globalVars.stickyVerticalTopOffset)) {\n          return true;\n        }\n        currentElement = currentElement.parentElement;\n      }\n\n      return false;\n    };\n\n    useLayoutEffect(() => {\n      if (!hasToolbar) {\n        setIsNested(getIsNestedInAppLayout(rootRef.current));\n      }\n    }, [hasToolbar]);\n\n    const splitPanelOffsets = computeSplitPanelOffsets({\n      placement,\n      hasSplitPanel: !!splitPanel,\n      splitPanelOpen,\n      splitPanelPosition,\n      splitPanelFullHeight: splitPanelReportedSize,\n      splitPanelHeaderHeight: splitPanelHeaderBlockSize,\n    });\n\n    return (\n      <AppLayoutVisibilityContext.Provider value={isIntersecting}>\n        {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */}\n        {!hasToolbar && breadcrumbs ? <ScreenreaderOnly>{breadcrumbs}</ScreenreaderOnly> : null}\n        <SkeletonLayout\n          ref={useMergeRefs(intersectionObserverRef, rootRef)}\n          isNested={isNested}\n          // Why not use drawerExpandedMode={!!expandedDrawerId || !!toolbarProps?.expandedDrawerId} instead?\n          // Because in nested layouts, the parent layout hides its main content area,\n          // which means the child layout isn't rendered at all in that case\n          drawerExpandedModeInChildLayout={!!toolbarProps?.expandedDrawerId}\n          drawerExpandedMode={!!expandedDrawerId}\n          style={{\n            paddingBlockEnd: splitPanelOffsets.mainContentPaddingBlockEnd,\n            ...(hasToolbar || !isNested\n              ? {\n                  [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,\n                  [globalVars.stickyVerticalBottomOffset]: `${splitPanelOffsets.stickyVerticalBottomOffset}px`,\n                }\n              : {}),\n            ...(!isMobile ? { minWidth: `${minContentWidth}px` } : {}),\n          }}\n          toolbar={\n            hasToolbar && <AppLayoutToolbar appLayoutInternals={appLayoutInternals} toolbarProps={toolbarProps} />\n          }\n          notifications={\n            notifications && (\n              <AppLayoutNotifications appLayoutInternals={appLayoutInternals}>{notifications}</AppLayoutNotifications>\n            )\n          }\n          headerVariant={headerVariant}\n          contentHeader={contentHeader}\n          // delay rendering the content until registration of this instance is complete\n          content={registered ? content : null}\n          navigation={resolvedNavigation && <AppLayoutNavigation appLayoutInternals={appLayoutInternals} />}\n          navigationOpen={resolvedNavigationOpen}\n          navigationWidth={navigationWidth}\n          navigationAnimationDisabled={navigationAnimationDisabled}\n          tools={drawers && drawers.length > 0 && <AppLayoutDrawer appLayoutInternals={appLayoutInternals} />}\n          globalTools={\n            <ActiveDrawersContext.Provider value={activeGlobalDrawersIds}>\n              <AppLayoutGlobalDrawers appLayoutInternals={appLayoutInternals} />\n            </ActiveDrawersContext.Provider>\n          }\n          globalToolsOpen={!!activeGlobalDrawersIds.length}\n          toolsOpen={!!activeDrawer}\n          toolsWidth={activeDrawerSize}\n          sideSplitPanel={\n            splitPanelPosition === 'side' && (\n              <AppLayoutSplitPanelSide\n                appLayoutInternals={appLayoutInternals}\n                splitPanelInternals={splitPanelInternals}\n              >\n                {splitPanel}\n              </AppLayoutSplitPanelSide>\n            )\n          }\n          bottomSplitPanel={\n            splitPanelPosition === 'bottom' && (\n              <AppLayoutSplitPanelBottom\n                appLayoutInternals={appLayoutInternals}\n                splitPanelInternals={splitPanelInternals}\n              >\n                {splitPanel}\n              </AppLayoutSplitPanelBottom>\n            )\n          }\n          splitPanelOpen={splitPanelOpen}\n          placement={placement}\n          contentType={contentType}\n          maxContentWidth={maxContentWidth}\n          disableContentPaddings={disableContentPaddings}\n        />\n      </AppLayoutVisibilityContext.Provider>\n    );\n  }\n);\n\nexport default AppLayoutVisualRefreshToolbar;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"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 React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { unstable_batchedUpdates } from 'react-dom';\n\nimport ScreenreaderOnly from '../../internal/components/screenreader-only';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutVisibilityContext } from './contexts';\nimport { AppLayoutInternalProps, AppLayoutPendingState } from './interfaces';\nimport { AppLayoutWidgetizedState } from './internal';\nimport { SkeletonLayout } from './skeleton';\nimport { SkeletonSlotsAttributes } from './skeleton/interfaces';\nimport { DeduplicationType, useMultiAppLayout } from './skeleton/multi-layout';\nimport { StateManager } from './state';\nimport { getPropsToMerge, mergeProps } from './state/props-merger';\nimport { ToolbarProps } from './toolbar';\n\nconst AppLayoutStateProvider: React.FC<{\n  forceDeduplicationType: DeduplicationType;\n  appLayoutProps: AppLayoutInternalProps;\n  stateManager: React.MutableRefObject<StateManager>;\n  children: (\n    registered: boolean,\n    appLayoutState: AppLayoutPendingState,\n    toolbarProps: ToolbarProps | null,\n    skeletonAttributes: SkeletonSlotsAttributes\n  ) => React.ReactNode;\n}> = ({ forceDeduplicationType, appLayoutProps, stateManager, children }) => {\n  const [appLayoutState, setAppLayoutState] = useState<AppLayoutPendingState>({ isIntersecting: true });\n  const [skeletonAttributes, setSkeletonAttributes] = useState<SkeletonSlotsAttributes>({});\n  // use { fn: } object wrapper to avoid confusion with callback form of setState\n  const [deduplicator, setDeduplicator] = useState({ fn: mergeProps });\n  const [deduplicationProps, setDeduplicationProps] = useState(() => getPropsToMerge(appLayoutProps, appLayoutState));\n\n  const { registered, toolbarProps } = useMultiAppLayout(\n    forceDeduplicationType,\n    appLayoutState.isIntersecting,\n    deduplicationProps,\n    deduplicator.fn\n  );\n\n  useLayoutEffect(() => {\n    stateManager.current.setState = (appLayoutState, skeletonAttributes, deduplicationProps, mergeProps) => {\n      unstable_batchedUpdates(() => {\n        setAppLayoutState(appLayoutState);\n        setSkeletonAttributes(skeletonAttributes);\n        setDeduplicationProps(deduplicationProps);\n        setDeduplicator({ fn: mergeProps });\n      });\n    };\n  }, [stateManager]);\n\n  const hasToolbar = !!toolbarProps;\n  useEffect(() => {\n    stateManager.current.hasToolbar = hasToolbar;\n    stateManager.current.setToolbar?.(hasToolbar);\n  }, [stateManager, hasToolbar]);\n\n  return <>{children(registered, appLayoutState, toolbarProps, skeletonAttributes)}</>;\n};\n\nconst AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLayoutInternalProps>(\n  (props, forwardRef) => {\n    const stateManager = useRef<StateManager>({ setState: undefined, hasToolbar: true, setToolbar: undefined });\n    const { __forceDeduplicationType: forceDeduplicationType, __embeddedViewMode: embeddedViewMode } = props as any;\n\n    return (\n      <>\n        <AppLayoutStateProvider\n          forceDeduplicationType={forceDeduplicationType}\n          appLayoutProps={props}\n          stateManager={stateManager}\n        >\n          {(registered, appLayoutState, toolbarProps, skeletonAttributes) => (\n            <AppLayoutVisibilityContext.Provider value={appLayoutState.isIntersecting}>\n              {/* Rendering a hidden copy of breadcrumbs to trigger their deduplication */}\n              {(embeddedViewMode || !toolbarProps) && props.breadcrumbs ? (\n                <ScreenreaderOnly>{props.breadcrumbs}</ScreenreaderOnly>\n              ) : null}\n              <SkeletonLayout\n                registered={registered}\n                toolbarProps={toolbarProps}\n                appLayoutProps={props}\n                appLayoutState={appLayoutState}\n                skeletonSlotsAttributes={skeletonAttributes}\n              />\n            </AppLayoutVisibilityContext.Provider>\n          )}\n        </AppLayoutStateProvider>\n        <AppLayoutWidgetizedState forwardRef={forwardRef} appLayoutProps={props} stateManager={stateManager} />\n      </>\n    );\n  }\n);\n\nexport default AppLayoutVisualRefreshToolbar;\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts

@@ -1,7 +1,9 @@
 import React from 'react';
 import { BreadcrumbGroupProps } from '../../breadcrumb-group/interfaces';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
+import { SomeOptional } from '../../internal/types';
 import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';
+import { SplitPanelProviderProps } from '../split-panel';
 import { OnChangeParams } from '../utils/use-drawers';
 import { FocusControlMultipleStates, FocusControlState } from '../utils/use-focus-control';
 import { SplitPanelFocusControlState } from '../utils/use-split-panel-focus-control';
@@ -63,4 +65,22 @@ export interface AppLayoutInternals {
     expandedDrawerId: string | null;
     setExpandedDrawerId: (value: string | null) => void;
 }
+interface AppLayoutWidgetizedState extends AppLayoutInternals {
+    isNested: boolean;
+    verticalOffsets: VerticalLayoutOutput;
+    navigationAnimationDisabled: boolean;
+    splitPanelOffsets: {
+        stickyVerticalBottomOffset: number;
+        mainContentPaddingBlockEnd: number | undefined;
+    };
+}
+export interface AppLayoutState {
+    rootRef: React.Ref<HTMLElement>;
+    isIntersecting: boolean;
+    widgetizedState: AppLayoutWidgetizedState;
+    appLayoutInternals: AppLayoutInternals;
+    splitPanelInternals: SplitPanelProviderProps;
+}
+export type AppLayoutPendingState = SomeOptional<AppLayoutState, 'appLayoutInternals' | 'splitPanelInternals' | 'widgetizedState' | 'rootRef'>;
+export {};
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/app-layout/visual-refresh-toolbar/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { BreadcrumbGroupProps } from '../../breadcrumb-group/interfaces';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { OnChangeParams } from '../utils/use-drawers';\nimport { FocusControlMultipleStates, FocusControlState } from '../utils/use-focus-control';\nimport { SplitPanelFocusControlState } from '../utils/use-split-panel-focus-control';\nimport { VerticalLayoutOutput } from './compute-layout';\n\nexport interface AppLayoutInternalProps extends AppLayoutPropsWithDefaults {\n  navigationTriggerHide?: boolean;\n}\n\nexport type InternalDrawer = AppLayoutProps.Drawer & {\n  defaultActive?: boolean;\n  isExpandable?: boolean;\n  ariaLabels: AppLayoutProps.Drawer['ariaLabels'] & { expandedModeButton?: string };\n};\n\n// Widgetization notice: structures in this file are shared multiple app layout instances, possibly different minor versions.\n// Treat these structures as an API and do not make incompatible changes.\nexport interface AppLayoutInternals {\n  ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];\n  headerVariant: AppLayoutPropsWithDefaults['headerVariant'];\n  placement: AppLayoutPropsWithDefaults['placement'];\n  navigationOpen: AppLayoutPropsWithDefaults['navigationOpen'];\n  navigationFocusControl: FocusControlState;\n  navigation: React.ReactNode;\n  splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];\n  splitPanelOpen: boolean;\n  splitPanelControlId: string;\n  splitPanelFocusControl: SplitPanelFocusControlState;\n  splitPanelToggleConfig: SplitPanelSideToggleProps;\n  isMobile: boolean;\n  activeDrawer: InternalDrawer | undefined;\n  activeDrawerSize: number;\n  minDrawerSize: number;\n  maxDrawerSize: number;\n  minGlobalDrawersSizes: Record<string, number>;\n  maxGlobalDrawersSizes: Record<string, number>;\n  drawers: ReadonlyArray<InternalDrawer>;\n  drawersFocusControl: FocusControlState;\n  globalDrawersFocusControl: FocusControlMultipleStates;\n  activeGlobalDrawersIds: ReadonlyArray<string>;\n  activeGlobalDrawers: ReadonlyArray<InternalDrawer>;\n  globalDrawers: ReadonlyArray<InternalDrawer>;\n  activeGlobalDrawersSizes: Record<string, number>;\n  stickyNotifications: AppLayoutPropsWithDefaults['stickyNotifications'];\n  breadcrumbs: React.ReactNode;\n  discoveredBreadcrumbs: BreadcrumbGroupProps | null;\n  toolbarState: 'show' | 'hide';\n  setToolbarState: (state: 'show' | 'hide') => void;\n  verticalOffsets: VerticalLayoutOutput;\n  drawersOpenQueue: ReadonlyArray<string>;\n  setNotificationsHeight: (height: number) => void;\n  setToolbarHeight: (height: number) => void;\n  onSplitPanelToggle: () => void;\n  onNavigationToggle: (open: boolean) => void;\n  onActiveDrawerChange: (newDrawerId: string | null, params: OnChangeParams) => void;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  onActiveGlobalDrawersChange: (newDrawerId: string, params: OnChangeParams) => void;\n  splitPanelAnimationDisabled?: boolean;\n  expandedDrawerId: string | null;\n  setExpandedDrawerId: (value: string | null) => void;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\n\nimport { BreadcrumbGroupProps } from '../../breadcrumb-group/interfaces';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { SomeOptional } from '../../internal/types';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { SplitPanelProviderProps } from '../split-panel';\nimport { OnChangeParams } from '../utils/use-drawers';\nimport { FocusControlMultipleStates, FocusControlState } from '../utils/use-focus-control';\nimport { SplitPanelFocusControlState } from '../utils/use-split-panel-focus-control';\nimport { VerticalLayoutOutput } from './compute-layout';\n\nexport interface AppLayoutInternalProps extends AppLayoutPropsWithDefaults {\n  navigationTriggerHide?: boolean;\n}\n\nexport type InternalDrawer = AppLayoutProps.Drawer & {\n  defaultActive?: boolean;\n  isExpandable?: boolean;\n  ariaLabels: AppLayoutProps.Drawer['ariaLabels'] & { expandedModeButton?: string };\n};\n\n// Widgetization notice: structures in this file are shared multiple app layout instances, possibly different minor versions.\n// Treat these structures as an API and do not make incompatible changes.\n// Legacy widget interface\nexport interface AppLayoutInternals {\n  ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];\n  headerVariant: AppLayoutPropsWithDefaults['headerVariant'];\n  placement: AppLayoutPropsWithDefaults['placement'];\n  navigationOpen: AppLayoutPropsWithDefaults['navigationOpen'];\n  navigationFocusControl: FocusControlState;\n  navigation: React.ReactNode;\n  splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];\n  splitPanelOpen: boolean;\n  splitPanelControlId: string;\n  splitPanelFocusControl: SplitPanelFocusControlState;\n  splitPanelToggleConfig: SplitPanelSideToggleProps;\n  isMobile: boolean;\n  activeDrawer: InternalDrawer | undefined;\n  activeDrawerSize: number;\n  minDrawerSize: number;\n  maxDrawerSize: number;\n  minGlobalDrawersSizes: Record<string, number>;\n  maxGlobalDrawersSizes: Record<string, number>;\n  drawers: ReadonlyArray<InternalDrawer>;\n  drawersFocusControl: FocusControlState;\n  globalDrawersFocusControl: FocusControlMultipleStates;\n  activeGlobalDrawersIds: ReadonlyArray<string>;\n  activeGlobalDrawers: ReadonlyArray<InternalDrawer>;\n  globalDrawers: ReadonlyArray<InternalDrawer>;\n  activeGlobalDrawersSizes: Record<string, number>;\n  stickyNotifications: AppLayoutPropsWithDefaults['stickyNotifications'];\n  breadcrumbs: React.ReactNode;\n  discoveredBreadcrumbs: BreadcrumbGroupProps | null;\n  toolbarState: 'show' | 'hide';\n  setToolbarState: (state: 'show' | 'hide') => void;\n  verticalOffsets: VerticalLayoutOutput;\n  drawersOpenQueue: ReadonlyArray<string>;\n  setNotificationsHeight: (height: number) => void;\n  setToolbarHeight: (height: number) => void;\n  onSplitPanelToggle: () => void;\n  onNavigationToggle: (open: boolean) => void;\n  onActiveDrawerChange: (newDrawerId: string | null, params: OnChangeParams) => void;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  onActiveGlobalDrawersChange: (newDrawerId: string, params: OnChangeParams) => void;\n  splitPanelAnimationDisabled?: boolean;\n  expandedDrawerId: string | null;\n  setExpandedDrawerId: (value: string | null) => void;\n}\n\ninterface AppLayoutWidgetizedState extends AppLayoutInternals {\n  isNested: boolean;\n  verticalOffsets: VerticalLayoutOutput;\n  navigationAnimationDisabled: boolean;\n  splitPanelOffsets: {\n    stickyVerticalBottomOffset: number;\n    mainContentPaddingBlockEnd: number | undefined;\n  };\n}\n\n// New widget interface\nexport interface AppLayoutState {\n  rootRef: React.Ref<HTMLElement>;\n  isIntersecting: boolean;\n  // new state management\n  widgetizedState: AppLayoutWidgetizedState;\n  // the old object shape for backward compatibility\n  appLayoutInternals: AppLayoutInternals;\n  splitPanelInternals: SplitPanelProviderProps;\n}\n\nexport type AppLayoutPendingState = SomeOptional<\n  AppLayoutState,\n  'appLayoutInternals' | 'splitPanelInternals' | 'widgetizedState' | 'rootRef'\n>;\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const AppLayoutNavigation: typeof import("./navigation").AppLayoutNavigationImplementation;
 export declare const AppLayoutDrawer: typeof import("./drawer").AppLayoutDrawerImplementation;
 export declare const AppLayoutGlobalDrawers: typeof import("./drawer").AppLayoutGlobalDrawersImplementation;
@@ -5,4 +6,9 @@ export declare const AppLayoutNotifications: typeof import("./notifications").Ap
 export declare const AppLayoutToolbar: typeof import("./toolbar").AppLayoutToolbarImplementation;
 export declare const AppLayoutSplitPanelBottom: typeof import("./split-panel").AppLayoutSplitPanelDrawerBottomImplementation;
 export declare const AppLayoutSplitPanelSide: typeof import("./split-panel").AppLayoutSplitPanelDrawerSideImplementation;
+export declare const AppLayoutBeforeMainSlot: ({ toolbarProps, appLayoutState, appLayoutProps }: import("./skeleton/interfaces").SkeletonPartProps) => JSX.Element;
+export declare const AppLayoutAfterMainSlot: ({ appLayoutState, appLayoutProps }: import("./skeleton/interfaces").SkeletonPartProps) => JSX.Element | null;
+export declare const AppLayoutTopContentSlot: ({ appLayoutProps, appLayoutState }: import("./skeleton/interfaces").SkeletonPartProps) => JSX.Element | null;
+export declare const AppLayoutBottomContentSlot: ({ appLayoutState, appLayoutProps }: import("./skeleton/interfaces").SkeletonPartProps) => JSX.Element | null;
+export declare const AppLayoutWidgetizedState: ({ appLayoutProps, stateManager, forwardRef }: import("./state").AppLayoutStateProps) => JSX.Element;
 //# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/app-layout/visual-refresh-toolbar/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/internal.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,mBAAmB,iEAAwC,CAAC;AACzE,eAAO,MAAM,eAAe,yDAAoC,CAAC;AACjE,eAAO,MAAM,sBAAsB,gEAA2C,CAAC;AAC/E,eAAO,MAAM,sBAAsB,uEAA2C,CAAC;AAC/E,eAAO,MAAM,gBAAgB,2DAAqC,CAAC;AACnE,eAAO,MAAM,yBAAyB,8EAAoD,CAAC;AAC3F,eAAO,MAAM,uBAAuB,4EAAkD,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/internal.tsx"],"names":[],"mappings":";AAsBA,eAAO,MAAM,mBAAmB,iEAAwC,CAAC;AACzE,eAAO,MAAM,eAAe,yDAAoC,CAAC;AACjE,eAAO,MAAM,sBAAsB,gEAA2C,CAAC;AAC/E,eAAO,MAAM,sBAAsB,uEAA2C,CAAC;AAC/E,eAAO,MAAM,gBAAgB,2DAAqC,CAAC;AACnE,eAAO,MAAM,yBAAyB,8EAAoD,CAAC;AAC3F,eAAO,MAAM,uBAAuB,4EAAkD,CAAC;AAGvF,eAAO,MAAM,uBAAuB,sHAEnC,CAAC;AACF,eAAO,MAAM,sBAAsB,+GAElC,CAAC;AACF,eAAO,MAAM,uBAAuB,+GAEnC,CAAC;AACF,eAAO,MAAM,0BAA0B,+GAEtC,CAAC;AACF,eAAO,MAAM,wBAAwB,sGAEpC,CAAC"}