@cloudscape-design/components 3.0.1049 → 3.0.1051

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 (19) hide show
  1. package/alert/interfaces.d.ts +8 -8
  2. package/alert/interfaces.js.map +1 -1
  3. package/button-dropdown/category-elements/category-element.d.ts.map +1 -1
  4. package/button-dropdown/category-elements/category-element.js +6 -1
  5. package/button-dropdown/category-elements/category-element.js.map +1 -1
  6. package/button-dropdown/category-elements/expandable-category-element.d.ts.map +1 -1
  7. package/button-dropdown/category-elements/expandable-category-element.js +2 -0
  8. package/button-dropdown/category-elements/expandable-category-element.js.map +1 -1
  9. package/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map +1 -1
  10. package/button-dropdown/category-elements/mobile-expandable-category-element.js +2 -0
  11. package/button-dropdown/category-elements/mobile-expandable-category-element.js.map +1 -1
  12. package/button-dropdown/category-elements/styles.css.js +17 -15
  13. package/button-dropdown/category-elements/styles.scoped.css +36 -25
  14. package/button-dropdown/category-elements/styles.selectors.js +17 -15
  15. package/internal/base-component/styles.scoped.css +1 -1
  16. package/internal/environment.js +2 -2
  17. package/internal/environment.json +2 -2
  18. package/internal/manifest.json +1 -1
  19. package/package.json +1 -1
package/alert/interfaces.d.ts CHANGED
@@ -121,18 +121,18 @@ export interface AlertProps extends BaseComponentProps {
121
121
  /**
122
122
  * Specifies an object of selectors and properties that are used to apply custom styles.
123
123
  *
124
- * - `root.background` - (string) (Optional) Background for alert.
125
- * - `root.borderColor` - (string) (Optional) Border color for alert.
124
+ * - `root.background` (string) - (Optional) Background for alert.
125
+ * - `root.borderColor` (string) - (Optional) Border color for alert.
126
126
  * - `root.borderRadius` (string) - (Optional) Alert border radius.
127
127
  * - `root.borderWidth` (string) - (Optional) Alert border width.
128
- * - `root.color` - (string) (Optional) Text color for alert.
129
- * - `root.focusRing.borderColor` - (string) (Optional) Alert focus ring border color.
128
+ * - `root.color` (string) - (Optional) Text color for alert.
129
+ * - `root.focusRing.borderColor` (string) - (Optional) Alert focus ring border color.
130
130
  * - `root.focusRing.borderRadius` (string) - (Optional) Alert button focus ring border radius.
131
131
  * - `root.focusRing.borderWidth` (string) - (Optional) Alert button focus ring border width.
132
- * - `dismissButton.color.active` - (string) (Optional) Color for dismiss button active state.
133
- * - `dismissButton.color.default` - (string) (Optional) Color for dismiss button default state.
134
- * - `dismissButton.color.hover` - (string) (Optional) Color for dismiss button hover state.
135
- * - `dismissButton.focusRing.borderColor` - (string) (Optional) Dismiss button focus ring border color.
132
+ * - `dismissButton.color.active` (string) - (Optional) Color for dismiss button active state.
133
+ * - `dismissButton.color.default` (string) - (Optional) Color for dismiss button default state.
134
+ * - `dismissButton.color.hover` (string) - (Optional) Color for dismiss button hover state.
135
+ * - `dismissButton.focusRing.borderColor` (string) - (Optional) Dismiss button focus ring border color.
136
136
  * - `dismissButton.focusRing.borderRadius` (string) - (Optional) Dismiss button focus ring border radius.
137
137
  * - `dismissButton.focusRing.borderWidth` (string) - (Optional) Dismiss button focus ring border width.
138
138
  * @awsuiSystem core
package/alert/interfaces.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n export type Type = 'success' | 'error' | 'warning' | 'info';\n\n export interface Ref {\n /**\n * Sets focus on the alert content.\n */\n focus(): void;\n }\n\n export interface I18nStrings {\n /*\n * Specifies the ARIA label for the alert icon for type `success`.\n * @property {string} [successIconAriaLabel] - optional\n */\n successIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `error`.\n * @property {string} [errorIconAriaLabel] - optional\n */\n errorIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `warning`.\n * @property {string} [warningIconAriaLabel] - optional\n */\n warningIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `info`.\n * @property {string} [infoIconAriaLabel] - optional\n */\n infoIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the dismiss button.\n * @property {string} [dismissAriaLabel] - optional\n */\n dismissAriaLabel?: string;\n }\n\n export interface AnalyticsMetadata {\n errorContext?: ErrorContext;\n }\n\n export interface Style {\n root?: {\n background?: string;\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n color?: string;\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n dismissButton?: {\n color?: {\n active?: string;\n default?: string;\n hover?: string;\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n }\n}\n\nexport interface AlertProps extends BaseComponentProps {\n /**\n * Specifies the type of message you want to display.\n */\n type?: AlertProps.Type;\n\n /**\n * Provides a text alternative for the icon.\n *\n * @deprecated Use the label properties inside `i18nStrings` instead.\n * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n */\n statusIconAriaLabel?: string;\n\n /**\n * Determines whether the alert is displayed.\n * @deprecated Use conditional rendering in your code instead of this prop.\n */\n visible?: boolean;\n /**\n * Adds a close button to the alert when set to `true`.\n * An `onDismiss` event is fired when a user clicks the button.\n */\n dismissible?: boolean;\n /**\n * Adds an aria-label to the dismiss button.\n * @i18n\n *\n * @deprecated Use `i18nStrings.dismissAriaLabel` instead.\n * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n */\n dismissAriaLabel?: string;\n /**\n * Primary text displayed in the element.\n */\n children?: React.ReactNode;\n /**\n * Heading text.\n */\n header?: React.ReactNode;\n /**\n * Displays an action button next to the message area when set.\n * An `onButtonClick` event is fired when the user clicks it.\n * @deprecated Replaced by `action`.\n */\n buttonText?: React.ReactNode;\n /**\n * Specifies an action for the alert message.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n */\n action?: React.ReactNode;\n /**\n * Fired when the user clicks the close icon that is displayed\n * when the `dismissible` property is set to `true`.\n */\n onDismiss?: NonCancelableEventHandler;\n /**\n * Fired when the user clicks the action button.\n * **Deprecated** Replaced by `action`.\n */\n onButtonClick?: NonCancelableEventHandler;\n /**\n * An object containing all the necessary localized strings required by the component.\n * @property {AlertProps.I18nStrings} [i18nStrings] - optional\n * @i18n\n */\n i18nStrings?: AlertProps.I18nStrings;\n /**\n * Specifies additional analytics-related metadata.\n * * `errorContext` - Identifies the error category and sub-category.\n * @analytics\n */\n analyticsMetadata?: AlertProps.AnalyticsMetadata;\n /**\n * Specifies an object of selectors and properties that are used to apply custom styles.\n *\n * - `root.background` - (string) (Optional) Background for alert.\n * - `root.borderColor` - (string) (Optional) Border color for alert.\n * - `root.borderRadius` (string) - (Optional) Alert border radius.\n * - `root.borderWidth` (string) - (Optional) Alert border width.\n * - `root.color` - (string) (Optional) Text color for alert.\n * - `root.focusRing.borderColor` - (string) (Optional) Alert focus ring border color.\n * - `root.focusRing.borderRadius` (string) - (Optional) Alert button focus ring border radius.\n * - `root.focusRing.borderWidth` (string) - (Optional) Alert button focus ring border width.\n * - `dismissButton.color.active` - (string) (Optional) Color for dismiss button active state.\n * - `dismissButton.color.default` - (string) (Optional) Color for dismiss button default state.\n * - `dismissButton.color.hover` - (string) (Optional) Color for dismiss button hover state.\n * - `dismissButton.focusRing.borderColor` - (string) (Optional) Dismiss button focus ring border color.\n * - `dismissButton.focusRing.borderRadius` (string) - (Optional) Dismiss button focus ring border radius.\n * - `dismissButton.focusRing.borderWidth` (string) - (Optional) Dismiss button focus ring border width.\n * @awsuiSystem core\n */\n style?: AlertProps.Style;\n}\n"]}
1
+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/alert/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { ErrorContext } from '../internal/analytics/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport namespace AlertProps {\n export type Type = 'success' | 'error' | 'warning' | 'info';\n\n export interface Ref {\n /**\n * Sets focus on the alert content.\n */\n focus(): void;\n }\n\n export interface I18nStrings {\n /*\n * Specifies the ARIA label for the alert icon for type `success`.\n * @property {string} [successIconAriaLabel] - optional\n */\n successIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `error`.\n * @property {string} [errorIconAriaLabel] - optional\n */\n errorIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `warning`.\n * @property {string} [warningIconAriaLabel] - optional\n */\n warningIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the alert icon for type `info`.\n * @property {string} [infoIconAriaLabel] - optional\n */\n infoIconAriaLabel?: string;\n /*\n * Specifies the ARIA label for the dismiss button.\n * @property {string} [dismissAriaLabel] - optional\n */\n dismissAriaLabel?: string;\n }\n\n export interface AnalyticsMetadata {\n errorContext?: ErrorContext;\n }\n\n export interface Style {\n root?: {\n background?: string;\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n color?: string;\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n dismissButton?: {\n color?: {\n active?: string;\n default?: string;\n hover?: string;\n };\n focusRing?: {\n borderColor?: string;\n borderRadius?: string;\n borderWidth?: string;\n };\n };\n }\n}\n\nexport interface AlertProps extends BaseComponentProps {\n /**\n * Specifies the type of message you want to display.\n */\n type?: AlertProps.Type;\n\n /**\n * Provides a text alternative for the icon.\n *\n * @deprecated Use the label properties inside `i18nStrings` instead.\n * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n */\n statusIconAriaLabel?: string;\n\n /**\n * Determines whether the alert is displayed.\n * @deprecated Use conditional rendering in your code instead of this prop.\n */\n visible?: boolean;\n /**\n * Adds a close button to the alert when set to `true`.\n * An `onDismiss` event is fired when a user clicks the button.\n */\n dismissible?: boolean;\n /**\n * Adds an aria-label to the dismiss button.\n * @i18n\n *\n * @deprecated Use `i18nStrings.dismissAriaLabel` instead.\n * If the label is assigned via the `i18nStrings` property, this label will be ignored.\n */\n dismissAriaLabel?: string;\n /**\n * Primary text displayed in the element.\n */\n children?: React.ReactNode;\n /**\n * Heading text.\n */\n header?: React.ReactNode;\n /**\n * Displays an action button next to the message area when set.\n * An `onButtonClick` event is fired when the user clicks it.\n * @deprecated Replaced by `action`.\n */\n buttonText?: React.ReactNode;\n /**\n * Specifies an action for the alert message.\n * Although it is technically possible to insert any content, our UX guidelines only allow you to add a button.\n */\n action?: React.ReactNode;\n /**\n * Fired when the user clicks the close icon that is displayed\n * when the `dismissible` property is set to `true`.\n */\n onDismiss?: NonCancelableEventHandler;\n /**\n * Fired when the user clicks the action button.\n * **Deprecated** Replaced by `action`.\n */\n onButtonClick?: NonCancelableEventHandler;\n /**\n * An object containing all the necessary localized strings required by the component.\n * @property {AlertProps.I18nStrings} [i18nStrings] - optional\n * @i18n\n */\n i18nStrings?: AlertProps.I18nStrings;\n /**\n * Specifies additional analytics-related metadata.\n * * `errorContext` - Identifies the error category and sub-category.\n * @analytics\n */\n analyticsMetadata?: AlertProps.AnalyticsMetadata;\n /**\n * Specifies an object of selectors and properties that are used to apply custom styles.\n *\n * - `root.background` (string) - (Optional) Background for alert.\n * - `root.borderColor` (string) - (Optional) Border color for alert.\n * - `root.borderRadius` (string) - (Optional) Alert border radius.\n * - `root.borderWidth` (string) - (Optional) Alert border width.\n * - `root.color` (string) - (Optional) Text color for alert.\n * - `root.focusRing.borderColor` (string) - (Optional) Alert focus ring border color.\n * - `root.focusRing.borderRadius` (string) - (Optional) Alert button focus ring border radius.\n * - `root.focusRing.borderWidth` (string) - (Optional) Alert button focus ring border width.\n * - `dismissButton.color.active` (string) - (Optional) Color for dismiss button active state.\n * - `dismissButton.color.default` (string) - (Optional) Color for dismiss button default state.\n * - `dismissButton.color.hover` (string) - (Optional) Color for dismiss button hover state.\n * - `dismissButton.focusRing.borderColor` (string) - (Optional) Dismiss button focus ring border color.\n * - `dismissButton.focusRing.borderRadius` (string) - (Optional) Dismiss button focus ring border radius.\n * - `dismissButton.focusRing.borderWidth` (string) - (Optional) Dismiss button focus ring border width.\n * @awsuiSystem core\n */\n style?: AlertProps.Style;\n}\n"]}
package/button-dropdown/category-elements/category-element.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"category-element.d.ts","sourceRoot":"","sources":["../../../../src/button-dropdown/category-elements/category-element.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,eAAe,qKAalB,aAAa,gBAkCf,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,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAK9C,QAAA,MAAM,eAAe,qKAalB,aAAa,gBAyCf,CAAC;AAEF,eAAe,eAAe,CAAC"}
package/button-dropdown/category-elements/category-element.js CHANGED
@@ -2,13 +2,18 @@
2
2
  // SPDX-License-Identifier: Apache-2.0
3
3
  import React from 'react';
4
4
  import clsx from 'clsx';
5
+ import InternalIcon from '../../icon/internal';
5
6
  import ItemsList from '../items-list';
6
7
  import styles from './styles.css.js';
7
8
  const CategoryElement = ({ item, onItemActivate, onGroupToggle, targetItem, isHighlighted, isKeyboardHighlight, isExpanded, lastInDropdown, highlightItem, disabled, variant, position, }) => {
8
9
  // Hide the category title element from screen readers because it will be
9
10
  // provided as an ARIA label.
10
11
  return (React.createElement("li", { className: clsx(styles.category, styles[`variant-${variant}`], disabled && styles.disabled), role: "presentation" },
11
- item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" }, item.text)),
12
+ item.text && (React.createElement("p", { className: clsx(styles.header, { [styles.disabled]: disabled }), "aria-hidden": "true" },
13
+ React.createElement("span", { className: styles['header-content'] },
14
+ (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
15
+ React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
16
+ item.text))),
12
17
  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 })))));
13
18
  };
14
19
  export default CategoryElement;
package/button-dropdown/category-elements/category-element.js.map CHANGED
@@ -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/button-dropdown/category-elements/expandable-category-element.d.ts.map CHANGED
@@ -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/button-dropdown/category-elements/expandable-category-element.js CHANGED
@@ -55,6 +55,8 @@ const ExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle, target
55
55
  id: item.id || '',
56
56
  },
57
57
  })),
58
+ (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
59
+ React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
58
60
  item.text,
59
61
  React.createElement("span", { className: clsx(styles['expand-icon'], styles['expand-icon-right']) },
60
62
  React.createElement(InternalIcon, { name: "caret-down-filled" }))));
package/button-dropdown/category-elements/expandable-category-element.js.map CHANGED
@@ -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.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/button-dropdown/category-elements/mobile-expandable-category-element.d.ts.map CHANGED
@@ -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/button-dropdown/category-elements/mobile-expandable-category-element.js CHANGED
@@ -51,6 +51,8 @@ const MobileExpandableCategoryElement = ({ item, onItemActivate, onGroupToggle,
51
51
  expanded: `${!expanded}`,
52
52
  },
53
53
  })),
54
+ (item.iconName || item.iconUrl || item.iconSvg) && (React.createElement("span", { className: styles['icon-wrapper'] },
55
+ React.createElement(InternalIcon, { name: item.iconName, url: item.iconUrl, svg: item.iconSvg, alt: item.iconAlt }))),
54
56
  item.text,
55
57
  React.createElement("span", { className: clsx(styles['expand-icon'], {
56
58
  [styles['expand-icon-up']]: expanded,
package/button-dropdown/category-elements/mobile-expandable-category-element.js.map CHANGED
@@ -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.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":"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,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,OAAO,CAAC,IAAI,CAClD,8BAAM,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC;YACrC,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;QACA,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.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/button-dropdown/category-elements/styles.css.js CHANGED
@@ -1,20 +1,22 @@
1
1
 
2
2
  import './styles.scoped.css';
3
3
  export default {
4
- "header": "awsui_header_16mm3_1lc2r_145",
5
- "disabled": "awsui_disabled_16mm3_1lc2r_160",
6
- "expandable-header": "awsui_expandable-header_16mm3_1lc2r_164",
7
- "rolled-down": "awsui_rolled-down_16mm3_1lc2r_175",
8
- "highlighted": "awsui_highlighted_16mm3_1lc2r_178",
9
- "is-focused": "awsui_is-focused_16mm3_1lc2r_196",
10
- "visual-refresh": "awsui_visual-refresh_16mm3_1lc2r_199",
11
- "category": "awsui_category_16mm3_1lc2r_203",
12
- "expandable": "awsui_expandable_16mm3_1lc2r_164",
13
- "variant-navigation": "awsui_variant-navigation_16mm3_1lc2r_218",
14
- "expand-icon": "awsui_expand-icon_16mm3_1lc2r_225",
15
- "expand-icon-up": "awsui_expand-icon-up_16mm3_1lc2r_242",
16
- "expand-icon-right": "awsui_expand-icon-right_16mm3_1lc2r_245",
17
- "items-list-container": "awsui_items-list-container_16mm3_1lc2r_253",
18
- "in-dropdown": "awsui_in-dropdown_16mm3_1lc2r_262"
4
+ "header": "awsui_header_16mm3_mv8zj_145",
5
+ "disabled": "awsui_disabled_16mm3_mv8zj_161",
6
+ "expandable-header": "awsui_expandable-header_16mm3_mv8zj_165",
7
+ "rolled-down": "awsui_rolled-down_16mm3_mv8zj_176",
8
+ "highlighted": "awsui_highlighted_16mm3_mv8zj_179",
9
+ "is-focused": "awsui_is-focused_16mm3_mv8zj_197",
10
+ "visual-refresh": "awsui_visual-refresh_16mm3_mv8zj_200",
11
+ "category": "awsui_category_16mm3_mv8zj_204",
12
+ "expandable": "awsui_expandable_16mm3_mv8zj_165",
13
+ "variant-navigation": "awsui_variant-navigation_16mm3_mv8zj_219",
14
+ "expand-icon": "awsui_expand-icon_16mm3_mv8zj_226",
15
+ "expand-icon-up": "awsui_expand-icon-up_16mm3_mv8zj_244",
16
+ "expand-icon-right": "awsui_expand-icon-right_16mm3_mv8zj_247",
17
+ "items-list-container": "awsui_items-list-container_16mm3_mv8zj_255",
18
+ "in-dropdown": "awsui_in-dropdown_16mm3_mv8zj_264",
19
+ "icon-wrapper": "awsui_icon-wrapper_16mm3_mv8zj_268",
20
+ "header-content": "awsui_header-content_16mm3_mv8zj_272"
19
21
  };
20
22
 
package/button-dropdown/category-elements/styles.scoped.css CHANGED
@@ -142,7 +142,7 @@
142
142
  */
143
143
  /* Style used for links in slots/components that are text heavy, to help links stand out among
144
144
  surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
145
- .awsui_header_16mm3_1lc2r_145:not(#\9) {
145
+ .awsui_header_16mm3_mv8zj_145:not(#\9) {
146
146
  position: relative;
147
147
  margin-block: 0;
148
148
  margin-inline: 0;
@@ -153,29 +153,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
153
153
  font-weight: bold;
154
154
  display: flex;
155
155
  justify-content: space-between;
156
+ align-items: center;
156
157
  padding-block: calc(var(--space-xxs-hwfkai, 4px) + var(--border-item-width-miijiw, 2px) - var(--border-divider-list-width-tdfx1x, 1px));
157
158
  padding-inline: calc(var(--space-button-horizontal-k0c786, 20px) + var(--border-item-width-miijiw, 2px));
158
159
  z-index: 1;
159
160
  }
160
- .awsui_header_16mm3_1lc2r_145.awsui_disabled_16mm3_1lc2r_160:not(#\9) {
161
+ .awsui_header_16mm3_mv8zj_145.awsui_disabled_16mm3_mv8zj_161:not(#\9) {
161
162
  color: var(--color-text-dropdown-item-disabled-8m65hf, #b4b4bb);
162
163
  cursor: default;
163
164
  }
164
- .awsui_header_16mm3_1lc2r_145.awsui_expandable-header_16mm3_1lc2r_164:not(#\9) {
165
+ .awsui_header_16mm3_mv8zj_145.awsui_expandable-header_16mm3_mv8zj_165:not(#\9) {
165
166
  border-block-start-color: var(--color-border-dropdown-group-ylcnh8, #c6c6cd);
166
167
  border-block-end-color: var(--color-border-dropdown-group-ylcnh8, #c6c6cd);
167
168
  cursor: pointer;
168
169
  }
169
- .awsui_header_16mm3_1lc2r_145.awsui_expandable-header_16mm3_1lc2r_164.awsui_disabled_16mm3_1lc2r_160:not(#\9) {
170
+ .awsui_header_16mm3_mv8zj_145.awsui_expandable-header_16mm3_mv8zj_165.awsui_disabled_16mm3_mv8zj_161:not(#\9) {
170
171
  cursor: default;
171
172
  }
172
- .awsui_header_16mm3_1lc2r_145.awsui_expandable-header_16mm3_1lc2r_164:not(#\9):focus {
173
+ .awsui_header_16mm3_mv8zj_145.awsui_expandable-header_16mm3_mv8zj_165:not(#\9):focus {
173
174
  outline: none;
174
175
  }
175
- .awsui_header_16mm3_1lc2r_145.awsui_expandable-header_16mm3_1lc2r_164.awsui_rolled-down_16mm3_1lc2r_175:not(#\9) {
176
+ .awsui_header_16mm3_mv8zj_145.awsui_expandable-header_16mm3_mv8zj_165.awsui_rolled-down_16mm3_mv8zj_176:not(#\9) {
176
177
  border-block-end-color: transparent;
177
178
  }
178
- .awsui_header_16mm3_1lc2r_145.awsui_expandable-header_16mm3_1lc2r_164.awsui_highlighted_16mm3_1lc2r_178:not(#\9) {
179
+ .awsui_header_16mm3_mv8zj_145.awsui_expandable-header_16mm3_mv8zj_165.awsui_highlighted_16mm3_mv8zj_179:not(#\9) {
179
180
  background-color: var(--color-background-dropdown-item-hover-yunepc, #f3f3f7);
180
181
  color: var(--color-text-dropdown-item-highlighted-yr1px8, #0f141a);
181
182
  padding-block: var(--space-xxs-hwfkai, 4px);
@@ -188,69 +189,70 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
188
189
  border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
189
190
  z-index: 2;
190
191
  }
191
- .awsui_header_16mm3_1lc2r_145.awsui_expandable-header_16mm3_1lc2r_164.awsui_highlighted_16mm3_1lc2r_178.awsui_disabled_16mm3_1lc2r_160:not(#\9) {
192
+ .awsui_header_16mm3_mv8zj_145.awsui_expandable-header_16mm3_mv8zj_165.awsui_highlighted_16mm3_mv8zj_179.awsui_disabled_16mm3_mv8zj_161:not(#\9) {
192
193
  background-color: var(--color-background-dropdown-item-dimmed-dhho03, transparent);
193
194
  border-color: var(--color-border-dropdown-item-dimmed-hover-ga9sch, #8c8c94);
194
195
  color: var(--color-text-dropdown-item-dimmed-tq8vh3, #b4b4bb);
195
196
  }
196
- .awsui_header_16mm3_1lc2r_145.awsui_expandable-header_16mm3_1lc2r_164.awsui_highlighted_16mm3_1lc2r_178.awsui_is-focused_16mm3_1lc2r_196:not(#\9) {
197
+ .awsui_header_16mm3_mv8zj_145.awsui_expandable-header_16mm3_mv8zj_165.awsui_highlighted_16mm3_mv8zj_179.awsui_is-focused_16mm3_mv8zj_197:not(#\9) {
197
198
  border-color: var(--color-border-dropdown-item-focused-zacqlp, #424650);
198
199
  }
199
- .awsui_header_16mm3_1lc2r_145.awsui_expandable-header_16mm3_1lc2r_164.awsui_highlighted_16mm3_1lc2r_178.awsui_is-focused_16mm3_1lc2r_196:not(#\9):not(.awsui_visual-refresh_16mm3_1lc2r_199) {
200
+ .awsui_header_16mm3_mv8zj_145.awsui_expandable-header_16mm3_mv8zj_165.awsui_highlighted_16mm3_mv8zj_179.awsui_is-focused_16mm3_mv8zj_197:not(#\9):not(.awsui_visual-refresh_16mm3_mv8zj_200) {
200
201
  box-shadow: inset 0 0 0 var(--border-control-focus-ring-shadow-spread-9mjajk, 1px) var(--color-border-item-focused-uk47pl, #006ce0);
201
202
  }
202
203
 
203
- .awsui_category_16mm3_1lc2r_203:not(#\9) {
204
+ .awsui_category_16mm3_mv8zj_204:not(#\9) {
204
205
  list-style: none;
205
206
  margin-block-start: calc(-1 * var(--border-divider-list-width-tdfx1x, 1px));
206
207
  padding-block: 0;
207
208
  padding-inline: 0;
208
209
  }
209
- .awsui_category_16mm3_1lc2r_203:not(#\9):first-child {
210
+ .awsui_category_16mm3_mv8zj_204:not(#\9):first-child {
210
211
  margin-block-start: 0;
211
212
  }
212
- .awsui_category_16mm3_1lc2r_203.awsui_expandable_16mm3_1lc2r_164:not(#\9) {
213
+ .awsui_category_16mm3_mv8zj_204.awsui_expandable_16mm3_mv8zj_165:not(#\9) {
213
214
  border-block-start: 0;
214
215
  }
215
- .awsui_category_16mm3_1lc2r_203:not(#\9):last-child {
216
+ .awsui_category_16mm3_mv8zj_204:not(#\9):last-child {
216
217
  border-block-end: none;
217
218
  }
218
- .awsui_category_16mm3_1lc2r_203.awsui_variant-navigation_16mm3_1lc2r_218:not(#\9) {
219
+ .awsui_category_16mm3_mv8zj_204.awsui_variant-navigation_16mm3_mv8zj_219:not(#\9) {
219
220
  padding-block-start: var(--space-xxs-hwfkai, 4px);
220
221
  }
221
- .awsui_category_16mm3_1lc2r_203.awsui_variant-navigation_16mm3_1lc2r_218.awsui_expandable_16mm3_1lc2r_164:not(#\9) {
222
+ .awsui_category_16mm3_mv8zj_204.awsui_variant-navigation_16mm3_mv8zj_219.awsui_expandable_16mm3_mv8zj_165:not(#\9) {
222
223
  padding-block-start: 0;
223
224
  }
224
225
 
225
- .awsui_expand-icon_16mm3_1lc2r_225:not(#\9) {
226
+ .awsui_expand-icon_16mm3_mv8zj_226:not(#\9) {
226
227
  position: relative;
227
- inset-inline-start: var(--space-s-tvghoh, 12px);
228
+ inset-inline-end: calc(-1 * var(--space-s-tvghoh, 12px));
228
229
  inline-size: var(--space-m-dsumyt, 16px);
229
230
  display: inline-block;
231
+ margin-inline-start: auto;
230
232
  transition: transform var(--motion-duration-rotate-180-cxi9g7, 135ms) var(--motion-easing-rotate-180-7a58rc, cubic-bezier(0.165, 0.84, 0.44, 1));
231
233
  }
232
234
  @media (prefers-reduced-motion: reduce) {
233
- .awsui_expand-icon_16mm3_1lc2r_225:not(#\9) {
235
+ .awsui_expand-icon_16mm3_mv8zj_226:not(#\9) {
234
236
  animation: none;
235
237
  transition: none;
236
238
  }
237
239
  }
238
- .awsui-motion-disabled .awsui_expand-icon_16mm3_1lc2r_225:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_1lc2r_225:not(#\9) {
240
+ .awsui-motion-disabled .awsui_expand-icon_16mm3_mv8zj_226:not(#\9), .awsui-mode-entering .awsui_expand-icon_16mm3_mv8zj_226:not(#\9) {
239
241
  animation: none;
240
242
  transition: none;
241
243
  }
242
- .awsui_expand-icon-up_16mm3_1lc2r_242:not(#\9) {
244
+ .awsui_expand-icon-up_16mm3_mv8zj_244:not(#\9) {
243
245
  transform: rotate(-180deg);
244
246
  }
245
- .awsui_expand-icon-right_16mm3_1lc2r_245:not(#\9) {
247
+ .awsui_expand-icon-right_16mm3_mv8zj_247:not(#\9) {
246
248
  transform: rotate(-90deg);
247
249
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
248
250
  }
249
- .awsui_expand-icon-right_16mm3_1lc2r_245:not(#\9):dir(rtl) {
251
+ .awsui_expand-icon-right_16mm3_mv8zj_247:not(#\9):dir(rtl) {
250
252
  transform: rotate(90deg);
251
253
  }
252
254
 
253
- .awsui_items-list-container_16mm3_1lc2r_253:not(#\9) {
255
+ .awsui_items-list-container_16mm3_mv8zj_255:not(#\9) {
254
256
  padding-block: 0;
255
257
  padding-inline: 0;
256
258
  margin-block-start: -1px;
@@ -259,6 +261,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
259
261
  overflow-y: auto;
260
262
  }
261
263
 
262
- .awsui_in-dropdown_16mm3_1lc2r_262:not(#\9) {
264
+ .awsui_in-dropdown_16mm3_mv8zj_264:not(#\9) {
263
265
  margin-block-end: -1px;
266
+ }
267
+
268
+ .awsui_icon-wrapper_16mm3_mv8zj_268:not(#\9) {
269
+ margin-inline-end: var(--space-xxs-hwfkai, 4px);
270
+ }
271
+
272
+ .awsui_header-content_16mm3_mv8zj_272:not(#\9) {
273
+ display: flex;
274
+ align-items: center;
264
275
  }
package/button-dropdown/category-elements/styles.selectors.js CHANGED
@@ -2,20 +2,22 @@
2
2
  // es-module interop with Babel and Typescript
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  module.exports.default = {
5
- "header": "awsui_header_16mm3_1lc2r_145",
6
- "disabled": "awsui_disabled_16mm3_1lc2r_160",
7
- "expandable-header": "awsui_expandable-header_16mm3_1lc2r_164",
8
- "rolled-down": "awsui_rolled-down_16mm3_1lc2r_175",
9
- "highlighted": "awsui_highlighted_16mm3_1lc2r_178",
10
- "is-focused": "awsui_is-focused_16mm3_1lc2r_196",
11
- "visual-refresh": "awsui_visual-refresh_16mm3_1lc2r_199",
12
- "category": "awsui_category_16mm3_1lc2r_203",
13
- "expandable": "awsui_expandable_16mm3_1lc2r_164",
14
- "variant-navigation": "awsui_variant-navigation_16mm3_1lc2r_218",
15
- "expand-icon": "awsui_expand-icon_16mm3_1lc2r_225",
16
- "expand-icon-up": "awsui_expand-icon-up_16mm3_1lc2r_242",
17
- "expand-icon-right": "awsui_expand-icon-right_16mm3_1lc2r_245",
18
- "items-list-container": "awsui_items-list-container_16mm3_1lc2r_253",
19
- "in-dropdown": "awsui_in-dropdown_16mm3_1lc2r_262"
5
+ "header": "awsui_header_16mm3_mv8zj_145",
6
+ "disabled": "awsui_disabled_16mm3_mv8zj_161",
7
+ "expandable-header": "awsui_expandable-header_16mm3_mv8zj_165",
8
+ "rolled-down": "awsui_rolled-down_16mm3_mv8zj_176",
9
+ "highlighted": "awsui_highlighted_16mm3_mv8zj_179",
10
+ "is-focused": "awsui_is-focused_16mm3_mv8zj_197",
11
+ "visual-refresh": "awsui_visual-refresh_16mm3_mv8zj_200",
12
+ "category": "awsui_category_16mm3_mv8zj_204",
13
+ "expandable": "awsui_expandable_16mm3_mv8zj_165",
14
+ "variant-navigation": "awsui_variant-navigation_16mm3_mv8zj_219",
15
+ "expand-icon": "awsui_expand-icon_16mm3_mv8zj_226",
16
+ "expand-icon-up": "awsui_expand-icon-up_16mm3_mv8zj_244",
17
+ "expand-icon-right": "awsui_expand-icon-right_16mm3_mv8zj_247",
18
+ "items-list-container": "awsui_items-list-container_16mm3_mv8zj_255",
19
+ "in-dropdown": "awsui_in-dropdown_16mm3_mv8zj_264",
20
+ "icon-wrapper": "awsui_icon-wrapper_16mm3_mv8zj_268",
21
+ "header-content": "awsui_header-content_16mm3_mv8zj_272"
20
22
  };
21
23
 
package/internal/base-component/styles.scoped.css CHANGED
@@ -2039,5 +2039,5 @@
2039
2039
  }
2040
2040
  }
2041
2041
  :root {
2042
- --awsui-version-info-991892e2: true;
2042
+ --awsui-version-info-b5eefb50: true;
2043
2043
  }
package/internal/environment.js CHANGED
@@ -1,6 +1,6 @@
1
1
  export var PACKAGE_SOURCE = "components";
2
- export var PACKAGE_VERSION = "3.0.0 (991892e2)";
3
- export var GIT_SHA = "991892e2";
2
+ export var PACKAGE_VERSION = "3.0.0 (b5eefb50)";
3
+ export var GIT_SHA = "b5eefb50";
4
4
  export var THEME = "open-source-visual-refresh";
5
5
  export var SYSTEM = "console";
6
6
  export var ALWAYS_VISUAL_REFRESH = true;
package/internal/environment.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "PACKAGE_SOURCE": "components",
3
- "PACKAGE_VERSION": "3.0.0 (991892e2)",
4
- "GIT_SHA": "991892e2",
3
+ "PACKAGE_VERSION": "3.0.0 (b5eefb50)",
4
+ "GIT_SHA": "b5eefb50",
5
5
  "THEME": "open-source-visual-refresh",
6
6
  "SYSTEM": "console",
7
7
  "ALWAYS_VISUAL_REFRESH": true
package/internal/manifest.json CHANGED
@@ -1,3 +1,3 @@
1
1
  {
2
- "commit": "991892e23236dd021ea64b02989253848736dc69"
2
+ "commit": "b5eefb50245f7c6f041e30f409695856f1cc8f47"
3
3
  }
package/package.json CHANGED
@@ -150,7 +150,7 @@
150
150
  "./internal/base-component/index.js",
151
151
  "./internal/base-component/styles.css.js"
152
152
  ],
153
- "version": "3.0.1049",
153
+ "version": "3.0.1051",
154
154
  "repository": {
155
155
  "type": "git",
156
156
  "url": "https://github.com/cloudscape-design/components.git"