@cloudscape-design/components-themeable 3.0.378 → 3.0.379

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

@@ -20,7 +20,7 @@ import testutilStyles from '../test-classes/styles.css.js';
 export default function Drawers() {
     const { disableBodyScroll, drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } = useAppLayoutInternals();
     const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;
-    if (!drawers) {
+    if (drawers.length === 0) {
         return null;
     }
     return (React.createElement("div", { className: clsx(styles['drawers-container'], {
@@ -41,7 +41,7 @@ export default function Drawers() {
 function ActiveDrawer() {
     var _a, _b, _c;
     const { activeDrawerId, ariaLabels, drawers, drawersRefs, handleDrawersClick, handleToolsClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen, isToolsOpen, navigationHide, tools, toolsRefs, loseDrawersFocus, resizeHandle, drawerSize, drawersMaxWidth, drawerRef, } = 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 activeDrawer = (_a = drawers.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,
@@ -76,7 +76,7 @@ function ActiveDrawer() {
  * 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 { activeDrawerId, drawers, drawersAriaLabel, drawersRefs, drawersTriggerCount, handleDrawersClick, handleSplitPanelClick, handleToolsClick, hasOpenDrawer, isMobile, isSplitPanelOpen, isToolsOpen, splitPanel, splitPanelDisplayed, splitPanelPosition, splitPanelRefs, splitPanelToggle, } = useAppLayoutInternals();
     const hasMultipleTriggers = drawersTriggerCount > 1;
     const hasSplitPanel = splitPanel && splitPanelDisplayed && splitPanelPosition === 'side' ? true : false;
     const previousActiveDrawerId = useRef(activeDrawerId);
@@ -89,16 +89,12 @@ function DesktopTriggers() {
     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,
-        }), "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel },
+        }), "aria-label": drawersAriaLabel },
         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 === null || drawers === void 0 ? void 0 :
-            drawers.items.map(item => {
+            drawers.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);
@@ -114,22 +110,19 @@ function DesktopTriggers() {
  * 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 { activeDrawerId, drawers, drawersAriaLabel, drawersRefs, handleDrawersClick, hasDrawerViewportOverlay, isMobile, } = useAppLayoutInternals();
     const previousActiveDrawerId = useRef(activeDrawerId);
     if (activeDrawerId) {
         previousActiveDrawerId.current = activeDrawerId;
     }
-    if (!isMobile || !drawers) {
+    if (!isMobile || drawers.length === 0) {
         return null;
     }
     return (React.createElement("aside", { "aria-hidden": hasDrawerViewportOverlay, className: clsx(styles['drawers-mobile-triggers-container'], testutilStyles['drawers-mobile-triggers-container'], {
             [styles.unfocusable]: hasDrawerViewportOverlay,
-        }), "aria-label": drawers.ariaLabel },
-        !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: clsx(styles['drawers-trigger'], 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, 'data-testid': `awsui-app-layout-trigger-${item.id}` } }));
-        })));
+        }), "aria-label": drawersAriaLabel }, drawers.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: clsx(styles['drawers-trigger'], 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, 'data-testid': `awsui-app-layout-trigger-${item.id}` } }));
+    })));
 }
 //# sourceMappingURL=drawers.js.map

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

@@ -1 +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 { InternalButton } from '../../button/internal';\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 sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\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 { disableBodyScroll, 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['disable-body-scroll']]: disableBodyScroll,\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    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isNavigationOpen,\n    isToolsOpen,\n    navigationHide,\n    tools,\n    toolsRefs,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\n    drawersMaxWidth,\n    drawerRef,\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  const size = Math.min(drawersMaxWidth, drawerSize);\n\n  return (\n    <aside\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\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 && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n      }}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          loseDrawersFocus();\n        }\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && resizeHandle}\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      aria-label={drawers?.ariaLabel}\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 => (\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            testId={`awsui-app-layout-trigger-${item.id}`}\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      aria-label={drawers.ariaLabel}\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 => (\n        <InternalButton\n          ariaExpanded={item.id === activeDrawerId}\n          ariaLabel={item.ariaLabels?.triggerButton}\n          className={clsx(styles['drawers-trigger'], 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, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n        />\n      ))}\n    </aside>\n  );\n}\n"]}
+{"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 { InternalButton } from '../../button/internal';\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 sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\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 { disableBodyScroll, drawers, hasDrawerViewportOverlay, hasOpenDrawer, isNavigationOpen, navigationHide } =\n    useAppLayoutInternals();\n\n  const isUnfocusable = hasDrawerViewportOverlay && isNavigationOpen && !navigationHide;\n\n  if (drawers.length === 0) {\n    return null;\n  }\n\n  return (\n    <div\n      className={clsx(styles['drawers-container'], {\n        [styles['disable-body-scroll']]: disableBodyScroll,\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    ariaLabels,\n    drawers,\n    drawersRefs,\n    handleDrawersClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isNavigationOpen,\n    isToolsOpen,\n    navigationHide,\n    tools,\n    toolsRefs,\n    loseDrawersFocus,\n    resizeHandle,\n    drawerSize,\n    drawersMaxWidth,\n    drawerRef,\n  } = useAppLayoutInternals();\n\n  const activeDrawer = drawers.find(item => 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  const size = Math.min(drawersMaxWidth, drawerSize);\n\n  return (\n    <aside\n      aria-hidden={isHidden}\n      aria-label={computedAriaLabels.content}\n      className={clsx(styles.drawer, sharedStyles['with-motion'], {\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 && drawerSize && { [customCssProps.drawerSize]: `${size}px` }),\n      }}\n      ref={drawerRef}\n      onBlur={e => {\n        if (!e.relatedTarget || !e.currentTarget.contains(e.relatedTarget)) {\n          loseDrawersFocus();\n        }\n      }}\n    >\n      {!isMobile && activeDrawer?.resizable && resizeHandle}\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    drawers,\n    drawersAriaLabel,\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  } = 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      aria-label={drawersAriaLabel}\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        {drawers.map(item => (\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            testId={`awsui-app-layout-trigger-${item.id}`}\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    drawers,\n    drawersAriaLabel,\n    drawersRefs,\n    handleDrawersClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n  } = useAppLayoutInternals();\n\n  const previousActiveDrawerId = useRef(activeDrawerId);\n\n  if (activeDrawerId) {\n    previousActiveDrawerId.current = activeDrawerId;\n  }\n\n  if (!isMobile || drawers.length === 0) {\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      aria-label={drawersAriaLabel}\n    >\n      {drawers.map(item => (\n        <InternalButton\n          ariaExpanded={item.id === activeDrawerId}\n          ariaLabel={item.ariaLabels?.triggerButton}\n          className={clsx(styles['drawers-trigger'], 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, 'data-testid': `awsui-app-layout-trigger-${item.id}` }}\n        />\n      ))}\n    </aside>\n  );\n}\n"]}

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

@@ -10,7 +10,7 @@ import testutilStyles from '../test-classes/styles.css.js';
 export default function MobileToolbar() {
     var _a, _b, _c;
     const { ariaLabels, breadcrumbs, drawers, handleNavigationClick, handleToolsClick, hasDrawerViewportOverlay, isMobile, isNavigationOpen, isToolsOpen, navigationHide, navigationRefs, toolsHide, toolsRefs, } = useAppLayoutInternals();
-    if (!isMobile || (navigationHide && !breadcrumbs && toolsHide && !drawers)) {
+    if (!isMobile || (navigationHide && !breadcrumbs && toolsHide && drawers.length === 0)) {
         return null;
     }
     return (React.createElement("section", { className: clsx(styles['mobile-toolbar'], {
@@ -21,7 +21,7 @@ export default function MobileToolbar() {
         !navigationHide && (React.createElement("nav", { "aria-hidden": isNavigationOpen, className: clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen }) },
             React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isNavigationOpen ? undefined : false, iconName: "menu", formAction: "none", onClick: () => handleNavigationClick(true), variant: "icon", className: testutilStyles['navigation-toggle'], ref: navigationRefs.toggle, disabled: hasDrawerViewportOverlay, __nativeAttributes: { 'aria-haspopup': isNavigationOpen ? undefined : true } }))),
         breadcrumbs && (React.createElement("div", { className: clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs) }, breadcrumbs)),
-        isMobile && !toolsHide && !drawers && (React.createElement("aside", { "aria-hidden": isToolsOpen, "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _b !== void 0 ? _b : undefined, className: clsx(styles['mobile-toolbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen }) },
+        isMobile && !toolsHide && drawers.length === 0 && (React.createElement("aside", { "aria-hidden": isToolsOpen, "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _b !== void 0 ? _b : undefined, className: clsx(styles['mobile-toolbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen }) },
             React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: hasDrawerViewportOverlay, ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _c !== void 0 ? _c : undefined, iconName: "status-info", formAction: "none", onClick: () => handleToolsClick(true), variant: "icon", ref: toolsRefs.toggle, __nativeAttributes: { 'aria-haspopup': true } }))),
         React.createElement(DrawersMobileTriggers, null)));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"mobile-toolbar.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/mobile-toolbar.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 { InternalButton } from '../../button/internal';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function MobileToolbar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    drawers,\n    handleNavigationClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isNavigationOpen,\n    isToolsOpen,\n    navigationHide,\n    navigationRefs,\n    toolsHide,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  if (!isMobile || (navigationHide && !breadcrumbs && toolsHide && !drawers)) {\n    return null;\n  }\n\n  return (\n    <section\n      className={clsx(\n        styles['mobile-toolbar'],\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        testutilStyles['mobile-bar'],\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && (\n        <nav\n          aria-hidden={isNavigationOpen}\n          className={clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen ? undefined : false}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={navigationRefs.toggle}\n            disabled={hasDrawerViewportOverlay}\n            __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div className={clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>{breadcrumbs}</div>\n      )}\n\n      {isMobile && !toolsHide && !drawers && (\n        <aside\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n          className={clsx(styles['mobile-toolbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={hasDrawerViewportOverlay}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={toolsRefs.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n\n      <DrawersMobileTriggers />\n    </section>\n  );\n}\n"]}
+{"version":3,"file":"mobile-toolbar.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/mobile-toolbar.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 { InternalButton } from '../../button/internal';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nexport default function MobileToolbar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    drawers,\n    handleNavigationClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    isMobile,\n    isNavigationOpen,\n    isToolsOpen,\n    navigationHide,\n    navigationRefs,\n    toolsHide,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  if (!isMobile || (navigationHide && !breadcrumbs && toolsHide && drawers.length === 0)) {\n    return null;\n  }\n\n  return (\n    <section\n      className={clsx(\n        styles['mobile-toolbar'],\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        testutilStyles['mobile-bar'],\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && (\n        <nav\n          aria-hidden={isNavigationOpen}\n          className={clsx(styles['mobile-toolbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen ? undefined : false}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={navigationRefs.toggle}\n            disabled={hasDrawerViewportOverlay}\n            __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div className={clsx(styles['mobile-toolbar-breadcrumbs'], testutilStyles.breadcrumbs)}>{breadcrumbs}</div>\n      )}\n\n      {isMobile && !toolsHide && drawers.length === 0 && (\n        <aside\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n          className={clsx(styles['mobile-toolbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={hasDrawerViewportOverlay}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={toolsRefs.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n\n      <DrawersMobileTriggers />\n    </section>\n  );\n}\n"]}

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

@@ -80,7 +80,7 @@ function SplitPanelSide() {
         }), ref: transitionEventsRef, style: {
             [customCssProps.splitPanelMaxWidth]: `${splitPanelMaxWidth}px`,
             [customCssProps.splitPanelMinWidth]: `${splitPanelMinWidth}px`,
-            [customCssProps.splitPanelReportedHeaderSize]: `${splitPanelReportedSize}px`,
+            [customCssProps.splitPanelReportedSize]: `${splitPanelReportedSize}px`,
         } },
         React.createElement("div", { className: clsx(styles['animated-content']) }, splitPanelPosition === 'side' && splitPanel)))));
 }

package/lib/internal/template/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    footerHeight,\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    headerHeight,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    setSplitPanelReportedHeaderHeight,\n    setSplitPanelToggle,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelSize,\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"]}
+{"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    footerHeight,\n    handleSplitPanelClick,\n    handleSplitPanelPreferencesChange,\n    handleSplitPanelResize,\n    headerHeight,\n    isMobile,\n    isSplitPanelForcedPosition,\n    isSplitPanelOpen,\n    setSplitPanelReportedSize,\n    setSplitPanelReportedHeaderHeight,\n    setSplitPanelToggle,\n    splitPanelPosition,\n    splitPanelRefs,\n    splitPanelSize,\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.splitPanelReportedSize]: `${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"]}

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

@@ -1,74 +1,74 @@
 
     import './styles.scoped.css';
     export default {
-  "background": "awsui_background_hyvsj_1kssu_93",
-  "scrolling-background": "awsui_scrolling-background_hyvsj_1kssu_96",
-  "sticky-background": "awsui_sticky-background_hyvsj_1kssu_102",
-  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1kssu_110",
-  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1kssu_123",
-  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1kssu_133",
-  "drawers-container": "awsui_drawers-container_hyvsj_1kssu_145",
-  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1kssu_157",
-  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1kssu_191",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1kssu_196",
-  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1kssu_215",
-  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1kssu_247",
-  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1kssu_247",
-  "drawer": "awsui_drawer_hyvsj_1kssu_145",
-  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1kssu_297",
-  "drawer-content": "awsui_drawer-content_hyvsj_1kssu_302",
-  "drawer-slider": "awsui_drawer-slider_hyvsj_1kssu_307",
-  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1kssu_314",
-  "content": "awsui_content_hyvsj_1kssu_339",
-  "layout": "awsui_layout_hyvsj_1kssu_360",
-  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1kssu_443",
-  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1kssu_458",
-  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1kssu_475",
-  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1kssu_507",
-  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1kssu_510",
-  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1kssu_520",
-  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1kssu_523",
-  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1kssu_526",
-  "has-header": "awsui_has-header_hyvsj_1kssu_526",
-  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1kssu_547",
-  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1kssu_547",
-  "has-split-panel": "awsui_has-split-panel_hyvsj_1kssu_590",
-  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1kssu_590",
-  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1kssu_606",
-  "unfocusable": "awsui_unfocusable_hyvsj_1kssu_611",
-  "container": "awsui_container_hyvsj_1kssu_621",
-  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1kssu_646",
-  "is-tools-open": "awsui_is-tools-open_hyvsj_1kssu_649",
-  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1kssu_649",
-  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1kssu_649",
-  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1kssu_658",
-  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1kssu_674",
-  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1kssu_678",
-  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1kssu_682",
-  "navigation-container": "awsui_navigation-container_hyvsj_1kssu_691",
-  "show-navigation": "awsui_show-navigation_hyvsj_1kssu_735",
-  "animating": "awsui_animating_hyvsj_1kssu_757",
-  "showButtons": "awsui_showButtons_hyvsj_1kssu_1",
-  "navigation": "awsui_navigation_hyvsj_1kssu_691",
-  "openNavigation": "awsui_openNavigation_hyvsj_1kssu_1",
-  "animated-content": "awsui_animated-content_hyvsj_1kssu_819",
-  "hide-navigation": "awsui_hide-navigation_hyvsj_1kssu_828",
-  "notifications": "awsui_notifications_hyvsj_1kssu_838",
-  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1kssu_844",
-  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1kssu_861",
-  "position-bottom": "awsui_position-bottom_hyvsj_1kssu_907",
-  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1kssu_1",
-  "split-panel-side": "awsui_split-panel-side_hyvsj_1kssu_936",
-  "position-side": "awsui_position-side_hyvsj_1kssu_964",
-  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_1kssu_1",
-  "tools-container": "awsui_tools-container_hyvsj_1kssu_1001",
-  "tools": "awsui_tools_hyvsj_1kssu_1001",
-  "openTools": "awsui_openTools_hyvsj_1kssu_1",
-  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1kssu_1096",
-  "hide-tools": "awsui_hide-tools_hyvsj_1kssu_1106",
-  "show-tools": "awsui_show-tools_hyvsj_1kssu_1118",
-  "has-tools-form": "awsui_has-tools-form_hyvsj_1kssu_1096",
-  "trigger": "awsui_trigger_hyvsj_1kssu_1185",
-  "selected": "awsui_selected_hyvsj_1kssu_1224"
+  "background": "awsui_background_hyvsj_1i1v5_93",
+  "scrolling-background": "awsui_scrolling-background_hyvsj_1i1v5_96",
+  "sticky-background": "awsui_sticky-background_hyvsj_1i1v5_102",
+  "has-sticky-notifications": "awsui_has-sticky-notifications_hyvsj_1i1v5_110",
+  "breadcrumbs": "awsui_breadcrumbs_hyvsj_1i1v5_123",
+  "has-sticky-background": "awsui_has-sticky-background_hyvsj_1i1v5_133",
+  "drawers-container": "awsui_drawers-container_hyvsj_1i1v5_145",
+  "has-open-drawer": "awsui_has-open-drawer_hyvsj_1i1v5_157",
+  "disable-body-scroll": "awsui_disable-body-scroll_hyvsj_1i1v5_191",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_hyvsj_1i1v5_196",
+  "has-multiple-triggers": "awsui_has-multiple-triggers_hyvsj_1i1v5_215",
+  "drawers-trigger-content": "awsui_drawers-trigger-content_hyvsj_1i1v5_247",
+  "drawers-trigger": "awsui_drawers-trigger_hyvsj_1i1v5_247",
+  "drawer": "awsui_drawer_hyvsj_1i1v5_145",
+  "drawer-close-button": "awsui_drawer-close-button_hyvsj_1i1v5_297",
+  "drawer-content": "awsui_drawer-content_hyvsj_1i1v5_302",
+  "drawer-slider": "awsui_drawer-slider_hyvsj_1i1v5_307",
+  "is-drawer-open": "awsui_is-drawer-open_hyvsj_1i1v5_314",
+  "content": "awsui_content_hyvsj_1i1v5_339",
+  "layout": "awsui_layout_hyvsj_1i1v5_360",
+  "has-max-content-width": "awsui_has-max-content-width_hyvsj_1i1v5_443",
+  "content-type-dashboard": "awsui_content-type-dashboard_hyvsj_1i1v5_458",
+  "is-overlap-disabled": "awsui_is-overlap-disabled_hyvsj_1i1v5_475",
+  "has-content-gap-left": "awsui_has-content-gap-left_hyvsj_1i1v5_507",
+  "has-content-gap-right": "awsui_has-content-gap-right_hyvsj_1i1v5_510",
+  "content-first-child-notifications": "awsui_content-first-child-notifications_hyvsj_1i1v5_520",
+  "has-breadcrumbs": "awsui_has-breadcrumbs_hyvsj_1i1v5_523",
+  "content-first-child-header": "awsui_content-first-child-header_hyvsj_1i1v5_526",
+  "has-header": "awsui_has-header_hyvsj_1i1v5_526",
+  "content-first-child-main": "awsui_content-first-child-main_hyvsj_1i1v5_547",
+  "disable-content-paddings": "awsui_disable-content-paddings_hyvsj_1i1v5_547",
+  "has-split-panel": "awsui_has-split-panel_hyvsj_1i1v5_590",
+  "split-panel-position-bottom": "awsui_split-panel-position-bottom_hyvsj_1i1v5_590",
+  "block-body-scroll": "awsui_block-body-scroll_hyvsj_1i1v5_606",
+  "unfocusable": "awsui_unfocusable_hyvsj_1i1v5_611",
+  "container": "awsui_container_hyvsj_1i1v5_621",
+  "is-navigation-open": "awsui_is-navigation-open_hyvsj_1i1v5_646",
+  "is-tools-open": "awsui_is-tools-open_hyvsj_1i1v5_649",
+  "is-split-panel-open": "awsui_is-split-panel-open_hyvsj_1i1v5_649",
+  "split-panel-position-side": "awsui_split-panel-position-side_hyvsj_1i1v5_649",
+  "mobile-toolbar": "awsui_mobile-toolbar_hyvsj_1i1v5_658",
+  "mobile-toolbar-nav": "awsui_mobile-toolbar-nav_hyvsj_1i1v5_674",
+  "mobile-toolbar-breadcrumbs": "awsui_mobile-toolbar-breadcrumbs_hyvsj_1i1v5_678",
+  "mobile-toolbar-tools": "awsui_mobile-toolbar-tools_hyvsj_1i1v5_682",
+  "navigation-container": "awsui_navigation-container_hyvsj_1i1v5_691",
+  "show-navigation": "awsui_show-navigation_hyvsj_1i1v5_735",
+  "animating": "awsui_animating_hyvsj_1i1v5_757",
+  "showButtons": "awsui_showButtons_hyvsj_1i1v5_1",
+  "navigation": "awsui_navigation_hyvsj_1i1v5_691",
+  "openNavigation": "awsui_openNavigation_hyvsj_1i1v5_1",
+  "animated-content": "awsui_animated-content_hyvsj_1i1v5_819",
+  "hide-navigation": "awsui_hide-navigation_hyvsj_1i1v5_828",
+  "notifications": "awsui_notifications_hyvsj_1i1v5_838",
+  "sticky-notifications": "awsui_sticky-notifications_hyvsj_1i1v5_844",
+  "split-panel-bottom": "awsui_split-panel-bottom_hyvsj_1i1v5_861",
+  "position-bottom": "awsui_position-bottom_hyvsj_1i1v5_908",
+  "openSplitPanelBottom": "awsui_openSplitPanelBottom_hyvsj_1i1v5_1",
+  "split-panel-side": "awsui_split-panel-side_hyvsj_1i1v5_937",
+  "position-side": "awsui_position-side_hyvsj_1i1v5_965",
+  "openSplitPanelSide": "awsui_openSplitPanelSide_hyvsj_1i1v5_1",
+  "tools-container": "awsui_tools-container_hyvsj_1i1v5_1002",
+  "tools": "awsui_tools_hyvsj_1i1v5_1002",
+  "openTools": "awsui_openTools_hyvsj_1i1v5_1",
+  "has-tools-form-persistence": "awsui_has-tools-form-persistence_hyvsj_1i1v5_1097",
+  "hide-tools": "awsui_hide-tools_hyvsj_1i1v5_1107",
+  "show-tools": "awsui_show-tools_hyvsj_1i1v5_1119",
+  "has-tools-form": "awsui_has-tools-form_hyvsj_1i1v5_1097",
+  "trigger": "awsui_trigger_hyvsj_1i1v5_1186",
+  "selected": "awsui_selected_hyvsj_1i1v5_1225"
 };