@cloudscape-design/components 3.0.246 → 3.0.247

package/app-layout/visual-refresh/drawers.js

@@ -0,0 +1,127 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useRef } from 'react';
+import clsx from 'clsx';
+import customCssProps from '../../internal/generated/custom-css-properties';
+import { InternalButton } from '../../button/internal';
+import SplitPanel from './split-panel';
+import TriggerButton from './trigger-button';
+import { useAppLayoutInternals } from './context';
+import splitPanelStyles from '../../split-panel/styles.css.js';
+import styles from './styles.css.js';
+import testutilStyles from '../test-classes/styles.css.js';
+/**
+ * The Drawers root component is mounted in the AppLayout index file. It will only
+ * render if the drawers are defined, and it will take over the mounting of and
+ * rendering of the Tools and SplitPanel (side position) if they exist. If drawers
+ * do not exist then the Tools and SplitPanel will be handled by the Tools component.
+ */
+export default function Drawers() {
+    const { drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } = useAppLayoutInternals();
+    const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;
+    if (!drawers) {
+        return null;
+    }
+    return (React.createElement("div", { className: clsx(styles['drawers-container'], {
+            [styles['has-open-drawer']]: hasOpenDrawer,
+            [styles.unfocusable]: isUnfocusable,
+        }) },
+        React.createElement(SplitPanel.Side, null),
+        React.createElement(ActiveDrawer, null),
+        React.createElement(DesktopTriggers, null)));
+}
+/**
+ * The ActiveDrawer component will render either the drawer content that corresponds
+ * to the activeDrawerId or the Tools content if it exists and isToolsOpen is true.
+ * The aria labels, click handling, and focus handling will be updated dynamically
+ * based on the active drawer or tools content.
+ */
+function ActiveDrawer() {
+    var _a, _b, _c;
+    const { activeDrawerId, activeDrawerWidth, ariaLabels, drawers, drawersRefs, handleDrawersClick, handleToolsClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen, isToolsOpen, navigationHide, tools, toolsRefs, } = useAppLayoutInternals();
+    const activeDrawer = (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items.find((item) => item.id === activeDrawerId)) !== null && _a !== void 0 ? _a : null;
+    const computedAriaLabels = {
+        closeButton: activeDrawerId ? (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.closeButton : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsClose,
+        content: activeDrawerId ? (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.content : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools,
+    };
+    const isHidden = !activeDrawerId && !isToolsOpen;
+    const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);
+    return (React.createElement("aside", { "aria-hidden": isHidden, "aria-label": computedAriaLabels.content, className: clsx(styles.drawer, {
+            [styles['is-drawer-open']]: activeDrawerId || isToolsOpen,
+            [styles.unfocusable]: isUnfocusable,
+            [testutilStyles['active-drawer']]: activeDrawerId,
+            [testutilStyles.tools]: isToolsOpen,
+        }), style: Object.assign({}, (!isMobile && activeDrawerWidth && { [customCssProps.activeDrawerWidth]: `${activeDrawerWidth}px` })) },
+        React.createElement("div", { className: clsx(styles['drawer-close-button']) },
+            React.createElement(InternalButton, { ariaLabel: computedAriaLabels.closeButton, className: clsx({
+                    [testutilStyles['active-drawer-close-button']]: activeDrawerId,
+                    [testutilStyles['tools-close']]: isToolsOpen,
+                }), formAction: "none", iconName: isMobile ? 'close' : 'angle-right', onClick: () => (activeDrawerId ? handleDrawersClick(activeDrawerId !== null && activeDrawerId !== void 0 ? activeDrawerId : null) : handleToolsClick(false)), ref: isToolsOpen ? toolsRefs.close : drawersRefs.close, variant: "icon" })),
+        React.createElement("div", { className: styles['drawer-content'] },
+            activeDrawerId && (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content),
+            isToolsOpen && tools)));
+}
+/**
+ * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the
+ * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be
+ * tracked by the previousActiveDrawerId property in order to appropriately apply
+ * the ref required to manage focus control.
+ */
+function DesktopTriggers() {
+    const { activeDrawerId, ariaLabels, drawers, drawersRefs, drawersTriggerCount, handleDrawersClick, handleSplitPanelClick, handleToolsClick, hasOpenDrawer, isMobile, isSplitPanelOpen, isToolsOpen, splitPanel, splitPanelDisplayed, splitPanelPosition, splitPanelRefs, splitPanelToggle, tools, toolsHide, toolsRefs, } = useAppLayoutInternals();
+    const hasMultipleTriggers = drawersTriggerCount > 1;
+    const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;
+    const previousActiveDrawerId = useRef(activeDrawerId);
+    if (activeDrawerId) {
+        previousActiveDrawerId.current = activeDrawerId;
+    }
+    if (isMobile) {
+        return null;
+    }
+    return (React.createElement("aside", { className: clsx(styles['drawers-desktop-triggers-container'], testutilStyles['drawers-desktop-triggers-container'], {
+            [styles['has-multiple-triggers']]: hasMultipleTriggers,
+            [styles['has-open-drawer']]: hasOpenDrawer,
+        }) },
+        React.createElement("div", { className: clsx(styles['drawers-trigger-content'], {
+                [styles['has-multiple-triggers']]: hasMultipleTriggers,
+                [styles['has-open-drawer']]: hasOpenDrawer,
+            }) },
+            !toolsHide && tools && (React.createElement(TriggerButton, { ariaLabel: ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle, className: clsx(styles['drawers-trigger'], testutilStyles['tools-toggle']), iconName: "status-info", onClick: () => {
+                    activeDrawerId && handleDrawersClick(null, true);
+                    handleToolsClick(!isToolsOpen);
+                }, ref: toolsRefs.toggle, selected: isToolsOpen })),
+            drawers.items.map((item) => {
+                var _a;
+                return (React.createElement(TriggerButton, { ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => {
+                        isToolsOpen && handleToolsClick(!isToolsOpen, true);
+                        handleDrawersClick(item.id);
+                    }, ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, selected: item.id === activeDrawerId }));
+            }),
+            hasSplitPanel && splitPanelToggle.displayed && (React.createElement(TriggerButton, { ariaLabel: splitPanelToggle.ariaLabel, className: clsx(styles['drawers-trigger'], splitPanelStyles['open-button']), iconName: "view-vertical", onClick: () => handleSplitPanelClick(), selected: hasSplitPanel && isSplitPanelOpen, ref: splitPanelRefs.toggle })))));
+}
+/**
+ * The MobileTriggers will be mounted inside of the AppBar component and
+ * only rendered when Drawers are defined in mobile viewports. The same logic
+ * will in the AppBar component will suppress the rendering of the legacy
+ * trigger button for the Tools drawer.
+ */
+export function MobileTriggers() {
+    var _a;
+    const { activeDrawerId, ariaLabels, drawers, drawersRefs, handleDrawersClick, handleToolsClick, hasDrawerViewportOverlay, isMobile, isToolsOpen, tools, toolsHide, toolsRefs, } = useAppLayoutInternals();
+    const previousActiveDrawerId = useRef(activeDrawerId);
+    if (activeDrawerId) {
+        previousActiveDrawerId.current = activeDrawerId;
+    }
+    if (!isMobile || !drawers) {
+        return null;
+    }
+    return (React.createElement("aside", { "aria-hidden": hasDrawerViewportOverlay, className: clsx(styles['drawers-mobile-triggers-container'], testutilStyles['drawers-mobile-triggers-container'], {
+            [styles.unfocusable]: hasDrawerViewportOverlay,
+        }) },
+        !toolsHide && tools && (React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isToolsOpen, className: testutilStyles['tools-toggle'], disabled: hasDrawerViewportOverlay, formAction: "none", iconName: "status-info", onClick: () => handleToolsClick(true), ref: toolsRefs.toggle, variant: "icon", __nativeAttributes: { 'aria-haspopup': true } })),
+        drawers.items.map((item) => {
+            var _a;
+            return (React.createElement(InternalButton, { ariaExpanded: item.id === activeDrawerId, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, className: testutilStyles['drawers-trigger'], disabled: hasDrawerViewportOverlay, formAction: "none", iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, key: item.id, onClick: () => handleDrawersClick(item.id), ref: item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined, variant: "icon", __nativeAttributes: { 'aria-haspopup': true } }));
+        })));
+}
+//# sourceMappingURL=drawers.js.map

package/app-layout/visual-refresh/drawers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawers.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/drawers.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, { useRef } from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { IconProps } from '../../icon/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport { NonCancelableEventHandler } from '../../internal/events';\nimport SplitPanel from './split-panel';\nimport TriggerButton from './trigger-button';\nimport { useAppLayoutInternals } from './context';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport interface DrawersProps {\n  activeDrawerId?: string;\n  items: ReadonlyArray<DrawersProps.Drawer>;\n  onChange?: NonCancelableEventHandler<DrawersProps.ChangeDetail>;\n}\n\nnamespace DrawersProps {\n  export interface Drawer {\n    ariaLabels?: Labels;\n    content: React.ReactNode;\n    id: string;\n    trigger: Trigger;\n  }\n\n  export interface ChangeDetail {\n    activeDrawerId: string | null;\n  }\n\n  interface Labels {\n    closeButton?: string;\n    content?: string;\n    triggerButton?: string;\n    resizeHandle?: string;\n  }\n  interface Trigger {\n    iconName?: IconProps.Name;\n    iconSvg?: React.ReactNode;\n    iconUrl?: string;\n  }\n}\n\n/**\n * The Drawers root component is mounted in the AppLayout index file. It will only\n * render if the drawers are defined, and it will take over the mounting of and\n * rendering of the Tools and SplitPanel (side position) if they exist. If drawers\n * do not exist then the Tools and SplitPanel will be handled by the Tools component.\n */\nexport default function Drawers() {\n  const { drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } =\n    useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n  if (!drawers) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(styles['drawers-container'], {\n        [styles['has-open-drawer']]: hasOpenDrawer,\n        [styles.unfocusable]: isUnfocusable,\n      })}\n    >\n      <SplitPanel.Side />\n      <ActiveDrawer />\n      <DesktopTriggers />\n    </div>\n  );\n}\n\n/**\n * The ActiveDrawer component will render either the drawer content that corresponds\n * to the activeDrawerId or the Tools content if it exists and isToolsOpen is true.\n * The aria labels, click handling, and focus handling will be updated dynamically\n * based on the active drawer or tools content.\n */\nfunction ActiveDrawer() {\n  const {\n    activeDrawerId,\n    activeDrawerWidth,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isNavigationOpen,\n    isToolsOpen,\n    navigationHide,\n    tools,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  const activeDrawer = drawers?.items.find((item: any) => item.id === activeDrawerId) ?? null;\n\n  const computedAriaLabels = {\n    closeButton: activeDrawerId ? activeDrawer?.ariaLabels?.closeButton : ariaLabels?.toolsClose,\n    content: activeDrawerId ? activeDrawer?.ariaLabels?.content : ariaLabels?.tools,\n  };\n\n  const isHidden = !activeDrawerId && !isToolsOpen;\n  const isUnfocusable = isHidden || (hasDrawerViewportOverlay && isNavigationOpen && !navigationHide);\n\n  return (\n    <aside\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, {\n        [styles['is-drawer-open']]: activeDrawerId || isToolsOpen,\n        [styles.unfocusable]: isUnfocusable,\n        [testutilStyles['active-drawer']]: activeDrawerId,\n        [testutilStyles.tools]: isToolsOpen,\n      })}\n      style={{\n        ...(!isMobile && activeDrawerWidth && { [customCssProps.activeDrawerWidth]: `${activeDrawerWidth}px` }),\n      }}\n    >\n      <div className={clsx(styles['drawer-close-button'])}>\n        <InternalButton\n          ariaLabel={computedAriaLabels.closeButton}\n          className={clsx({\n            [testutilStyles['active-drawer-close-button']]: activeDrawerId,\n            [testutilStyles['tools-close']]: isToolsOpen,\n          })}\n          formAction=\"none\"\n          iconName={isMobile ? 'close' : 'angle-right'}\n          onClick={() => (activeDrawerId ? handleDrawersClick(activeDrawerId ?? null) : handleToolsClick(false))}\n          ref={isToolsOpen ? toolsRefs.close : drawersRefs.close}\n          variant=\"icon\"\n        />\n      </div>\n\n      <div className={styles['drawer-content']}>\n        {activeDrawerId && activeDrawer?.content}\n        {isToolsOpen && tools}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The DesktopTriggers will render the trigger buttons for Tools, Drawers, and the\n * SplitPanel in non mobile viewports. Changes to the activeDrawerId need to be\n * tracked by the previousActiveDrawerId property in order to appropriately apply\n * the ref required to manage focus control.\n */\nfunction DesktopTriggers() {\n  const {\n    activeDrawerId,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    drawersTriggerCount,\n    handleDrawersClick,\n    handleSplitPanelClick,\n    handleToolsClick,\n    hasOpenDrawer,\n    isMobile,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    splitPanelDisplayed,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelToggle,\n    tools,\n    toolsHide,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  const hasMultipleTriggers = drawersTriggerCount > 1;\n  const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  if (isMobile) {\n    return null;\n  }\n\n  return (\n    <aside\n      className={clsx(\n        styles['drawers-desktop-triggers-container'],\n        testutilStyles['drawers-desktop-triggers-container'],\n        {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        }\n      )}\n    >\n      <div\n        className={clsx(styles['drawers-trigger-content'], {\n          [styles['has-multiple-triggers']]: hasMultipleTriggers,\n          [styles['has-open-drawer']]: hasOpenDrawer,\n        })}\n      >\n        {!toolsHide && tools && (\n          <TriggerButton\n            ariaLabel={ariaLabels?.toolsToggle}\n            className={clsx(styles['drawers-trigger'], testutilStyles['tools-toggle'])}\n            iconName=\"status-info\"\n            onClick={() => {\n              activeDrawerId && handleDrawersClick(null, true);\n              handleToolsClick(!isToolsOpen);\n            }}\n            ref={toolsRefs.toggle}\n            selected={isToolsOpen}\n          />\n        )}\n\n        {drawers.items.map((item: DrawersProps.Drawer) => (\n          <TriggerButton\n            ariaLabel={item.ariaLabels?.triggerButton}\n            className={clsx(styles['drawers-trigger'], testutilStyles['drawers-trigger'])}\n            iconName={item.trigger.iconName}\n            iconSvg={item.trigger.iconSvg}\n            key={item.id}\n            onClick={() => {\n              isToolsOpen && handleToolsClick(!isToolsOpen, true);\n              handleDrawersClick(item.id);\n            }}\n            ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n            selected={item.id === activeDrawerId}\n          />\n        ))}\n\n        {hasSplitPanel && splitPanelToggle.displayed && (\n          <TriggerButton\n            ariaLabel={splitPanelToggle.ariaLabel}\n            className={clsx(styles['drawers-trigger'], splitPanelStyles['open-button'])}\n            iconName=\"view-vertical\"\n            onClick={() => handleSplitPanelClick()}\n            selected={hasSplitPanel && isSplitPanelOpen}\n            ref={splitPanelRefs.toggle}\n          />\n        )}\n      </div>\n    </aside>\n  );\n}\n\n/**\n * The MobileTriggers will be mounted inside of the AppBar component and\n * only rendered when Drawers are defined in mobile viewports. The same logic\n * will in the AppBar component will suppress the rendering of the legacy\n * trigger button for the Tools drawer.\n */\nexport function MobileTriggers() {\n  const {\n    activeDrawerId,\n    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isToolsOpen,\n    tools,\n    toolsHide,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  if (!isMobile || !drawers) {\n    return null;\n  }\n\n  return (\n    <aside\n      aria-hidden={hasDrawerViewportOverlay}\n      className={clsx(\n        styles['drawers-mobile-triggers-container'],\n        testutilStyles['drawers-mobile-triggers-container'],\n        {\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        }\n      )}\n    >\n      {!toolsHide && tools && (\n        <InternalButton\n          ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n          ariaExpanded={isToolsOpen}\n          className={testutilStyles['tools-toggle']}\n          disabled={hasDrawerViewportOverlay}\n          formAction=\"none\"\n          iconName=\"status-info\"\n          onClick={() => handleToolsClick(true)}\n          ref={toolsRefs.toggle}\n          variant=\"icon\"\n          __nativeAttributes={{ 'aria-haspopup': true }}\n        />\n      )}\n\n      {drawers.items.map((item: DrawersProps.Drawer) => (\n        <InternalButton\n          ariaExpanded={item.id === activeDrawerId}\n          ariaLabel={item.ariaLabels?.triggerButton}\n          className={testutilStyles['drawers-trigger']}\n          disabled={hasDrawerViewportOverlay}\n          formAction=\"none\"\n          iconName={item.trigger.iconName}\n          iconSvg={item.trigger.iconSvg}\n          key={item.id}\n          onClick={() => handleDrawersClick(item.id)}\n          ref={item.id === previousActiveDrawerId.current ? drawersRefs.toggle : undefined}\n          variant=\"icon\"\n          __nativeAttributes={{ 'aria-haspopup': true }}\n        />\n      ))}\n    </aside>\n  );\n}\n"]}

package/app-layout/visual-refresh/header.js

@@ -9,14 +9,14 @@ import styles from './styles.css.js';
  * that the design tokens used are overridden with the appropriate values.
  */
 export default function Header() {
-    const { breadcrumbs, contentHeader, hasNotificationsContent, isMobile, isAnyPanelOpen } = useAppLayoutInternals();
+    const { breadcrumbs, contentHeader, hasDrawerViewportOverlay, hasNotificationsContent } = useAppLayoutInternals();
     if (!contentHeader) {
         return null;
     }
     return (React.createElement("header", { className: clsx(styles.content, {
             [styles['has-breadcrumbs']]: breadcrumbs,
             [styles['has-notifications-content']]: hasNotificationsContent,
-            [styles.unfocusable]: isMobile && isAnyPanelOpen,
+            [styles.unfocusable]: hasDrawerViewportOverlay,
         }, 'awsui-context-content-header') }, contentHeader));
 }
 //# sourceMappingURL=header.js.map

package/app-layout/visual-refresh/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM;IAC5B,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,uBAAuB,EAAE,QAAQ,EAAE,cAAc,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAElH,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,QAAQ,IAAI,cAAc;SACjD,EACD,8BAA8B,CAC/B,IAEA,aAAa,CACP,CACV,CAAC;AACJ,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 { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function Header() {\n  const { breadcrumbs, contentHeader, hasNotificationsContent, isMobile, isAnyPanelOpen } = useAppLayoutInternals();\n\n  if (!contentHeader) {\n    return null;\n  }\n\n  return (\n    <header\n      className={clsx(\n        styles.content,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {contentHeader}\n    </header>\n  );\n}\n"]}
+{"version":3,"file":"header.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/header.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM;IAC5B,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,wBAAwB,EAAE,uBAAuB,EAAE,GAAG,qBAAqB,EAAE,CAAC;IAElH,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED,OAAO,CACL,gCACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd;YACE,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,8BAA8B,CAC/B,IAEA,aAAa,CACP,CACV,CAAC;AACJ,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 { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function Header() {\n  const { breadcrumbs, contentHeader, hasDrawerViewportOverlay, hasNotificationsContent } = useAppLayoutInternals();\n\n  if (!contentHeader) {\n    return null;\n  }\n\n  return (\n    <header\n      className={clsx(\n        styles.content,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {contentHeader}\n    </header>\n  );\n}\n"]}

package/app-layout/visual-refresh/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAW/C;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,2FAiCpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAY/C;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,2FAmCpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}

package/app-layout/visual-refresh/index.js

@@ -4,6 +4,7 @@ import React from 'react';
 import AppBar from './app-bar';
 import { AppLayoutInternalsProvider } from './context';
 import Background from './background';
+import Drawers from './drawers';
 import Header from './header';
 import Layout from './layout';
 import Main from './main';
@@ -34,7 +35,8 @@ const AppLayoutWithRef = React.forwardRef(function AppLayout(props, ref) {
                 React.createElement(Main, null),
                 React.createElement(SplitPanel.Bottom, null),
                 React.createElement(Tools, null,
-                    React.createElement(SplitPanel.Side, null))))));
+                    React.createElement(SplitPanel.Side, null)),
+                React.createElement(Drawers, null)))));
 });
 export default AppLayoutWithRef;
 //# sourceMappingURL=index.js.map

package/app-layout/visual-refresh/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;AAEvD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D;;;;;;;GAOG;AACH,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,SAAS,CAC1D,KAAqB,EACrB,GAAkC;IAElC,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,OAAO,CACL,oBAAC,0BAA0B,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAC7C,oBAAC,UAAU;YACT,oBAAC,MAAM;gBACL,oBAAC,UAAU,OAAG;gBAEd,oBAAC,UAAU,OAAG;gBAEb,QAAQ,IAAI,oBAAC,MAAM,OAAG;gBAEvB,oBAAC,aAAa,OAAG;gBAEhB,CAAC,QAAQ,IAAI,oBAAC,MAAM,OAAG;gBAExB,oBAAC,MAAM,OAAG;gBAEV,oBAAC,IAAI,OAAG;gBAER,oBAAC,UAAU,CAAC,MAAM,OAAG;gBAErB,oBAAC,KAAK;oBACJ,oBAAC,UAAU,CAAC,IAAI,OAAG,CACb,CACD,CACE,CACc,CAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport AppBar from './app-bar';\nimport { AppLayoutInternalsProvider } from './context';\nimport { AppLayoutProps } from '../interfaces';\nimport Background from './background';\nimport Header from './header';\nimport Layout from './layout';\nimport Main from './main';\nimport Navigation from './navigation';\nimport Notifications from './notifications';\nimport SplitPanel from './split-panel';\nimport Tools from './tools';\nimport { useMobile } from '../../internal/hooks/use-mobile';\n\n/**\n * In mobile viewports the AppBar position changes to sticky and is placed\n * above the notifications. This is handled by adjusting the row positions\n * in CSS for the AppBar and Notifications components relative to the grid\n * definition in the Layout component. In order to keep alignment between\n * the visual ordering and logical ordering of the document the logical order\n * of these components is also modified in the markup below.\n */\nconst AppLayoutWithRef = React.forwardRef(function AppLayout(\n  props: AppLayoutProps,\n  ref: React.Ref<AppLayoutProps.Ref>\n) {\n  const isMobile = useMobile();\n\n  return (\n    <AppLayoutInternalsProvider {...props} ref={ref}>\n      <SplitPanel>\n        <Layout>\n          <Background />\n\n          <Navigation />\n\n          {isMobile && <AppBar />}\n\n          <Notifications />\n\n          {!isMobile && <AppBar />}\n\n          <Header />\n\n          <Main />\n\n          <SplitPanel.Bottom />\n\n          <Tools>\n            <SplitPanel.Side />\n          </Tools>\n        </Layout>\n      </SplitPanel>\n    </AppLayoutInternalsProvider>\n  );\n});\n\nexport default AppLayoutWithRef;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,MAAM,WAAW,CAAC;AAEvD,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,OAAO,MAAM,WAAW,CAAC;AAChC,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,MAAM,MAAM,UAAU,CAAC;AAC9B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,KAAK,MAAM,SAAS,CAAC;AAC5B,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D;;;;;;;GAOG;AACH,MAAM,gBAAgB,GAAG,KAAK,CAAC,UAAU,CAAC,SAAS,SAAS,CAC1D,KAAqB,EACrB,GAAkC;IAElC,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,OAAO,CACL,oBAAC,0BAA0B,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG;QAC7C,oBAAC,UAAU;YACT,oBAAC,MAAM;gBACL,oBAAC,UAAU,OAAG;gBAEd,oBAAC,UAAU,OAAG;gBAEb,QAAQ,IAAI,oBAAC,MAAM,OAAG;gBAEvB,oBAAC,aAAa,OAAG;gBAEhB,CAAC,QAAQ,IAAI,oBAAC,MAAM,OAAG;gBAExB,oBAAC,MAAM,OAAG;gBAEV,oBAAC,IAAI,OAAG;gBAER,oBAAC,UAAU,CAAC,MAAM,OAAG;gBAErB,oBAAC,KAAK;oBACJ,oBAAC,UAAU,CAAC,IAAI,OAAG,CACb;gBAER,oBAAC,OAAO,OAAG,CACJ,CACE,CACc,CAC9B,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport AppBar from './app-bar';\nimport { AppLayoutInternalsProvider } from './context';\nimport { AppLayoutProps } from '../interfaces';\nimport Background from './background';\nimport Drawers from './drawers';\nimport Header from './header';\nimport Layout from './layout';\nimport Main from './main';\nimport Navigation from './navigation';\nimport Notifications from './notifications';\nimport SplitPanel from './split-panel';\nimport Tools from './tools';\nimport { useMobile } from '../../internal/hooks/use-mobile';\n\n/**\n * In mobile viewports the AppBar position changes to sticky and is placed\n * above the notifications. This is handled by adjusting the row positions\n * in CSS for the AppBar and Notifications components relative to the grid\n * definition in the Layout component. In order to keep alignment between\n * the visual ordering and logical ordering of the document the logical order\n * of these components is also modified in the markup below.\n */\nconst AppLayoutWithRef = React.forwardRef(function AppLayout(\n  props: AppLayoutProps,\n  ref: React.Ref<AppLayoutProps.Ref>\n) {\n  const isMobile = useMobile();\n\n  return (\n    <AppLayoutInternalsProvider {...props} ref={ref}>\n      <SplitPanel>\n        <Layout>\n          <Background />\n\n          <Navigation />\n\n          {isMobile && <AppBar />}\n\n          <Notifications />\n\n          {!isMobile && <AppBar />}\n\n          <Header />\n\n          <Main />\n\n          <SplitPanel.Bottom />\n\n          <Tools>\n            <SplitPanel.Side />\n          </Tools>\n\n          <Drawers />\n        </Layout>\n      </SplitPanel>\n    </AppLayoutInternalsProvider>\n  );\n});\n\nexport default AppLayoutWithRef;\n"]}

package/app-layout/visual-refresh/layout.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"layout.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,eAwEvD"}
+{"version":3,"file":"layout.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/layout.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,UAAU,WAAW;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE,WAAW,eAgEvD"}

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

@@ -2,10 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import customCssProps from '../../internal/generated/custom-css-properties';
 import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
-import customCssProps from '../../internal/generated/custom-css-properties';
 /**
  * The layoutElement ref will be used by the resize observers to calculate the offset from
  * the top and bottom of the viewport based on the header and footer elements. This is to
@@ -13,11 +13,11 @@ import customCssProps from '../../internal/generated/custom-css-properties';
  * cumulative heights.
  */
 export default function Layout({ children }) {
-    const { contentHeader, contentType, disableBodyScroll, disableContentHeaderOverlap, dynamicOverlapHeight, footerHeight, hasNotificationsContent, headerHeight, isNavigationOpen, isSplitPanelOpen, isToolsOpen, layoutElement, layoutWidth, mainOffsetLeft, maxContentWidth, minContentWidth, navigationHide, notificationsHeight, splitPanelPosition, stickyNotifications, splitPanelDisplayed, toolsHide, } = useAppLayoutInternals();
-    const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);
+    const { contentHeader, contentType, disableBodyScroll, disableContentHeaderOverlap, drawersTriggerCount, dynamicOverlapHeight, footerHeight, hasNotificationsContent, hasOpenDrawer, headerHeight, isNavigationOpen, layoutElement, layoutWidth, mainOffsetLeft, maxContentWidth, minContentWidth, navigationHide, notificationsHeight, splitPanelPosition, stickyNotifications, splitPanelDisplayed, } = useAppLayoutInternals();
     // Content gaps on the left and right are used with the minmax function in the CSS grid column definition
-    const hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);
-    const hasContentGapRight = getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanelDisplayed, toolsHide);
+    const hasContentGapLeft = isNavigationOpen || navigationHide;
+    const hasContentGapRight = drawersTriggerCount <= 0 || hasOpenDrawer;
+    const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);
     return (React.createElement("main", { className: clsx(styles.layout, styles[`content-type-${contentType}`], styles[`split-panel-position-${splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom'}`], {
             [styles['disable-body-scroll']]: disableBodyScroll,
             [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,
@@ -30,43 +30,6 @@ export default function Layout({ children }) {
         }, testutilStyles.root), ref: layoutElement, style: Object.assign(Object.assign(Object.assign(Object.assign({ [customCssProps.headerHeight]: `${headerHeight}px`, [customCssProps.footerHeight]: `${footerHeight}px`, [customCssProps.layoutWidth]: `${layoutWidth}px`, [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px` }, (maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` })), (minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` })), { [customCssProps.notificationsHeight]: `${notificationsHeight}px` }), (!isOverlapDisabled &&
             dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` })) }, children));
 }
-/**
- * When the Navigation and Tools are present the grid definition has the center column
- * touch the first and last columns with no gap. The forms with the circular buttons
- * for Navigation and Tools have internal padding which creates the necessary
- * horizontal space when the drawers are closed. The remaining conditions below
- * determine the necessity of utilizing the content gap left property to create
- * horizontal space between the center column and its adjacent siblings.
- */
-function getContentGapRight(splitPanelPosition, isSplitPanelOpen, isToolsOpen, splitPanelDisplayed, toolsHide) {
-    let hasContentGapRight = false;
-    // Main is touching the edge of the Layout and needs a content gap
-    if (!splitPanelDisplayed && toolsHide) {
-        hasContentGapRight = true;
-    }
-    // Main is touching the Tools drawer and needs a content gap
-    if ((!splitPanelDisplayed || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {
-        hasContentGapRight = true;
-    }
-    // Main is touching the edge of the Layout and needs a content gap
-    if (splitPanelDisplayed && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {
-        hasContentGapRight = true;
-    }
-    // Main is touching the Split Panel drawer and needs a content gap
-    if (splitPanelDisplayed && isSplitPanelOpen && splitPanelPosition === 'side') {
-        hasContentGapRight = true;
-    }
-    return hasContentGapRight;
-}
-/**
- * Additional function to determine whether or not a content gap is needed
- * on the left (see the getContentGapRight function). The same render logic applies
- * regarding the center column touching an adjacent sibling but the only
- * component state that needs to be tracked is the Navigation.
- */
-function getContentGapLeft(isNavigationOpen, navigationHide) {
-    return isNavigationOpen || navigationHide ? true : false;
-}
 /**
  * Determine whether the overlap between the contentHeader and content slots should be disabled.
  * The disableContentHeaderOverlap property is absolute and will always disable the overlap

package/app-layout/visual-refresh/layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"layout.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/layout.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 from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentHeaderOverlap,\n    dynamicOverlapHeight,\n    footerHeight,\n    hasNotificationsContent,\n    headerHeight,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    splitPanelPosition,\n    stickyNotifications,\n    splitPanelDisplayed,\n    toolsHide,\n  } = useAppLayoutInternals();\n\n  const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = getContentGapLeft(isNavigationOpen, navigationHide);\n  const hasContentGapRight = getContentGapRight(\n    splitPanelPosition,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanelDisplayed,\n    toolsHide\n  );\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['has-sticky-notifications']]: stickyNotifications && hasNotificationsContent,\n          [styles['is-overlap-disabled']]: isOverlapDisabled,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n        ...(!isOverlapDisabled &&\n          dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` }),\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/**\n * When the Navigation and Tools are present the grid definition has the center column\n * touch the first and last columns with no gap. The forms with the circular buttons\n * for Navigation and Tools have internal padding which creates the necessary\n * horizontal space when the drawers are closed. The remaining conditions below\n * determine the necessity of utilizing the content gap left property to create\n * horizontal space between the center column and its adjacent siblings.\n */\nfunction getContentGapRight(\n  splitPanelPosition: AppLayoutProps.SplitPanelPosition,\n  isSplitPanelOpen: boolean | undefined,\n  isToolsOpen: boolean,\n  splitPanelDisplayed: boolean,\n  toolsHide?: boolean\n) {\n  let hasContentGapRight = false;\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (!splitPanelDisplayed && toolsHide) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Tools drawer and needs a content gap\n  if ((!splitPanelDisplayed || !isSplitPanelOpen) && !toolsHide && isToolsOpen) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the edge of the Layout and needs a content gap\n  if (splitPanelDisplayed && splitPanelPosition === 'bottom' && (isToolsOpen || toolsHide)) {\n    hasContentGapRight = true;\n  }\n\n  // Main is touching the Split Panel drawer and needs a content gap\n  if (splitPanelDisplayed && isSplitPanelOpen && splitPanelPosition === 'side') {\n    hasContentGapRight = true;\n  }\n\n  return hasContentGapRight;\n}\n\n/**\n * Additional function to determine whether or not a content gap is needed\n * on the left (see the getContentGapRight function). The same render logic applies\n * regarding the center column touching an adjacent sibling but the only\n * component state that needs to be tracked is the Navigation.\n */\nfunction getContentGapLeft(isNavigationOpen: boolean, navigationHide?: boolean) {\n  return isNavigationOpen || navigationHide ? true : false;\n}\n\n/**\n * Determine whether the overlap between the contentHeader and content slots should be disabled.\n * The disableContentHeaderOverlap property is absolute and will always disable the overlap\n * if it is set to true. If there is no contentHeader then the overlap should be disabled\n * unless there is a dynamicOverlapHeight. The dynamicOverlapHeight property is set by a\n * component in the content slot that needs to manually control the overlap height. Components\n * such as the Table (full page variant), Wizard, ContentLayout use this property and will\n * retain the overlap even if there is nothing rendered in the contentHeader slot.\n */\nfunction getOverlapDisabled(\n  dynamicOverlapHeight: number,\n  contentHeader?: React.ReactNode,\n  disableContentHeaderOverlap?: boolean\n) {\n  let isOverlapDisabled = false;\n\n  if (disableContentHeaderOverlap) {\n    isOverlapDisabled = true;\n  } else if (!contentHeader && dynamicOverlapHeight <= 0) {\n    isOverlapDisabled = true;\n  }\n\n  return isOverlapDisabled;\n}\n"]}
+{"version":3,"file":"layout.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/layout.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 from 'react';\nimport clsx from 'clsx';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface LayoutProps {\n  children: React.ReactNode;\n}\n\n/**\n * The layoutElement ref will be used by the resize observers to calculate the offset from\n * the top and bottom of the viewport based on the header and footer elements. This is to\n * ensure the Layout component minimum height will fill 100% of the viewport less those\n * cumulative heights.\n */\nexport default function Layout({ children }: LayoutProps) {\n  const {\n    contentHeader,\n    contentType,\n    disableBodyScroll,\n    disableContentHeaderOverlap,\n    drawersTriggerCount,\n    dynamicOverlapHeight,\n    footerHeight,\n    hasNotificationsContent,\n    hasOpenDrawer,\n    headerHeight,\n    isNavigationOpen,\n    layoutElement,\n    layoutWidth,\n    mainOffsetLeft,\n    maxContentWidth,\n    minContentWidth,\n    navigationHide,\n    notificationsHeight,\n    splitPanelPosition,\n    stickyNotifications,\n    splitPanelDisplayed,\n  } = useAppLayoutInternals();\n\n  // Content gaps on the left and right are used with the minmax function in the CSS grid column definition\n  const hasContentGapLeft = isNavigationOpen || navigationHide;\n  const hasContentGapRight = drawersTriggerCount <= 0 || hasOpenDrawer;\n  const isOverlapDisabled = getOverlapDisabled(dynamicOverlapHeight, contentHeader, disableContentHeaderOverlap);\n\n  return (\n    <main\n      className={clsx(\n        styles.layout,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-body-scroll']]: disableBodyScroll,\n          [testutilStyles['disable-body-scroll-root']]: disableBodyScroll,\n          [styles['has-content-gap-left']]: hasContentGapLeft,\n          [styles['has-content-gap-right']]: hasContentGapRight,\n          [styles['has-max-content-width']]: maxContentWidth && maxContentWidth > 0,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['has-sticky-notifications']]: stickyNotifications && hasNotificationsContent,\n          [styles['is-overlap-disabled']]: isOverlapDisabled,\n        },\n        testutilStyles.root\n      )}\n      ref={layoutElement}\n      style={{\n        [customCssProps.headerHeight]: `${headerHeight}px`,\n        [customCssProps.footerHeight]: `${footerHeight}px`,\n        [customCssProps.layoutWidth]: `${layoutWidth}px`,\n        [customCssProps.mainOffsetLeft]: `${mainOffsetLeft}px`,\n        ...(maxContentWidth && { [customCssProps.maxContentWidth]: `${maxContentWidth}px` }),\n        ...(minContentWidth && { [customCssProps.minContentWidth]: `${minContentWidth}px` }),\n        [customCssProps.notificationsHeight]: `${notificationsHeight}px`,\n        ...(!isOverlapDisabled &&\n          dynamicOverlapHeight > 0 && { [customCssProps.overlapHeight]: `${dynamicOverlapHeight}px` }),\n      }}\n    >\n      {children}\n    </main>\n  );\n}\n\n/**\n * Determine whether the overlap between the contentHeader and content slots should be disabled.\n * The disableContentHeaderOverlap property is absolute and will always disable the overlap\n * if it is set to true. If there is no contentHeader then the overlap should be disabled\n * unless there is a dynamicOverlapHeight. The dynamicOverlapHeight property is set by a\n * component in the content slot that needs to manually control the overlap height. Components\n * such as the Table (full page variant), Wizard, ContentLayout use this property and will\n * retain the overlap even if there is nothing rendered in the contentHeader slot.\n */\nfunction getOverlapDisabled(\n  dynamicOverlapHeight: number,\n  contentHeader?: React.ReactNode,\n  disableContentHeaderOverlap?: boolean\n) {\n  let isOverlapDisabled = false;\n\n  if (disableContentHeaderOverlap) {\n    isOverlapDisabled = true;\n  } else if (!contentHeader && dynamicOverlapHeight <= 0) {\n    isOverlapDisabled = true;\n  }\n\n  return isOverlapDisabled;\n}\n"]}

package/app-layout/visual-refresh/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/main.tsx"],"names":[],"mappings":";AASA,MAAM,CAAC,OAAO,UAAU,IAAI,gBAoD3B"}
+{"version":3,"file":"main.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/main.tsx"],"names":[],"mappings":";AASA,MAAM,CAAC,OAAO,UAAU,IAAI,gBAkD3B"}

package/app-layout/visual-refresh/main.js

@@ -7,8 +7,7 @@ import customCssProps from '../../internal/generated/custom-css-properties';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 export default function Main() {
-    const { breadcrumbs, content, contentHeader, contentType, disableContentPaddings, dynamicOverlapHeight, hasNotificationsContent, isNavigationOpen, isSplitPanelOpen, isToolsOpen, isMobile, isAnyPanelOpen, mainElement, splitPanelDisplayed, offsetBottom, footerHeight, splitPanelPosition, } = useAppLayoutInternals();
-    const isUnfocusable = isMobile && isAnyPanelOpen;
+    const { breadcrumbs, content, contentHeader, contentType, disableContentPaddings, dynamicOverlapHeight, hasDrawerViewportOverlay, hasNotificationsContent, isNavigationOpen, isSplitPanelOpen, isToolsOpen, mainElement, splitPanelDisplayed, offsetBottom, footerHeight, splitPanelPosition, } = useAppLayoutInternals();
     const splitPanelHeight = offsetBottom - footerHeight;
     return (React.createElement("div", { className: clsx(styles.container, styles[`content-type-${contentType}`], styles[`split-panel-position-${splitPanelPosition !== null && splitPanelPosition !== void 0 ? splitPanelPosition : 'bottom'}`], {
             [styles['disable-content-paddings']]: disableContentPaddings,
@@ -20,7 +19,7 @@ export default function Main() {
             [styles['is-navigation-open']]: isNavigationOpen,
             [styles['is-tools-open']]: isToolsOpen,
             [styles['is-split-panel-open']]: isSplitPanelOpen,
-            [styles.unfocusable]: isUnfocusable,
+            [styles.unfocusable]: hasDrawerViewportOverlay,
         }, testutilStyles.content), ref: mainElement, style: {
             [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,
         } }, content));

package/app-layout/visual-refresh/main.js.map

@@ -1 +1 @@
-{"version":3,"file":"main.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,MAAM,EACJ,WAAW,EACX,OAAO,EACP,aAAa,EACb,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,uBAAuB,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,kBAAkB,GACnB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,aAAa,GAAG,QAAQ,IAAI,cAAc,CAAC;IACjD,MAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,gBAAgB,WAAW,EAAE,CAAC,EACrC,MAAM,CAAC,wBAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,EAAE,CAAC,EAChE;YACE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,sBAAsB;YAC5D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,EAAE,oBAAoB,GAAG,CAAC;YAChE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,aAAa;YACrC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,mBAAmB;YAChD,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,gBAAgB;YAChD,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,WAAW;YACtC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,gBAAgB;YACjD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,aAAa;SACpC,EACD,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;YACL,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,GAAG,gBAAgB,IAAI;SAC3D,IAEA,OAAO,CACJ,CACP,CAAC;AACJ,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 { useAppLayoutInternals } from './context';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Main() {\n  const {\n    breadcrumbs,\n    content,\n    contentHeader,\n    contentType,\n    disableContentPaddings,\n    dynamicOverlapHeight,\n    hasNotificationsContent,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    isMobile,\n    isAnyPanelOpen,\n    mainElement,\n    splitPanelDisplayed,\n    offsetBottom,\n    footerHeight,\n    splitPanelPosition,\n  } = useAppLayoutInternals();\n\n  const isUnfocusable = isMobile && isAnyPanelOpen;\n  const splitPanelHeight = offsetBottom - footerHeight;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n          [styles['has-header']]: contentHeader,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['is-navigation-open']]: isNavigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: isUnfocusable,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n      style={{\n        [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"main.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/main.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,cAAc,MAAM,gDAAgD,CAAC;AAC5E,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D,MAAM,CAAC,OAAO,UAAU,IAAI;IAC1B,MAAM,EACJ,WAAW,EACX,OAAO,EACP,aAAa,EACb,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,wBAAwB,EACxB,uBAAuB,EACvB,gBAAgB,EAChB,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,mBAAmB,EACnB,YAAY,EACZ,YAAY,EACZ,kBAAkB,GACnB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,MAAM,gBAAgB,GAAG,YAAY,GAAG,YAAY,CAAC;IAErD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,SAAS,EAChB,MAAM,CAAC,gBAAgB,WAAW,EAAE,CAAC,EACrC,MAAM,CAAC,wBAAwB,kBAAkB,aAAlB,kBAAkB,cAAlB,kBAAkB,GAAI,QAAQ,EAAE,CAAC,EAChE;YACE,CAAC,MAAM,CAAC,0BAA0B,CAAC,CAAC,EAAE,sBAAsB;YAC5D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,WAAW;YACxC,CAAC,MAAM,CAAC,4BAA4B,CAAC,CAAC,EAAE,oBAAoB,GAAG,CAAC;YAChE,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,aAAa;YACrC,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC,EAAE,mBAAmB;YAChD,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,gBAAgB;YAChD,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,EAAE,WAAW;YACtC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,EAAE,gBAAgB;YACjD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,OAAO,CACvB,EACD,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;YACL,CAAC,cAAc,CAAC,gBAAgB,CAAC,EAAE,GAAG,gBAAgB,IAAI;SAC3D,IAEA,OAAO,CACJ,CACP,CAAC;AACJ,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 { useAppLayoutInternals } from './context';\nimport customCssProps from '../../internal/generated/custom-css-properties';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function Main() {\n  const {\n    breadcrumbs,\n    content,\n    contentHeader,\n    contentType,\n    disableContentPaddings,\n    dynamicOverlapHeight,\n    hasDrawerViewportOverlay,\n    hasNotificationsContent,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    mainElement,\n    splitPanelDisplayed,\n    offsetBottom,\n    footerHeight,\n    splitPanelPosition,\n  } = useAppLayoutInternals();\n\n  const splitPanelHeight = offsetBottom - footerHeight;\n\n  return (\n    <div\n      className={clsx(\n        styles.container,\n        styles[`content-type-${contentType}`],\n        styles[`split-panel-position-${splitPanelPosition ?? 'bottom'}`],\n        {\n          [styles['disable-content-paddings']]: disableContentPaddings,\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n          [styles['has-header']]: contentHeader,\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['has-split-panel']]: splitPanelDisplayed,\n          [styles['is-navigation-open']]: isNavigationOpen,\n          [styles['is-tools-open']]: isToolsOpen,\n          [styles['is-split-panel-open']]: isSplitPanelOpen,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        testutilStyles.content\n      )}\n      ref={mainElement}\n      style={{\n        [customCssProps.splitPanelHeight]: `${splitPanelHeight}px`,\n      }}\n    >\n      {content}\n    </div>\n  );\n}\n"]}

package/app-layout/visual-refresh/navigation.js

@@ -18,7 +18,7 @@ import customCssProps from '../../internal/generated/custom-css-properties';
  * passed through the API;
  */
 export default function Navigation() {
-    const { ariaLabels, handleNavigationClick, isMobile, isNavigationOpen, navigation, navigationHide, navigationWidth, isToolsOpen, isAnyPanelOpen, toolsHide, navigationRefs, } = useAppLayoutInternals();
+    const { ariaLabels, handleNavigationClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen, navigation, navigationHide, navigationWidth, isToolsOpen, toolsHide, navigationRefs, } = useAppLayoutInternals();
     if (navigationHide) {
         return null;
     }
@@ -29,7 +29,7 @@ export default function Navigation() {
             handleNavigationClick(false);
         }
     };
-    const isUnfocusable = isMobile && isAnyPanelOpen && isToolsOpen && !toolsHide;
+    const isUnfocusable = hasDrawerViewportOverlay && isToolsOpen && !toolsHide;
     return (React.createElement(Transition, { in: isNavigationOpen }, (state, transitionEventsRef) => {
         var _a, _b, _c;
         return (React.createElement("div", { className: clsx(styles['navigation-container'], {

package/app-layout/visual-refresh/navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"navigation.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/navigation.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 from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    handleNavigationClick,\n    isMobile,\n    isNavigationOpen,\n    navigation,\n    navigationHide,\n    navigationWidth,\n    isToolsOpen,\n    isAnyPanelOpen,\n    toolsHide,\n    navigationRefs,\n  } = useAppLayoutInternals();\n\n  if (navigationHide) {\n    return null;\n  }\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      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = isMobile && isAnyPanelOpen && isToolsOpen && !toolsHide;\n\n  return (\n    <Transition in={isNavigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [testutilStyles['drawer-closed']]: !isNavigationOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n          style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || isNavigationOpen ? true : false}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={navigationRefs.toggle}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!isNavigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\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={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={navigationRefs.close}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}
+{"version":3,"file":"navigation.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/navigation.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 from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport TriggerButton from './trigger-button';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { Transition } from '../../internal/components/transition';\nimport { findUpUntil } from '../../internal/utils/dom';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * The Navigation component consists of the following elements:\n * the container, or root element, that sits as a direct child to the Layout grid definition;\n * the show navigation form that contains the trigger for the drawer in large viewports;\n * the navigation, or drawer, that contains the hide navigation form and the children\n * passed through the API;\n */\nexport default function Navigation() {\n  const {\n    ariaLabels,\n    handleNavigationClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isNavigationOpen,\n    navigation,\n    navigationHide,\n    navigationWidth,\n    isToolsOpen,\n    toolsHide,\n    navigationRefs,\n  } = useAppLayoutInternals();\n\n  if (navigationHide) {\n    return null;\n  }\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      handleNavigationClick(false);\n    }\n  };\n\n  const isUnfocusable = hasDrawerViewportOverlay && isToolsOpen && !toolsHide;\n\n  return (\n    <Transition in={isNavigationOpen}>\n      {(state, transitionEventsRef) => (\n        <div\n          className={clsx(styles['navigation-container'], {\n            [testutilStyles['drawer-closed']]: !isNavigationOpen,\n            [styles.unfocusable]: isUnfocusable,\n          })}\n          // Overwrite the default nav width (depends on breakpoints) only when the `navigationWidth` property is set.\n          style={{ ...(navigationWidth && { [customCssProps.navigationWidth]: `${navigationWidth}px` }) }}\n        >\n          {!isMobile && (\n            <nav\n              aria-hidden={isMobile || isNavigationOpen ? true : false}\n              aria-label={ariaLabels?.navigation ?? undefined}\n              className={clsx(styles['show-navigation'], {\n                [styles.animating]: state === 'exiting',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              })}\n              ref={state === 'exiting' ? transitionEventsRef : undefined}\n            >\n              <TriggerButton\n                ariaLabel={ariaLabels?.navigationToggle}\n                iconName=\"menu\"\n                className={testutilStyles['navigation-toggle']}\n                onClick={() => handleNavigationClick(true)}\n                ref={navigationRefs.toggle}\n              />\n            </nav>\n          )}\n\n          <nav\n            aria-label={ariaLabels?.navigation ?? undefined}\n            className={clsx(\n              styles.navigation,\n              {\n                [styles.animating]: state === 'entering',\n                [styles['is-navigation-open']]: isNavigationOpen,\n              },\n              testutilStyles.navigation\n            )}\n            ref={state !== 'exiting' ? transitionEventsRef : undefined}\n            aria-hidden={!isNavigationOpen}\n            onClick={event => {\n              onNavigationClick && onNavigationClick(event);\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={() => handleNavigationClick(false)}\n                  variant=\"icon\"\n                  formAction=\"none\"\n                  className={testutilStyles['navigation-close']}\n                  ref={navigationRefs.close}\n                />\n              </div>\n              {navigation}\n            </div>\n          </nav>\n        </div>\n      )}\n    </Transition>\n  );\n}\n"]}

package/app-layout/visual-refresh/notifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":";AAQA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,uBAsCpC"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":";AAQA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa,uBAqCpC"}

package/app-layout/visual-refresh/notifications.js

@@ -11,7 +11,7 @@ import testutilStyles from '../test-classes/styles.css.js';
  */
 export default function Notifications() {
     var _a;
-    const { ariaLabels, hasNotificationsContent, notifications, notificationsElement, stickyNotifications, isMobile, isAnyPanelOpen, } = useAppLayoutInternals();
+    const { ariaLabels, hasDrawerViewportOverlay, hasNotificationsContent, notifications, notificationsElement, stickyNotifications, } = useAppLayoutInternals();
     if (!notifications) {
         return null;
     }
@@ -22,7 +22,7 @@ export default function Notifications() {
     return (React.createElement("div", { role: "region", "aria-label": (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.notifications) !== null && _a !== void 0 ? _a : undefined, className: clsx(styles.notifications, {
             [styles['has-notifications-content']]: hasNotificationsContent,
             [styles['sticky-notifications']]: stickyNotifications,
-            [styles.unfocusable]: isMobile && isAnyPanelOpen,
+            [styles.unfocusable]: hasDrawerViewportOverlay,
         }, testutilStyles.notifications, 'awsui-context-content-header') },
         React.createElement("div", { ref: notificationsElement }, notifications)));
 }

package/app-layout/visual-refresh/notifications.js.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa;;IACnC,MAAM,EACJ,UAAU,EACV,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,mBAAmB,EACnB,QAAQ,EACR,cAAc,GACf,GAAG,qBAAqB,EAAE,CAAC;IAE5B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED;;;OAGG;IAEH,OAAO,CACL,6BACE,IAAI,EAAC,QAAQ,gBACD,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,EACpB;YACE,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,mBAAmB;YACrD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,QAAQ,IAAI,cAAc;SACjD,EACD,cAAc,CAAC,aAAa,EAC5B,8BAA8B,CAC/B;QAED,6BAAK,GAAG,EAAE,oBAAoB,IAAG,aAAa,CAAO,CACjD,CACP,CAAC;AACJ,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 { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function Notifications() {\n  const {\n    ariaLabels,\n    hasNotificationsContent,\n    notifications,\n    notificationsElement,\n    stickyNotifications,\n    isMobile,\n    isAnyPanelOpen,\n  } = useAppLayoutInternals();\n\n  if (!notifications) {\n    return null;\n  }\n\n  /*\n  The notificationsElement ref is assigned to an inner div to prevent internal bottom margin from affecting the\n  calculated height, which is used for sticky elements below.\n   */\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabels?.notifications ?? undefined}\n      className={clsx(\n        styles.notifications,\n        {\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['sticky-notifications']]: stickyNotifications,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n        },\n        testutilStyles.notifications,\n        'awsui-context-content-header'\n      )}\n    >\n      <div ref={notificationsElement}>{notifications}</div>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"notifications.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/notifications.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AAClD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAE3D;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,aAAa;;IACnC,MAAM,EACJ,UAAU,EACV,wBAAwB,EACxB,uBAAuB,EACvB,aAAa,EACb,oBAAoB,EACpB,mBAAmB,GACpB,GAAG,qBAAqB,EAAE,CAAC;IAE5B,IAAI,CAAC,aAAa,EAAE;QAClB,OAAO,IAAI,CAAC;KACb;IAED;;;OAGG;IAEH,OAAO,CACL,6BACE,IAAI,EAAC,QAAQ,gBACD,MAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,aAAa,mCAAI,SAAS,EAClD,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,aAAa,EACpB;YACE,CAAC,MAAM,CAAC,2BAA2B,CAAC,CAAC,EAAE,uBAAuB;YAC9D,CAAC,MAAM,CAAC,sBAAsB,CAAC,CAAC,EAAE,mBAAmB;YACrD,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,wBAAwB;SAC/C,EACD,cAAc,CAAC,aAAa,EAC5B,8BAA8B,CAC/B;QAED,6BAAK,GAAG,EAAE,oBAAoB,IAAG,aAAa,CAAO,CACjD,CACP,CAAC;AACJ,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 { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function Notifications() {\n  const {\n    ariaLabels,\n    hasDrawerViewportOverlay,\n    hasNotificationsContent,\n    notifications,\n    notificationsElement,\n    stickyNotifications,\n  } = useAppLayoutInternals();\n\n  if (!notifications) {\n    return null;\n  }\n\n  /*\n  The notificationsElement ref is assigned to an inner div to prevent internal bottom margin from affecting the\n  calculated height, which is used for sticky elements below.\n   */\n\n  return (\n    <div\n      role=\"region\"\n      aria-label={ariaLabels?.notifications ?? undefined}\n      className={clsx(\n        styles.notifications,\n        {\n          [styles['has-notifications-content']]: hasNotificationsContent,\n          [styles['sticky-notifications']]: stickyNotifications,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n        },\n        testutilStyles.notifications,\n        'awsui-context-content-header'\n      )}\n    >\n      <div ref={notificationsElement}>{notifications}</div>\n    </div>\n  );\n}\n"]}

package/app-layout/visual-refresh/split-panel.js

@@ -46,16 +46,16 @@ function SplitPanel({ children }) {
  * on the presence and state of the Navigation and Tools components.
  */
 function SplitPanelBottom() {
-    const { disableBodyScroll, isNavigationOpen, isSplitPanelOpen, isToolsOpen, splitPanel, splitPanelPosition, splitPanelReportedSize, splitPanelReportedHeaderHeight, } = useAppLayoutInternals();
+    const { disableBodyScroll, hasOpenDrawer, isNavigationOpen, isSplitPanelOpen, splitPanel, splitPanelPosition, splitPanelReportedSize, splitPanelReportedHeaderHeight, } = useAppLayoutInternals();
     if (!splitPanel) {
         return null;
     }
     return (React.createElement(Transition, { in: isSplitPanelOpen !== null && isSplitPanelOpen !== void 0 ? isSplitPanelOpen : false, exit: false }, (state, transitionEventsRef) => (React.createElement("section", { className: clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {
             [styles.animating]: state === 'entering',
             [styles['disable-body-scroll']]: disableBodyScroll,
+            [styles['has-open-drawer']]: hasOpenDrawer,
             [styles['is-navigation-open']]: isNavigationOpen,
             [styles['is-split-panel-open']]: isSplitPanelOpen,
-            [styles['is-tools-open']]: isToolsOpen,
         }), ref: transitionEventsRef, style: {
             [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,
             [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,

package/app-layout/visual-refresh/split-panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"split-panel.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/split-panel.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 from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport { SplitPanelContextProvider, SplitPanelContextProps } from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    setSplitPanelReportedHeaderHeight,\n    splitPanelPosition,\n    splitPanelSize,\n    setSplitPanelToggle,\n    splitPanelRefs,\n    headerHeight,\n    footerHeight,\n  } = useAppLayoutInternals();\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => {\n      const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\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    getMaxWidth: () => document.documentElement.clientWidth,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    topOffset: 0,\n    setSplitPanelToggle,\n    refs: splitPanelRefs,\n  };\n\n  return <SplitPanelContextProvider value={context}>{children}</SplitPanelContextProvider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const {\n    disableBodyScroll,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    isToolsOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelReportedSize,\n    splitPanelReportedHeaderHeight,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n            [styles['is-tools-open']]: isToolsOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const {\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelMaxWidth,\n    splitPanelMinWidth,\n    splitPanelReportedSize,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}
+{"version":3,"file":"split-panel.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/split-panel.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 from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport { SplitPanelContextProvider, SplitPanelContextProps } from '../../internal/context/split-panel-context';\nimport styles from './styles.css.js';\nimport { AppLayoutProps } from '../interfaces';\nimport { Transition } from '../../internal/components/transition';\nimport customCssProps from '../../internal/generated/custom-css-properties';\n\n/**\n * If there is no Split Panel in the AppLayout context then the SplitPanel\n * will pass through the AppLayout children without the context.\n */\nfunction SplitPanel({ children }: React.PropsWithChildren<unknown>) {\n  const {\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    setSplitPanelReportedHeaderHeight,\n    splitPanelPosition,\n    splitPanelSize,\n    setSplitPanelToggle,\n    splitPanelRefs,\n    headerHeight,\n    footerHeight,\n  } = useAppLayoutInternals();\n\n  const context: SplitPanelContextProps = {\n    bottomOffset: 0,\n    getMaxHeight: () => {\n      const availableHeight = document.documentElement.clientHeight - headerHeight - footerHeight;\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    getMaxWidth: () => document.documentElement.clientWidth,\n    isForcedPosition: isSplitPanelForcedPosition,\n    isMobile,\n    isOpen: isSplitPanelOpen,\n    leftOffset: 0,\n    onPreferencesChange: handleSplitPanelPreferencesChange,\n    onResize: handleSplitPanelResize,\n    onToggle: handleSplitPanelClick,\n    position: splitPanelPosition,\n    reportSize: setSplitPanelReportedSize,\n    reportHeaderHeight: setSplitPanelReportedHeaderHeight,\n    rightOffset: 0,\n    size: splitPanelSize || 0,\n    topOffset: 0,\n    setSplitPanelToggle,\n    refs: splitPanelRefs,\n  };\n\n  return <SplitPanelContextProvider value={context}>{children}</SplitPanelContextProvider>;\n}\n\n/**\n * This is the render function for the SplitPanel when it is in bottom position.\n * The Split Panel container will be another row entry in the grid definition in\n * the Layout component. The start and finish columns will be variable based\n * on the presence and state of the Navigation and Tools components.\n */\nfunction SplitPanelBottom() {\n  const {\n    disableBodyScroll,\n    hasOpenDrawer,\n    isNavigationOpen,\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelReportedSize,\n    splitPanelReportedHeaderHeight,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          className={clsx(styles['split-panel-bottom'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['disable-body-scroll']]: disableBodyScroll,\n            [styles['has-open-drawer']]: hasOpenDrawer,\n            [styles['is-navigation-open']]: isNavigationOpen,\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedHeaderHeight}px`,\n          }}\n        >\n          <SplitPanel></SplitPanel>\n          {splitPanelPosition === 'bottom' && splitPanel}\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This is the render function for the SplitPanel when it is side position.\n * The Split Panel will not be within the grid defined in the Layout component\n * but instead a direct child of the Tools component. The width constraints\n * for this position are computed in the Tools component.\n */\nfunction SplitPanelSide() {\n  const {\n    isSplitPanelOpen,\n    splitPanel,\n    splitPanelPosition,\n    splitPanelMaxWidth,\n    splitPanelMinWidth,\n    splitPanelReportedSize,\n  } = useAppLayoutInternals();\n\n  if (!splitPanel) {\n    return null;\n  }\n\n  return (\n    <Transition in={isSplitPanelOpen ?? false} exit={false}>\n      {(state, transitionEventsRef) => (\n        <section\n          aria-hidden={!isSplitPanelOpen || splitPanelPosition === 'bottom' ? true : false}\n          className={clsx(styles['split-panel-side'], styles[`position-${splitPanelPosition}`], {\n            [styles.animating]: state === 'entering',\n            [styles['is-split-panel-open']]: isSplitPanelOpen,\n          })}\n          ref={transitionEventsRef}\n          style={{\n            [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,\n            [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,\n            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,\n          }}\n        >\n          <div className={clsx(styles['animated-content'])}>{splitPanelPosition === 'side' && splitPanel}</div>\n        </section>\n      )}\n    </Transition>\n  );\n}\n\n/**\n * This logic will determine what the Split Panel position should be. It reconciles the possibility\n * of being in forced position with the current selected position in the settings.\n */\nexport function getSplitPanelPosition(\n  isSplitPanelForcedPosition: boolean,\n  splitPanelPreferences: AppLayoutProps.SplitPanelPreferences | undefined\n) {\n  let splitPanelPosition: AppLayoutProps.SplitPanelPosition = 'bottom';\n\n  if (!isSplitPanelForcedPosition && splitPanelPreferences?.position === 'side') {\n    splitPanelPosition = 'side';\n  }\n\n  return splitPanelPosition;\n}\nSplitPanel.Bottom = SplitPanelBottom;\nSplitPanel.Side = SplitPanelSide;\n\nexport default SplitPanel;\n"]}