@cloudscape-design/components 3.0.245 → 3.0.247

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

@@ -2,18 +2,23 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_1fj9k_avnjw_5",
-  "navigation": "awsui_navigation_1fj9k_avnjw_9",
-  "navigation-toggle": "awsui_navigation-toggle_1fj9k_avnjw_13",
-  "navigation-close": "awsui_navigation-close_1fj9k_avnjw_17",
-  "content": "awsui_content_1fj9k_avnjw_21",
-  "notifications": "awsui_notifications_1fj9k_avnjw_25",
-  "breadcrumbs": "awsui_breadcrumbs_1fj9k_avnjw_29",
-  "tools": "awsui_tools_1fj9k_avnjw_33",
-  "tools-close": "awsui_tools-close_1fj9k_avnjw_37",
-  "tools-toggle": "awsui_tools-toggle_1fj9k_avnjw_41",
-  "drawer-closed": "awsui_drawer-closed_1fj9k_avnjw_45",
-  "mobile-bar": "awsui_mobile-bar_1fj9k_avnjw_49",
-  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_avnjw_53"
+  "root": "awsui_root_1fj9k_tjzk8_5",
+  "navigation": "awsui_navigation_1fj9k_tjzk8_9",
+  "navigation-toggle": "awsui_navigation-toggle_1fj9k_tjzk8_13",
+  "navigation-close": "awsui_navigation-close_1fj9k_tjzk8_17",
+  "content": "awsui_content_1fj9k_tjzk8_21",
+  "notifications": "awsui_notifications_1fj9k_tjzk8_25",
+  "breadcrumbs": "awsui_breadcrumbs_1fj9k_tjzk8_29",
+  "tools": "awsui_tools_1fj9k_tjzk8_33",
+  "tools-close": "awsui_tools-close_1fj9k_tjzk8_37",
+  "tools-toggle": "awsui_tools-toggle_1fj9k_tjzk8_41",
+  "drawer-closed": "awsui_drawer-closed_1fj9k_tjzk8_45",
+  "mobile-bar": "awsui_mobile-bar_1fj9k_tjzk8_49",
+  "disable-body-scroll-root": "awsui_disable-body-scroll-root_1fj9k_tjzk8_53",
+  "drawers-desktop-triggers-container": "awsui_drawers-desktop-triggers-container_1fj9k_tjzk8_57",
+  "drawers-mobile-triggers-container": "awsui_drawers-mobile-triggers-container_1fj9k_tjzk8_61",
+  "drawers-trigger": "awsui_drawers-trigger_1fj9k_tjzk8_65",
+  "active-drawer": "awsui_active-drawer_1fj9k_tjzk8_69",
+  "active-drawer-close-button": "awsui_active-drawer-close-button_1fj9k_tjzk8_73"
 };
   

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,eAAe,8FAoB3B,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FAevB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAC;AAGpD,eAAO,MAAM,aAAa;;;;sCAIF,eAAe,MAAM;;;;;;;;;sCASrB,eAAe,MAAM;;;;;;CAMnC,CAAC;AAEX,eAAO,MAAM,eAAe,8FAqB3B,CAAC;AAEF,UAAU,gBAAgB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,0FAevB,CAAC"}

package/app-layout/toggles/index.js

@@ -23,8 +23,8 @@ export const togglesConfig = {
         }),
     },
 };
-export const AppLayoutButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, disabled, onClick }, ref) => {
-    return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, disabled: disabled, ariaExpanded: ariaExpanded ? undefined : false, __nativeAttributes: { 'aria-haspopup': ariaExpanded ? undefined : true } }));
+export const AppLayoutButton = React.forwardRef(({ className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, onClick }, ref) => {
+    return (React.createElement(InternalButton, { ref: ref, className: className, ariaLabel: ariaLabel, variant: "icon", formAction: "none", onClick: onClick, iconName: iconName, iconSvg: iconSvg, disabled: disabled, ariaExpanded: ariaExpanded ? undefined : false, __nativeAttributes: { 'aria-haspopup': ariaExpanded ? undefined : true } }));
 });
 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,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,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,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAwB,EACzF,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC9C,kBAAkB,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GACxE,CACH,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,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,SAAS,EACpB,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 React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/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 AppLayoutButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, disabled, onClick }: AppLayoutButtonProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    return (\n      <InternalButton\n        ref={ref}\n        className={className}\n        ariaLabel={ariaLabel}\n        variant=\"icon\"\n        formAction=\"none\"\n        onClick={onClick}\n        iconName={iconName}\n        disabled={disabled}\n        ariaExpanded={ariaExpanded ? undefined : false}\n        __nativeAttributes={{ 'aria-haspopup': ariaExpanded ? undefined : true }}\n      />\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        <AppLayoutButton\n          ref={ref}\n          className={className}\n          ariaExpanded={true}\n          ariaLabel={ariaLabel}\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,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAGvD,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,eAAe,GAAG,KAAK,CAAC,UAAU,CAC7C,CACE,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAwB,EAClG,GAA+B,EAC/B,EAAE;IACF,OAAO,CACL,oBAAC,cAAc,IACb,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,UAAU,EAAC,MAAM,EACjB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,EAC9C,kBAAkB,EAAE,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EAAE,GACxE,CACH,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,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,IAAI,EAClB,SAAS,EAAE,SAAS,EACpB,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 React from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { InternalButton } from '../../button/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 AppLayoutButton = React.forwardRef(\n  (\n    { className, ariaLabel, ariaExpanded, iconName, iconSvg, disabled, onClick }: AppLayoutButtonProps,\n    ref: React.Ref<ButtonProps.Ref>\n  ) => {\n    return (\n      <InternalButton\n        ref={ref}\n        className={className}\n        ariaLabel={ariaLabel}\n        variant=\"icon\"\n        formAction=\"none\"\n        onClick={onClick}\n        iconName={iconName}\n        iconSvg={iconSvg}\n        disabled={disabled}\n        ariaExpanded={ariaExpanded ? undefined : false}\n        __nativeAttributes={{ 'aria-haspopup': ariaExpanded ? undefined : true }}\n      />\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        <AppLayoutButton\n          ref={ref}\n          className={className}\n          ariaExpanded={true}\n          ariaLabel={ariaLabel}\n          iconName=\"close\"\n          onClick={onClick}\n        />\n      </span>\n    );\n  }\n);\n"]}

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

@@ -1,9 +1,11 @@
+/// <reference types="react" />
 import { IconProps } from '../../icon/interfaces';
 export interface AppLayoutButtonProps {
     className?: string;
     ariaLabel: string | undefined;
     ariaExpanded?: boolean;
-    iconName: IconProps.Name;
+    iconName?: IconProps.Name;
+    iconSvg?: React.ReactNode;
     onClick: () => void;
     disabled?: boolean;
 }

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,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,EAAE,SAAS,CAAC,IAAI,CAAC;IACzB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/toggles/interfaces.ts"],"names":[],"mappings":";AAEA,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,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB"}

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 { IconProps } from '../../icon/interfaces';\n\nexport interface AppLayoutButtonProps {\n  className?: string;\n  ariaLabel: string | undefined;\n  ariaExpanded?: boolean;\n  iconName: IconProps.Name;\n  onClick: () => void;\n  disabled?: boolean;\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 { 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}\n"]}

package/app-layout/utils/use-drawer-focus-control.d.ts

@@ -0,0 +1,21 @@
+import { DependencyList, RefObject } from 'react';
+import { ButtonProps } from '../../button/interfaces';
+export type DrawerLastInteraction = {
+    type: 'open';
+} | {
+    type: 'close';
+};
+export interface DrawerFocusControlRefs {
+    toggle: RefObject<ButtonProps.Ref>;
+    close: RefObject<ButtonProps.Ref>;
+    slider: RefObject<HTMLDivElement>;
+}
+interface FocusControlState {
+    refs: DrawerFocusControlRefs;
+    setFocus: (force?: boolean) => void;
+    loseFocus: () => void;
+    setLastInteraction: (interaction: DrawerLastInteraction) => void;
+}
+export declare function useDrawerFocusControl(dependencies: DependencyList, isOpen: boolean, restoreFocus?: boolean): FocusControlState;
+export {};
+//# sourceMappingURL=use-drawer-focus-control.d.ts.map

package/app-layout/utils/use-drawer-focus-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drawer-focus-control.d.ts","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAkC,MAAM,OAAO,CAAC;AAClF,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEtD,MAAM,MAAM,qBAAqB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAEzE,MAAM,WAAW,sBAAsB;IACrC,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACnC,KAAK,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IAClC,MAAM,EAAE,SAAS,CAAC,cAAc,CAAC,CAAC;CACnC;AAED,UAAU,iBAAiB;IACzB,IAAI,EAAE,sBAAsB,CAAC;IAC7B,QAAQ,EAAE,CAAC,KAAK,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,kBAAkB,EAAE,CAAC,WAAW,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAClE;AAED,wBAAgB,qBAAqB,CACnC,YAAY,EAAE,cAAc,EAC5B,MAAM,EAAE,OAAO,EACf,YAAY,UAAQ,GACnB,iBAAiB,CA6DnB"}

package/app-layout/utils/use-drawer-focus-control.js

@@ -0,0 +1,65 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { useEffect, useRef, useCallback } from 'react';
+export function useDrawerFocusControl(dependencies, isOpen, restoreFocus = false) {
+    const refs = {
+        toggle: useRef(null),
+        close: useRef(null),
+        slider: useRef(null),
+    };
+    const previousFocusedElement = useRef();
+    const shouldFocus = useRef(false);
+    const lastInteraction = useRef(null);
+    useEffect(() => {
+        var _a, _b, _c;
+        switch ((_a = lastInteraction.current) === null || _a === void 0 ? void 0 : _a.type) {
+            case 'open':
+                (_b = refs.slider.current) === null || _b === void 0 ? void 0 : _b.focus();
+                break;
+            case 'close':
+                (_c = refs.toggle.current) === null || _c === void 0 ? void 0 : _c.focus();
+                break;
+        }
+        lastInteraction.current = null;
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, dependencies);
+    const doFocus = () => {
+        var _a, _b;
+        if (!shouldFocus.current) {
+            return;
+        }
+        if (isOpen) {
+            previousFocusedElement.current =
+                document.activeElement !== document.body ? document.activeElement : undefined;
+            (_a = refs.close.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {
+                previousFocusedElement.current.focus();
+                previousFocusedElement.current = undefined;
+            }
+            else {
+                (_b = refs.toggle.current) === null || _b === void 0 ? void 0 : _b.focus();
+            }
+        }
+        shouldFocus.current = false;
+    };
+    // We explictly want this effect to run when only `isOpen` changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    useEffect(doFocus, [isOpen]);
+    const loseFocus = useCallback(() => {
+        previousFocusedElement.current = undefined;
+    }, []);
+    return {
+        refs,
+        setFocus: force => {
+            shouldFocus.current = true;
+            if (force && isOpen) {
+                doFocus();
+            }
+        },
+        loseFocus,
+        setLastInteraction: (interaction) => (lastInteraction.current = interaction),
+    };
+}
+//# sourceMappingURL=use-drawer-focus-control.js.map

package/app-layout/utils/use-drawer-focus-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-drawer-focus-control.js","sourceRoot":"lib/default/","sources":["app-layout/utils/use-drawer-focus-control.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAA6B,SAAS,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAkBlF,MAAM,UAAU,qBAAqB,CACnC,YAA4B,EAC5B,MAAe,EACf,YAAY,GAAG,KAAK;IAEpB,MAAM,IAAI,GAAG;QACX,MAAM,EAAE,MAAM,CAAkB,IAAI,CAAC;QACrC,KAAK,EAAE,MAAM,CAAkB,IAAI,CAAC;QACpC,MAAM,EAAE,MAAM,CAAiB,IAAI,CAAC;KACrC,CAAC;IACF,MAAM,sBAAsB,GAAG,MAAM,EAAe,CAAC;IACrD,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAClC,MAAM,eAAe,GAAG,MAAM,CAA+B,IAAI,CAAC,CAAC;IAEnE,SAAS,CAAC,GAAG,EAAE;;QACb,QAAQ,MAAA,eAAe,CAAC,OAAO,0CAAE,IAAI,EAAE;YACrC,KAAK,MAAM;gBACT,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;YACR,KAAK,OAAO;gBACV,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;gBAC7B,MAAM;SACT;QACD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;QAC/B,uDAAuD;IACzD,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,MAAM,OAAO,GAAG,GAAG,EAAE;;QACnB,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE;YACxB,OAAO;SACR;QACD,IAAI,MAAM,EAAE;YACV,sBAAsB,CAAC,OAAO;gBAC5B,QAAQ,CAAC,aAAa,KAAK,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAE,QAAQ,CAAC,aAA6B,CAAC,CAAC,CAAC,SAAS,CAAC;YACjG,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,YAAY,IAAI,sBAAsB,CAAC,OAAO,IAAI,QAAQ,CAAC,QAAQ,CAAC,sBAAsB,CAAC,OAAO,CAAC,EAAE;gBACvG,sBAAsB,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBACvC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;aAC5C;iBAAM;gBACL,MAAA,IAAI,CAAC,MAAM,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;aAC9B;SACF;QACD,WAAW,CAAC,OAAO,GAAG,KAAK,CAAC;IAC9B,CAAC,CAAC;IAEF,kEAAkE;IAClE,uDAAuD;IACvD,SAAS,CAAC,OAAO,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAE7B,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,sBAAsB,CAAC,OAAO,GAAG,SAAS,CAAC;IAC7C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,IAAI;QACJ,QAAQ,EAAE,KAAK,CAAC,EAAE;YAChB,WAAW,CAAC,OAAO,GAAG,IAAI,CAAC;YAC3B,IAAI,KAAK,IAAI,MAAM,EAAE;gBACnB,OAAO,EAAE,CAAC;aACX;QACH,CAAC;QACD,SAAS;QACT,kBAAkB,EAAE,CAAC,WAAkC,EAAE,EAAE,CAAC,CAAC,eAAe,CAAC,OAAO,GAAG,WAAW,CAAC;KACpG,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { DependencyList, RefObject, useEffect, useRef, useCallback } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\n\nexport type DrawerLastInteraction = { type: 'open' } | { type: 'close' };\n\nexport interface DrawerFocusControlRefs {\n  toggle: RefObject<ButtonProps.Ref>;\n  close: RefObject<ButtonProps.Ref>;\n  slider: RefObject<HTMLDivElement>;\n}\n\ninterface FocusControlState {\n  refs: DrawerFocusControlRefs;\n  setFocus: (force?: boolean) => void;\n  loseFocus: () => void;\n  setLastInteraction: (interaction: DrawerLastInteraction) => void;\n}\n\nexport function useDrawerFocusControl(\n  dependencies: DependencyList,\n  isOpen: boolean,\n  restoreFocus = false\n): FocusControlState {\n  const refs = {\n    toggle: useRef<ButtonProps.Ref>(null),\n    close: useRef<ButtonProps.Ref>(null),\n    slider: useRef<HTMLDivElement>(null),\n  };\n  const previousFocusedElement = useRef<HTMLElement>();\n  const shouldFocus = useRef(false);\n  const lastInteraction = useRef<DrawerLastInteraction | null>(null);\n\n  useEffect(() => {\n    switch (lastInteraction.current?.type) {\n      case 'open':\n        refs.slider.current?.focus();\n        break;\n      case 'close':\n        refs.toggle.current?.focus();\n        break;\n    }\n    lastInteraction.current = null;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, dependencies);\n\n  const doFocus = () => {\n    if (!shouldFocus.current) {\n      return;\n    }\n    if (isOpen) {\n      previousFocusedElement.current =\n        document.activeElement !== document.body ? (document.activeElement as HTMLElement) : undefined;\n      refs.close.current?.focus();\n    } else {\n      if (restoreFocus && previousFocusedElement.current && document.contains(previousFocusedElement.current)) {\n        previousFocusedElement.current.focus();\n        previousFocusedElement.current = undefined;\n      } else {\n        refs.toggle.current?.focus();\n      }\n    }\n    shouldFocus.current = false;\n  };\n\n  // We explictly want this effect to run when only `isOpen` changes\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(doFocus, [isOpen]);\n\n  const loseFocus = useCallback(() => {\n    previousFocusedElement.current = undefined;\n  }, []);\n\n  return {\n    refs,\n    setFocus: force => {\n      shouldFocus.current = true;\n      if (force && isOpen) {\n        doFocus();\n      }\n    },\n    loseFocus,\n    setLastInteraction: (interaction: DrawerLastInteraction) => (lastInteraction.current = interaction),\n  };\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":";AASA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,uBA6F7B"}
+{"version":3,"file":"app-bar.d.ts","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":";AAUA;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,uBAgG7B"}

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

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
-import { useAppLayoutInternals } from './context';
 import { InternalButton } from '../../button/internal';
+import { MobileTriggers as DrawersMobileTriggers } from './drawers';
+import { useAppLayoutInternals } from './context';
 import styles from './styles.css.js';
 import testutilStyles from '../test-classes/styles.css.js';
 /**
@@ -12,24 +13,25 @@ import testutilStyles from '../test-classes/styles.css.js';
  */
 export default function AppBar() {
     var _a, _b, _c;
-    const { ariaLabels, breadcrumbs, contentHeader, contentType, dynamicOverlapHeight, handleNavigationClick, handleToolsClick, hasNotificationsContent, hasStickyBackground, isMobile, navigationHide, isNavigationOpen, isToolsOpen, toolsHide, isAnyPanelOpen, navigationRefs, toolsRefs, } = useAppLayoutInternals();
+    const { ariaLabels, breadcrumbs, contentHeader, contentType, drawers, dynamicOverlapHeight, handleNavigationClick, handleToolsClick, hasDrawerViewportOverlay, hasNotificationsContent, hasStickyBackground, isMobile, navigationHide, isNavigationOpen, isToolsOpen, toolsHide, navigationRefs, toolsRefs, } = useAppLayoutInternals();
     if (navigationHide && !breadcrumbs && toolsHide) {
         return null;
     }
     return (React.createElement("section", { "aria-hidden": !isMobile && !breadcrumbs ? true : undefined, className: clsx(styles.appbar, {
             [styles['has-breadcrumbs']]: breadcrumbs,
-            [styles.unfocusable]: isMobile && isAnyPanelOpen,
+            [styles.unfocusable]: hasDrawerViewportOverlay,
             [testutilStyles['mobile-bar']]: isMobile,
         }, 'awsui-context-content-header') },
         !navigationHide && isMobile && (React.createElement("nav", { className: clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen }), "aria-hidden": isNavigationOpen },
-            React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isNavigationOpen ? undefined : false, iconName: "menu", formAction: "none", onClick: () => handleNavigationClick(true), variant: "icon", className: testutilStyles['navigation-toggle'], ref: navigationRefs.toggle, disabled: isAnyPanelOpen, __nativeAttributes: { 'aria-haspopup': isNavigationOpen ? undefined : true } }))),
+            React.createElement(InternalButton, { ariaLabel: (_a = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.navigationToggle) !== null && _a !== void 0 ? _a : undefined, ariaExpanded: isNavigationOpen ? undefined : false, iconName: "menu", formAction: "none", onClick: () => handleNavigationClick(true), variant: "icon", className: testutilStyles['navigation-toggle'], ref: navigationRefs.toggle, disabled: hasDrawerViewportOverlay, __nativeAttributes: { 'aria-haspopup': isNavigationOpen ? undefined : true } }))),
         breadcrumbs && (React.createElement("div", { className: clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {
                 [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,
                 [styles['has-header']]: contentHeader,
                 [styles['has-notifications-content']]: hasNotificationsContent,
                 [styles['has-sticky-background']]: hasStickyBackground,
             }) }, breadcrumbs)),
-        !toolsHide && isMobile && (React.createElement("aside", { className: clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen }), "aria-hidden": isToolsOpen, "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _b !== void 0 ? _b : undefined },
-            React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: isAnyPanelOpen, ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _c !== void 0 ? _c : undefined, iconName: "status-info", formAction: "none", onClick: () => handleToolsClick(true), variant: "icon", ref: toolsRefs.toggle, __nativeAttributes: { 'aria-haspopup': true } })))));
+        isMobile && !toolsHide && !drawers && (React.createElement("aside", { className: clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen }), "aria-hidden": isToolsOpen, "aria-label": (_b = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.tools) !== null && _b !== void 0 ? _b : undefined },
+            React.createElement(InternalButton, { className: testutilStyles['tools-toggle'], ariaExpanded: isToolsOpen, disabled: hasDrawerViewportOverlay, ariaLabel: (_c = ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.toolsToggle) !== null && _c !== void 0 ? _c : undefined, iconName: "status-info", formAction: "none", onClick: () => handleToolsClick(true), variant: "icon", ref: toolsRefs.toggle, __nativeAttributes: { 'aria-haspopup': true } }))),
+        React.createElement(DrawersMobileTriggers, null)));
 }
 //# sourceMappingURL=app-bar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"app-bar.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { useAppLayoutInternals } from './context';\nimport { InternalButton } from '../../button/internal';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasNotificationsContent,\n    hasStickyBackground,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    isAnyPanelOpen,\n    navigationRefs,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: isMobile && isAnyPanelOpen,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen ? undefined : false}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={navigationRefs.toggle}\n            disabled={isAnyPanelOpen}\n            __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n            [styles['has-sticky-background']]: hasStickyBackground,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {!toolsHide && isMobile && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={isAnyPanelOpen}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={toolsRefs.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n    </section>\n  );\n}\n"]}
+{"version":3,"file":"app-bar.js","sourceRoot":"lib/default/","sources":["app-layout/visual-refresh/app-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\nimport { InternalButton } from '../../button/internal';\nimport { MobileTriggers as DrawersMobileTriggers } from './drawers';\nimport { useAppLayoutInternals } from './context';\nimport styles from './styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\n/**\n * The CSS class 'awsui-context-content-header' needs to be added to the root element so\n * that the design tokens used are overridden with the appropriate values.\n */\nexport default function AppBar() {\n  const {\n    ariaLabels,\n    breadcrumbs,\n    contentHeader,\n    contentType,\n    drawers,\n    dynamicOverlapHeight,\n    handleNavigationClick,\n    handleToolsClick,\n    hasDrawerViewportOverlay,\n    hasNotificationsContent,\n    hasStickyBackground,\n    isMobile,\n    navigationHide,\n    isNavigationOpen,\n    isToolsOpen,\n    toolsHide,\n    navigationRefs,\n    toolsRefs,\n  } = useAppLayoutInternals();\n\n  if (navigationHide && !breadcrumbs && toolsHide) {\n    return null;\n  }\n\n  return (\n    <section\n      aria-hidden={!isMobile && !breadcrumbs ? true : undefined}\n      className={clsx(\n        styles.appbar,\n        {\n          [styles['has-breadcrumbs']]: breadcrumbs,\n          [styles.unfocusable]: hasDrawerViewportOverlay,\n          [testutilStyles['mobile-bar']]: isMobile,\n        },\n        'awsui-context-content-header'\n      )}\n    >\n      {!navigationHide && isMobile && (\n        <nav\n          className={clsx(styles['appbar-nav'], { [testutilStyles['drawer-closed']]: !isNavigationOpen })}\n          aria-hidden={isNavigationOpen}\n        >\n          <InternalButton\n            ariaLabel={ariaLabels?.navigationToggle ?? undefined}\n            ariaExpanded={isNavigationOpen ? undefined : false}\n            iconName=\"menu\"\n            formAction=\"none\"\n            onClick={() => handleNavigationClick(true)}\n            variant=\"icon\"\n            className={testutilStyles['navigation-toggle']}\n            ref={navigationRefs.toggle}\n            disabled={hasDrawerViewportOverlay}\n            __nativeAttributes={{ 'aria-haspopup': isNavigationOpen ? undefined : true }}\n          />\n        </nav>\n      )}\n\n      {breadcrumbs && (\n        <div\n          className={clsx(styles.breadcrumbs, styles[`content-type-${contentType}`], testutilStyles.breadcrumbs, {\n            [styles['has-dynamic-overlap-height']]: dynamicOverlapHeight > 0,\n            [styles['has-header']]: contentHeader,\n            [styles['has-notifications-content']]: hasNotificationsContent,\n            [styles['has-sticky-background']]: hasStickyBackground,\n          })}\n        >\n          {breadcrumbs}\n        </div>\n      )}\n\n      {isMobile && !toolsHide && !drawers && (\n        <aside\n          className={clsx(styles['appbar-tools'], { [testutilStyles['drawer-closed']]: !isToolsOpen })}\n          aria-hidden={isToolsOpen}\n          aria-label={ariaLabels?.tools ?? undefined}\n        >\n          <InternalButton\n            className={testutilStyles['tools-toggle']}\n            ariaExpanded={isToolsOpen}\n            disabled={hasDrawerViewportOverlay}\n            ariaLabel={ariaLabels?.toolsToggle ?? undefined}\n            iconName=\"status-info\"\n            formAction=\"none\"\n            onClick={() => handleToolsClick(true)}\n            variant=\"icon\"\n            ref={toolsRefs.toggle}\n            __nativeAttributes={{ 'aria-haspopup': true }}\n          />\n        </aside>\n      )}\n\n      <DrawersMobileTriggers />\n    </section>\n  );\n}\n"]}

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

@@ -1,21 +1,29 @@
 import React from 'react';
 import { AppLayoutProps } from '../interfaces';
+import { DrawersProps } from './drawers';
 import { FocusControlRefs } from '../utils/use-focus-control';
-import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 import { SplitPanelFocusControlRefs } from '../utils/use-split-panel-focus-control';
+import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 interface AppLayoutInternals extends AppLayoutProps {
+    activeDrawerId: string | null;
+    activeDrawerWidth: number;
+    drawers: DrawersProps;
+    drawersRefs: FocusControlRefs;
+    drawersTriggerCount: number;
     dynamicOverlapHeight: number;
+    handleDrawersClick: (activeDrawerId: string | null, skipFocusControl?: boolean) => void;
     handleSplitPanelClick: () => void;
     handleNavigationClick: (isOpen: boolean) => void;
     handleSplitPanelPreferencesChange: (detail: AppLayoutProps.SplitPanelPreferences) => void;
     handleSplitPanelResize: (detail: {
         size: number;
     }) => void;
-    handleToolsClick: (value: boolean) => void;
+    handleToolsClick: (value: boolean, skipFocusControl?: boolean) => void;
     hasDefaultToolsWidth: boolean;
+    hasDrawerViewportOverlay: boolean;
     hasNotificationsContent: boolean;
+    hasOpenDrawer: boolean;
     hasStickyBackground: boolean;
-    isAnyPanelOpen: boolean;
     isMobile: boolean;
     isNavigationOpen: boolean;
     isSplitPanelForcedPosition: boolean;
@@ -23,8 +31,10 @@ interface AppLayoutInternals extends AppLayoutProps {
     isToolsOpen: boolean;
     layoutElement: React.Ref<HTMLElement>;
     layoutWidth: number;
+    loseToolsFocus: () => void;
     mainElement: React.Ref<HTMLDivElement>;
     mainOffsetLeft: number;
+    navigationRefs: FocusControlRefs;
     notificationsElement: React.Ref<HTMLDivElement>;
     notificationsHeight: number;
     offsetBottom: number;
@@ -43,9 +53,7 @@ interface AppLayoutInternals extends AppLayoutProps {
     setSplitPanelToggle: (toggle: SplitPanelSideToggleProps) => void;
     splitPanelDisplayed: boolean;
     splitPanelRefs: SplitPanelFocusControlRefs;
-    navigationRefs: FocusControlRefs;
     toolsRefs: FocusControlRefs;
-    loseToolsFocus: () => void;
 }
 interface AppLayoutProviderInternalsProps extends AppLayoutProps {
     children: React.ReactNode;

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;AACf,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAW/C,OAAO,EAAE,gBAAgB,EAAmB,MAAM,4BAA4B,CAAC;AAG/E,OAAO,EAAE,yBAAyB,EAAE,MAAM,4CAA4C,CAAC;AACvF,OAAO,EAAE,0BAA0B,EAA6B,MAAM,wCAAwC,CAAC;AAE/G,UAAU,kBAAmB,SAAQ,cAAc;IACjD,oBAAoB,EAAE,MAAM,CAAC;IAC7B,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,KAAK,IAAI,CAAC;IAC3C,oBAAoB,EAAE,OAAO,CAAC;IAC9B,uBAAuB,EAAE,OAAO,CAAC;IACjC,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,EAAE,OAAO,CAAC;IACxB,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,WAAW,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IACvC,cAAc,EAAE,MAAM,CAAC;IACvB,oBAAoB,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChD,mBAAmB,EAAE,MAAM,CAAC;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,uBAAuB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,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,cAAc,EAAE,gBAAgB,CAAC;IACjC,SAAS,EAAE,gBAAgB,CAAC;IAC5B,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AASD,UAAU,+BAAgC,SAAQ,cAAc;IAC9D,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,qBAAqB,uBAMpC;AAED,eAAO,MAAM,0BAA0B,4GAwdtC,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

@@ -2,20 +2,20 @@ import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { createContext, useCallback, useEffect, useLayoutEffect, useImperativeHandle, useRef, useState, useContext, } from 'react';
+import { applyDefaults } from '../defaults';
+import { AppLayoutContext } from '../../internal/context/app-layout-context';
 import { fireNonCancelableEvent } from '../../internal/events';
+import { useFocusControl } from '../utils/use-focus-control';
+import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
+import { isDevelopment } from '../../internal/is-development';
 import { getSplitPanelPosition } from './split-panel';
+import { useContainerQuery } from '../../internal/hooks/container-queries';
 import { useControllable } from '../../internal/hooks/use-controllable';
+import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
+import { useObservedElement } from '../utils/use-observed-element';
 import { useMobile } from '../../internal/hooks/use-mobile';
-import { useContainerQuery } from '../../internal/hooks/container-queries';
-import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
-import styles from './styles.css.js';
-import { isDevelopment } from '../../internal/is-development';
 import { warnOnce } from '../../internal/logging';
-import { applyDefaults } from '../defaults';
-import { useFocusControl } from '../utils/use-focus-control';
-import { useObservedElement } from '../utils/use-observed-element';
-import { AppLayoutContext } from '../../internal/context/app-layout-context';
-import { useSplitPanelFocusControl } from '../utils/use-split-panel-focus-control';
+import styles from './styles.css.js';
 /**
  * The default values are destructured in the context instantiation to
  * prevent downstream Typescript errors. This could likely be replaced
@@ -30,7 +30,7 @@ export function useAppLayoutInternals() {
     return ctx;
 }
 export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
-    var _b, _c, _d;
+    var _b, _c, _d, _e;
     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) {
@@ -98,14 +98,11 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
     const hasDefaultToolsWidth = props.toolsWidth === undefined;
     const [isToolsOpen = false, setIsToolsOpen] = useControllable(controlledToolsOpen, props.onToolsChange, isMobile ? false : contentTypeDefaults.toolsOpen, { componentName: 'AppLayout', controlledProp: 'toolsOpen', changeHandler: 'onToolsChange' });
     const { refs: toolsRefs, setFocus: focusToolsButtons, loseFocus: loseToolsFocus, } = useFocusControl(isToolsOpen, true);
-    const handleToolsClick = useCallback(function handleToolsChange(isOpen) {
+    const handleToolsClick = useCallback(function handleToolsChange(isOpen, skipFocusControl) {
         setIsToolsOpen(isOpen);
-        focusToolsButtons();
+        !skipFocusControl && focusToolsButtons();
         fireNonCancelableEvent(props.onToolsChange, { open: isOpen });
     }, [props.onToolsChange, setIsToolsOpen, focusToolsButtons]);
-    const navigationVisible = !navigationHide && isNavigationOpen;
-    const toolsVisible = !toolsHide && isToolsOpen;
-    const isAnyPanelOpen = navigationVisible || toolsVisible;
     /**
      * On mobile viewports the navigation and tools drawers are adjusted to a fixed position
      * that consumes 100% of the viewport height and width. The body content could potentially
@@ -231,6 +228,41 @@ 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 activeDrawerWidth = 290;
+    const { refs: drawersRefs, setFocus: focusDrawersButtons } = useFocusControl(activeDrawerId);
+    const handleDrawersClick = useCallback(function handleDrawersChange(id, skipFocusControl) {
+        const newActiveDrawerId = id !== activeDrawerId ? id : null;
+        setActiveDrawerId(newActiveDrawerId);
+        !skipFocusControl && focusDrawersButtons();
+        fireNonCancelableEvent(drawers === null || drawers === void 0 ? void 0 : drawers.onChange, newActiveDrawerId);
+    }, [activeDrawerId, drawers === null || drawers === void 0 ? void 0 : drawers.onChange, focusDrawersButtons, setActiveDrawerId]);
+    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 || isToolsOpen || (splitPanelDisplayed && splitPanelPosition === 'side' && isSplitPanelOpen);
+    const hasDrawerViewportOverlay = isMobile && (!!activeDrawerId || (!navigationHide && isNavigationOpen) || (!toolsHide && isToolsOpen));
     /**
      * The Layout element is not necessarily synonymous with the client
      * viewport width. There can be content in the horizontal viewport
@@ -254,35 +286,6 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
         var _a, _b;
         setMainOffsetLeft((_b = (_a = mainElement === null || mainElement === void 0 ? void 0 : mainElement.current) === null || _a === void 0 ? void 0 : _a.offsetLeft) !== null && _b !== void 0 ? _b : 0);
     }, [layoutWidth, isNavigationOpen, isToolsOpen, splitPanelReportedSize]);
-    useLayoutEffect(function handleSplitPanelMaxWidth() {
-        /**
-         * Warning! This is a hack! In order to accurately calculate if there is adequate
-         * horizontal space for the Split Panel to be in the side position we need two values
-         * that are not available in JavaScript.
-         *
-         * The first is the the content gap on the right which is stored in a design token
-         * and applied in the Layout CSS:
-         *
-         *  $contentGapRight: #{awsui.$space-scaled-2x-xxxl};
-         *
-         * The second is the width of the element that has the circular buttons for the
-         * Tools and Split Panel. This could be suppressed given the state of the Tools
-         * drawer returning a zero value. It would, however, be rendered if the Split Panel
-         * were to move into the side position. This is calculated in the Tools CSS and
-         * the Trigger button CSS with design tokens:
-         *
-         * padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
-         * width: awsui.$space-layout-toggle-diameter;
-         *
-         * These values will be defined below as static integers that are rough approximations
-         * of their computed width when rendered in the DOM, but doubled to ensure adequate
-         * spacing for the Split Panel to be in side position.
-         */
-        const contentGapRight = 80; // Approximately 40px when rendered but doubled for safety
-        const toolsFormOffsetWidth = 160; // Approximately 80px when rendered but doubled for safety
-        const toolsOffsetWidth = isToolsOpen ? toolsWidth : 0;
-        setSplitPanelMaxWidth(layoutWidth - mainOffsetLeft - minContentWidth - contentGapRight - toolsOffsetWidth - toolsFormOffsetWidth);
-    }, [isNavigationOpen, isToolsOpen, layoutWidth, mainOffsetLeft, minContentWidth, toolsWidth]);
     /**
      * Because the notifications slot does not give us any direction insight into
      * what the state of the child content is we need to have a mechanism for
@@ -316,29 +319,83 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
             offsetBottom += splitPanelReportedHeaderHeight;
         }
     }
-    return (React.createElement(AppLayoutInternalsContext.Provider, { value: Object.assign(Object.assign({}, props), { contentType,
+    /**
+     * Warning! This is a hack! In order to accurately calculate if there is adequate
+     * horizontal space for the Split Panel to be in the side position we need two values
+     * that are not available in JavaScript.
+     *
+     * The first is the the content gap on the right which is stored in a design token
+     * and applied in the Layout CSS:
+     *
+     * $contentGapRight: #{awsui.$space-scaled-2x-xxxl};
+     *
+     * The second is the width of the element that has the circular buttons for the
+     * Tools and Split Panel. This could be suppressed given the state of the Tools
+     * drawer returning a zero value. It would, however, be rendered if the Split Panel
+     * were to move into the side position. This is calculated in the Tools CSS and
+     * the Trigger button CSS with design tokens:
+     *
+     * padding: awsui.$space-scaled-s awsui.$space-layout-toggle-padding;
+     * width: awsui.$space-layout-toggle-diameter;
+     *
+     * These values will be defined below as static integers that are rough approximations
+     * of their computed width when rendered in the DOM, but doubled to ensure adequate
+     * spacing for the Split Panel to be in side position.
+     */
+    useLayoutEffect(function handleSplitPanelMaxWidth() {
+        const contentGapRight = 80; // Approximately 40px when rendered but doubled for safety
+        const toolsFormOffsetWidth = 160; // Approximately 80px when rendered but doubled for safety
+        const toolsOffsetWidth = isToolsOpen ? toolsWidth : 0;
+        const activeDrawerOffsetWidth = activeDrawerId ? activeDrawerWidth : 0;
+        setSplitPanelMaxWidth(layoutWidth -
+            mainOffsetLeft -
+            minContentWidth -
+            contentGapRight -
+            toolsOffsetWidth -
+            toolsFormOffsetWidth -
+            activeDrawerOffsetWidth);
+    }, [
+        activeDrawerId,
+        activeDrawerWidth,
+        isNavigationOpen,
+        isToolsOpen,
+        layoutWidth,
+        mainOffsetLeft,
+        minContentWidth,
+        toolsWidth,
+    ]);
+    return (React.createElement(AppLayoutInternalsContext.Provider, { value: Object.assign(Object.assign({}, props), { activeDrawerId,
+            activeDrawerWidth,
+            contentType,
+            drawers,
+            drawersRefs,
+            drawersTriggerCount,
             dynamicOverlapHeight,
             headerHeight,
             footerHeight,
             hasDefaultToolsWidth,
+            hasDrawerViewportOverlay,
+            handleDrawersClick,
             handleNavigationClick,
             handleSplitPanelClick,
             handleSplitPanelPreferencesChange,
             handleSplitPanelResize,
             handleToolsClick,
             hasNotificationsContent,
+            hasOpenDrawer,
             hasStickyBackground,
-            isAnyPanelOpen,
             isMobile, isNavigationOpen: isNavigationOpen !== null && isNavigationOpen !== void 0 ? isNavigationOpen : false, isSplitPanelForcedPosition,
             isSplitPanelOpen,
             isToolsOpen,
             layoutElement,
             layoutWidth,
+            loseToolsFocus,
             mainElement,
             mainOffsetLeft,
             maxContentWidth,
             minContentWidth,
             navigationHide,
+            navigationRefs,
             notificationsElement,
             notificationsHeight,
             offsetBottom,
@@ -359,9 +416,7 @@ export const AppLayoutInternalsProvider = React.forwardRef((_a, forwardRef) => {
             setSplitPanelToggle,
             splitPanelRefs,
             toolsHide, toolsOpen: isToolsOpen, toolsWidth,
-            toolsRefs,
-            navigationRefs,
-            loseToolsFocus }) },
+            toolsRefs }) },
         React.createElement(AppLayoutContext.Provider, { value: {
                 stickyOffsetBottom: offsetBottom,
                 stickyOffsetTop: 0,