@cloudscape-design/components 3.0.294 → 3.0.296

package/table/styles.selectors.js

@@ -2,38 +2,40 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_wih1l_o3ri9_97",
-  "tools": "awsui_tools_wih1l_o3ri9_108",
-  "tools-filtering": "awsui_tools-filtering_wih1l_o3ri9_114",
-  "tools-align-right": "awsui_tools-align-right_wih1l_o3ri9_128",
-  "tools-pagination": "awsui_tools-pagination_wih1l_o3ri9_132",
-  "tools-preferences": "awsui_tools-preferences_wih1l_o3ri9_132",
-  "tools-small": "awsui_tools-small_wih1l_o3ri9_138",
-  "table": "awsui_table_wih1l_o3ri9_144",
-  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_o3ri9_150",
-  "wrapper": "awsui_wrapper_wih1l_o3ri9_154",
-  "variant-stacked": "awsui_variant-stacked_wih1l_o3ri9_162",
-  "variant-container": "awsui_variant-container_wih1l_o3ri9_162",
-  "variant-embedded": "awsui_variant-embedded_wih1l_o3ri9_166",
-  "has-header": "awsui_has-header_wih1l_o3ri9_169",
-  "has-footer": "awsui_has-footer_wih1l_o3ri9_172",
-  "cell-merged": "awsui_cell-merged_wih1l_o3ri9_186",
-  "cell-merged-content": "awsui_cell-merged-content_wih1l_o3ri9_197",
-  "empty": "awsui_empty_wih1l_o3ri9_212",
-  "loading": "awsui_loading_wih1l_o3ri9_216",
-  "selection-control": "awsui_selection-control_wih1l_o3ri9_225",
-  "selection-control-header": "awsui_selection-control-header_wih1l_o3ri9_232",
-  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_o3ri9_237",
-  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_o3ri9_247",
-  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_o3ri9_250",
-  "dark-header": "awsui_dark-header_wih1l_o3ri9_258",
-  "header-secondary": "awsui_header-secondary_wih1l_o3ri9_263",
-  "table-has-header": "awsui_table-has-header_wih1l_o3ri9_279",
-  "header-controls": "awsui_header-controls_wih1l_o3ri9_283",
-  "footer-wrapper": "awsui_footer-wrapper_wih1l_o3ri9_297",
-  "footer": "awsui_footer_wih1l_o3ri9_297",
-  "thead-active": "awsui_thead-active_wih1l_o3ri9_306",
-  "row": "awsui_row_wih1l_o3ri9_307",
-  "row-selected": "awsui_row-selected_wih1l_o3ri9_308"
+  "root": "awsui_root_wih1l_16d38_97",
+  "tools": "awsui_tools_wih1l_16d38_108",
+  "tools-filtering": "awsui_tools-filtering_wih1l_16d38_114",
+  "tools-align-right": "awsui_tools-align-right_wih1l_16d38_128",
+  "tools-pagination": "awsui_tools-pagination_wih1l_16d38_132",
+  "tools-preferences": "awsui_tools-preferences_wih1l_16d38_132",
+  "tools-small": "awsui_tools-small_wih1l_16d38_138",
+  "table": "awsui_table_wih1l_16d38_144",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_16d38_150",
+  "wrapper": "awsui_wrapper_wih1l_16d38_154",
+  "variant-stacked": "awsui_variant-stacked_wih1l_16d38_163",
+  "variant-container": "awsui_variant-container_wih1l_16d38_163",
+  "variant-embedded": "awsui_variant-embedded_wih1l_16d38_167",
+  "variant-borderless": "awsui_variant-borderless_wih1l_16d38_167",
+  "has-header": "awsui_has-header_wih1l_16d38_170",
+  "has-footer": "awsui_has-footer_wih1l_16d38_173",
+  "cell-merged": "awsui_cell-merged_wih1l_16d38_190",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_16d38_201",
+  "empty": "awsui_empty_wih1l_16d38_216",
+  "loading": "awsui_loading_wih1l_16d38_220",
+  "selection-control": "awsui_selection-control_wih1l_16d38_229",
+  "selection-control-header": "awsui_selection-control-header_wih1l_16d38_236",
+  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_16d38_241",
+  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_16d38_250",
+  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_16d38_253",
+  "sticky-scrollbar-native-invisible": "awsui_sticky-scrollbar-native-invisible_wih1l_16d38_256",
+  "dark-header": "awsui_dark-header_wih1l_16d38_264",
+  "header-secondary": "awsui_header-secondary_wih1l_16d38_269",
+  "table-has-header": "awsui_table-has-header_wih1l_16d38_285",
+  "header-controls": "awsui_header-controls_wih1l_16d38_289",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_16d38_303",
+  "footer": "awsui_footer_wih1l_16d38_303",
+  "thead-active": "awsui_thead-active_wih1l_16d38_312",
+  "row": "awsui_row_wih1l_16d38_313",
+  "row-selected": "awsui_row-selected_wih1l_16d38_314"
 };
   

package/table/use-sticky-scrollbar.d.ts

@@ -1,3 +1,4 @@
 import { RefObject } from 'react';
+export declare const updatePosition: (tableEl: HTMLElement | null, wrapperEl: HTMLElement | null, scrollbarEl: HTMLElement | null, scrollbarContentEl: HTMLElement | null, hasContainingBlock: boolean, consideredFooterHeight: number) => void;
 export declare function useStickyScrollbar(scrollbarRef: RefObject<HTMLDivElement>, scrollbarContentRef: RefObject<HTMLDivElement>, tableRef: RefObject<HTMLTableElement>, wrapperRef: RefObject<HTMLDivElement>, footerHeight: number): void;
 //# sourceMappingURL=use-sticky-scrollbar.d.ts.map

package/table/use-sticky-scrollbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-scrollbar.d.ts","sourceRoot":"lib/default/","sources":["table/use-sticky-scrollbar.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AA6EvD,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,EACvC,mBAAmB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC9C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACrC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,EACrC,YAAY,EAAE,MAAM,QAqFrB"}
+{"version":3,"file":"use-sticky-scrollbar.d.ts","sourceRoot":"lib/default/","sources":["table/use-sticky-scrollbar.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAOvD,eAAO,MAAM,cAAc,YAChB,WAAW,GAAG,IAAI,aAChB,WAAW,GAAG,IAAI,eAChB,WAAW,GAAG,IAAI,sBACX,WAAW,GAAG,IAAI,sBAClB,OAAO,0BACH,MAAM,SA8C/B,CAAC;AAEF,wBAAgB,kBAAkB,CAChC,YAAY,EAAE,SAAS,CAAC,cAAc,CAAC,EACvC,mBAAmB,EAAE,SAAS,CAAC,cAAc,CAAC,EAC9C,QAAQ,EAAE,SAAS,CAAC,gBAAgB,CAAC,EACrC,UAAU,EAAE,SAAS,CAAC,cAAc,CAAC,EACrC,YAAY,EAAE,MAAM,QAiErB"}

package/table/use-sticky-scrollbar.js

@@ -3,33 +3,19 @@
 import { ResizeObserver } from '@juggle/resize-observer';
 import { useEffect, useState } from 'react';
 import styles from './styles.css.js';
-import { getOverflowParentDimensions, getOverflowParents } from '../internal/utils/scrollable-containers';
+import { getOverflowParents } from '../internal/utils/scrollable-containers';
 import { browserScrollbarSize } from '../internal/utils/browser-scrollbar-size';
 import { supportsStickyPosition, getContainingBlock } from '../internal/utils/dom';
-const updatePosition = (tableEl, wrapperEl, scrollbarEl, scrollbarContentEl, hasContainingBlock, consideredFooterHeight) => {
+export const updatePosition = (tableEl, wrapperEl, scrollbarEl, scrollbarContentEl, hasContainingBlock, consideredFooterHeight) => {
     if (!tableEl || !scrollbarEl || !wrapperEl) {
         return;
     }
-    // parent is either some container or document itself
-    const parent = getOverflowParentDimensions(wrapperEl)[0];
-    const parentBottom = parent.top + parent.height;
-    // table bottom is visible when
-    // 1. table bottom reached end of the window
-    // 2. table bottom is not overlapped by footer
-    const { top: tableTop, bottom: tableBottom, width: tableWidth } = tableEl.getBoundingClientRect();
+    const { width: tableWidth } = tableEl.getBoundingClientRect();
     const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();
-    //scrollbar correction is needed for
-    // #1 when scrollbars are constantly visible,
-    // we want no visible break when switching between fake and real scrollbars
-    // #2 when scrollbars are visible only on scrolling and half transparent (on mac)
-    // we want to avoid any overlap between fake and real scrollbar
     // using 15 px as a height of transparent scrollbar on mac
     const scrollbarHeight = browserScrollbarSize().height;
-    const scrollBarCorrection = scrollbarHeight > 0 ? scrollbarHeight : -15 / 2;
-    const tableBottomIsVisible = parentBottom - consideredFooterHeight >= tableBottom + scrollBarCorrection;
-    const tableTopIsHidden = tableTop >= parentBottom - consideredFooterHeight - scrollBarCorrection;
     const areaIsScrollable = tableWidth > wrapperWidth;
-    if (tableBottomIsVisible || tableTopIsHidden || !areaIsScrollable) {
+    if (!areaIsScrollable) {
         scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);
     }
     else {
@@ -41,23 +27,23 @@ const updatePosition = (tableEl, wrapperEl, scrollbarEl, scrollbarContentEl, has
             });
         }
         scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);
+        if (!scrollbarHeight) {
+            /* istanbul ignore next: covered by screenshot tests */
+            scrollbarEl.classList.add(styles['sticky-scrollbar-native-invisible']);
+        }
     }
     if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {
         scrollbarEl.style.height = `${scrollbarHeight}px`;
         scrollbarContentEl.style.height = `${scrollbarHeight}px`;
     }
     if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {
-        const parent = getOverflowParentDimensions(wrapperEl)[0];
         const wrapperElRect = wrapperEl.getBoundingClientRect();
         const tableElRect = tableEl.getBoundingClientRect();
         scrollbarEl.style.width = `${wrapperElRect.width}px`;
         scrollbarContentEl.style.width = `${tableElRect.width}px`;
         // when using sticky scrollbars in containers
         // we agreed to ignore dynamic bottom calculations for footer overlap
-        scrollbarEl.style.left = hasContainingBlock ? '0px' : `${wrapperElRect.left}px`;
-        scrollbarEl.style.top = hasContainingBlock
-            ? '0px'
-            : `${Math.min(parent.top + parent.height, window.innerHeight - consideredFooterHeight)}px`;
+        scrollbarEl.style.bottom = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;
     }
 };
 export function useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef, wrapperRef, footerHeight) {
@@ -70,19 +56,6 @@ export function useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef,
     // Because in this case, we think the footer is outside the overflow parent.
     const [hasOverflowParent, setHasOverflowParent] = useState(false);
     const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;
-    // Update scrollbar position on window scroll.
-    useEffect(() => {
-        if (supportsStickyPosition()) {
-            const scrollHandler = () => {
-                updatePosition(tableRef.current, wrapperRef.current, scrollbarRef.current, scrollbarContentRef.current, hasContainingBlock, consideredFooterHeight);
-            };
-            scrollHandler();
-            window.addEventListener('scroll', scrollHandler, true);
-            return () => {
-                window.removeEventListener('scroll', scrollHandler, true);
-            };
-        }
-    }, [scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, scrollbarContentRef, hasContainingBlock]);
     const wrapperEl = wrapperRef.current;
     useEffect(() => {
         if (wrapperEl && supportsStickyPosition()) {
@@ -113,6 +86,7 @@ export function useStickyScrollbar(scrollbarRef, scrollbarContentRef, tableRef,
             const resizeHandler = () => {
                 updatePosition(tableRef.current, wrapperRef.current, scrollbarRef.current, scrollbarContentRef.current, hasContainingBlock, consideredFooterHeight);
             };
+            resizeHandler();
             window.addEventListener('resize', resizeHandler);
             return () => {
                 window.removeEventListener('resize', resizeHandler);

package/table/use-sticky-scrollbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"lib/default/","sources":["table/use-sticky-scrollbar.ts"],"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 { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\n\nimport { getOverflowParentDimensions, getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../internal/utils/browser-scrollbar-size';\nimport { supportsStickyPosition, getContainingBlock } from '../internal/utils/dom';\n\nconst updatePosition = (\n  tableEl: HTMLElement | null,\n  wrapperEl: HTMLElement | null,\n  scrollbarEl: HTMLElement | null,\n  scrollbarContentEl: HTMLElement | null,\n  hasContainingBlock: boolean,\n  consideredFooterHeight: number\n) => {\n  if (!tableEl || !scrollbarEl || !wrapperEl) {\n    return;\n  }\n\n  // parent is either some container or document itself\n  const parent = getOverflowParentDimensions(wrapperEl)[0];\n  const parentBottom = parent.top + parent.height;\n\n  // table bottom is visible when\n  // 1. table bottom reached end of the window\n  // 2. table bottom is not overlapped by footer\n  const { top: tableTop, bottom: tableBottom, width: tableWidth } = tableEl.getBoundingClientRect();\n  const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n  //scrollbar correction is needed for\n  // #1 when scrollbars are constantly visible,\n  // we want no visible break when switching between fake and real scrollbars\n  // #2 when scrollbars are visible only on scrolling and half transparent (on mac)\n  // we want to avoid any overlap between fake and real scrollbar\n  // using 15 px as a height of transparent scrollbar on mac\n  const scrollbarHeight = browserScrollbarSize().height;\n  const scrollBarCorrection = scrollbarHeight > 0 ? scrollbarHeight : -15 / 2;\n  const tableBottomIsVisible = parentBottom - consideredFooterHeight >= tableBottom + scrollBarCorrection;\n  const tableTopIsHidden = tableTop >= parentBottom - consideredFooterHeight - scrollBarCorrection;\n  const areaIsScrollable = tableWidth > wrapperWidth;\n\n  if (tableBottomIsVisible || tableTopIsHidden || !areaIsScrollable) {\n    scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n  } else {\n    // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n    // that's why syncing it separately\n    if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n      requestAnimationFrame(() => {\n        scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n      });\n    }\n\n    scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n  }\n\n  if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n    scrollbarEl.style.height = `${scrollbarHeight}px`;\n    scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n  }\n\n  if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n    const parent = getOverflowParentDimensions(wrapperEl)[0];\n\n    const wrapperElRect = wrapperEl.getBoundingClientRect();\n    const tableElRect = tableEl.getBoundingClientRect();\n    scrollbarEl.style.width = `${wrapperElRect.width}px`;\n    scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n    // when using sticky scrollbars in containers\n    // we agreed to ignore dynamic bottom calculations for footer overlap\n    scrollbarEl.style.left = hasContainingBlock ? '0px' : `${wrapperElRect.left}px`;\n    scrollbarEl.style.top = hasContainingBlock\n      ? '0px'\n      : `${Math.min(parent.top + parent.height, window.innerHeight - consideredFooterHeight)}px`;\n  }\n};\n\nexport function useStickyScrollbar(\n  scrollbarRef: RefObject<HTMLDivElement>,\n  scrollbarContentRef: RefObject<HTMLDivElement>,\n  tableRef: RefObject<HTMLTableElement>,\n  wrapperRef: RefObject<HTMLDivElement>,\n  footerHeight: number\n) {\n  // We don't take into account containing-block calculations because that would\n  // unnecessarily overcomplicate the position logic. For now, we assume that a\n  // containing block, if present, is below the app layout and above the overflow\n  // parent, which is a pretty safe assumption.\n  const [hasContainingBlock, setHasContainingBlock] = useState(false);\n  // We don't take into account footer height when the overflow parent is child of document body.\n  // Because in this case, we think the footer is outside the overflow parent.\n  const [hasOverflowParent, setHasOverflowParent] = useState(false);\n  const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n  // Update scrollbar position on window scroll.\n  useEffect(() => {\n    if (supportsStickyPosition()) {\n      const scrollHandler = () => {\n        updatePosition(\n          tableRef.current,\n          wrapperRef.current,\n          scrollbarRef.current,\n          scrollbarContentRef.current,\n          hasContainingBlock,\n          consideredFooterHeight\n        );\n      };\n      scrollHandler();\n      window.addEventListener('scroll', scrollHandler, true);\n      return () => {\n        window.removeEventListener('scroll', scrollHandler, true);\n      };\n    }\n  }, [scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, scrollbarContentRef, hasContainingBlock]);\n\n  const wrapperEl = wrapperRef.current;\n  useEffect(() => {\n    if (wrapperEl && supportsStickyPosition()) {\n      setHasContainingBlock(!!getContainingBlock(wrapperEl));\n      setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n    }\n  }, [wrapperEl]);\n\n  // Update scrollbar position wrapper or table size change.\n  useEffect(() => {\n    if (supportsStickyPosition() && wrapperRef.current && tableRef.current) {\n      const observer = new ResizeObserver(() => {\n        if (scrollbarContentRef.current) {\n          updatePosition(\n            tableRef.current,\n            wrapperRef.current,\n            scrollbarRef.current,\n            scrollbarContentRef.current,\n            hasContainingBlock,\n            consideredFooterHeight\n          );\n        }\n      });\n      // Scrollbar width must be in sync with wrapper width.\n      observer.observe(wrapperRef.current);\n      // Scrollbar content width must be in sync with table width.\n      observer.observe(tableRef.current);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);\n\n  // Update scrollbar position when window resizes (vertically).\n  useEffect(() => {\n    if (supportsStickyPosition()) {\n      const resizeHandler = () => {\n        updatePosition(\n          tableRef.current,\n          wrapperRef.current,\n          scrollbarRef.current,\n          scrollbarContentRef.current,\n          hasContainingBlock,\n          consideredFooterHeight\n        );\n      };\n      window.addEventListener('resize', resizeHandler);\n      return () => {\n        window.removeEventListener('resize', resizeHandler);\n      };\n    }\n  }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}
+{"version":3,"file":"use-sticky-scrollbar.js","sourceRoot":"lib/default/","sources":["table/use-sticky-scrollbar.ts"],"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 { ResizeObserver } from '@juggle/resize-observer';\nimport { RefObject, useEffect, useState } from 'react';\nimport styles from './styles.css.js';\n\nimport { getOverflowParents } from '../internal/utils/scrollable-containers';\nimport { browserScrollbarSize } from '../internal/utils/browser-scrollbar-size';\nimport { supportsStickyPosition, getContainingBlock } from '../internal/utils/dom';\n\nexport const updatePosition = (\n  tableEl: HTMLElement | null,\n  wrapperEl: HTMLElement | null,\n  scrollbarEl: HTMLElement | null,\n  scrollbarContentEl: HTMLElement | null,\n  hasContainingBlock: boolean,\n  consideredFooterHeight: number\n) => {\n  if (!tableEl || !scrollbarEl || !wrapperEl) {\n    return;\n  }\n\n  const { width: tableWidth } = tableEl.getBoundingClientRect();\n  const { width: wrapperWidth } = wrapperEl.getBoundingClientRect();\n\n  // using 15 px as a height of transparent scrollbar on mac\n  const scrollbarHeight = browserScrollbarSize().height;\n  const areaIsScrollable = tableWidth > wrapperWidth;\n\n  if (!areaIsScrollable) {\n    scrollbarEl.classList.remove(styles['sticky-scrollbar-visible']);\n  } else {\n    // when scrollbar is not displayed scrollLeft property cannot be set by useScrollSync\n    // that's why syncing it separately\n    if (!scrollbarEl.classList.contains(styles['sticky-scrollbar-visible'])) {\n      requestAnimationFrame(() => {\n        scrollbarEl.scrollLeft = wrapperEl.scrollLeft;\n      });\n    }\n\n    scrollbarEl.classList.add(styles['sticky-scrollbar-visible']);\n    if (!scrollbarHeight) {\n      /* istanbul ignore next: covered by screenshot tests */\n      scrollbarEl.classList.add(styles['sticky-scrollbar-native-invisible']);\n    }\n  }\n\n  if (scrollbarHeight && scrollbarEl && scrollbarContentEl) {\n    scrollbarEl.style.height = `${scrollbarHeight}px`;\n    scrollbarContentEl.style.height = `${scrollbarHeight}px`;\n  }\n\n  if (tableEl && wrapperEl && scrollbarContentEl && scrollbarEl) {\n    const wrapperElRect = wrapperEl.getBoundingClientRect();\n    const tableElRect = tableEl.getBoundingClientRect();\n    scrollbarEl.style.width = `${wrapperElRect.width}px`;\n    scrollbarContentEl.style.width = `${tableElRect.width}px`;\n\n    // when using sticky scrollbars in containers\n    // we agreed to ignore dynamic bottom calculations for footer overlap\n    scrollbarEl.style.bottom = hasContainingBlock ? '0px' : `${consideredFooterHeight}px`;\n  }\n};\n\nexport function useStickyScrollbar(\n  scrollbarRef: RefObject<HTMLDivElement>,\n  scrollbarContentRef: RefObject<HTMLDivElement>,\n  tableRef: RefObject<HTMLTableElement>,\n  wrapperRef: RefObject<HTMLDivElement>,\n  footerHeight: number\n) {\n  // We don't take into account containing-block calculations because that would\n  // unnecessarily overcomplicate the position logic. For now, we assume that a\n  // containing block, if present, is below the app layout and above the overflow\n  // parent, which is a pretty safe assumption.\n  const [hasContainingBlock, setHasContainingBlock] = useState(false);\n  // We don't take into account footer height when the overflow parent is child of document body.\n  // Because in this case, we think the footer is outside the overflow parent.\n  const [hasOverflowParent, setHasOverflowParent] = useState(false);\n  const consideredFooterHeight = hasContainingBlock || hasOverflowParent ? 0 : footerHeight;\n\n  const wrapperEl = wrapperRef.current;\n  useEffect(() => {\n    if (wrapperEl && supportsStickyPosition()) {\n      setHasContainingBlock(!!getContainingBlock(wrapperEl));\n      setHasOverflowParent(!!getOverflowParents(wrapperEl)[0]);\n    }\n  }, [wrapperEl]);\n\n  // Update scrollbar position wrapper or table size change.\n  useEffect(() => {\n    if (supportsStickyPosition() && wrapperRef.current && tableRef.current) {\n      const observer = new ResizeObserver(() => {\n        if (scrollbarContentRef.current) {\n          updatePosition(\n            tableRef.current,\n            wrapperRef.current,\n            scrollbarRef.current,\n            scrollbarContentRef.current,\n            hasContainingBlock,\n            consideredFooterHeight\n          );\n        }\n      });\n      // Scrollbar width must be in sync with wrapper width.\n      observer.observe(wrapperRef.current);\n      // Scrollbar content width must be in sync with table width.\n      observer.observe(tableRef.current);\n      return () => {\n        observer.disconnect();\n      };\n    }\n  }, [scrollbarContentRef, scrollbarRef, tableRef, wrapperRef, consideredFooterHeight, hasContainingBlock]);\n\n  // Update scrollbar position when window resizes (vertically).\n  useEffect(() => {\n    if (supportsStickyPosition()) {\n      const resizeHandler = () => {\n        updatePosition(\n          tableRef.current,\n          wrapperRef.current,\n          scrollbarRef.current,\n          scrollbarContentRef.current,\n          hasContainingBlock,\n          consideredFooterHeight\n        );\n      };\n      resizeHandler();\n      window.addEventListener('resize', resizeHandler);\n      return () => {\n        window.removeEventListener('resize', resizeHandler);\n      };\n    }\n  }, [tableRef, wrapperRef, scrollbarRef, scrollbarContentRef, hasContainingBlock, consideredFooterHeight]);\n}\n"]}

package/tabs/interfaces.d.ts

@@ -97,11 +97,11 @@ export declare namespace TabsProps {
         /**
          * ARIA label for the scroll left button that appears when the tab header is wider than the container.
          */
-        scrollLeftAriaLabel: string;
+        scrollLeftAriaLabel?: string;
         /**
          * ARIA label for the scroll right button that appears when the tab header is wider than the container.
          */
-        scrollRightAriaLabel: string;
+        scrollRightAriaLabel?: string;
     }
 }
 //# sourceMappingURL=interfaces.d.ts.map

package/tabs/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,EAAE,MAAM,CAAC;QAC5B;;WAEG;QACH,oBAAoB,EAAE,MAAM,CAAC;KAC9B;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,WAAW,SAAU,SAAQ,kBAAkB;IACnD;;;;;;;;;;;;OAYG;IACH,IAAI,EAAE,aAAa,CAAC,SAAS,CAAC,GAAG,CAAC,CAAC;IAEnC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,OAAO,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IAE7D;;;;OAIG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;IAEjC;;OAEG;IACH,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AACD,yBAAiB,SAAS,CAAC;IACzB,KAAY,OAAO,GAAG,SAAS,GAAG,WAAW,GAAG,SAAS,CAAC;IAE1D,UAAiB,GAAG;QAClB;;WAEG;QACH,EAAE,EAAE,MAAM,CAAC;QACX;;WAEG;QACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB;;WAEG;QACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B;;WAEG;QACH,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB;;;;;;WAMG;QACH,IAAI,CAAC,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,YAAY;QAC3B;;WAEG;QACH,WAAW,EAAE,MAAM,CAAC;QACpB;;WAEG;QACH,aAAa,CAAC,EAAE,MAAM,CAAC;KACxB;IAED,UAAiB,WAAW;QAC1B;;WAEG;QACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B;;WAEG;QACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;KAC/B;CACF"}

package/tabs/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tabs/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport interface TabsProps extends BaseComponentProps {\n  /**\n   * Specifies the tabs to display. Each tab object has the following properties:\n   *\n   * - `id` (string) - The tab identifier. This value needs to be passed to the Tabs component as `activeTabId` to select this tab.\n   * - `label` (ReactNode) - Tab label shown in the UI.\n   * - `content` (ReactNode) - (Optional) Tab content to render in the container.\n   * - `disabled` (boolean) - (Optional) Specifies if this tab is disabled.\n   * - `href` (string) - (Optional) You can use this parameter to change the default `href` of the internal tab anchor. The\n   *    `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (that is, CTRL,\n   *    ALT, SHIFT, META). This enables the user to open new browser tabs with an initially selected component tab,\n   *    if your application routing can handle such deep links. You can manually update routing on the current page\n   *    using the `activeTabHref` property of the `change` event's detail.\n   */\n  tabs: ReadonlyArray<TabsProps.Tab>;\n\n  /**\n   * The possible visual variants of tabs are the following:\n   * * `default` - Use in any context.\n   * * `container` - Use this variant to have the tabs displayed within a container header.\n   * * `stacked` - Use this variant directly adjacent to other stacked containers (such as a container, table).\n   * @visualrefresh `stacked` variant\n   */\n  variant?: TabsProps.Variant;\n\n  /**\n   * Called whenever the user selects a different tab.\n   * The event's `detail` contains the new `activeTabId`.\n   */\n  onChange?: NonCancelableEventHandler<TabsProps.ChangeDetail>;\n\n  /**\n   * The `id` of the currently active tab.\n   * * If you don't set this property, the component activates the first tab and switches tabs automatically when a tab header is clicked (that is, uncontrolled behavior).\n   * * If you explicitly set this property, you must set define an `onChange` handler to update the property when a tab header is clicked (that is, controlled behavior).\n   */\n  activeTabId?: string;\n\n  /**\n   * Provides an `aria-label` to the tab container.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Sets the `aria-labelledby` property on the tab container.\n   * If there's a visible label element that you can reference, use this instead of `ariaLabel`.\n   * Don't use `ariaLabel` and `ariaLabelledby` at the same time.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Determines whether the tab content has padding. If `true`, removes the default padding from the tab content area.\n   */\n  disableContentPaddings?: boolean;\n\n  /**\n   * An object containing all the necessary localized strings required by the component.\n   */\n  i18nStrings?: TabsProps.I18nStrings;\n}\nexport namespace TabsProps {\n  export type Variant = 'default' | 'container' | 'stacked';\n\n  export interface Tab {\n    /**\n     * The tab id. This value will be need to be passed to the Tabs component as `activeTabId` to select this tab.\n     */\n    id: string;\n    /**\n     * Tab label shown in the UI.\n     */\n    label: React.ReactNode;\n    /**\n     * Tab content to render in the container.\n     */\n    content?: React.ReactNode;\n    /**\n     * Whether this tab is disabled.\n     */\n    disabled?: boolean;\n    /**\n     * You can use this parameter to change the default `href` of the internal tab anchor. The\n     * `click` event default behavior is prevented, unless the user clicks the tab with a key modifier (CTRL,\n     * ALT, SHIFT, META). This allows to open new browser tabs with an initially selected component tab,\n     * when the routing can handle such deep links. You can manually update routing on the current page\n     * using the `activeTabHref` property of the `change` event's detail.\n     */\n    href?: string;\n  }\n\n  export interface ChangeDetail {\n    /**\n     * The ID of the clicked tab.\n     */\n    activeTabId: string;\n    /**\n     * The `href` attribute of the clicked tab, if defined.\n     */\n    activeTabHref?: string;\n  }\n\n  export interface I18nStrings {\n    /**\n     * ARIA label for the scroll left button that appears when the tab header is wider than the container.\n     */\n    scrollLeftAriaLabel?: string;\n    /**\n     * ARIA label for the scroll right button that appears when the tab header is wider than the container.\n     */\n    scrollRightAriaLabel?: string;\n  }\n}\n"]}

package/tabs/tab-header-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"lib/default/","sources":["tabs/tab-header-bar.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAgBzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,eA6QnB;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}
+{"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"lib/default/","sources":["tabs/tab-header-bar.tsx"],"names":[],"mappings":";AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAiBzC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,YAAY,KAAK,IAAI,CAAC;IACzD,WAAW,EAAE,SAAS,CAAC,aAAa,CAAC,CAAC;IACtC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,CAAC;IACxB,OAAO,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC9B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC;CACrC;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,eA8QnB;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}

package/tabs/tab-header-bar.js

@@ -9,10 +9,12 @@ import { KeyCode } from '../internal/keycode';
 import { onPaginationClick, hasHorizontalOverflow, hasLeftOverflow, hasRightOverflow, scrollIntoView, } from './scroll-utils';
 import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { useInternalI18n } from '../internal/i18n/context';
 export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, i18nStrings, }) {
     const headerBarRef = useRef(null);
     const activeTabHeaderRef = useRef(null);
     const leftOverflowButton = useRef(null);
+    const i18n = useInternalI18n('tabs');
     const isVisualRefresh = useVisualRefresh();
     const [widthChange, containerRef] = useContainerQuery(rect => rect.width);
     const tabRefs = useRef(new Map());
@@ -86,10 +88,10 @@ export function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace
     //converted span to div as list should not be a child of span for HTML validation
     React.createElement("div", { className: classes, ref: containerRef },
         horizontalOverflow && (React.createElement("span", { ref: leftOverflowButton, className: leftButtonClasses },
-            React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", disabled: !leftOverflow, onClick: () => onPaginationClick(headerBarRef, -1), ariaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollLeftAriaLabel }))),
+            React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-left", disabled: !leftOverflow, onClick: () => onPaginationClick(headerBarRef, -1), ariaLabel: i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollLeftAriaLabel) }))),
         React.createElement("ul", { role: "tablist", className: styles['tabs-header-list'], "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, ref: headerBarRef, onScroll: onScroll }, tabs.map(renderTabHeader)),
         horizontalOverflow && (React.createElement("span", { className: rightButtonClasses },
-            React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", disabled: !rightOverflow, onClick: () => onPaginationClick(headerBarRef, 1), ariaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollRightAriaLabel })))));
+            React.createElement(InternalButton, { formAction: "none", variant: "icon", iconName: "angle-right", disabled: !rightOverflow, onClick: () => onPaginationClick(headerBarRef, 1), ariaLabel: i18n('i18nStrings.scrollRightAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.scrollRightAriaLabel) })))));
     function renderTabHeader(tab) {
         const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);
         const highlightTab = function (enabledTabIndex) {

package/tabs/tab-header-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"tab-header-bar.js","sourceRoot":"lib/default/","sources":["tabs/tab-header-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasLeftOverflow,\n  hasRightOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n  i18nStrings,\n}: TabHeaderBarProps) {\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n  const leftOverflowButton = useRef<HTMLElement>(null);\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [leftOverflow, setLeftOverflow] = useState(false);\n  const [rightOverflow, setRightOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && headerBarRef.current) {\n      scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: leftOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: rightOverflow,\n  });\n\n  return (\n    //converted span to div as list should not be a child of span for HTML validation\n    <div className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={leftOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            disabled={!leftOverflow}\n            onClick={() => onPaginationClick(headerBarRef, -1)}\n            ariaLabel={i18nStrings?.scrollLeftAriaLabel}\n          />\n        </span>\n      )}\n      <ul\n        role=\"tablist\"\n        className={styles['tabs-header-list']}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        ref={headerBarRef}\n        onScroll={onScroll}\n      >\n        {tabs.map(renderTabHeader)}\n      </ul>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            disabled={!rightOverflow}\n            onClick={() => onPaginationClick(headerBarRef, 1)}\n            ariaLabel={i18nStrings?.scrollRightAriaLabel}\n          />\n        </span>\n      )}\n    </div>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n    const highlightTab = function (enabledTabIndex: number) {\n      const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const handleKeyDown = function (\n      event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n    ) {\n      const { keyCode } = event;\n      const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n      if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {\n        return;\n      }\n      event.preventDefault();\n      const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n      switch (keyCode) {\n        case KeyCode.right:\n          if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n            highlightTab(0);\n          } else {\n            highlightTab(activeIndex + 1);\n          }\n          return;\n        case KeyCode.left:\n          if (activeIndex === 0) {\n            highlightTab(enabledTabsWithCurrentTab.length - 1);\n          } else {\n            highlightTab(activeIndex - 1);\n          }\n          return;\n        case KeyCode.end:\n          highlightTab(enabledTabsWithCurrentTab.length - 1);\n          return;\n        case KeyCode.home:\n          highlightTab(0);\n          return;\n        case KeyCode.pageDown:\n          if (rightOverflow) {\n            onPaginationClick(headerBarRef, 1);\n          }\n          return;\n        case KeyCode.pageUp:\n          if (leftOverflow) {\n            onPaginationClick(headerBarRef, -1);\n          }\n          return;\n      }\n    };\n\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id);\n        if (clickedTabRef) {\n          const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n          if (childElement && childElement !== document.activeElement) {\n            childElement.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    if (tab.id === activeTabId) {\n      commonProps.ref = activeTabHeaderRef;\n      commonProps.tabIndex = 0;\n      commonProps.onKeyDown = (\n        event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n      ) => handleKeyDown(event);\n    } else {\n      commonProps.tabIndex = -1;\n    }\n\n    let trigger = null;\n    if (tab.href) {\n      const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n      anchorProps.href = tab.href;\n      trigger = <a {...anchorProps} />;\n    } else {\n      const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n      buttonProps.type = 'button';\n      if (tab.disabled) {\n        buttonProps.disabled = true;\n      }\n      trigger = <button {...buttonProps} />;\n    }\n\n    return (\n      <li\n        ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n        className={styles['tabs-tab']}\n        role=\"presentation\"\n        key={tab.id}\n      >\n        {trigger}\n      </li>\n    );\n  }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n  return namespace + '-' + tabId;\n}\n"]}
+{"version":3,"file":"tab-header-bar.js","sourceRoot":"lib/default/","sources":["tabs/tab-header-bar.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useRef, useState, useEffect } from 'react';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { InternalButton } from '../button/internal';\nimport { useContainerQuery } from '../internal/hooks/container-queries';\nimport { KeyCode } from '../internal/keycode';\nimport {\n  onPaginationClick,\n  hasHorizontalOverflow,\n  hasLeftOverflow,\n  hasRightOverflow,\n  scrollIntoView,\n} from './scroll-utils';\nimport { hasModifierKeys, isPlainLeftClick } from '../internal/events';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useInternalI18n } from '../internal/i18n/context';\n\nexport interface TabHeaderBarProps {\n  onChange: (changeDetail: TabsProps.ChangeDetail) => void;\n  activeTabId: TabsProps['activeTabId'];\n  tabs: TabsProps['tabs'];\n  variant: TabsProps['variant'];\n  idNamespace: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  i18nStrings?: TabsProps.I18nStrings;\n}\n\nexport function TabHeaderBar({\n  onChange,\n  activeTabId,\n  tabs,\n  variant,\n  idNamespace,\n  ariaLabel,\n  ariaLabelledby,\n  i18nStrings,\n}: TabHeaderBarProps) {\n  const headerBarRef = useRef<HTMLUListElement>(null);\n  const activeTabHeaderRef = useRef<HTMLAnchorElement>(null);\n  const leftOverflowButton = useRef<HTMLElement>(null);\n  const i18n = useInternalI18n('tabs');\n\n  const isVisualRefresh = useVisualRefresh();\n\n  const [widthChange, containerRef] = useContainerQuery<number>(rect => rect.width);\n  const tabRefs = useRef<Map<string, HTMLElement>>(new Map());\n  const [horizontalOverflow, setHorizontalOverflow] = useState(false);\n  const [leftOverflow, setLeftOverflow] = useState(false);\n  const [rightOverflow, setRightOverflow] = useState(false);\n\n  useEffect(() => {\n    if (headerBarRef.current) {\n      setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, leftOverflowButton));\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  }, [widthChange, tabs]);\n\n  const scrollIntoViewIfPossible = (smooth: boolean) => {\n    if (!activeTabId) {\n      return;\n    }\n    const activeTabRef = tabRefs.current.get(activeTabId);\n    if (activeTabRef && headerBarRef.current) {\n      scrollIntoView(activeTabRef, headerBarRef.current, smooth);\n    }\n  };\n\n  useEffect(() => {\n    // Delay scrollIntoView as the position is depending on parent elements\n    // (effects are called inside-out in the component tree).\n    // Wait one frame to allow parents to complete it's calculation.\n    requestAnimationFrame(() => {\n      scrollIntoViewIfPossible(false);\n    });\n    // Non-smooth scrolling should not be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [horizontalOverflow, widthChange, tabs.length]);\n\n  useEffect(() => {\n    scrollIntoViewIfPossible(true);\n    // Smooth scrolling should only be called upon activeId change\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [activeTabId]);\n\n  useEffect(() => {\n    /*\n     When the selected tab changes and we are currently already focused on a tab,\n     move the focus to the newly selected tab.\n    */\n    if (headerBarRef.current?.contains(document.activeElement)) {\n      if (document.activeElement !== activeTabHeaderRef.current) {\n        activeTabHeaderRef.current?.focus({ preventScroll: true });\n      }\n    }\n  }, [activeTabId]);\n\n  const onScroll = () => {\n    if (headerBarRef.current) {\n      setLeftOverflow(hasLeftOverflow(headerBarRef.current));\n      setRightOverflow(hasRightOverflow(headerBarRef.current));\n    }\n  };\n\n  const classes = clsx({\n    [styles['tabs-header']]: true,\n    [styles['tabs-header-with-divider']]: variant === 'default' || isVisualRefresh,\n  });\n\n  const leftButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-left']]: true,\n    [styles['pagination-button-left-scrollable']]: leftOverflow,\n  });\n\n  const rightButtonClasses = clsx({\n    [styles['pagination-button']]: true,\n    [styles['pagination-button-right']]: true,\n    [styles['pagination-button-right-scrollable']]: rightOverflow,\n  });\n\n  return (\n    //converted span to div as list should not be a child of span for HTML validation\n    <div className={classes} ref={containerRef}>\n      {horizontalOverflow && (\n        <span ref={leftOverflowButton} className={leftButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-left\"\n            disabled={!leftOverflow}\n            onClick={() => onPaginationClick(headerBarRef, -1)}\n            ariaLabel={i18n('i18nStrings.scrollLeftAriaLabel', i18nStrings?.scrollLeftAriaLabel)}\n          />\n        </span>\n      )}\n      <ul\n        role=\"tablist\"\n        className={styles['tabs-header-list']}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        ref={headerBarRef}\n        onScroll={onScroll}\n      >\n        {tabs.map(renderTabHeader)}\n      </ul>\n      {horizontalOverflow && (\n        <span className={rightButtonClasses}>\n          <InternalButton\n            formAction=\"none\"\n            variant=\"icon\"\n            iconName=\"angle-right\"\n            disabled={!rightOverflow}\n            onClick={() => onPaginationClick(headerBarRef, 1)}\n            ariaLabel={i18n('i18nStrings.scrollRightAriaLabel', i18nStrings?.scrollRightAriaLabel)}\n          />\n        </span>\n      )}\n    </div>\n  );\n\n  function renderTabHeader(tab: TabsProps.Tab) {\n    const enabledTabsWithCurrentTab = tabs.filter(tab => !tab.disabled || tab.id === activeTabId);\n\n    const highlightTab = function (enabledTabIndex: number) {\n      const tab = enabledTabsWithCurrentTab[enabledTabIndex];\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const handleKeyDown = function (\n      event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n    ) {\n      const { keyCode } = event;\n      const specialKeys = [KeyCode.right, KeyCode.left, KeyCode.end, KeyCode.home, KeyCode.pageUp, KeyCode.pageDown];\n      if (hasModifierKeys(event) || specialKeys.indexOf(keyCode) === -1) {\n        return;\n      }\n      event.preventDefault();\n      const activeIndex = enabledTabsWithCurrentTab.indexOf(tab);\n      switch (keyCode) {\n        case KeyCode.right:\n          if (activeIndex + 1 === enabledTabsWithCurrentTab.length) {\n            highlightTab(0);\n          } else {\n            highlightTab(activeIndex + 1);\n          }\n          return;\n        case KeyCode.left:\n          if (activeIndex === 0) {\n            highlightTab(enabledTabsWithCurrentTab.length - 1);\n          } else {\n            highlightTab(activeIndex - 1);\n          }\n          return;\n        case KeyCode.end:\n          highlightTab(enabledTabsWithCurrentTab.length - 1);\n          return;\n        case KeyCode.home:\n          highlightTab(0);\n          return;\n        case KeyCode.pageDown:\n          if (rightOverflow) {\n            onPaginationClick(headerBarRef, 1);\n          }\n          return;\n        case KeyCode.pageUp:\n          if (leftOverflow) {\n            onPaginationClick(headerBarRef, -1);\n          }\n          return;\n      }\n    };\n\n    const clickTab = (event: React.MouseEvent) => {\n      if (tab.disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      // if the primary mouse button is clicked with a modifier key, the browser will handle opening a new tab\n      const specialKey = !isPlainLeftClick(event);\n      if (specialKey && tab.href) {\n        return;\n      }\n\n      event.preventDefault();\n      // for browsers that do not focus buttons on button click\n      if (!tab.href) {\n        const clickedTabRef = tabRefs.current.get(tab.id);\n        if (clickedTabRef) {\n          const childElement = clickedTabRef.firstChild as HTMLButtonElement;\n          if (childElement && childElement !== document.activeElement) {\n            childElement.focus({ preventScroll: true });\n          }\n        }\n      }\n\n      if (tab.id === activeTabId) {\n        return;\n      }\n\n      onChange({ activeTabId: tab.id, activeTabHref: tab.href });\n    };\n\n    const classes = clsx({\n      [styles['tabs-tab-link']]: true,\n      [styles.refresh]: isVisualRefresh,\n      [styles['tabs-tab-active']]: activeTabId === tab.id && !tab.disabled,\n      [styles['tabs-tab-disabled']]: tab.disabled,\n    });\n\n    const commonProps: (JSX.IntrinsicElements['a'] | JSX.IntrinsicElements['button']) & { 'data-testid': string } = {\n      className: classes,\n      role: 'tab',\n      'aria-selected': tab.id === activeTabId,\n      'aria-controls': `${idNamespace}-${tab.id}-panel`,\n      'data-testid': tab.id,\n      id: getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n      children: <span className={styles['tabs-tab-label']}>{tab.label}</span>,\n    };\n\n    if (tab.disabled) {\n      commonProps['aria-disabled'] = 'true';\n    } else {\n      commonProps.onClick = clickTab;\n    }\n\n    if (tab.id === activeTabId) {\n      commonProps.ref = activeTabHeaderRef;\n      commonProps.tabIndex = 0;\n      commonProps.onKeyDown = (\n        event: React.KeyboardEvent<HTMLAnchorElement> | React.KeyboardEvent<HTMLButtonElement>\n      ) => handleKeyDown(event);\n    } else {\n      commonProps.tabIndex = -1;\n    }\n\n    let trigger = null;\n    if (tab.href) {\n      const anchorProps = commonProps as JSX.IntrinsicElements['a'];\n      anchorProps.href = tab.href;\n      trigger = <a {...anchorProps} />;\n    } else {\n      const buttonProps = commonProps as JSX.IntrinsicElements['button'];\n      buttonProps.type = 'button';\n      if (tab.disabled) {\n        buttonProps.disabled = true;\n      }\n      trigger = <button {...buttonProps} />;\n    }\n\n    return (\n      <li\n        ref={element => tabRefs.current.set(tab.id, element as HTMLElement)}\n        className={styles['tabs-tab']}\n        role=\"presentation\"\n        key={tab.id}\n      >\n        {trigger}\n      </li>\n    );\n  }\n}\n\nexport function getTabElementId({ namespace, tabId }: { namespace: string; tabId: string }) {\n  return namespace + '-' + tabId;\n}\n"]}

package/tiles/interfaces.d.ts

@@ -4,6 +4,10 @@ import { NonCancelableEventHandler } from '../internal/events';
 import { FormFieldControlProps } from '../internal/context/form-field-context';
 import { Breakpoint as _Breakpoint } from '../internal/breakpoints';
 export interface TilesProps extends BaseComponentProps, FormFieldControlProps {
+    /**
+     * Specify a custom name for the native radio buttons. If not provided, the tiles component generates a random name.
+     */
+    name?: string;
     /**
      * Specifies the value of the selected tile.
      * If you want to clear the selection, use `null`.

package/tiles/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE9D;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["tiles/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,wCAAwC,CAAC;AAC/E,OAAO,EAAE,UAAU,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,UAAW,SAAQ,kBAAkB,EAAE,qBAAqB;IAC3E;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAErB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC;IAElD;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAE9D;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,yBAAiB,UAAU,CAAC;IAC1B,KAAY,UAAU,GAAG,WAAW,CAAC;IACrC,UAAiB,eAAe;QAC9B,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC9B,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,KAAK,EAAE,MAAM,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,IAAI,IAAI,CAAC;KACf;CACF"}

package/tiles/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tiles/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 { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n\n  /**\n   * Adds `aria-controls` attribute to the component.\n   * If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.\n   */\n  ariaControls?: string;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["tiles/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 { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { FormFieldControlProps } from '../internal/context/form-field-context';\nimport { Breakpoint as _Breakpoint } from '../internal/breakpoints';\n\nexport interface TilesProps extends BaseComponentProps, FormFieldControlProps {\n  /**\n   * Specify a custom name for the native radio buttons. If not provided, the tiles component generates a random name.\n   */\n  name?: string;\n\n  /**\n   * Specifies the value of the selected tile.\n   * If you want to clear the selection, use `null`.\n   */\n  value: string | null;\n\n  /**\n   * List of tile definitions. Each tile has the following properties:\n   *\n   * - `value` [string] - The value that will be associated with the tile. This is the value the tiles will get when the radio button is selected.\n   * - `label` [ReactNode] - A short description for the option the tile represents.\n   * - `description` [ReactNode] - (Optional) Further explanatory guidance on the tile option, shown below the `label`.\n   * - `image` [ReactNode] - (Optional) Visually distinctive image for the tile option, shown below the `description`.\n   * - `disabled` [boolean] - (Optional) Specifies whether the tile is disabled. Users can't select disabled tiles.\n   * - `controlId` [string] - (Optional) The ID of the internal input. You can use this to relate a label element's `for` attribute to this control.\n   *            We recommend that you don't set this property because it's automatically set by the tiles component.\n   */\n  items?: ReadonlyArray<TilesProps.TilesDefinition>;\n\n  /**\n   * Adds `aria-label` on the group. Don't set this property if you are using this form element within a form field\n   * because the form field component automatically sets the correct labels to make the component accessible.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-required` on the group.\n   */\n  ariaRequired?: boolean;\n\n  /**\n   * The number of columns for the tiles to be displayed in. Valid values are integers between 1 and 4.\n   * If no value is specified, the number of columns is determined based on the number of items, with a maximum of 3.\n   * It is set to 2 if 4 or 8 items are supplied in order to optimize the layout.\n   */\n  columns?: number;\n\n  /**\n   * Called when the user selects a different tile.\n   */\n  onChange?: NonCancelableEventHandler<TilesProps.ChangeDetail>;\n\n  /**\n   * Adds `aria-controls` attribute to the component.\n   * If the component controls any secondary content (for example, another form field), use this to provide an ID referring to the secondary content.\n   */\n  ariaControls?: string;\n}\n\nexport namespace TilesProps {\n  export type Breakpoint = _Breakpoint;\n  export interface TilesDefinition {\n    value: string;\n    label: React.ReactNode;\n    description?: React.ReactNode;\n    image?: React.ReactNode;\n    disabled?: boolean;\n    controlId?: string;\n  }\n\n  export interface ChangeDetail {\n    value: string;\n  }\n\n  export interface Ref {\n    /**\n     * Sets input focus onto the UI control.\n     */\n    focus(): void;\n  }\n}\n"]}

package/tiles/internal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,gHAsDlB,CAAC;AAqBF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"internal.d.ts","sourceRoot":"lib/default/","sources":["tiles/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAM1C,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AASlF,QAAA,MAAM,aAAa,gHAuDlB,CAAC;AAqBF,eAAe,aAAa,CAAC"}

package/tiles/internal.js

@@ -13,7 +13,7 @@ import { Tile } from './tile';
 import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
 const COLUMN_TRIGGERS = ['default', 'xxs', 'xs'];
 const InternalTiles = React.forwardRef((_a, ref) => {
-    var { value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["value", "items", "ariaLabel", "ariaRequired", "ariaControls", "columns", "onChange", "__internalRootRef"]);
+    var { name, value, items, ariaLabel, ariaRequired, ariaControls, columns, onChange, __internalRootRef = null } = _a, rest = __rest(_a, ["name", "value", "items", "ariaLabel", "ariaRequired", "ariaControls", "columns", "onChange", "__internalRootRef"]);
     const baseProps = getBaseProps(rest);
     const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);
     const generatedName = useUniqueId('awsui-tiles-');
@@ -23,7 +23,7 @@ const InternalTiles = React.forwardRef((_a, ref) => {
     const columnCount = getColumnCount(items, columns);
     return (React.createElement("div", Object.assign({ role: "radiogroup", "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-required": ariaRequired, "aria-controls": ariaControls }, baseProps, { className: clsx(baseProps.className, styles.root), ref: mergedRef }),
         React.createElement("div", { className: clsx(styles.columns, styles[`column-${columnCount}`]) }, items &&
-            items.map((item, index) => (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: generatedName, breakpoint: breakpoint, onChange: onChange }))))));
+            items.map((item, index) => (React.createElement(Tile, { ref: index === tileRefIndex ? tileRef : undefined, key: item.value, item: item, selected: item.value === value, name: name || generatedName, breakpoint: breakpoint, onChange: onChange }))))));
 });
 function getColumnCount(items, columns) {
     if (columns) {

package/tiles/internal.js.map

@@ -1 +1 @@
-{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["tiles/internal.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 from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n  (\n    {\n      value,\n      items,\n      ariaLabel,\n      ariaRequired,\n      ariaControls,\n      columns,\n      onChange,\n      __internalRootRef = null,\n      ...rest\n    }: InternalTilesProps,\n    ref: React.Ref<TilesProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const generatedName = useUniqueId('awsui-tiles-');\n\n    const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const columnCount = getColumnCount(items, columns);\n\n    return (\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-required={ariaRequired}\n        aria-controls={ariaControls}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        ref={mergedRef}\n      >\n        <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n          {items &&\n            items.map((item, index) => (\n              <Tile\n                ref={index === tileRefIndex ? tileRef : undefined}\n                key={item.value}\n                item={item}\n                selected={item.value === value}\n                name={generatedName}\n                breakpoint={breakpoint}\n                onChange={onChange}\n              />\n            ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction getColumnCount(\n  items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n  columns: number | undefined\n): number {\n  if (columns) {\n    return columns;\n  }\n\n  const nItems = items ? items.length : 0;\n  const columnsLookup: Record<number, number> = {\n    0: 1,\n    1: 1,\n    2: 2,\n    4: 2,\n    8: 2,\n  };\n  return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}
+{"version":3,"file":"internal.js","sourceRoot":"lib/default/","sources":["tiles/internal.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 from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { TilesProps } from './interfaces';\nimport styles from './styles.css.js';\n\nimport { useFormFieldContext } from '../internal/context/form-field-context';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMergeRefs } from '../internal/hooks/use-merge-refs';\nimport { Tile } from './tile';\nimport useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';\n\nconst COLUMN_TRIGGERS: TilesProps.Breakpoint[] = ['default', 'xxs', 'xs'];\n\ntype InternalTilesProps = TilesProps & InternalBaseComponentProps;\n\nconst InternalTiles = React.forwardRef(\n  (\n    {\n      name,\n      value,\n      items,\n      ariaLabel,\n      ariaRequired,\n      ariaControls,\n      columns,\n      onChange,\n      __internalRootRef = null,\n      ...rest\n    }: InternalTilesProps,\n    ref: React.Ref<TilesProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const { ariaDescribedby, ariaLabelledby } = useFormFieldContext(rest);\n    const generatedName = useUniqueId('awsui-tiles-');\n\n    const [tileRef, tileRefIndex] = useRadioGroupForwardFocus(ref, items, value);\n    const [breakpoint, breakpointRef] = useContainerBreakpoints(COLUMN_TRIGGERS);\n    const mergedRef = useMergeRefs(breakpointRef, __internalRootRef);\n\n    const columnCount = getColumnCount(items, columns);\n\n    return (\n      <div\n        role=\"radiogroup\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-describedby={ariaDescribedby}\n        aria-required={ariaRequired}\n        aria-controls={ariaControls}\n        {...baseProps}\n        className={clsx(baseProps.className, styles.root)}\n        ref={mergedRef}\n      >\n        <div className={clsx(styles.columns, styles[`column-${columnCount}`])}>\n          {items &&\n            items.map((item, index) => (\n              <Tile\n                ref={index === tileRefIndex ? tileRef : undefined}\n                key={item.value}\n                item={item}\n                selected={item.value === value}\n                name={name || generatedName}\n                breakpoint={breakpoint}\n                onChange={onChange}\n              />\n            ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nfunction getColumnCount(\n  items: ReadonlyArray<TilesProps.TilesDefinition> | undefined,\n  columns: number | undefined\n): number {\n  if (columns) {\n    return columns;\n  }\n\n  const nItems = items ? items.length : 0;\n  const columnsLookup: Record<number, number> = {\n    0: 1,\n    1: 1,\n    2: 2,\n    4: 2,\n    8: 2,\n  };\n  return columnsLookup[nItems] || 3;\n}\n\nexport default InternalTiles;\n"]}

package/top-navigation/interfaces.d.ts

@@ -45,12 +45,14 @@ export interface TopNavigationProps extends BaseComponentProps {
      * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.
      * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.
      * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.
+     * * `onFollow` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an `href` set.
      *
      * ### menu-dropdown
      *
      * * `description` (string) - The description displayed inside the dropdown.
      * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).
      * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.
+     * * `onItemFollow` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an `href` set.
      */
     utilities?: ReadonlyArray<TopNavigationProps.Utility>;
     /**

package/top-navigation/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;;;;;OAOG;IACH,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IAEtC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAiCG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEtD;;OAEG;IACH,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC;CAC7C;AAED,yBAAiB,kBAAkB,CAAC;IAClC,MAAM,WAAW,QAAQ;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,sBAAsB,CAAC;KACnC;IAED,MAAM,WAAW,IAAI;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;IAED,UAAU,WAAW;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QAEnB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,sBAAsB,CAAC,EAAE,OAAO,CAAC;QACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B;IAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;QACtD,IAAI,EAAE,eAAe,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;QACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;QAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,MAAM,WAAW,aAAc,SAAQ,WAAW;QAChD,IAAI,EAAE,QAAQ,CAAC;QACf,OAAO,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC;QACpC,OAAO,CAAC,EAAE,sBAAsB,CAAC;QACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;IAED,MAAM,MAAM,OAAO,GAAG,mBAAmB,GAAG,aAAa,CAAC;IAE1D,MAAM,WAAW,WAAW;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,gCAAgC,CAAC,EAAE,MAAM,CAAC;QAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,uBAAuB,EAAE,MAAM,CAAC;QAChC,qBAAqB,EAAE,MAAM,CAAC;KAC/B;;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"lib/default/","sources":["top-navigation/interfaces.ts"],"names":[],"mappings":";AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D;;;;;;;OAOG;IACH,QAAQ,EAAE,kBAAkB,CAAC,QAAQ,CAAC;IAEtC;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAEtD;;OAEG;IACH,WAAW,EAAE,kBAAkB,CAAC,WAAW,CAAC;CAC7C;AAED,yBAAiB,kBAAkB,CAAC;IAClC,MAAM,WAAW,QAAQ;QACvB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,CAAC,EAAE,IAAI,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,sBAAsB,CAAC;KACnC;IAED,MAAM,WAAW,IAAI;QACnB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,CAAC,EAAE,MAAM,CAAC;KACd;IAED,UAAU,WAAW;QACnB,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;QAEnB,KAAK,CAAC,EAAE,OAAO,CAAC;QAChB,sBAAsB,CAAC,EAAE,OAAO,CAAC;QACjC,mBAAmB,CAAC,EAAE,OAAO,CAAC;KAC/B;IAED,MAAM,WAAW,mBAAoB,SAAQ,WAAW;QACtD,IAAI,EAAE,eAAe,CAAC;QACtB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,mBAAmB,CAAC,KAAK,CAAC;QACjC,WAAW,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;QAC3E,YAAY,CAAC,EAAE,sBAAsB,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;KAC7E;IAED,MAAM,WAAW,aAAc,SAAQ,WAAW;QAChD,IAAI,EAAE,QAAQ,CAAC;QACf,OAAO,CAAC,EAAE,gBAAgB,GAAG,MAAM,CAAC;QACpC,OAAO,CAAC,EAAE,sBAAsB,CAAC;QACjC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;QAC5D,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,qBAAqB,CAAC,EAAE,MAAM,CAAC;KAChC;IAED,MAAM,MAAM,OAAO,GAAG,mBAAmB,GAAG,aAAa,CAAC;IAE1D,MAAM,WAAW,WAAW;QAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,0BAA0B,CAAC,EAAE,MAAM,CAAC;QACpC,gCAAgC,CAAC,EAAE,MAAM,CAAC;QAC1C,6BAA6B,CAAC,EAAE,MAAM,CAAC;QACvC,uBAAuB,EAAE,MAAM,CAAC;QAChC,qBAAqB,EAAE,MAAM,CAAC;KAC/B;;CACF"}

package/top-navigation/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["top-navigation/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CancelableEventHandler } from '../internal/events';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { ButtonProps } from '../button/interfaces';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n  /**\n   * Properties describing the product identity. They are as follows:\n   *\n   * * `title` (string) - Specifies the title text.\n   * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product. Use fixed width and height for SVG images to ensure proper rendering.\n   * * `href` (string) - Specifies the `href` that the header links to.\n   * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n   */\n  identity: TopNavigationProps.Identity;\n\n  /**\n   * Use with an input or autosuggest control for a global search query.\n   */\n  search?: React.ReactNode;\n\n  /**\n   * A list of utility navigation elements.\n   * The supported utility types are: `button` and `menu-dropdown`.\n   *\n   * The following properties are supported across all utility types:\n   *\n   * * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n   * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n   * * `title` (string) - The title displayed inside the dropdown.\n   * * `iconName` (string) - The name of an existing icon to display next to the utility.\n   * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n   * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n   * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n   * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n   * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n   *\n   * ### button\n   *\n   * * `variant` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.\n   * * `href` (string) - Specifies the `href` for a link styled as a button.\n   * * `target` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`). This property only applies when an `href` is provided.\n   * * `rel` (string) - Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`. If the `rel` property is provided, it overrides the default behavior.\n   * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n   * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n   * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n   *\n   * ### menu-dropdown\n   *\n   * * `description` (string) - The description displayed inside the dropdown.\n   * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).\n   * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n   */\n  utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n  /**\n   * An object containing all the localized strings required by the component.\n   */\n  i18nStrings: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n  export interface Identity {\n    title?: string;\n    logo?: Logo;\n    href: string;\n    onFollow?: CancelableEventHandler;\n  }\n\n  export interface Logo {\n    src: string;\n    alt?: string;\n  }\n\n  interface BaseUtility {\n    text?: string;\n    title?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconAlt?: string;\n    iconSvg?: React.ReactNode;\n    ariaLabel?: string;\n\n    badge?: boolean;\n    disableUtilityCollapse?: boolean;\n    disableTextCollapse?: boolean;\n  }\n\n  export interface MenuDropdownUtility extends BaseUtility {\n    type: 'menu-dropdown';\n    description?: string;\n    items: ButtonDropdownProps.Items;\n    onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n    onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  }\n\n  export interface ButtonUtility extends BaseUtility {\n    type: 'button';\n    variant?: 'primary-button' | 'link';\n    onClick?: CancelableEventHandler;\n    onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n    href?: string;\n    target?: string;\n    rel?: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n  }\n\n  export type Utility = MenuDropdownUtility | ButtonUtility;\n\n  export interface I18nStrings {\n    searchIconAriaLabel?: string;\n    searchDismissIconAriaLabel?: string;\n    overflowMenuDismissIconAriaLabel?: string;\n    overflowMenuBackIconAriaLabel?: string;\n    overflowMenuTriggerText: string;\n    overflowMenuTitleText: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"lib/default/","sources":["top-navigation/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CancelableEventHandler } from '../internal/events';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { IconProps } from '../icon/interfaces';\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { ButtonProps } from '../button/interfaces';\n\nexport interface TopNavigationProps extends BaseComponentProps {\n  /**\n   * Properties describing the product identity. They are as follows:\n   *\n   * * `title` (string) - Specifies the title text.\n   * * `logo` ({ src: string, alt: string }) - Specifies the logo for the product. Use fixed width and height for SVG images to ensure proper rendering.\n   * * `href` (string) - Specifies the `href` that the header links to.\n   * * `onFollow` (() => void) - Specifies the event handler called when the identity is clicked without any modifier keys.\n   */\n  identity: TopNavigationProps.Identity;\n\n  /**\n   * Use with an input or autosuggest control for a global search query.\n   */\n  search?: React.ReactNode;\n\n  /**\n   * A list of utility navigation elements.\n   * The supported utility types are: `button` and `menu-dropdown`.\n   *\n   * The following properties are supported across all utility types:\n   *\n   * * `type` (string) - The type of the utility. Can be `button` or `menu-dropdown`.\n   * * `text` (string) - Specifies the text shown in the top navigation or the title inside the dropdown if no explicit `title` property is set.\n   * * `title` (string) - The title displayed inside the dropdown.\n   * * `iconName` (string) - The name of an existing icon to display next to the utility.\n   * * `iconUrl` (string) - Specifies the URL of a custom icon. Use this property if the icon you want isn't available.\n   * * `iconAlt` (string) - Specifies alternate text for a custom icon provided using `iconUrl`. We recommend that you provide this for accessibility.\n   * * `iconSvg` (string) - Specifies the SVG of a custom icon.\n   * * `ariaLabel` (string) - Adds `aria-label` to the button or dropdown trigger. This is recommended for accessibility if a text is not provided.\n   * * `badge` (boolean) - Adds a badge to the corner of the icon to indicate a state change. For example: Unread notifications.\n   * * `disableTextCollapse` (boolean) - Prevents the utility text from being hidden on smaller screens.\n   * * `disableUtilityCollapse` (boolean) - Prevents the utility from being moved to an overflow menu on smaller screens.\n   *\n   * ### button\n   *\n   * * `variant` ('primary-button' | 'link') - The visual appearance of the button. The default value is 'link'.\n   * * `href` (string) - Specifies the `href` for a link styled as a button.\n   * * `target` (string) - Specifies where to open the linked URL (for example, to open in a new browser window or tab use `_blank`). This property only applies when an `href` is provided.\n   * * `rel` (string) - Adds a `rel` attribute to the link. By default, the component sets the `rel` attribute to \"noopener noreferrer\" when `target` is `\"_blank\"`. If the `rel` property is provided, it overrides the default behavior.\n   * * `external` (boolean) - Marks the link as external by adding an icon after the text. When clicked, the link opens in a new tab.\n   * * `externalIconAriaLabel` (string) - Adds an `aria-label` for the external icon.\n   * * `onClick` (() => void) - Specifies the event handler called when the utility is clicked.\n   * * `onFollow` (() => void) - Specifies the event handler called when the utility is clicked without pressing modifier keys, and the utility has an `href` set.\n   *\n   * ### menu-dropdown\n   *\n   * * `description` (string) - The description displayed inside the dropdown.\n   * * `items` (ButtonDropdownProps.Items) - An array of dropdown items. This follows the same structure as the `items` property of the [button dropdown component](/components/button-dropdown).\n   * * `onItemClick` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected.\n   * * `onItemFollow` (NonCancelableEventHandler<ButtonDropdownProps.ItemClickDetails>) - Specifies the event handler called when a dropdown item is selected without pressing modifier keys, and the item has an `href` set.\n   */\n  utilities?: ReadonlyArray<TopNavigationProps.Utility>;\n\n  /**\n   * An object containing all the localized strings required by the component.\n   */\n  i18nStrings: TopNavigationProps.I18nStrings;\n}\n\nexport namespace TopNavigationProps {\n  export interface Identity {\n    title?: string;\n    logo?: Logo;\n    href: string;\n    onFollow?: CancelableEventHandler;\n  }\n\n  export interface Logo {\n    src: string;\n    alt?: string;\n  }\n\n  interface BaseUtility {\n    text?: string;\n    title?: string;\n    iconName?: IconProps.Name;\n    iconUrl?: string;\n    iconAlt?: string;\n    iconSvg?: React.ReactNode;\n    ariaLabel?: string;\n\n    badge?: boolean;\n    disableUtilityCollapse?: boolean;\n    disableTextCollapse?: boolean;\n  }\n\n  export interface MenuDropdownUtility extends BaseUtility {\n    type: 'menu-dropdown';\n    description?: string;\n    items: ButtonDropdownProps.Items;\n    onItemClick?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n    onItemFollow?: CancelableEventHandler<ButtonDropdownProps.ItemClickDetails>;\n  }\n\n  export interface ButtonUtility extends BaseUtility {\n    type: 'button';\n    variant?: 'primary-button' | 'link';\n    onClick?: CancelableEventHandler;\n    onFollow?: CancelableEventHandler<ButtonProps.FollowDetail>;\n    href?: string;\n    target?: string;\n    rel?: string;\n    external?: boolean;\n    externalIconAriaLabel?: string;\n  }\n\n  export type Utility = MenuDropdownUtility | ButtonUtility;\n\n  export interface I18nStrings {\n    searchIconAriaLabel?: string;\n    searchDismissIconAriaLabel?: string;\n    overflowMenuDismissIconAriaLabel?: string;\n    overflowMenuBackIconAriaLabel?: string;\n    overflowMenuTriggerText: string;\n    overflowMenuTitleText: string;\n  }\n}\n"]}

package/top-navigation/parts/overflow-menu/menu-item.d.ts

@@ -3,6 +3,7 @@ import { ButtonDropdownProps } from '../../../button-dropdown/interfaces';
 import { TopNavigationProps } from '../../interfaces';
 type UtilityMenuItemProps = TopNavigationProps.Utility & {
     index: number;
+    onClose?: () => void;
 };
 export declare const UtilityMenuItem: React.ForwardRefExoticComponent<UtilityMenuItemProps & React.RefAttributes<HTMLAnchorElement & HTMLButtonElement>>;
 type SubmenuItemProps = ButtonDropdownProps.ItemOrGroup & {