npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1057 → 3.0.1059 - Mend

@cloudscape-design/components-themeable 3.0.1057 → 3.0.1059

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

Files changed (88) hide show

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

@@ -2,13 +2,18 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 import clsx from 'clsx';
+import InternalIcon from '../../icon/internal';
 import ItemsList from '../items-list';
 import styles from './styles.css.js';
 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" },
-        item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" }, item.text)),
+        item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" },
+            React.createElement("span", { className: styles['header-content'] },
+                (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
+                    React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
+                item.text))),
         React.createElement("ul", { className: styles['items-list-container'], role: "group", "aria-label": item.text, "aria-disabled": disabled }, 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;

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

	@@ -1 +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,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;QAElB,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,mBAAiB,QAAQ,IACvG,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 >\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} aria-disabled={disabled}>\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"]}
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;AAExB,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAE/C,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;QAElB,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;YACpF,8BAAM,SAAS,EAAE,MAAM,CAAC,gBAAgB,CAAC;gBACtC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAClD,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;oBACrC,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,GAAI,CACzF,CACR;gBACA,IAAI,CAAC,IAAI,CACL,CACL,CACL;QACD,4BAAI,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC,EAAE,IAAI,EAAC,OAAO,gBAAa,IAAI,CAAC,IAAI,mBAAiB,QAAQ,IACvG,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 InternalIcon from '../../icon/internal';\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 >\n {item.text && (\n <p className={clsx(styles.header, { [styles.disabled]: disabled })} aria-hidden=\"true\">\n <span className={styles['header-content']}>\n {(item.iconName \|\| item.iconUrl \|\| item.iconSvg) && (\n <span className={styles['icon-wrapper']}>\n <InternalIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />\n </span>\n )}\n {item.text}\n </span>\n </p>\n )}\n <ul className={styles['items-list-container']} role=\"group\" aria-label={item.text} aria-disabled={disabled}>\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.map CHANGED Viewed

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

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

@@ -55,6 +55,8 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
                 id: item.id || '',
             },
         })),
+        (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
+            React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
         item.text,
         React.createElement("span", { className: clsx(styles['expand-icon'], styles['expand-icon-right']) },
             React.createElement(InternalIcon, { name: "caret-down-filled" }))));

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

	@@ -1 +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,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAC1D,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAC/E,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAMxE,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,EACP,QAAQ,GACM,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,eAAe,GAAG,gBAAgB,EAAE,CAAC;IAE3C,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;YAC7C,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,eAAe;SAC5C,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,EACzC,6BAA6B,CAC/B,QAAQ;QACN,CAAC,CAAC,EAAE;QACJ,CAAC,CAAE;YACC,MAAM,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU;YACzC,MAAM,EAAE;gBACN,QAAQ,EAAE,QAAQ,IAAI,GAAG;gBACzB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;gBACvB,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE;aAClB;SACoG,CAC5G;QAEA,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,EAChB,QAAQ,EAAE,QAAQ,GAClB,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 { 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 { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport {\n GeneratedAnalyticsMetadataButtonDropdownCollapse,\n GeneratedAnalyticsMetadataButtonDropdownExpand,\n} 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 isVisualRefresh = useVisualRefresh();\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 [styles['visual-refresh']]: isVisualRefresh,\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: !expanded ? 'expand' : 'collapse',\n detail: {\n position: position \|\| '0',\n label: { root: 'self' },\n id: item.id \|\| '',\n },\n } as GeneratedAnalyticsMetadataButtonDropdownExpand \| GeneratedAnalyticsMetadataButtonDropdownCollapse)\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"]}
1	+ {"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 { useVisualRefresh } from '../../internal/hooks/use-visual-mode';\nimport {\n GeneratedAnalyticsMetadataButtonDropdownCollapse,\n GeneratedAnalyticsMetadataButtonDropdownExpand,\n} 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 isVisualRefresh = useVisualRefresh();\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 [styles['visual-refresh']]: isVisualRefresh,\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: !expanded ? 'expand' : 'collapse',\n detail: {\n position: position \|\| '0',\n label: { root: 'self' },\n id: item.id \|\| '',\n },\n } as GeneratedAnalyticsMetadataButtonDropdownExpand \| GeneratedAnalyticsMetadataButtonDropdownCollapse)\n )}\n >\n {(item.iconName \|\| item.iconUrl \|\| item.iconSvg) && (\n <span className={styles['icon-wrapper']}>\n <InternalIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />\n </span>\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.map CHANGED Viewed

	@@ -1 +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":";AAUA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAQ9C,QAAA,MAAM,+BAA+B,qKAalC,aAAa,~~gBAsHf~~,CAAC;AAEF,eAAe,+BAA+B,CAAC"}
1	+ {"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,gBA2Hf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}

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

@@ -51,6 +51,8 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
                 expanded: `${!expanded}`,
             },
         })),
+        (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
+            React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
         item.text,
         React.createElement("span", { className: clsx(styles['expand-icon'], {
                 [styles['expand-icon-up']]: expanded,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"mobile-expandable-category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/mobile-expandable-category-element.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,oBAAoB,MAAM,6CAA6C,CAAC;AAG/E,OAAO,SAAS,MAAM,eAAe,CAAC;AACtC,OAAO,qBAAqB,MAAM,oDAAoD,CAAC;AACvF,OAAO,OAAO,MAAM,eAAe,CAAC;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAEzD,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,+BAA+B,GAAG,CAAC,EACvC,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,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;IAEvD,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,GAAG,CAAC,CAAmB,EAAE,EAAE;QACtC,IAAI,CAAC,QAAQ,EAAE;YACb,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,aAAa,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SACxB;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,WAAW,CAAC,EAAE,WAAW;YACjC,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,EAAE,QAAQ;YACjC,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,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,EACzC,6BAA6B,CAC/B,QAAQ;QACN,CAAC,CAAC,EAAE;QACJ,CAAC,CAAE;YACC,MAAM,EAAE,QAAQ;YAChB,MAAM,EAAE;gBACN,QAAQ,EAAE,QAAQ,IAAI,GAAG;gBACzB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;gBACvB,EAAE,EAAE,IAAI,CAAC,EAAE,IAAI,EAAE;gBACjB,QAAQ,EAAE,GAAG,CAAC,QAAQ,EAAE;aACzB;SACiD,CACzD;QAEA,IAAI,CAAC,IAAI;QACV,8BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;gBACrC,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC,EAAE,QAAQ;aACrC,CAAC;YAEF,oBAAC,YAAY,IAAC,IAAI,EAAC,mBAAmB,GAAG,CACpC,CACF,CACR,CAAC;IAEF,IAAI,OAAwB,CAAC;IAE7B,IAAI,oBAAoB,EAAE;QACxB,OAAO,GAAG,CACR;YACG,aAAa;YACd,oBAAC,OAAO,IAAC,OAAO,EAAE,IAAI,CAAC,cAAc,IAAG,OAAO,CAAW,CACzD,CACJ,CAAC;KACH;SAAM,IAAI,QAAQ,EAAE;QACnB,OAAO,GAAG,OAAO,CAAC;KACnB;SAAM;QACL,OAAO,GAAG,CACR,oBAAC,qBAAqB,IAAC,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,IACpD,IAAI,CAAC,KAAK,IAAI,QAAQ,IAAI,CACzB,4BAAI,IAAI,EAAC,MAAM,gBAAa,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,MAAM,CAAC,sBAAsB,CAAC;YAC9E,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,iBAAiB,EAAE,IAAI,EACvB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CACC,CACN,CACqB,CACzB,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,IAAI,QAAQ;YAC7C,CAAC,MAAM,CAAC,UAAU,CAAC,EAAE,IAAI;SAC1B,CAAC,EACF,IAAI,EAAC,cAAc,EACnB,OAAO,EAAE,OAAO,EAChB,YAAY,EAAE,OAAO,EACrB,YAAY,EAAE,OAAO,iBACR,IAAI,CAAC,EAAE,IAEnB,OAAO,CACL,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,+BAA+B,CAAC","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: { root: 'self' },\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"]}
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 { 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: { root: 'self' },\n id: item.id \|\| '',\n expanded: `${!expanded}`,\n },\n } as GeneratedAnalyticsMetadataButtonDropdownExpand)\n )}\n >\n {(item.iconName \|\| item.iconUrl \|\| item.iconSvg) && (\n <span className={styles['icon-wrapper']}>\n <InternalIcon name={item.iconName} url={item.iconUrl} svg={item.iconSvg} alt={item.iconAlt} />\n </span>\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/category-elements/styles.css.js CHANGED Viewed

@@ -1,20 +1,22 @@
     import './styles.scoped.css';
     export default {
-  "header": "awsui_header_16mm3_1hsux_145",
-  "disabled": "awsui_disabled_16mm3_1hsux_160",
-  "expandable-header": "awsui_expandable-header_16mm3_1hsux_164",
-  "rolled-down": "awsui_rolled-down_16mm3_1hsux_175",
-  "highlighted": "awsui_highlighted_16mm3_1hsux_178",
-  "is-focused": "awsui_is-focused_16mm3_1hsux_196",
-  "visual-refresh": "awsui_visual-refresh_16mm3_1hsux_199",
-  "category": "awsui_category_16mm3_1hsux_203",
-  "expandable": "awsui_expandable_16mm3_1hsux_164",
-  "variant-navigation": "awsui_variant-navigation_16mm3_1hsux_218",
-  "expand-icon": "awsui_expand-icon_16mm3_1hsux_225",
-  "expand-icon-up": "awsui_expand-icon-up_16mm3_1hsux_242",
-  "expand-icon-right": "awsui_expand-icon-right_16mm3_1hsux_245",
-  "items-list-container": "awsui_items-list-container_16mm3_1hsux_253",
-  "in-dropdown": "awsui_in-dropdown_16mm3_1hsux_262"
+  "header": "awsui_header_16mm3_1bmod_145",
+  "disabled": "awsui_disabled_16mm3_1bmod_161",
+  "expandable-header": "awsui_expandable-header_16mm3_1bmod_165",
+  "rolled-down": "awsui_rolled-down_16mm3_1bmod_176",
+  "highlighted": "awsui_highlighted_16mm3_1bmod_179",
+  "is-focused": "awsui_is-focused_16mm3_1bmod_197",
+  "visual-refresh": "awsui_visual-refresh_16mm3_1bmod_200",
+  "category": "awsui_category_16mm3_1bmod_204",
+  "expandable": "awsui_expandable_16mm3_1bmod_165",
+  "variant-navigation": "awsui_variant-navigation_16mm3_1bmod_219",
+  "expand-icon": "awsui_expand-icon_16mm3_1bmod_226",
+  "expand-icon-up": "awsui_expand-icon-up_16mm3_1bmod_244",
+  "expand-icon-right": "awsui_expand-icon-right_16mm3_1bmod_247",
+  "items-list-container": "awsui_items-list-container_16mm3_1bmod_255",
+  "in-dropdown": "awsui_in-dropdown_16mm3_1bmod_264",
+  "icon-wrapper": "awsui_icon-wrapper_16mm3_1bmod_268",
+  "header-content": "awsui_header-content_16mm3_1bmod_272"
 };

package/lib/internal/template/button-dropdown/category-elements/styles.scoped.css CHANGED Viewed

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_header_16mm3_1hsux_145:not(#\9) {
+.awsui_header_16mm3_1bmod_145:not(#\9) {
   position: relative;
   margin-block: 0;
   margin-inline: 0;
@@ -153,29 +153,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: bold;
   display: flex;
   justify-content: space-between;
+  align-items: center;
   padding-block: calc(var(--space-xxs-jnczic, 4px) + var(--border-item-width-acvlhx, 1px) - var(--border-divider-list-width-8ggz94, 1px));
   padding-inline: calc(var(--space-button-horizontal-v8ywmo, 20px) + var(--border-item-width-acvlhx, 1px));
   z-index: 1;
 }
-.awsui_header_16mm3_1hsux_145.awsui_disabled_16mm3_1hsux_160:not(#\9) {
+.awsui_header_16mm3_1bmod_145.awsui_disabled_16mm3_1bmod_161:not(#\9) {
   color: var(--color-text-dropdown-item-disabled-oysy8n, #aab7b8);
   cursor: default;
 }
-.awsui_header_16mm3_1hsux_145.awsui_expandable-header_16mm3_1hsux_164:not(#\9) {
+.awsui_header_16mm3_1bmod_145.awsui_expandable-header_16mm3_1bmod_165:not(#\9) {
   border-block-start-color: var(--color-border-dropdown-group-dg9zg5, #eaeded);
   border-block-end-color: var(--color-border-dropdown-group-dg9zg5, #eaeded);
   cursor: pointer;
 }
-.awsui_header_16mm3_1hsux_145.awsui_expandable-header_16mm3_1hsux_164.awsui_disabled_16mm3_1hsux_160:not(#\9) {
+.awsui_header_16mm3_1bmod_145.awsui_expandable-header_16mm3_1bmod_165.awsui_disabled_16mm3_1bmod_161:not(#\9) {
   cursor: default;
 }
-.awsui_header_16mm3_1hsux_145.awsui_expandable-header_16mm3_1hsux_164:not(#\9):focus {
+.awsui_header_16mm3_1bmod_145.awsui_expandable-header_16mm3_1bmod_165:not(#\9):focus {
   outline: none;
 }
-.awsui_header_16mm3_1hsux_145.awsui_expandable-header_16mm3_1hsux_164.awsui_rolled-down_16mm3_1hsux_175:not(#\9) {
+.awsui_header_16mm3_1bmod_145.awsui_expandable-header_16mm3_1bmod_165.awsui_rolled-down_16mm3_1bmod_176:not(#\9) {
   border-block-end-color: transparent;
 }
-.awsui_header_16mm3_1hsux_145.awsui_expandable-header_16mm3_1hsux_164.awsui_highlighted_16mm3_1hsux_178:not(#\9) {
+.awsui_header_16mm3_1bmod_145.awsui_expandable-header_16mm3_1bmod_165.awsui_highlighted_16mm3_1bmod_179:not(#\9) {
   background-color: var(--color-background-dropdown-item-hover-353r6f, #f2f3f3);
   color: var(--color-text-dropdown-item-highlighted-bchk26, #16191f);
   padding-block: var(--space-xxs-jnczic, 4px);
@@ -188,69 +189,70 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
   z-index: 2;
 }
-.awsui_header_16mm3_1hsux_145.awsui_expandable-header_16mm3_1hsux_164.awsui_highlighted_16mm3_1hsux_178.awsui_disabled_16mm3_1hsux_160:not(#\9) {
+.awsui_header_16mm3_1bmod_145.awsui_expandable-header_16mm3_1bmod_165.awsui_highlighted_16mm3_1bmod_179.awsui_disabled_16mm3_1bmod_161:not(#\9) {
   background-color: var(--color-background-dropdown-item-dimmed-2hwvu9, transparent);
   border-color: var(--color-border-dropdown-item-dimmed-hover-twsd8z, #879596);
   color: var(--color-text-dropdown-item-dimmed-0xf8v3, #aab7b8);
 }
-.awsui_header_16mm3_1hsux_145.awsui_expandable-header_16mm3_1hsux_164.awsui_highlighted_16mm3_1hsux_178.awsui_is-focused_16mm3_1hsux_196:not(#\9) {
+.awsui_header_16mm3_1bmod_145.awsui_expandable-header_16mm3_1bmod_165.awsui_highlighted_16mm3_1bmod_179.awsui_is-focused_16mm3_1bmod_197:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-xty1zx, #0073bb);
 }
-.awsui_header_16mm3_1hsux_145.awsui_expandable-header_16mm3_1hsux_164.awsui_highlighted_16mm3_1hsux_178.awsui_is-focused_16mm3_1hsux_196:not(#\9):not(.awsui_visual-refresh_16mm3_1hsux_199) {
+.awsui_header_16mm3_1bmod_145.awsui_expandable-header_16mm3_1bmod_165.awsui_highlighted_16mm3_1bmod_179.awsui_is-focused_16mm3_1bmod_197:not(#\9):not(.awsui_visual-refresh_16mm3_1bmod_200) {
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_category_16mm3_1hsux_203:not(#\9) {
+.awsui_category_16mm3_1bmod_204:not(#\9) {
   list-style: none;
   margin-block-start: calc(-1 * var(--border-divider-list-width-8ggz94, 1px));
   padding-block: 0;
   padding-inline: 0;
 }
-.awsui_category_16mm3_1hsux_203:not(#\9):first-child {
+.awsui_category_16mm3_1bmod_204:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_category_16mm3_1hsux_203.awsui_expandable_16mm3_1hsux_164:not(#\9) {
+.awsui_category_16mm3_1bmod_204.awsui_expandable_16mm3_1bmod_165:not(#\9) {
   border-block-start: 0;
 }
-.awsui_category_16mm3_1hsux_203:not(#\9):last-child {
+.awsui_category_16mm3_1bmod_204:not(#\9):last-child {
   border-block-end: none;
 }
-.awsui_category_16mm3_1hsux_203.awsui_variant-navigation_16mm3_1hsux_218:not(#\9) {
+.awsui_category_16mm3_1bmod_204.awsui_variant-navigation_16mm3_1bmod_219:not(#\9) {
   padding-block-start: var(--space-xxs-jnczic, 4px);
 }
-.awsui_category_16mm3_1hsux_203.awsui_variant-navigation_16mm3_1hsux_218.awsui_expandable_16mm3_1hsux_164:not(#\9) {
+.awsui_category_16mm3_1bmod_204.awsui_variant-navigation_16mm3_1bmod_219.awsui_expandable_16mm3_1bmod_165:not(#\9) {
   padding-block-start: 0;
 }
-.awsui_expand-icon_16mm3_1hsux_225:not(#\9) {
+.awsui_expand-icon_16mm3_1bmod_226:not(#\9) {
   position: relative;
-  inset-inline-start: var(--space-s-4a5hs8, 12px);
+  inset-inline-end: calc(-1 * var(--space-s-4a5hs8, 12px));
   inline-size: var(--space-m-n2lypl, 16px);
   display: inline-block;
+  margin-inline-start: auto;
   transition: transform var(--motion-duration-rotate-180-4er9qu, 135ms) var(--motion-easing-rotate-180-xlspcm, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_expand-icon_16mm3_1hsux_225:not(#\9) {
+  .awsui_expand-icon_16mm3_1bmod_226:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_expand-icon_16mm3_1hsux_225:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_1hsux_225:not(#\9) {
+.awsui-motion-disabled .awsui_expand-icon_16mm3_1bmod_226:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_1bmod_226:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_expand-icon-up_16mm3_1hsux_242:not(#\9) {
+.awsui_expand-icon-up_16mm3_1bmod_244:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_expand-icon-right_16mm3_1hsux_245:not(#\9) {
+.awsui_expand-icon-right_16mm3_1bmod_247:not(#\9) {
   transform: rotate(-90deg);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_expand-icon-right_16mm3_1hsux_245:not(#\9):dir(rtl) {
+.awsui_expand-icon-right_16mm3_1bmod_247:not(#\9):dir(rtl) {
   transform: rotate(90deg);
 }
-.awsui_items-list-container_16mm3_1hsux_253:not(#\9) {
+.awsui_items-list-container_16mm3_1bmod_255:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   margin-block-start: -1px;
@@ -259,6 +261,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow-y: auto;
 }
-.awsui_in-dropdown_16mm3_1hsux_262:not(#\9) {
+.awsui_in-dropdown_16mm3_1bmod_264:not(#\9) {
   margin-block-end: -1px;
+}
+.awsui_icon-wrapper_16mm3_1bmod_268:not(#\9) {
+  margin-inline-end: var(--space-xxs-jnczic, 4px);
+}
+.awsui_header-content_16mm3_1bmod_272:not(#\9) {
+  display: flex;
+  align-items: center;
 }

package/lib/internal/template/button-dropdown/category-elements/styles.selectors.js CHANGED Viewed

@@ -2,20 +2,22 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "header": "awsui_header_16mm3_1hsux_145",
-  "disabled": "awsui_disabled_16mm3_1hsux_160",
-  "expandable-header": "awsui_expandable-header_16mm3_1hsux_164",
-  "rolled-down": "awsui_rolled-down_16mm3_1hsux_175",
-  "highlighted": "awsui_highlighted_16mm3_1hsux_178",
-  "is-focused": "awsui_is-focused_16mm3_1hsux_196",
-  "visual-refresh": "awsui_visual-refresh_16mm3_1hsux_199",
-  "category": "awsui_category_16mm3_1hsux_203",
-  "expandable": "awsui_expandable_16mm3_1hsux_164",
-  "variant-navigation": "awsui_variant-navigation_16mm3_1hsux_218",
-  "expand-icon": "awsui_expand-icon_16mm3_1hsux_225",
-  "expand-icon-up": "awsui_expand-icon-up_16mm3_1hsux_242",
-  "expand-icon-right": "awsui_expand-icon-right_16mm3_1hsux_245",
-  "items-list-container": "awsui_items-list-container_16mm3_1hsux_253",
-  "in-dropdown": "awsui_in-dropdown_16mm3_1hsux_262"
+  "header": "awsui_header_16mm3_1bmod_145",
+  "disabled": "awsui_disabled_16mm3_1bmod_161",
+  "expandable-header": "awsui_expandable-header_16mm3_1bmod_165",
+  "rolled-down": "awsui_rolled-down_16mm3_1bmod_176",
+  "highlighted": "awsui_highlighted_16mm3_1bmod_179",
+  "is-focused": "awsui_is-focused_16mm3_1bmod_197",
+  "visual-refresh": "awsui_visual-refresh_16mm3_1bmod_200",
+  "category": "awsui_category_16mm3_1bmod_204",
+  "expandable": "awsui_expandable_16mm3_1bmod_165",
+  "variant-navigation": "awsui_variant-navigation_16mm3_1bmod_219",
+  "expand-icon": "awsui_expand-icon_16mm3_1bmod_226",
+  "expand-icon-up": "awsui_expand-icon-up_16mm3_1bmod_244",
+  "expand-icon-right": "awsui_expand-icon-right_16mm3_1bmod_247",
+  "items-list-container": "awsui_items-list-container_16mm3_1bmod_255",
+  "in-dropdown": "awsui_in-dropdown_16mm3_1bmod_264",
+  "icon-wrapper": "awsui_icon-wrapper_16mm3_1bmod_268",
+  "header-content": "awsui_header-content_16mm3_1bmod_272"
 };

package/lib/internal/template/button-dropdown/item-element/styles.css.js CHANGED Viewed

@@ -1,21 +1,21 @@
     import './styles.scoped.css';
     export default {
-  "item-element": "awsui_item-element_93a1u_2mxwp_145",
-  "disabled": "awsui_disabled_93a1u_2mxwp_157",
-  "show-divider": "awsui_show-divider_93a1u_2mxwp_164",
-  "highlighted": "awsui_highlighted_93a1u_2mxwp_167",
-  "is-focused": "awsui_is-focused_93a1u_2mxwp_182",
-  "visual-refresh": "awsui_visual-refresh_93a1u_2mxwp_185",
-  "menu-item": "awsui_menu-item_93a1u_2mxwp_189",
-  "link-style": "awsui_link-style_93a1u_2mxwp_201",
-  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_2mxwp_237",
-  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_2mxwp_245",
-  "has-category-header": "awsui_has-category-header_93a1u_2mxwp_251",
-  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_2mxwp_251",
-  "has-checkmark": "awsui_has-checkmark_93a1u_2mxwp_251",
-  "icon": "awsui_icon_93a1u_2mxwp_255",
-  "checkmark": "awsui_checkmark_93a1u_2mxwp_259",
-  "external-icon": "awsui_external-icon_93a1u_2mxwp_266"
+  "item-element": "awsui_item-element_93a1u_9solc_145",
+  "disabled": "awsui_disabled_93a1u_9solc_157",
+  "show-divider": "awsui_show-divider_93a1u_9solc_164",
+  "highlighted": "awsui_highlighted_93a1u_9solc_167",
+  "is-focused": "awsui_is-focused_93a1u_9solc_182",
+  "visual-refresh": "awsui_visual-refresh_93a1u_9solc_185",
+  "menu-item": "awsui_menu-item_93a1u_9solc_189",
+  "link-style": "awsui_link-style_93a1u_9solc_201",
+  "current-breadcrumb": "awsui_current-breadcrumb_93a1u_9solc_237",
+  "link-style-highlighted": "awsui_link-style-highlighted_93a1u_9solc_245",
+  "has-category-header": "awsui_has-category-header_93a1u_9solc_251",
+  "item-tooltip-wrapper": "awsui_item-tooltip-wrapper_93a1u_9solc_251",
+  "has-checkmark": "awsui_has-checkmark_93a1u_9solc_251",
+  "icon": "awsui_icon_93a1u_9solc_255",
+  "checkmark": "awsui_checkmark_93a1u_9solc_259",
+  "external-icon": "awsui_external-icon_93a1u_9solc_266"
 };

package/lib/internal/template/button-dropdown/item-element/styles.scoped.css CHANGED Viewed

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_item-element_93a1u_2mxwp_145:not(#\9) {
+.awsui_item-element_93a1u_9solc_145:not(#\9) {
   position: relative;
   z-index: 1;
   border-block: var(--border-item-width-acvlhx, 1px) solid transparent;
@@ -154,17 +154,17 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: calc(-1 * var(--border-width-dropdown-qic2p4, 1px));
   cursor: pointer;
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_disabled_93a1u_2mxwp_157:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_disabled_93a1u_9solc_157:not(#\9) {
   cursor: default;
   color: var(--color-text-dropdown-item-disabled-oysy8n, #aab7b8);
 }
-.awsui_item-element_93a1u_2mxwp_145:not(#\9):first-child {
+.awsui_item-element_93a1u_9solc_145:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_show-divider_93a1u_2mxwp_164:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_show-divider_93a1u_9solc_164:not(#\9) {
   border-block-end: var(--border-item-width-acvlhx, 1px) solid var(--color-border-dropdown-group-dg9zg5, #eaeded);
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_highlighted_93a1u_2mxwp_167:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_highlighted_93a1u_9solc_167:not(#\9) {
   color: var(--color-text-dropdown-item-highlighted-bchk26, #16191f);
   z-index: 2;
   background-color: var(--color-background-dropdown-item-hover-353r6f, #f2f3f3);
@@ -174,19 +174,19 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-start-radius: var(--border-radius-item-xggxkd, 0px);
   border-end-end-radius: var(--border-radius-item-xggxkd, 0px);
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_highlighted_93a1u_2mxwp_167.awsui_disabled_93a1u_2mxwp_157:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_highlighted_93a1u_9solc_167.awsui_disabled_93a1u_9solc_157:not(#\9) {
   color: var(--color-text-dropdown-item-dimmed-0xf8v3, #aab7b8);
   border-color: var(--color-border-dropdown-item-dimmed-hover-twsd8z, #879596);
   background-color: var(--color-background-dropdown-item-dimmed-2hwvu9, transparent);
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_highlighted_93a1u_2mxwp_167.awsui_is-focused_93a1u_2mxwp_182:not(#\9) {
+.awsui_item-element_93a1u_9solc_145.awsui_highlighted_93a1u_9solc_167.awsui_is-focused_93a1u_9solc_182:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-xty1zx, #0073bb);
 }
-.awsui_item-element_93a1u_2mxwp_145.awsui_highlighted_93a1u_2mxwp_167.awsui_is-focused_93a1u_2mxwp_182:not(#\9):not(.awsui_visual-refresh_93a1u_2mxwp_185) {
+.awsui_item-element_93a1u_9solc_145.awsui_highlighted_93a1u_9solc_167.awsui_is-focused_93a1u_9solc_182:not(#\9):not(.awsui_visual-refresh_93a1u_9solc_185) {
   box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_menu-item_93a1u_2mxwp_189:not(#\9) {
+.awsui_menu-item_93a1u_9solc_189:not(#\9) {
   min-inline-size: 0;
   word-break: break-word;
   display: flex;
@@ -198,11 +198,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable selector-max-type */
   /* stylelint-enable selector-max-type */
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9) {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9) {
   padding-block-end: calc(var(--space-xxs-jnczic, 4px) + var(--space-xxxs-3w1kr2, 2px));
   text-underline-offset: 0.25em;
   text-decoration-thickness: 1px;
-  color: var(--color-text-link-default-x6cnv5, #0073bb);
+  color: var(--awsui-style-color-default-kcc2gu, var(--color-text-link-default-x6cnv5, #0073bb));
   font-weight: inherit;
   letter-spacing: normal;
   text-decoration-line: underline;
@@ -213,30 +213,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   transition-duration: var(--motion-duration-refresh-only-medium-h3wrr6, 0ms);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9) {
+  .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9) {
+.awsui-motion-disabled .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9), .awsui-mode-entering .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):hover {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):hover {
   cursor: pointer;
-  color: var(--color-text-link-hover-tk5gkv, #0a4a74);
+  color: var(--awsui-style-color-hover-kcc2gu, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):focus {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):focus {
   outline: none;
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):active {
-  color: var(--color-text-link-hover-tk5gkv, #0a4a74);
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):active {
+  color: var(--awsui-style-color-active-kcc2gu, var(--color-text-link-hover-tk5gkv, #0a4a74));
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):active, .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):focus, .awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201:not(#\9):hover {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):active, .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):focus, .awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201:not(#\9):hover {
   text-decoration-line: underline;
   text-decoration-color: currentColor;
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201.awsui_current-breadcrumb_93a1u_2mxwp_237:not(#\9) {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201.awsui_current-breadcrumb_93a1u_9solc_237:not(#\9) {
   font-weight: var(--font-weight-button-hh0ago, 700);
   -webkit-font-smoothing: var(--font-smoothing-webkit-px4az4, auto);
   -moz-osx-font-smoothing: var(--font-smoothing-moz-osx-ev3sgf, auto);
@@ -244,27 +244,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   font-weight: 700;
   text-decoration: none;
 }
-.awsui_menu-item_93a1u_2mxwp_189.awsui_link-style_93a1u_2mxwp_201.awsui_link-style-highlighted_93a1u_2mxwp_245:not(#\9) {
+.awsui_menu-item_93a1u_9solc_189.awsui_link-style_93a1u_9solc_201.awsui_link-style-highlighted_93a1u_9solc_245:not(#\9) {
   color: var(--color-text-link-hover-tk5gkv, #0a4a74);
 }
-.awsui_menu-item_93a1u_2mxwp_189:not(#\9):focus {
+.awsui_menu-item_93a1u_9solc_189:not(#\9):focus {
   outline: none;
 }
-.awsui_has-category-header_93a1u_2mxwp_251 > .awsui_menu-item_93a1u_2mxwp_189:not(#\9), .awsui_has-category-header_93a1u_2mxwp_251 > .awsui_item-tooltip-wrapper_93a1u_2mxwp_251 > .awsui_menu-item_93a1u_2mxwp_189:not(#\9), .awsui_has-category-header_93a1u_2mxwp_251:not(#\9):not(.awsui_has-checkmark_93a1u_2mxwp_251) > span > .awsui_menu-item_93a1u_2mxwp_189 {
+.awsui_has-category-header_93a1u_9solc_251 > .awsui_menu-item_93a1u_9solc_189:not(#\9), .awsui_has-category-header_93a1u_9solc_251 > .awsui_item-tooltip-wrapper_93a1u_9solc_251 > .awsui_menu-item_93a1u_9solc_189:not(#\9), .awsui_has-category-header_93a1u_9solc_251:not(#\9):not(.awsui_has-checkmark_93a1u_9solc_251) > span > .awsui_menu-item_93a1u_9solc_189 {
   padding-inline-start: calc(var(--space-xs-kw7k3v, 8px) + var(--space-l-3cws6j, 20px));
 }
-.awsui_icon_93a1u_2mxwp_255:not(#\9) {
+.awsui_icon_93a1u_9solc_255:not(#\9) {
   padding-inline-end: var(--space-xxs-jnczic, 4px);
   flex-shrink: 0;
 }
-.awsui_icon_93a1u_2mxwp_255.awsui_checkmark_93a1u_2mxwp_259:not(#\9) {
+.awsui_icon_93a1u_9solc_255.awsui_checkmark_93a1u_9solc_259:not(#\9) {
   color: var(--color-text-status-info-xt2ka7, #0073bb);
 }
-.awsui_icon_93a1u_2mxwp_255.awsui_disabled_93a1u_2mxwp_157:not(#\9) {
+.awsui_icon_93a1u_9solc_255.awsui_disabled_93a1u_9solc_157:not(#\9) {
   color: var(--color-text-interactive-disabled-xwt2jl, #aab7b8);
 }
-.awsui_external-icon_93a1u_2mxwp_266:not(#\9) {
+.awsui_external-icon_93a1u_9solc_266:not(#\9) {
   margin-inline-start: var(--space-xxs-jnczic, 4px);
 }