npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1191 → 3.0.1192 - Mend

@cloudscape-design/components-themeable 3.0.1191 → 3.0.1192

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 (43) hide show

package/lib/internal/manifest.json CHANGED Viewed

@@ -1,3 +1,3 @@
 {
-  "commit": "e7feb35d17179fd3a6547250ef3f22fabc290944"
+  "commit": "6a5486b6efcba2bba7a1cbf8883e07c954f3c299"
 }

package/lib/internal/scss/button-dropdown/category-elements/styles.scss CHANGED Viewed

@@ -30,6 +30,13 @@
     cursor: default;
   }
+  &.no-content-styling {
+    padding-block: calc((#{awsui.$border-item-width} - #{awsui.$border-divider-list-width}));
+    padding-inline: awsui.$border-item-width;
+    font-weight: normal;
+    color: inherit;
+  }
   &.expandable-header {
     border-block-start-color: awsui.$color-border-dropdown-group;
     border-block-end-color: awsui.$color-border-dropdown-group;
@@ -58,6 +65,12 @@
       border-end-end-radius: awsui.$border-radius-item;
       z-index: 2;
+      &.no-content-styling {
+        padding-block: 0;
+        padding-inline: 0;
+        color: inherit;
+      }
       &.disabled {
         background-color: awsui.$color-background-dropdown-item-dimmed;
         border-color: awsui.$color-border-dropdown-item-dimmed-hover;
@@ -78,6 +91,7 @@
   margin-block-start: calc(-1 * #{awsui.$border-divider-list-width});
   padding-block: 0;
   padding-inline: 0;
   &:first-child {
     margin-block-start: 0;
   }

package/lib/internal/scss/button-dropdown/item-element/styles.scss CHANGED Viewed

@@ -18,6 +18,12 @@
   margin-block-start: calc(-1 * #{awsui.$border-width-dropdown});
   cursor: pointer;
+  &.no-content-styling {
+    padding-block: 0;
+    padding-inline: 0;
+    color: awsui.$color-text-dropdown-item-default;
+  }
   &.disabled {
     cursor: default;
     color: awsui.$color-text-dropdown-item-disabled;
@@ -63,6 +69,12 @@
   color: inherit;
   text-decoration: none;
+  &.no-content-styling {
+    padding-block: 0;
+    padding-inline: 0;
+    color: awsui.$color-text-dropdown-item-default;
+  }
   &.link-style {
     padding-block-end: calc(#{styles.$option-padding-vertical} + #{awsui.$space-xxxs});
     @include styles.link-inline('body-m');
@@ -87,6 +99,9 @@
   .has-category-header > .item-tooltip-wrapper > &,
   .has-category-header:not(.has-checkmark) > span > & {
     padding-inline-start: calc(#{awsui.$space-xs} + #{awsui.$space-l});
+    &.no-content-styling {
+      padding-inline-start: 0;
+    }
   }
   /* stylelint-enable selector-max-type */
 }

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss CHANGED Viewed

@@ -1,6 +1,6 @@
     // Build environment
-    $awsui-commit-hash: "e7feb35d";
+    $awsui-commit-hash: "6a5486b6";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-4hh3rt;
 $minContentWidth: --awsui-min-content-width-4hh3rt;

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

@@ -1,4 +1,4 @@
 import { CategoryProps } from '../interfaces';
-declare const CategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, }: CategoryProps) => JSX.Element;
+declare const CategoryElement: ({ item, index, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, renderItem, }: 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 CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAMA,OAAO,~~EAAE~~,aAAa,EAAE,MAAM,eAAe,CAAC;~~AAK9C~~,QAAA,MAAM,eAAe,GAAI,~~kKAatB~~,aAAa,~~gBAyCf~~,CAAC;AAEF,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAuB,aAAa,EAAE,MAAM,eAAe,CAAC;AAKnE,QAAA,MAAM,eAAe,GAAI,qLAetB,aAAa,gBAiEf,CAAC;AAEF,eAAe,eAAe,CAAC"}

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

@@ -5,16 +5,30 @@ 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, }) => {
+const CategoryElement = ({ item, index, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, renderItem, }) => {
+    var _a;
+    const highlighted = isHighlighted(item);
+    const groupProps = {
+        type: 'group',
+        index: index !== null && index !== void 0 ? index : 0,
+        option: item,
+        disabled: !!disabled,
+        highlighted: !!highlighted,
+        expanded: true,
+        expandDirection: 'vertical',
+    };
+    const renderResult = (_a = renderItem === null || renderItem === void 0 ? void 0 : renderItem({ item: groupProps })) !== null && _a !== void 0 ? _a : null;
     // 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" },
-            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 })))));
+        item.text && (React.createElement("p", { className: clsx(styles.header, {
+                [styles.disabled]: disabled,
+                [styles['no-content-styling']]: !!renderResult,
+            }), "aria-hidden": "true" }, renderResult ? (renderResult) : (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, renderItem: renderItem, parentProps: groupProps })))));
 };
 export default CategoryElement;
 //# sourceMappingURL=category-element.js.map

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;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"]}
1	+ {"version":3,"file":"category-element.js","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/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 from 'react';\nimport clsx from 'clsx';\n\nimport InternalIcon from '../../icon/internal';\nimport { ButtonDropdownProps, CategoryProps } from '../interfaces';\nimport ItemsList from '../items-list';\n\nimport styles from './styles.css.js';\n\nconst CategoryElement = ({\n item,\n index,\n onItemActivate,\n onGroupToggle,\n targetItem,\n isHighlighted,\n isKeyboardHighlight,\n isExpanded,\n lastInDropdown,\n highlightItem,\n disabled,\n variant,\n position,\n renderItem,\n}: CategoryProps) => {\n const highlighted = isHighlighted(item);\n const groupProps: ButtonDropdownProps.GroupRenderItem = {\n type: 'group',\n index: index ?? 0,\n option: item as ButtonDropdownProps.ItemGroup,\n disabled: !!disabled,\n highlighted: !!highlighted,\n expanded: true,\n expandDirection: 'vertical',\n };\n const renderResult = renderItem?.({ item: groupProps }) ?? null;\n\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\n className={clsx(styles.header, {\n [styles.disabled]: disabled,\n [styles['no-content-styling']]: !!renderResult,\n })}\n aria-hidden=\"true\"\n >\n {renderResult ? (\n renderResult\n ) : (\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 )}\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 renderItem={renderItem}\n parentProps={groupProps}\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 CHANGED Viewed

@@ -1,4 +1,4 @@
 import { CategoryProps } from '../interfaces';
-declare const ExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, expandToViewport, variant, position, }: CategoryProps) => JSX.Element;
+declare const ExpandableCategoryElement: ({ index, item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, expandToViewport, variant, position, renderItem, }: 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 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,GAAI,~~oLAchC~~,aAAa,~~gBAoIf~~,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,EAAuB,aAAa,EAAE,MAAM,eAAe,CAAC;AAOnE,QAAA,MAAM,yBAAyB,GAAI,uMAgBhC,aAAa,gBAyJf,CAAC;AAEF,eAAe,yBAAyB,CAAC"}

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

@@ -11,7 +11,8 @@ 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, position, }) => {
+const ExpandableCategoryElement = ({ index, item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, expandToViewport, variant, position, renderItem, }) => {
+    var _a;
     const highlighted = isHighlighted(item);
     const expanded = isExpanded(item);
     const isKeyboardHighlighted = isKeyboardHighlight(item);
@@ -36,9 +37,20 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
     const isVisualRefresh = useVisualRefresh();
     const isDisabledWithReason = !!item.disabledReason && item.disabled;
     const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);
+    const groupProps = {
+        index: index !== null && index !== void 0 ? index : 0,
+        type: 'group',
+        option: item,
+        disabled: !!disabled,
+        highlighted: !!highlighted,
+        expanded: expanded,
+        expandDirection: 'horizontal',
+    };
+    const renderResult = (_a = renderItem === null || renderItem === void 0 ? void 0 : renderItem({ item: groupProps })) !== null && _a !== void 0 ? _a : null;
     const trigger = item.text && (React.createElement("span", { className: clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {
             [styles.disabled]: disabled,
             [styles.highlighted]: highlighted,
+            [styles['no-content-styling']]: !!renderResult,
             [styles['is-focused']]: isKeyboardHighlighted,
             [styles['visual-refresh']]: isVisualRefresh,
         }),
@@ -54,12 +66,12 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
                     label: { root: 'self' },
                     id: item.id || '',
                 },
-            }) },
+            }) }, renderResult ? (renderResult) : (React.createElement(React.Fragment, null,
         (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" }))));
+            React.createElement(InternalIcon, { name: "caret-down-filled" }))))));
     let content;
     // If the category element is disabled, we do not render a dropdown.
     // Screenreaders are confused by additional sections
@@ -73,7 +85,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, position: position })))));
+            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, renderItem: renderItem, parentProps: groupProps })))));
     }
     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 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":"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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"]}
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 { ButtonDropdownProps, 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 index,\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 renderItem,\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\n const groupProps: ButtonDropdownProps.GroupRenderItem = {\n index: index ?? 0,\n type: 'group',\n option: item as ButtonDropdownProps.ItemGroup,\n disabled: !!disabled,\n highlighted: !!highlighted,\n expanded: expanded,\n expandDirection: 'horizontal',\n };\n const renderResult = renderItem?.({ item: groupProps }) ?? null;\n\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['no-content-styling']]: !!renderResult,\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 {renderResult ? (\n renderResult\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 </>\n )}\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 renderItem={renderItem}\n parentProps={groupProps}\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 CHANGED Viewed

@@ -1,4 +1,4 @@
 import { CategoryProps } from '../interfaces';
-declare const MobileExpandableCategoryElement: ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, }: CategoryProps) => JSX.Element;
+declare const MobileExpandableCategoryElement: ({ index, item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, renderItem, }: 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 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,GAAI,~~kKAatC~~,aAAa,~~gBA2Hf~~,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,EAAuB,aAAa,EAAE,MAAM,eAAe,CAAC;AAQnE,QAAA,MAAM,+BAA+B,GAAI,qLAetC,aAAa,gBAgJf,CAAC;AAEF,eAAe,+BAA+B,CAAC"}

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

@@ -10,7 +10,8 @@ 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, position, }) => {
+const MobileExpandableCategoryElement = ({ index, item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, renderItem, }) => {
+    var _a;
     const highlighted = isHighlighted(item);
     const expanded = isExpanded(item);
     const isKeyboardHighlighted = isKeyboardHighlight(item);
@@ -31,9 +32,20 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
     };
     const isDisabledWithReason = !!item.disabledReason && item.disabled;
     const { targetProps, descriptionEl } = useHiddenDescription(item.disabledReason);
+    const groupProps = {
+        index: index !== null && index !== void 0 ? index : 0,
+        type: 'group',
+        option: item,
+        disabled: !!disabled,
+        highlighted: !!highlighted,
+        expanded: expanded,
+        expandDirection: 'vertical',
+    };
+    const renderResult = (_a = renderItem === null || renderItem === void 0 ? void 0 : renderItem({ item: groupProps })) !== null && _a !== void 0 ? _a : null;
     const trigger = item.text && (React.createElement("span", { className: clsx(styles.header, styles['expandable-header'], styles[`variant-${variant}`], {
             [styles.highlighted]: highlighted,
             [styles['rolled-down']]: expanded,
+            [styles['no-content-styling']]: !!renderResult,
             [styles.disabled]: disabled,
             [styles['is-focused']]: isKeyboardHighlighted,
         }),
@@ -50,14 +62,14 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
                     id: item.id || '',
                     expanded: `${!expanded}`,
                 },
-            }) },
+            }) }, renderResult ? (renderResult) : (React.createElement(React.Fragment, null,
         (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,
             }) },
-            React.createElement(InternalIcon, { name: "caret-down-filled" }))));
+            React.createElement(InternalIcon, { name: "caret-down-filled" }))))));
     let content;
     if (isDisabledWithReason) {
         content = (React.createElement(React.Fragment, null,
@@ -69,7 +81,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, position: position })))));
+            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, renderItem: renderItem, parentProps: groupProps })))));
     }
     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 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":"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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"]}
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 { ButtonDropdownProps, 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 index,\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 renderItem,\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\n const groupProps: ButtonDropdownProps.GroupRenderItem = {\n index: index ?? 0,\n type: 'group',\n option: item as ButtonDropdownProps.ItemGroup,\n disabled: !!disabled,\n highlighted: !!highlighted,\n expanded: expanded,\n expandDirection: 'vertical',\n };\n const renderResult = renderItem?.({ item: groupProps }) ?? null;\n\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['no-content-styling']]: !!renderResult,\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 {renderResult ? (\n renderResult\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 </>\n )}\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 renderItem={renderItem}\n parentProps={groupProps}\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,22 +1,23 @@
     import './styles.scoped.css';
     export default {
-  "header": "awsui_header_16mm3_1u4y0_145",
-  "disabled": "awsui_disabled_16mm3_1u4y0_161",
-  "expandable-header": "awsui_expandable-header_16mm3_1u4y0_165",
-  "rolled-down": "awsui_rolled-down_16mm3_1u4y0_176",
-  "highlighted": "awsui_highlighted_16mm3_1u4y0_179",
-  "is-focused": "awsui_is-focused_16mm3_1u4y0_197",
-  "visual-refresh": "awsui_visual-refresh_16mm3_1u4y0_200",
-  "category": "awsui_category_16mm3_1u4y0_204",
-  "expandable": "awsui_expandable_16mm3_1u4y0_165",
-  "variant-navigation": "awsui_variant-navigation_16mm3_1u4y0_219",
-  "expand-icon": "awsui_expand-icon_16mm3_1u4y0_226",
-  "expand-icon-up": "awsui_expand-icon-up_16mm3_1u4y0_244",
-  "expand-icon-right": "awsui_expand-icon-right_16mm3_1u4y0_247",
-  "items-list-container": "awsui_items-list-container_16mm3_1u4y0_255",
-  "in-dropdown": "awsui_in-dropdown_16mm3_1u4y0_264",
-  "icon-wrapper": "awsui_icon-wrapper_16mm3_1u4y0_268",
-  "header-content": "awsui_header-content_16mm3_1u4y0_272"
+  "header": "awsui_header_16mm3_1qp0c_145",
+  "disabled": "awsui_disabled_16mm3_1qp0c_161",
+  "no-content-styling": "awsui_no-content-styling_16mm3_1qp0c_165",
+  "expandable-header": "awsui_expandable-header_16mm3_1qp0c_171",
+  "rolled-down": "awsui_rolled-down_16mm3_1qp0c_182",
+  "highlighted": "awsui_highlighted_16mm3_1qp0c_185",
+  "is-focused": "awsui_is-focused_16mm3_1qp0c_208",
+  "visual-refresh": "awsui_visual-refresh_16mm3_1qp0c_211",
+  "category": "awsui_category_16mm3_1qp0c_215",
+  "expandable": "awsui_expandable_16mm3_1qp0c_171",
+  "variant-navigation": "awsui_variant-navigation_16mm3_1qp0c_230",
+  "expand-icon": "awsui_expand-icon_16mm3_1qp0c_237",
+  "expand-icon-up": "awsui_expand-icon-up_16mm3_1qp0c_255",
+  "expand-icon-right": "awsui_expand-icon-right_16mm3_1qp0c_258",
+  "items-list-container": "awsui_items-list-container_16mm3_1qp0c_266",
+  "in-dropdown": "awsui_in-dropdown_16mm3_1qp0c_275",
+  "icon-wrapper": "awsui_icon-wrapper_16mm3_1qp0c_279",
+  "header-content": "awsui_header-content_16mm3_1qp0c_283"
 };

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_1u4y0_145:not(#\9) {
+.awsui_header_16mm3_1qp0c_145:not(#\9) {
   position: relative;
   margin-block: 0;
   margin-inline: 0;
@@ -158,25 +158,31 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: calc(var(--space-button-horizontal-v8ywmo, 20px) + var(--border-item-width-acvlhx, 1px));
   z-index: 1;
 }
-.awsui_header_16mm3_1u4y0_145.awsui_disabled_16mm3_1u4y0_161:not(#\9) {
+.awsui_header_16mm3_1qp0c_145.awsui_disabled_16mm3_1qp0c_161:not(#\9) {
   color: var(--color-text-dropdown-item-disabled-oysy8n, #aab7b8);
   cursor: default;
 }
-.awsui_header_16mm3_1u4y0_145.awsui_expandable-header_16mm3_1u4y0_165:not(#\9) {
+.awsui_header_16mm3_1qp0c_145.awsui_no-content-styling_16mm3_1qp0c_165:not(#\9) {
+  padding-block: calc(var(--border-item-width-acvlhx, 1px) - var(--border-divider-list-width-8ggz94, 1px));
+  padding-inline: var(--border-item-width-acvlhx, 1px);
+  font-weight: normal;
+  color: inherit;
+}
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171: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_1u4y0_145.awsui_expandable-header_16mm3_1u4y0_165.awsui_disabled_16mm3_1u4y0_161:not(#\9) {
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171.awsui_disabled_16mm3_1qp0c_161:not(#\9) {
   cursor: default;
 }
-.awsui_header_16mm3_1u4y0_145.awsui_expandable-header_16mm3_1u4y0_165:not(#\9):focus {
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171:not(#\9):focus {
   outline: none;
 }
-.awsui_header_16mm3_1u4y0_145.awsui_expandable-header_16mm3_1u4y0_165.awsui_rolled-down_16mm3_1u4y0_176:not(#\9) {
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171.awsui_rolled-down_16mm3_1qp0c_182:not(#\9) {
   border-block-end-color: transparent;
 }
-.awsui_header_16mm3_1u4y0_145.awsui_expandable-header_16mm3_1u4y0_165.awsui_highlighted_16mm3_1u4y0_179:not(#\9) {
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171.awsui_highlighted_16mm3_1qp0c_185: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);
@@ -189,41 +195,46 @@ 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_1u4y0_145.awsui_expandable-header_16mm3_1u4y0_165.awsui_highlighted_16mm3_1u4y0_179.awsui_disabled_16mm3_1u4y0_161:not(#\9) {
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171.awsui_highlighted_16mm3_1qp0c_185.awsui_no-content-styling_16mm3_1qp0c_165:not(#\9) {
+  padding-block: 0;
+  padding-inline: 0;
+  color: inherit;
+}
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171.awsui_highlighted_16mm3_1qp0c_185.awsui_disabled_16mm3_1qp0c_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_1u4y0_145.awsui_expandable-header_16mm3_1u4y0_165.awsui_highlighted_16mm3_1u4y0_179.awsui_is-focused_16mm3_1u4y0_197:not(#\9) {
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171.awsui_highlighted_16mm3_1qp0c_185.awsui_is-focused_16mm3_1qp0c_208:not(#\9) {
   border-color: var(--color-border-dropdown-item-focused-xty1zx, #0073bb);
 }
-.awsui_header_16mm3_1u4y0_145.awsui_expandable-header_16mm3_1u4y0_165.awsui_highlighted_16mm3_1u4y0_179.awsui_is-focused_16mm3_1u4y0_197:not(#\9):not(.awsui_visual-refresh_16mm3_1u4y0_200) {
+.awsui_header_16mm3_1qp0c_145.awsui_expandable-header_16mm3_1qp0c_171.awsui_highlighted_16mm3_1qp0c_185.awsui_is-focused_16mm3_1qp0c_208:not(#\9):not(.awsui_visual-refresh_16mm3_1qp0c_211) {
   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_1u4y0_204:not(#\9) {
+.awsui_category_16mm3_1qp0c_215: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_1u4y0_204:not(#\9):first-child {
+.awsui_category_16mm3_1qp0c_215:not(#\9):first-child {
   margin-block-start: 0;
 }
-.awsui_category_16mm3_1u4y0_204.awsui_expandable_16mm3_1u4y0_165:not(#\9) {
+.awsui_category_16mm3_1qp0c_215.awsui_expandable_16mm3_1qp0c_171:not(#\9) {
   border-block-start: 0;
 }
-.awsui_category_16mm3_1u4y0_204:not(#\9):last-child {
+.awsui_category_16mm3_1qp0c_215:not(#\9):last-child {
   border-block-end: none;
 }
-.awsui_category_16mm3_1u4y0_204.awsui_variant-navigation_16mm3_1u4y0_219:not(#\9) {
+.awsui_category_16mm3_1qp0c_215.awsui_variant-navigation_16mm3_1qp0c_230:not(#\9) {
   padding-block-start: var(--space-xxs-jnczic, 4px);
 }
-.awsui_category_16mm3_1u4y0_204.awsui_variant-navigation_16mm3_1u4y0_219.awsui_expandable_16mm3_1u4y0_165:not(#\9) {
+.awsui_category_16mm3_1qp0c_215.awsui_variant-navigation_16mm3_1qp0c_230.awsui_expandable_16mm3_1qp0c_171:not(#\9) {
   padding-block-start: 0;
 }
-.awsui_expand-icon_16mm3_1u4y0_226:not(#\9) {
+.awsui_expand-icon_16mm3_1qp0c_237:not(#\9) {
   position: relative;
   inset-inline-end: calc(-1 * var(--space-s-4a5hs8, 12px));
   inline-size: var(--space-m-n2lypl, 16px);
@@ -232,27 +243,27 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   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_1u4y0_226:not(#\9) {
+  .awsui_expand-icon_16mm3_1qp0c_237:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_expand-icon_16mm3_1u4y0_226:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_1u4y0_226:not(#\9) {
+.awsui-motion-disabled .awsui_expand-icon_16mm3_1qp0c_237:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_1qp0c_237:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_expand-icon-up_16mm3_1u4y0_244:not(#\9) {
+.awsui_expand-icon-up_16mm3_1qp0c_255:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_expand-icon-right_16mm3_1u4y0_247:not(#\9) {
+.awsui_expand-icon-right_16mm3_1qp0c_258:not(#\9) {
   transform: rotate(-90deg);
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_expand-icon-right_16mm3_1u4y0_247:not(#\9):dir(rtl) {
+.awsui_expand-icon-right_16mm3_1qp0c_258:not(#\9):dir(rtl) {
   transform: rotate(90deg);
 }
-.awsui_items-list-container_16mm3_1u4y0_255:not(#\9) {
+.awsui_items-list-container_16mm3_1qp0c_266:not(#\9) {
   padding-block: 0;
   padding-inline: 0;
   margin-block-start: -1px;
@@ -261,15 +272,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   overflow-y: auto;
 }
-.awsui_in-dropdown_16mm3_1u4y0_264:not(#\9) {
+.awsui_in-dropdown_16mm3_1qp0c_275:not(#\9) {
   margin-block-end: -1px;
 }
-.awsui_icon-wrapper_16mm3_1u4y0_268:not(#\9) {
+.awsui_icon-wrapper_16mm3_1qp0c_279:not(#\9) {
   margin-inline-end: var(--space-xxs-jnczic, 4px);
 }
-.awsui_header-content_16mm3_1u4y0_272:not(#\9) {
+.awsui_header-content_16mm3_1qp0c_283:not(#\9) {
   display: flex;
   align-items: center;
 }