@cloudscape-design/components 3.0.394 → 3.0.396

package/app-layout/mobile-toolbar/index.js

@@ -15,7 +15,7 @@ const MobileToggle = React.forwardRef(({ className, ariaLabels, type, disabled,
     return (React.createElement(TagName, { className: clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`]), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
         React.createElement(ToggleButton, { ref: ref, className: className, iconName: iconName, onClick: onClick, ariaLabel: openLabel, disabled: disabled, ariaExpanded: disabled })));
 });
-export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen = false, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, mobileBarRef, }) {
+export function MobileToolbar({ ariaLabels, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, mobileBarRef, }) {
     useEffect(() => {
         if (anyPanelOpen) {
             document.body.classList.add(styles['block-body-scroll']);
@@ -28,20 +28,19 @@ export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigati
         }
     }, [anyPanelOpen]);
     const { overflowItems, visibleItems } = splitItems(drawers === null || drawers === void 0 ? void 0 : drawers.items, 2, drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId);
+    const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);
     return (React.createElement("div", { ref: mobileBarRef, className: clsx(styles['mobile-bar'], testutilStyles['mobile-bar'], unfocusable && sharedStyles.unfocusable), style: { top: topOffset } },
         !navigationHide && (React.createElement(MobileToggle, { ref: toggleRefs.navigation, type: "navigation", className: testutilStyles['navigation-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onNavigationOpen })),
         React.createElement("div", { className: styles['mobile-bar-breadcrumbs'] }, children && React.createElement("div", { className: testutilStyles.breadcrumbs }, children)),
         !toolsHide && !drawers && (React.createElement(MobileToggle, { ref: toggleRefs.tools, type: "tools", className: testutilStyles['tools-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onToolsOpen })),
-        drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container']) },
+        drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['drawers-container']) },
             visibleItems.map((item, index) => {
                 var _a;
                 return (React.createElement("div", { className: clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer']), key: index, onClick: () => drawers.onChange({ activeDrawerId: item.id }) },
-                    React.createElement(ToggleButton, { className: item.id === TOOLS_DRAWER_ID
-                            ? clsx(testutilStyles['drawers-trigger'], testutilStyles['tools-toggle'])
-                            : testutilStyles['drawers-trigger'], iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, badge: item.badge, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: drawers.activeDrawerId === item.id, testId: `awsui-app-layout-trigger-${item.id}` })));
+                    React.createElement(ToggleButton, { className: clsx(testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, badge: item.badge, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: drawers.activeDrawerId === item.id, testId: `awsui-app-layout-trigger-${item.id}` })));
             }),
             overflowItems.length > 0 && (React.createElement("div", { className: clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer']) },
-                React.createElement(OverflowMenu, { ariaLabel: drawers.overflowAriaLabel, items: overflowItems, onItemClick: ({ detail }) => {
+                React.createElement(OverflowMenu, { ariaLabel: overflowMenuHasBadge ? drawers.overflowWithBadgeAriaLabel : drawers.overflowAriaLabel, items: overflowItems, onItemClick: ({ detail }) => {
                         drawers.onChange({
                             activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,
                         });

package/app-layout/mobile-toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { ToggleButton, togglesConfig } from '../toggles';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <ToggleButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean | undefined;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels?: AppLayoutProps.Labels;\n  mobileBarRef: React.Ref<HTMLDivElement>;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel?: string;\n    overflowAriaLabel?: string;\n  };\n}\n\nexport function MobileToolbar({\n  ariaLabels = {},\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen = false,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n  drawers,\n  mobileBarRef,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n\n  const { overflowItems, visibleItems } = splitItems(drawers?.items, 2, drawers?.activeDrawerId);\n\n  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['mobile-bar'], testutilStyles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n      style={{ top: topOffset }}\n    >\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && !drawers && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n      {drawers && (\n        <aside\n          aria-label={drawers.ariaLabel}\n          className={clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-container'])}\n        >\n          {visibleItems.map((item, index) => (\n            <div\n              className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}\n              key={index}\n              onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n            >\n              <ToggleButton\n                className={\n                  item.id === TOOLS_DRAWER_ID\n                    ? clsx(testutilStyles['drawers-trigger'], testutilStyles['tools-toggle'])\n                    : testutilStyles['drawers-trigger']\n                }\n                iconName={item.trigger.iconName}\n                iconSvg={item.trigger.iconSvg}\n                badge={item.badge}\n                ariaLabel={item.ariaLabels?.triggerButton}\n                ariaExpanded={drawers.activeDrawerId === item.id}\n                testId={`awsui-app-layout-trigger-${item.id}`}\n              />\n            </div>\n          ))}\n          {overflowItems.length > 0 && (\n            <div className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}>\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        </aside>\n      )}\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { ToggleButton, togglesConfig } from '../toggles';\nimport OverflowMenu from '../drawer/overflow-menu';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport { splitItems } from '../drawer/drawers-helpers';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\nconst MobileToggle = React.forwardRef(\n  ({ className, ariaLabels, type, disabled, onClick }: MobileToggleProps, ref: React.Ref<ButtonProps.Ref>) => {\n    const { TagName, iconName, getLabels } = togglesConfig[type];\n    const { mainLabel, openLabel } = getLabels(ariaLabels);\n\n    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'], styles[`mobile-toggle-type-${type}`])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <ToggleButton\n          ref={ref}\n          className={className}\n          iconName={iconName}\n          onClick={onClick}\n          ariaLabel={openLabel}\n          disabled={disabled}\n          ariaExpanded={disabled}\n        />\n      </TagName>\n    );\n  }\n);\ninterface MobileToolbarProps {\n  anyPanelOpen: boolean;\n  unfocusable: boolean | undefined;\n  toggleRefs: {\n    navigation: React.Ref<ButtonProps.Ref>;\n    tools: React.Ref<ButtonProps.Ref>;\n  };\n  navigationHide: boolean | undefined;\n  toolsHide: boolean | undefined;\n  topOffset?: number;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n  mobileBarRef: React.Ref<HTMLDivElement>;\n  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\n  drawers?: {\n    items: Array<DrawerItem>;\n    activeDrawerId: string | undefined;\n    onChange: (changeDetail: { activeDrawerId: string | undefined }) => void;\n    ariaLabel?: string;\n    overflowAriaLabel?: string;\n    overflowWithBadgeAriaLabel?: string;\n  };\n}\n\nexport function MobileToolbar({\n  ariaLabels,\n  toggleRefs,\n  topOffset,\n  navigationHide,\n  toolsHide,\n  anyPanelOpen,\n  unfocusable,\n  children,\n  onNavigationOpen,\n  onToolsOpen,\n  drawers,\n  mobileBarRef,\n}: MobileToolbarProps) {\n  useEffect(() => {\n    if (anyPanelOpen) {\n      document.body.classList.add(styles['block-body-scroll']);\n      return () => {\n        document.body.classList.remove(styles['block-body-scroll']);\n      };\n    } else {\n      document.body.classList.remove(styles['block-body-scroll']);\n    }\n  }, [anyPanelOpen]);\n\n  const { overflowItems, visibleItems } = splitItems(drawers?.items, 2, drawers?.activeDrawerId);\n  const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);\n\n  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['mobile-bar'], testutilStyles['mobile-bar'], unfocusable && sharedStyles.unfocusable)}\n      style={{ top: topOffset }}\n    >\n      {!navigationHide && (\n        <MobileToggle\n          ref={toggleRefs.navigation}\n          type=\"navigation\"\n          className={testutilStyles['navigation-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onNavigationOpen}\n        />\n      )}\n      <div className={styles['mobile-bar-breadcrumbs']}>\n        {children && <div className={testutilStyles.breadcrumbs}>{children}</div>}\n      </div>\n      {!toolsHide && !drawers && (\n        <MobileToggle\n          ref={toggleRefs.tools}\n          type=\"tools\"\n          className={testutilStyles['tools-toggle']}\n          ariaLabels={ariaLabels}\n          disabled={anyPanelOpen}\n          onClick={onToolsOpen}\n        />\n      )}\n      {drawers && (\n        <aside aria-label={drawers.ariaLabel} className={clsx(styles['drawers-container'])}>\n          {visibleItems.map((item, index) => (\n            <div\n              className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}\n              key={index}\n              onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n            >\n              <ToggleButton\n                className={clsx(\n                  testutilStyles['drawers-trigger'],\n                  item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']\n                )}\n                iconName={item.trigger.iconName}\n                iconSvg={item.trigger.iconSvg}\n                badge={item.badge}\n                ariaLabel={item.ariaLabels?.triggerButton}\n                ariaExpanded={drawers.activeDrawerId === item.id}\n                testId={`awsui-app-layout-trigger-${item.id}`}\n              />\n            </div>\n          ))}\n          {overflowItems.length > 0 && (\n            <div className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])}>\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        </aside>\n      )}\n    </div>\n  );\n}\n"]}

package/app-layout/test-classes/styles.css.js

@@ -1,24 +1,22 @@
 
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1fj9k_1csvr_5",
-  "navigation": "awsui_navigation_1fj9k_1csvr_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_1csvr_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_1csvr_17",
-  "content": "awsui_content_1fj9k_1csvr_21",
-  "notifications": "awsui_notifications_1fj9k_1csvr_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_1csvr_29",
-  "tools": "awsui_tools_1fj9k_1csvr_33",
-  "tools-close": "awsui_tools-close_1fj9k_1csvr_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_1csvr_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_1csvr_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_1csvr_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_1csvr_53",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1fj9k_1csvr_57",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1fj9k_1csvr_61",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_1csvr_65",
-  "active-drawer": "awsui_active-drawer_1fj9k_1csvr_69",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_1csvr_73",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_1csvr_77"
+  "root": "awsui_root_1fj9k_1uvk8_5",
+  "navigation": "awsui_navigation_1fj9k_1uvk8_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_1uvk8_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_1uvk8_17",
+  "content": "awsui_content_1fj9k_1uvk8_21",
+  "notifications": "awsui_notifications_1fj9k_1uvk8_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_1uvk8_29",
+  "tools": "awsui_tools_1fj9k_1uvk8_33",
+  "tools-close": "awsui_tools-close_1fj9k_1uvk8_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_1uvk8_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_1uvk8_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_1uvk8_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_1uvk8_53",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_1uvk8_57",
+  "active-drawer": "awsui_active-drawer_1fj9k_1uvk8_61",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_1uvk8_65",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_1uvk8_69"
 };
   

package/app-layout/test-classes/styles.scoped.css

@@ -2,78 +2,70 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fj9k_1csvr_5:not(#\9) {
+.awsui_root_1fj9k_1uvk8_5:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation_1fj9k_1csvr_9:not(#\9) {
+.awsui_navigation_1fj9k_1uvk8_9:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-toggle_1fj9k_1csvr_13:not(#\9) {
+.awsui_navigation-toggle_1fj9k_1uvk8_13:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-close_1fj9k_1csvr_17:not(#\9) {
+.awsui_navigation-close_1fj9k_1uvk8_17:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content_1fj9k_1csvr_21:not(#\9) {
+.awsui_content_1fj9k_1uvk8_21:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_notifications_1fj9k_1csvr_25:not(#\9) {
+.awsui_notifications_1fj9k_1uvk8_25:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_breadcrumbs_1fj9k_1csvr_29:not(#\9) {
+.awsui_breadcrumbs_1fj9k_1uvk8_29:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools_1fj9k_1csvr_33:not(#\9) {
+.awsui_tools_1fj9k_1uvk8_33:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools-close_1fj9k_1csvr_37:not(#\9) {
+.awsui_tools-close_1fj9k_1uvk8_37:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools-toggle_1fj9k_1csvr_41:not(#\9) {
+.awsui_tools-toggle_1fj9k_1uvk8_41:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_drawer-closed_1fj9k_1csvr_45:not(#\9) {
+.awsui_drawer-closed_1fj9k_1uvk8_45:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_mobile-bar_1fj9k_1csvr_49:not(#\9) {
+.awsui_mobile-bar_1fj9k_1uvk8_49:not(#\9) {
   /* used in tests */
 }
 
-.awsui_disable-body-scroll-root_1fj9k_1csvr_53:not(#\9) {
+.awsui_disable-body-scroll-root_1fj9k_1uvk8_53:not(#\9) {
   /* used in tests */
 }
 
-.awsui_drawers-desktop-triggers-container_1fj9k_1csvr_57:not(#\9) {
+.awsui_drawers-trigger_1fj9k_1uvk8_57:not(#\9) {
   /* used in tests */
 }
 
-.awsui_drawers-mobile-triggers-container_1fj9k_1csvr_61:not(#\9) {
+.awsui_active-drawer_1fj9k_1uvk8_61:not(#\9) {
   /* used in tests */
 }
 
-.awsui_drawers-trigger_1fj9k_1csvr_65:not(#\9) {
+.awsui_active-drawer-close-button_1fj9k_1uvk8_65:not(#\9) {
   /* used in tests */
 }
 
-.awsui_active-drawer_1fj9k_1csvr_69:not(#\9) {
-  /* used in tests */
-}
-
-.awsui_active-drawer-close-button_1fj9k_1csvr_73:not(#\9) {
-  /* used in tests */
-}
-
-.awsui_drawers-slider_1fj9k_1csvr_77:not(#\9) {
+.awsui_drawers-slider_1fj9k_1uvk8_69:not(#\9) {
   /* used in tests */
 }

package/app-layout/test-classes/styles.selectors.js

@@ -2,24 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fj9k_1csvr_5",
-  "navigation": "awsui_navigation_1fj9k_1csvr_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_1csvr_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_1csvr_17",
-  "content": "awsui_content_1fj9k_1csvr_21",
-  "notifications": "awsui_notifications_1fj9k_1csvr_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_1csvr_29",
-  "tools": "awsui_tools_1fj9k_1csvr_33",
-  "tools-close": "awsui_tools-close_1fj9k_1csvr_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_1csvr_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_1csvr_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_1csvr_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_1csvr_53",
-  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1fj9k_1csvr_57",
-  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1fj9k_1csvr_61",
-  "drawers-trigger": "awsui_drawers-trigger_1fj9k_1csvr_65",
-  "active-drawer": "awsui_active-drawer_1fj9k_1csvr_69",
-  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_1csvr_73",
-  "drawers-slider": "awsui_drawers-slider_1fj9k_1csvr_77"
+  "root": "awsui_root_1fj9k_1uvk8_5",
+  "navigation": "awsui_navigation_1fj9k_1uvk8_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_1uvk8_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_1uvk8_17",
+  "content": "awsui_content_1fj9k_1uvk8_21",
+  "notifications": "awsui_notifications_1fj9k_1uvk8_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_1uvk8_29",
+  "tools": "awsui_tools_1fj9k_1uvk8_33",
+  "tools-close": "awsui_tools-close_1fj9k_1uvk8_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_1uvk8_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_1uvk8_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_1uvk8_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_1uvk8_53",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_1uvk8_57",
+  "active-drawer": "awsui_active-drawer_1fj9k_1uvk8_61",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_1uvk8_65",
+  "drawers-slider": "awsui_drawers-slider_1fj9k_1uvk8_69"
 };
   

package/app-layout/utils/use-drawers.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { InternalDrawerProps } from '../drawer/interfaces';
+import { DrawerItem, InternalDrawerProps } from '../drawer/interfaces';
 import { AppLayoutProps } from '../interfaces';
 export declare const TOOLS_DRAWER_ID = "awsui-internal-tools";
 interface ToolsProps {
@@ -7,6 +7,7 @@ interface ToolsProps {
     toolsOpen: boolean | undefined;
     toolsWidth: number;
     tools: React.ReactNode | undefined;
+    onToolsChange: AppLayoutProps['onToolsChange'];
     ariaLabels: AppLayoutProps.Labels | undefined;
 }
 export declare function useDrawers({ drawers: ownDrawers, __disableRuntimeDrawers: disableRuntimeDrawers, }: InternalDrawerProps & {
@@ -14,8 +15,9 @@ export declare function useDrawers({ drawers: ownDrawers, __disableRuntimeDrawer
 }, toolsProps: ToolsProps): {
     ariaLabel: string | undefined;
     overflowAriaLabel: string | undefined;
-    drawers: import("../drawer/interfaces").DrawerItem[];
-    activeDrawer: import("../drawer/interfaces").DrawerItem | undefined;
+    overflowWithBadgeAriaLabel: string | undefined;
+    drawers: DrawerItem[] | null;
+    activeDrawer: DrawerItem | undefined;
     activeDrawerId: string | undefined;
     activeDrawerSize: number;
     onActiveDrawerChange: (newDrawerId: string | undefined) => void;

package/app-layout/utils/use-drawers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAM3D,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,eAAO,MAAM,eAAe,yBAAyB,CAAC;AAEtD,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;CAC/C;AAuDD,wBAAgB,UAAU,CACxB,EACE,OAAO,EAAE,UAAU,EACnB,uBAAuB,EAAE,qBAAqB,GAC/C,EAAE,mBAAmB,GAAG;IAAE,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAAE,EAC9D,UAAU,EAAE,UAAU;;;;;;;wCAgBuC,MAAM,GAAG,SAAS;;YAiB7B,MAAM;cAAQ,MAAM;;EAiBvE"}
+{"version":3,"file":"use-drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAMvE,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAG/C,eAAO,MAAM,eAAe,yBAAyB,CAAC;AAEtD,UAAU,UAAU;IAClB,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,KAAK,CAAC,SAAS,GAAG,SAAS,CAAC;IACnC,aAAa,EAAE,cAAc,CAAC,eAAe,CAAC,CAAC;IAC/C,UAAU,EAAE,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;CAC/C;AAuED,wBAAgB,UAAU,CACxB,EACE,OAAO,EAAE,UAAU,EACnB,uBAAuB,EAAE,qBAAqB,GAC/C,EAAE,mBAAmB,GAAG;IAAE,uBAAuB,CAAC,EAAE,OAAO,CAAA;CAAE,EAC9D,UAAU,EAAE,UAAU;;;;;;;;wCAoBqB,MAAM,GAAG,SAAS;;YANX,MAAM;cAAQ,MAAM;;EAuCvE"}

package/app-layout/utils/use-drawers.js

@@ -31,6 +31,7 @@ function getToolsDrawerItem(props) {
 }
 function useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange) {
     const [runtimeDrawers, setRuntimeDrawers] = useState({ before: [], after: [] });
+    const onActiveDrawerChangeStable = useStableCallback(onActiveDrawerChange);
     const drawerWasOpenRef = useRef(false);
     drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;
     useEffect(() => {
@@ -42,7 +43,7 @@ function useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawer
             if (!drawerWasOpenRef.current) {
                 const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);
                 if (defaultActiveDrawer) {
-                    onActiveDrawerChange(defaultActiveDrawer.id);
+                    onActiveDrawerChangeStable(defaultActiveDrawer.id);
                 }
             }
         });
@@ -50,44 +51,61 @@ function useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawer
             unsubscribe();
             setRuntimeDrawers({ before: [], after: [] });
         };
-    }, [disableRuntimeDrawers, onActiveDrawerChange]);
+    }, [disableRuntimeDrawers, onActiveDrawerChangeStable]);
     return runtimeDrawers;
 }
+function applyToolsDrawer(toolsProps, runtimeDrawers) {
+    const drawers = [...runtimeDrawers.before, ...runtimeDrawers.after];
+    if (drawers.length === 0) {
+        return null;
+    }
+    const toolsItem = getToolsDrawerItem(toolsProps);
+    if (toolsItem) {
+        drawers.unshift(toolsItem);
+    }
+    return drawers;
+}
 export function useDrawers({ drawers: ownDrawers, __disableRuntimeDrawers: disableRuntimeDrawers, }, toolsProps) {
-    var _a, _b, _c, _d;
-    const toolsDrawer = getToolsDrawerItem(toolsProps);
+    var _a, _b;
     const [activeDrawerId, setActiveDrawerId] = useControllable(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.activeDrawerId, ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.onChange, undefined, {
         componentName: 'AppLayout',
         controlledProp: 'activeDrawerId',
         changeHandler: 'onChange',
     });
     const [drawerSizes, setDrawerSizes] = useState({});
-    const onActiveDrawerChange = useStableCallback((newDrawerId) => {
+    function onActiveDrawerResize({ id, size }) {
+        setDrawerSizes(oldSizes => (Object.assign(Object.assign({}, oldSizes), { [id]: size })));
+        fireNonCancelableEvent(activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.onResize, { id, size });
+        fireNonCancelableEvent(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.onResize, { id, size });
+    }
+    function onActiveDrawerChange(newDrawerId) {
         setActiveDrawerId(newDrawerId);
-        fireNonCancelableEvent(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.onChange, newDrawerId);
-    });
-    const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);
-    const combinedDrawers = [...runtimeDrawers.before, ...((_a = ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.items) !== null && _a !== void 0 ? _a : []), ...runtimeDrawers.after];
-    if (toolsDrawer && combinedDrawers.length > 0) {
-        combinedDrawers.unshift(toolsDrawer);
+        if (hasOwnDrawers) {
+            fireNonCancelableEvent(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.onChange, newDrawerId);
+        }
+        else if (!toolsProps.toolsHide) {
+            fireNonCancelableEvent(toolsProps.onToolsChange, { open: newDrawerId === TOOLS_DRAWER_ID });
+        }
     }
+    const hasOwnDrawers = !!(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.items);
+    const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);
+    const combinedDrawers = hasOwnDrawers
+        ? [...runtimeDrawers.before, ...ownDrawers.items, ...runtimeDrawers.after]
+        : applyToolsDrawer(toolsProps, runtimeDrawers);
     // support toolsOpen in runtime-drawers-only mode
-    let activeDrawerIdResolved = toolsProps.toolsOpen && ((_b = ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.items) !== null && _b !== void 0 ? _b : []).length === 0 ? TOOLS_DRAWER_ID : activeDrawerId;
-    const activeDrawer = combinedDrawers.find(drawer => drawer.id === activeDrawerIdResolved);
+    let activeDrawerIdResolved = toolsProps.toolsOpen && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;
+    const activeDrawer = combinedDrawers === null || combinedDrawers === void 0 ? void 0 : combinedDrawers.find(drawer => drawer.id === activeDrawerIdResolved);
     // ensure that id is only defined when the drawer exists
     activeDrawerIdResolved = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
-    function onActiveDrawerResize({ id, size }) {
-        setDrawerSizes(oldSizes => (Object.assign(Object.assign({}, oldSizes), { [id]: size })));
-        fireNonCancelableEvent(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.onResize, { id, size });
-    }
     return {
         ariaLabel: ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.ariaLabel,
         overflowAriaLabel: ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.overflowAriaLabel,
+        overflowWithBadgeAriaLabel: ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.overflowWithBadgeAriaLabel,
         drawers: combinedDrawers,
         activeDrawer,
         activeDrawerId: activeDrawerIdResolved,
         activeDrawerSize: activeDrawerIdResolved
-            ? (_d = (_c = drawerSizes[activeDrawerIdResolved]) !== null && _c !== void 0 ? _c : activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _d !== void 0 ? _d : toolsProps.toolsWidth
+            ? (_b = (_a = drawerSizes[activeDrawerIdResolved]) !== null && _a !== void 0 ? _a : activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _b !== void 0 ? _b : toolsProps.toolsWidth
             : toolsProps.toolsWidth,
         onActiveDrawerChange,
         onActiveDrawerResize,

package/app-layout/utils/use-drawers.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-drawers.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { InternalDrawerProps } from '../drawer/interfaces';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { AppLayoutProps } from '../interfaces';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  ariaLabels: AppLayoutProps.Labels | undefined;\n}\n\nfunction getToolsDrawerItem(props: ToolsProps) {\n  if (props.toolsHide) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      content: mainLabel,\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | undefined,\n  onActiveDrawerChange: (id: string | undefined) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n\n  const drawerWasOpenRef = useRef(false);\n  drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n      if (!drawerWasOpenRef.current) {\n        const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveDrawer) {\n          onActiveDrawerChange(defaultActiveDrawer.id);\n        }\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChange]);\n\n  return runtimeDrawers;\n}\n\nexport function useDrawers(\n  {\n    drawers: ownDrawers,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: InternalDrawerProps & { __disableRuntimeDrawers?: boolean },\n  toolsProps: ToolsProps\n) {\n  const toolsDrawer = getToolsDrawerItem(toolsProps);\n\n  const [activeDrawerId, setActiveDrawerId] = useControllable(\n    ownDrawers?.activeDrawerId,\n    ownDrawers?.onChange,\n    undefined,\n    {\n      componentName: 'AppLayout',\n      controlledProp: 'activeDrawerId',\n      changeHandler: 'onChange',\n    }\n  );\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  const onActiveDrawerChange = useStableCallback((newDrawerId: string | undefined) => {\n    setActiveDrawerId(newDrawerId);\n    fireNonCancelableEvent(ownDrawers?.onChange, newDrawerId);\n  });\n\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n  const combinedDrawers = [...runtimeDrawers.before, ...(ownDrawers?.items ?? []), ...runtimeDrawers.after];\n  if (toolsDrawer && combinedDrawers.length > 0) {\n    combinedDrawers.unshift(toolsDrawer);\n  }\n  // support toolsOpen in runtime-drawers-only mode\n  let activeDrawerIdResolved =\n    toolsProps.toolsOpen && (ownDrawers?.items ?? []).length === 0 ? TOOLS_DRAWER_ID : activeDrawerId;\n  const activeDrawer = combinedDrawers.find(drawer => drawer.id === activeDrawerIdResolved);\n  // ensure that id is only defined when the drawer exists\n  activeDrawerIdResolved = activeDrawer?.id;\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(ownDrawers?.onResize, { id, size });\n  }\n\n  return {\n    ariaLabel: ownDrawers?.ariaLabel,\n    overflowAriaLabel: ownDrawers?.overflowAriaLabel,\n    drawers: combinedDrawers,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize: activeDrawerIdResolved\n      ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n      : toolsProps.toolsWidth,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}
+{"version":3,"file":"use-drawers.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { DrawerItem, InternalDrawerProps } from '../drawer/interfaces';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\nimport { sortByPriority } from '../../internal/plugins/helpers/utils';\nimport { convertRuntimeDrawers, DrawersLayout } from '../runtime-api';\nimport { AppLayoutProps } from '../interfaces';\nimport { togglesConfig } from '../toggles';\n\nexport const TOOLS_DRAWER_ID = 'awsui-internal-tools';\n\ninterface ToolsProps {\n  toolsHide: boolean | undefined;\n  toolsOpen: boolean | undefined;\n  toolsWidth: number;\n  tools: React.ReactNode | undefined;\n  onToolsChange: AppLayoutProps['onToolsChange'];\n  ariaLabels: AppLayoutProps.Labels | undefined;\n}\n\ntype DrawerChangeHandler = (newDrawerId: string | undefined) => void;\n\nfunction getToolsDrawerItem(props: ToolsProps): DrawerItem | null {\n  if (props.toolsHide) {\n    return null;\n  }\n  const { iconName, getLabels } = togglesConfig.tools;\n  const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);\n  return {\n    id: TOOLS_DRAWER_ID,\n    content: props.tools,\n    resizable: false,\n    ariaLabels: {\n      triggerButton: openLabel,\n      closeButton: closeLabel,\n      content: mainLabel,\n    },\n    trigger: {\n      iconName: iconName,\n    },\n  };\n}\n\nfunction useRuntimeDrawers(\n  disableRuntimeDrawers: boolean | undefined,\n  activeDrawerId: string | undefined,\n  onActiveDrawerChange: DrawerChangeHandler\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n  const onActiveDrawerChangeStable = useStableCallback(onActiveDrawerChange);\n\n  const drawerWasOpenRef = useRef(false);\n  drawerWasOpenRef.current = drawerWasOpenRef.current || !!activeDrawerId;\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\n      if (!drawerWasOpenRef.current) {\n        const defaultActiveDrawer = sortByPriority(drawers).find(drawer => drawer.defaultActive);\n        if (defaultActiveDrawer) {\n          onActiveDrawerChangeStable(defaultActiveDrawer.id);\n        }\n      }\n    });\n    return () => {\n      unsubscribe();\n      setRuntimeDrawers({ before: [], after: [] });\n    };\n  }, [disableRuntimeDrawers, onActiveDrawerChangeStable]);\n\n  return runtimeDrawers;\n}\n\nfunction applyToolsDrawer(toolsProps: ToolsProps, runtimeDrawers: DrawersLayout) {\n  const drawers = [...runtimeDrawers.before, ...runtimeDrawers.after];\n  if (drawers.length === 0) {\n    return null;\n  }\n  const toolsItem = getToolsDrawerItem(toolsProps);\n  if (toolsItem) {\n    drawers.unshift(toolsItem);\n  }\n\n  return drawers;\n}\n\nexport function useDrawers(\n  {\n    drawers: ownDrawers,\n    __disableRuntimeDrawers: disableRuntimeDrawers,\n  }: InternalDrawerProps & { __disableRuntimeDrawers?: boolean },\n  toolsProps: ToolsProps\n) {\n  const [activeDrawerId, setActiveDrawerId] = useControllable(\n    ownDrawers?.activeDrawerId,\n    ownDrawers?.onChange,\n    undefined,\n    {\n      componentName: 'AppLayout',\n      controlledProp: 'activeDrawerId',\n      changeHandler: 'onChange',\n    }\n  );\n  const [drawerSizes, setDrawerSizes] = useState<Record<string, number>>({});\n\n  function onActiveDrawerResize({ id, size }: { id: string; size: number }) {\n    setDrawerSizes(oldSizes => ({ ...oldSizes, [id]: size }));\n    fireNonCancelableEvent(activeDrawer?.onResize, { id, size });\n    fireNonCancelableEvent(ownDrawers?.onResize, { id, size });\n  }\n\n  function onActiveDrawerChange(newDrawerId: string | undefined) {\n    setActiveDrawerId(newDrawerId);\n    if (hasOwnDrawers) {\n      fireNonCancelableEvent(ownDrawers?.onChange, newDrawerId);\n    } else if (!toolsProps.toolsHide) {\n      fireNonCancelableEvent(toolsProps.onToolsChange, { open: newDrawerId === TOOLS_DRAWER_ID });\n    }\n  }\n\n  const hasOwnDrawers = !!ownDrawers?.items;\n  const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, activeDrawerId, onActiveDrawerChange);\n  const combinedDrawers = hasOwnDrawers\n    ? [...runtimeDrawers.before, ...ownDrawers.items, ...runtimeDrawers.after]\n    : applyToolsDrawer(toolsProps, runtimeDrawers);\n  // support toolsOpen in runtime-drawers-only mode\n  let activeDrawerIdResolved = toolsProps.toolsOpen && !hasOwnDrawers ? TOOLS_DRAWER_ID : activeDrawerId;\n  const activeDrawer = combinedDrawers?.find(drawer => drawer.id === activeDrawerIdResolved);\n  // ensure that id is only defined when the drawer exists\n  activeDrawerIdResolved = activeDrawer?.id;\n\n  return {\n    ariaLabel: ownDrawers?.ariaLabel,\n    overflowAriaLabel: ownDrawers?.overflowAriaLabel,\n    overflowWithBadgeAriaLabel: ownDrawers?.overflowWithBadgeAriaLabel,\n    drawers: combinedDrawers,\n    activeDrawer,\n    activeDrawerId: activeDrawerIdResolved,\n    activeDrawerSize: activeDrawerIdResolved\n      ? drawerSizes[activeDrawerIdResolved] ?? activeDrawer?.defaultSize ?? toolsProps.toolsWidth\n      : toolsProps.toolsWidth,\n    onActiveDrawerChange,\n    onActiveDrawerResize,\n  };\n}\n"]}

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

@@ -7,9 +7,10 @@ import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-co
 import { DrawerItem } from '../drawer/interfaces';
 interface AppLayoutInternals extends AppLayoutProps {
     activeDrawerId: string | undefined;
-    drawers: Array<DrawerItem>;
+    drawers: Array<DrawerItem> | null;
     drawersAriaLabel: string | undefined;
     drawersOverflowAriaLabel: string | undefined;
+    drawersOverflowWithBadgeAriaLabel: string | undefined;
     drawersRefs: DrawerFocusControlRefs;
     drawerSize: number;
     drawersMaxWidth: number;

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

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

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

@@ -224,6 +224,7 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
         toolsOpen: isToolsOpen,
         tools: props.tools,
         toolsWidth,
+        onToolsChange: props.onToolsChange,
     }), { drawers, activeDrawer, activeDrawerId, onActiveDrawerChange, onActiveDrawerResize, activeDrawerSize } = _e, drawersProps = __rest(_e, ["drawers", "activeDrawer", "activeDrawerId", "onActiveDrawerChange", "onActiveDrawerResize", "activeDrawerSize"]);
     const [drawersMaxWidth, setDrawersMaxWidth] = useState(toolsWidth);
     const { refs: drawersRefs, setFocus: focusDrawersButtons, loseFocus: loseDrawersFocus, setLastInteraction: setDrawerLastInteraction, } = useDrawerFocusControl([activeDrawerId, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable], true, true);
@@ -242,7 +243,10 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
         !skipFocusControl && focusDrawersButtons();
         setDrawerLastInteraction({ type: activeDrawerId ? 'close' : 'open' });
     };
-    const drawersTriggerCount = drawers.length + (splitPanelDisplayed && splitPanelPosition === 'side' ? 1 : 0) + (!toolsHide ? 1 : 0);
+    let drawersTriggerCount = drawers ? drawers.length : !toolsHide ? 1 : 0;
+    if (splitPanelDisplayed && splitPanelPosition === 'side') {
+        drawersTriggerCount++;
+    }
     const hasOpenDrawer = activeDrawerId !== undefined ||
         (!toolsHide && isToolsOpen) ||
         (splitPanelDisplayed && splitPanelPosition === 'side' && isSplitPanelOpen);
@@ -374,7 +378,7 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
     }, [isMobile, handleNavigationClick, handleToolsClick, focusToolsButtons, splitPanelRefs.slider]);
     return (React.createElement(AppLayoutInternalsContext.Provider, { value: Object.assign(Object.assign({}, props), { activeDrawerId,
             contentType,
-            drawers, drawersAriaLabel: drawersProps.ariaLabel, drawersOverflowAriaLabel: drawersProps.overflowAriaLabel, drawersRefs,
+            drawers, drawersAriaLabel: drawersProps.ariaLabel, drawersOverflowAriaLabel: drawersProps.overflowAriaLabel, drawersOverflowWithBadgeAriaLabel: drawersProps.overflowWithBadgeAriaLabel, drawersRefs,
             drawersMaxWidth,
             drawerSize,
             drawerRef,