npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.407 → 3.0.409 - Mend

@cloudscape-design/components-themeable 3.0.407 → 3.0.409

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (101) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "b7d291ca63c11e79a86ca47870cb53d2e90a1ee4"
+  "commit": "1db9c2550a0abe629aa02dcee2a1270041b39de8"
 }

package/lib/internal/scss/app-layout/test-classes/styles.scss CHANGED Viewed

@@ -42,12 +42,6 @@
 .disable-body-scroll-root {
   /* used in tests */
 }
-.drawers-desktop-triggers-container {
-  /* used in tests */
-}
-.drawers-mobile-triggers-container {
-  /* used in tests */
-}
 .drawers-trigger {
   /* used in tests */
 }

package/lib/internal/scss/app-layout/visual-refresh/split-panel.scss CHANGED Viewed

@@ -97,19 +97,6 @@ section.split-panel-side {
   overflow-x: hidden;
   pointer-events: auto;
-  // Animation for opacity and width when pening the Split Panel
-  @keyframes openSplitPanelSide {
-    from {
-      opacity: 0;
-      width: var(#{custom-props.$splitPanelMinWidth}, 280px);
-    }
-    to {
-      opacity: 1;
-      width: var(#{custom-props.$splitPanelReportedSize});
-    }
-  }
   &:not(.is-split-panel-open),
   &.position-bottom {
     width: 0;
@@ -124,21 +111,5 @@ section.split-panel-side {
     box-shadow: awsui.$shadow-panel;
     max-width: var(#{custom-props.$splitPanelMaxWidth}, 280px);
     min-width: var(#{custom-props.$splitPanelMinWidth}, 280px);
-    &.animating {
-      @include styles.with-motion {
-        animation: openSplitPanelSide awsui.$motion-duration-refresh-only-fast;
-      }
-    }
-  }
-  /*
-  A non-semantic node is added with a fixed width equal to the final Split Panel
-  width. This will create the visual appearance of horizontal movement and
-  prevent unwanted text wrapping.
-  */
-  > .animated-content {
-    height: 100%;
-    max-width: inherit;
-    width: var(#{custom-props.$splitPanelReportedSize});
   }
 }

package/lib/internal/scss/header/styles.scss CHANGED Viewed

@@ -166,6 +166,10 @@
   padding-bottom: awsui.$space-scaled-2x-xxs;
 }
+.virtual-space {
+  @include styles.awsui-util-hide;
+}
 .info {
   // Space 's' used as it's the smallest value that works in all browsers
   padding-right: awsui.$space-s;

package/lib/internal/scss/internal/components/button-trigger/styles.scss CHANGED Viewed

@@ -98,4 +98,10 @@
       @include styles.focus-highlight(awsui.$space-filtering-token-operation-select-focus-outline-gutter);
     }
   }
+  &.inline-tokens {
+    // Remove default paddings and just rely on center alignment of the content
+    padding-top: 0;
+    padding-bottom: 0;
+  }
 }

package/lib/internal/scss/select/parts/styles.scss CHANGED Viewed

@@ -58,3 +58,54 @@ $checkbox-size: awsui.$size-control;
 .show-label-tag > .selected-icon {
   padding-left: awsui.$space-scaled-s;
 }
+.inline-token-trigger {
+  display: flex;
+  flex-wrap: nowrap;
+  column-gap: awsui.$space-xxs;
+  width: 100%;
+}
+.inline-token-list {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: awsui.$space-xxs;
+  width: 100%;
+  overflow-x: hidden;
+  // Fade out any overflow tokens
+  mask-image: linear-gradient(270deg, transparent, white 20px, white);
+  > .inline-token {
+    display: flex;
+    align-items: center;
+    min-width: max-content;
+    height: 18px;
+    border: awsui.$border-field-width solid awsui.$color-border-item-selected;
+    padding: 0 awsui.$space-xxs;
+    background: awsui.$color-background-item-selected;
+    border-radius: awsui.$border-radius-token;
+    color: awsui.$color-text-body-default;
+  }
+}
+.visual-refresh > .inline-token-list > .inline-token {
+  border-radius: awsui.$border-radius-badge;
+}
+.inline-token-hidden-placeholder {
+  @include styles.awsui-util-hide;
+}
+.inline-token-counter {
+  white-space: nowrap;
+}
+.inline-token-trigger--disabled {
+  > .inline-token-list > .inline-token {
+    border-color: awsui.$color-border-control-disabled;
+    background-color: awsui.$color-background-container-content;
+    color: awsui.$color-text-disabled;
+  }
+}

package/lib/internal/template/app-layout/drawer/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAc,MAAM,cAAc,CAAC;AAuBtF,eAAO,MAAM,MAAM,2FAmGlB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,mDAAoD,sBAAsB,~~gBA4FvG~~,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAiB,MAAM,OAAO,CAAC;AAKtC,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAc,MAAM,cAAc,CAAC;AAuBtF,eAAO,MAAM,MAAM,2FAmGlB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,mDAAoD,sBAAsB,gBAyFvG,CAAC"}

package/lib/internal/template/app-layout/drawer/index.js CHANGED Viewed

@@ -58,7 +58,7 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
             }
         } },
         React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName) },
-            !isMobile && regularOpenButton,
+            !isMobile && !drawers && regularOpenButton,
             resizeHandle,
             React.createElement(TagName, { "aria-label": mainLabel, "aria-hidden": !isOpen },
                 React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: () => {
@@ -83,6 +83,7 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }
         return 0;
     };
     const { visibleItems, overflowItems } = splitItems(drawers === null || drawers === void 0 ? void 0 : drawers.items, getIndexOfOverflowItem(), drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId);
+    const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);
     return (React.createElement("div", { className: clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
             [styles['drawer-mobile']]: isMobile,
             [styles.hide]: (drawers === null || drawers === void 0 ? void 0 : drawers.items.length) === 1 && drawers.activeDrawerId !== undefined,
@@ -94,13 +95,11 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }
                     (drawers === null || drawers === void 0 ? void 0 : drawers.onChange({
                         activeDrawerId: drawers.items[0].id !== drawers.activeDrawerId ? drawers.items[0].id : undefined,
                     }));
-            } }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers-wrapper'], testutilStyles['drawers-desktop-triggers-container']) },
+            } }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers-wrapper']) },
             React.createElement(React.Fragment, null,
                 visibleItems.map((item, index) => {
                     var _a;
-                    return (React.createElement(DrawerTrigger, { key: index, testUtilsClassName: item.id === TOOLS_DRAWER_ID
-                            ? clsx(testutilStyles['drawers-trigger'], testutilStyles['tools-toggle'])
-                            : testutilStyles['drawers-trigger'], ariaExpanded: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaControls: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id ? item.id : undefined, trigger: item.trigger, badge: item.badge, itemId: item.id, isActive: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, onClick: () => {
+                    return (React.createElement(DrawerTrigger, { key: index, testUtilsClassName: clsx(testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), ariaExpanded: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaControls: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id ? item.id : undefined, trigger: item.trigger, badge: item.badge, itemId: item.id, isActive: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, onClick: () => {
                             (drawers === null || drawers === void 0 ? void 0 : drawers.items.length) !== 1 &&
                                 (drawers === null || drawers === void 0 ? void 0 : drawers.onChange({
                                     activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,
@@ -108,7 +107,7 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }
                         } }));
                 }),
                 overflowItems.length > 0 && (React.createElement("div", { className: clsx(styles['drawer-trigger']) },
-                    React.createElement(OverflowMenu, { ariaLabel: drawers === null || drawers === void 0 ? void 0 : drawers.overflowAriaLabel, items: overflowItems, onItemClick: ({ detail }) => {
+                    React.createElement(OverflowMenu, { ariaLabel: overflowMenuHasBadge ? drawers === null || drawers === void 0 ? void 0 : drawers.overflowWithBadgeAriaLabel : drawers === null || drawers === void 0 ? void 0 : drawers.overflowAriaLabel, items: overflowItems, onItemClick: ({ detail }) => {
                             drawers === null || drawers === void 0 ? void 0 : drawers.onChange({
                                 activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,
                             });

package/lib/internal/template/app-layout/drawer/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ToggleButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem } from './interfaces';\nimport OverflowMenu from './overflow-menu';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\nimport { splitItems } from './drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n drawers,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = drawersAriaLabels ?? getLabels(ariaLabels);\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={isOpen ? undefined : false}\n />\n </TagName>\n );\n\n return (\n <div\n id={drawers?.activeDrawerId}\n ref={ref}\n className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [testutilStyles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName)}\n >\n {!isMobile && regularOpenButton}\n {resizeHandle}\n <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={closeLabel}\n onClick={() => {\n onToggle(false);\n drawers?.onChange({ activeDrawerId: undefined });\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\ninterface DrawerTriggerProps {\n testUtilsClassName?: string;\n ariaLabel: string \| undefined;\n ariaExpanded: boolean;\n ariaControls?: string;\n badge: boolean \| undefined;\n itemId?: string;\n isActive: boolean;\n trigger: DrawerItem['trigger'];\n onClick: () => void;\n}\n\nconst DrawerTrigger = React.forwardRef(\n (\n {\n testUtilsClassName,\n ariaLabel,\n ariaExpanded,\n ariaControls,\n badge,\n itemId,\n isActive,\n trigger,\n onClick,\n }: DrawerTriggerProps,\n ref: React.Ref<{ focus: () => void }>\n ) => (\n <div className={clsx(styles['drawer-trigger'], isActive && styles['drawer-trigger-active'])} onClick={onClick}>\n <ToggleButton\n ref={ref}\n className={testUtilsClassName}\n iconName={trigger.iconName}\n iconSvg={trigger.iconSvg}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n ariaControls={ariaControls}\n badge={badge}\n testId={itemId && `awsui-app-layout-trigger-${itemId}`}\n />\n </div>\n )\n);\n\nexport const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }: DrawerTriggersBarProps) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const isCompactMode = useDensityMode(containerRef) === 'compact';\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = isCompactMode ? 34 : 38;\n const overflowSpot = containerHeight / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n return index;\n }\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers?.items, getIndexOfOverflowItem(), drawers?.activeDrawerId);\n\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n [styles.hide]: drawers?.items.length === 1 && drawers.activeDrawerId !== undefined,\n })}\n ref={containerRef}\n >\n <div\n ref={triggersContainerRef}\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], {\n [styles['drawer-content-clickable']]: drawers?.items.length === 1,\n })}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n onClick={() => {\n drawers?.items.length === 1 &&\n drawers?.onChange({\n activeDrawerId: drawers.items[0].id !== drawers.activeDrawerId ? drawers.items[0].id : undefined,\n });\n }}\n >\n {!isMobile && (\n <aside\n aria-label={drawers?.ariaLabel}\n className={clsx(styles['drawer-triggers-wrapper'], testutilStyles['drawers-desktop-triggers-container'])}\n >\n <>\n {visibleItems.map((item, index) => {\n return (\n <DrawerTrigger\n key={index}\n testUtilsClassName={\n item.id === TOOLS_DRAWER_ID\n ? clsx(testutilStyles['drawers-trigger'], testutilStyles['tools-toggle'])\n : testutilStyles['drawers-trigger']\n }\n ariaExpanded={drawers?.activeDrawerId === item.id}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaControls={drawers?.activeDrawerId === item.id ? item.id : undefined}\n trigger={item.trigger}\n badge={item.badge}\n itemId={item.id}\n isActive={drawers?.activeDrawerId === item.id}\n onClick={() => {\n drawers?.items.length !== 1 &&\n drawers?.onChange({\n activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,\n });\n }}\n />\n );\n })}\n {overflowItems.length > 0 && (\n <div className={clsx(styles['drawer-trigger'])}>\n <OverflowMenu\n ariaLabel={drawers?.overflowAriaLabel}\n items={overflowItems}\n onItemClick={({ detail }) => {\n drawers?.onChange({\n activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,\n });\n }}\n />\n </div>\n )}\n </>\n </aside>\n )}\n </div>\n </div>\n );\n};\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useRef } from 'react';\nimport { ToggleButton, CloseButton, togglesConfig } from '../toggles';\n\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from './styles.css.js';\nimport { DesktopDrawerProps, DrawerTriggersBarProps, DrawerItem } from './interfaces';\nimport OverflowMenu from './overflow-menu';\nimport { useContainerQuery } from '@cloudscape-design/component-toolkit';\nimport { useDensityMode } from '@cloudscape-design/component-toolkit/internal';\nimport { splitItems } from './drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\n// We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several\n// known bugs in NVDA that cause focus changes within a container to sometimes not be\n// announced. As a result, we use one region for the open button and one region for the\n// actual drawer content, always hiding the other one when it's not visible.\n// An alternative solution to follow a more classic implementation here to only have one\n// button that triggers the opening/closing of the drawer also did not work due to another\n// series of bugs in NVDA (together with Firefox) which prevent the changed expanded state\n// from being announced.\n// Even with this workaround in place, the announcement of the close button when opening a\n// panel in NVDA is not working correctly. The suspected root cause is one of the bugs below\n// as well.\n// Relevant tickets:\n// * https://github.com/nvaccess/nvda/issues/6606\n// * https://github.com/nvaccess/nvda/issues/5825\n// * https://github.com/nvaccess/nvda/issues/5247\n// * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)\nexport const Drawer = React.forwardRef(\n (\n {\n contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\n isMobile,\n onToggle,\n onClick,\n onLoseFocus,\n drawers,\n resizeHandle,\n }: DesktopDrawerProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const openButtonWrapperRef = useRef<HTMLElement \| null>(null);\n const { TagName, iconName, getLabels } = togglesConfig[type];\n const { mainLabel, closeLabel, openLabel } = drawersAriaLabels ?? getLabels(ariaLabels);\n const drawerContentWidthOpen = isMobile ? undefined : width;\n const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;\n\n const regularOpenButton = (\n <TagName ref={openButtonWrapperRef} aria-label={mainLabel} className={styles.toggle} aria-hidden={isOpen}>\n <ToggleButton\n ref={toggleRefs.toggle}\n className={toggleClassName}\n iconName={iconName}\n ariaLabel={openLabel}\n onClick={() => onToggle(true)}\n ariaExpanded={isOpen ? undefined : false}\n />\n </TagName>\n );\n\n return (\n <div\n id={drawers?.activeDrawerId}\n ref={ref}\n className={clsx(styles.drawer, {\n [styles['drawer-closed']]: !isOpen,\n [testutilStyles['drawer-closed']]: !isOpen,\n [styles['drawer-mobile']]: isMobile,\n })}\n style={{ width: drawerContentWidth }}\n onBlur={\n onLoseFocus\n ? e => {\n if (!e.relatedTarget \|\| !e.currentTarget.contains(e.relatedTarget)) {\n onLoseFocus(e);\n }\n }\n : undefined\n }\n onClick={event => {\n if (onClick) {\n onClick(event);\n }\n if (!isOpen) {\n // to prevent calling onToggle from the drawer when it's called from the toggle button\n if (\n openButtonWrapperRef.current === event.target \|\|\n !openButtonWrapperRef.current?.contains(event.target as Node)\n ) {\n onToggle(true);\n }\n }\n }}\n >\n <div\n style={{ width: drawerContentWidth, top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName)}\n >\n {!isMobile && !drawers && regularOpenButton}\n {resizeHandle}\n <TagName aria-label={mainLabel} aria-hidden={!isOpen}>\n <CloseButton\n ref={toggleRefs.close}\n className={closeClassName}\n ariaLabel={closeLabel}\n onClick={() => {\n onToggle(false);\n drawers?.onChange({ activeDrawerId: undefined });\n }}\n />\n {children}\n </TagName>\n </div>\n </div>\n );\n }\n);\n\ninterface DrawerTriggerProps {\n testUtilsClassName?: string;\n ariaLabel: string \| undefined;\n ariaExpanded: boolean;\n ariaControls?: string;\n badge: boolean \| undefined;\n itemId?: string;\n isActive: boolean;\n trigger: DrawerItem['trigger'];\n onClick: () => void;\n}\n\nconst DrawerTrigger = React.forwardRef(\n (\n {\n testUtilsClassName,\n ariaLabel,\n ariaExpanded,\n ariaControls,\n badge,\n itemId,\n isActive,\n trigger,\n onClick,\n }: DrawerTriggerProps,\n ref: React.Ref<{ focus: () => void }>\n ) => (\n <div className={clsx(styles['drawer-trigger'], isActive && styles['drawer-trigger-active'])} onClick={onClick}>\n <ToggleButton\n ref={ref}\n className={testUtilsClassName}\n iconName={trigger.iconName}\n iconSvg={trigger.iconSvg}\n ariaLabel={ariaLabel}\n ariaExpanded={ariaExpanded}\n ariaControls={ariaControls}\n badge={badge}\n testId={itemId && `awsui-app-layout-trigger-${itemId}`}\n />\n </div>\n )\n);\n\nexport const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }: DrawerTriggersBarProps) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const isCompactMode = useDensityMode(containerRef) === 'compact';\n\n const getIndexOfOverflowItem = () => {\n if (containerHeight) {\n const ITEM_HEIGHT = isCompactMode ? 34 : 38;\n const overflowSpot = containerHeight / 1.5;\n\n const index = Math.floor(overflowSpot / ITEM_HEIGHT);\n\n return index;\n }\n return 0;\n };\n\n const { visibleItems, overflowItems } = splitItems(drawers?.items, getIndexOfOverflowItem(), drawers?.activeDrawerId);\n const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n [styles.hide]: drawers?.items.length === 1 && drawers.activeDrawerId !== undefined,\n })}\n ref={containerRef}\n >\n <div\n ref={triggersContainerRef}\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'], {\n [styles['drawer-content-clickable']]: drawers?.items.length === 1,\n })}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n onClick={() => {\n drawers?.items.length === 1 &&\n drawers?.onChange({\n activeDrawerId: drawers.items[0].id !== drawers.activeDrawerId ? drawers.items[0].id : undefined,\n });\n }}\n >\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'])}>\n <>\n {visibleItems.map((item, index) => {\n return (\n <DrawerTrigger\n key={index}\n testUtilsClassName={clsx(\n testutilStyles['drawers-trigger'],\n item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n )}\n ariaExpanded={drawers?.activeDrawerId === item.id}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaControls={drawers?.activeDrawerId === item.id ? item.id : undefined}\n trigger={item.trigger}\n badge={item.badge}\n itemId={item.id}\n isActive={drawers?.activeDrawerId === item.id}\n onClick={() => {\n drawers?.items.length !== 1 &&\n drawers?.onChange({\n activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,\n });\n }}\n />\n );\n })}\n {overflowItems.length > 0 && (\n <div className={clsx(styles['drawer-trigger'])}>\n <OverflowMenu\n ariaLabel={overflowMenuHasBadge ? drawers?.overflowWithBadgeAriaLabel : drawers?.overflowAriaLabel}\n items={overflowItems}\n onItemClick={({ detail }) => {\n drawers?.onChange({\n activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,\n });\n }}\n />\n </div>\n )}\n </>\n </aside>\n )}\n </div>\n </div>\n );\n};\n"]}

package/lib/internal/template/app-layout/drawer/interfaces.d.ts CHANGED Viewed

@@ -63,6 +63,7 @@ export interface DrawerTriggersBarProps {
         }) => void;
         ariaLabel?: string;
         overflowAriaLabel?: string;
+        overflowWithBadgeAriaLabel?: string;
     };
 }
 export interface DrawerItemAriaLabels {
@@ -98,6 +99,7 @@ export interface InternalDrawerProps {
         }>;
         ariaLabel?: string;
         overflowAriaLabel?: string;
+        overflowWithBadgeAriaLabel?: string;
     };
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/app-layout/drawer/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,sBAAsB,EAAE,MAAM,mCAAmC,CAAC;AAE3E,MAAM,WAAW,kBAAkB;IACjC,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;QACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;KACrC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,iBAAiB,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IACrH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,QAAQ,EAAE,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,IAAI,EAAE,sBAAsB,CAAC;CAC9B;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;~~KAC5B~~,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE,oBAAoB,CAAC;IACjC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,yBAAyB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAC7C,QAAQ,CAAC,EAAE,yBAAyB,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnE,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;~~KAC5B~~,CAAC;CACH"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/app-layout/drawer/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<{ focus(): void }>;\n close: React.Ref<{ focus(): void }>;\n };\n width: number;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n ariaLabels: AppLayoutProps.Labels \| undefined;\n drawersAriaLabels?: { mainLabel: string \| undefined; closeLabel: string \| undefined; openLabel: string \| undefined };\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string \| undefined;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n ariaLabel?: string;\n overflowAriaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n badge?: boolean;\n}\n\nexport interface InternalDrawerProps {\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange?: NonCancelableEventHandler<string>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n overflowAriaLabel?: string;\n };\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { togglesConfig } from '../toggles';\nimport { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';\n\nexport interface DesktopDrawerProps {\n contentClassName: string;\n toggleClassName: string;\n closeClassName: string;\n toggleRefs: {\n toggle: React.Ref<{ focus(): void }>;\n close: React.Ref<{ focus(): void }>;\n };\n width: number;\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n ariaLabels: AppLayoutProps.Labels \| undefined;\n drawersAriaLabels?: { mainLabel: string \| undefined; closeLabel: string \| undefined; openLabel: string \| undefined };\n children: React.ReactNode;\n type: keyof typeof togglesConfig;\n isMobile: boolean;\n isOpen: boolean;\n onToggle: (isOpen: boolean) => void;\n onClick?: (event: React.MouseEvent) => void;\n onLoseFocus?: (event: React.FocusEvent) => void;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId: string \| undefined;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n };\n resizeHandle?: React.ReactNode;\n}\n\nexport interface ResizableDrawerProps extends DesktopDrawerProps {\n activeDrawer?: DrawerItem;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: DrawerFocusControlRefs;\n}\n\nexport interface DrawerTriggersBarProps {\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n isMobile: boolean;\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange: (changeDetail: { activeDrawerId: string \| undefined }) => void;\n ariaLabel?: string;\n overflowAriaLabel?: string;\n overflowWithBadgeAriaLabel?: string;\n };\n}\n\nexport interface DrawerItemAriaLabels {\n content?: string;\n closeButton?: string;\n triggerButton?: string;\n resizeHandle?: string;\n}\n\nexport interface DrawerItem {\n id: string;\n content: React.ReactNode;\n trigger: {\n iconName?: IconProps.Name;\n iconSvg?: React.ReactNode;\n };\n ariaLabels: DrawerItemAriaLabels;\n resizable?: boolean;\n defaultSize?: number;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n badge?: boolean;\n}\n\nexport interface InternalDrawerProps {\n drawers?: {\n items: Array<DrawerItem>;\n activeDrawerId?: string;\n onChange?: NonCancelableEventHandler<string>;\n onResize?: NonCancelableEventHandler<{ size: number; id: string }>;\n ariaLabel?: string;\n overflowAriaLabel?: string;\n overflowWithBadgeAriaLabel?: string;\n };\n}\n"]}

package/lib/internal/template/app-layout/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAwC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;~~AAwoBF~~,eAAe,SAAS,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAwE,MAAM,OAAO,CAAC;AAM7F,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAwC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FA8Bd,CAAC;AAspBF,eAAe,SAAS,CAAC"}

package/lib/internal/template/app-layout/index.js CHANGED Viewed

@@ -68,8 +68,15 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
     const defaults = applyDefaults(contentType, { maxContentWidth, minContentWidth }, false);
     const [navigationOpen = false, setNavigationOpen] = useControllable(controlledNavigationOpen, onNavigationChange, isMobile ? false : defaults.navigationOpen, { componentName: 'AppLayout', controlledProp: 'navigationOpen', changeHandler: 'onNavigationChange' });
     const [toolsOpen = false, setToolsOpen] = useControllable(controlledToolsOpen, onToolsChange, isMobile ? false : defaults.toolsOpen, { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' });
-    const _c = useDrawers(props, { ariaLabels, tools, toolsOpen, toolsHide, toolsWidth }), { drawers, activeDrawer, activeDrawerSize, activeDrawerId, onActiveDrawerChange, onActiveDrawerResize } = _c, drawersProps = __rest(_c, ["drawers", "activeDrawer", "activeDrawerSize", "activeDrawerId", "onActiveDrawerChange", "onActiveDrawerResize"]);
-    const hasDrawers = drawers.length > 0;
+    const _c = useDrawers(props, {
+        ariaLabels,
+        tools,
+        toolsOpen,
+        toolsHide,
+        toolsWidth,
+        onToolsChange,
+    }), { drawers, activeDrawer, activeDrawerSize, activeDrawerId, onActiveDrawerChange, onActiveDrawerResize } = _c, drawersProps = __rest(_c, ["drawers", "activeDrawer", "activeDrawerSize", "activeDrawerId", "onActiveDrawerChange", "onActiveDrawerResize"]);
+    const hasDrawers = !!drawers;
     const { refs: navigationRefs, setFocus: focusNavButtons } = useFocusControl(navigationOpen);
     const { refs: toolsRefs, setFocus: focusToolsButtons, loseFocus: loseToolsFocus, } = useFocusControl(toolsOpen || activeDrawer !== undefined, true);
     const { refs: drawerRefs, setFocus: focusDrawersButtons, loseFocus: loseDrawersFocus, setLastInteraction: setDrawerLastInteraction, } = useDrawerFocusControl([activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable], toolsOpen || activeDrawer !== undefined, true);
@@ -122,7 +129,9 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
     const closedDrawerWidth = 40;
     const effectiveNavigationWidth = navigationHide ? 0 : navigationOpen ? navigationWidth : closedDrawerWidth;
     const getEffectiveToolsWidth = () => {
-        if (toolsHide && (!splitPanelDisplayed || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side') && drawers.length === 0) {
+        if (toolsHide &&
+            (!splitPanelDisplayed || (splitPanelPreferences === null || splitPanelPreferences === void 0 ? void 0 : splitPanelPreferences.position) !== 'side') &&
+            (!drawers || drawers.length === 0)) {
             return 0;
         }
         if (activeDrawer && activeDrawerSize) {
@@ -238,7 +247,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                 }
                 return toolsWidth + closedDrawerWidth;
             }
-            return closedDrawerWidth;
+            return drawers.length > 0 ? closedDrawerWidth : 0;
         }
         if (!toolsHide && toolsOpen) {
             return toolsWidth;
@@ -310,13 +319,14 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                         onChange: changeDetail => {
                             onActiveDrawerChange(changeDetail.activeDrawerId);
                             if (changeDetail.activeDrawerId !== activeDrawerId) {
-                                onToolsToggle(changeDetail.activeDrawerId === TOOLS_DRAWER_ID);
+                                focusToolsButtons();
                                 focusDrawersButtons();
                                 setDrawerLastInteraction({ type: 'open' });
                             }
                         },
                         ariaLabel: drawersProps.ariaLabel,
                         overflowAriaLabel: drawersProps.overflowAriaLabel,
+                        overflowWithBadgeAriaLabel: drawersProps.overflowWithBadgeAriaLabel,
                     }
                     : undefined }, breadcrumbs)),
             React.createElement("div", { className: clsx(styles.layout, disableBodyScroll && styles['layout-no-scroll']) },
@@ -356,26 +366,25 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                                 } }, content))),
                     finalSplitPanePosition === 'bottom' && splitPanelWrapped),
                 finalSplitPanePosition === 'side' && (React.createElement(SideSplitPanelDrawer, { topOffset: headerHeight, bottomOffset: footerHeight, displayed: splitPanelDisplayed, width: splitPanelOpen && splitPanel ? splitPanelSize : undefined }, splitPanelWrapped)),
-                ((hasDrawers && activeDrawerId) || (!hasDrawers && !toolsHide)) &&
-                    (hasDrawers ? (React.createElement(ResizableDrawer, { contentClassName: activeDrawerId === TOOLS_DRAWER_ID
-                            ? clsx(testutilStyles.tools, testutilStyles['active-drawer'])
-                            : testutilStyles['active-drawer'], toggleClassName: testutilStyles['tools-toggle'], closeClassName: activeDrawerId === TOOLS_DRAWER_ID
-                            ? testutilStyles['tools-close']
-                            : testutilStyles['active-drawer-close-button'], ariaLabels: ariaLabels, width: !isResizeInvalid ? activeDrawerSize : toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen || activeDrawerId !== undefined, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, drawers: {
+                hasDrawers
+                    ? activeDrawerId && (React.createElement(ResizableDrawer, { contentClassName: clsx(testutilStyles['active-drawer'], activeDrawerId === TOOLS_DRAWER_ID && testutilStyles.tools), toggleClassName: testutilStyles['tools-toggle'], closeClassName: clsx(testutilStyles['active-drawer-close-button'], activeDrawerId === TOOLS_DRAWER_ID && testutilStyles['tools-close']), ariaLabels: ariaLabels, width: !isResizeInvalid ? activeDrawerSize : toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: () => {
+                            /*noop in this mode*/
+                        }, isOpen: true, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, drawers: {
                             items: drawers,
                             activeDrawerId: activeDrawerId,
                             onChange: changeDetail => {
-                                onToolsToggle(false);
+                                focusToolsButtons();
                                 setDrawerLastInteraction({ type: 'close' });
                                 onActiveDrawerChange(changeDetail.activeDrawerId);
                             },
-                        }, size: !isResizeInvalid ? activeDrawerSize : toolsWidth, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, getMaxWidth: getDrawerMaxWidth }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: ariaLabels, width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
-                hasDrawers && (React.createElement(DrawerTriggersBar, { bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: {
+                        }, size: !isResizeInvalid ? activeDrawerSize : toolsWidth, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, getMaxWidth: getDrawerMaxWidth }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content))
+                    : !toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: ariaLabels, width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools)),
+                hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: {
                         items: drawers,
                         activeDrawerId: activeDrawerId,
                         onChange: changeDetail => {
                             if (activeDrawerId !== changeDetail.activeDrawerId) {
-                                onToolsToggle(changeDetail.activeDrawerId === TOOLS_DRAWER_ID);
+                                focusToolsButtons();
                                 focusDrawersButtons();
                                 setDrawerLastInteraction({ type: 'open' });
                             }
@@ -383,6 +392,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                         },
                         ariaLabel: drawersProps.ariaLabel,
                         overflowAriaLabel: drawersProps.overflowAriaLabel,
+                        overflowWithBadgeAriaLabel: drawersProps.overflowWithBadgeAriaLabel,
                     } }))))));
 });
 applyDisplayName(AppLayout, 'AppLayout');