@cloudscape-design/components-themeable 3.0.744 → 3.0.745

package/lib/internal/template/status-indicator/styles.scoped.css

@@ -142,11 +142,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_icon-shake_1cbgc_t9nfq_145:not(#\9) {
+.awsui_icon-shake_1cbgc_4bzfi_145:not(#\9) {
   display: inline-block;
-  animation: awsui_awsui-motion-shake-horizontally_1cbgc_t9nfq_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms);
+  animation: awsui_awsui-motion-shake-horizontally_1cbgc_4bzfi_1 var(--motion-duration-refresh-only-medium-i6gkfs, 0ms);
 }
-@keyframes awsui_awsui-motion-shake-horizontally_1cbgc_t9nfq_1 {
+@keyframes awsui_awsui-motion-shake-horizontally_1cbgc_4bzfi_1 {
   0% {
     transform: translateX(-5px);
     animation-timing-function: linear;
@@ -160,20 +160,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_icon-shake_1cbgc_t9nfq_145:not(#\9) {
+  .awsui_icon-shake_1cbgc_4bzfi_145:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_icon-shake_1cbgc_t9nfq_145:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_t9nfq_145:not(#\9) {
+.awsui-motion-disabled .awsui_icon-shake_1cbgc_4bzfi_145:not(#\9), .awsui-mode-entering .awsui_icon-shake_1cbgc_4bzfi_145:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_container-fade-in_1cbgc_t9nfq_173:not(#\9) {
-  animation: awsui_awsui-motion-fade-in-0_1cbgc_t9nfq_1 var(--motion-duration-refresh-only-medium-0rwzu1, 165ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
+.awsui_container-fade-in_1cbgc_4bzfi_173:not(#\9) {
+  animation: awsui_awsui-motion-fade-in-0_1cbgc_4bzfi_1 var(--motion-duration-refresh-only-medium-i6gkfs, 0ms) var(--motion-easing-refresh-only-a-liv5su, cubic-bezier(0, 0, 0, 1));
 }
-@keyframes awsui_awsui-motion-fade-in-0_1cbgc_t9nfq_1 {
+@keyframes awsui_awsui-motion-fade-in-0_1cbgc_4bzfi_1 {
   from {
     opacity: 0;
   }
@@ -182,17 +182,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_container-fade-in_1cbgc_t9nfq_173:not(#\9) {
+  .awsui_container-fade-in_1cbgc_4bzfi_173:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_container-fade-in_1cbgc_t9nfq_173:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_t9nfq_173:not(#\9) {
+.awsui-motion-disabled .awsui_container-fade-in_1cbgc_4bzfi_173:not(#\9), .awsui-mode-entering .awsui_container-fade-in_1cbgc_4bzfi_173:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_root_1cbgc_t9nfq_195:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195:not(#\9) {
   font-size: var(--font-size-body-m-pa3mqb, 14px);
   line-height: var(--line-height-body-m-2zx78l, 22px);
   color: var(--color-text-body-default-ffdwgg, #16191f);
@@ -201,64 +201,64 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_status-error_1cbgc_t9nfq_204:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_status-error_1cbgc_4bzfi_204:not(#\9) {
   color: var(--color-text-status-error-ofc4yr, #d13212);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_status-warning_1cbgc_t9nfq_207:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_status-warning_1cbgc_4bzfi_207:not(#\9) {
   color: var(--color-text-status-warning-azn00c, #906806);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_status-success_1cbgc_t9nfq_210:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_status-success_1cbgc_4bzfi_210:not(#\9) {
   color: var(--color-text-status-success-owjbj0, #1d8102);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_status-info_1cbgc_t9nfq_213:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_status-info_1cbgc_4bzfi_213:not(#\9) {
   color: var(--color-text-status-info-aq7yd6, #0073bb);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_status-stopped_1cbgc_t9nfq_216:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_status-stopped_1cbgc_4bzfi_216:not(#\9) {
   color: var(--color-text-status-inactive-kvlxhf, #687078);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_status-pending_1cbgc_t9nfq_219:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_status-pending_1cbgc_4bzfi_219:not(#\9) {
   color: var(--color-text-status-inactive-kvlxhf, #687078);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_status-in-progress_1cbgc_t9nfq_222:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_status-in-progress_1cbgc_4bzfi_222:not(#\9) {
   color: var(--color-text-status-inactive-kvlxhf, #687078);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_status-loading_1cbgc_t9nfq_225:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_status-loading_1cbgc_4bzfi_225:not(#\9) {
   color: var(--color-text-status-inactive-kvlxhf, #687078);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_color-override-red_1cbgc_t9nfq_228:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_color-override-red_1cbgc_4bzfi_228:not(#\9) {
   color: var(--color-text-status-error-ofc4yr, #d13212);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_color-override-grey_1cbgc_t9nfq_231:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_color-override-grey_1cbgc_4bzfi_231:not(#\9) {
   color: var(--color-text-status-inactive-kvlxhf, #687078);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_color-override-blue_1cbgc_t9nfq_234:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_color-override-blue_1cbgc_4bzfi_234:not(#\9) {
   color: var(--color-text-status-info-aq7yd6, #0073bb);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_color-override-green_1cbgc_t9nfq_237:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_color-override-green_1cbgc_4bzfi_237:not(#\9) {
   color: var(--color-text-status-success-owjbj0, #1d8102);
 }
-.awsui_root_1cbgc_t9nfq_195.awsui_color-override-yellow_1cbgc_t9nfq_240:not(#\9) {
+.awsui_root_1cbgc_4bzfi_195.awsui_color-override-yellow_1cbgc_4bzfi_240:not(#\9) {
   color: var(--color-text-status-warning-azn00c, #906806);
 }
 
-.awsui_container_1cbgc_t9nfq_173.awsui_display-inline_1cbgc_t9nfq_244:not(#\9) {
+.awsui_container_1cbgc_4bzfi_173.awsui_display-inline_1cbgc_4bzfi_244:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: inline;
 }
-.awsui_container_1cbgc_t9nfq_173.awsui_display-inline_1cbgc_t9nfq_244 > .awsui_icon_1cbgc_t9nfq_145:not(#\9) {
+.awsui_container_1cbgc_4bzfi_173.awsui_display-inline_1cbgc_4bzfi_244 > .awsui_icon_1cbgc_4bzfi_145:not(#\9) {
   white-space: nowrap;
 }
-.awsui_container_1cbgc_t9nfq_173.awsui_display-inline-block_1cbgc_t9nfq_252:not(#\9) {
+.awsui_container_1cbgc_4bzfi_173.awsui_display-inline-block_1cbgc_4bzfi_252:not(#\9) {
   display: inline-block;
   word-wrap: break-word;
   word-break: break-all;
 }
-.awsui_container_1cbgc_t9nfq_173.awsui_display-inline-block_1cbgc_t9nfq_252 > .awsui_icon_1cbgc_t9nfq_145:not(#\9) {
+.awsui_container_1cbgc_4bzfi_173.awsui_display-inline-block_1cbgc_4bzfi_252 > .awsui_icon_1cbgc_4bzfi_145:not(#\9) {
   padding-inline-end: var(--space-xxs-9rrxti, 4px);
 }
 
-.awsui_overflow-ellipsis_1cbgc_t9nfq_261:not(#\9) {
+.awsui_overflow-ellipsis_1cbgc_4bzfi_261:not(#\9) {
   max-inline-size: 100%;
   overflow: hidden;
   text-overflow: ellipsis;

package/lib/internal/template/status-indicator/styles.selectors.js

@@ -2,28 +2,28 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "icon-shake": "awsui_icon-shake_1cbgc_t9nfq_145",
-  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_t9nfq_1",
-  "container-fade-in": "awsui_container-fade-in_1cbgc_t9nfq_173",
-  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_t9nfq_1",
-  "root": "awsui_root_1cbgc_t9nfq_195",
-  "status-error": "awsui_status-error_1cbgc_t9nfq_204",
-  "status-warning": "awsui_status-warning_1cbgc_t9nfq_207",
-  "status-success": "awsui_status-success_1cbgc_t9nfq_210",
-  "status-info": "awsui_status-info_1cbgc_t9nfq_213",
-  "status-stopped": "awsui_status-stopped_1cbgc_t9nfq_216",
-  "status-pending": "awsui_status-pending_1cbgc_t9nfq_219",
-  "status-in-progress": "awsui_status-in-progress_1cbgc_t9nfq_222",
-  "status-loading": "awsui_status-loading_1cbgc_t9nfq_225",
-  "color-override-red": "awsui_color-override-red_1cbgc_t9nfq_228",
-  "color-override-grey": "awsui_color-override-grey_1cbgc_t9nfq_231",
-  "color-override-blue": "awsui_color-override-blue_1cbgc_t9nfq_234",
-  "color-override-green": "awsui_color-override-green_1cbgc_t9nfq_237",
-  "color-override-yellow": "awsui_color-override-yellow_1cbgc_t9nfq_240",
-  "container": "awsui_container_1cbgc_t9nfq_173",
-  "display-inline": "awsui_display-inline_1cbgc_t9nfq_244",
-  "icon": "awsui_icon_1cbgc_t9nfq_145",
-  "display-inline-block": "awsui_display-inline-block_1cbgc_t9nfq_252",
-  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_t9nfq_261"
+  "icon-shake": "awsui_icon-shake_1cbgc_4bzfi_145",
+  "awsui-motion-shake-horizontally": "awsui_awsui-motion-shake-horizontally_1cbgc_4bzfi_1",
+  "container-fade-in": "awsui_container-fade-in_1cbgc_4bzfi_173",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_1cbgc_4bzfi_1",
+  "root": "awsui_root_1cbgc_4bzfi_195",
+  "status-error": "awsui_status-error_1cbgc_4bzfi_204",
+  "status-warning": "awsui_status-warning_1cbgc_4bzfi_207",
+  "status-success": "awsui_status-success_1cbgc_4bzfi_210",
+  "status-info": "awsui_status-info_1cbgc_4bzfi_213",
+  "status-stopped": "awsui_status-stopped_1cbgc_4bzfi_216",
+  "status-pending": "awsui_status-pending_1cbgc_4bzfi_219",
+  "status-in-progress": "awsui_status-in-progress_1cbgc_4bzfi_222",
+  "status-loading": "awsui_status-loading_1cbgc_4bzfi_225",
+  "color-override-red": "awsui_color-override-red_1cbgc_4bzfi_228",
+  "color-override-grey": "awsui_color-override-grey_1cbgc_4bzfi_231",
+  "color-override-blue": "awsui_color-override-blue_1cbgc_4bzfi_234",
+  "color-override-green": "awsui_color-override-green_1cbgc_4bzfi_237",
+  "color-override-yellow": "awsui_color-override-yellow_1cbgc_4bzfi_240",
+  "container": "awsui_container_1cbgc_4bzfi_173",
+  "display-inline": "awsui_display-inline_1cbgc_4bzfi_244",
+  "icon": "awsui_icon_1cbgc_4bzfi_145",
+  "display-inline-block": "awsui_display-inline-block_1cbgc_4bzfi_252",
+  "overflow-ellipsis": "awsui_overflow-ellipsis_1cbgc_4bzfi_261"
 };
   

package/lib/internal/template/tabs/analytics-metadata/interfaces.d.ts

@@ -0,0 +1,33 @@
+export interface GeneratedAnalyticsMetadataTabsSelect {
+    action: 'select';
+    detail: {
+        label: string;
+        id: string;
+        position: string;
+        originTabId: string;
+    };
+}
+export interface GeneratedAnalyticsMetadataTabsDismiss {
+    action: 'dismiss';
+    detail: {
+        label: string;
+        id: string;
+        position: string;
+    };
+}
+export interface GeneratedAnalyticsMetadataTabsComponent {
+    name: 'awsui.Tabs';
+    label: string;
+    properties?: {
+        activeTabId: string;
+        activeTabLabel: string;
+        activeTabPosition: string;
+        tabsCount: string;
+    };
+    innerContext?: {
+        tabId: string;
+        tabLabel: string;
+        tabPosition: string;
+    };
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/lib/internal/template/tabs/analytics-metadata/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/tabs/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,oCAAoC;IACnD,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;CACH;AAED,MAAM,WAAW,qCAAqC;IACpD,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,EAAE,EAAE,MAAM,CAAC;QACX,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH;AAED,MAAM,WAAW,uCAAuC;IACtD,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE;QACX,WAAW,EAAE,MAAM,CAAC;QACpB,cAAc,EAAE,MAAM,CAAC;QACvB,iBAAiB,EAAE,MAAM,CAAC;QAC1B,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;IACF,YAAY,CAAC,EAAE;QACb,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;CACH"}

package/lib/internal/template/tabs/analytics-metadata/interfaces.js

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/lib/internal/template/tabs/analytics-metadata/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/tabs/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface GeneratedAnalyticsMetadataTabsSelect {\n  action: 'select';\n  detail: {\n    label: string;\n    id: string;\n    position: string;\n    originTabId: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataTabsDismiss {\n  action: 'dismiss';\n  detail: {\n    label: string;\n    id: string;\n    position: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataTabsComponent {\n  name: 'awsui.Tabs';\n  label: string;\n  properties?: {\n    activeTabId: string;\n    activeTabLabel: string;\n    activeTabPosition: string;\n    tabsCount: string;\n  };\n  innerContext?: {\n    tabId: string;\n    tabLabel: string;\n    tabPosition: string;\n  };\n}\n"]}

package/lib/internal/template/tabs/analytics-metadata/styles.css.js

@@ -0,0 +1,9 @@
+
+    import './styles.scoped.css';
+    export default {
+  "tabs-header-list": "awsui_tabs-header-list_1acwa_dp0cl_5",
+  "active-tab-header": "awsui_active-tab-header_1acwa_dp0cl_6",
+  "tab-label": "awsui_tab-label_1acwa_dp0cl_7",
+  "tab-dismiss-button": "awsui_tab-dismiss-button_1acwa_dp0cl_8"
+};
+  

package/lib/internal/template/tabs/analytics-metadata/styles.scoped.css

@@ -0,0 +1,10 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_tabs-header-list_1acwa_dp0cl_5:not(#\9),
+.awsui_active-tab-header_1acwa_dp0cl_6:not(#\9),
+.awsui_tab-label_1acwa_dp0cl_7:not(#\9),
+.awsui_tab-dismiss-button_1acwa_dp0cl_8:not(#\9) {
+  /* used in analytics metadata */
+}

package/lib/internal/template/tabs/analytics-metadata/styles.selectors.js

@@ -0,0 +1,10 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "tabs-header-list": "awsui_tabs-header-list_1acwa_dp0cl_5",
+  "active-tab-header": "awsui_active-tab-header_1acwa_dp0cl_6",
+  "tab-label": "awsui_tab-label_1acwa_dp0cl_7",
+  "tab-dismiss-button": "awsui_tab-dismiss-button_1acwa_dp0cl_8"
+};
+  

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAKzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAUrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eAmGX"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/tabs/index.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,OAAO,EAAE,SAAS,EAAE,CAAC;AAUrB,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,EAC3B,IAAI,EACJ,OAAmB,EACnB,QAAQ,EACR,WAAW,EAAE,eAAe,EAC5B,SAAS,EACT,cAAc,EACd,sBAA8B,EAC9B,WAAW,EACX,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,eAmHX"}

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

@@ -3,6 +3,7 @@ import { __rest } from "tslib";
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalContainer from '../container/internal';
 import { getBaseProps } from '../internal/base-component';
 import { fireNonCancelableEvent } from '../internal/events';
@@ -12,6 +13,7 @@ import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { checkSafeUrl } from '../internal/utils/check-safe-url';
 import { getTabElementId, TabHeaderBar } from './tab-header-bar';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 function firstEnabledTab(tabs) {
     const enabledTabs = tabs.filter(tab => !tab.disabled);
@@ -36,6 +38,18 @@ export default function Tabs(_a) {
         changeHandler: 'onChange',
     });
     const baseProps = getBaseProps(rest);
+    const analyticsComponentMetadata = {
+        name: 'awsui.Tabs',
+        label: `.${analyticsSelectors['tabs-header-list']}`,
+    };
+    if (activeTabId) {
+        analyticsComponentMetadata.properties = {
+            activeTabId,
+            activeTabLabel: `.${analyticsSelectors['active-tab-header']} .${analyticsSelectors['tab-label']}`,
+            activeTabPosition: `${tabs.findIndex(tab => tab.id === activeTabId) + 1}`,
+            tabsCount: `${tabs.length}`,
+        };
+    }
     const content = () => {
         const selectedTab = tabs.filter(tab => tab.id === activeTabId)[0];
         const renderContent = (tab) => {
@@ -66,9 +80,9 @@ export default function Tabs(_a) {
             fireNonCancelableEvent(onChange, changeDetail);
         }, i18nStrings: i18nStrings }));
     if (variant === 'container' || variant === 'stacked') {
-        return (React.createElement(InternalContainer, Object.assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default', fitHeight: fitHeight }), content()));
+        return (React.createElement(InternalContainer, Object.assign({ header: header, disableHeaderPaddings: true }, baseProps, { className: clsx(baseProps.className, styles.root), __internalRootRef: __internalRootRef, disableContentPaddings: true, variant: variant === 'stacked' ? 'stacked' : 'default', fitHeight: fitHeight }, getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })), content()));
     }
-    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight }), ref: __internalRootRef }),
+    return (React.createElement("div", Object.assign({}, baseProps, { className: clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight }), ref: __internalRootRef }, getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })),
         header,
         content()));
 }

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

@@ -1 +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 from 'react';\nimport clsx from 'clsx';\n\nimport InternalContainer from '../container/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { TabsProps } from './interfaces';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\n\nimport styles from './styles.css.js';\n\nexport { TabsProps };\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  i18nStrings,\n  fitHeight,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs', {\n    props: { disableContentPaddings, variant },\n  });\n  const idNamespace = useUniqueId('awsui-tabs-');\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 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        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' || variant === 'stacked'\n            ? styles['tabs-container-content-wrapper']\n            : 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      i18nStrings={i18nStrings}\n    />\n  );\n\n  if (variant === 'container' || variant === 'stacked') {\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        variant={variant === 'stacked' ? 'stacked' : 'default'}\n        fitHeight={fitHeight}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n      ref={__internalRootRef}\n    >\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}
+{"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 from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalContainer from '../container/internal';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useUniqueId } from '../internal/hooks/use-unique-id';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { checkSafeUrl } from '../internal/utils/check-safe-url';\nimport { GeneratedAnalyticsMetadataTabsComponent } from './analytics-metadata/interfaces';\nimport { TabsProps } from './interfaces';\nimport { getTabElementId, TabHeaderBar } from './tab-header-bar';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { TabsProps };\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  i18nStrings,\n  fitHeight,\n  ...rest\n}: TabsProps) {\n  for (const tab of tabs) {\n    checkSafeUrl('Tabs', tab.href);\n  }\n  const { __internalRootRef } = useBaseComponent('Tabs', {\n    props: { disableContentPaddings, variant },\n  });\n  const idNamespace = useUniqueId('awsui-tabs-');\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 analyticsComponentMetadata: GeneratedAnalyticsMetadataTabsComponent = {\n    name: 'awsui.Tabs',\n    label: `.${analyticsSelectors['tabs-header-list']}`,\n  };\n\n  if (activeTabId) {\n    analyticsComponentMetadata.properties = {\n      activeTabId,\n      activeTabLabel: `.${analyticsSelectors['active-tab-header']} .${analyticsSelectors['tab-label']}`,\n      activeTabPosition: `${tabs.findIndex(tab => tab.id === activeTabId) + 1}`,\n      tabsCount: `${tabs.length}`,\n    };\n  }\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        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' || variant === 'stacked'\n            ? styles['tabs-container-content-wrapper']\n            : 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      i18nStrings={i18nStrings}\n    />\n  );\n\n  if (variant === 'container' || variant === 'stacked') {\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        variant={variant === 'stacked' ? 'stacked' : 'default'}\n        fitHeight={fitHeight}\n        {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n      >\n        {content()}\n      </InternalContainer>\n    );\n  }\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(baseProps.className, styles.root, styles.tabs, { [styles['fit-height']]: fitHeight })}\n      ref={__internalRootRef}\n      {...getAnalyticsMetadataAttribute({ component: analyticsComponentMetadata })}\n    >\n      {header}\n      {content()}\n    </div>\n  );\n}\n\napplyDisplayName(Tabs, 'Tabs');\n"]}

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

@@ -1,33 +1,33 @@
 
     import './styles.scoped.css';
     export default {
-  "tabs-header": "awsui_tabs-header_14rmt_bz7zp_282",
-  "tabs-header-list": "awsui_tabs-header-list_14rmt_bz7zp_290",
-  "pagination-button": "awsui_pagination-button_14rmt_bz7zp_307",
-  "pagination-button-left": "awsui_pagination-button-left_14rmt_bz7zp_314",
-  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_bz7zp_317",
-  "pagination-button-right": "awsui_pagination-button-right_14rmt_bz7zp_321",
-  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_bz7zp_324",
-  "tabs-tab": "awsui_tabs-tab_14rmt_bz7zp_329",
-  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_bz7zp_338",
-  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_bz7zp_349",
-  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_bz7zp_360",
-  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_bz7zp_360",
-  "refresh": "awsui_refresh_14rmt_bz7zp_364",
-  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_bz7zp_368",
-  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_bz7zp_410",
-  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_bz7zp_486",
-  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_bz7zp_493",
-  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_bz7zp_497",
-  "root": "awsui_root_14rmt_bz7zp_501",
-  "tabs": "awsui_tabs_14rmt_bz7zp_282",
-  "tabs-content": "awsui_tabs-content_14rmt_bz7zp_542",
-  "fit-height": "awsui_fit-height_14rmt_bz7zp_546",
-  "tabs-content-active": "awsui_tabs-content-active_14rmt_bz7zp_552",
-  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_bz7zp_566",
-  "with-paddings": "awsui_with-paddings_14rmt_bz7zp_566",
-  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_bz7zp_577",
-  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_bz7zp_588",
-  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_bz7zp_592"
+  "tabs-header": "awsui_tabs-header_14rmt_1kh13_282",
+  "tabs-header-list": "awsui_tabs-header-list_14rmt_1kh13_290",
+  "pagination-button": "awsui_pagination-button_14rmt_1kh13_307",
+  "pagination-button-left": "awsui_pagination-button-left_14rmt_1kh13_314",
+  "pagination-button-left-scrollable": "awsui_pagination-button-left-scrollable_14rmt_1kh13_317",
+  "pagination-button-right": "awsui_pagination-button-right_14rmt_1kh13_321",
+  "pagination-button-right-scrollable": "awsui_pagination-button-right-scrollable_14rmt_1kh13_324",
+  "tabs-tab": "awsui_tabs-tab_14rmt_1kh13_329",
+  "tabs-tab-label": "awsui_tabs-tab-label_14rmt_1kh13_338",
+  "tabs-tab-header-container": "awsui_tabs-tab-header-container_14rmt_1kh13_349",
+  "tabs-tab-dismiss": "awsui_tabs-tab-dismiss_14rmt_1kh13_360",
+  "tabs-tab-action": "awsui_tabs-tab-action_14rmt_1kh13_360",
+  "refresh": "awsui_refresh_14rmt_1kh13_364",
+  "tabs-tab-disabled": "awsui_tabs-tab-disabled_14rmt_1kh13_368",
+  "tabs-tab-link": "awsui_tabs-tab-link_14rmt_1kh13_410",
+  "tabs-tab-active": "awsui_tabs-tab-active_14rmt_1kh13_486",
+  "tabs-header-with-divider": "awsui_tabs-header-with-divider_14rmt_1kh13_493",
+  "tabs-tab-focusable": "awsui_tabs-tab-focusable_14rmt_1kh13_497",
+  "root": "awsui_root_14rmt_1kh13_501",
+  "tabs": "awsui_tabs_14rmt_1kh13_282",
+  "tabs-content": "awsui_tabs-content_14rmt_1kh13_542",
+  "fit-height": "awsui_fit-height_14rmt_1kh13_546",
+  "tabs-content-active": "awsui_tabs-content-active_14rmt_1kh13_552",
+  "tabs-content-wrapper": "awsui_tabs-content-wrapper_14rmt_1kh13_566",
+  "with-paddings": "awsui_with-paddings_14rmt_1kh13_566",
+  "tabs-container-content-wrapper": "awsui_tabs-container-content-wrapper_14rmt_1kh13_577",
+  "disabled-reason-tooltip": "awsui_disabled-reason-tooltip_14rmt_1kh13_588",
+  "tabs-tab-focused": "awsui_tabs-tab-focused_14rmt_1kh13_592"
 };