npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.379 → 3.0.381 - Mend

@cloudscape-design/components-themeable 3.0.379 → 3.0.381

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 (97) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "c5195e97fcb50c0dd9f38410ab94fdfe0b35840e"
+  "commit": "45dae1a6b271f88e7fc5674497384960a4e43bac"
 }

package/lib/internal/scss/app-layout/visual-refresh/drawers.scss CHANGED Viewed

@@ -85,6 +85,10 @@
   }
 }
+.drawers-mobile-triggers-container {
+  display: flex;
+}
 .drawers-trigger-content {
   align-items: center;
   display: flex;
@@ -105,12 +109,20 @@
       transition-delay: calc(awsui.$motion-duration-refresh-only-fast / 1.5);
     }
   }
+  > .drawers-trigger-overflow {
+    padding: 0 1px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 .drawers-trigger {
   @include styles.media-breakpoint-down(styles.$breakpoint-x-small) {
     width: constants.$sidebar-size-closed;
-    text-align: right;
+    display: flex;
+    justify-content: center;
   }
 }

package/lib/internal/scss/app-layout/visual-refresh/trigger-button.scss CHANGED Viewed

@@ -23,6 +23,7 @@ handleSplitPanelMaxWidth function in the context.
   padding: 0 awsui.$space-s;
   pointer-events: auto;
   width: awsui.$space-layout-toggle-diameter;
+  position: relative;
   @include focus-visible.when-visible {
     @include styles.focus-highlight(3px);
@@ -51,4 +52,24 @@ handleSplitPanelMaxWidth function in the context.
       background: awsui.$color-background-layout-toggle-selected-active;
     }
   }
+  &.badge {
+    clip-path: path(
+      'M38.0215 11.3161C37.1068 11.7545 36.0821 12 35 12C31.134 12 28 8.86599 28 5C28 3.91794 28.2455 2.89322 28.6839 1.97851C26.0575 0.710652 23.1118 0 20 0C8.9543 0 0 8.9543 0 20C0 31.0457 8.9543 40 20 40C31.0457 40 40 31.0457 40 20C40 16.8882 39.2893 13.9425 38.0215 11.3161Z'
+    );
+  }
+}
+.trigger-wrapper {
+  position: relative;
+}
+.dot {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  border-radius: 8px;
+  background-color: awsui.$color-background-badge-icon;
+  top: 0;
+  right: 0;
 }

package/lib/internal/template/app-layout/drawer/drawers-helpers.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+export declare function splitItems<T extends {
+    id: string;
+}>(maybeItems: Array<T> | undefined, splitIndex: number, activeId: string | null | undefined, isMobile?: boolean): {
+    visibleItems: T[];
+    overflowItems: T[];
+};
+//# sourceMappingURL=drawers-helpers.d.ts.map

package/lib/internal/template/app-layout/drawer/drawers-helpers.d.ts.map ADDED Viewed

	@@ -0,0 +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,IAAI,GAAG,SAAS,EACnC,QAAQ,UAAQ;;;EAwBjB"}

package/lib/internal/template/app-layout/drawer/drawers-helpers.js ADDED Viewed

@@ -0,0 +1,24 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export function splitItems(maybeItems, splitIndex, activeId, isMobile = false) {
+    const items = maybeItems !== null && maybeItems !== void 0 ? maybeItems : [];
+    let visibleItems = items.slice(0, splitIndex);
+    let overflowItems = items.slice(splitIndex, items.length);
+    if (overflowItems.length === 1) {
+        visibleItems = items.slice(0, splitIndex + 1);
+        overflowItems = [];
+    }
+    if (isMobile && items.length === 3) {
+        splitIndex = splitIndex + 1;
+    }
+    if (activeId && overflowItems.length > 0 && visibleItems.length > 0) {
+        const activeInOverflow = overflowItems.find(item => item.id === activeId);
+        if (activeInOverflow) {
+            overflowItems.splice(overflowItems.indexOf(activeInOverflow), 1);
+            overflowItems.unshift(visibleItems.pop());
+            visibleItems.push(activeInOverflow);
+        }
+    }
+    return { visibleItems, overflowItems };
+}
+//# sourceMappingURL=drawers-helpers.js.map

package/lib/internal/template/app-layout/drawer/drawers-helpers.js.map ADDED Viewed

@@ -0,0 +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,QAAmC,EACnC,QAAQ,GAAG,KAAK;IAEhB,MAAM,KAAK,GAAG,UAAU,aAAV,UAAU,cAAV,UAAU,GAAI,EAAE,CAAC;IAC/B,IAAI,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;IAC9C,IAAI,aAAa,GAAG,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAE1D,IAAI,aAAa,CAAC,MAAM,KAAK,CAAC,EAAE;QAC9B,YAAY,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,CAAC;QAC9C,aAAa,GAAG,EAAE,CAAC;KACpB;IAED,IAAI,QAAQ,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,EAAE;QAClC,UAAU,GAAG,UAAU,GAAG,CAAC,CAAC;KAC7B;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 | undefined,\n isMobile = false\n) {\n const items = maybeItems ?? [];\n let visibleItems = items.slice(0, splitIndex);\n let overflowItems = items.slice(splitIndex, items.length);\n\n if (overflowItems.length === 1) {\n visibleItems = items.slice(0, splitIndex + 1);\n overflowItems = [];\n }\n\n if (isMobile && items.length === 3) {\n splitIndex = splitIndex + 1;\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/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 function DrawerTriggersBar({ isMobile, topOffset, bottomOffset, drawers, contentClassName, toggleClassName, }: DrawerTriggersBarProps): JSX.Element;
+export declare const DrawerTriggersBar: ({ isMobile, topOffset, bottomOffset, drawers }: 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,EAAc,MAAM,cAAc,CAAC;~~AAkBtF~~,eAAO,MAAM,MAAM,~~2FAkGlB~~,CAAC;~~AAEF~~,~~wBAAgB~~,iBAAiB,~~CAAC~~,~~EAChC~~,~~QAAQ~~,~~EACR,SAAS,EACT,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,eAAe,GAChB,EAAE,sBAAsB,eAoCxB~~"}
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;AAsBtF,eAAO,MAAM,MAAM,2FAmGlB,CAAC;AA6CF,eAAO,MAAM,iBAAiB,mDAAoD,sBAAsB,gBA8EvG,CAAC"}

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

@@ -5,6 +5,10 @@ import React, { useRef } from 'react';
 import { ToggleButton, CloseButton, togglesConfig } from '../toggles';
 import testutilStyles from '../test-classes/styles.css.js';
 import styles from './styles.css.js';
+import OverflowMenu from './overflow-menu';
+import { useContainerQuery } from '@cloudscape-design/component-toolkit';
+import { useDensityMode } from '@cloudscape-design/component-toolkit/internal';
+import { splitItems } from './drawers-helpers';
 // We are using two landmarks per drawer, i.e. two NAVs and two ASIDEs, because of several
 // known bugs in NVDA that cause focus changes within a container to sometimes not be
 // announced. As a result, we use one region for the open button and one region for the
@@ -28,8 +32,8 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
     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: false })));
-    return (React.createElement("div", { ref: ref, className: clsx(styles.drawer, {
+        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, {
             [styles['drawer-closed']]: !isOpen,
             [testutilStyles['drawer-closed']]: !isOpen,
             [styles['drawer-mobile']]: isMobile,
@@ -62,15 +66,40 @@ export const Drawer = React.forwardRef(({ contentClassName, toggleClassName, clo
                     } }),
                 children))));
 });
-export function DrawerTriggersBar({ isMobile, topOffset, bottomOffset, drawers, contentClassName, toggleClassName, }) {
-    var _a;
+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 }) => {
+    const containerRef = React.useRef(null);
+    const [containerHeight, triggersContainerRef] = useContainerQuery(rect => rect.contentBoxHeight);
+    const isCompactMode = useDensityMode(containerRef) === 'compact';
+    const getIndexOfOverflowItem = () => {
+        if (containerHeight) {
+            const ITEM_HEIGHT = isCompactMode ? 34 : 38;
+            const overflowSpot = containerHeight / 1.5;
+            const index = Math.floor(overflowSpot / ITEM_HEIGHT);
+            return index;
+        }
+        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);
     return (React.createElement("div", { className: clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {
             [styles['drawer-mobile']]: isMobile,
-        }) },
-        React.createElement("div", { style: { top: topOffset, bottom: bottomOffset }, className: styles['drawer-content'] }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers-wrapper'], contentClassName) }, (_a = drawers === null || drawers === void 0 ? void 0 : drawers.items) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
-            var _a;
-            return (React.createElement("span", { key: index, className: clsx(styles['drawer-trigger'], drawers.activeDrawerId === item.id && styles['drawer-trigger-active']), onClick: () => drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined }) },
-                React.createElement(ToggleButton, { className: toggleClassName, iconName: item.trigger.iconName, iconSvg: item.trigger.iconSvg, ariaLabel: (_a = item.ariaLabels) === null || _a === void 0 ? void 0 : _a.triggerButton, ariaExpanded: drawers.activeDrawerId !== undefined, testId: `awsui-app-layout-trigger-${item.id}` })));
-        }))))));
-}
+        }), ref: containerRef },
+        React.createElement("div", { ref: triggersContainerRef, style: { top: topOffset, bottom: bottomOffset }, className: clsx(styles['drawer-content']), role: "toolbar", "aria-orientation": "vertical" }, !isMobile && (React.createElement("aside", { "aria-label": drawers === null || drawers === void 0 ? void 0 : drawers.ariaLabel, className: clsx(styles['drawer-triggers-wrapper'], testutilStyles['drawers-desktop-triggers-container']) },
+            React.createElement(React.Fragment, null,
+                visibleItems.map((item, index) => {
+                    var _a;
+                    return (React.createElement(DrawerTrigger, { key: index, testUtilsClassName: testutilStyles['drawers-trigger'], 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.onChange({
+                                activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined,
+                            });
+                        } }));
+                }),
+                overflowItems.length > 0 && (React.createElement("div", { className: clsx(styles['drawer-trigger']) },
+                    React.createElement(OverflowMenu, { ariaLabel: 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,
+                            });
+                        } })))))))));
+};
 //# sourceMappingURL=index.js.map

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, DrawerItem } 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 contentClassName,\n toggleClassName,\n closeClassName,\n width,\n type,\n toggleRefs,\n topOffset,\n bottomOffset,\n ariaLabels,\n drawersAriaLabels,\n children,\n isOpen,\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={false}\n />\n </TagName>\n );\n\n return (\n <div\n ref={ref}\n className={clsx(styles.drawer, {\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 && 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\nexport function DrawerTriggersBar({\n isMobile,\n topOffset,\n bottomOffset,\n drawers,\n contentClassName,\n toggleClassName,\n}: DrawerTriggersBarProps) {\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n })}\n >\n <div style={{ top: topOffset, bottom: bottomOffset }} className={styles['drawer-content']}>\n {!isMobile && (\n <aside aria-label={drawers?.ariaLabel} className={clsx(styles['drawer-triggers-wrapper'], contentClassName)}>\n {drawers?.items?.map((item: DrawerItem, index: number) => (\n <span\n key={index}\n className={clsx(\n styles['drawer-trigger'],\n drawers.activeDrawerId === item.id && styles['drawer-trigger-active']\n )}\n onClick={() =>\n drawers.onChange({ activeDrawerId: item.id !== drawers.activeDrawerId ? item.id : undefined })\n }\n >\n <ToggleButton\n className={toggleClassName}\n iconName={item.trigger.iconName}\n iconSvg={item.trigger.iconSvg}\n ariaLabel={item.ariaLabels?.triggerButton}\n ariaExpanded={drawers.activeDrawerId !== undefined}\n testId={`awsui-app-layout-trigger-${item.id}`}\n />\n </span>\n ))}\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, 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';\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 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['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 && 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\n return (\n <div\n className={clsx(styles.drawer, styles['drawer-closed'], testutilStyles['drawer-closed'], {\n [styles['drawer-mobile']]: isMobile,\n })}\n ref={containerRef}\n >\n <div\n ref={triggersContainerRef}\n style={{ top: topOffset, bottom: bottomOffset }}\n className={clsx(styles['drawer-content'])}\n role=\"toolbar\"\n aria-orientation=\"vertical\"\n >\n {!isMobile && (\n <aside\n aria-label={drawers?.ariaLabel}\n className={clsx(styles['drawer-triggers-wrapper'], testutilStyles['drawers-desktop-triggers-container'])}\n >\n <>\n {visibleItems.map((item, index) => {\n return (\n <DrawerTrigger\n key={index}\n testUtilsClassName={testutilStyles['drawers-trigger']}\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?.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={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 </>\n </aside>\n )}\n </div>\n </div>\n );\n};\n"]}

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

@@ -52,8 +52,6 @@ export interface ResizableDrawerProps extends DesktopDrawerProps {
     refs: DrawerFocusControlRefs;
 }
 export interface DrawerTriggersBarProps {
-    contentClassName: string;
-    toggleClassName: string;
     topOffset: number | undefined;
     bottomOffset: number | undefined;
     isMobile: boolean;
@@ -64,6 +62,7 @@ export interface DrawerTriggersBarProps {
             activeDrawerId: string | undefined;
         }) => void;
         ariaLabel?: string;
+        overflowAriaLabel?: string;
     };
 }
 export interface DrawerItemAriaLabels {
@@ -86,6 +85,7 @@ export interface DrawerItem {
         size: number;
         id: string;
     }>;
+    badge?: boolean;
 }
 export interface InternalDrawerProps {
     drawers?: {
@@ -97,6 +97,7 @@ export interface InternalDrawerProps {
             id: string;
         }>;
         ariaLabel?: string;
+        overflowAriaLabel?: string;
     };
 }
 //# sourceMappingURL=interfaces.d.ts.map

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,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,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,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,cAAc,CAAC,MAAM,GAAG,SAAS,CAAC;IAC9C,iBAAiB,CAAC,EAAE;QAAE,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,UAAU,EAAE,MAAM,GAAG,SAAS,CAAC;QAAC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAA;KAAE,CAAC;IACrH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,MAAM,OAAO,aAAa,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;IAChB,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,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;QACnC,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;KAC1E,CAAC;IACF,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAChC;AAED,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,YAAY,CAAC,EAAE,UAAU,CAAC;IAC1B,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;CAC9B;AAED,MAAM,WAAW,sBAAsB;IACrC,~~gBAAgB,EAAE,MAAM,CAAC;IACzB,eAAe,EAAE,MAAM,CAAC;IACxB,~~SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAC9B,YAAY,EAAE,MAAM,GAAG,SAAS,CAAC;IACjC,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,EAAE,CAAC,YAAY,EAAE;YAAE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAA;SAAE,KAAK,IAAI,CAAC;QACzE,SAAS,CAAC,EAAE,MAAM,CAAC;~~KACpB~~,CAAC;CACH;AAED,MAAM,WAAW,oBAAoB;IACnC,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,MAAM,WAAW,UAAU;IACzB,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,oBAAoB,CAAC;IACjC,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;~~CACpE~~;AAED,MAAM,WAAW,mBAAmB;IAClC,OAAO,CAAC,EAAE;QACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;QACzB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,QAAQ,CAAC,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAC;QAC7C,QAAQ,CAAC,EAAE,yBAAyB,CAAC;YAAE,IAAI,EAAE,MAAM,CAAC;YAAC,EAAE,EAAE,MAAM,CAAA;SAAE,CAAC,CAAC;QACnE,SAAS,CAAC,EAAE,MAAM,CAAC;~~KACpB~~,CAAC;CACH"}
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":"","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 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}\n\nexport interface DrawerTriggersBarProps {\n ~~contentClassName: string;\n toggleClassName: string;\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 };\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}\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 };\n}\n"]}
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 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}\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 };\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 };\n}\n"]}

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { ButtonDropdownProps, InternalButtonDropdownProps } from '../../button-dropdown/interfaces';
+import { CancelableEventHandler } from '../../internal/events';
+import { DrawerItem } from './interfaces';
+interface OverflowMenuProps {
+    items: DrawerItem[];
+    onItemClick: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;
+    customTriggerBuilder?: InternalButtonDropdownProps['customTriggerBuilder'];
+    ariaLabel?: string;
+}
+export default function OverflowMenu({ items, onItemClick, customTriggerBuilder, ariaLabel }: OverflowMenuProps): JSX.Element;
+export {};
+//# sourceMappingURL=overflow-menu.d.ts.map

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

@@ -0,0 +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"}

package/lib/internal/template/app-layout/drawer/overflow-menu.js ADDED Viewed

@@ -0,0 +1,17 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+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 }));
+}
+//# sourceMappingURL=overflow-menu.js.map

package/lib/internal/template/app-layout/drawer/overflow-menu.js.map ADDED Viewed

@@ -0,0 +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"]}

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

@@ -306,6 +306,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                             }
                         },
                         ariaLabel: drawersProps.ariaLabel,
+                        overflowAriaLabel: drawersProps.overflowAriaLabel,
                     }
                     : undefined }, breadcrumbs)),
             React.createElement("div", { className: clsx(styles.layout, disableBodyScroll && styles['layout-no-scroll']) },
@@ -357,7 +358,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                                 onActiveDrawerChange(changeDetail.activeDrawerId);
                             },
                         }, size: !isResizeInvalid ? activeDrawerSize : toolsWidth, onResize: changeDetail => onActiveDrawerResize(changeDetail), refs: drawerRefs, getMaxWidth: getDrawerMaxWidth }, activeDrawer === null || activeDrawer === void 0 ? void 0 : activeDrawer.content)) : (React.createElement(Drawer, { contentClassName: testutilStyles.tools, toggleClassName: testutilStyles['tools-toggle'], closeClassName: testutilStyles['tools-close'], ariaLabels: ariaLabels, width: effectiveToolsWidth, bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, onToggle: onToolsToggle, isOpen: toolsOpen, toggleRefs: toolsRefs, type: "tools", onLoseFocus: loseToolsFocus }, tools))),
-                hasDrawers && (React.createElement(DrawerTriggersBar, { contentClassName: testutilStyles['drawers-desktop-triggers-container'], toggleClassName: testutilStyles['drawers-trigger'], bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: {
+                hasDrawers && (React.createElement(DrawerTriggersBar, { bottomOffset: footerHeight, topOffset: headerHeight, isMobile: isMobile, drawers: {
                         items: drawers,
                         activeDrawerId: activeDrawerId,
                         onChange: changeDetail => {
@@ -369,6 +370,7 @@ const OldAppLayout = React.forwardRef((_a, ref) => {
                             onActiveDrawerChange(changeDetail.activeDrawerId);
                         },
                         ariaLabel: drawersProps.ariaLabel,
+                        overflowAriaLabel: drawersProps.overflowAriaLabel,
                     } }))))));
 });
 applyDisplayName(AppLayout, 'AppLayout');