npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.128 → 3.0.129 - Mend

@cloudscape-design/components-themeable 3.0.128 → 3.0.129

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

Files changed (208) hide show

package/lib/internal/template/table/styles.selectors.js CHANGED Viewed

@@ -2,39 +2,39 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "root": "awsui_root_wih1l_r2zh7_97",
-  "tools": "awsui_tools_wih1l_r2zh7_106",
-  "tools-filtering": "awsui_tools-filtering_wih1l_r2zh7_112",
-  "tools-align-right": "awsui_tools-align-right_wih1l_r2zh7_117",
-  "tools-pagination": "awsui_tools-pagination_wih1l_r2zh7_121",
-  "tools-preferences": "awsui_tools-preferences_wih1l_r2zh7_121",
-  "tools-small": "awsui_tools-small_wih1l_r2zh7_127",
-  "table": "awsui_table_wih1l_r2zh7_133",
-  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_r2zh7_139",
-  "wrapper": "awsui_wrapper_wih1l_r2zh7_143",
-  "variant-stacked": "awsui_variant-stacked_wih1l_r2zh7_153",
-  "variant-container": "awsui_variant-container_wih1l_r2zh7_153",
-  "variant-embedded": "awsui_variant-embedded_wih1l_r2zh7_157",
-  "has-header": "awsui_has-header_wih1l_r2zh7_160",
-  "has-footer": "awsui_has-footer_wih1l_r2zh7_163",
-  "cell-merged": "awsui_cell-merged_wih1l_r2zh7_173",
-  "cell-merged-content": "awsui_cell-merged-content_wih1l_r2zh7_177",
-  "empty": "awsui_empty_wih1l_r2zh7_192",
-  "loading": "awsui_loading_wih1l_r2zh7_196",
-  "selection-control": "awsui_selection-control_wih1l_r2zh7_200",
-  "selection-control-header": "awsui_selection-control-header_wih1l_r2zh7_207",
-  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_r2zh7_212",
-  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_r2zh7_222",
-  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_r2zh7_225",
-  "dark-header": "awsui_dark-header_wih1l_r2zh7_233",
-  "header-secondary": "awsui_header-secondary_wih1l_r2zh7_237",
-  "table-has-header": "awsui_table-has-header_wih1l_r2zh7_256",
-  "header-controls": "awsui_header-controls_wih1l_r2zh7_260",
-  "divider": "awsui_divider_wih1l_r2zh7_274",
-  "footer-wrapper": "awsui_footer-wrapper_wih1l_r2zh7_281",
-  "footer": "awsui_footer_wih1l_r2zh7_281",
-  "thead-active": "awsui_thead-active_wih1l_r2zh7_290",
-  "row": "awsui_row_wih1l_r2zh7_291",
-  "row-selected": "awsui_row-selected_wih1l_r2zh7_292"
+  "root": "awsui_root_wih1l_127ej_97",
+  "tools": "awsui_tools_wih1l_127ej_106",
+  "tools-filtering": "awsui_tools-filtering_wih1l_127ej_112",
+  "tools-align-right": "awsui_tools-align-right_wih1l_127ej_117",
+  "tools-pagination": "awsui_tools-pagination_wih1l_127ej_121",
+  "tools-preferences": "awsui_tools-preferences_wih1l_127ej_121",
+  "tools-small": "awsui_tools-small_wih1l_127ej_127",
+  "table": "awsui_table_wih1l_127ej_133",
+  "table-layout-fixed": "awsui_table-layout-fixed_wih1l_127ej_139",
+  "wrapper": "awsui_wrapper_wih1l_127ej_143",
+  "variant-stacked": "awsui_variant-stacked_wih1l_127ej_151",
+  "variant-container": "awsui_variant-container_wih1l_127ej_151",
+  "variant-embedded": "awsui_variant-embedded_wih1l_127ej_155",
+  "has-header": "awsui_has-header_wih1l_127ej_158",
+  "has-footer": "awsui_has-footer_wih1l_127ej_161",
+  "cell-merged": "awsui_cell-merged_wih1l_127ej_175",
+  "cell-merged-content": "awsui_cell-merged-content_wih1l_127ej_179",
+  "empty": "awsui_empty_wih1l_127ej_194",
+  "loading": "awsui_loading_wih1l_127ej_198",
+  "selection-control": "awsui_selection-control_wih1l_127ej_202",
+  "selection-control-header": "awsui_selection-control-header_wih1l_127ej_209",
+  "sticky-scrollbar": "awsui_sticky-scrollbar_wih1l_127ej_214",
+  "sticky-scrollbar-content": "awsui_sticky-scrollbar-content_wih1l_127ej_224",
+  "sticky-scrollbar-visible": "awsui_sticky-scrollbar-visible_wih1l_127ej_227",
+  "dark-header": "awsui_dark-header_wih1l_127ej_235",
+  "header-secondary": "awsui_header-secondary_wih1l_127ej_239",
+  "table-has-header": "awsui_table-has-header_wih1l_127ej_258",
+  "header-controls": "awsui_header-controls_wih1l_127ej_262",
+  "divider": "awsui_divider_wih1l_127ej_276",
+  "footer-wrapper": "awsui_footer-wrapper_wih1l_127ej_283",
+  "footer": "awsui_footer_wih1l_127ej_283",
+  "thead-active": "awsui_thead-active_wih1l_127ej_292",
+  "row": "awsui_row_wih1l_127ej_293",
+  "row-selected": "awsui_row-selected_wih1l_127ej_294"
 };

package/lib/internal/template/tabs/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;~~AASzC~~,OAAO,EAAE,SAAS,EAAE,CAAC;AAGrB,eAAO,MAAM,eAAe,cAA+E,CAAC;AAU5G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,GAAG,IAAI,EACR,EAAE,SAAS,~~eAqFX~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAUzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAGrB,eAAO,MAAM,eAAe,cAA+E,CAAC;AAU5G,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,GAAG,IAAI,EACR,EAAE,SAAS,eA2FX"}

package/lib/internal/template/tabs/index.js CHANGED Viewed

@@ -7,11 +7,12 @@ import { fireNonCancelableEvent } from '../internal/events';
 import InternalContainer from '../container/internal';
 import clsx from 'clsx';
 import styles from './styles.css.js';
-import { TabHeaderBar } from './tab-header-bar';
+import { getTabElementId, TabHeaderBar } from './tab-header-bar';
 import { useControllable } from '../internal/hooks/use-controllable';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
+import useFocusVisible from '../internal/hooks/focus-visible';
 var lastGeneratedId = 0;
 export var nextGeneratedId = function () { return "awsui-tabs-".concat(lastGeneratedId++, "-").concat(Math.round(Math.random() * 10000)); };
 function firstEnabledTab(tabs) {
@@ -36,23 +37,20 @@ export default function Tabs(_a) {
         changeHandler: 'onChange'
     }), activeTabId = _f[0], setActiveTabId = _f[1];
     var baseProps = getBaseProps(rest);
+    var focusVisible = useFocusVisible();
     var content = function () {
         var _a;
         var selectedTab = tabs.filter(function (tab) { return tab.id === activeTabId; })[0];
         var renderContent = function (tab) {
             var _a;
-            var isContentActive = tab === selectedTab && !selectedTab.disabled && selectedTab.content;
+            var isTabSelected = tab === selectedTab;
             var classes = clsx((_a = {},
                 _a[styles['tabs-content']] = true,
-                _a[styles['tabs-content-active']] = isContentActive,
+                _a[styles['tabs-content-active']] = isTabSelected,
                 _a));
-            var contentAttributes = {
-                className: classes,
-                role: 'tabpanel',
-                id: "".concat(idNamespace, "-").concat(tab.id, "-panel"),
-                key: "".concat(idNamespace, "-").concat(tab.id, "-panel")
-            };
-            return React.createElement("div", __assign({}, contentAttributes), isContentActive && selectedTab.content);
+            var contentAttributes = __assign(__assign({}, focusVisible), { className: classes, role: 'tabpanel', id: "".concat(idNamespace, "-").concat(tab.id, "-panel"), key: "".concat(idNamespace, "-").concat(tab.id, "-panel"), tabIndex: 0, 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }) });
+            var isContentShown = isTabSelected && !selectedTab.disabled;
+            return React.createElement("div", __assign({}, contentAttributes), isContentShown && selectedTab.content);
         };
         return (React.createElement("div", { className: clsx(variant === 'container' ? styles['tabs-container-content-wrapper'] : styles['tabs-content-wrapper'], (_a = {},
                 _a[styles['with-paddings']] = !disableContentPaddings,
@@ -63,7 +61,7 @@ export default function Tabs(_a) {
             fireNonCancelableEvent(onChange, changeDetail);
         } }));
     if (variant === 'container') {
-        return (React.createElement(InternalContainer, __assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: disableContentPaddings }), content()));
+        return (React.createElement(InternalContainer, __assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true }), content()));
     }
     return (React.createElement("div", __assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles.tabs), ref: __internalRootRef }),
         header,

package/lib/internal/template/tabs/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC5D,OAAO,iBAAiB,MAAM,uBAAuB,CAAC;AAEtD,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;~~AAChD~~,OAAO,EAAE,eAAe,EAAE,MAAM,oCAAoC,CAAC;AACrE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,kCAAkC,CAAC;~~AAIhE~~,IAAI,eAAe,GAAG,CAAC,CAAC;AACxB,MAAM,CAAC,IAAM,eAAe,GAAG,cAAM,OAAA,qBAAc,eAAe,EAAE,cAAI,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,KAAK,CAAC,CAAE,EAAtE,CAAsE,CAAC;AAE5G,SAAS,eAAe,CAAC,IAAkC;IACzD,IAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,UAAA,GAAG,IAAI,OAAA,CAAC,GAAG,CAAC,QAAQ,EAAb,CAAa,CAAC,CAAC;IACtD,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE;QAC1B,OAAO,WAAW,CAAC,CAAC,CAAC,CAAC;KACvB;IACD,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EASjB;;IARV,IAAA,IAAI,UAAA,EACJ,eAAmB,EAAnB,OAAO,mBAAG,SAAS,KAAA,EACnB,QAAQ,cAAA,EACK,eAAe,iBAAA,EAC5B,SAAS,eAAA,EACT,cAAc,oBAAA,EACd,8BAA8B,EAA9B,sBAAsB,mBAAG,KAAK,KAAA,EAC3B,IAAI,cARoB,uGAS5B,CADQ;IAEP,KAAkB,UAAI,EAAJ,aAAI,EAAJ,kBAAI,EAAJ,IAAI,EAAE;QAAnB,IAAM,GAAG,aAAA;QACZ,YAAY,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,CAAC,CAAC;KAChC;IACO,IAAA,iBAAiB,GAAK,gBAAgB,CAAC,MAAM,CAAC,kBAA7B,CAA8B;IAChD,IAAA,WAAW,GAAI,QAAQ,CAAC,cAAM,OAAA,eAAe,EAAE,EAAjB,CAAiB,CAAC,GAArC,CAAsC;IAElD,IAAA,KAAgC,eAAe,CAAC,eAAe,EAAE,QAAQ,EAAE,MAAA,MAAA,eAAe,CAAC,IAAI,CAAC,0CAAE,EAAE,mCAAI,EAAE,EAAE;QAChH,aAAa,EAAE,MAAM;QACrB,cAAc,EAAE,aAAa;QAC7B,aAAa,EAAE,UAAU;KAC1B,CAAC,EAJK,WAAW,QAAA,EAAE,cAAc,QAIhC,CAAC;IAEH,IAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,IAAM,OAAO,GAAG;;QACd,IAAM,WAAW,GAAG,IAAI,CAAC,MAAM,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,EAAE,KAAK,WAAW,EAAtB,CAAsB,CAAC,CAAC,CAAC,CAAC,CAAC;QAClE,IAAM,aAAa,GAAG,UAAC,GAAkB;;YACvC,IAAM,~~eAAe~~,GAAG,GAAG,KAAK,WAAW,~~IAAI,~~CAAC~~,WAAW,CAAC,QAAQ,IAAI,WAAW,CAAC,OAAO,CAAC~~;~~YAE5F~~,IAAM,OAAO,GAAG,IAAI;gBAClB,GAAC,MAAM,CAAC,cAAc,CAAC,IAAG,IAAI;gBAC9B,GAAC,MAAM,CAAC,qBAAqB,CAAC,IAAG,~~eAAe~~;~~oBAChD~~,CAAC;YAEH,IAAM,iBAAiB,~~GAAiC;gBACtD~~,SAAS,EAAE,OAAO~~;gBAClB~~,IAAI,EAAE,UAAU~~;gBAChB~~,EAAE,EAAE,UAAG,WAAW,cAAI,GAAG,CAAC,EAAE,WAAQ~~;gBACpC~~,GAAG,EAAE,UAAG,WAAW,cAAI,GAAG,CAAC,EAAE,WAAQ~~;aACtC~~,CAAC;YAEF,OAAO,wCAAS,iBAAiB,GAAG,~~eAAe~~,IAAI,WAAW,CAAC,OAAO,CAAO,CAAC;~~QACpF~~,CAAC,CAAC;QAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,OAAO,KAAK,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,gCAAgC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,sBAAsB,CAAC;gBAEjG,GAAC,MAAM,CAAC,eAAe,CAAC,IAAG,CAAC,sBAAsB;oBAErD,IAEA,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,CACpB,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,IAAM,MAAM,GAAG,CACb,oBAAC,YAAY,IACX,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,UAAA,YAAY;YACpB,cAAc,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC;YACzC,sBAAsB,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC;QACjD,CAAC,GACD,CACH,CAAC;IAEF,IAAI,OAAO,KAAK,WAAW,EAAE;QAC3B,OAAO,CACL,oBAAC,iBAAiB,aAChB,MAAM,EAAE,MAAM,EACd,qBAAqB,EAAE,IAAI,IACvB,SAAS,IACb,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,CAAC,EACjD,iBAAiB,EAAE,iBAAiB,EACpC,sBAAsB,EAAE,~~sBAAsB~~,~~KAE7C~~,OAAO,EAAE,CACQ,CACrB,CAAC;KACH;IAED,OAAO,CACL,wCAAS,SAAS,IAAE,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,iBAAiB;QACvG,MAAM;QACN,OAAO,EAAE,CACN,CACP,CAAC;AACJ,CAAC;AAED,gBAAgB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport InternalContainer from '../container/internal';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { TabHeaderBar } from './tab-header-bar';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\n\nexport { TabsProps };\n\nlet lastGeneratedId = 0;\nexport const nextGeneratedId = () => `awsui-tabs-${lastGeneratedId++}-${Math.round(Math.random() * 10000)}`;\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n const enabledTabs = tabs.filter(tab => !tab.disabled);\n if (enabledTabs.length > 0) {\n return enabledTabs[0];\n }\n return null;\n}\n\nexport default function Tabs({\n tabs,\n variant = 'default',\n onChange,\n activeTabId: controlledTabId,\n ariaLabel,\n ariaLabelledby,\n disableContentPaddings = false,\n ...rest\n}: TabsProps) {\n for (const tab of tabs) {\n checkSafeUrl('Tabs', tab.href);\n }\n const { __internalRootRef } = useBaseComponent('Tabs');\n const [idNamespace] = useState(() => nextGeneratedId());\n\n const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n componentName: 'Tabs',\n controlledProp: 'activeTabId',\n changeHandler: 'onChange',\n });\n\n const baseProps = getBaseProps(rest);\n\n const content = () => {\n const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n const renderContent = (tab: TabsProps.Tab) => {\n const ~~isContentActive~~ = tab === selectedTab ~~&& !selectedTab.disabled && selectedTab.content~~;\n\n const classes = clsx({\n [styles['tabs-content']]: true,\n [styles['tabs-content-active']]: ~~isContentActive~~,\n });\n\n const contentAttributes: JSX.IntrinsicElements['div'] = {\n className: classes,\n role: 'tabpanel',\n id: `${idNamespace}-${tab.id}-panel`,\n key: `${idNamespace}-${tab.id}-panel`,\n };\n\n return <div {...contentAttributes}>{~~isContentActive~~ && selectedTab.content}</div>;\n };\n\n return (\n <div\n className={clsx(\n variant === 'container' ? styles['tabs-container-content-wrapper'] : styles['tabs-content-wrapper'],\n {\n [styles['with-paddings']]: !disableContentPaddings,\n }\n )}\n >\n {tabs.map(renderContent)}\n </div>\n );\n };\n\n const header = (\n <TabHeaderBar\n activeTabId={activeTabId}\n variant={variant}\n idNamespace={idNamespace}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n tabs={tabs}\n onChange={changeDetail => {\n setActiveTabId(changeDetail.activeTabId);\n fireNonCancelableEvent(onChange, changeDetail);\n }}\n />\n );\n\n if (variant === 'container') {\n return (\n <InternalContainer\n header={header}\n disableHeaderPaddings={true}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n disableContentPaddings={~~disableContentPaddings~~}\n >\n {content()}\n </InternalContainer>\n );\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root, styles.tabs)} ref={__internalRootRef}>\n {header}\n {content()}\n </div>\n );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useState } from 'react';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport InternalContainer from '../container/internal';\nimport { TabsProps } from './interfaces';\nimport clsx from 'clsx';\nimport styles from './styles.css.js';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport useFocusVisible from '../internal/hooks/focus-visible';\n\nexport { TabsProps };\n\nlet lastGeneratedId = 0;\nexport const nextGeneratedId = () => `awsui-tabs-${lastGeneratedId++}-${Math.round(Math.random() * 10000)}`;\n\nfunction firstEnabledTab(tabs: ReadonlyArray<TabsProps.Tab>) {\n const enabledTabs = tabs.filter(tab => !tab.disabled);\n if (enabledTabs.length > 0) {\n return enabledTabs[0];\n }\n return null;\n}\n\nexport default function Tabs({\n tabs,\n variant = 'default',\n onChange,\n activeTabId: controlledTabId,\n ariaLabel,\n ariaLabelledby,\n disableContentPaddings = false,\n ...rest\n}: TabsProps) {\n for (const tab of tabs) {\n checkSafeUrl('Tabs', tab.href);\n }\n const { __internalRootRef } = useBaseComponent('Tabs');\n const [idNamespace] = useState(() => nextGeneratedId());\n\n const [activeTabId, setActiveTabId] = useControllable(controlledTabId, onChange, firstEnabledTab(tabs)?.id ?? '', {\n componentName: 'Tabs',\n controlledProp: 'activeTabId',\n changeHandler: 'onChange',\n });\n\n const baseProps = getBaseProps(rest);\n\n const focusVisible = useFocusVisible();\n\n const content = () => {\n const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];\n const renderContent = (tab: TabsProps.Tab) => {\n const isTabSelected = tab === selectedTab;\n\n const classes = clsx({\n [styles['tabs-content']]: true,\n [styles['tabs-content-active']]: isTabSelected,\n });\n\n const contentAttributes: JSX.IntrinsicElements['div'] = {\n ...focusVisible,\n className: classes,\n role: 'tabpanel',\n id: `${idNamespace}-${tab.id}-panel`,\n key: `${idNamespace}-${tab.id}-panel`,\n tabIndex: 0,\n 'aria-labelledby': getTabElementId({ namespace: idNamespace, tabId: tab.id }),\n };\n\n const isContentShown = isTabSelected && !selectedTab.disabled;\n return <div {...contentAttributes}>{isContentShown && selectedTab.content}</div>;\n };\n\n return (\n <div\n className={clsx(\n variant === 'container' ? styles['tabs-container-content-wrapper'] : styles['tabs-content-wrapper'],\n {\n [styles['with-paddings']]: !disableContentPaddings,\n }\n )}\n >\n {tabs.map(renderContent)}\n </div>\n );\n };\n\n const header = (\n <TabHeaderBar\n activeTabId={activeTabId}\n variant={variant}\n idNamespace={idNamespace}\n ariaLabel={ariaLabel}\n ariaLabelledby={ariaLabelledby}\n tabs={tabs}\n onChange={changeDetail => {\n setActiveTabId(changeDetail.activeTabId);\n fireNonCancelableEvent(onChange, changeDetail);\n }}\n />\n );\n\n if (variant === 'container') {\n return (\n <InternalContainer\n header={header}\n disableHeaderPaddings={true}\n {...baseProps}\n className={clsx(baseProps.className, styles.root)}\n __internalRootRef={__internalRootRef}\n disableContentPaddings={true}\n >\n {content()}\n </InternalContainer>\n );\n }\n\n return (\n <div {...baseProps} className={clsx(baseProps.className, styles.root, styles.tabs)} ref={__internalRootRef}>\n {header}\n {content()}\n </div>\n );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}

package/lib/internal/template/tabs/styles.css.js CHANGED Viewed

@@ -1,26 +1,26 @@
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_ugrxl_186",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_ugrxl_192",
-  "pagination-button": "awsui_pagination-button_14rmt_ugrxl_210",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_ugrxl_215",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_ugrxl_218",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_ugrxl_222",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_ugrxl_225",
-  "tabs-tab": "awsui_tabs-tab_14rmt_ugrxl_230",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_ugrxl_241",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_ugrxl_257",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_ugrxl_314",
-  "refresh": "awsui_refresh_14rmt_ugrxl_331",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_ugrxl_345",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_ugrxl_352",
-  "root": "awsui_root_14rmt_ugrxl_356",
-  "tabs": "awsui_tabs_14rmt_ugrxl_186",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_ugrxl_373",
-  "with-paddings": "awsui_with-paddings_14rmt_ugrxl_373",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_ugrxl_377",
-  "tabs-content": "awsui_tabs-content_14rmt_ugrxl_373",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_ugrxl_385"
+  "tabs-header": "awsui_tabs-header_14rmt_oj2gj_186",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_oj2gj_192",
+  "pagination-button": "awsui_pagination-button_14rmt_oj2gj_210",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_oj2gj_215",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_oj2gj_218",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_oj2gj_222",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_oj2gj_225",
+  "tabs-tab": "awsui_tabs-tab_14rmt_oj2gj_230",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_oj2gj_241",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_oj2gj_257",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_oj2gj_314",
+  "refresh": "awsui_refresh_14rmt_oj2gj_332",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_oj2gj_346",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_oj2gj_353",
+  "root": "awsui_root_14rmt_oj2gj_357",
+  "tabs": "awsui_tabs_14rmt_oj2gj_186",
+  "tabs-content": "awsui_tabs-content_14rmt_oj2gj_374",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_oj2gj_378",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_oj2gj_388",
+  "with-paddings": "awsui_with-paddings_14rmt_oj2gj_388",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_oj2gj_392"
 };

package/lib/internal/template/tabs/styles.scoped.css CHANGED Viewed

@@ -183,13 +183,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  SPDX-License-Identifier: Apache-2.0
 */
 /* stylelint-disable selector-max-type */
-.awsui_tabs-header_14rmt_ugrxl_186:not(#\9) {
+.awsui_tabs-header_14rmt_oj2gj_186:not(#\9) {
   margin: 0;
   padding: 0;
   display: flex;
 }
-.awsui_tabs-header-list_14rmt_ugrxl_192:not(#\9) {
+.awsui_tabs-header-list_14rmt_oj2gj_192:not(#\9) {
   margin: 0;
   padding: 0;
   display: flex;
@@ -202,43 +202,43 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   scrollbar-width: none;
   /* Firefox */
 }
-.awsui_tabs-header-list_14rmt_ugrxl_192:not(#\9)::-webkit-scrollbar {
+.awsui_tabs-header-list_14rmt_oj2gj_192:not(#\9)::-webkit-scrollbar {
   display: none;
   /* Safari and Chrome */
 }
-.awsui_pagination-button_14rmt_ugrxl_210:not(#\9) {
+.awsui_pagination-button_14rmt_oj2gj_210:not(#\9) {
   margin: var(--space-scaled-s-cu1hzn, 12px) 0;
   padding: 0 var(--space-xxs-ynfts5, 4px);
   display: flex;
 }
-.awsui_pagination-button-left_14rmt_ugrxl_215:not(#\9) {
+.awsui_pagination-button-left_14rmt_oj2gj_215:not(#\9) {
   border-right: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-control-disabled-zgidl5, #d5dbdb);
 }
-.awsui_pagination-button-left-scrollable_14rmt_ugrxl_218:not(#\9) {
+.awsui_pagination-button-left-scrollable_14rmt_oj2gj_218:not(#\9) {
   z-index: 1;
   box-shadow: 5px 0px 4px -3px var(--color-border-tabs-shadow-22eyu5, #eaeded), 1px 0px 0px 0px var(--color-border-tabs-shadow-22eyu5, #eaeded);
 }
-.awsui_pagination-button-right_14rmt_ugrxl_222:not(#\9) {
+.awsui_pagination-button-right_14rmt_oj2gj_222:not(#\9) {
   border-left: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-control-disabled-zgidl5, #d5dbdb);
 }
-.awsui_pagination-button-right-scrollable_14rmt_ugrxl_225:not(#\9) {
+.awsui_pagination-button-right-scrollable_14rmt_oj2gj_225:not(#\9) {
   z-index: 1;
   box-shadow: -5px 0px 4px -3px var(--color-border-tabs-shadow-22eyu5, #eaeded), -1px 0px 0px 0 var(--color-border-tabs-shadow-22eyu5, #eaeded);
 }
-.awsui_tabs-tab_14rmt_ugrxl_230:not(#\9) {
+.awsui_tabs-tab_14rmt_oj2gj_230:not(#\9) {
   list-style: none;
   padding: 0;
   flex-shrink: 0;
   display: flex;
   max-width: calc(90% - var(--space-l-4vl6xu, 20px));
 }
-.awsui_tabs-tab_14rmt_ugrxl_230 > button:not(#\9) {
+.awsui_tabs-tab_14rmt_oj2gj_230 > button:not(#\9) {
   background-color: transparent;
 }
-.awsui_tabs-tab-label_14rmt_ugrxl_241:not(#\9) {
+.awsui_tabs-tab-label_14rmt_oj2gj_241:not(#\9) {
   display: flex;
   align-items: center;
   padding: var(--space-scaled-2x-xxs-t5qzmf, 4px) var(--space-l-4vl6xu, 20px);
@@ -249,12 +249,12 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-break: break-word;
 }
-.awsui_tabs-tab_14rmt_ugrxl_230:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_ugrxl_241, .awsui_tabs-tab_14rmt_ugrxl_230:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_ugrxl_241 {
+.awsui_tabs-tab_14rmt_oj2gj_230:not(#\9):not(:last-child) > a > .awsui_tabs-tab-label_14rmt_oj2gj_241, .awsui_tabs-tab_14rmt_oj2gj_230:not(#\9):not(:last-child) > button > .awsui_tabs-tab-label_14rmt_oj2gj_241 {
   margin-right: calc(-1 * var(--border-divider-section-width-5a4cv1, 1px));
   border-right: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-tabs-divider-lf9ugx, #aab7b8);
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257:not(#\9) {
+.awsui_tabs-tab-link_14rmt_oj2gj_257:not(#\9) {
   position: relative;
   display: flex;
   align-items: stretch;
@@ -268,21 +268,21 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: var(--font-wayfinding-link-active-weight-r40wpo, 700);
   color: var(--color-text-interactive-default-9me1cm, #545b64);
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257:not(#\9):hover {
+.awsui_tabs-tab-link_14rmt_oj2gj_257:not(#\9):hover {
   color: var(--color-text-accent-s0earc, #0073bb);
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_oj2gj_257:not(#\9):focus {
   outline: none;
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_oj2gj_257[data-awsui-focus-visible=true]:not(#\9):focus {
   z-index: 1;
   position: relative;
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257[data-awsui-focus-visible=true]:not(#\9):focus {
+.awsui_tabs-tab-link_14rmt_oj2gj_257[data-awsui-focus-visible=true]:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-tabs-focus-outline-gutter-th1z8v, 0px) - 1px);
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257[data-awsui-focus-visible=true]:not(#\9):focus::before {
+.awsui_tabs-tab-link_14rmt_oj2gj_257[data-awsui-focus-visible=true]:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -293,31 +293,32 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-radius: var(--border-radius-control-default-focus-ring-hekmgc, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257[data-awsui-focus-visible=true]:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_ugrxl_241, .awsui_tabs-tab-link_14rmt_ugrxl_257[data-awsui-focus-visible=true]:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_ugrxl_241 {
+.awsui_tabs-tab-link_14rmt_oj2gj_257[data-awsui-focus-visible=true]:not(#\9):focus > a > .awsui_tabs-tab-label_14rmt_oj2gj_241, .awsui_tabs-tab-link_14rmt_oj2gj_257[data-awsui-focus-visible=true]:not(#\9):focus > button > .awsui_tabs-tab-label_14rmt_oj2gj_241 {
   border-right-color: transparent;
 }
-.awsui_tabs-tab_14rmt_ugrxl_230:not(#\9):first-child {
+.awsui_tabs-tab_14rmt_oj2gj_230:not(#\9):first-child {
   margin-left: 1px;
 }
-.awsui_tabs-tab_14rmt_ugrxl_230:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_ugrxl_241, .awsui_tabs-tab_14rmt_ugrxl_230:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_ugrxl_241 {
+.awsui_tabs-tab_14rmt_oj2gj_230:not(#\9):first-child > a > .awsui_tabs-tab-label_14rmt_oj2gj_241, .awsui_tabs-tab_14rmt_oj2gj_230:not(#\9):first-child > button > .awsui_tabs-tab-label_14rmt_oj2gj_241 {
   padding-left: calc(var(--space-l-4vl6xu, 20px) - 1px);
 }
-.awsui_tabs-tab_14rmt_ugrxl_230:not(#\9):last-child {
+.awsui_tabs-tab_14rmt_oj2gj_230:not(#\9):last-child {
   margin-right: 1px;
 }
-.awsui_tabs-tab_14rmt_ugrxl_230:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_ugrxl_241, .awsui_tabs-tab_14rmt_ugrxl_230:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_ugrxl_241 {
+.awsui_tabs-tab_14rmt_oj2gj_230:not(#\9):last-child > a > .awsui_tabs-tab-label_14rmt_oj2gj_241, .awsui_tabs-tab_14rmt_oj2gj_230:not(#\9):last-child > button > .awsui_tabs-tab-label_14rmt_oj2gj_241 {
   padding-right: calc(var(--space-l-4vl6xu, 20px) - 1px);
 }
-.awsui_tabs-tab-disabled_14rmt_ugrxl_314:not(#\9), .awsui_tabs-tab-disabled_14rmt_ugrxl_314:not(#\9):hover {
+.awsui_tabs-tab-disabled_14rmt_oj2gj_314:not(#\9), .awsui_tabs-tab-disabled_14rmt_oj2gj_314:not(#\9):hover {
+  pointer-events: none;
   cursor: default;
   color: var(--color-text-interactive-disabled-jcikk2, #aab7b8);
   font-weight: var(--font-tabs-disabled-weight-0s5m6k, 400);
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ugrxl_314):after {
+.awsui_tabs-tab-link_14rmt_oj2gj_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_oj2gj_314):after {
   content: "";
   position: absolute;
   left: 0;
@@ -328,36 +329,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   background: var(--color-border-tabs-underline-ba6hzi, #16191f);
   opacity: 0;
 }
-.awsui_tabs-tab-link_14rmt_ugrxl_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ugrxl_314).awsui_refresh_14rmt_ugrxl_331:after {
+.awsui_tabs-tab-link_14rmt_oj2gj_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_oj2gj_314).awsui_refresh_14rmt_oj2gj_332:after {
   transition: opacity var(--motion-duration-refresh-only-medium-5flen2, 165ms) var(--motion-easing-refresh-only-c-ic6jr0, cubic-bezier(0.84, 0, 0.16, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_tabs-tab-link_14rmt_ugrxl_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ugrxl_314).awsui_refresh_14rmt_ugrxl_331:after {
+  .awsui_tabs-tab-link_14rmt_oj2gj_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_oj2gj_314).awsui_refresh_14rmt_oj2gj_332:after {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_ugrxl_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ugrxl_314).awsui_refresh_14rmt_ugrxl_331:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_ugrxl_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ugrxl_314).awsui_refresh_14rmt_ugrxl_331:after {
+.awsui-motion-disabled .awsui_tabs-tab-link_14rmt_oj2gj_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_oj2gj_314).awsui_refresh_14rmt_oj2gj_332:after, .awsui-mode-entering .awsui_tabs-tab-link_14rmt_oj2gj_257:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_oj2gj_314).awsui_refresh_14rmt_oj2gj_332:after {
   animation: none;
   transition: none;
 }
-.awsui_tabs-tab-active_14rmt_ugrxl_345:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ugrxl_314) {
+.awsui_tabs-tab-active_14rmt_oj2gj_346:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_oj2gj_314) {
   color: var(--color-text-accent-s0earc, #0073bb);
 }
-.awsui_tabs-tab-active_14rmt_ugrxl_345:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_ugrxl_314):after {
+.awsui_tabs-tab-active_14rmt_oj2gj_346:not(#\9):not(.awsui_tabs-tab-disabled_14rmt_oj2gj_314):after {
   opacity: 1;
 }
-.awsui_tabs-header-with-divider_14rmt_ugrxl_352:not(#\9) {
+.awsui_tabs-header-with-divider_14rmt_oj2gj_353:not(#\9) {
   border-bottom: var(--border-divider-section-width-5a4cv1, 1px) solid var(--color-border-tabs-divider-lf9ugx, #aab7b8);
 }
-.awsui_root_14rmt_ugrxl_356:not(#\9) {
+.awsui_root_14rmt_oj2gj_357:not(#\9) {
   /* used in test-utils or tests */
 }
-.awsui_tabs_14rmt_ugrxl_186:not(#\9) {
+.awsui_tabs_14rmt_oj2gj_186:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   border-collapse: separate;
   border-spacing: 0;
@@ -396,18 +397,24 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   width: 100%;
 }
-.awsui_tabs-content-wrapper_14rmt_ugrxl_373.awsui_with-paddings_14rmt_ugrxl_373:not(#\9) {
-  padding: var(--space-scaled-m-pv0fmt, 16px) 0;
+.awsui_tabs-content_14rmt_oj2gj_374:not(#\9) {
+  display: none;
 }
-.awsui_tabs-container-content-wrapper_14rmt_ugrxl_377.awsui_with-paddings_14rmt_ugrxl_373:not(#\9) {
-  padding-top: var(--space-tabs-content-top-5xrhx5, 0px);
+.awsui_tabs-content-active_14rmt_oj2gj_378:not(#\9) {
+  display: block;
+}
+.awsui_tabs-content-active_14rmt_oj2gj_378[data-awsui-focus-visible=true]:not(#\9):focus {
+  outline: 2px dotted transparent;
+  outline-offset: 2px;
+  border-radius: var(--border-radius-container-1aveko, 0px);
+  box-shadow: 0 0 0 2px var(--color-border-item-focused-n5kd8g, #0073bb);
 }
-.awsui_tabs-content_14rmt_ugrxl_373:not(#\9) {
-  display: none;
+.awsui_tabs-content-wrapper_14rmt_oj2gj_388.awsui_with-paddings_14rmt_oj2gj_388 > .awsui_tabs-content_14rmt_oj2gj_374:not(#\9) {
+  padding: var(--space-scaled-m-pv0fmt, 16px) 0;
 }
-.awsui_tabs-content-active_14rmt_ugrxl_385:not(#\9) {
-  display: block;
+.awsui_tabs-container-content-wrapper_14rmt_oj2gj_392.awsui_with-paddings_14rmt_oj2gj_388 > .awsui_tabs-content_14rmt_oj2gj_374:not(#\9) {
+  padding: var(--space-tabs-content-top-c5lrql, 16px) var(--space-container-horizontal-tlw03i, 20px) var(--space-scaled-l-t03y3z, 20px);
 }

package/lib/internal/template/tabs/styles.selectors.js CHANGED Viewed

@@ -2,26 +2,26 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "tabs-header": "awsui_tabs-header_14rmt_ugrxl_186",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_ugrxl_192",
-  "pagination-button": "awsui_pagination-button_14rmt_ugrxl_210",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_ugrxl_215",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_ugrxl_218",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_ugrxl_222",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_ugrxl_225",
-  "tabs-tab": "awsui_tabs-tab_14rmt_ugrxl_230",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_ugrxl_241",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_ugrxl_257",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_ugrxl_314",
-  "refresh": "awsui_refresh_14rmt_ugrxl_331",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_ugrxl_345",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_ugrxl_352",
-  "root": "awsui_root_14rmt_ugrxl_356",
-  "tabs": "awsui_tabs_14rmt_ugrxl_186",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_ugrxl_373",
-  "with-paddings": "awsui_with-paddings_14rmt_ugrxl_373",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_ugrxl_377",
-  "tabs-content": "awsui_tabs-content_14rmt_ugrxl_373",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_ugrxl_385"
+  "tabs-header": "awsui_tabs-header_14rmt_oj2gj_186",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_oj2gj_192",
+  "pagination-button": "awsui_pagination-button_14rmt_oj2gj_210",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_oj2gj_215",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_oj2gj_218",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_oj2gj_222",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_oj2gj_225",
+  "tabs-tab": "awsui_tabs-tab_14rmt_oj2gj_230",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_oj2gj_241",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_oj2gj_257",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_oj2gj_314",
+  "refresh": "awsui_refresh_14rmt_oj2gj_332",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_oj2gj_346",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_oj2gj_353",
+  "root": "awsui_root_14rmt_oj2gj_357",
+  "tabs": "awsui_tabs_14rmt_oj2gj_186",
+  "tabs-content": "awsui_tabs-content_14rmt_oj2gj_374",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_oj2gj_378",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_oj2gj_388",
+  "with-paddings": "awsui_with-paddings_14rmt_oj2gj_388",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_oj2gj_392"
 };

package/lib/internal/template/tabs/tab-header-bar.d.ts CHANGED Viewed

@@ -9,4 +9,8 @@ export interface TabHeaderBarProps {
     ariaLabelledby?: string;
 }
 export declare function TabHeaderBar({ onChange, activeTabId, tabs, variant, idNamespace, ariaLabel, ariaLabelledby, }: TabHeaderBarProps): JSX.Element;
+export declare function getTabElementId({ namespace, tabId }: {
+    namespace: string;
+    tabId: string;
+}): string;
 //# sourceMappingURL=tab-header-bar.d.ts.map

package/lib/internal/template/tabs/tab-header-bar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/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;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,GACf,EAAE,iBAAiB,~~eAoRnB~~"}
1	+ {"version":3,"file":"tab-header-bar.d.ts","sourceRoot":"","sources":["../../../src/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;CACzB;AAED,wBAAgB,YAAY,CAAC,EAC3B,QAAQ,EACR,WAAW,EACX,IAAI,EACJ,OAAO,EACP,WAAW,EACX,SAAS,EACT,cAAc,GACf,EAAE,iBAAiB,eAqRnB;AAED,wBAAgB,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,UAEzF"}

package/lib/internal/template/tabs/tab-header-bar.js CHANGED Viewed

@@ -184,7 +184,7 @@ export function TabHeaderBar(_a) {
             _a[styles['tabs-tab-active']] = activeTabId === tab.id && !tab.disabled,
             _a[styles['tabs-tab-disabled']] = tab.disabled,
             _a));
-        var commonProps = __assign(__assign({ className: classes }, focusVisible), { role: 'tab', 'aria-selected': tab.id === activeTabId, 'aria-controls': "".concat(idNamespace, "-").concat(tab.id, "-panel"), 'data-testid': tab.id, children: React.createElement("span", { className: styles['tabs-tab-label'] }, tab.label) });
+        var commonProps = __assign(__assign({ className: classes }, focusVisible), { role: 'tab', 'aria-selected': tab.id === activeTabId, 'aria-controls': "".concat(idNamespace, "-").concat(tab.id, "-panel"), 'data-testid': tab.id, id: getTabElementId({ namespace: idNamespace, tabId: tab.id }), children: React.createElement("span", { className: styles['tabs-tab-label'] }, tab.label) });
         if (tab.disabled) {
             commonProps['aria-disabled'] = 'true';
         }
@@ -216,4 +216,8 @@ export function TabHeaderBar(_a) {
         return (React.createElement("li", { ref: function (element) { return tabRefs.current.set(tab.id, element); }, className: styles['tabs-tab'], role: "presentation", key: tab.id }, trigger));
     }
 }
+export function getTabElementId(_a) {
+    var namespace = _a.namespace, tabId = _a.tabId;
+    return namespace + '-' + tabId;
+}
 //# sourceMappingURL=tab-header-bar.js.map