@cloudscape-design/components 3.0.365 → 3.0.367

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

@@ -3,9 +3,11 @@
 import clsx from 'clsx';
 import React, { useEffect } from 'react';
 import { ToggleButton, togglesConfig } from '../toggles';
+import OverflowMenu from '../drawer/overflow-menu';
 import styles from './styles.css.js';
 import sharedStyles from '../styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
+import { splitItems } from '../drawer/drawers-helpers';
 const MobileToggle = React.forwardRef(({ className, ariaLabels, type, disabled, onClick }, ref) => {
     const { TagName, iconName, getLabels } = togglesConfig[type];
     const { mainLabel, openLabel } = getLabels(ariaLabels);
@@ -24,14 +26,22 @@ export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigati
             document.body.classList.remove(styles['block-body-scroll']);
         }
     }, [anyPanelOpen]);
+    const { overflowItems, visibleItems } = splitItems(drawers === null || drawers === void 0 ? void 0 : drawers.items, 2, drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId, true);
     return (React.createElement("div", { ref: mobileBarRef, className: clsx(styles['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.items.map((item, index) => {
-            var _a;
-            return (React.createElement("span", { className: clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer']), key: index },
-                React.createElement(ToggleButton, { className: testutilStyles['drawers-trigger'], iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, onClick: () => drawers.onChange({ activeDrawerId: item.id }), ariaExpanded: drawers.activeDrawerId !== undefined, testId: `awsui-app-layout-trigger-${item.id}` })));
-        })))));
+        drawers && (React.createElement("aside", { "aria-label": drawers.ariaLabel, className: clsx(styles['drawers-container'], testutilStyles['drawers-mobile-triggers-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: 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 !== undefined, 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 }) => {
+                        drawers.onChange({
+                            activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,
+                        });
+                    } })))))));
 }
 //# sourceMappingURL=index.js.map

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 styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\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  };\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  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['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          {drawers.items.map((item: DrawerItem, index: number) => (\n            <span className={clsx(styles['mobile-toggle'], styles['mobile-toggle-type-drawer'])} key={index}>\n              <ToggleButton\n                className={testutilStyles['drawers-trigger']}\n                iconName={item.trigger.iconName}\n                iconSvg={item.trigger.iconSvg}\n                ariaLabel={item.ariaLabels?.triggerButton}\n                onClick={() => drawers.onChange({ activeDrawerId: item.id })}\n                ariaExpanded={drawers.activeDrawerId !== undefined}\n                testId={`awsui-app-layout-trigger-${item.id}`}\n              />\n            </span>\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';\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, true);\n\n  return (\n    <div\n      ref={mobileBarRef}\n      className={clsx(styles['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: DrawerItem, index: number) => (\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={testutilStyles['drawers-trigger']}\n                iconName={item.trigger.iconName}\n                iconSvg={item.trigger.iconSvg}\n                badge={item.badge}\n                ariaLabel={item.ariaLabels?.triggerButton}\n                ariaExpanded={drawers.activeDrawerId !== undefined}\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"]}

package/app-layout/toggles/index.js

@@ -25,9 +25,9 @@ export const togglesConfig = {
         }),
     },
 };
-export const ToggleButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick }, ref) => {
+export const ToggleButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick, badge }, ref) => {
     return (React.createElement("button", { ref: ref, className: clsx(className, styles['toggle-button']), "aria-label": ariaLabel, type: "button", onClick: onClick, disabled: disabled, "aria-expanded": ariaExpanded ? undefined : false, "aria-haspopup": ariaExpanded ? undefined : true, "data-testid": testId },
-        React.createElement(InternalIcon, { svg: iconSvg, name: iconName })));
+        React.createElement(InternalIcon, { svg: iconSvg, name: iconName, badge: badge })));
 });
 export const CloseButton = React.forwardRef(({ className, ariaLabel, onClick }, ref) => {
     return (React.createElement("span", { className: styles['close-button'] },

package/app-layout/toggles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAG/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;YAClC,UAAU,EAAE,MAAM,CAAC,eAAe;SACnC,CAAC;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,KAAK;YACvB,SAAS,EAAE,MAAM,CAAC,WAAW;YAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC;KACH;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAwB,EAC1G,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,gCACE,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,gBACvC,SAAS,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,mBACH,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,mBAChC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,iBACjC,MAAM;QAEnB,oBAAC,YAAY,IAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,GAAI,CACvC,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport InternalIcon from '../../icon/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n  navigation: {\n    TagName: 'nav',\n    iconName: 'menu',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.navigation,\n      openLabel: labels.navigationToggle,\n      closeLabel: labels.navigationClose,\n    }),\n  },\n  tools: {\n    TagName: 'aside',\n    iconName: 'status-info',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.tools,\n      openLabel: labels.toolsToggle,\n      closeLabel: labels.toolsClose,\n    }),\n  },\n} as const;\n\nexport const ToggleButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick }: AppLayoutButtonProps,\n    ref: React.Ref<{ focus(): void }>\n  ) => {\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        className={clsx(className, styles['toggle-button'])}\n        aria-label={ariaLabel}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        aria-expanded={ariaExpanded ? undefined : false}\n        aria-haspopup={ariaExpanded ? undefined : true}\n        data-testid={testId}\n      >\n        <InternalIcon svg={iconSvg} name={iconName} />\n      </button>\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n    return (\n      <span className={styles['close-button']}>\n        <InternalButton\n          ref={ref}\n          className={className}\n          ariaLabel={ariaLabel}\n          variant=\"icon\"\n          formAction=\"none\"\n          iconName=\"close\"\n          onClick={onClick}\n        />\n      </span>\n    );\n  }\n);\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAG/C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,CAAC,MAAM,aAAa,GAAG;IAC3B,UAAU,EAAE;QACV,OAAO,EAAE,KAAK;QACd,QAAQ,EAAE,MAAM;QAChB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,UAAU;YAC5B,SAAS,EAAE,MAAM,CAAC,gBAAgB;YAClC,UAAU,EAAE,MAAM,CAAC,eAAe;SACnC,CAAC;KACH;IACD,KAAK,EAAE;QACL,OAAO,EAAE,OAAO;QAChB,QAAQ,EAAE,aAAa;QACvB,SAAS,EAAE,CAAC,SAAgC,EAAE,EAAE,EAAE,CAAC,CAAC;YAClD,SAAS,EAAE,MAAM,CAAC,KAAK;YACvB,SAAS,EAAE,MAAM,CAAC,WAAW;YAC7B,UAAU,EAAE,MAAM,CAAC,UAAU;SAC9B,CAAC;KACH;CACO,CAAC;AAEX,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAwB,EACjH,GAAiC,EACjC,EAAE;IACF,OAAO,CACL,gCACE,GAAG,EAAE,GAAmC,EACxC,SAAS,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,CAAC,gBACvC,SAAS,EACrB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,mBACH,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,mBAChC,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,iBACjC,MAAM;QAEnB,oBAAC,YAAY,IAAC,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,CACrD,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAQF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAoB,EAAE,GAA+B,EAAE,EAAE;IACvF,OAAO,CACL,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;QACrC,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,OAAO,GAChB,CACG,CACR,CAAC;AACJ,CAAC,CACF,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport clsx from 'clsx';\nimport React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/internal';\nimport InternalIcon from '../../icon/internal';\nimport { AppLayoutProps } from '../interfaces';\nimport { AppLayoutButtonProps } from './interfaces';\nimport styles from './styles.css.js';\n\nexport const togglesConfig = {\n  navigation: {\n    TagName: 'nav',\n    iconName: 'menu',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.navigation,\n      openLabel: labels.navigationToggle,\n      closeLabel: labels.navigationClose,\n    }),\n  },\n  tools: {\n    TagName: 'aside',\n    iconName: 'status-info',\n    getLabels: (labels: AppLayoutProps.Labels = {}) => ({\n      mainLabel: labels.tools,\n      openLabel: labels.toolsToggle,\n      closeLabel: labels.toolsClose,\n    }),\n  },\n} as const;\n\nexport const ToggleButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, testId, onClick, badge }: AppLayoutButtonProps,\n    ref: React.Ref<{ focus(): void }>\n  ) => {\n    return (\n      <button\n        ref={ref as React.Ref<HTMLButtonElement>}\n        className={clsx(className, styles['toggle-button'])}\n        aria-label={ariaLabel}\n        type=\"button\"\n        onClick={onClick}\n        disabled={disabled}\n        aria-expanded={ariaExpanded ? undefined : false}\n        aria-haspopup={ariaExpanded ? undefined : true}\n        data-testid={testId}\n      >\n        <InternalIcon svg={iconSvg} name={iconName} badge={badge} />\n      </button>\n    );\n  }\n);\n\ninterface CloseButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  onClick: () => void;\n}\n\nexport const CloseButton = React.forwardRef(\n  ({ className, ariaLabel, onClick }: CloseButtonProps, ref: React.Ref<ButtonProps.Ref>) => {\n    return (\n      <span className={styles['close-button']}>\n        <InternalButton\n          ref={ref}\n          className={className}\n          ariaLabel={ariaLabel}\n          variant=\"icon\"\n          formAction=\"none\"\n          iconName=\"close\"\n          onClick={onClick}\n        />\n      </span>\n    );\n  }\n);\n"]}

package/app-layout/toggles/interfaces.d.ts

@@ -9,5 +9,6 @@ export interface AppLayoutButtonProps {
     onClick?: () => void;
     disabled?: boolean;
     testId?: string;
+    badge?: boolean;
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/app-layout/toggles/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB"}

package/app-layout/toggles/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/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 { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  ariaExpanded?: boolean;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  testId?: string;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/toggles/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 { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  ariaExpanded?: boolean;\n  iconName?: IconProps.Name;\n  iconSvg?: React.ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  testId?: string;\n  badge?: boolean;\n}\n"]}

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { InternalDrawerProps } from '../drawer/interfaces';
+import { AppLayoutState } from '../defaults';
+import { AppLayoutProps } from '../interfaces';
+export declare const TOOLS_DRAWER_ID = "awsui-internal-tools";
+interface ToolsProps {
+    toolsHide: boolean | undefined;
+    toolsOpen: boolean | undefined;
+    toolsWidth: number;
+    tools: React.ReactNode | undefined;
+    ariaLabels: AppLayoutProps.Labels | undefined;
+}
+export declare function useDrawers({ drawers: ownDrawers, __disableRuntimeDrawers: disableRuntimeDrawers, }: InternalDrawerProps & {
+    __disableRuntimeDrawers?: boolean;
+}, toolsProps: ToolsProps, defaults: AppLayoutState): {
+    ariaLabel: string | undefined;
+    overflowAriaLabel: string | undefined;
+    drawers: import("../drawer/interfaces").DrawerItem[];
+    activeDrawer: import("../drawer/interfaces").DrawerItem | undefined;
+    activeDrawerId: string | undefined;
+    activeDrawerSize: number;
+    onActiveDrawerChange: (newDrawerId: string | undefined) => void;
+    onActiveDrawerResize: ({ id, size }: {
+        id: string;
+        size: number;
+    }) => void;
+};
+export {};
+//# sourceMappingURL=use-drawers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-drawers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawers.ts"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAM7C,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;AA8CD,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,EACtB,QAAQ,EAAE,cAAc;;;;;;;wCAiBqC,MAAM,GAAG,SAAS;;YAa7B,MAAM;cAAQ,MAAM;;EAiBvE"}

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

@@ -0,0 +1,87 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useState } from 'react';
+import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
+import { useMobile } from '../../internal/hooks/use-mobile';
+import { useControllable } from '../../internal/hooks/use-controllable';
+import { fireNonCancelableEvent } from '../../internal/events';
+import { awsuiPluginsInternal } from '../../internal/plugins/api';
+import { convertRuntimeDrawers } from '../runtime-api';
+import { togglesConfig } from '../toggles';
+export const TOOLS_DRAWER_ID = 'awsui-internal-tools';
+function getToolsDrawerItem(props) {
+    // TODO: remove props.tools check, because it is incompatible with no-drawers behavior
+    if (props.toolsHide || !props.tools) {
+        return null;
+    }
+    const { iconName, getLabels } = togglesConfig.tools;
+    const { mainLabel, closeLabel, openLabel } = getLabels(props.ariaLabels);
+    return {
+        id: TOOLS_DRAWER_ID,
+        content: props.tools,
+        resizable: false,
+        ariaLabels: {
+            triggerButton: openLabel,
+            closeButton: closeLabel,
+            content: mainLabel,
+        },
+        trigger: {
+            iconName: iconName,
+        },
+    };
+}
+function useRuntimeDrawers(disableRuntimeDrawers, onActiveDrawerChange) {
+    const [runtimeDrawers, setRuntimeDrawers] = useState({ before: [], after: [] });
+    useEffect(() => {
+        if (disableRuntimeDrawers) {
+            return;
+        }
+        const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {
+            setRuntimeDrawers(convertRuntimeDrawers(drawers));
+        });
+        return () => {
+            unsubscribe();
+            setRuntimeDrawers({ before: [], after: [] });
+        };
+    }, [disableRuntimeDrawers, onActiveDrawerChange]);
+    return runtimeDrawers;
+}
+export function useDrawers({ drawers: ownDrawers, __disableRuntimeDrawers: disableRuntimeDrawers, }, toolsProps, defaults) {
+    var _a, _b, _c;
+    const isMobile = useMobile();
+    const toolsDrawer = getToolsDrawerItem(toolsProps);
+    const [activeDrawerId, setActiveDrawerId] = useControllable(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.activeDrawerId, ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.onChange, !isMobile && !toolsProps.toolsHide && toolsProps.toolsOpen && defaults.toolsOpen ? TOOLS_DRAWER_ID : undefined, {
+        componentName: 'AppLayout',
+        controlledProp: 'activeDrawerId',
+        changeHandler: 'onChange',
+    });
+    const [drawerSizes, setDrawerSizes] = useState({});
+    const onActiveDrawerChange = useStableCallback((newDrawerId) => {
+        setActiveDrawerId(newDrawerId);
+        fireNonCancelableEvent(ownDrawers === null || ownDrawers === void 0 ? void 0 : ownDrawers.onChange, newDrawerId);
+    });
+    const runtimeDrawers = useRuntimeDrawers(disableRuntimeDrawers, 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);
+    }
+    const activeDrawer = combinedDrawers.find(drawer => drawer.id === activeDrawerId);
+    const activeDrawerIdResolved = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id; // only defined when corresponding drawer exists
+    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,
+        drawers: combinedDrawers,
+        activeDrawer,
+        activeDrawerId: activeDrawerIdResolved,
+        activeDrawerSize: activeDrawerIdResolved
+            ? (_c = (_b = drawerSizes[activeDrawerIdResolved]) !== null && _b !== void 0 ? _b : activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _c !== void 0 ? _c : toolsProps.toolsWidth
+            : toolsProps.toolsWidth,
+        onActiveDrawerChange,
+        onActiveDrawerResize,
+    };
+}
+//# sourceMappingURL=use-drawers.js.map

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

@@ -0,0 +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, useState } from 'react';\nimport { useStableCallback } from '@cloudscape-design/component-toolkit/internal';\nimport { InternalDrawerProps } from '../drawer/interfaces';\nimport { AppLayoutState } from '../defaults';\nimport { useMobile } from '../../internal/hooks/use-mobile';\nimport { useControllable } from '../../internal/hooks/use-controllable';\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport { awsuiPluginsInternal } from '../../internal/plugins/api';\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  // TODO: remove props.tools check, because it is incompatible with no-drawers behavior\n  if (props.toolsHide || !props.tools) {\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  onActiveDrawerChange: (id: string | undefined) => void\n) {\n  const [runtimeDrawers, setRuntimeDrawers] = useState<DrawersLayout>({ before: [], after: [] });\n\n  useEffect(() => {\n    if (disableRuntimeDrawers) {\n      return;\n    }\n    const unsubscribe = awsuiPluginsInternal.appLayout.onDrawersRegistered(drawers => {\n      setRuntimeDrawers(convertRuntimeDrawers(drawers));\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  defaults: AppLayoutState\n) {\n  const isMobile = useMobile();\n  const toolsDrawer = getToolsDrawerItem(toolsProps);\n\n  const [activeDrawerId, setActiveDrawerId] = useControllable(\n    ownDrawers?.activeDrawerId,\n    ownDrawers?.onChange,\n    !isMobile && !toolsProps.toolsHide && toolsProps.toolsOpen && defaults.toolsOpen ? TOOLS_DRAWER_ID : 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, onActiveDrawerChange);\n  const combinedDrawers = [...runtimeDrawers.before, ...(ownDrawers?.items ?? []), ...runtimeDrawers.after];\n  if (toolsDrawer && combinedDrawers.length > 0) {\n    combinedDrawers.unshift(toolsDrawer);\n  }\n  const activeDrawer = combinedDrawers.find(drawer => drawer.id === activeDrawerId);\n  const activeDrawerIdResolved = activeDrawer?.id; // only defined when corresponding drawer exists\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"]}

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

@@ -1,14 +1,18 @@
 import React from 'react';
-import { InternalDrawerProps } from '../drawer/interfaces';
+import { DrawerItem } from '../drawer/interfaces';
 import { DrawerFocusControlRefs } from './use-drawer-focus-control';
 export interface DrawerResizeProps {
-    activeDrawerId?: string | null;
-    drawers: InternalDrawerProps['drawers'];
+    activeDrawer: DrawerItem | undefined;
+    activeDrawerSize: number;
+    onActiveDrawerResize: (detail: {
+        id: string;
+        size: number;
+    }) => void;
     drawersRefs: DrawerFocusControlRefs;
     isToolsOpen: boolean;
     drawersMaxWidth: number;
 }
-declare function useResize(drawerRefObject: React.RefObject<HTMLDivElement>, drawerResizeProps: DrawerResizeProps): {
+declare function useResize(drawerRefObject: React.RefObject<HTMLDivElement>, { activeDrawer, activeDrawerSize, onActiveDrawerResize, drawersRefs, isToolsOpen, drawersMaxWidth }: DrawerResizeProps): {
     resizeHandle: JSX.Element;
     drawerSize: number;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"use-resize.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAC;AASzE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAK3D,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGpE,MAAM,WAAW,iBAAiB;IAChC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACxC,WAAW,EAAE,sBAAsB,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAAC,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAAE,iBAAiB,EAAE,iBAAiB;;;EAgGxG;AAED,eAAe,SAAS,CAAC"}
+{"version":3,"file":"use-resize.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-resize.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAQnD,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAKlD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4BAA4B,CAAC;AAGpE,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,UAAU,GAAG,SAAS,CAAC;IACrC,gBAAgB,EAAE,MAAM,CAAC;IACzB,oBAAoB,EAAE,CAAC,MAAM,EAAE;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACrE,WAAW,EAAE,sBAAsB,CAAC;IACpC,WAAW,EAAE,OAAO,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,iBAAS,SAAS,CAChB,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,EAChD,EAAE,YAAY,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,EAAE,iBAAiB;;;EA6DvH;AAED,eAAe,SAAS,CAAC"}

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

@@ -1,7 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { fireNonCancelableEvent } from '../../internal/events';
+import React, { useState, useEffect } from 'react';
 import clsx from 'clsx';
 import ResizeHandler from '../../split-panel/icons/resize-handler';
 import { getLimitedValue } from '../../split-panel/utils/size-utils';
@@ -10,37 +9,12 @@ import { useKeyboardEvents } from './use-keyboard-events';
 import splitPanelStyles from '../../split-panel/styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 import styles from '../visual-refresh/styles.css.js';
-function useResize(drawerRefObject, drawerResizeProps) {
+function useResize(drawerRefObject, { activeDrawer, activeDrawerSize, onActiveDrawerResize, drawersRefs, isToolsOpen, drawersMaxWidth }) {
     var _a, _b;
-    const { activeDrawerId, drawers, drawersRefs, isToolsOpen, drawersMaxWidth } = drawerResizeProps;
-    const activeDrawer = (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items.find(item => item.id === activeDrawerId)) !== null && _a !== void 0 ? _a : null;
-    const drawerItems = useMemo(() => (drawers === null || drawers === void 0 ? void 0 : drawers.items) || [], [drawers === null || drawers === void 0 ? void 0 : drawers.items]);
     const toolsWidth = 290;
-    const MIN_WIDTH = (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) && activeDrawer.defaultSize < 290 ? activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize : 290;
+    const MIN_WIDTH = Math.min((_a = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.defaultSize) !== null && _a !== void 0 ? _a : Number.POSITIVE_INFINITY, toolsWidth);
     const [relativeSize, setRelativeSize] = useState(0);
-    const getDrawerItemSizes = useCallback(() => {
-        const sizes = {};
-        if (!drawerItems) {
-            return {};
-        }
-        for (const item of drawerItems) {
-            if (item.defaultSize) {
-                sizes[item.id] = item.defaultSize;
-            }
-        }
-        return sizes;
-    }, [drawerItems]);
-    const [drawerItemSizes, setDrawerItemSizes] = useState(() => getDrawerItemSizes());
-    const drawerSize = !activeDrawerId && !isToolsOpen
-        ? 0
-        : activeDrawerId && drawerItemSizes[activeDrawerId]
-            ? drawerItemSizes[activeDrawerId]
-            : toolsWidth;
-    useEffect(() => {
-        // Ensure we only set new drawer items by performing a shallow merge
-        // of the latest drawer item sizes, and previous drawer item sizes.
-        setDrawerItemSizes(prev => (Object.assign(Object.assign({}, getDrawerItemSizes()), prev)));
-    }, [getDrawerItemSizes]);
+    const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;
     useEffect(() => {
         // effects are called inside out in the components tree
         // wait one frame to allow app-layout to complete its calculations
@@ -50,18 +24,12 @@ function useResize(drawerRefObject, drawerResizeProps) {
         });
         return () => cancelAnimationFrame(handle);
     }, [drawerSize, drawersMaxWidth, MIN_WIDTH]);
-    const drawerResize = (resizeDetail) => {
-        const drawerItem = drawers === null || drawers === void 0 ? void 0 : drawers.items.find(item => item.id === resizeDetail.id);
-        fireNonCancelableEvent(drawerItem === null || drawerItem === void 0 ? void 0 : drawerItem.onResize, resizeDetail);
-        fireNonCancelableEvent(drawers === null || drawers === void 0 ? void 0 : drawers.onResize, resizeDetail);
-        setDrawerItemSizes(Object.assign(Object.assign({}, drawerItemSizes), { [resizeDetail.id]: resizeDetail.size }));
-    };
     const setSidePanelWidth = (width) => {
         const maxWidth = drawersMaxWidth;
         const size = getLimitedValue(MIN_WIDTH, width, maxWidth);
         const id = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id;
         if (id && maxWidth >= MIN_WIDTH) {
-            drawerResize({ size, id });
+            onActiveDrawerResize({ size, id });
         }
     };
     const position = 'side';

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

@@ -1 +1 @@
-{"version":3,"file":"use-resize.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-resize.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect, useMemo, useCallback } from 'react';\n\nimport { fireNonCancelableEvent } from '../../internal/events';\nimport clsx from 'clsx';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from './use-pointer-events';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { InternalDrawerProps } from '../drawer/interfaces';\n\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from '../visual-refresh/styles.css.js';\nimport { DrawerFocusControlRefs } from './use-drawer-focus-control';\nimport { SizeControlProps } from './interfaces';\n\nexport interface DrawerResizeProps {\n  activeDrawerId?: string | null;\n  drawers: InternalDrawerProps['drawers'];\n  drawersRefs: DrawerFocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n}\n\nfunction useResize(drawerRefObject: React.RefObject<HTMLDivElement>, drawerResizeProps: DrawerResizeProps) {\n  const { activeDrawerId, drawers, drawersRefs, isToolsOpen, drawersMaxWidth } = drawerResizeProps;\n\n  const activeDrawer = drawers?.items.find(item => item.id === activeDrawerId) ?? null;\n  const drawerItems = useMemo(() => drawers?.items || [], [drawers?.items]);\n  const toolsWidth = 290;\n  const MIN_WIDTH = activeDrawer?.defaultSize && activeDrawer.defaultSize < 290 ? activeDrawer?.defaultSize : 290;\n  const [relativeSize, setRelativeSize] = useState(0);\n  const getDrawerItemSizes = useCallback(() => {\n    const sizes: { [id: string]: number } = {};\n    if (!drawerItems) {\n      return {};\n    }\n\n    for (const item of drawerItems) {\n      if (item.defaultSize) {\n        sizes[item.id] = item.defaultSize;\n      }\n    }\n    return sizes;\n  }, [drawerItems]);\n  const [drawerItemSizes, setDrawerItemSizes] = useState(() => getDrawerItemSizes());\n\n  const drawerSize =\n    !activeDrawerId && !isToolsOpen\n      ? 0\n      : activeDrawerId && drawerItemSizes[activeDrawerId]\n      ? drawerItemSizes[activeDrawerId]\n      : toolsWidth;\n\n  useEffect(() => {\n    // Ensure we only set new drawer items by performing a shallow merge\n    // of the latest drawer item sizes, and previous drawer item sizes.\n    setDrawerItemSizes(prev => ({ ...getDrawerItemSizes(), ...prev }));\n  }, [getDrawerItemSizes]);\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - MIN_WIDTH) / (maxSize - MIN_WIDTH)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, MIN_WIDTH]);\n\n  const drawerResize = (resizeDetail: { size: number; id: string }) => {\n    const drawerItem = drawers?.items.find(item => item.id === resizeDetail.id);\n    fireNonCancelableEvent(drawerItem?.onResize, resizeDetail);\n    fireNonCancelableEvent(drawers?.onResize, resizeDetail);\n    setDrawerItemSizes({ ...drawerItemSizes, [resizeDetail.id]: resizeDetail.size });\n  };\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= MIN_WIDTH) {\n      drawerResize({ size, id });\n    }\n  };\n\n  const position = 'side';\n  const setBottomPanelHeight = () => {};\n\n  const sizeControlProps: SizeControlProps = {\n    position,\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    setSidePanelWidth,\n    setBottomPanelHeight,\n    hasTransitions: true,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <div\n      ref={drawersRefs.slider}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={relativeSize}\n      className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    >\n      <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n    </div>\n  );\n\n  return { resizeHandle: <div className={styles['drawer-slider']}>{resizeHandle}</div>, drawerSize };\n}\n\nexport default useResize;\n"]}
+{"version":3,"file":"use-resize.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-resize.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState, useEffect } from 'react';\n\nimport clsx from 'clsx';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from './use-pointer-events';\nimport { useKeyboardEvents } from './use-keyboard-events';\nimport { DrawerItem } from '../drawer/interfaces';\n\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\nimport styles from '../visual-refresh/styles.css.js';\nimport { DrawerFocusControlRefs } from './use-drawer-focus-control';\nimport { SizeControlProps } from './interfaces';\n\nexport interface DrawerResizeProps {\n  activeDrawer: DrawerItem | undefined;\n  activeDrawerSize: number;\n  onActiveDrawerResize: (detail: { id: string; size: number }) => void;\n  drawersRefs: DrawerFocusControlRefs;\n  isToolsOpen: boolean;\n  drawersMaxWidth: number;\n}\n\nfunction useResize(\n  drawerRefObject: React.RefObject<HTMLDivElement>,\n  { activeDrawer, activeDrawerSize, onActiveDrawerResize, drawersRefs, isToolsOpen, drawersMaxWidth }: DrawerResizeProps\n) {\n  const toolsWidth = 290;\n  const MIN_WIDTH = Math.min(activeDrawer?.defaultSize ?? Number.POSITIVE_INFINITY, toolsWidth);\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  const drawerSize = !activeDrawer && !isToolsOpen ? 0 : activeDrawerSize;\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = drawersMaxWidth;\n      setRelativeSize(((drawerSize - MIN_WIDTH) / (maxSize - MIN_WIDTH)) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [drawerSize, drawersMaxWidth, MIN_WIDTH]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = drawersMaxWidth;\n    const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (id && maxWidth >= MIN_WIDTH) {\n      onActiveDrawerResize({ size, id });\n    }\n  };\n\n  const position = 'side';\n  const setBottomPanelHeight = () => {};\n\n  const sizeControlProps: SizeControlProps = {\n    position,\n    panelRef: drawerRefObject,\n    handleRef: drawersRefs.slider,\n    setSidePanelWidth,\n    setBottomPanelHeight,\n    hasTransitions: true,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <div\n      ref={drawersRefs.slider}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={relativeSize}\n      className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    >\n      <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n    </div>\n  );\n\n  return { resizeHandle: <div className={styles['drawer-slider']}>{resizeHandle}</div>, drawerSize };\n}\n\nexport default useResize;\n"]}

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

@@ -4,17 +4,19 @@ import { FocusControlRefs } from '../utils/use-focus-control';
 import { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';
 import { SplitPanelFocusControlRefs } from '../utils/use-split-panel-focus-control';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
-import { InternalDrawerProps } from '../drawer/interfaces';
+import { DrawerItem } from '../drawer/interfaces';
 interface AppLayoutInternals extends AppLayoutProps {
-    activeDrawerId?: string | null;
-    drawers?: InternalDrawerProps['drawers'];
+    activeDrawerId: string | undefined;
+    drawers: Array<DrawerItem>;
+    drawersAriaLabel: string | undefined;
+    drawersOverflowAriaLabel: string | undefined;
     drawersRefs: DrawerFocusControlRefs;
     drawerSize: number;
     drawersMaxWidth: number;
     drawerRef: React.Ref<HTMLElement>;
     resizeHandle: React.ReactElement;
     drawersTriggerCount: number;
-    handleDrawersClick: (activeDrawerId: string | null, skipFocusControl?: boolean) => void;
+    handleDrawersClick: (activeDrawerId: string | undefined, skipFocusControl?: boolean) => void;
     handleSplitPanelClick: () => void;
     handleNavigationClick: (isOpen: boolean) => void;
     handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;

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":"AAEA,OAAO,KASN,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,OAAO,EAAE,gBAAgB,EAAmB,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,sBAAsB,EAAyB,MAAM,mCAAmC,CAAC;AAKlG,OAAO,EAAE,0BAA0B,EAA6B,MAAM,wCAAwC,CAAC;AAC/G,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAC;AAGvF,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAO3D,UAAU,kBAAmB,SAAQ,cAAc;IACjD,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,CAAC,EAAE,mBAAmB,CAAC,SAAS,CAAC,CAAC;IACzC,WAAW,EAAE,sBAAsB,CAAC;IACpC,UAAU,EAAE,MAAM,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,SAAS,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAClC,YAAY,EAAE,KAAK,CAAC,YAAY,CAAC;IACjC,mBAAmB,EAAE,MAAM,CAAC;IAC5B,kBAAkB,EAAE,CAAC,cAAc,EAAE,MAAM,GAAG,IAAI,EAAE,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACxF,qBAAqB,EAAE,MAAM,IAAI,CAAC;IAClC,qBAAqB,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,iCAAiC,EAAE,CAAC,MAAM,EAAE,cAAc,CAAC,qBAAqB,KAAK,IAAI,CAAC;IAC1F,sBAAsB,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC3D,gBAAgB,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,gBAAgB,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACvE,oBAAoB,EAAE,OAAO,CAAC;IAC9B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,wBAAwB,EAAE,OAAO,CAAC;IAClC,uBAAuB,EAAE,OAAO,CAAC;IACjC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,mBAAmB,EAAE,OAAO,CAAC;IAC7B,2BAA2B,EAAE,OAAO,CAAC;IACrC,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,0BAA0B,EAAE,OAAO,CAAC;IACpC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,EAAE,OAAO,CAAC;IACrB,aAAa,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IACtC,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,cAAc,EAAE,gBAAgB,CAAC;IACjC,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,sBAAsB,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACjD,yBAAyB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,iCAAiC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC3D,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,cAAc,CAAC,kBAAkB,CAAC;IACtD,sBAAsB,EAAE,MAAM,CAAC;IAC/B,8BAA8B,EAAE,MAAM,CAAC;IACvC,gBAAgB,EAAE,yBAAyB,CAAC;IAC5C,mBAAmB,EAAE,CAAC,MAAM,EAAE,yBAAyB,KAAK,IAAI,CAAC;IACjE,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,0BAA0B,CAAC;IAC3C,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AASD,UAAU,+BAAgC,SAAQ,cAAc;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,qBAAqB,uBAMpC;AAED,eAAO,MAAM,0BAA0B,4GAojBtC,CAAC"}
+{"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

@@ -20,6 +20,7 @@ import useResize from '../utils/use-resize';
 import styles from './styles.css.js';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import useBackgroundOverlap from './use-background-overlap';
+import { useDrawers } from '../utils/use-drawers';
 /**
  * The default values are destructured in the context instantiation to
  * prevent downstream Typescript errors. This could likely be replaced
@@ -34,7 +35,7 @@ export function useAppLayoutInternals() {
     return ctx;
 }
 export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
-    var _b, _c, _d, _e;
+    var _b, _c, _d;
     var { toolsHide, toolsOpen: controlledToolsOpen, navigationHide, navigationOpen: controlledNavigationOpen, contentType = 'default', headerSelector = '#b #h', footerSelector = '#b #h', children, splitPanel } = _a, props = __rest(_a, ["toolsHide", "toolsOpen", "navigationHide", "navigationOpen", "contentType", "headerSelector", "footerSelector", "children", "splitPanel"]);
     const isMobile = useMobile();
     if (isDevelopment) {
@@ -225,50 +226,32 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
         setSplitPanelLastInteraction({ type: 'position' });
         fireNonCancelableEvent(props.onSplitPanelPreferencesChange, detail);
     }, [props.onSplitPanelPreferencesChange, setSplitPanelPreferences, setSplitPanelLastInteraction]);
-    /**
-     * The activeDrawerWidth is required in JavaScript to acccurately calculate whether a SplitPanel
-     * in the side position should be forced to the bottom based on available horiziontal space.
-     *
-     * The handleDrawersClick will either open a new drawer or close the currently open drawer by setting
-     * the activeDrawerId value. The active drawer can also be closed if a user clicks the Tools trigger
-     * button. This will skip the focus handling because the focus should be going to the Tools close
-     * button and not one of the drawers trigger buttons.
-     *
-     * The drawersTriggerCount is computed in order to determine whether the triggers should be persistent
-     * in the UI when a drawer is open. The trigger button container is suppressed when a drawer is open
-     * and their is only one trigger button.
-     *
-     * The hasDrawerViewportOverlay property is used to determine if any drawer is obscuring the entire
-     * viewport. This currently applies to Navigation, Tools, and Drawers in mobile viewports.
-     */
-    const drawers = props.drawers;
-    const [activeDrawerId, setActiveDrawerId] = useControllable(drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId, drawers === null || drawers === void 0 ? void 0 : drawers.onChange, null, {
-        componentName: 'AppLayout',
-        controlledProp: 'drawers.activeDrawerId',
-        changeHandler: 'onChange',
-    });
+    const _e = useDrawers(props, {
+        ariaLabels: props.ariaLabels,
+        toolsHide,
+        toolsOpen: isToolsOpen,
+        tools: props.tools,
+        toolsWidth,
+    }, contentTypeDefaults), { drawers, activeDrawer, activeDrawerId, onActiveDrawerChange, onActiveDrawerResize, activeDrawerSize } = _e, drawersProps = __rest(_e, ["drawers", "activeDrawer", "activeDrawerId", "onActiveDrawerChange", "onActiveDrawerResize", "activeDrawerSize"]);
     const [drawersMaxWidth, setDrawersMaxWidth] = useState(toolsWidth);
-    const activeDrawer = drawers === null || drawers === void 0 ? void 0 : drawers.items.find(drawer => drawer.id === activeDrawerId);
-    const { refs: drawersRefs, setFocus: focusDrawersButtons, loseFocus: loseDrawersFocus, setLastInteraction: setDrawerLastInteraction, } = useDrawerFocusControl([activeDrawerId, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable], activeDrawerId !== undefined, true);
+    const { refs: drawersRefs, setFocus: focusDrawersButtons, loseFocus: loseDrawersFocus, setLastInteraction: setDrawerLastInteraction, } = useDrawerFocusControl([activeDrawerId, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable], true, true);
     const drawerRef = useRef(null);
     const { resizeHandle, drawerSize } = useResize(drawerRef, {
-        activeDrawerId,
-        drawers,
+        onActiveDrawerResize,
+        activeDrawerSize,
+        activeDrawer,
         drawersRefs,
         isToolsOpen,
         drawersMaxWidth,
     });
-    const handleDrawersClick = useCallback(function handleDrawersChange(id, skipFocusControl) {
-        const newActiveDrawerId = id !== activeDrawerId ? id : null;
-        setActiveDrawerId(newActiveDrawerId);
+    const handleDrawersClick = (id, skipFocusControl) => {
+        const newActiveDrawerId = id !== activeDrawerId ? id : undefined;
+        onActiveDrawerChange(newActiveDrawerId);
         !skipFocusControl && focusDrawersButtons();
-        fireNonCancelableEvent(drawers === null || drawers === void 0 ? void 0 : drawers.onChange, newActiveDrawerId);
         setDrawerLastInteraction({ type: activeDrawerId ? 'close' : 'open' });
-    }, [activeDrawerId, drawers === null || drawers === void 0 ? void 0 : drawers.onChange, focusDrawersButtons, setActiveDrawerId, setDrawerLastInteraction]);
-    const drawersTriggerCount = ((_e = drawers === null || drawers === void 0 ? void 0 : drawers.items.length) !== null && _e !== void 0 ? _e : 0) +
-        (splitPanelDisplayed && splitPanelPosition === 'side' ? 1 : 0) +
-        (!toolsHide ? 1 : 0);
-    const hasOpenDrawer = activeDrawerId !== null ||
+    };
+    const drawersTriggerCount = drawers.length + (splitPanelDisplayed && splitPanelPosition === 'side' ? 1 : 0) + (!toolsHide ? 1 : 0);
+    const hasOpenDrawer = activeDrawerId !== undefined ||
         isToolsOpen ||
         (splitPanelDisplayed && splitPanelPosition === 'side' && isSplitPanelOpen);
     const hasDrawerViewportOverlay = isMobile && (!!activeDrawerId || (!navigationHide && isNavigationOpen) || (!toolsHide && isToolsOpen));
@@ -381,8 +364,7 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
     ]);
     return (React.createElement(AppLayoutInternalsContext.Provider, { value: Object.assign(Object.assign({}, props), { activeDrawerId,
             contentType,
-            drawers,
-            drawersRefs,
+            drawers, drawersAriaLabel: drawersProps.ariaLabel, drawersOverflowAriaLabel: drawersProps.overflowAriaLabel, drawersRefs,
             drawersMaxWidth,
             drawerSize,
             drawerRef,