@cloudscape-design/components-themeable 3.0.679 → 3.0.680

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

@@ -0,0 +1,172 @@
+import { __rest } from "tslib";
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useImperativeHandle, useState } from 'react';
+import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { fireNonCancelableEvent } from '../../internal/events';
+import { useFocusControl } from '../utils/use-focus-control';
+import { useMobile } from '../../internal/hooks/use-mobile';
+import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
+import { useDrawers } from '../utils/use-drawers';
+import { useUniqueId } from '../../internal/hooks/use-unique-id';
+import { computeHorizontalLayout, computeVerticalLayout } from './compute-layout';
+import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
+import globalVars from '../../internal/styles/global-vars';
+import { SkeletonLayout } from './skeleton';
+import { AppLayoutDrawer, AppLayoutNavigation, AppLayoutNotifications, AppLayoutSplitPanelBottom, AppLayoutSplitPanelSide, AppLayoutToolbar, } from './internal';
+const AppLayoutVisualRefreshToolbar = React.forwardRef((_a, forwardRef) => {
+    var _b;
+    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 } = _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"]);
+    const isMobile = useMobile();
+    const embeddedViewMode = rest.__embeddedViewMode;
+    const splitPanelControlId = useUniqueId('split-panel');
+    const [toolbarState, setToolbarState] = useState('show');
+    const onNavigationToggle = (open) => {
+        fireNonCancelableEvent(onNavigationChange, { open });
+    };
+    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 { drawers, activeDrawer, minDrawerSize, activeDrawerSize, ariaLabelsWithDrawers, onActiveDrawerChange, onActiveDrawerResize, } = useDrawers(rest, ariaLabels, {
+        ariaLabels,
+        toolsHide,
+        toolsOpen,
+        tools,
+        toolsWidth,
+        onToolsToggle,
+    });
+    const [splitPanelOpen = false, setSplitPanelOpen] = useControllable(controlledSplitPanelOpen, onSplitPanelToggle, false, {
+        componentName: 'AppLayout',
+        controlledProp: 'splitPanelOpen',
+        changeHandler: 'onSplitPanelToggle',
+    });
+    const onSplitPanelToggleHandler = () => {
+        setSplitPanelOpen(!splitPanelOpen);
+        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 onSplitPanelResizeHandler = (size) => {
+        setSplitPanelSize(size);
+        fireNonCancelableEvent(onSplitPanelResize, { size });
+    };
+    const [splitPanelToggleConfig, setSplitPanelToggleConfig] = useState({
+        ariaLabel: undefined,
+        displayed: false,
+    });
+    const drawersFocusControl = useFocusControl(!!(activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id));
+    const navigationFocusControl = useFocusControl(navigationOpen);
+    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);
+    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(); },
+    }));
+    // TODO move into respective components
+    const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.borderBoxHeight);
+    const [toolbarHeight, toolbarRef] = useContainerQuery(rect => rect.borderBoxHeight);
+    const resolvedNavigation = navigationHide ? null : navigation !== null && navigation !== void 0 ? navigation : React.createElement(React.Fragment, null);
+    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition } = computeHorizontalLayout({
+        activeDrawerSize,
+        splitPanelSize,
+        minContentWidth,
+        navigationOpen: !!resolvedNavigation && navigationOpen,
+        navigationWidth,
+        placement,
+        splitPanelOpen,
+        splitPanelPosition: splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position,
+    });
+    const hasToolbar = !embeddedViewMode &&
+        (!!resolvedNavigation || !!breadcrumbs || splitPanelToggleConfig.displayed || drawers.length > 0);
+    const verticalOffsets = computeVerticalLayout({
+        topOffset: placement.insetBlockStart,
+        hasToolbar: hasToolbar && toolbarState !== 'hide',
+        notificationsHeight: notificationsHeight !== null && notificationsHeight !== void 0 ? notificationsHeight : 0,
+        toolbarHeight: toolbarHeight !== null && toolbarHeight !== void 0 ? toolbarHeight : 0,
+        stickyNotifications: !!stickyNotifications,
+    });
+    const appLayoutInternals = {
+        ariaLabels: ariaLabelsWithDrawers,
+        headerVariant,
+        isMobile,
+        breadcrumbs,
+        stickyNotifications,
+        navigationOpen,
+        navigation: resolvedNavigation,
+        navigationFocusControl,
+        activeDrawer,
+        activeDrawerSize,
+        minDrawerSize,
+        maxDrawerSize,
+        drawers: drawers,
+        drawersFocusControl,
+        splitPanelPosition,
+        splitPanelToggleConfig,
+        splitPanelOpen,
+        splitPanelControlId,
+        splitPanelFocusControl,
+        placement,
+        toolbarState,
+        setToolbarState,
+        verticalOffsets,
+        notificationsRef,
+        toolbarRef,
+        onSplitPanelToggle: onSplitPanelToggleHandler,
+        onNavigationToggle,
+        onActiveDrawerChange,
+        onActiveDrawerResize,
+    };
+    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: () => {
+            /*unused in this design*/
+        },
+        rightOffset: 0,
+        size: splitPanelSize,
+        topOffset: 0,
+        setSplitPanelToggle: setSplitPanelToggleConfig,
+        refs: splitPanelFocusControl.refs,
+    };
+    return (React.createElement(SkeletonLayout, { style: {
+            [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,
+            [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,
+            paddingBlockEnd: splitPanelOpen ? splitPanelReportedSize : '',
+        }, toolbar: hasToolbar && React.createElement(AppLayoutToolbar, { appLayoutInternals: appLayoutInternals }), notifications: notifications && (React.createElement(AppLayoutNotifications, { appLayoutInternals: appLayoutInternals }, notifications)), contentHeader: contentHeader, content: content, navigation: resolvedNavigation && React.createElement(AppLayoutNavigation, { appLayoutInternals: appLayoutInternals }), navigationOpen: navigationOpen, navigationWidth: navigationWidth, tools: activeDrawer && React.createElement(AppLayoutDrawer, { appLayoutInternals: appLayoutInternals }), toolsOpen: !!activeDrawer, toolsWidth: activeDrawerSize, sideSplitPanel: splitPanelPosition === 'side' &&
+            splitPanel && (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 }));
+});
+export default AppLayoutVisualRefreshToolbar;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,EAAE,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AACzE,OAAO,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AACxE,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,yBAAyB,EAAE,MAAM,wCAAwC,CAAC;AACnF,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,OAAO,EAAE,uBAAuB,EAAE,qBAAqB,EAAE,MAAM,kBAAkB,CAAC;AAGlF,OAAO,EAAE,wBAAwB,EAAE,MAAM,oCAAoC,CAAC;AAC9E,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAC5C,OAAO,EACL,eAAe,EACf,mBAAmB,EACnB,sBAAsB,EACtB,yBAAyB,EACzB,uBAAuB,EACvB,gBAAgB,GACjB,MAAM,YAAY,CAAC;AAGpB,MAAM,6BAA6B,GAAG,KAAK,CAAC,UAAU,CACpD,CACE,EA+B6B,EAC7B,UAAyC,EACzC,EAAE;;QAjCF,EACE,UAAU,EACV,aAAa,EACb,OAAO,EACP,cAAc,EACd,eAAe,EACf,UAAU,EACV,cAAc,EACd,kBAAkB,EAClB,KAAK,EACL,SAAS,EAAE,mBAAmB,EAC9B,aAAa,EACb,SAAS,EACT,UAAU,EACV,WAAW,EACX,aAAa,EACb,WAAW,EACX,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EAAE,+BAA+B,EACtD,cAAc,EAAE,wBAAwB,EACxC,UAAU,EACV,cAAc,EAAE,wBAAwB,EACxC,kBAAkB,EAClB,kBAAkB,EAClB,6BAA6B,EAC7B,sBAAsB,EACtB,eAAe,EACf,eAAe,EACf,SAAS,OAEkB,EADxB,IAAI,cA9BT,mgBA+BC,CADQ;IAIT,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAC7B,MAAM,gBAAgB,GAAI,IAAY,CAAC,kBAAkB,CAAC;IAC1D,MAAM,mBAAmB,GAAG,WAAW,CAAC,aAAa,CAAC,CAAC;IACvD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAkB,MAAM,CAAC,CAAC;IAE1E,MAAM,kBAAkB,GAAG,CAAC,IAAa,EAAE,EAAE;QAC3C,sBAAsB,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,CAAC,SAAS,GAAG,KAAK,EAAE,YAAY,CAAC,GAAG,eAAe,CAAC,mBAAmB,EAAE,aAAa,EAAE,KAAK,EAAE;QACnG,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,WAAW;QAC3B,aAAa,EAAE,eAAe;KAC/B,CAAC,CAAC;IACH,MAAM,aAAa,GAAG,CAAC,IAAa,EAAE,EAAE;QACtC,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,mBAAmB,CAAC,QAAQ,EAAE,CAAC;QAC/B,sBAAsB,CAAC,aAAa,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IAClD,CAAC,CAAC;IAEF,MAAM,EACJ,OAAO,EACP,YAAY,EACZ,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,oBAAoB,EACpB,oBAAoB,GACrB,GAAG,UAAU,CAAC,IAAI,EAAE,UAAU,EAAE;QAC/B,UAAU;QACV,SAAS;QACT,SAAS;QACT,KAAK;QACL,UAAU;QACV,aAAa;KACd,CAAC,CAAC;IAEH,MAAM,CAAC,cAAc,GAAG,KAAK,EAAE,iBAAiB,CAAC,GAAG,eAAe,CACjE,wBAAwB,EACxB,kBAAkB,EAClB,KAAK,EACL;QACE,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,gBAAgB;QAChC,aAAa,EAAE,oBAAoB;KACpC,CACF,CAAC;IAEF,MAAM,yBAAyB,GAAG,GAAG,EAAE;QACrC,iBAAiB,CAAC,CAAC,cAAc,CAAC,CAAC;QACnC,sBAAsB,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,CAAC,cAAc,EAAE,CAAC,CAAC;IACxE,CAAC,CAAC;IAEF,MAAM,CAAC,qBAAqB,EAAE,wBAAwB,CAAC,GAAG,eAAe,CACvE,+BAA+B,EAC/B,6BAA6B,EAC7B,SAAS,EACT;QACE,aAAa,EAAE,WAAW;QAC1B,cAAc,EAAE,uBAAuB;QACvC,aAAa,EAAE,+BAA+B;KAC/C,CACF,CAAC;IAEF,MAAM,oCAAoC,GAAG,CAAC,MAA4C,EAAE,EAAE;QAC5F,wBAAwB,CAAC,MAAM,CAAC,CAAC;QACjC,sBAAsB,CAAC,kBAAkB,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAChE,sBAAsB,CAAC,6BAA6B,EAAE,MAAM,CAAC,CAAC;IAChE,CAAC,CAAC;IAEF,MAAM,CAAC,cAAc,GAAG,CAAC,EAAE,iBAAiB,CAAC,GAAG,eAAe,CAC7D,wBAAwB,EACxB,kBAAkB,EAClB,wBAAwB,CAAC,MAAA,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,QAAQ,mCAAI,QAAQ,CAAC,EACrE,EAAE,aAAa,EAAE,WAAW,EAAE,cAAc,EAAE,gBAAgB,EAAE,aAAa,EAAE,oBAAoB,EAAE,CACtG,CAAC;IAEF,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAExE,MAAM,yBAAyB,GAAG,CAAC,IAAY,EAAE,EAAE;QACjD,iBAAiB,CAAC,IAAI,CAAC,CAAC;QACxB,sBAAsB,CAAC,kBAAkB,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;IACvD,CAAC,CAAC;IAEF,MAAM,CAAC,sBAAsB,EAAE,yBAAyB,CAAC,GAAG,QAAQ,CAA4B;QAC9F,SAAS,EAAE,SAAS;QACpB,SAAS,EAAE,KAAK;KACjB,CAAC,CAAC;IAEH,MAAM,mBAAmB,GAAG,eAAe,CAAC,CAAC,CAAC,CAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,EAAE,CAAA,CAAC,CAAC;IAChE,MAAM,sBAAsB,GAAG,eAAe,CAAC,cAAc,CAAC,CAAC;IAC/D,MAAM,sBAAsB,GAAG,yBAAyB,CAAC,CAAC,qBAAqB,EAAE,cAAc,CAAC,CAAC,CAAC;IAElG,mBAAmB,CAAC,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC;QACrC,0BAA0B,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,kBAAkB,CAAC,KAAK,CAAC;QACvE,SAAS,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,IAAI,CAAC;QACpC,eAAe,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC;QACzD,iBAAiB,EAAE,GAAG,EAAE,CAAC,mBAAmB,CAAC,QAAQ,CAAC,IAAI,CAAC;QAC3D,eAAe,EAAE,GAAG,EAAE,WAAC,OAAA,MAAA,sBAAsB,CAAC,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAA,EAAA;KAC3E,CAAC,CAAC,CAAC;IAEJ,uCAAuC;IACvC,MAAM,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAChG,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,GAAG,iBAAiB,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;IAEpF,MAAM,kBAAkB,GAAG,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,yCAAK,CAAC;IACvE,MAAM,EAAE,aAAa,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,kBAAkB,EAAE,GAAG,uBAAuB,CAAC;QACjH,gBAAgB;QAChB,cAAc;QACd,eAAe;QACf,cAAc,EAAE,CAAC,CAAC,kBAAkB,IAAI,cAAc;QACtD,eAAe;QACf,SAAS;QACT,cAAc;QACd,kBAAkB,EAAE,qBAAqB,aAArB,qBAAqB,uBAArB,qBAAqB,CAAE,QAAQ;KACpD,CAAC,CAAC;IAEH,MAAM,UAAU,GACd,CAAC,gBAAgB;QACjB,CAAC,CAAC,CAAC,kBAAkB,IAAI,CAAC,CAAC,WAAW,IAAI,sBAAsB,CAAC,SAAS,IAAI,OAAQ,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAErG,MAAM,eAAe,GAAG,qBAAqB,CAAC;QAC5C,SAAS,EAAE,SAAS,CAAC,eAAe;QACpC,UAAU,EAAE,UAAU,IAAI,YAAY,KAAK,MAAM;QACjD,mBAAmB,EAAE,mBAAmB,aAAnB,mBAAmB,cAAnB,mBAAmB,GAAI,CAAC;QAC7C,aAAa,EAAE,aAAa,aAAb,aAAa,cAAb,aAAa,GAAI,CAAC;QACjC,mBAAmB,EAAE,CAAC,CAAC,mBAAmB;KAC3C,CAAC,CAAC;IAEH,MAAM,kBAAkB,GAAuB;QAC7C,UAAU,EAAE,qBAAqB;QACjC,aAAa;QACb,QAAQ;QACR,WAAW;QACX,mBAAmB;QACnB,cAAc;QACd,UAAU,EAAE,kBAAkB;QAC9B,sBAAsB;QACtB,YAAY;QACZ,gBAAgB;QAChB,aAAa;QACb,aAAa;QACb,OAAO,EAAE,OAAQ;QACjB,mBAAmB;QACnB,kBAAkB;QAClB,sBAAsB;QACtB,cAAc;QACd,mBAAmB;QACnB,sBAAsB;QACtB,SAAS;QACT,YAAY;QACZ,eAAe;QACf,eAAe;QACf,gBAAgB;QAChB,UAAU;QACV,kBAAkB,EAAE,yBAAyB;QAC7C,kBAAkB;QAClB,oBAAoB;QACpB,oBAAoB;KACrB,CAAC;IAEF,MAAM,mBAAmB,GAA4B;QACnD,YAAY,EAAE,CAAC;QACf,YAAY,EAAE,GAAG,EAAE;YACjB,MAAM,eAAe,GACnB,QAAQ,CAAC,eAAe,CAAC,YAAY,GAAG,SAAS,CAAC,eAAe,GAAG,SAAS,CAAC,aAAa,CAAC;YAC9F,2FAA2F;YAC3F,OAAO,eAAe,GAAG,GAAG,CAAC,CAAC,CAAC,eAAe,GAAG,EAAE,CAAC,CAAC,CAAC,eAAe,GAAG,GAAG,CAAC;QAC9E,CAAC;QACD,QAAQ,EAAE,iBAAiB;QAC3B,gBAAgB,EAAE,wBAAwB;QAC1C,MAAM,EAAE,cAAc;QACtB,UAAU,EAAE,CAAC;QACb,mBAAmB,EAAE,oCAAoC;QACzD,QAAQ,EAAE,yBAAyB;QACnC,QAAQ,EAAE,yBAAyB;QACnC,QAAQ,EAAE,kBAAkB;QAC5B,UAAU,EAAE,IAAI,CAAC,EAAE,CAAC,yBAAyB,CAAC,IAAI,CAAC;QACnD,kBAAkB,EAAE,GAAG,EAAE;YACvB,yBAAyB;QAC3B,CAAC;QACD,WAAW,EAAE,CAAC;QACd,IAAI,EAAE,cAAc;QACpB,SAAS,EAAE,CAAC;QACZ,mBAAmB,EAAE,yBAAyB;QAC9C,IAAI,EAAE,sBAAsB,CAAC,IAAI;KAClC,CAAC;IAEF,OAAO,CACL,oBAAC,cAAc,IACb,KAAK,EAAE;YACL,CAAC,UAAU,CAAC,uBAAuB,CAAC,EAAE,GAAG,eAAe,CAAC,MAAM,IAAI;YACnE,CAAC,UAAU,CAAC,0BAA0B,CAAC,EAAE,GAAG,SAAS,CAAC,aAAa,IAAI;YACvE,eAAe,EAAE,cAAc,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE;SAC9D,EACD,OAAO,EAAE,UAAU,IAAI,oBAAC,gBAAgB,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,EACnF,aAAa,EACX,aAAa,IAAI,CACf,oBAAC,sBAAsB,IAAC,kBAAkB,EAAE,kBAAkB,IAAG,aAAa,CAA0B,CACzG,EAEH,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,kBAAkB,IAAI,oBAAC,mBAAmB,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,EACjG,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,KAAK,EAAE,YAAY,IAAI,oBAAC,eAAe,IAAC,kBAAkB,EAAE,kBAAkB,GAAI,EAClF,SAAS,EAAE,CAAC,CAAC,YAAY,EACzB,UAAU,EAAE,gBAAgB,EAC5B,cAAc,EACZ,kBAAkB,KAAK,MAAM;YAC7B,UAAU,IAAI,CACZ,oBAAC,uBAAuB,IAAC,kBAAkB,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,mBAAmB,IACtG,UAAU,CACa,CAC3B,EAEH,gBAAgB,EACd,kBAAkB,KAAK,QAAQ,IAAI,CACjC,oBAAC,yBAAyB,IACxB,kBAAkB,EAAE,kBAAkB,EACtC,mBAAmB,EAAE,mBAAmB,IAEvC,UAAU,CACe,CAC7B,EAEH,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,eAAe,EAChC,sBAAsB,EAAE,sBAAsB,GAC9C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,6BAA6B,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useImperativeHandle, useState } from 'react';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { useFocusControl } from '../utils/use-focus-control';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';\nimport { useDrawers } from '../utils/use-drawers';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { computeHorizontalLayout, computeVerticalLayout } from './compute-layout';\nimport { SplitPanelProviderProps } from '../split-panel';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';\nimport globalVars from '../../internal/styles/global-vars';\nimport { SkeletonLayout } from './skeleton';\nimport {\n  AppLayoutDrawer,\n  AppLayoutNavigation,\n  AppLayoutNotifications,\n  AppLayoutSplitPanelBottom,\n  AppLayoutSplitPanelSide,\n  AppLayoutToolbar,\n} from './internal';\nimport { AppLayoutInternals } from './interfaces';\n\nconst AppLayoutVisualRefreshToolbar = React.forwardRef(\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      ...rest\n    }: AppLayoutPropsWithDefaults,\n    forwardRef: React.Ref<AppLayoutProps.Ref>\n  ) => {\n    const isMobile = useMobile();\n    const embeddedViewMode = (rest as any).__embeddedViewMode;\n    const splitPanelControlId = useUniqueId('split-panel');\n    const [toolbarState, setToolbarState] = useState<'show' | 'hide'>('show');\n\n    const onNavigationToggle = (open: boolean) => {\n      fireNonCancelableEvent(onNavigationChange, { open });\n    };\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 {\n      drawers,\n      activeDrawer,\n      minDrawerSize,\n      activeDrawerSize,\n      ariaLabelsWithDrawers,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\n    } = useDrawers(rest, ariaLabels, {\n      ariaLabels,\n      toolsHide,\n      toolsOpen,\n      tools,\n      toolsWidth,\n      onToolsToggle,\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      setSplitPanelOpen(!splitPanelOpen);\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\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 drawersFocusControl = useFocusControl(!!activeDrawer?.id);\n    const navigationFocusControl = useFocusControl(navigationOpen);\n    const splitPanelFocusControl = useSplitPanelFocusControl([splitPanelPreferences, splitPanelOpen]);\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    }));\n\n    // TODO move into respective components\n    const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.borderBoxHeight);\n    const [toolbarHeight, toolbarRef] = useContainerQuery(rect => rect.borderBoxHeight);\n\n    const resolvedNavigation = navigationHide ? null : navigation ?? <></>;\n    const { maxDrawerSize, maxSplitPanelSize, splitPanelForcedPosition, splitPanelPosition } = computeHorizontalLayout({\n      activeDrawerSize,\n      splitPanelSize,\n      minContentWidth,\n      navigationOpen: !!resolvedNavigation && navigationOpen,\n      navigationWidth,\n      placement,\n      splitPanelOpen,\n      splitPanelPosition: splitPanelPreferences?.position,\n    });\n\n    const hasToolbar =\n      !embeddedViewMode &&\n      (!!resolvedNavigation || !!breadcrumbs || splitPanelToggleConfig.displayed || drawers!.length > 0);\n\n    const verticalOffsets = computeVerticalLayout({\n      topOffset: placement.insetBlockStart,\n      hasToolbar: hasToolbar && toolbarState !== 'hide',\n      notificationsHeight: notificationsHeight ?? 0,\n      toolbarHeight: toolbarHeight ?? 0,\n      stickyNotifications: !!stickyNotifications,\n    });\n\n    const appLayoutInternals: AppLayoutInternals = {\n      ariaLabels: ariaLabelsWithDrawers,\n      headerVariant,\n      isMobile,\n      breadcrumbs,\n      stickyNotifications,\n      navigationOpen,\n      navigation: resolvedNavigation,\n      navigationFocusControl,\n      activeDrawer,\n      activeDrawerSize,\n      minDrawerSize,\n      maxDrawerSize,\n      drawers: drawers!,\n      drawersFocusControl,\n      splitPanelPosition,\n      splitPanelToggleConfig,\n      splitPanelOpen,\n      splitPanelControlId,\n      splitPanelFocusControl,\n      placement,\n      toolbarState,\n      setToolbarState,\n      verticalOffsets,\n      notificationsRef,\n      toolbarRef,\n      onSplitPanelToggle: onSplitPanelToggleHandler,\n      onNavigationToggle,\n      onActiveDrawerChange,\n      onActiveDrawerResize,\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: () => {\n        /*unused in this design*/\n      },\n      rightOffset: 0,\n      size: splitPanelSize,\n      topOffset: 0,\n      setSplitPanelToggle: setSplitPanelToggleConfig,\n      refs: splitPanelFocusControl.refs,\n    };\n\n    return (\n      <SkeletonLayout\n        style={{\n          [globalVars.stickyVerticalTopOffset]: `${verticalOffsets.header}px`,\n          [globalVars.stickyVerticalBottomOffset]: `${placement.insetBlockEnd}px`,\n          paddingBlockEnd: splitPanelOpen ? splitPanelReportedSize : '',\n        }}\n        toolbar={hasToolbar && <AppLayoutToolbar appLayoutInternals={appLayoutInternals} />}\n        notifications={\n          notifications && (\n            <AppLayoutNotifications appLayoutInternals={appLayoutInternals}>{notifications}</AppLayoutNotifications>\n          )\n        }\n        contentHeader={contentHeader}\n        content={content}\n        navigation={resolvedNavigation && <AppLayoutNavigation appLayoutInternals={appLayoutInternals} />}\n        navigationOpen={navigationOpen}\n        navigationWidth={navigationWidth}\n        tools={activeDrawer && <AppLayoutDrawer appLayoutInternals={appLayoutInternals} />}\n        toolsOpen={!!activeDrawer}\n        toolsWidth={activeDrawerSize}\n        sideSplitPanel={\n          splitPanelPosition === 'side' &&\n          splitPanel && (\n            <AppLayoutSplitPanelSide appLayoutInternals={appLayoutInternals} splitPanelInternals={splitPanelInternals}>\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    );\n  }\n);\n\nexport default AppLayoutVisualRefreshToolbar;\n"]}

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';
+import { FocusControlState } from '../utils/use-focus-control';
+import { SplitPanelFocusControlState } from '../utils/use-split-panel-focus-control';
+import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
+import { VerticalLayoutOutput } from './compute-layout';
+export interface AppLayoutInternals {
+    ariaLabels: AppLayoutPropsWithDefaults['ariaLabels'];
+    headerVariant: AppLayoutPropsWithDefaults['headerVariant'];
+    placement: AppLayoutPropsWithDefaults['placement'];
+    navigationOpen: AppLayoutPropsWithDefaults['navigationOpen'];
+    navigationFocusControl: FocusControlState;
+    navigation: React.ReactNode;
+    splitPanelPosition: AppLayoutProps.SplitPanelPreferences['position'];
+    splitPanelOpen: boolean;
+    splitPanelControlId: string;
+    splitPanelFocusControl: SplitPanelFocusControlState;
+    splitPanelToggleConfig: SplitPanelSideToggleProps;
+    isMobile: boolean;
+    activeDrawer: AppLayoutProps.Drawer | undefined;
+    activeDrawerSize: number;
+    minDrawerSize: number;
+    maxDrawerSize: number;
+    drawers: ReadonlyArray<AppLayoutProps.Drawer>;
+    drawersFocusControl: FocusControlState;
+    stickyNotifications: AppLayoutPropsWithDefaults['stickyNotifications'];
+    breadcrumbs: React.ReactNode;
+    toolbarState: 'show' | 'hide';
+    setToolbarState: (state: 'show' | 'hide') => void;
+    verticalOffsets: VerticalLayoutOutput;
+    notificationsRef: React.Ref<HTMLElement>;
+    toolbarRef: React.Ref<HTMLElement>;
+    onSplitPanelToggle: () => void;
+    onNavigationToggle: (open: boolean) => void;
+    onActiveDrawerChange: (newDrawerId: string | null) => void;
+    onActiveDrawerResize: (detail: {
+        id: string;
+        size: number;
+    }) => void;
+}
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/interfaces.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,cAAc,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC/D,OAAO,EAAE,2BAA2B,EAAE,MAAM,wCAAwC,CAAC;AACrF,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAIxD,MAAM,WAAW,kBAAkB;IACjC,UAAU,EAAE,0BAA0B,CAAC,YAAY,CAAC,CAAC;IACrD,aAAa,EAAE,0BAA0B,CAAC,eAAe,CAAC,CAAC;IAC3D,SAAS,EAAE,0BAA0B,CAAC,WAAW,CAAC,CAAC;IACnD,cAAc,EAAE,0BAA0B,CAAC,gBAAgB,CAAC,CAAC;IAC7D,sBAAsB,EAAE,iBAAiB,CAAC;IAC1C,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,kBAAkB,EAAE,cAAc,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;IACrE,cAAc,EAAE,OAAO,CAAC;IACxB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,sBAAsB,EAAE,2BAA2B,CAAC;IACpD,sBAAsB,EAAE,yBAAyB,CAAC;IAClD,QAAQ,EAAE,OAAO,CAAC;IAClB,YAAY,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAChD,gBAAgB,EAAE,MAAM,CAAC;IACzB,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,OAAO,EAAE,aAAa,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IAC9C,mBAAmB,EAAE,iBAAiB,CAAC;IACvC,mBAAmB,EAAE,0BAA0B,CAAC,qBAAqB,CAAC,CAAC;IACvE,WAAW,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAClD,eAAe,EAAE,oBAAoB,CAAC;IACtC,gBAAgB,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACzC,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACnC,kBAAkB,EAAE,MAAM,IAAI,CAAC;IAC/B,kBAAkB,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,oBAAoB,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IAC3D,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CACtE"}

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

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

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

@@ -0,0 +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';\nimport { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';\nimport { FocusControlState } from '../utils/use-focus-control';\nimport { SplitPanelFocusControlState } from '../utils/use-split-panel-focus-control';\nimport { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';\nimport { VerticalLayoutOutput } from './compute-layout';\n\n// Widgetization notice: structures in this file are shared multiple app layout instances, possibly different minor versions.\n// Treat thsese 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: AppLayoutProps.Drawer | undefined;\n  activeDrawerSize: number;\n  minDrawerSize: number;\n  maxDrawerSize: number;\n  drawers: ReadonlyArray<AppLayoutProps.Drawer>;\n  drawersFocusControl: FocusControlState;\n  stickyNotifications: AppLayoutPropsWithDefaults['stickyNotifications'];\n  breadcrumbs: React.ReactNode;\n  toolbarState: 'show' | 'hide';\n  setToolbarState: (state: 'show' | 'hide') => void;\n  verticalOffsets: VerticalLayoutOutput;\n  notificationsRef: React.Ref<HTMLElement>;\n  toolbarRef: React.Ref<HTMLElement>;\n  onSplitPanelToggle: () => void;\n  onNavigationToggle: (open: boolean) => void;\n  onActiveDrawerChange: (newDrawerId: string | null) => void;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n}\n"]}

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

@@ -0,0 +1,7 @@
+export declare const AppLayoutNavigation: typeof import("./navigation").AppLayoutNavigationImplementation;
+export declare const AppLayoutDrawer: typeof import("./drawer").AppLayoutDrawerImplementation;
+export declare const AppLayoutNotifications: typeof import("./notifications").AppLayoutNotificationsImplementation;
+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;
+//# sourceMappingURL=internal.d.ts.map

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

@@ -0,0 +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,uEAA2C,CAAC;AAC/E,eAAO,MAAM,gBAAgB,2DAAqC,CAAC;AACnE,eAAO,MAAM,yBAAyB,8EAAoD,CAAC;AAC3F,eAAO,MAAM,uBAAuB,4EAAkD,CAAC"}

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

@@ -0,0 +1,14 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { createWidgetizedAppLayoutDrawer } from './drawer';
+import { createWidgetizedAppLayoutNavigation } from './navigation';
+import { createWidgetizedAppLayoutNotifications } from './notifications';
+import { createWidgetizedAppLayoutSplitPanelDrawerBottom, createWidgetizedAppLayoutSplitPanelDrawerSide, } from './split-panel';
+import { createWidgetizedAppLayoutToolbar } from './toolbar';
+export const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();
+export const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();
+export const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();
+export const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();
+export const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();
+export const AppLayoutSplitPanelSide = createWidgetizedAppLayoutSplitPanelDrawerSide();
+//# sourceMappingURL=internal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../../src/app-layout/visual-refresh-toolbar/internal.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,+BAA+B,EAAE,MAAM,UAAU,CAAC;AAC3D,OAAO,EAAE,mCAAmC,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,sCAAsC,EAAE,MAAM,iBAAiB,CAAC;AACzE,OAAO,EACL,+CAA+C,EAC/C,6CAA6C,GAC9C,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,gCAAgC,EAAE,MAAM,WAAW,CAAC;AAE7D,MAAM,CAAC,MAAM,mBAAmB,GAAG,mCAAmC,EAAE,CAAC;AACzE,MAAM,CAAC,MAAM,eAAe,GAAG,+BAA+B,EAAE,CAAC;AACjE,MAAM,CAAC,MAAM,sBAAsB,GAAG,sCAAsC,EAAE,CAAC;AAC/E,MAAM,CAAC,MAAM,gBAAgB,GAAG,gCAAgC,EAAE,CAAC;AACnE,MAAM,CAAC,MAAM,yBAAyB,GAAG,+CAA+C,EAAE,CAAC;AAC3F,MAAM,CAAC,MAAM,uBAAuB,GAAG,6CAA6C,EAAE,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { createWidgetizedAppLayoutDrawer } from './drawer';\nimport { createWidgetizedAppLayoutNavigation } from './navigation';\nimport { createWidgetizedAppLayoutNotifications } from './notifications';\nimport {\n  createWidgetizedAppLayoutSplitPanelDrawerBottom,\n  createWidgetizedAppLayoutSplitPanelDrawerSide,\n} from './split-panel';\nimport { createWidgetizedAppLayoutToolbar } from './toolbar';\n\nexport const AppLayoutNavigation = createWidgetizedAppLayoutNavigation();\nexport const AppLayoutDrawer = createWidgetizedAppLayoutDrawer();\nexport const AppLayoutNotifications = createWidgetizedAppLayoutNotifications();\nexport const AppLayoutToolbar = createWidgetizedAppLayoutToolbar();\nexport const AppLayoutSplitPanelBottom = createWidgetizedAppLayoutSplitPanelDrawerBottom();\nexport const AppLayoutSplitPanelSide = createWidgetizedAppLayoutSplitPanelDrawerSide();\n"]}

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { AppLayoutInternals } from '../interfaces';
+interface AppLayoutNavigationImplementationProps {
+    appLayoutInternals: AppLayoutInternals;
+}
+export declare function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps): JSX.Element;
+export declare const createWidgetizedAppLayoutNavigation: (Loader?: typeof AppLayoutNavigationImplementation | undefined) => typeof AppLayoutNavigationImplementation;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD,UAAU,sCAAsC;IAC9C,kBAAkB,EAAE,kBAAkB,CAAC;CACxC;AAED,wBAAgB,iCAAiC,CAAC,EAAE,kBAAkB,EAAE,EAAE,sCAAsC,eAgD/G;AAED,eAAO,MAAM,mCAAmC,6GAA+D,CAAC"}

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

@@ -0,0 +1,32 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { InternalButton } from '../../../button/internal';
+import { findUpUntil } from '../../../internal/utils/dom';
+import styles from './styles.css.js';
+import testutilStyles from '../../test-classes/styles.css.js';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+export function AppLayoutNavigationImplementation({ appLayoutInternals }) {
+    var _a, _b;
+    const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement } = appLayoutInternals;
+    // Close the Navigation drawer on mobile when a user clicks a link inside.
+    const onNavigationClick = (event) => {
+        const hasLink = findUpUntil(event.target, node => node.tagName === 'A' && !!node.href);
+        if (hasLink && isMobile) {
+            onNavigationToggle(false);
+        }
+    };
+    return (React.createElement("nav", { "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigation) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.navigation, {
+            [styles['is-navigation-open']]: navigationOpen,
+        }, testutilStyles.navigation), "aria-hidden": !navigationOpen, onClick: onNavigationClick, style: {
+            blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,
+            insetBlockStart: placement.insetBlockStart,
+        } },
+        React.createElement("div", { className: clsx(styles['animated-content']) },
+            React.createElement("div", { className: clsx(styles['hide-navigation']) },
+                React.createElement(InternalButton, { ariaLabel: (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationClose) !== null && _b !== void 0 ? _b : undefined, iconName: isMobile ? 'close' : 'angle-left', onClick: () => onNavigationToggle(false), variant: "icon", formAction: "none", className: testutilStyles['navigation-close'], ref: navigationFocusControl.refs.close })),
+            navigation)));
+}
+export const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/navigation/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAC1D,OAAO,EAAE,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAC1D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAOtE,MAAM,UAAU,iCAAiC,CAAC,EAAE,kBAAkB,EAA0C;;IAC9G,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,QAAQ,EAAE,cAAc,EAAE,UAAU,EAAE,sBAAsB,EAAE,SAAS,EAAE,GAC/G,kBAAkB,CAAC;IAErB,0EAA0E;IAC1E,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,MAAM,OAAO,GAAG,WAAW,CACzB,KAAK,CAAC,MAAqB,EAC3B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,OAAO,KAAK,GAAG,IAAI,CAAC,CAAE,IAA0B,CAAC,IAAI,CACnE,CAAC;QACF,IAAI,OAAO,IAAI,QAAQ,EAAE;YACvB,kBAAkB,CAAC,KAAK,CAAC,CAAC;SAC3B;IACH,CAAC,CAAC;IAEF,OAAO,CACL,2CACc,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,UAAU,mCAAI,SAAS,EAC/C,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,UAAU,EACjB;YACE,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,cAAc;SAC/C,EACD,cAAc,CAAC,UAAU,CAC1B,iBACY,CAAC,cAAc,EAC5B,OAAO,EAAE,iBAAiB,EAC1B,KAAK,EAAE;YACL,SAAS,EAAE,gBAAgB,SAAS,CAAC,eAAe,QAAQ,SAAS,CAAC,aAAa,KAAK;YACxF,eAAe,EAAE,SAAS,CAAC,eAAe;SAC3C;QAED,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC;YAC9C,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;gBAC7C,oBAAC,cAAc,IACb,SAAS,EAAE,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,eAAe,mCAAI,SAAS,EACnD,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,EAC3C,OAAO,EAAE,GAAG,EAAE,CAAC,kBAAkB,CAAC,KAAK,CAAC,EACxC,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,SAAS,EAAE,cAAc,CAAC,kBAAkB,CAAC,EAC7C,GAAG,EAAE,sBAAsB,CAAC,IAAI,CAAC,KAAK,GACtC,CACE;YACL,UAAU,CACP,CACF,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,mCAAmC,GAAG,yBAAyB,CAAC,iCAAiC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../../button/internal';\nimport { findUpUntil } from '../../../internal/utils/dom';\nimport styles from './styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\n\ninterface AppLayoutNavigationImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n}\n\nexport function AppLayoutNavigationImplementation({ appLayoutInternals }: AppLayoutNavigationImplementationProps) {\n  const { ariaLabels, onNavigationToggle, isMobile, navigationOpen, navigation, navigationFocusControl, placement } =\n    appLayoutInternals;\n\n  // Close the Navigation drawer on mobile when a user clicks a link inside.\n  const onNavigationClick = (event: React.MouseEvent) => {\n    const hasLink = findUpUntil(\n      event.target as HTMLElement,\n      node => node.tagName === 'A' && !!(node as HTMLAnchorElement).href\n    );\n    if (hasLink && isMobile) {\n      onNavigationToggle(false);\n    }\n  };\n\n  return (\n    <nav\n      aria-label={ariaLabels?.navigation ?? undefined}\n      className={clsx(\n        styles.navigation,\n        {\n          [styles['is-navigation-open']]: navigationOpen,\n        },\n        testutilStyles.navigation\n      )}\n      aria-hidden={!navigationOpen}\n      onClick={onNavigationClick}\n      style={{\n        blockSize: `calc(100vh - ${placement.insetBlockStart}px - ${placement.insetBlockEnd}px)`,\n        insetBlockStart: placement.insetBlockStart,\n      }}\n    >\n      <div className={clsx(styles['animated-content'])}>\n        <div className={clsx(styles['hide-navigation'])}>\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationClose ?? undefined}\n            iconName={isMobile ? 'close' : 'angle-left'}\n            onClick={() => onNavigationToggle(false)}\n            variant=\"icon\"\n            formAction=\"none\"\n            className={testutilStyles['navigation-close']}\n            ref={navigationFocusControl.refs.close}\n          />\n        </div>\n        {navigation}\n      </div>\n    </nav>\n  );\n}\n\nexport const createWidgetizedAppLayoutNavigation = createWidgetizedComponent(AppLayoutNavigationImplementation);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.css.js

@@ -0,0 +1,11 @@
+
+    import './styles.scoped.css';
+    export default {
+  "navigation": "awsui_navigation_2p2ab_hepn7_97",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_hepn7_125",
+  "animating": "awsui_animating_2p2ab_hepn7_129",
+  "openNavigation": "awsui_openNavigation_2p2ab_hepn7_1",
+  "animated-content": "awsui_animated-content_2p2ab_hepn7_142",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_hepn7_151"
+};
+  

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.scoped.css

@@ -0,0 +1,155 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* stylelint-disable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/* stylelint-enable @cloudscape-design/no-motion-outside-of-mixin, selector-combinator-disallowed-list, selector-pseudo-class-no-unknown, selector-class-pattern */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/* Style used for links in slots/components that are text heavy, to help links stand out among 
+surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_navigation_2p2ab_hepn7_97:not(#\9) {
+  position: sticky;
+  background-color: var(--color-background-container-content-il2pe5, #ffffff);
+  inset-block-end: 0;
+  block-size: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  overscroll-behavior-y: contain;
+  word-wrap: break-word;
+  pointer-events: auto;
+  z-index: 1001;
+  /*
+  A non-semantic node is added with a fixed width equal to the final Navigation
+  width. This will create the visual appearance of horizontal movement and
+  prevent unwanted text wrapping.
+  */
+}
+@keyframes awsui_openNavigation_2p2ab_hepn7_1 {
+  from {
+    opacity: 0;
+    inline-size: calc(var(--space-layout-toggle-padding-k1jpy8, 12px) * 2 + var(--space-layout-toggle-diameter-ugv12v, 36px));
+  }
+  to {
+    opacity: 1;
+    inline-size: var(--awsui-navigation-width-9rhwr5);
+  }
+}
+.awsui_navigation_2p2ab_hepn7_97:not(#\9):not(.awsui_is-navigation-open_2p2ab_hepn7_125) {
+  inline-size: 0;
+  display: none;
+}
+.awsui_navigation_2p2ab_hepn7_97.awsui_is-navigation-open_2p2ab_hepn7_125.awsui_animating_2p2ab_hepn7_129:not(#\9) {
+  animation: awsui_openNavigation_2p2ab_hepn7_1 var(--motion-duration-refresh-only-fast-y7h37k, 115ms);
+}
+@media (prefers-reduced-motion: reduce) {
+  .awsui_navigation_2p2ab_hepn7_97.awsui_is-navigation-open_2p2ab_hepn7_125.awsui_animating_2p2ab_hepn7_129:not(#\9) {
+    animation: none;
+    transition: none;
+  }
+}
+.awsui-motion-disabled .awsui_navigation_2p2ab_hepn7_97.awsui_is-navigation-open_2p2ab_hepn7_125.awsui_animating_2p2ab_hepn7_129:not(#\9), .awsui-mode-entering .awsui_navigation_2p2ab_hepn7_97.awsui_is-navigation-open_2p2ab_hepn7_125.awsui_animating_2p2ab_hepn7_129:not(#\9) {
+  animation: none;
+  transition: none;
+}
+.awsui_navigation_2p2ab_hepn7_97 > .awsui_animated-content_2p2ab_hepn7_142:not(#\9) {
+  inline-size: var(--awsui-navigation-width-9rhwr5);
+}
+@media (max-width: 688px) {
+  .awsui_navigation_2p2ab_hepn7_97:not(#\9) {
+    --awsui-navigation-width-9rhwr5: 100vw;
+  }
+}
+
+.awsui_hide-navigation_2p2ab_hepn7_151:not(#\9) {
+  position: absolute;
+  inset-inline-end: var(--space-m-kpg8id, 16px);
+  inset-block-start: var(--size-vertical-panel-icon-offset-04nxf8, 15px);
+}

package/lib/internal/template/app-layout/visual-refresh-toolbar/navigation/styles.selectors.js

@@ -0,0 +1,12 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "navigation": "awsui_navigation_2p2ab_hepn7_97",
+  "is-navigation-open": "awsui_is-navigation-open_2p2ab_hepn7_125",
+  "animating": "awsui_animating_2p2ab_hepn7_129",
+  "openNavigation": "awsui_openNavigation_2p2ab_hepn7_1",
+  "animated-content": "awsui_animated-content_2p2ab_hepn7_142",
+  "hide-navigation": "awsui_hide-navigation_2p2ab_hepn7_151"
+};
+  

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import { AppLayoutInternals } from '../interfaces';
+interface AppLayoutNotificationsImplementationProps {
+    appLayoutInternals: AppLayoutInternals;
+    children: React.ReactNode;
+}
+export declare function AppLayoutNotificationsImplementation({ appLayoutInternals, children, }: AppLayoutNotificationsImplementationProps): JSX.Element;
+export declare const createWidgetizedAppLayoutNotifications: (Loader?: typeof AppLayoutNotificationsImplementation | undefined) => typeof AppLayoutNotificationsImplementation;
+export {};
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAInD,UAAU,yCAAyC;IACjD,kBAAkB,EAAE,kBAAkB,CAAC;IACvC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,oCAAoC,CAAC,EACnD,kBAAkB,EAClB,QAAQ,GACT,EAAE,yCAAyC,eAe3C;AAED,eAAO,MAAM,sCAAsC,mHAAkE,CAAC"}

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

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import { NotificationsSlot } from '../skeleton/slot-wrappers';
+import { createWidgetizedComponent } from '../../../internal/widgets';
+import styles from './styles.css.js';
+import testutilStyles from '../../test-classes/styles.css.js';
+export function AppLayoutNotificationsImplementation({ appLayoutInternals, children, }) {
+    const { ariaLabels, stickyNotifications, notificationsRef, verticalOffsets } = appLayoutInternals;
+    return (React.createElement(NotificationsSlot, { ref: notificationsRef, className: clsx(stickyNotifications && styles['sticky-notifications']), style: {
+            insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,
+        } },
+        React.createElement("div", { className: testutilStyles.notifications, role: "region", "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications }, children)));
+}
+export const createWidgetizedAppLayoutNotifications = createWidgetizedComponent(AppLayoutNotificationsImplementation);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/app-layout/visual-refresh-toolbar/notifications/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC;AAC9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAC;AAEtE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,kCAAkC,CAAC;AAO9D,MAAM,UAAU,oCAAoC,CAAC,EACnD,kBAAkB,EAClB,QAAQ,GACkC;IAC1C,MAAM,EAAE,UAAU,EAAE,mBAAmB,EAAE,gBAAgB,EAAE,eAAe,EAAE,GAAG,kBAAkB,CAAC;IAClG,OAAO,CACL,oBAAC,iBAAiB,IAChB,GAAG,EAAE,gBAAgB,EACrB,SAAS,EAAE,IAAI,CAAC,mBAAmB,IAAI,MAAM,CAAC,sBAAsB,CAAC,CAAC,EACtE,KAAK,EAAE;YACL,eAAe,EAAE,mBAAmB,CAAC,CAAC,CAAC,eAAe,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS;SACjF;QAED,6BAAK,SAAS,EAAE,cAAc,CAAC,aAAa,EAAE,IAAI,EAAC,QAAQ,gBAAa,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,IAC9F,QAAQ,CACL,CACY,CACrB,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,sCAAsC,GAAG,yBAAyB,CAAC,oCAAoC,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { NotificationsSlot } from '../skeleton/slot-wrappers';\nimport { createWidgetizedComponent } from '../../../internal/widgets';\nimport { AppLayoutInternals } from '../interfaces';\nimport styles from './styles.css.js';\nimport testutilStyles from '../../test-classes/styles.css.js';\n\ninterface AppLayoutNotificationsImplementationProps {\n  appLayoutInternals: AppLayoutInternals;\n  children: React.ReactNode;\n}\n\nexport function AppLayoutNotificationsImplementation({\n  appLayoutInternals,\n  children,\n}: AppLayoutNotificationsImplementationProps) {\n  const { ariaLabels, stickyNotifications, notificationsRef, verticalOffsets } = appLayoutInternals;\n  return (\n    <NotificationsSlot\n      ref={notificationsRef}\n      className={clsx(stickyNotifications && styles['sticky-notifications'])}\n      style={{\n        insetBlockStart: stickyNotifications ? verticalOffsets.notifications : undefined,\n      }}\n    >\n      <div className={testutilStyles.notifications} role=\"region\" aria-label={ariaLabels?.notifications}>\n        {children}\n      </div>\n    </NotificationsSlot>\n  );\n}\n\nexport const createWidgetizedAppLayoutNotifications = createWidgetizedComponent(AppLayoutNotificationsImplementation);\n"]}

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/styles.css.js

@@ -0,0 +1,6 @@
+
+    import './styles.scoped.css';
+    export default {
+  "sticky-notifications": "awsui_sticky-notifications_154bi_1h0wm_5"
+};
+  

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/styles.scoped.css

@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_sticky-notifications_154bi_1h0wm_5:not(#\9) {
+  position: sticky;
+  z-index: 850;
+}

package/lib/internal/template/app-layout/visual-refresh-toolbar/notifications/styles.selectors.js

@@ -0,0 +1,7 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "sticky-notifications": "awsui_sticky-notifications_154bi_1h0wm_5"
+};
+