@cloudscape-design/components-themeable 3.0.708 → 3.0.710

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js

@@ -1,11 +1,11 @@
 
     import './styles.scoped.css';
     export default {
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_fhewl_97",
-  "trigger": "awsui_trigger_lpshu_fhewl_97",
-  "selected": "awsui_selected_lpshu_fhewl_192",
-  "badge": "awsui_badge_lpshu_fhewl_220",
-  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_fhewl_224",
-  "dot": "awsui_dot_lpshu_fhewl_232"
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_lmq7o_97",
+  "trigger": "awsui_trigger_lpshu_lmq7o_97",
+  "selected": "awsui_selected_lpshu_lmq7o_186",
+  "badge": "awsui_badge_lpshu_lmq7o_206",
+  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_lmq7o_210",
+  "dot": "awsui_dot_lpshu_lmq7o_218"
 };
   

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scoped.css

@@ -94,17 +94,15 @@ 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_trigger-badge-wrapper_lpshu_fhewl_97:not(#\9) {
+.awsui_trigger-badge-wrapper_lpshu_lmq7o_97:not(#\9) {
   background: transparent;
   color: var(--color-text-interactive-default-dt26aj, #545b64);
-  border-block: var(--border-field-width-yoy972, 1px) solid transparent;
-  border-inline: var(--border-field-width-yoy972, 1px) solid transparent;
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
   border-end-start-radius: 50%;
   border-end-end-radius: 50%;
-  block-size: var(--space-layout-toggle-diameter-ugv12v, 36px);
-  inline-size: var(--space-layout-toggle-diameter-ugv12v, 36px);
+  block-size: 34px;
+  inline-size: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -115,21 +113,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   display: flex;
   justify-content: center;
   align-items: center;
-  clip-path: path("M34.2193 10.1845C33.3961 10.579 32.4739 10.8 31.5 10.8C28.0206 10.8 25.2 7.97939 25.2 4.5C25.2 3.52614 25.421 2.6039 25.8155 1.78066C23.4518 0.639587 20.8006 0 18 0C8.05887 0 0 8.05887 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36 27.9411 36 18C36 15.1994 35.3604 12.5482 34.2193 10.1845Z");
+  clip-path: path("M32.185 9.34876C31.1913 10.1916 29.905 10.7 28.4999 10.7C25.3519 10.7 22.7999 8.14803 22.7999 5C22.7999 3.68192 23.2473 2.46833 23.9985 1.50281C21.8642 0.537421 19.4948 0 17 0C7.61116 0 0 7.61116 0 17C0 26.3888 7.61116 34 17 34C26.3888 34 34 26.3888 34 17C34 14.2479 33.346 11.6485 32.185 9.34876Z");
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_trigger-badge-wrapper_lpshu_fhewl_97:not(#\9):hover {
+.awsui_trigger-badge-wrapper_lpshu_lmq7o_97:not(#\9):hover {
   background: var(--color-background-input-disabled-zfoobi, #eaeded);
   color: var(--color-text-interactive-hover-7who0l, #16191f);
-  border-color: var(--color-background-input-disabled-zfoobi, #eaeded);
 }
-.awsui_trigger-badge-wrapper_lpshu_fhewl_97:not(#\9):active {
+.awsui_trigger-badge-wrapper_lpshu_lmq7o_97:not(#\9):active {
   background: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
   color: var(--color-text-interactive-hover-7who0l, #16191f);
-  border-color: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
 }
-.awsui_trigger-badge-wrapper_lpshu_fhewl_97:not(#\9):dir(rtl) {
-  clip-path: path("M1.78066 10.1845C2.6039 10.579 3.52615 10.8 4.5 10.8C7.97939 10.8 10.8 7.97939 10.8 4.5C10.8 3.52614 10.579 2.6039 10.1845 1.78066C12.5482 0.639587 15.1994 0 18 0C27.9411 0 36 8.05887 36 18C36 27.9411 27.9411 36 18 36C8.05887 36 0 27.9411 0 18C0 15.1994 0.639587 12.5482 1.78066 10.1845Z");
+.awsui_trigger-badge-wrapper_lpshu_lmq7o_97:not(#\9):dir(rtl) {
+  clip-path: path("M1.81502 9.34876C2.80869 10.1916 4.09501 10.7 5.50007 10.7C8.6481 10.7 11.2001 8.14803 11.2001 5C11.2001 3.68192 10.7527 2.46833 10.0015 1.50281C12.1358 0.537421 14.5052 0 17 0C26.3888 0 34 7.61116 34 17C34 26.3888 26.3888 34 17 34C7.61116 34 0 26.3888 0 17C0 14.2479 0.653984 11.6485 1.81502 9.34876Z");
 }
 
 /*
@@ -137,42 +133,40 @@ Warning! If these design tokens for width change it will adversely impact
 the calculation used to determine the Split Panel maximum width in the 
 handleSplitPanelMaxWidth function in the context.
 */
-.awsui_trigger_lpshu_fhewl_97:not(#\9) {
+.awsui_trigger_lpshu_lmq7o_97:not(#\9) {
   background: transparent;
   color: var(--color-text-interactive-default-dt26aj, #545b64);
-  border-block: var(--border-field-width-yoy972, 1px) solid transparent;
-  border-inline: var(--border-field-width-yoy972, 1px) solid transparent;
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
   border-end-start-radius: 50%;
   border-end-end-radius: 50%;
-  block-size: var(--space-layout-toggle-diameter-ugv12v, 36px);
-  inline-size: var(--space-layout-toggle-diameter-ugv12v, 36px);
+  block-size: 34px;
+  inline-size: 34px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
+  border-block: none;
+  border-inline: none;
   cursor: pointer;
   pointer-events: auto;
 }
-.awsui_trigger_lpshu_fhewl_97:not(#\9):hover {
+.awsui_trigger_lpshu_lmq7o_97:not(#\9):hover {
   background: var(--color-background-input-disabled-zfoobi, #eaeded);
   color: var(--color-text-interactive-hover-7who0l, #16191f);
-  border-color: var(--color-background-input-disabled-zfoobi, #eaeded);
 }
-.awsui_trigger_lpshu_fhewl_97:not(#\9):active {
+.awsui_trigger_lpshu_lmq7o_97:not(#\9):active {
   background: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
   color: var(--color-text-interactive-hover-7who0l, #16191f);
-  border-color: var(--color-background-control-disabled-dsn0t2, #d5dbdb);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_fhewl_97:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_lmq7o_97:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_fhewl_97:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_lmq7o_97:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(3px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_fhewl_97:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_lmq7o_97:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -186,42 +180,34 @@ body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_fhewl_97:not(#\9):focus
   border-end-end-radius: var(--border-radius-control-default-focus-ring-a78bgq, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-v8nq2m, #0073bb);
 }
-.awsui_trigger_lpshu_fhewl_97:not(#\9):focus {
+.awsui_trigger_lpshu_lmq7o_97:not(#\9):focus {
   outline: none;
 }
-.awsui_trigger_lpshu_fhewl_97.awsui_selected_lpshu_fhewl_192:not(#\9) {
+.awsui_trigger_lpshu_lmq7o_97.awsui_selected_lpshu_lmq7o_186:not(#\9) {
   background: var(--color-background-layout-toggle-selected-default-rmibh3, #0073bb);
   color: var(--color-text-layout-toggle-selected-55i412, #ffffff);
-  border-block: var(--border-field-width-yoy972, 1px) solid var(--color-background-layout-toggle-selected-default-rmibh3, #0073bb);
-  border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-background-layout-toggle-selected-default-rmibh3, #0073bb);
 }
-.awsui_trigger_lpshu_fhewl_97.awsui_selected_lpshu_fhewl_192:not(#\9):hover {
+.awsui_trigger_lpshu_lmq7o_97.awsui_selected_lpshu_lmq7o_186:not(#\9):hover {
   background: var(--color-background-layout-toggle-selected-hover-3l4zzu, #0a4a74);
-  border-color: var(--color-background-layout-toggle-selected-hover-3l4zzu, #0a4a74);
 }
-.awsui_trigger_lpshu_fhewl_97.awsui_selected_lpshu_fhewl_192:not(#\9):active {
+.awsui_trigger_lpshu_lmq7o_97.awsui_selected_lpshu_lmq7o_186:not(#\9):active {
   background: var(--color-background-layout-toggle-selected-active-gdlg1f, #0073bb);
-  border-color: var(--color-background-layout-toggle-selected-active-gdlg1f, #0073bb);
 }
-.awsui_trigger_lpshu_fhewl_97.awsui_selected_lpshu_fhewl_192 > .awsui_trigger-badge-wrapper_lpshu_fhewl_97:not(#\9) {
+.awsui_trigger_lpshu_lmq7o_97.awsui_selected_lpshu_lmq7o_186 > .awsui_trigger-badge-wrapper_lpshu_lmq7o_97:not(#\9) {
   background: var(--color-background-layout-toggle-selected-default-rmibh3, #0073bb);
   color: var(--color-text-layout-toggle-selected-55i412, #ffffff);
-  border-block: var(--border-field-width-yoy972, 1px) solid var(--color-background-layout-toggle-selected-default-rmibh3, #0073bb);
-  border-inline: var(--border-field-width-yoy972, 1px) solid var(--color-background-layout-toggle-selected-default-rmibh3, #0073bb);
 }
-.awsui_trigger_lpshu_fhewl_97.awsui_selected_lpshu_fhewl_192 > .awsui_trigger-badge-wrapper_lpshu_fhewl_97:not(#\9):hover {
+.awsui_trigger_lpshu_lmq7o_97.awsui_selected_lpshu_lmq7o_186 > .awsui_trigger-badge-wrapper_lpshu_lmq7o_97:not(#\9):hover {
   background: var(--color-background-layout-toggle-selected-hover-3l4zzu, #0a4a74);
-  border-color: var(--color-background-layout-toggle-selected-hover-3l4zzu, #0a4a74);
 }
-.awsui_trigger_lpshu_fhewl_97.awsui_selected_lpshu_fhewl_192 > .awsui_trigger-badge-wrapper_lpshu_fhewl_97:not(#\9):active {
+.awsui_trigger_lpshu_lmq7o_97.awsui_selected_lpshu_lmq7o_186 > .awsui_trigger-badge-wrapper_lpshu_lmq7o_97:not(#\9):active {
   background: var(--color-background-layout-toggle-selected-active-gdlg1f, #0073bb);
-  border-color: var(--color-background-layout-toggle-selected-active-gdlg1f, #0073bb);
 }
-.awsui_trigger_lpshu_fhewl_97.awsui_badge_lpshu_fhewl_220:not(#\9), .awsui_trigger_lpshu_fhewl_97.awsui_badge_lpshu_fhewl_220:not(#\9):hover, .awsui_trigger_lpshu_fhewl_97.awsui_badge_lpshu_fhewl_220:not(#\9):active {
+.awsui_trigger_lpshu_lmq7o_97.awsui_badge_lpshu_lmq7o_206:not(#\9), .awsui_trigger_lpshu_lmq7o_97.awsui_badge_lpshu_lmq7o_206:not(#\9):hover, .awsui_trigger_lpshu_lmq7o_97.awsui_badge_lpshu_lmq7o_206:not(#\9):active {
   background: transparent;
 }
 
-.awsui_trigger-wrapper_lpshu_fhewl_224:not(#\9) {
+.awsui_trigger-wrapper_lpshu_lmq7o_210:not(#\9) {
   position: relative;
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
@@ -229,10 +215,10 @@ body[data-awsui-focus-visible=true] .awsui_trigger_lpshu_fhewl_97:not(#\9):focus
   border-end-end-radius: 50%;
 }
 
-.awsui_dot_lpshu_fhewl_232:not(#\9) {
+.awsui_dot_lpshu_lmq7o_218:not(#\9) {
   position: absolute;
-  inline-size: 9px;
-  block-size: 9px;
+  inline-size: 8px;
+  block-size: 8px;
   border-start-start-radius: 8px;
   border-start-end-radius: 8px;
   border-end-start-radius: 8px;

package/lib/internal/template/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js

@@ -2,11 +2,11 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_fhewl_97",
-  "trigger": "awsui_trigger_lpshu_fhewl_97",
-  "selected": "awsui_selected_lpshu_fhewl_192",
-  "badge": "awsui_badge_lpshu_fhewl_220",
-  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_fhewl_224",
-  "dot": "awsui_dot_lpshu_fhewl_232"
+  "trigger-badge-wrapper": "awsui_trigger-badge-wrapper_lpshu_lmq7o_97",
+  "trigger": "awsui_trigger_lpshu_lmq7o_97",
+  "selected": "awsui_selected_lpshu_lmq7o_186",
+  "badge": "awsui_badge_lpshu_lmq7o_206",
+  "trigger-wrapper": "awsui_trigger-wrapper_lpshu_lmq7o_210",
+  "dot": "awsui_dot_lpshu_lmq7o_218"
 };
   

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

@@ -0,0 +1,26 @@
+export interface GeneratedAnalyticsMetadataButtonDropdownClick {
+    action: 'click';
+    detail: {
+        label: string;
+        position?: string;
+        id?: string;
+    };
+}
+export interface GeneratedAnalyticsMetadataButtonDropdownExpand {
+    action: 'expand';
+    detail: {
+        label: string;
+        expanded: string;
+        position?: string;
+        id?: string;
+    };
+}
+export interface GeneratedAnalyticsMetadataButtonDropdownComponent {
+    name: 'awsui.ButtonDropdown';
+    label: string;
+    properties: {
+        variant: string;
+        disabled: string;
+    };
+}
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,6CAA6C;IAC5D,MAAM,EAAE,OAAO,CAAC;IAChB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;CACH;AAED,MAAM,WAAW,8CAA8C;IAC7D,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,EAAE,CAAC,EAAE,MAAM,CAAC;KACb,CAAC;CACH;AAED,MAAM,WAAW,iDAAiD;IAChE,IAAI,EAAE,sBAAsB,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE;QACV,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;KAClB,CAAC;CACH"}

package/lib/internal/template/button-dropdown/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/button-dropdown/analytics-metadata/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/button-dropdown/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 GeneratedAnalyticsMetadataButtonDropdownClick {\n  action: 'click';\n  detail: {\n    label: string;\n    position?: string;\n    id?: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataButtonDropdownExpand {\n  action: 'expand';\n  detail: {\n    label: string;\n    expanded: string;\n    position?: string;\n    id?: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataButtonDropdownComponent {\n  name: 'awsui.ButtonDropdown';\n  label: string;\n  properties: {\n    variant: string;\n    disabled: string;\n  };\n}\n"]}

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

@@ -0,0 +1,8 @@
+
+    import './styles.scoped.css';
+    export default {
+  "trigger-label": "awsui_trigger-label_q2oen_w271r_5",
+  "menu-item": "awsui_menu-item_q2oen_w271r_6",
+  "main-action-label": "awsui_main-action-label_q2oen_w271r_7"
+};
+  

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

@@ -0,0 +1,9 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_trigger-label_q2oen_w271r_5:not(#\9),
+.awsui_menu-item_q2oen_w271r_6:not(#\9),
+.awsui_main-action-label_q2oen_w271r_7:not(#\9) {
+  /* used in analytics metadata */
+}

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

@@ -0,0 +1,9 @@
+
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "trigger-label": "awsui_trigger-label_q2oen_w271r_5",
+  "menu-item": "awsui_menu-item_q2oen_w271r_6",
+  "main-action-label": "awsui_main-action-label_q2oen_w271r_7"
+};
+  

package/lib/internal/template/button-dropdown/category-elements/category-element.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CategoryProps } from '../interfaces';
-declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
+declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, }: CategoryProps) => JSX.Element;
 export default CategoryElement;
 //# sourceMappingURL=category-element.d.ts.map

package/lib/internal/template/button-dropdown/category-elements/category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,eAAe,2JAYlB,aAAa,gBAkCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,eAAe,qKAalB,aAAa,gBAmCf,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/internal/template/button-dropdown/category-elements/category-element.js

@@ -4,12 +4,12 @@ import React from 'react';
 import clsx from 'clsx';
 import ItemsList from '../items-list';
 import styles from './styles.css.js';
-const CategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, }) => {
+const CategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, }) => {
     // Hide the category title element from screen readers because it will be
     // provided as an ARIA label.
     return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled), role: "presentation", "aria-disabled": disabled ? 'true' : undefined },
         item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" }, item.text)),
-        React.createElement("ul", { className: styles['items-list-container'], role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, lastInDropdown: lastInDropdown, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant })))));
+        React.createElement("ul", { className: styles['items-list-container'], role: "group", "aria-label": item.text }, item.items && (React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, lastInDropdown: lastInDropdown, highlightItem: highlightItem, categoryDisabled: disabled, hasCategoryHeader: !!item.text, variant: variant, position: position })))));
 };
 export default CategoryElement;
 //# sourceMappingURL=category-element.js.map

package/lib/internal/template/button-dropdown/category-elements/category-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,QAAQ,EACR,OAAO,GACO,EAAE,EAAE;IAClB,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IAC9E,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,GAChB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","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 { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\n\nimport styles from './styles.css.js';\n\nconst CategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  variant,\n}: CategoryProps) => {\n  // Hide the category title element from screen readers because it will be\n  // provided as an ARIA label.\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n      role=\"presentation\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      {item.text && (\n        <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n          {item.text}\n        </p>\n      )}\n      <ul className={styles['items-list-container']} role=\"group\" aria-label={item.text}>\n        {item.items && (\n          <ItemsList\n            items={item.items}\n            onItemActivate={onItemActivate}\n            onGroupToggle={onGroupToggle}\n            targetItem={targetItem}\n            isHighlighted={isHighlighted}\n            isKeyboardHighlight={isKeyboardHighlight}\n            isExpanded={isExpanded}\n            lastInDropdown={lastInDropdown}\n            highlightItem={highlightItem}\n            categoryDisabled={disabled}\n            hasCategoryHeader={!!item.text}\n            variant={variant}\n          />\n        )}\n      </ul>\n    </li>\n  );\n};\n\nexport default CategoryElement;\n"]}
+{"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,SAAS,MAAM,eAAe,CAAC;AAEtC,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,QAAQ,EACR,OAAO,EACP,QAAQ,GACM,EAAE,EAAE;IAClB,yEAAyE;IACzE,6BAA6B;IAC7B,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,QAAQ,IAAI,MAAM,CAAC,QAAQ,CAAC,EAC3F,IAAI,EAAC,cAAc,mBACJ,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAE3C,IAAI,CAAC,IAAI,IAAI,CACZ,2BAAG,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,CAAC,iBAAc,MAAM,IACnF,IAAI,CAAC,IAAI,CACR,CACL;QACD,4BAAI,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,IAC9E,IAAI,CAAC,KAAK,IAAI,CACb,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,QAAQ,EAC1B,iBAAiB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,EAC9B,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CACH,CACE,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC","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 { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\n\nimport styles from './styles.css.js';\n\nconst CategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  variant,\n  position,\n}: CategoryProps) => {\n  // Hide the category title element from screen readers because it will be\n  // provided as an ARIA label.\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled)}\n      role=\"presentation\"\n      aria-disabled={disabled ? 'true' : undefined}\n    >\n      {item.text && (\n        <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n          {item.text}\n        </p>\n      )}\n      <ul className={styles['items-list-container']} role=\"group\" aria-label={item.text}>\n        {item.items && (\n          <ItemsList\n            items={item.items}\n            onItemActivate={onItemActivate}\n            onGroupToggle={onGroupToggle}\n            targetItem={targetItem}\n            isHighlighted={isHighlighted}\n            isKeyboardHighlight={isKeyboardHighlight}\n            isExpanded={isExpanded}\n            lastInDropdown={lastInDropdown}\n            highlightItem={highlightItem}\n            categoryDisabled={disabled}\n            hasCategoryHeader={!!item.text}\n            variant={variant}\n            position={position}\n          />\n        )}\n      </ul>\n    </li>\n  );\n};\n\nexport default CategoryElement;\n"]}

package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CategoryProps } from '../interfaces';
-declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, expandToViewport, variant, }: CategoryProps) => JSX.Element;
+declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, expandToViewport, variant, position, }: CategoryProps) => JSX.Element;
 export default ExpandableCategoryElement;
 //# sourceMappingURL=expandable-category-element.d.ts.map

package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":";AAQA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,QAAA,MAAM,yBAAyB,6KAa5B,aAAa,gBA+Gf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}
+{"version":3,"file":"expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":";AAWA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAO9C,QAAA,MAAM,yBAAyB,uLAc5B,aAAa,gBA6Hf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useRef } from 'react';
 import clsx from 'clsx';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalIcon from '../../icon/internal';
 import Dropdown from '../../internal/components/dropdown';
 import useHiddenDescription from '../../internal/hooks/use-hidden-description';
@@ -9,7 +10,7 @@ import ItemsList from '../items-list';
 import Tooltip from '../tooltip.js';
 import { getMenuItemProps } from '../utils/menu-item';
 import styles from './styles.css.js';
-const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, expandToViewport, variant, }) => {
+const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, expandToViewport, variant, position, }) => {
     const highlighted = isHighlighted(item);
     const expanded = isExpanded(item);
     const isKeyboardHighlighted = isKeyboardHighlight(item);
@@ -41,7 +42,17 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
         // We are using the roving tabindex technique to manage the focus state of the dropdown.
         // The current element will always have tabindex=0 which means that it can be tabbed to,
         // while all other items have tabindex=-1 so we can focus them when necessary.
-        tabIndex: highlighted ? 0 : -1, ref: triggerRef }, getMenuItemProps({ parent: true, expanded, disabled }), (isDisabledWithReason ? targetProps : {})),
+        tabIndex: highlighted ? 0 : -1, ref: triggerRef }, getMenuItemProps({ parent: true, expanded, disabled }), (isDisabledWithReason ? targetProps : {}), getAnalyticsMetadataAttribute(disabled
+        ? {}
+        : {
+            action: 'expand',
+            detail: {
+                position: position || '0',
+                label: '',
+                id: item.id || '',
+                expanded: `${!expanded}`,
+            },
+        })),
         item.text,
         React.createElement("span", { className: clsx(styles['expand-icon'], styles['expand-icon-right']) },
             React.createElement(InternalIcon, { name: "caret-down-filled" }))));
@@ -58,7 +69,7 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
     }
     else {
         content = (React.createElement(Dropdown, { open: expanded, stretchWidth: false, interior: true, expandToViewport: expandToViewport, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: clsx(styles['items-list-container'], styles['in-dropdown']) },
-            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, lastInDropdown: lastInDropdown, highlightItem: highlightItem, variant: variant })))));
+            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, lastInDropdown: lastInDropdown, highlightItem: highlightItem, variant: variant, position: position })))));
     }
     return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {
             [styles.expanded]: expanded,

package/lib/internal/template/button-dropdown/category-elements/expandable-category-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AACjD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAC1D,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAE/E,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,OAAO,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,yBAAyB,GAAG,CAAC,EACjC,IAAI,EACJ,cAAc,EACd,aAAa,EACb,UAAU,EACV,aAAa,EACb,mBAAmB,EACnB,UAAU,EACV,cAAc,EACd,aAAa,EACb,QAAQ,EACR,gBAAgB,EAChB,OAAO,GACO,EAAE,EAAE;IAClB,MAAM,WAAW,GAAG,aAAa,CAAC,IAAI,CAAC,CAAC;IACxC,MAAM,QAAQ,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAClC,MAAM,qBAAqB,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;IACxD,MAAM,UAAU,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;IACvD,MAAM,GAAG,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,UAAU,CAAC,OAAO,IAAI,WAAW,IAAI,CAAC,QAAQ,EAAE;YAClD,UAAU,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;SAC5B;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5B,MAAM,OAAO,GAA4B,KAAK,CAAC,EAAE;;QAC/C,IAAI,CAAC,QAAQ,EAAE;YACb,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,aAAa,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC3B,MAAA,UAAU,CAAC,OAAO,0CAAE,KAAK,EAAE,CAAC;SAC7B;IACH,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,GAAG,EAAE;QACnB,aAAa,CAAC,IAAI,CAAC,CAAC;IACtB,CAAC,CAAC;IAEF,MAAM,oBAAoB,GAAG,CAAC,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,CAAC;IACpE,MAAM,EAAE,WAAW,EAAE,aAAa,EAAE,GAAG,oBAAoB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IACjF,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,IAAI,CAC3B,4CACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,mBAAmB,CAAC,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE;YACxF,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,WAAW;YACjC,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,qBAAqB;SAC9C,CAAC;QACF,wFAAwF;QACxF,wFAAwF;QACxF,8EAA8E;QAC9E,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EAC9B,GAAG,EAAE,UAAU,IACX,gBAAgB,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EACtD,CAAC,oBAAoB,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC;QAE5C,IAAI,CAAC,IAAI;QACV,8BAAM,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE,MAAM,CAAC,mBAAmB,CAAC,CAAC;YACvE,oBAAC,YAAY,IAAC,IAAI,EAAC,mBAAmB,GAAG,CACpC,CACF,CACR,CAAC;IAEF,IAAI,OAAwB,CAAC;IAC7B,oEAAoE;IACpE,oDAAoD;IACpD,IAAI,oBAAoB,EAAE;QACxB,OAAO,GAAG,CACR,oBAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,cAAc;YAClC,OAAO;YACP,aAAa,CACN,CACX,CAAC;KACH;SAAM,IAAI,QAAQ,EAAE;QACnB,OAAO,GAAG,OAAO,CAAC;KACnB;SAAM;QACL,OAAO,GAAG,CACR,oBAAC,QAAQ,IACP,IAAI,EAAE,QAAQ,EACd,YAAY,EAAE,KAAK,EACnB,QAAQ,EAAE,IAAI,EACd,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,IAEf,IAAI,CAAC,KAAK,IAAI,QAAQ,IAAI,CACzB,4BACE,IAAI,EAAC,MAAM,gBACC,IAAI,CAAC,IAAI,EACrB,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,sBAAsB,CAAC,EAAE,MAAM,CAAC,aAAa,CAAC,CAAC;YAEtE,oBAAC,SAAS,IACR,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,GAChB,CACC,CACN,CACQ,CACZ,CAAC;KACH;IAED,OAAO,CACL,4BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,WAAW,OAAO,EAAE,CAAC,EAAE,MAAM,CAAC,UAAU,EAAE;YAChF,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,WAAW;SAClC,CAAC,EACF,IAAI,EAAC,cAAc,iBACN,IAAI,CAAC,EAAE,EACpB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,OAAO,EACrB,YAAY,EAAE,OAAO,IAEpB,OAAO,CACL,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,yBAAyB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport Dropdown from '../../internal/components/dropdown';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nimport styles from './styles.css.js';\n\nconst ExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  expandToViewport,\n  variant,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const isKeyboardHighlighted = isKeyboardHighlight(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n  const ref = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick: React.MouseEventHandler = event => {\n    if (!disabled) {\n      event.preventDefault();\n      onGroupToggle(item, event);\n      triggerRef.current?.focus();\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n        [styles['is-focused']]: isKeyboardHighlighted,\n      })}\n      // We are using the roving tabindex technique to manage the focus state of the dropdown.\n      // The current element will always have tabindex=0 which means that it can be tabbed to,\n      // while all other items have tabindex=-1 so we can focus them when necessary.\n      tabIndex={highlighted ? 0 : -1}\n      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, expanded, disabled })}\n      {...(isDisabledWithReason ? targetProps : {})}\n    >\n      {item.text}\n      <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n  // If the category element is disabled, we do not render a dropdown.\n  // Screenreaders are confused by additional sections\n  if (isDisabledWithReason) {\n    content = (\n      <Tooltip content={item.disabledReason}>\n        {trigger}\n        {descriptionEl}\n      </Tooltip>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <Dropdown\n        open={expanded}\n        stretchWidth={false}\n        interior={true}\n        expandToViewport={expandToViewport}\n        trigger={trigger}\n      >\n        {item.items && expanded && (\n          <ul\n            role=\"menu\"\n            aria-label={item.text}\n            className={clsx(styles['items-list-container'], styles['in-dropdown'])}\n          >\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isKeyboardHighlight={isKeyboardHighlight}\n              isExpanded={isExpanded}\n              lastInDropdown={lastInDropdown}\n              highlightItem={highlightItem}\n              variant={variant}\n            />\n          </ul>\n        )}\n      </Dropdown>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default ExpandableCategoryElement;\n"]}
+{"version":3,"file":"expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/expandable-category-element.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, { useEffect, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../icon/internal';\nimport Dropdown from '../../internal/components/dropdown';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownExpand } from '../analytics-metadata/interfaces.js';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item';\n\nimport styles from './styles.css.js';\n\nconst ExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  expandToViewport,\n  variant,\n  position,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const isKeyboardHighlighted = isKeyboardHighlight(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n  const ref = useRef<HTMLLIElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick: React.MouseEventHandler = event => {\n    if (!disabled) {\n      event.preventDefault();\n      onGroupToggle(item, event);\n      triggerRef.current?.focus();\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n        [styles['is-focused']]: isKeyboardHighlighted,\n      })}\n      // We are using the roving tabindex technique to manage the focus state of the dropdown.\n      // The current element will always have tabindex=0 which means that it can be tabbed to,\n      // while all other items have tabindex=-1 so we can focus them when necessary.\n      tabIndex={highlighted ? 0 : -1}\n      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, expanded, disabled })}\n      {...(isDisabledWithReason ? targetProps : {})}\n      {...getAnalyticsMetadataAttribute(\n        disabled\n          ? {}\n          : ({\n              action: 'expand',\n              detail: {\n                position: position || '0',\n                label: '',\n                id: item.id || '',\n                expanded: `${!expanded}`,\n              },\n            } as GeneratedAnalyticsMetadataButtonDropdownExpand)\n      )}\n    >\n      {item.text}\n      <span className={clsx(styles['expand-icon'], styles['expand-icon-right'])}>\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n  // If the category element is disabled, we do not render a dropdown.\n  // Screenreaders are confused by additional sections\n  if (isDisabledWithReason) {\n    content = (\n      <Tooltip content={item.disabledReason}>\n        {trigger}\n        {descriptionEl}\n      </Tooltip>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <Dropdown\n        open={expanded}\n        stretchWidth={false}\n        interior={true}\n        expandToViewport={expandToViewport}\n        trigger={trigger}\n      >\n        {item.items && expanded && (\n          <ul\n            role=\"menu\"\n            aria-label={item.text}\n            className={clsx(styles['items-list-container'], styles['in-dropdown'])}\n          >\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isKeyboardHighlight={isKeyboardHighlight}\n              isExpanded={isExpanded}\n              lastInDropdown={lastInDropdown}\n              highlightItem={highlightItem}\n              variant={variant}\n              position={position}\n            />\n          </ul>\n        )}\n      </Dropdown>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted,\n      })}\n      role=\"presentation\"\n      data-testid={item.id}\n      ref={ref}\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default ExpandableCategoryElement;\n"]}

package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { CategoryProps } from '../interfaces';
-declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, }: CategoryProps) => JSX.Element;
+declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, }: CategoryProps) => JSX.Element;
 export default MobileExpandableCategoryElement;
 //# sourceMappingURL=mobile-expandable-category-element.d.ts.map

package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":";AAOA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,QAAA,MAAM,+BAA+B,2JAYlC,aAAa,gBAwGf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
+{"version":3,"file":"mobile-expandable-category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,QAAA,MAAM,+BAA+B,qKAalC,aAAa,gBAsHf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}

package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import InternalIcon from '../../icon/internal';
 import useHiddenDescription from '../../internal/hooks/use-hidden-description';
 import ItemsList from '../items-list';
@@ -9,7 +10,7 @@ import MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-
 import Tooltip from '../tooltip.js';
 import { getMenuItemProps } from '../utils/menu-item.js';
 import styles from './styles.css.js';
-const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, }) => {
+const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, }) => {
     const highlighted = isHighlighted(item);
     const expanded = isExpanded(item);
     const isKeyboardHighlighted = isKeyboardHighlight(item);
@@ -39,7 +40,17 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
         // We are using the roving tabindex technique to manage the focus state of the dropdown.
         // The current element will always have tabindex=0 which means that it can be tabbed to,
         // while all other items have tabindex=-1 so we can focus them when necessary.
-        tabIndex: highlighted ? 0 : -1, ref: triggerRef }, getMenuItemProps({ parent: true, disabled, expanded }), (isDisabledWithReason ? targetProps : {})),
+        tabIndex: highlighted ? 0 : -1, ref: triggerRef }, getMenuItemProps({ parent: true, disabled, expanded }), (isDisabledWithReason ? targetProps : {}), getAnalyticsMetadataAttribute(disabled
+        ? {}
+        : {
+            action: 'expand',
+            detail: {
+                position: position || '0',
+                label: '',
+                id: item.id || '',
+                expanded: `${!expanded}`,
+            },
+        })),
         item.text,
         React.createElement("span", { className: clsx(styles['expand-icon'], {
                 [styles['expand-icon-up']]: expanded,
@@ -56,7 +67,7 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
     }
     else {
         content = (React.createElement(MobileExpandableGroup, { open: expanded, trigger: trigger }, item.items && expanded && (React.createElement("ul", { role: "menu", "aria-label": item.text, className: styles['items-list-container'] },
-            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, lastInDropdown: lastInDropdown, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant })))));
+            React.createElement(ItemsList, { items: item.items, onItemActivate: onItemActivate, onGroupToggle: onGroupToggle, targetItem: targetItem, isHighlighted: isHighlighted, isKeyboardHighlight: isKeyboardHighlight, isExpanded: isExpanded, lastInDropdown: lastInDropdown, highlightItem: highlightItem, hasCategoryHeader: true, variant: variant, position: position })))));
     }
     return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {
             [styles.expanded]: expanded,

package/lib/internal/template/button-dropdown/category-elements/mobile-expandable-category-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"mobile-expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.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, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\nimport MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item.js';\n\nimport styles from './styles.css.js';\n\nconst MobileExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  variant,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const isKeyboardHighlighted = isKeyboardHighlight(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick = (e: React.MouseEvent) => {\n    if (!disabled) {\n      e.preventDefault();\n      onGroupToggle(item, e);\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.highlighted]: highlighted,\n        [styles['rolled-down']]: expanded,\n        [styles.disabled]: disabled,\n        [styles['is-focused']]: isKeyboardHighlighted,\n      })}\n      // We are using the roving tabindex technique to manage the focus state of the dropdown.\n      // The current element will always have tabindex=0 which means that it can be tabbed to,\n      // while all other items have tabindex=-1 so we can focus them when necessary.\n      tabIndex={highlighted ? 0 : -1}\n      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, disabled, expanded })}\n      {...(isDisabledWithReason ? targetProps : {})}\n    >\n      {item.text}\n      <span\n        className={clsx(styles['expand-icon'], {\n          [styles['expand-icon-up']]: expanded,\n        })}\n      >\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n\n  if (isDisabledWithReason) {\n    content = (\n      <>\n        {descriptionEl}\n        <Tooltip content={item.disabledReason}>{trigger}</Tooltip>\n      </>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <MobileExpandableGroup open={expanded} trigger={trigger}>\n        {item.items && expanded && (\n          <ul role=\"menu\" aria-label={item.text} className={styles['items-list-container']}>\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isKeyboardHighlight={isKeyboardHighlight}\n              isExpanded={isExpanded}\n              lastInDropdown={lastInDropdown}\n              highlightItem={highlightItem}\n              hasCategoryHeader={true}\n              variant={variant}\n            />\n          </ul>\n        )}\n      </MobileExpandableGroup>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted || expanded,\n        [styles.expandable]: true,\n      })}\n      role=\"presentation\"\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n      data-testid={item.id}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default MobileExpandableCategoryElement;\n"]}
+{"version":3,"file":"mobile-expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.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, { useEffect } from 'react';\nimport clsx from 'clsx';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../icon/internal';\nimport useHiddenDescription from '../../internal/hooks/use-hidden-description';\nimport { GeneratedAnalyticsMetadataButtonDropdownExpand } from '../analytics-metadata/interfaces.js';\nimport { CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\nimport MobileExpandableGroup from '../mobile-expandable-group/mobile-expandable-group';\nimport Tooltip from '../tooltip.js';\nimport { getMenuItemProps } from '../utils/menu-item.js';\n\nimport styles from './styles.css.js';\n\nconst MobileExpandableCategoryElement = ({\n  item,\n  onItemActivate,\n  onGroupToggle,\n  targetItem,\n  isHighlighted,\n  isKeyboardHighlight,\n  isExpanded,\n  lastInDropdown,\n  highlightItem,\n  disabled,\n  variant,\n  position,\n}: CategoryProps) => {\n  const highlighted = isHighlighted(item);\n  const expanded = isExpanded(item);\n  const isKeyboardHighlighted = isKeyboardHighlight(item);\n  const triggerRef = React.useRef<HTMLSpanElement>(null);\n\n  useEffect(() => {\n    if (triggerRef.current && highlighted && !expanded) {\n      triggerRef.current.focus();\n    }\n  }, [expanded, highlighted]);\n\n  const onClick = (e: React.MouseEvent) => {\n    if (!disabled) {\n      e.preventDefault();\n      onGroupToggle(item, e);\n    }\n  };\n\n  const onHover = () => {\n    highlightItem(item);\n  };\n\n  const isDisabledWithReason = !!item.disabledReason && item.disabled;\n  const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);\n  const trigger = item.text && (\n    <span\n      className={clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {\n        [styles.highlighted]: highlighted,\n        [styles['rolled-down']]: expanded,\n        [styles.disabled]: disabled,\n        [styles['is-focused']]: isKeyboardHighlighted,\n      })}\n      // We are using the roving tabindex technique to manage the focus state of the dropdown.\n      // The current element will always have tabindex=0 which means that it can be tabbed to,\n      // while all other items have tabindex=-1 so we can focus them when necessary.\n      tabIndex={highlighted ? 0 : -1}\n      ref={triggerRef}\n      {...getMenuItemProps({ parent: true, disabled, expanded })}\n      {...(isDisabledWithReason ? targetProps : {})}\n      {...getAnalyticsMetadataAttribute(\n        disabled\n          ? {}\n          : ({\n              action: 'expand',\n              detail: {\n                position: position || '0',\n                label: '',\n                id: item.id || '',\n                expanded: `${!expanded}`,\n              },\n            } as GeneratedAnalyticsMetadataButtonDropdownExpand)\n      )}\n    >\n      {item.text}\n      <span\n        className={clsx(styles['expand-icon'], {\n          [styles['expand-icon-up']]: expanded,\n        })}\n      >\n        <InternalIcon name=\"caret-down-filled\" />\n      </span>\n    </span>\n  );\n\n  let content: React.ReactNode;\n\n  if (isDisabledWithReason) {\n    content = (\n      <>\n        {descriptionEl}\n        <Tooltip content={item.disabledReason}>{trigger}</Tooltip>\n      </>\n    );\n  } else if (disabled) {\n    content = trigger;\n  } else {\n    content = (\n      <MobileExpandableGroup open={expanded} trigger={trigger}>\n        {item.items && expanded && (\n          <ul role=\"menu\" aria-label={item.text} className={styles['items-list-container']}>\n            <ItemsList\n              items={item.items}\n              onItemActivate={onItemActivate}\n              onGroupToggle={onGroupToggle}\n              targetItem={targetItem}\n              isHighlighted={isHighlighted}\n              isKeyboardHighlight={isKeyboardHighlight}\n              isExpanded={isExpanded}\n              lastInDropdown={lastInDropdown}\n              highlightItem={highlightItem}\n              hasCategoryHeader={true}\n              variant={variant}\n              position={position}\n            />\n          </ul>\n        )}\n      </MobileExpandableGroup>\n    );\n  }\n\n  return (\n    <li\n      className={clsx(styles.category, styles[`variant-${variant}`], styles.expandable, {\n        [styles.expanded]: expanded,\n        [styles.disabled]: disabled,\n        [styles.highlighted]: highlighted || expanded,\n        [styles.expandable]: true,\n      })}\n      role=\"presentation\"\n      onClick={onClick}\n      onMouseEnter={onHover}\n      onTouchStart={onHover}\n      data-testid={item.id}\n    >\n      {content}\n    </li>\n  );\n};\n\nexport default MobileExpandableCategoryElement;\n"]}

package/lib/internal/template/button-dropdown/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAInD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,QAAA,MAAM,cAAc,qGAkDnB,CAAC;AAGF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/button-dropdown/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,OAAO,EAAE,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAMnD,OAAO,EAAE,mBAAmB,EAAE,CAAC;AAE/B,QAAA,MAAM,cAAc,qGA4DnB,CAAC;AAGF,eAAe,cAAc,CAAC"}

package/lib/internal/template/button-dropdown/index.js

@@ -2,11 +2,13 @@ import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 import { getBaseProps } from '../internal/base-component';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import InternalButtonDropdown from './internal';
 import { hasCheckboxItems } from './utils/utils';
+import analyticsSelectors from './analytics-metadata/styles.css.js';
 const ButtonDropdown = React.forwardRef((_a, ref) => {
     var { items, variant = 'normal', loading = false, loadingText, disabled = false, disabledReason, expandableGroups = false, expandToViewport = false, ariaLabel, children, onItemClick, onItemFollow, mainAction } = _a, props = __rest(_a, ["items", "variant", "loading", "loadingText", "disabled", "disabledReason", "expandableGroups", "expandToViewport", "ariaLabel", "children", "onItemClick", "onItemFollow", "mainAction"]);
     const baseComponentProps = useBaseComponent('ButtonDropdown', {
@@ -17,7 +19,14 @@ const ButtonDropdown = React.forwardRef((_a, ref) => {
         },
     });
     const baseProps = getBaseProps(props);
-    return (React.createElement(InternalButtonDropdown, Object.assign({}, baseProps, baseComponentProps, { ref: ref, items: items, variant: variant, loading: loading, loadingText: loadingText, disabled: disabled, disabledReason: disabledReason, expandableGroups: expandableGroups, expandToViewport: expandToViewport, ariaLabel: ariaLabel, onItemClick: onItemClick, onItemFollow: onItemFollow, mainAction: mainAction }), children));
+    const analyticsComponentMetadata = {
+        name: 'awsui.ButtonDropdown',
+        label: `.${analyticsSelectors['trigger-label']}`,
+        properties: { variant, disabled: `${disabled}` },
+    };
+    return (React.createElement(InternalButtonDropdown, Object.assign({}, baseProps, baseComponentProps, { ref: ref, items: items, variant: variant, loading: loading, loadingText: loadingText, disabled: disabled, disabledReason: disabledReason, expandableGroups: expandableGroups, expandToViewport: expandToViewport, ariaLabel: ariaLabel, onItemClick: onItemClick, onItemFollow: onItemFollow, mainAction: mainAction }, getAnalyticsMetadataAttribute({
+        component: analyticsComponentMetadata,
+    })), children));
 });
 applyDisplayName(ButtonDropdown, 'ButtonDropdown');
 export default ButtonDropdown;

package/lib/internal/template/button-dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button-dropdown/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAExE,OAAO,sBAAsB,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAIjD,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAesB,EACtB,GAAuC,EACvC,EAAE;QAjBF,EACE,KAAK,EACL,OAAO,GAAG,QAAQ,EAClB,OAAO,GAAG,KAAK,EACf,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,GAAG,KAAK,EACxB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,OAEU,EADjB,KAAK,cAdV,0LAeC,CADS;IAIV,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,gBAAgB,EAAE;QAC5D,KAAK,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE;QACtD,QAAQ,EAAE;YACR,UAAU,EAAE,CAAC,CAAC,UAAU;YACxB,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC;SACvC;KACF,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IACtC,OAAO,CACL,oBAAC,sBAAsB,oBACjB,SAAS,EACT,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,KAErB,QAAQ,CACc,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AACnD,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { ButtonDropdownProps } from './interfaces';\nimport InternalButtonDropdown from './internal';\nimport { hasCheckboxItems } from './utils/utils';\n\nexport { ButtonDropdownProps };\n\nconst ButtonDropdown = React.forwardRef(\n  (\n    {\n      items,\n      variant = 'normal',\n      loading = false,\n      loadingText,\n      disabled = false,\n      disabledReason,\n      expandableGroups = false,\n      expandToViewport = false,\n      ariaLabel,\n      children,\n      onItemClick,\n      onItemFollow,\n      mainAction,\n      ...props\n    }: ButtonDropdownProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('ButtonDropdown', {\n      props: { expandToViewport, expandableGroups, variant },\n      metadata: {\n        mainAction: !!mainAction,\n        checkboxItems: hasCheckboxItems(items),\n      },\n    });\n    const baseProps = getBaseProps(props);\n    return (\n      <InternalButtonDropdown\n        {...baseProps}\n        {...baseComponentProps}\n        ref={ref}\n        items={items}\n        variant={variant}\n        loading={loading}\n        loadingText={loadingText}\n        disabled={disabled}\n        disabledReason={disabledReason}\n        expandableGroups={expandableGroups}\n        expandToViewport={expandToViewport}\n        ariaLabel={ariaLabel}\n        onItemClick={onItemClick}\n        onItemFollow={onItemFollow}\n        mainAction={mainAction}\n      >\n        {children}\n      </InternalButtonDropdown>\n    );\n  }\n);\n\napplyDisplayName(ButtonDropdown, 'ButtonDropdown');\nexport default ButtonDropdown;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button-dropdown/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAGxE,OAAO,sBAAsB,MAAM,YAAY,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AAIpE,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAesB,EACtB,GAAuC,EACvC,EAAE;QAjBF,EACE,KAAK,EACL,OAAO,GAAG,QAAQ,EAClB,OAAO,GAAG,KAAK,EACf,WAAW,EACX,QAAQ,GAAG,KAAK,EAChB,cAAc,EACd,gBAAgB,GAAG,KAAK,EACxB,gBAAgB,GAAG,KAAK,EACxB,SAAS,EACT,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,UAAU,OAEU,EADjB,KAAK,cAdV,0LAeC,CADS;IAIV,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,gBAAgB,EAAE;QAC5D,KAAK,EAAE,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,OAAO,EAAE;QACtD,QAAQ,EAAE;YACR,UAAU,EAAE,CAAC,CAAC,UAAU;YACxB,aAAa,EAAE,gBAAgB,CAAC,KAAK,CAAC;SACvC;KACF,CAAC,CAAC;IACH,MAAM,SAAS,GAAG,YAAY,CAAC,KAAK,CAAC,CAAC;IAEtC,MAAM,0BAA0B,GAAsD;QACpF,IAAI,EAAE,sBAAsB;QAC5B,KAAK,EAAE,IAAI,kBAAkB,CAAC,eAAe,CAAC,EAAE;QAChD,UAAU,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,QAAQ,EAAE,EAAE;KACjD,CAAC;IAEF,OAAO,CACL,oBAAC,sBAAsB,oBACjB,SAAS,EACT,kBAAkB,IACtB,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,cAAc,EAAE,cAAc,EAC9B,gBAAgB,EAAE,gBAAgB,EAClC,gBAAgB,EAAE,gBAAgB,EAClC,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,IAClB,6BAA6B,CAAC;QAChC,SAAS,EAAE,0BAA0B;KACtC,CAAC,GAED,QAAQ,CACc,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,cAAc,EAAE,gBAAgB,CAAC,CAAC;AACnD,eAAe,cAAc,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { GeneratedAnalyticsMetadataButtonDropdownComponent } from './analytics-metadata/interfaces';\nimport { ButtonDropdownProps } from './interfaces';\nimport InternalButtonDropdown from './internal';\nimport { hasCheckboxItems } from './utils/utils';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\n\nexport { ButtonDropdownProps };\n\nconst ButtonDropdown = React.forwardRef(\n  (\n    {\n      items,\n      variant = 'normal',\n      loading = false,\n      loadingText,\n      disabled = false,\n      disabledReason,\n      expandableGroups = false,\n      expandToViewport = false,\n      ariaLabel,\n      children,\n      onItemClick,\n      onItemFollow,\n      mainAction,\n      ...props\n    }: ButtonDropdownProps,\n    ref: React.Ref<ButtonDropdownProps.Ref>\n  ) => {\n    const baseComponentProps = useBaseComponent('ButtonDropdown', {\n      props: { expandToViewport, expandableGroups, variant },\n      metadata: {\n        mainAction: !!mainAction,\n        checkboxItems: hasCheckboxItems(items),\n      },\n    });\n    const baseProps = getBaseProps(props);\n\n    const analyticsComponentMetadata: GeneratedAnalyticsMetadataButtonDropdownComponent = {\n      name: 'awsui.ButtonDropdown',\n      label: `.${analyticsSelectors['trigger-label']}`,\n      properties: { variant, disabled: `${disabled}` },\n    };\n\n    return (\n      <InternalButtonDropdown\n        {...baseProps}\n        {...baseComponentProps}\n        ref={ref}\n        items={items}\n        variant={variant}\n        loading={loading}\n        loadingText={loadingText}\n        disabled={disabled}\n        disabledReason={disabledReason}\n        expandableGroups={expandableGroups}\n        expandToViewport={expandToViewport}\n        ariaLabel={ariaLabel}\n        onItemClick={onItemClick}\n        onItemFollow={onItemFollow}\n        mainAction={mainAction}\n        {...getAnalyticsMetadataAttribute({\n          component: analyticsComponentMetadata,\n        })}\n      >\n        {children}\n      </InternalButtonDropdown>\n    );\n  }\n);\n\napplyDisplayName(ButtonDropdown, 'ButtonDropdown');\nexport default ButtonDropdown;\n"]}