@cloudscape-design/components 3.0.419 → 3.0.421

package/app-layout/drawer/drawers-helpers.d.ts

@@ -1,6 +1,6 @@
 export declare function splitItems<T extends {
     id: string;
-}>(maybeItems: Array<T> | undefined, splitIndex: number, activeId: string | undefined): {
+}>(maybeItems: Array<T> | undefined, splitIndex: number, activeId: string | null): {
     visibleItems: T[];
     overflowItems: T[];
 };

package/app-layout/drawer/drawers-helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"drawers-helpers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/drawers-helpers.ts"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EACjD,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,EAChC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GAAG,SAAS;;;EAmB7B"}
+{"version":3,"file":"drawers-helpers.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/drawers-helpers.ts"],"names":[],"mappings":"AAGA,wBAAgB,UAAU,CAAC,CAAC,SAAS;IAAE,EAAE,EAAE,MAAM,CAAA;CAAE,EACjD,UAAU,EAAE,KAAK,CAAC,CAAC,CAAC,GAAG,SAAS,EAChC,UAAU,EAAE,MAAM,EAClB,QAAQ,EAAE,MAAM,GAAG,IAAI;;;EAmBxB"}

package/app-layout/drawer/drawers-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawers-helpers.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/drawers-helpers.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,UAAU,CACxB,UAAgC,EAChC,UAAkB,EAClB,QAA4B;IAE5B,MAAM,KAAK,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAE9C,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9B,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC;KACnD;IAED,IAAI,QAAQ,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;QACnE,MAAM,gBAAgB,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;QAC1E,IAAI,gBAAgB,EAAE;YACpB,aAAa,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC;YACjE,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAG,CAAC,CAAC;YAC3C,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SACrC;KACF;IACD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACzC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function splitItems<T extends { id: string }>(\n  maybeItems: Array<T> | undefined,\n  splitIndex: number,\n  activeId: string | undefined\n) {\n  const items = maybeItems ?? [];\n  const visibleItems = items.slice(0, splitIndex);\n  const overflowItems = items.slice(splitIndex);\n\n  if (overflowItems.length === 1) {\n    return { visibleItems: items, overflowItems: [] };\n  }\n\n  if (activeId && overflowItems.length > 0 && visibleItems.length > 0) {\n    const activeInOverflow = overflowItems.find(item => item.id === activeId);\n    if (activeInOverflow) {\n      overflowItems.splice(overflowItems.indexOf(activeInOverflow), 1);\n      overflowItems.unshift(visibleItems.pop()!);\n      visibleItems.push(activeInOverflow);\n    }\n  }\n  return { visibleItems, overflowItems };\n}\n"]}
+{"version":3,"file":"drawers-helpers.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/drawers-helpers.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,MAAM,UAAU,UAAU,CACxB,UAAgC,EAChC,UAAkB,EAClB,QAAuB;IAEvB,MAAM,KAAK,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC;IAC/B,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IAChD,MAAM,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;IAE9C,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9B,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,CAAC;KACnD;IAED,IAAI,QAAQ,IAAI,aAAa,CAAC,MAAM,GAAG,CAAC,IAAI,YAAY,CAAC,MAAM,GAAG,CAAC,EAAE;QACnE,MAAM,gBAAgB,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,QAAQ,CAAC,CAAC;QAC1E,IAAI,gBAAgB,EAAE;YACpB,aAAa,CAAC,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,CAAC;YACjE,aAAa,CAAC,OAAO,CAAC,YAAY,CAAC,GAAG,EAAG,CAAC,CAAC;YAC3C,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;SACrC;KACF;IACD,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,CAAC;AACzC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport function splitItems<T extends { id: string }>(\n  maybeItems: Array<T> | undefined,\n  splitIndex: number,\n  activeId: string | null\n) {\n  const items = maybeItems ?? [];\n  const visibleItems = items.slice(0, splitIndex);\n  const overflowItems = items.slice(splitIndex);\n\n  if (overflowItems.length === 1) {\n    return { visibleItems: items, overflowItems: [] };\n  }\n\n  if (activeId && overflowItems.length > 0 && visibleItems.length > 0) {\n    const activeInOverflow = overflowItems.find(item => item.id === activeId);\n    if (activeInOverflow) {\n      overflowItems.splice(overflowItems.indexOf(activeInOverflow), 1);\n      overflowItems.unshift(visibleItems.pop()!);\n      visibleItems.push(activeInOverflow);\n    }\n  }\n  return { visibleItems, overflowItems };\n}\n"]}

package/app-layout/drawer/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { DesktopDrawerProps, DrawerTriggersBarProps } from './interfaces';
 export declare const Drawer: React.ForwardRefExoticComponent<DesktopDrawerProps & React.RefAttributes<HTMLDivElement>>;
-export declare const DrawerTriggersBar: ({ isMobile, topOffset, bottomOffset, drawers }: DrawerTriggersBarProps) => JSX.Element;
+export declare const DrawerTriggersBar: ({ isMobile, topOffset, bottomOffset, activeDrawerId, ariaLabels, drawers, onDrawerChange, }: DrawerTriggersBarProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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

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

package/app-layout/drawer/index.js

@@ -26,15 +26,15 @@ import { TOOLS_DRAWER_ID } from '../utils/use-drawers';
 // * https://github.com/nvaccess/nvda/issues/5825
 // * https://github.com/nvaccess/nvda/issues/5247
 // * https://github.com/nvaccess/nvda/pull/8869 (reverted PR that was going to fix it)
-export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, closeClassName, width, type, toggleRefs, topOffset, bottomOffset, ariaLabels, drawersAriaLabels, children, isOpen, isHidden, isMobile, onToggle, onClick, onLoseFocus, drawers, resizeHandle, }, ref) => {
+export const Drawer = React.forwardRef(({ id, contentClassName, toggleClassName, closeClassName, width, type, toggleRefs, topOffset, bottomOffset, ariaLabels, children, hideOpenButton, isOpen, isHidden, isMobile, onToggle, onClick, onLoseFocus, resizeHandle, }, ref) => {
     const openButtonWrapperRef = useRef(null);
-    const { TagName, iconName, getLabels } = togglesConfig[type];
-    const { mainLabel, closeLabel, openLabel } = drawersAriaLabels !== null && drawersAriaLabels !== void 0 ? drawersAriaLabels : getLabels(ariaLabels);
+    const { TagName, iconName } = togglesConfig[type];
+    const { mainLabel, closeLabel, openLabel } = ariaLabels;
     const drawerContentWidthOpen = isMobile ? undefined : width;
     const drawerContentWidth = isOpen ? drawerContentWidthOpen : undefined;
     const regularOpenButton = (React.createElement(TagName, { ref: openButtonWrapperRef, "aria-label": mainLabel, className: styles.toggle, "aria-hidden": isOpen },
         React.createElement(ToggleButton, { ref: toggleRefs.toggle, className: toggleClassName, iconName: iconName, ariaLabel: openLabel, onClick: () => onToggle(true), ariaExpanded: isOpen ? undefined : false })));
-    return (React.createElement("div", { id: drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId, ref: ref, className: clsx(styles.drawer, {
+    return (React.createElement("div", { id: id, ref: ref, className: clsx(styles.drawer, {
             [styles.hide]: isHidden,
             [styles['drawer-closed']]: !isOpen,
             [testutilStyles['drawer-closed']]: !isOpen,
@@ -59,18 +59,17 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
             }
         } },
         React.createElement("div", { style: { width: drawerContentWidth, top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], styles['drawer-content-clickable'], contentClassName) },
-            !isMobile && !drawers && regularOpenButton,
+            !isMobile && !hideOpenButton && regularOpenButton,
             resizeHandle,
             React.createElement(TagName, { "aria-label": mainLabel, "aria-hidden": !isOpen },
                 React.createElement(CloseButton, { ref: toggleRefs.close, className: closeClassName, ariaLabel: closeLabel, onClick: () => {
                         onToggle(false);
-                        drawers === null || drawers === void 0 ? void 0 : drawers.onChange({ activeDrawerId: undefined });
                     } }),
                 children))));
 });
 const DrawerTrigger = React.forwardRef(({ testUtilsClassName, ariaLabel, ariaExpanded, ariaControls, badge, itemId, isActive, trigger, onClick, }, ref) => (React.createElement("div", { className: clsx(styles['drawer-trigger'], isActive && styles['drawer-trigger-active']), onClick: onClick },
     React.createElement(ToggleButton, { ref: ref, className: testUtilsClassName, iconName: trigger.iconName, iconSvg: trigger.iconSvg, ariaLabel: ariaLabel, ariaExpanded: ariaExpanded, ariaControls: ariaControls, badge: badge, testId: itemId && `awsui-app-layout-trigger-${itemId}` }))));
-export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }) => {
+export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, activeDrawerId, ariaLabels, drawers, onDrawerChange, }) => {
     const containerRef = React.useRef(null);
     const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);
     const isCompactMode = useDensityMode(containerRef) === 'compact';
@@ -83,35 +82,25 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, drawers }
         }
         return 0;
     };
-    const { visibleItems, overflowItems } = splitItems(drawers === null || drawers === void 0 ? void 0 : drawers.items, getIndexOfOverflowItem(), drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId);
+    const { visibleItems, overflowItems } = splitItems(drawers, getIndexOfOverflowItem(), activeDrawerId);
     const overflowMenuHasBadge = !!overflowItems.find(item => item.badge);
     return (React.createElement("div", { className: clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
             [styles['drawer-mobile']]: isMobile,
-            [styles.hide]: (drawers === null || drawers === void 0 ? void 0 : drawers.items.length) === 1 && drawers.activeDrawerId !== undefined,
+            [styles.hide]: drawers.length === 1 && !!activeDrawerId,
         }), ref: containerRef },
         React.createElement("div", { ref: triggersContainerRef, style: { top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content'], {
-                [styles['drawer-content-clickable']]: (drawers === null || drawers === void 0 ? void 0 : drawers.items.length) === 1,
-            }), onClick: () => {
-                (drawers === null || drawers === void 0 ? void 0 : drawers.items.length) === 1 &&
-                    (drawers === null || drawers === void 0 ? void 0 : drawers.onChange({
-                        activeDrawerId: drawers.items[0].id !== drawers.activeDrawerId ? drawers.items[0].id : undefined,
-                    }));
-            } }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, role: "region" },
+                [styles['drawer-content-clickable']]: drawers.length === 1,
+            }), onClick: drawers.length === 1
+                ? () => onDrawerChange(drawers[0].id !== activeDrawerId ? drawers[0].id : null)
+                : undefined }, !isMobile && (React.createElement("aside", { "aria-label": ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawers, role: "region" },
             React.createElement("div", { className: clsx(styles['drawer-triggers-wrapper']), role: "toolbar", "aria-orientation": "vertical" },
                 visibleItems.map((item, index) => {
                     var _a;
-                    return (React.createElement(DrawerTrigger, { key: index, testUtilsClassName: clsx(testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), ariaExpanded: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaControls: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id ? item.id : undefined, trigger: item.trigger, badge: item.badge, itemId: item.id, isActive: (drawers === null || drawers === void 0 ? void 0 : drawers.activeDrawerId) === item.id, onClick: () => {
-                            (drawers === null || drawers === void 0 ? void 0 : drawers.items.length) !== 1 &&
-                                (drawers === null || drawers === void 0 ? void 0 : drawers.onChange({
-                                    activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,
-                                }));
-                        } }));
+                    return (React.createElement(DrawerTrigger, { key: index, testUtilsClassName: clsx(testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), ariaExpanded: activeDrawerId === item.id, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaControls: activeDrawerId === item.id ? item.id : undefined, trigger: item.trigger, badge: item.badge, itemId: item.id, isActive: activeDrawerId === item.id, onClick: drawers.length !== 1
+                            ? () => onDrawerChange(item.id !== activeDrawerId ? item.id : null)
+                            : undefined }));
                 }),
                 overflowItems.length > 0 && (React.createElement("div", { className: clsx(styles['drawer-trigger']) },
-                    React.createElement(OverflowMenu, { ariaLabel: overflowMenuHasBadge ? drawers === null || drawers === void 0 ? void 0 : drawers.overflowWithBadgeAriaLabel : drawers === null || drawers === void 0 ? void 0 : drawers.overflowAriaLabel, items: overflowItems, onItemClick: ({ detail }) => {
-                            drawers === null || drawers === void 0 ? void 0 : drawers.onChange({
-                                activeDrawerId: detail.id !== drawers.activeDrawerId ? detail.id : undefined,
-                            });
-                        } })))))))));
+                    React.createElement(OverflowMenu, { ariaLabel: overflowMenuHasBadge ? ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflowWithBadge : ariaLabels === null || ariaLabels === void 0 ? void 0 : ariaLabels.drawersOverflow, items: overflowItems, onItemClick: ({ detail }) => onDrawerChange(detail.id) })))))))));
 };
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,10 +1,11 @@
 import React from 'react';
 import { togglesConfig } from '../toggles';
-import { AppLayoutProps } from '../interfaces';
+import { PublicAriaLabelsWithDrawers, PublicDrawer } from '../interfaces';
 import { IconProps } from '../../icon/interfaces';
 import { NonCancelableEventHandler } from '../../internal/events';
 import { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';
 export interface DesktopDrawerProps {
+    id?: string;
     contentClassName: string;
     toggleClassName: string;
     closeClassName: string;
@@ -19,13 +20,14 @@ export interface DesktopDrawerProps {
     width: number;
     topOffset: number | undefined;
     bottomOffset: number | undefined;
-    ariaLabels: AppLayoutProps.Labels | undefined;
-    drawersAriaLabels?: {
+    ariaLabels: {
         mainLabel: string | undefined;
         closeLabel: string | undefined;
         openLabel: string | undefined;
+        resizeHandle?: string;
     };
     children: React.ReactNode;
+    hideOpenButton?: boolean;
     type: keyof typeof togglesConfig;
     isMobile: boolean;
     isOpen: boolean;
@@ -33,17 +35,10 @@ export interface DesktopDrawerProps {
     onToggle: (isOpen: boolean) => void;
     onClick?: (event: React.MouseEvent) => void;
     onLoseFocus?: (event: React.FocusEvent) => void;
-    drawers?: {
-        items: Array<DrawerItem>;
-        activeDrawerId: string | undefined;
-        onChange: (changeDetail: {
-            activeDrawerId: string | undefined;
-        }) => void;
-    };
     resizeHandle?: React.ReactNode;
 }
 export interface ResizableDrawerProps extends DesktopDrawerProps {
-    activeDrawer?: DrawerItem;
+    activeDrawer?: PublicDrawer;
     onResize: (resizeDetail: {
         size: number;
         id: string;
@@ -57,31 +52,25 @@ export interface DrawerTriggersBarProps {
     topOffset: number | undefined;
     bottomOffset: number | undefined;
     isMobile: boolean;
-    drawers?: {
-        items: Array<DrawerItem>;
-        activeDrawerId?: string;
-        onChange: (changeDetail: {
-            activeDrawerId: string | undefined;
-        }) => void;
-        ariaLabel?: string;
-        overflowAriaLabel?: string;
-        overflowWithBadgeAriaLabel?: string;
-    };
+    drawers: Array<PublicDrawer>;
+    activeDrawerId: string | null;
+    onDrawerChange: (newDrawerId: string | null) => void;
+    ariaLabels: PublicAriaLabelsWithDrawers | undefined;
 }
-export interface DrawerItemAriaLabels {
+interface BetaDrawerItemAriaLabels {
     content?: string;
     closeButton?: string;
     triggerButton?: string;
     resizeHandle?: string;
 }
-export interface DrawerItem {
+interface BetaDrawerItem {
     id: string;
     content: React.ReactNode;
     trigger: {
         iconName?: IconProps.Name;
         iconSvg?: React.ReactNode;
     };
-    ariaLabels: DrawerItemAriaLabels;
+    ariaLabels: BetaDrawerItemAriaLabels;
     resizable?: boolean;
     defaultSize?: number;
     onResize?: NonCancelableEventHandler<{
@@ -90,18 +79,17 @@ export interface DrawerItem {
     }>;
     badge?: boolean;
 }
-export interface InternalDrawerProps {
-    drawers?: {
-        items: Array<DrawerItem>;
-        activeDrawerId?: string;
-        onChange?: NonCancelableEventHandler<string>;
-        onResize?: NonCancelableEventHandler<{
-            size: number;
-            id: string;
-        }>;
-        ariaLabel?: string;
-        overflowAriaLabel?: string;
-        overflowWithBadgeAriaLabel?: string;
-    };
+export interface BetaDrawersProps {
+    items: Array<BetaDrawerItem>;
+    activeDrawerId?: string | null;
+    onChange?: NonCancelableEventHandler<string | null>;
+    onResize?: NonCancelableEventHandler<{
+        size: number;
+        id: string;
+    }>;
+    ariaLabel?: string;
+    overflowAriaLabel?: string;
+    overflowWithBadgeAriaLabel?: string;
 }
+export {};
 //# sourceMappingURL=interfaces.d.ts.map

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

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

package/app-layout/drawer/interfaces.js

@@ -1,2 +1,3 @@
 export {};
+// Beta interfaces end
 //# sourceMappingURL=interfaces.js.map

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

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

package/app-layout/drawer/overflow-menu.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
 import { ButtonDropdownProps, InternalButtonDropdownProps } from '../../button-dropdown/interfaces';
 import { CancelableEventHandler } from '../../internal/events';
-import { DrawerItem } from './interfaces';
+import { PublicDrawer } from '../interfaces';
 interface OverflowMenuProps {
-    items: DrawerItem[];
+    items: Array<PublicDrawer>;
     onItemClick: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
     customTriggerBuilder?: InternalButtonDropdownProps['customTriggerBuilder'];
     ariaLabel?: string;

package/app-layout/drawer/overflow-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/overflow-menu.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,UAAU,iBAAiB;IACzB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,WAAW,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC1E,oBAAoB,CAAC,EAAE,2BAA2B,CAAC,sBAAsB,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAE,EAAE,iBAAiB,eAiB9G"}
+{"version":3,"file":"overflow-menu.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/overflow-menu.tsx"],"names":[],"mappings":";AAIA,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,MAAM,kCAAkC,CAAC;AACpG,OAAO,EAAE,sBAAsB,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC,YAAY,CAAC,CAAC;IAC3B,WAAW,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAC1E,oBAAoB,CAAC,EAAE,2BAA2B,CAAC,sBAAsB,CAAC,CAAC;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAE,EAAE,iBAAiB,eAiB9G"}

package/app-layout/drawer/overflow-menu.js

@@ -3,15 +3,12 @@
 import React from 'react';
 import InternalButtonDropdown from '../../button-dropdown/internal';
 export default function OverflowMenu({ items, onItemClick, customTriggerBuilder, ariaLabel }) {
-    return (React.createElement(InternalButtonDropdown, { items: items.map(item => {
-            var _a;
-            return ({
-                id: item.id,
-                text: ((_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.content) || 'Content',
-                iconName: item.trigger.iconName,
-                iconSvg: item.trigger.iconSvg,
-                badge: item.badge,
-            });
-        }), onItemClick: onItemClick, ariaLabel: ariaLabel, variant: "icon", customTriggerBuilder: customTriggerBuilder, expandToViewport: true }));
+    return (React.createElement(InternalButtonDropdown, { items: items.map(item => ({
+            id: item.id,
+            text: item.ariaLabels.drawerName,
+            iconName: item.trigger.iconName,
+            iconSvg: item.trigger.iconSvg,
+            badge: item.badge,
+        })), onItemClick: onItemClick, ariaLabel: ariaLabel, variant: "icon", customTriggerBuilder: customTriggerBuilder, expandToViewport: true }));
 }
 //# sourceMappingURL=overflow-menu.js.map

package/app-layout/drawer/overflow-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"overflow-menu.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/overflow-menu.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AAYpE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAqB;IAC7G,OAAO,CACL,oBAAC,sBAAsB,IACrB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;;YAAC,OAAA,CAAC;gBACxB,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,IAAI,EAAE,CAAA,MAAA,IAAI,CAAC,UAAU,0CAAE,OAAO,KAAI,SAAS;gBAC3C,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;gBAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;gBAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAA;SAAA,CAAC,EACH,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,oBAAoB,EAAE,oBAAoB,EAC1C,gBAAgB,EAAE,IAAI,GACtB,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalButtonDropdown from '../../button-dropdown/internal';\nimport { ButtonDropdownProps, InternalButtonDropdownProps } from '../../button-dropdown/interfaces';\nimport { CancelableEventHandler } from '../../internal/events';\nimport { DrawerItem } from './interfaces';\n\ninterface OverflowMenuProps {\n  items: DrawerItem[];\n  onItemClick: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  customTriggerBuilder?: InternalButtonDropdownProps['customTriggerBuilder'];\n  ariaLabel?: string;\n}\n\nexport default function OverflowMenu({ items, onItemClick, customTriggerBuilder, ariaLabel }: OverflowMenuProps) {\n  return (\n    <InternalButtonDropdown\n      items={items.map(item => ({\n        id: item.id,\n        text: item.ariaLabels?.content || 'Content',\n        iconName: item.trigger.iconName,\n        iconSvg: item.trigger.iconSvg,\n        badge: item.badge,\n      }))}\n      onItemClick={onItemClick}\n      ariaLabel={ariaLabel}\n      variant=\"icon\"\n      customTriggerBuilder={customTriggerBuilder}\n      expandToViewport={true}\n    />\n  );\n}\n"]}
+{"version":3,"file":"overflow-menu.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/overflow-menu.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,sBAAsB,MAAM,gCAAgC,CAAC;AAYpE,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,oBAAoB,EAAE,SAAS,EAAqB;IAC7G,OAAO,CACL,oBAAC,sBAAsB,IACrB,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;YACxB,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,IAAI,EAAE,IAAI,CAAC,UAAU,CAAC,UAAU;YAChC,QAAQ,EAAE,IAAI,CAAC,OAAO,CAAC,QAAQ;YAC/B,OAAO,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7B,KAAK,EAAE,IAAI,CAAC,KAAK;SAClB,CAAC,CAAC,EACH,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAC,MAAM,EACd,oBAAoB,EAAE,oBAAoB,EAC1C,gBAAgB,EAAE,IAAI,GACtB,CACH,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport InternalButtonDropdown from '../../button-dropdown/internal';\nimport { ButtonDropdownProps, InternalButtonDropdownProps } from '../../button-dropdown/interfaces';\nimport { CancelableEventHandler } from '../../internal/events';\nimport { PublicDrawer } from '../interfaces';\n\ninterface OverflowMenuProps {\n  items: Array<PublicDrawer>;\n  onItemClick: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  customTriggerBuilder?: InternalButtonDropdownProps['customTriggerBuilder'];\n  ariaLabel?: string;\n}\n\nexport default function OverflowMenu({ items, onItemClick, customTriggerBuilder, ariaLabel }: OverflowMenuProps) {\n  return (\n    <InternalButtonDropdown\n      items={items.map(item => ({\n        id: item.id,\n        text: item.ariaLabels.drawerName,\n        iconName: item.trigger.iconName,\n        iconSvg: item.trigger.iconSvg,\n        badge: item.badge,\n      }))}\n      onItemClick={onItemClick}\n      ariaLabel={ariaLabel}\n      variant=\"icon\"\n      customTriggerBuilder={customTriggerBuilder}\n      expandToViewport={true}\n    />\n  );\n}\n"]}

package/app-layout/drawer/resizable-drawer.js

@@ -47,9 +47,9 @@ export const ResizableDrawer = (_a) => {
     const resizeHandle = (React.createElement("div", { ref: refs.slider, role: "slider", tabIndex: 0, "aria-label": (_b = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _b === void 0 ? void 0 : _b.resizeHandle, "aria-valuemax": 100, "aria-valuemin": 0, "aria-valuenow": relativeSize, className: clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider']), onKeyDown: onKeyDown, onPointerDown: onSliderPointerDown },
         React.createElement(ResizeHandler, { className: clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`]) })));
     return (React.createElement(Drawer, Object.assign({}, props, { ref: drawerRefObject, isHidden: !activeDrawer, resizeHandle: !isMobile &&
-            (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: splitPanelStyles['slider-wrapper-side'] }, resizeHandle), drawersAriaLabels: {
+            (activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable) && React.createElement("div", { className: splitPanelStyles['slider-wrapper-side'] }, resizeHandle), ariaLabels: {
             openLabel: (_c = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _c === void 0 ? void 0 : _c.triggerButton,
-            mainLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.content,
+            mainLabel: (_d = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _d === void 0 ? void 0 : _d.drawerName,
             closeLabel: (_e = activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.ariaLabels) === null || _e === void 0 ? void 0 : _e.closeButton,
         } }),
         toolsContent && React.createElement("div", { className: clsx((activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.id) !== TOOLS_DRAWER_ID && styles.hide) }, toolsContent),

package/app-layout/drawer/resizable-drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.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, useState, useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport { ResizableDrawerProps } from './interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\nexport const ResizableDrawer = ({\n  onResize,\n  size,\n  getMaxWidth,\n  refs,\n  activeDrawer,\n  toolsContent,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, isMobile } = props;\n\n  const MIN_WIDTH = activeDrawer?.defaultSize && activeDrawer.defaultSize < 280 ? activeDrawer?.defaultSize : 280;\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = getMaxWidth();\n      setRelativeSize((size / maxSize) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [size, getMaxWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = getMaxWidth();\n    const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (isOpen && id && maxWidth >= MIN_WIDTH) {\n      onResize({ size, id });\n    }\n  };\n\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: refs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <div\n      ref={refs.slider}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={relativeSize}\n      className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    >\n      <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n    </div>\n  );\n\n  return (\n    <Drawer\n      {...props}\n      ref={drawerRefObject}\n      isHidden={!activeDrawer}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n      }\n      drawersAriaLabels={{\n        openLabel: activeDrawer?.ariaLabels?.triggerButton,\n        mainLabel: activeDrawer?.ariaLabels?.content,\n        closeLabel: activeDrawer?.ariaLabels?.closeButton,\n      }}\n    >\n      {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n      {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n    </Drawer>\n  );\n};\n"]}
+{"version":3,"file":"resizable-drawer.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/resizable-drawer.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, useState, useRef } from 'react';\n\nimport { getLimitedValue } from '../../split-panel/utils/size-utils';\nimport { usePointerEvents } from '../utils/use-pointer-events';\nimport { useKeyboardEvents } from '../utils/use-keyboard-events';\nimport { SizeControlProps } from '../utils/interfaces';\nimport { Drawer } from './index';\nimport testutilStyles from '../test-classes/styles.css.js';\n\nimport ResizeHandler from '../../split-panel/icons/resize-handler';\nimport splitPanelStyles from '../../split-panel/styles.css.js';\nimport styles from './styles.css.js';\nimport { ResizableDrawerProps } from './interfaces';\nimport { TOOLS_DRAWER_ID } from '../utils/use-drawers';\n\nexport const ResizableDrawer = ({\n  onResize,\n  size,\n  getMaxWidth,\n  refs,\n  activeDrawer,\n  toolsContent,\n  ...props\n}: ResizableDrawerProps) => {\n  const { isOpen, children, isMobile } = props;\n\n  const MIN_WIDTH = activeDrawer?.defaultSize && activeDrawer.defaultSize < 280 ? activeDrawer?.defaultSize : 280;\n  const [relativeSize, setRelativeSize] = useState(0);\n\n  useEffect(() => {\n    // effects are called inside out in the components tree\n    // wait one frame to allow app-layout to complete its calculations\n    const handle = requestAnimationFrame(() => {\n      const maxSize = getMaxWidth();\n      setRelativeSize((size / maxSize) * 100);\n    });\n    return () => cancelAnimationFrame(handle);\n  }, [size, getMaxWidth]);\n\n  const setSidePanelWidth = (width: number) => {\n    const maxWidth = getMaxWidth();\n    const size = getLimitedValue(MIN_WIDTH, width, maxWidth);\n    const id = activeDrawer?.id;\n\n    if (isOpen && id && maxWidth >= MIN_WIDTH) {\n      onResize({ size, id });\n    }\n  };\n\n  const drawerRefObject = useRef<HTMLDivElement>(null);\n\n  const sizeControlProps: SizeControlProps = {\n    position: 'side',\n    panelRef: drawerRefObject,\n    handleRef: refs.slider,\n    onResize: setSidePanelWidth,\n  };\n\n  const onSliderPointerDown = usePointerEvents(sizeControlProps);\n  const onKeyDown = useKeyboardEvents(sizeControlProps);\n\n  const resizeHandle = (\n    <div\n      ref={refs.slider}\n      role=\"slider\"\n      tabIndex={0}\n      aria-label={activeDrawer?.ariaLabels?.resizeHandle}\n      aria-valuemax={100}\n      aria-valuemin={0}\n      aria-valuenow={relativeSize}\n      className={clsx(splitPanelStyles.slider, splitPanelStyles[`slider-side`], testutilStyles['drawers-slider'])}\n      onKeyDown={onKeyDown}\n      onPointerDown={onSliderPointerDown}\n    >\n      <ResizeHandler className={clsx(splitPanelStyles['slider-icon'], splitPanelStyles[`slider-icon-side`])} />\n    </div>\n  );\n\n  return (\n    <Drawer\n      {...props}\n      ref={drawerRefObject}\n      isHidden={!activeDrawer}\n      resizeHandle={\n        !isMobile &&\n        activeDrawer?.resizable && <div className={splitPanelStyles['slider-wrapper-side']}>{resizeHandle}</div>\n      }\n      ariaLabels={{\n        openLabel: activeDrawer?.ariaLabels?.triggerButton,\n        mainLabel: activeDrawer?.ariaLabels?.drawerName,\n        closeLabel: activeDrawer?.ariaLabels?.closeButton,\n      }}\n    >\n      {toolsContent && <div className={clsx(activeDrawer?.id !== TOOLS_DRAWER_ID && styles.hide)}>{toolsContent}</div>}\n      {activeDrawer?.id !== TOOLS_DRAWER_ID ? children : null}\n    </Drawer>\n  );\n};\n"]}

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

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