npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.437 → 3.0.439 - Mend

@cloudscape-design/components-themeable 3.0.437 → 3.0.439

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (72) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "5916c50679362422d86fef72d7c60ce4a8e1ce31"
+  "commit": "697743e851a78e3a7a6ffba50b806d8774d8833c"
 }

package/lib/internal/scss/area-chart/styles.scss CHANGED Viewed

@@ -32,6 +32,6 @@
 }
 .popover-divider {
-  margin: awsui.$space-xxs 0;
+  margin: awsui.$space-xs 0;
   border-bottom: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
 }

package/lib/internal/scss/internal/components/chart-popover-footer/styles.scss ADDED Viewed

@@ -0,0 +1,15 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+@use '../../styles/tokens' as awsui;
+.root {
+  margin-top: awsui.$space-xs;
+  /* stylelint-disable selector-max-type */
+  > hr {
+    border: none;
+    border-top: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+    margin: awsui.$space-xs 0;
+  }
+}

package/lib/internal/template/app-layout/drawer/index.d.ts CHANGED Viewed

@@ -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, activeDrawerId, ariaLabels, drawers, onDrawerChange, }: DrawerTriggersBarProps) => JSX.Element;
+export declare const DrawerTriggersBar: ({ isMobile, topOffset, bottomOffset, activeDrawerId, ariaLabels, drawers, drawerRefs, onDrawerChange, }: DrawerTriggersBarProps) => JSX.Element;
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/app-layout/drawer/index.d.ts.map CHANGED Viewed

	@@ -1 +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,EAAE,MAAM,cAAc,CAAC;AAwB1E,eAAO,MAAM,MAAM,2FAoGlB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,~~gGAQ3B~~,sBAAsB,~~gBAmFxB~~,CAAC"}
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,EAAE,MAAM,cAAc,CAAC;AAwB1E,eAAO,MAAM,MAAM,2FAoGlB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,4GAS3B,sBAAsB,gBAyFxB,CAAC"}

package/lib/internal/template/app-layout/drawer/index.js CHANGED Viewed

@@ -69,10 +69,14 @@ export const Drawer = React.forwardRef(({ id, contentClassName, toggleClassName,
 });
 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, activeDrawerId, ariaLabels, drawers, onDrawerChange, }) => {
+export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, activeDrawerId, ariaLabels, drawers, drawerRefs, onDrawerChange, }) => {
     const containerRef = React.useRef(null);
+    const previousActiveDrawerId = useRef(activeDrawerId);
     const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);
     const isCompactMode = useDensityMode(containerRef) === 'compact';
+    if (activeDrawerId) {
+        previousActiveDrawerId.current = activeDrawerId;
+    }
     const getIndexOfOverflowItem = () => {
         if (containerHeight) {
             const ITEM_HEIGHT = isCompactMode ? 34 : 38;
@@ -96,7 +100,7 @@ export const DrawerTriggersBar = ({ isMobile, topOffset, bottomOffset, activeDra
             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: 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
+                    return (React.createElement(DrawerTrigger, { key: index, testUtilsClassName: clsx(testutilStyles['drawers-trigger'], item.id === TOOLS_DRAWER_ID && testutilStyles['tools-toggle']), ariaExpanded: activeDrawerId === item.id, ref: item.id === previousActiveDrawerId.current ? drawerRefs.toggle : undefined, 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 }));
                 }),

package/lib/internal/template/app-layout/drawer/index.js.map CHANGED Viewed

	@@ -1 +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 } 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"]}
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 } 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 { AppLayoutProps } 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: AppLayoutProps.Drawer['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 drawerRefs,\n onDrawerChange,\n}: DrawerTriggersBarProps) => {\n const containerRef = React.useRef<HTMLDivElement>(null);\n const previousActiveDrawerId = useRef(activeDrawerId);\n const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);\n const isCompactMode = useDensityMode(containerRef) === 'compact';\n\n if (activeDrawerId) {\n previousActiveDrawerId.current = activeDrawerId;\n }\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 ref={item.id === previousActiveDrawerId.current ? drawerRefs.toggle : undefined}\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/lib/internal/template/app-layout/drawer/interfaces.d.ts CHANGED Viewed

@@ -1,9 +1,9 @@
 import React from 'react';
 import { togglesConfig } from '../toggles';
-import { PublicAriaLabelsWithDrawers, PublicDrawer } from '../interfaces';
+import { AppLayoutProps } from '../interfaces';
 import { IconProps } from '../../icon/interfaces';
 import { NonCancelableEventHandler } from '../../internal/events';
-import { DrawerFocusControlRefs } from '../utils/use-drawer-focus-control';
+import { FocusControlRefs } from '../utils/use-focus-control';
 export interface DesktopDrawerProps {
     id?: string;
     contentClassName: string;
@@ -38,24 +38,25 @@ export interface DesktopDrawerProps {
     resizeHandle?: React.ReactNode;
 }
 export interface ResizableDrawerProps extends DesktopDrawerProps {
-    activeDrawer?: PublicDrawer;
+    activeDrawer: AppLayoutProps.Drawer | undefined;
     onResize: (resizeDetail: {
         size: number;
         id: string;
     }) => void;
     size: number;
     getMaxWidth: () => number;
-    refs: DrawerFocusControlRefs;
-    toolsContent?: React.ReactNode;
+    refs: FocusControlRefs;
+    toolsContent: React.ReactNode;
 }
 export interface DrawerTriggersBarProps {
     topOffset: number | undefined;
     bottomOffset: number | undefined;
     isMobile: boolean;
-    drawers: Array<PublicDrawer>;
+    drawers: Array<AppLayoutProps.Drawer>;
     activeDrawerId: string | null;
     onDrawerChange: (newDrawerId: string | null) => void;
-    ariaLabels: PublicAriaLabelsWithDrawers | undefined;
+    ariaLabels: AppLayoutProps['ariaLabels'];
+    drawerRefs: FocusControlRefs;
 }
 interface BetaDrawerItemAriaLabels {
     content?: string;

package/lib/internal/template/app-layout/drawer/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3C,OAAO,EAAE,~~2BAA2B~~,EAAE,~~YAAY,EAAE,~~MAAM,eAAe,CAAC;~~AAC1E~~,OAAO,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClD,OAAO,EAAE,yBAAyB,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,EAAE,~~sBAAsB~~,EAAE,MAAM,~~mCAAmC~~,CAAC;~~AAE3E~~,MAAM,WAAW,kBAAkB;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,EAAE,MAAM,CAAC;IACvB,UAAU,EAAE;QACV,MAAM,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;QACrC,KAAK,EAAE,KAAK,CAAC,GAAG,CAAC;YAAE,KAAK,IAAI,IAAI,CAAA;SAAE,CAAC,CAAC;KACrC,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,UAAU,EAAE;QACV,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;QAC/B,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAC9B,YAAY,CAAC,EAAE,MAAM,CAAC;KACvB,CAAC;IACF,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACpC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAChD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,YAAY,CAAC,~~EAAE~~,~~YAAY~~,CAAC;~~IAC5B~~,QAAQ,EAAE,CAAC,YAAY,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAC/D,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,EAAE,MAAM,MAAM,CAAC;IAC1B,IAAI,EAAE,~~sBAAsB~~,CAAC;~~IAC7B~~,YAAY,~~CAAC,~~EAAE,KAAK,CAAC,SAAS,CAAC;~~CAChC~~;AAED,MAAM,WAAW,sBAAsB;IACrC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,KAAK,CAAC,~~YAAY~~,CAAC,CAAC;~~IAC7B~~,cAAc,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9B,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACrD,UAAU,EAAE,~~2BAA2B~~,~~GAAG~~,~~SAAS~~,CAAC;~~CACrD~~;AAID,UAAU,wBAAwB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,UAAU,cAAc;IACtB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,OAAO,EAAE;QACP,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC3B,CAAC;IACF,UAAU,EAAE,wBAAwB,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,yBAAyB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC;IAC7B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,yBAAyB,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACpD,QAAQ,CAAC,EAAE,yBAAyB,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;CACrC"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/app-layout/drawer/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["app-layout/drawer/interfaces.ts"],"names":[],"mappings":";AA4FA,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 { AppLayoutProps } from '../interfaces';\nimport { IconProps } from '../../icon/interfaces';\nimport { NonCancelableEventHandler } from '../../internal/events';\n\nimport { FocusControlRefs } from '../utils/use-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: AppLayoutProps.Drawer \| undefined;\n onResize: (resizeDetail: { size: number; id: string }) => void;\n size: number;\n getMaxWidth: () => number;\n refs: FocusControlRefs;\n toolsContent: React.ReactNode;\n}\n\nexport interface DrawerTriggersBarProps {\n topOffset: number \| undefined;\n bottomOffset: number \| undefined;\n isMobile: boolean;\n drawers: Array<AppLayoutProps.Drawer>;\n activeDrawerId: string \| null;\n onDrawerChange: (newDrawerId: string \| null) => void;\n ariaLabels: AppLayoutProps['ariaLabels'];\n drawerRefs: FocusControlRefs;\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/lib/internal/template/app-layout/drawer/overflow-menu.d.ts CHANGED Viewed

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

package/lib/internal/template/app-layout/drawer/overflow-menu.d.ts.map CHANGED Viewed

	@@ -1 +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,~~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"}
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,cAAc,EAAE,MAAM,eAAe,CAAC;AAE/C,UAAU,iBAAiB;IACzB,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC;IACpC,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/lib/internal/template/app-layout/drawer/overflow-menu.js.map CHANGED Viewed

	@@ -1 +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,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"]}
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,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 { AppLayoutProps } from '../interfaces';\n\ninterface OverflowMenuProps {\n items: Array<AppLayoutProps.Drawer>;\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/lib/internal/template/app-layout/index.d.ts.map CHANGED Viewed

	@@ -1 +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;~~AA2nBF~~,eAAe,SAAS,CAAC"}
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;AAmC9C,OAAO,EAAE,cAAc,EAAE,CAAC;AAE1B,QAAA,MAAM,SAAS,2FAiCd,CAAC;AAuoBF,eAAe,SAAS,CAAC"}

package/lib/internal/template/app-layout/index.js CHANGED Viewed

@@ -31,12 +31,11 @@ import { useStableCallback, warnOnce } from '@cloudscape-design/component-toolki
 import RefreshedAppLayout from './visual-refresh';
 import { useInternalI18n } from '../i18n/context';
 import { useSplitPanelFocusControl } from './utils/use-split-panel-focus-control';
-import { useDrawerFocusControl } from './utils/use-drawer-focus-control';
 import { TOOLS_DRAWER_ID, useDrawers } from './utils/use-drawers';
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { togglesConfig } from './toggles';
 const AppLayout = React.forwardRef((_a, ref) => {
-    var _b, _c, _d, _e, _f, _g, _h;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { contentType = 'default', headerSelector = '#b #h', footerSelector = '#b #f' } = _a, rest = __rest(_a, ["contentType", "headerSelector", "footerSelector"]);
     const { __internalRootRef } = useBaseComponent('AppLayout');
     const isRefresh = useVisualRefresh();
@@ -49,6 +48,9 @@ const AppLayout = React.forwardRef((_a, ref) => {
         tools: i18n('ariaLabels.tools', (_f = rest.ariaLabels) === null || _f === void 0 ? void 0 : _f.tools),
         toolsClose: i18n('ariaLabels.toolsClose', (_g = rest.ariaLabels) === null || _g === void 0 ? void 0 : _g.toolsClose),
         toolsToggle: i18n('ariaLabels.toolsToggle', (_h = rest.ariaLabels) === null || _h === void 0 ? void 0 : _h.toolsToggle),
+        drawers: i18n('ariaLabels.drawers', (_j = rest.ariaLabels) === null || _j === void 0 ? void 0 : _j.drawers),
+        drawersOverflow: i18n('ariaLabels.drawersOverflow', (_k = rest.ariaLabels) === null || _k === void 0 ? void 0 : _k.drawersOverflow),
+        drawersOverflowWithBadge: i18n('ariaLabels.drawersOverflowWithBadge', (_l = rest.ariaLabels) === null || _l === void 0 ? void 0 : _l.drawersOverflowWithBadge),
     };
     // This re-builds the props including the default values
     const props = Object.assign(Object.assign({ contentType, headerSelector, footerSelector }, rest), { ariaLabels });
@@ -57,7 +59,7 @@ const AppLayout = React.forwardRef((_a, ref) => {
 });
 const OldAppLayout = React.forwardRef((_a, ref) => {
     var _b, _c, _d, _e, _f;
-    var { navigation, navigationWidth = 280, navigationHide, navigationOpen: controlledNavigationOpen, tools, toolsWidth = 290, toolsHide, toolsOpen: controlledToolsOpen, breadcrumbs, notifications, stickyNotifications, contentHeader, disableContentHeaderOverlap, content, contentType = 'default', disableContentPaddings, disableBodyScroll, maxContentWidth, minContentWidth, headerSelector = '#b #h', footerSelector = '#b #f', ariaLabels, splitPanel, splitPanelSize: controlledSplitPanelSize, splitPanelOpen: controlledSplitPanelOpen, splitPanelPreferences: controlledSplitPanelPreferences, onSplitPanelPreferencesChange, onSplitPanelResize, onSplitPanelToggle, onNavigationChange, onToolsChange } = _a, props = __rest(_a, ["navigation", "navigationWidth", "navigationHide", "navigationOpen", "tools", "toolsWidth", "toolsHide", "toolsOpen", "breadcrumbs", "notifications", "stickyNotifications", "contentHeader", "disableContentHeaderOverlap", "content", "contentType", "disableContentPaddings", "disableBodyScroll", "maxContentWidth", "minContentWidth", "headerSelector", "footerSelector", "ariaLabels", "splitPanel", "splitPanelSize", "splitPanelOpen", "splitPanelPreferences", "onSplitPanelPreferencesChange", "onSplitPanelResize", "onSplitPanelToggle", "onNavigationChange", "onToolsChange"]);
+    var { navigation, navigationWidth = 280, navigationHide, navigationOpen: controlledNavigationOpen, tools, toolsWidth = 290, toolsHide, toolsOpen: controlledToolsOpen, breadcrumbs, notifications, stickyNotifications, contentHeader, disableContentHeaderOverlap, content, contentType = 'default', disableContentPaddings, disableBodyScroll, maxContentWidth, minContentWidth, headerSelector = '#b #h', footerSelector = '#b #f', ariaLabels, splitPanel, splitPanelSize: controlledSplitPanelSize, splitPanelOpen: controlledSplitPanelOpen, splitPanelPreferences: controlledSplitPanelPreferences, onSplitPanelPreferencesChange, onSplitPanelResize, onSplitPanelToggle, onNavigationChange, onToolsChange, drawers: controlledDrawers, onDrawerChange, activeDrawerId: controlledActiveDrawerId } = _a, rest = __rest(_a, ["navigation", "navigationWidth", "navigationHide", "navigationOpen", "tools", "toolsWidth", "toolsHide", "toolsOpen", "breadcrumbs", "notifications", "stickyNotifications", "contentHeader", "disableContentHeaderOverlap", "content", "contentType", "disableContentPaddings", "disableBodyScroll", "maxContentWidth", "minContentWidth", "headerSelector", "footerSelector", "ariaLabels", "splitPanel", "splitPanelSize", "splitPanelOpen", "splitPanelPreferences", "onSplitPanelPreferencesChange", "onSplitPanelResize", "onSplitPanelToggle", "onNavigationChange", "onToolsChange", "drawers", "onDrawerChange", "activeDrawerId"]);
     if (isDevelopment) {
         if (controlledToolsOpen && toolsHide) {
             warnOnce('AppLayout', `You have enabled both the \`toolsOpen\` prop and the \`toolsHide\` prop. This is not supported. Set \`toolsOpen\` to \`false\` when you set \`toolsHide\` to \`true\`.`);
@@ -73,7 +75,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
         focusToolsButtons();
         fireNonCancelableEvent(onToolsChange, { open });
     };
-    const { drawers, activeDrawer, activeDrawerSize, activeDrawerId, ariaLabelsWithDrawers, onActiveDrawerChange, onActiveDrawerResize, } = useDrawers(props, ariaLabels, {
+    const { drawers, activeDrawer, activeDrawerSize, activeDrawerId, ariaLabelsWithDrawers, onActiveDrawerChange, onActiveDrawerResize, } = useDrawers(Object.assign({ drawers: controlledDrawers, onDrawerChange, activeDrawerId: controlledActiveDrawerId }, rest), ariaLabels, {
         ariaLabels,
         tools,
         toolsOpen,
@@ -81,10 +83,11 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
         toolsWidth,
         onToolsToggle,
     });
+    ariaLabels = ariaLabelsWithDrawers;
     const hasDrawers = !!drawers;
     const { refs: navigationRefs, setFocus: focusNavButtons } = useFocusControl(navigationOpen);
     const { refs: toolsRefs, setFocus: focusToolsButtons, loseFocus: loseToolsFocus, } = useFocusControl(toolsOpen || activeDrawer !== undefined, true);
-    const { refs: drawerRefs, setFocus: focusDrawersButtons, loseFocus: loseDrawersFocus, setLastInteraction: setDrawerLastInteraction, } = useDrawerFocusControl([activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.resizable], toolsOpen || activeDrawer !== undefined, true);
+    const { refs: drawerRefs, setFocus: focusDrawersButtons, loseFocus: loseDrawersFocus, } = useFocusControl(!!activeDrawerId, true, activeDrawerId);
     const onNavigationToggle = useStableCallback((open) => {
         setNavigationOpen(open);
         focusNavButtons();
@@ -301,6 +304,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
             }
         },
         focusToolsClose: () => focusToolsButtons(true),
+        focusActiveDrawer: () => focusDrawersButtons(true),
         focusSplitPanel: () => { var _a; return (_a = splitPanelRefs.slider.current) === null || _a === void 0 ? void 0 : _a.focus(); },
     }));
     const splitPanelBottomOffset = (_b = (!splitPanelDisplayed || finalSplitPanePosition !== 'bottom'
@@ -310,12 +314,11 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
             : splitPanelReportedHeaderHeight)) !== null && _b !== void 0 ? _b : undefined;
     const [mobileBarHeight, mobileBarRef] = useContainerQuery(rect => rect.contentBoxHeight);
     return (React.createElement("div", { className: clsx(styles.root, testutilStyles.root, disableBodyScroll && styles['root-no-scroll']), ref: rootRef, style: contentHeightStyle },
-        isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabelsWithDrawers, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, mobileBarRef: mobileBarRef, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
+        isMobile && (!toolsHide || !navigationHide || breadcrumbs) && (React.createElement(MobileToolbar, { anyPanelOpen: anyPanelOpen, toggleRefs: { navigation: navigationRefs.toggle, tools: toolsRefs.toggle }, topOffset: headerHeight, ariaLabels: ariaLabels, navigationHide: navigationHide, toolsHide: toolsHide, onNavigationOpen: () => onNavigationToggle(true), onToolsOpen: () => onToolsToggle(true), unfocusable: anyPanelOpen, mobileBarRef: mobileBarRef, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
                 onActiveDrawerChange(newDrawerId);
                 if (newDrawerId !== activeDrawerId) {
                     focusToolsButtons();
                     focusDrawersButtons();
-                    setDrawerLastInteraction({ type: 'open' });
                 }
             } }, breadcrumbs)),
         React.createElement("div", { className: clsx(styles.layout, disableBodyScroll && styles['layout-no-scroll']) },
@@ -361,18 +364,17 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                 }, width: !isResizeInvalid ? activeDrawerSize : toolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: isOpen => {
                     if (!isOpen) {
                         focusToolsButtons();
-                        setDrawerLastInteraction({ type: 'close' });
+                        focusDrawersButtons();
                         onActiveDrawerChange(null);
                     }
-                }, isOpen: true, hideOpenButton: true, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, size: !isResizeInvalid ? activeDrawerSize : toolsWidth, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, getMaxWidth: getDrawerMaxWidth, toolsContent: (_f = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _f === void 0 ? void 0 : _f.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
-            hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
+                }, isOpen: true, hideOpenButton: true, toggleRefs: drawerRefs, type: "tools", onLoseFocus: loseDrawersFocus, activeDrawer: activeDrawer, size: !isResizeInvalid ? activeDrawerSize : toolsWidth, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, getMaxWidth: getDrawerMaxWidth, toolsContent: (_f = drawers === null || drawers === void 0 ? void 0 : drawers.find(drawer => drawer.id === TOOLS_DRAWER_ID)) === null || _f === void 0 ? void 0 : _f.content }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (!toolsHide && (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: togglesConfig.tools.getLabels(ariaLabels), width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
+            hasDrawers && drawers.length > 0 && (React.createElement(DrawerTriggersBar, { drawerRefs: drawerRefs, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: drawers, activeDrawerId: activeDrawerId, onDrawerChange: newDrawerId => {
                     if (activeDrawerId !== newDrawerId) {
                         focusToolsButtons();
                         focusDrawersButtons();
-                        setDrawerLastInteraction({ type: 'open' });
                     }
                     onActiveDrawerChange(newDrawerId);
-                }, ariaLabels: ariaLabelsWithDrawers })))));
+                }, ariaLabels: ariaLabels })))));
 });
 applyDisplayName(AppLayout, 'AppLayout');
 export default AppLayout;