@cloudscape-design/components-themeable 3.0.251 → 3.0.253

package/lib/internal/template/app-layout/mobile-toolbar/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { ButtonProps } from '../../button/interfaces';
 import { AppLayoutProps } from '../interfaces';
+import { DrawerItem } from '../drawer/interfaces';
 interface MobileToolbarProps {
     anyPanelOpen: boolean | undefined;
     unfocusable: boolean | undefined;
@@ -15,7 +16,15 @@ interface MobileToolbarProps {
     children: React.ReactNode;
     onNavigationOpen: () => void;
     onToolsOpen: () => void;
+    drawers?: {
+        items: Array<DrawerItem>;
+        activeDrawerId: string | undefined;
+        onChange: (changeDetail: {
+            activeDrawerId: string | undefined;
+        }) => void;
+        ariaLabel?: string;
+    };
 }
-export declare function MobileToolbar({ ariaLabels, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen, unfocusable, children, onNavigationOpen, onToolsOpen, }: MobileToolbarProps): JSX.Element;
+export declare function MobileToolbar({ ariaLabels, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, }: MobileToolbarProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/app-layout/mobile-toolbar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAuC/C,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,GACZ,EAAE,kBAAkB,eAuCpB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAqClD,UAAU,kBAAkB;IAC1B,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;IAClC,WAAW,EAAE,OAAO,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QACvC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;KACnC,CAAC;IACF,cAAc,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,EAAE,OAAO,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC;IACnC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;CACH;AAED,wBAAgB,aAAa,CAAC,EAC5B,UAAe,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAoB,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,GACR,EAAE,kBAAkB,eA4DpB"}

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

@@ -12,7 +12,7 @@ const MobileToggle = React.forwardRef(({ className, ariaLabels, type, disabled,
     return (React.createElement(TagName, { className: clsx(styles['mobile-toggle']), "aria-hidden": disabled, "aria-label": mainLabel, onClick: e => e.target === e.currentTarget && onClick() },
         React.createElement(AppLayoutButton, { ref: ref, className: className, iconName: iconName, onClick: onClick, ariaLabel: openLabel, disabled: disabled, ariaExpanded: disabled })));
 });
-export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen = false, unfocusable, children, onNavigationOpen, onToolsOpen, }) {
+export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigationHide, toolsHide, anyPanelOpen = false, unfocusable, children, onNavigationOpen, onToolsOpen, drawers, }) {
     useEffect(() => {
         if (anyPanelOpen) {
             document.body.classList.add(styles['block-body-scroll']);
@@ -27,6 +27,7 @@ export function MobileToolbar({ ariaLabels = {}, toggleRefs, topOffset, navigati
     return (React.createElement("div", { 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 && (React.createElement(MobileToggle, { ref: toggleRefs.tools, type: "tools", className: testutilStyles['tools-toggle'], ariaLabels: ariaLabels, disabled: anyPanelOpen, onClick: onToolsOpen }))));
+        !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['mobile-toggle'], styles['mobile-toggle-with-drawers']) }, drawers.items.map((item, index) => (React.createElement(AppLayoutButton, { className: clsx(styles.trigger, styles['trigger-drawer'], drawers.activeDrawerId === item.id && styles.selected), key: `drawer-trigger-${index}`, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: item.ariaLabels.triggerButton, onClick: () => drawers.onChange({ activeDrawerId: item.id }), ariaExpanded: drawers.activeDrawerId !== undefined })))))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/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 { AppLayoutButton, togglesConfig } from '../toggles';\nimport styles from './styles.css.js';\nimport sharedStyles from '../styles.css.js';\nimport testutilStyles from '../test-classes/styles.css.js';\n\ninterface MobileToggleProps {\n  className?: string;\n  ariaLabels?: AppLayoutProps.Labels;\n  type: keyof typeof togglesConfig;\n  disabled?: boolean;\n  onClick: () => void;\n}\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    return (\n      <TagName\n        className={clsx(styles['mobile-toggle'])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <AppLayoutButton\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);\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  children: React.ReactNode;\n  onNavigationOpen: () => void;\n  onToolsOpen: () => void;\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}: 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  return (\n    <div className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)} style={{ top: topOffset }}>\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 && (\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    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["app-layout/mobile-toolbar/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,YAAY,MAAM,kBAAkB,CAAC;AAC5C,OAAO,cAAc,MAAM,+BAA+B,CAAC;AAQ3D,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAqB,EAAE,GAA+B,EAAE,EAAE;IACzG,MAAM,EAAE,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7D,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC,UAAU,CAAC,CAAC;IAEvD,OAAO,CACL,oBAAC,OAAO,IACN,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,iBAC3B,QAAQ,gBACT,SAAS,EACrB,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,aAAa,IAAI,OAAO,EAAE;QAEvD,oBAAC,eAAe,IACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,QAAQ,GACtB,CACM,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAuBF,MAAM,UAAU,aAAa,CAAC,EAC5B,UAAU,GAAG,EAAE,EACf,UAAU,EACV,SAAS,EACT,cAAc,EACd,SAAS,EACT,YAAY,GAAG,KAAK,EACpB,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,OAAO,GACY;IACnB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE;YAChB,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;YACzD,OAAO,GAAG,EAAE;gBACV,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;YAC9D,CAAC,CAAC;SACH;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,CAAC;SAC7D;IACH,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IACnB,OAAO,CACL,6BAAK,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,WAAW,IAAI,YAAY,CAAC,WAAW,CAAC,EAAE,KAAK,EAAE,EAAE,GAAG,EAAE,SAAS,EAAE;QAC3G,CAAC,cAAc,IAAI,CAClB,oBAAC,YAAY,IACX,GAAG,EAAE,UAAU,CAAC,UAAU,EAC1B,IAAI,EAAC,YAAY,EACjB,SAAS,EAAE,cAAc,CAAC,mBAAmB,CAAC,EAC9C,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,gBAAgB,GACzB,CACH;QACD,6BAAK,SAAS,EAAE,MAAM,CAAC,wBAAwB,CAAC,IAC7C,QAAQ,IAAI,6BAAK,SAAS,EAAE,cAAc,CAAC,WAAW,IAAG,QAAQ,CAAO,CACrE;QACL,CAAC,SAAS,IAAI,CAAC,OAAO,IAAI,CACzB,oBAAC,YAAY,IACX,GAAG,EAAE,UAAU,CAAC,KAAK,EACrB,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,cAAc,CAAC,cAAc,CAAC,EACzC,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,OAAO,EAAE,WAAW,GACpB,CACH;QACA,OAAO,IAAI,CACV,6CACc,OAAO,CAAC,SAAS,EAC7B,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,4BAA4B,CAAC,CAAC,IAE7E,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAgB,EAAE,KAAa,EAAE,EAAE,CAAC,CACtD,oBAAC,eAAe,IACd,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,OAAO,EACd,MAAM,CAAC,gBAAgB,CAAC,EACxB,OAAO,CAAC,cAAc,KAAK,IAAI,CAAC,EAAE,IAAI,MAAM,CAAC,QAAQ,CACtD,EACD,GAAG,EAAE,kBAAkB,KAAK,EAAE,EAC9B,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ,EAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO,EAC7B,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC,aAAa,EACxC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,IAAI,CAAC,EAAE,EAAE,CAAC,EAC5D,YAAY,EAAE,OAAO,CAAC,cAAc,KAAK,SAAS,GAClD,CACH,CAAC,CACI,CACT,CACG,CACP,CAAC;AACJ,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, { useEffect } from 'react';\nimport { ButtonProps } from '../../button/interfaces';\nimport { AppLayoutProps } from '../interfaces';\nimport { DrawerItem } from '../drawer/interfaces';\nimport { AppLayoutButton, 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'])}\n        aria-hidden={disabled}\n        aria-label={mainLabel}\n        onClick={e => e.target === e.currentTarget && onClick()}\n      >\n        <AppLayoutButton\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  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}: 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 className={clsx(styles['mobile-bar'], unfocusable && sharedStyles.unfocusable)} style={{ top: topOffset }}>\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['mobile-toggle'], styles['mobile-toggle-with-drawers'])}\n        >\n          {drawers.items.map((item: DrawerItem, index: number) => (\n            <AppLayoutButton\n              className={clsx(\n                styles.trigger,\n                styles['trigger-drawer'],\n                drawers.activeDrawerId === item.id && styles.selected\n              )}\n              key={`drawer-trigger-${index}`}\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            />\n          ))}\n        </aside>\n      )}\n    </div>\n  );\n}\n"]}

package/lib/internal/template/app-layout/mobile-toolbar/styles.css.js

@@ -1,9 +1,10 @@
 
     import './styles.scoped.css';
     export default {
-  "block-body-scroll": "awsui_block-body-scroll_19d8l_1jj8i_97",
-  "mobile-bar": "awsui_mobile-bar_19d8l_1jj8i_101",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1jj8i_115",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_1jj8i_122"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_1oc1l_97",
+  "mobile-bar": "awsui_mobile-bar_19d8l_1oc1l_101",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1oc1l_115",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_1oc1l_122",
+  "mobile-toggle-with-drawers": "awsui_mobile-toggle-with-drawers_19d8l_1oc1l_135"
 };
   

package/lib/internal/template/app-layout/mobile-toolbar/styles.scoped.css

@@ -94,11 +94,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_block-body-scroll_19d8l_1jj8i_97:not(#\9) {
+.awsui_block-body-scroll_19d8l_1oc1l_97:not(#\9) {
   overflow: hidden;
 }
 
-.awsui_mobile-bar_19d8l_1jj8i_101:not(#\9) {
+.awsui_mobile-bar_19d8l_1oc1l_101:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   display: flex;
@@ -112,26 +112,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   height: calc(2 * var(--space-m-17eucw, 16px) + var(--space-scaled-xs-6859qs, 8px));
 }
 
-.awsui_mobile-bar-breadcrumbs_19d8l_1jj8i_115:not(#\9) {
+.awsui_mobile-bar-breadcrumbs_19d8l_1oc1l_115:not(#\9) {
   min-width: 0;
   flex: 1;
   margin-left: var(--space-m-17eucw, 16px);
   margin-right: var(--space-m-17eucw, 16px);
 }
 
-.awsui_mobile-toggle_19d8l_1jj8i_122:not(#\9) {
+.awsui_mobile-toggle_19d8l_1oc1l_122:not(#\9) {
   box-sizing: border-box;
   cursor: pointer;
   z-index: 1;
   padding: var(--space-xxs-ynfts5, 4px) 7px;
   width: 40px;
 }
-.awsui_mobile-toggle_19d8l_1jj8i_122:not(#\9):first-child {
+.awsui_mobile-toggle_19d8l_1oc1l_122:not(#\9):first-child {
   border-right: 1px solid var(--color-border-layout-ifju5o, #d5dbdb);
 }
-.awsui_mobile-toggle_19d8l_1jj8i_122:not(#\9):last-child {
+.awsui_mobile-toggle_19d8l_1oc1l_122:not(#\9):last-child {
   border-left: 1px solid var(--color-border-layout-ifju5o, #d5dbdb);
 }
-.awsui_mobile-toggle_19d8l_1jj8i_122:not(#\9):hover {
+.awsui_mobile-toggle_19d8l_1oc1l_122:not(#\9):hover:not(.awsui_mobile-toggle-with-drawers_19d8l_1oc1l_135) {
   background: var(--color-background-layout-panel-hover-thdv3z, #eaeded);
+}
+.awsui_mobile-toggle-with-drawers_19d8l_1oc1l_135:not(#\9) {
+  display: flex;
+  width: auto;
 }

package/lib/internal/template/app-layout/mobile-toolbar/styles.selectors.js

@@ -2,9 +2,10 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "block-body-scroll": "awsui_block-body-scroll_19d8l_1jj8i_97",
-  "mobile-bar": "awsui_mobile-bar_19d8l_1jj8i_101",
-  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1jj8i_115",
-  "mobile-toggle": "awsui_mobile-toggle_19d8l_1jj8i_122"
+  "block-body-scroll": "awsui_block-body-scroll_19d8l_1oc1l_97",
+  "mobile-bar": "awsui_mobile-bar_19d8l_1oc1l_101",
+  "mobile-bar-breadcrumbs": "awsui_mobile-bar-breadcrumbs_19d8l_1oc1l_115",
+  "mobile-toggle": "awsui_mobile-toggle_19d8l_1oc1l_122",
+  "mobile-toggle-with-drawers": "awsui_mobile-toggle-with-drawers_19d8l_1oc1l_135"
 };
   

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

@@ -1,8 +1,8 @@
 
     import './styles.scoped.css';
     export default {
-  "notifications": "awsui_notifications_1hmm4_e0954_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_e0954_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_e0954_25"
+  "notifications": "awsui_notifications_1hmm4_1tp3h_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1tp3h_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1tp3h_25"
 };
   

package/lib/internal/template/app-layout/notifications/styles.scoped.css

@@ -6,26 +6,26 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_notifications_1hmm4_e0954_9:not(#\9),
-.awsui_notifications-sticky_1hmm4_e0954_10:not(#\9) {
+.awsui_notifications_1hmm4_1tp3h_9:not(#\9),
+.awsui_notifications-sticky_1hmm4_1tp3h_10:not(#\9) {
   z-index: 850;
 }
 
-.awsui_notifications_1hmm4_e0954_9:not(#\9) {
+.awsui_notifications_1hmm4_1tp3h_9:not(#\9) {
   /* This is necessary for the z-index to have effect */
   position: relative;
 }
 
-.awsui_notifications-sticky_1hmm4_e0954_10:not(#\9) {
+.awsui_notifications-sticky_1hmm4_1tp3h_10:not(#\9) {
   top: 0;
   position: sticky;
-  --awsui-flashbar-sticky-bottom-margin-lgrg0d: var(--space-xxl-2nvmf1, 32px);
+  --awsui-flashbar-sticky-bottom-margin-3j0evk: var(--space-xxl-2nvmf1, 32px);
 }
 
-.awsui_no-content-paddings_1hmm4_e0954_25:not(#\9) {
+.awsui_no-content-paddings_1hmm4_1tp3h_25:not(#\9) {
   /*
   When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
   when the notification bar is rendered, to prevent it from overlapping the content.
    */
-  --awsui-stacked-notifications-bottom-margin-lgrg0d: var(--space-scaled-l-t03y3z, 20px);
+  --awsui-stacked-notifications-bottom-margin-3j0evk: var(--space-scaled-l-t03y3z, 20px);
 }

package/lib/internal/template/app-layout/notifications/styles.selectors.js

@@ -2,8 +2,8 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "notifications": "awsui_notifications_1hmm4_e0954_9",
-  "notifications-sticky": "awsui_notifications-sticky_1hmm4_e0954_10",
-  "no-content-paddings": "awsui_no-content-paddings_1hmm4_e0954_25"
+  "notifications": "awsui_notifications_1hmm4_1tp3h_9",
+  "notifications-sticky": "awsui_notifications-sticky_1hmm4_1tp3h_10",
+  "no-content-paddings": "awsui_no-content-paddings_1hmm4_1tp3h_25"
 };
   

package/lib/internal/template/app-layout/test-classes/styles.css.js

@@ -1,18 +1,23 @@
 
     import './styles.scoped.css';
     export 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/lib/internal/template/app-layout/test-classes/styles.scoped.css

@@ -2,54 +2,74 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_1fj9k_avnjw_5:not(#\9) {
+.awsui_root_1fj9k_tjzk8_5:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation_1fj9k_avnjw_9:not(#\9) {
+.awsui_navigation_1fj9k_tjzk8_9:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-toggle_1fj9k_avnjw_13:not(#\9) {
+.awsui_navigation-toggle_1fj9k_tjzk8_13:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_navigation-close_1fj9k_avnjw_17:not(#\9) {
+.awsui_navigation-close_1fj9k_tjzk8_17:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content_1fj9k_avnjw_21:not(#\9) {
+.awsui_content_1fj9k_tjzk8_21:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_notifications_1fj9k_avnjw_25:not(#\9) {
+.awsui_notifications_1fj9k_tjzk8_25:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_breadcrumbs_1fj9k_avnjw_29:not(#\9) {
+.awsui_breadcrumbs_1fj9k_tjzk8_29:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools_1fj9k_avnjw_33:not(#\9) {
+.awsui_tools_1fj9k_tjzk8_33:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools-close_1fj9k_avnjw_37:not(#\9) {
+.awsui_tools-close_1fj9k_tjzk8_37:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_tools-toggle_1fj9k_avnjw_41:not(#\9) {
+.awsui_tools-toggle_1fj9k_tjzk8_41:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_drawer-closed_1fj9k_avnjw_45:not(#\9) {
+.awsui_drawer-closed_1fj9k_tjzk8_45:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_mobile-bar_1fj9k_avnjw_49:not(#\9) {
+.awsui_mobile-bar_1fj9k_tjzk8_49:not(#\9) {
   /* used in tests */
 }
 
-.awsui_disable-body-scroll-root_1fj9k_avnjw_53:not(#\9) {
+.awsui_disable-body-scroll-root_1fj9k_tjzk8_53:not(#\9) {
+  /* used in tests */
+}
+
+.awsui_drawers-desktop-triggers-container_1fj9k_tjzk8_57:not(#\9) {
+  /* used in tests */
+}
+
+.awsui_drawers-mobile-triggers-container_1fj9k_tjzk8_61:not(#\9) {
+  /* used in tests */
+}
+
+.awsui_drawers-trigger_1fj9k_tjzk8_65:not(#\9) {
+  /* used in tests */
+}
+
+.awsui_active-drawer_1fj9k_tjzk8_69:not(#\9) {
+  /* used in tests */
+}
+
+.awsui_active-drawer-close-button_1fj9k_tjzk8_73:not(#\9) {
   /* used in tests */
 }

package/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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"}