npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.882 → 3.0.884 - Mend

@cloudscape-design/components-themeable 3.0.882 → 3.0.884

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

package/lib/internal/template/button-group/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAI7C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,~~EAAgE~~,EAAE,GAAoC,EAAE,EAAE;~~QAA1G~~,EAAE,OAAO,EAAE,wBAAwB,OAA6B,EAAxB,IAAI,~~cAA5C~~,~~uCAA8C~~,CAAF;~~IAC3C~~,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,OAAO;YACP,wBAAwB;SACzB;KACF,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,CACL,oBAAC,mBAAmB,oBACd,SAAS,EACT,kBAAkB,EAClB,aAAa,IACjB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,wBAAwB,EAAE,wBAAwB,IAClD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { ButtonGroupProps } from './interfaces';\nimport InternalButtonGroup from './internal';\n\nexport { ButtonGroupProps };\n\nconst ButtonGroup = React.forwardRef(\n ({ variant, dropdownExpandToViewport, ...rest }: ButtonGroupProps, ref: React.Ref<ButtonGroupProps.Ref>) => {\n const baseProps = getBaseProps(rest);\n const baseComponentProps = useBaseComponent('ButtonGroup', {\n props: {\n variant,\n dropdownExpandToViewport,\n },\n });\n\n const externalProps = getExternalProps(rest);\n return (\n <InternalButtonGroup\n {...baseProps}\n {...baseComponentProps}\n {...externalProps}\n ref={ref}\n variant={variant}\n dropdownExpandToViewport={dropdownExpandToViewport}\n />\n );\n }\n);\n\napplyDisplayName(ButtonGroup, 'ButtonGroup');\nexport default ButtonGroup;\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/button-group/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAC1D,OAAO,gBAAgB,MAAM,sCAAsC,CAAC;AACpE,OAAO,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,OAAO,mBAAmB,MAAM,YAAY,CAAC;AAI7C,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAClC,CAAC,EAAwE,EAAE,GAAoC,EAAE,EAAE;QAAlH,EAAE,OAAO,EAAE,wBAAwB,GAAG,KAAK,OAA6B,EAAxB,IAAI,cAApD,uCAAsD,CAAF;IACnD,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,UAAU,GAAG,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC7C,MAAM,kBAAkB,GAAG,gBAAgB,CAAC,aAAa,EAAE;QACzD,KAAK,EAAE;YACL,OAAO;YACP,wBAAwB;SACzB;QACD,QAAQ,EAAE;YACR,gBAAgB,EAAE,UAAU,CAAC,aAAa,CAAC;YAC3C,sBAAsB,EAAE,UAAU,CAAC,oBAAoB,CAAC;YACxD,mBAAmB,EAAE,UAAU,CAAC,iBAAiB,CAAC;YAClD,kBAAkB,EAAE,UAAU,CAAC,eAAe,CAAC;YAC/C,WAAW,EAAE,UAAU,CAAC,KAAK;SAC9B;KACF,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IAC7C,OAAO,CACL,oBAAC,mBAAmB,oBACd,SAAS,EACT,kBAAkB,EAClB,aAAa,IACjB,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,wBAAwB,EAAE,wBAAwB,IAClD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,aAAa,CAAC,WAAoD,EAAE;IAC3E,MAAM,QAAQ,GAAG,EAAE,aAAa,EAAE,CAAC,EAAE,oBAAoB,EAAE,CAAC,EAAE,iBAAiB,EAAE,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC;IAEnH,SAAS,KAAK,CAAC,KAA8C;QAC3D,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;YACxB,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;YAEzB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE;gBACzB,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aACnB;SACF;IACH,CAAC;IACD,KAAK,CAAC,QAAQ,CAAC,CAAC;IAEhB,OAAO,QAAQ,CAAC;AAClB,CAAC;AAED,gBAAgB,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;AAC7C,eAAe,WAAW,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { getBaseProps } from '../internal/base-component';\nimport useBaseComponent from '../internal/hooks/use-base-component';\nimport { applyDisplayName } from '../internal/utils/apply-display-name';\nimport { getExternalProps } from '../internal/utils/external-props';\nimport { ButtonGroupProps } from './interfaces';\nimport InternalButtonGroup from './internal';\n\nexport { ButtonGroupProps };\n\nconst ButtonGroup = React.forwardRef(\n ({ variant, dropdownExpandToViewport = false, ...rest }: ButtonGroupProps, ref: React.Ref<ButtonGroupProps.Ref>) => {\n const baseProps = getBaseProps(rest);\n const itemCounts = getItemCounts(rest.items);\n const baseComponentProps = useBaseComponent('ButtonGroup', {\n props: {\n variant,\n dropdownExpandToViewport,\n },\n metadata: {\n iconButtonsCount: itemCounts['icon-button'],\n iconToggleButtonsCount: itemCounts['icon-toggle-button'],\n iconFileInputsCount: itemCounts['icon-file-input'],\n menuDropdownsCount: itemCounts['menu-dropdown'],\n groupsCount: itemCounts.group,\n },\n });\n\n const externalProps = getExternalProps(rest);\n return (\n <InternalButtonGroup\n {...baseProps}\n {...baseComponentProps}\n {...externalProps}\n ref={ref}\n variant={variant}\n dropdownExpandToViewport={dropdownExpandToViewport}\n />\n );\n }\n);\n\nfunction getItemCounts(allItems: readonly ButtonGroupProps.ItemOrGroup[] = []) {\n const counters = { 'icon-button': 0, 'icon-toggle-button': 0, 'icon-file-input': 0, 'menu-dropdown': 0, group: 0 };\n\n function count(items: readonly ButtonGroupProps.ItemOrGroup[]) {\n for (const item of items) {\n counters[item.type] += 1;\n\n if (item.type === 'group') {\n count(item.items);\n }\n }\n }\n count(allItems);\n\n return counters;\n}\n\napplyDisplayName(ButtonGroup, 'ButtonGroup');\nexport default ButtonGroup;\n"]}

package/lib/internal/template/button-group/interfaces.d.ts CHANGED Viewed

@@ -4,6 +4,7 @@ import { IconProps } from '../icon/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
 import { NonCancelableEventHandler } from '../internal/events';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { SomeRequired } from '../internal/types';
 export interface ButtonGroupProps extends BaseComponentProps {
     /**
      * Adds `aria-label` to the button group toolbar element.
@@ -93,7 +94,7 @@ export interface ButtonGroupProps extends BaseComponentProps {
      */
     onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;
 }
-export interface InternalButtonGroupProps extends ButtonGroupProps, InternalBaseComponentProps {
+export interface InternalButtonGroupProps extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>, InternalBaseComponentProps {
 }
 export declare namespace ButtonGroupProps {
     type Variant = 'icon';

package/lib/internal/template/button-group/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAC/D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;~~AAElF~~,MAAM,WAAW,gBAAiB,SAAQ,kBAAkB;IAC1D;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,EAAE,gBAAgB,CAAC,OAAO,CAAC;IAClC;;;;;;;;;;;;OAYG;IACH,wBAAwB,CAAC,EAAE,OAAO,CAAC;IACnC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAqDG;IACH,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACnD;;OAEG;IACH,WAAW,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,CAAC;IAC3E;;OAEG;IACH,aAAa,CAAC,EAAE,yBAAyB,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;CAChF;AAED,MAAM,WAAW,~~wBAAyB~~,SAAQ,gBAAgB,EAAE,0BAA0B;CAAG;~~AAEjG~~,yBAAiB,gBAAgB,CAAC;IAChC,KAAY,OAAO,GAAG,MAAM,CAAC;IAE7B,KAAY,WAAW,GAAG,IAAI,GAAG,KAAK,CAAC;IACvC,KAAY,IAAI,GAAG,UAAU,GAAG,gBAAgB,GAAG,aAAa,GAAG,YAAY,CAAC;IAEhF,UAAiB,UAAU;QACzB,IAAI,EAAE,aAAa,CAAC;QACpB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KACnC;IAED,UAAiB,gBAAgB;QAC/B,IAAI,EAAE,oBAAoB,CAAC;QAC3B,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,EAAE,OAAO,CAAC;QACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAC1B,eAAe,CAAC,EAAE,SAAS,CAAC,IAAI,CAAC;QACjC,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QACjC,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;QAClC,sBAAsB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;KAC1C;IAED,UAAiB,aAAa;QAC5B,IAAI,EAAE,iBAAiB,CAAC;QACxB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;KACpB;IAED,UAAiB,YAAY;QAC3B,IAAI,EAAE,eAAe,CAAC;QACtB,EAAE,EAAE,MAAM,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,QAAQ,CAAC,EAAE,OAAO,CAAC;QACnB,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,KAAK,EAAE,aAAa,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAC;KACvD;IAED,UAAiB,KAAK;QACpB,IAAI,EAAE,OAAO,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,KAAK,EAAE,aAAa,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC;KAC7C;IAED,UAAiB,gBAAgB;QAC/B,EAAE,EAAE,MAAM,CAAC;QACX,OAAO,CAAC,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,OAAO,CAAC;KACnB;IAED,UAAiB,kBAAkB;QACjC,EAAE,EAAE,MAAM,CAAC;QACX,KAAK,EAAE,IAAI,EAAE,CAAC;KACf;IAED,UAAiB,GAAG;QAClB;;WAEG;QACH,KAAK,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAAC;KAC7B;CACF"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/button-group/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n /*\n Adds `aria-label` to the button group toolbar element.\n * Use this to provide a unique accessible name for each button group on the page.\n /\n ariaLabel?: string;\n /\n Determines the general styling of the button dropdown.\n * * `icon` for icon buttons.\n /\n variant: ButtonGroupProps.Variant;\n /\n Use this property to determine dropdown placement strategy for all menu dropdown items.\n \n By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n * [React Portals](https://reactjs.org/docs/portals.html).\n \n Set this property if the dropdown would otherwise be constrained by a scrollable container,\n * for example inside table and split view layouts.\n \n We recommend you use discretion, and don't enable this property unless necessary\n * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n /\n dropdownExpandToViewport?: boolean;\n /\n Array of objects with a number of supported types.\n \n ### icon-button\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n * * `text` (string) - The name shown as a tooltip for this button.\n * * `disabled` (optional, boolean) - The disabled state indication for this button.\n * * `loading` (optional, boolean) - The loading state indication for this button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n \n ### icon-toggle-button\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n * * `pressed` (boolean) - The toggle button pressed state.\n * * `text` (string) - The name shown as a tooltip for this button.\n * * `disabled` (optional, boolean) - The disabled state indication for this button.\n * * `loading` (optional, boolean) - The loading state indication for this button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n \n * ### file-input\n \n * `id` (string) - The unique identifier of the button, used as detail in `onFilesChange`.\n * * `text` (string) - The name of the menu button shown as a tooltip.\n * * `accept` (optional, string) - Specifies the native file input `accept` attribute to describe the allow-list of file types.\n * * `multiple` (optional, string) - Specifies the native file input `multiple` attribute to allow users entering more than one file.\n \n ### menu-dropdown\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n * * `text` (string) - The name of the menu button shown as a tooltip.\n * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n * * `loading` (optional, boolean) - The loading state indication for the menu button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n \n ### group\n \n * `text` (string) - The name of the group rendered as ARIA label for this group.\n * * `items` ((ButtonGroupProps.IconButton \| ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n /\n items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\n /\n Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n /\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n /\n Called when the user uploads files. The event detail object contains the id and files from the file input item.\n /\n onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;\n}\n\nexport interface InternalButtonGroupProps extends ButtonGroupProps, InternalBaseComponentProps {}\n\nexport namespace ButtonGroupProps {\n export type Variant = 'icon';\n\n export type ItemOrGroup = Item \| Group;\n export type Item = IconButton \| IconToggleButton \| IconFileInput \| MenuDropdown;\n\n export interface IconButton {\n type: 'icon-button';\n id: string;\n text: string;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n iconName?: IconProps.Name;\n iconAlt?: string;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n popoverFeedback?: React.ReactNode;\n }\n\n export interface IconToggleButton {\n type: 'icon-toggle-button';\n id: string;\n text: string;\n pressed: boolean;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n pressedIconName?: IconProps.Name;\n pressedIconUrl?: string;\n pressedIconSvg?: React.ReactNode;\n popoverFeedback?: React.ReactNode;\n pressedPopoverFeedback?: React.ReactNode;\n }\n\n export interface IconFileInput {\n type: 'icon-file-input';\n id: string;\n text: string;\n accept?: string;\n multiple?: boolean;\n }\n\n export interface MenuDropdown {\n type: 'menu-dropdown';\n id: string;\n text: string;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n }\n\n export interface Group {\n type: 'group';\n text: string;\n items: ReadonlyArray<ButtonGroupProps.Item>;\n }\n\n export interface ItemClickDetails {\n id: string;\n pressed?: boolean;\n checked?: boolean;\n }\n\n export interface FilesChangeDetails {\n id: string;\n files: File[];\n }\n\n export interface Ref {\n /\n Focuses button group item by id.\n */\n focus(itemId: string): void;\n }\n}\n"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/button-group/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { ButtonDropdownProps } from '../button-dropdown/interfaces';\nimport { IconProps } from '../icon/interfaces';\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { SomeRequired } from '../internal/types';\n\nexport interface ButtonGroupProps extends BaseComponentProps {\n /*\n Adds `aria-label` to the button group toolbar element.\n * Use this to provide a unique accessible name for each button group on the page.\n /\n ariaLabel?: string;\n /\n Determines the general styling of the button dropdown.\n * * `icon` for icon buttons.\n /\n variant: ButtonGroupProps.Variant;\n /\n Use this property to determine dropdown placement strategy for all menu dropdown items.\n \n By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n * [React Portals](https://reactjs.org/docs/portals.html).\n \n Set this property if the dropdown would otherwise be constrained by a scrollable container,\n * for example inside table and split view layouts.\n \n We recommend you use discretion, and don't enable this property unless necessary\n * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n /\n dropdownExpandToViewport?: boolean;\n /\n Array of objects with a number of supported types.\n \n ### icon-button\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n * * `text` (string) - The name shown as a tooltip for this button.\n * * `disabled` (optional, boolean) - The disabled state indication for this button.\n * * `loading` (optional, boolean) - The loading state indication for this button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n * * `iconAlt` (optional, string) - Specifies alternate text for the icon when using `iconUrl`.\n * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n \n ### icon-toggle-button\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick` handler and to focus the button using `ref.focus(id)`.\n * * `pressed` (boolean) - The toggle button pressed state.\n * * `text` (string) - The name shown as a tooltip for this button.\n * * `disabled` (optional, boolean) - The disabled state indication for this button.\n * * `loading` (optional, boolean) - The loading state indication for this button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `iconName` (optional, string) - Specifies the name of the icon, used with the [icon component](/components/icon/).\n * * `iconUrl` (optional, string) - Specifies the URL of a custom icon.\n * * `iconSvg` (optional, ReactNode) - Custom SVG icon. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `pressedIconName` (optional, string) - Specifies the name of the icon in pressed state, used with the [icon component](/components/icon/).\n * * `pressedIconUrl` (optional, string) - Specifies the URL of a custom icon in pressed state.\n * * `pressedIconSvg` (optional, ReactNode) - Custom SVG icon in pressed state. Equivalent to the `svg` slot of the [icon component](/components/icon/).\n * * `popoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button. Use to provide feedback to the user.\n * * `pressedPopoverFeedback` (optional, ReactNode) - Text that appears when the user clicks the button in pressed state. Defaults to `popoverFeedback`.\n \n * ### file-input\n \n * `id` (string) - The unique identifier of the button, used as detail in `onFilesChange`.\n * * `text` (string) - The name of the menu button shown as a tooltip.\n * * `accept` (optional, string) - Specifies the native file input `accept` attribute to describe the allow-list of file types.\n * * `multiple` (optional, string) - Specifies the native file input `multiple` attribute to allow users entering more than one file.\n \n ### menu-dropdown\n \n * `id` (string) - The unique identifier of the button, used as detail in `onItemClick`.\n * * `text` (string) - The name of the menu button shown as a tooltip.\n * * `disabled` (optional, boolean) - The disabled state indication for the menu button.\n * * `loading` (optional, boolean) - The loading state indication for the menu button.\n * * `loadingText` (optional, string) - The loading text announced to screen readers.\n * * `items` (ButtonDropdownProps.ItemOrGroup[]) - The array of dropdown items that belong to this menu.\n \n ### group\n \n * `text` (string) - The name of the group rendered as ARIA label for this group.\n * * `items` ((ButtonGroupProps.IconButton \| ButtonGroupProps.MenuDropdown)[]) - The array of items that belong to this group.\n /\n items: ReadonlyArray<ButtonGroupProps.ItemOrGroup>;\n /\n Called when the user clicks on an item, and the item is not disabled. The event detail object contains the id of the clicked item.\n /\n onItemClick?: NonCancelableEventHandler<ButtonGroupProps.ItemClickDetails>;\n /\n Called when the user uploads files. The event detail object contains the id and files from the file input item.\n /\n onFilesChange?: NonCancelableEventHandler<ButtonGroupProps.FilesChangeDetails>;\n}\n\nexport interface InternalButtonGroupProps\n extends SomeRequired<ButtonGroupProps, 'dropdownExpandToViewport'>,\n InternalBaseComponentProps {}\n\nexport namespace ButtonGroupProps {\n export type Variant = 'icon';\n\n export type ItemOrGroup = Item \| Group;\n export type Item = IconButton \| IconToggleButton \| IconFileInput \| MenuDropdown;\n\n export interface IconButton {\n type: 'icon-button';\n id: string;\n text: string;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n iconName?: IconProps.Name;\n iconAlt?: string;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n popoverFeedback?: React.ReactNode;\n }\n\n export interface IconToggleButton {\n type: 'icon-toggle-button';\n id: string;\n text: string;\n pressed: boolean;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n iconName?: IconProps.Name;\n iconUrl?: string;\n iconSvg?: React.ReactNode;\n pressedIconName?: IconProps.Name;\n pressedIconUrl?: string;\n pressedIconSvg?: React.ReactNode;\n popoverFeedback?: React.ReactNode;\n pressedPopoverFeedback?: React.ReactNode;\n }\n\n export interface IconFileInput {\n type: 'icon-file-input';\n id: string;\n text: string;\n accept?: string;\n multiple?: boolean;\n }\n\n export interface MenuDropdown {\n type: 'menu-dropdown';\n id: string;\n text: string;\n disabled?: boolean;\n loading?: boolean;\n loadingText?: string;\n items: ReadonlyArray<ButtonDropdownProps.ItemOrGroup>;\n }\n\n export interface Group {\n type: 'group';\n text: string;\n items: ReadonlyArray<ButtonGroupProps.Item>;\n }\n\n export interface ItemClickDetails {\n id: string;\n pressed?: boolean;\n checked?: boolean;\n }\n\n export interface FilesChangeDetails {\n id: string;\n files: File[];\n }\n\n export interface Ref {\n /\n Focuses button group item by id.\n */\n focus(itemId: string): void;\n }\n}\n"]}

package/lib/internal/template/collection-preferences/content-display/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAU3D,UAAU,6BAA8B,SAAQ,0BAA0B,CAAC,wBAAwB;IACjG,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CACtE;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAGG,EACH,QAAQ,EACR,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,qBAA6B,EAC7B,WAAW,GACZ,EAAE,6BAA6B,~~eAiJ~~/B"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAU3D,UAAU,6BAA8B,SAAQ,0BAA0B,CAAC,wBAAwB;IACjG,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,KAAK,IAAI,CAAC;IACxF,KAAK,CAAC,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CACtE;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAGG,EACH,QAAQ,EACR,0BAA0B,EAC1B,gCAAgC,EAChC,gCAAgC,EAChC,4BAA4B,EAC5B,yBAAyB,EACzB,mBAAmB,EACnB,qBAA6B,EAC7B,WAAW,GACZ,EAAE,6BAA6B,eA8I/B"}

package/lib/internal/template/collection-preferences/content-display/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import clsx from 'clsx';
 import InternalBox from '../../box/internal';
 import InternalButton from '../../button/internal';
 import { useInternalI18n } from '../../i18n/context';
-import { DndArea } from '../../internal/components/dnd-area';
+import SortableArea from '../../internal/components/sortable-area';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import InternalSpaceBetween from '../../space-between/internal';
 import InternalTextFilter from '../../text-filter/internal';
@@ -46,10 +46,13 @@ export default function ContentDisplayPreference({ title, description, options,
                 React.createElement(InternalBox, { margin: { top: 'm' } }, i18n('contentDisplayPreference.i18nStrings.columnFilteringNoMatchText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringNoMatchText)),
                 React.createElement(InternalButton, { onClick: () => setColumnFilteringText('') }, i18n('contentDisplayPreference.i18nStrings.columnFilteringClearFilterText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringClearFilterText))))),
         React.createElement("ul", { className: getClassName('option-list'), "aria-describedby": descriptionId, "aria-labelledby": titleId, role: "list" },
-            React.createElement(DndArea, { items: sortedAndFilteredOptions.map(data => ({ id: data.id, label: data.label, data })), onItemsChange: items => onChange(items.map(({ id, data }) => ({ id, visible: data.visible }))), disableReorder: columnFilteringText.trim().length > 0, renderItem: ({ ref, item, isSorting, isActive, style, className, dragHandleProps }) => {
-                    className = clsx(className, getOptionClassName(), isSorting && styles.sorting);
-                    const content = (React.createElement(ContentDisplayOption, { ref: ref, option: item.data, onToggle: onToggle, dragHandleProps: dragHandleProps }));
-                    return isActive ? (content) : (React.createElement("li", { className: className, style: style }, content));
+            React.createElement(SortableArea, { items: sortedAndFilteredOptions, itemDefinition: { id: item => item.id, label: item => item.label }, onItemsChange: ({ detail }) => onChange(detail.items), disableReorder: columnFilteringText.trim().length > 0, renderItem: ({ ref, item, style, className, dragHandleProps, isDragGhost }) => {
+                    className = clsx(className, getOptionClassName());
+                    const content = (React.createElement(ContentDisplayOption, { ref: ref, option: item, onToggle: onToggle, dragHandleProps: dragHandleProps }));
+                    if (isDragGhost) {
+                        return content;
+                    }
+                    return (React.createElement("li", { className: className, style: style }, content));
                 }, i18nStrings: {
                     liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', liveAnnouncementDndStarted, format => (position, total) => format({ position, total })),
                     liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, format => (initialPosition, currentPosition, total) => format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })),

package/lib/internal/template/collection-preferences/content-display/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport { DndArea } from '../../internal/components/dnd-area';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption, { getClassName as getOptionClassName } from './content-display-option';\nimport { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n title,\n description,\n options,\n value = options.map(({ id }) => ({\n id,\n visible: true,\n })),\n onChange,\n liveAnnouncementDndStarted,\n liveAnnouncementDndItemReordered,\n liveAnnouncementDndItemCommitted,\n liveAnnouncementDndDiscarded,\n dragHandleAriaDescription,\n dragHandleAriaLabel,\n enableColumnFiltering = false,\n i18nStrings,\n}: ContentDisplayPreferenceProps) {\n const idPrefix = useUniqueId(componentPrefix);\n const i18n = useInternalI18n('collection-preferences');\n const [columnFilteringText, setColumnFilteringText] = useState('');\n\n const titleId = `${idPrefix}-title`;\n const descriptionId = `${idPrefix}-description`;\n\n const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {\n const sorted = getSortedOptions({ options, contentDisplay: value });\n const filtered = getFilteredOptions(sorted, columnFilteringText);\n return [sorted, filtered];\n }, [columnFilteringText, options, value]);\n\n const onToggle = (option: OptionWithVisibility) => {\n // We use sortedOptions as base and not value because there might be options that\n // are not in the value yet, so they're added as non-visible after the known ones.\n onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));\n };\n\n return (\n <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>\n <h3 className={getClassName('title')} id={titleId}>\n {i18n('contentDisplayPreference.title', title)}\n </h3>\n <p className={getClassName('description')} id={descriptionId}>\n {i18n('contentDisplayPreference.description', description)}\n </p>\n\n {/* Filter input /}\n {enableColumnFiltering && (\n <div className={getClassName('text-filter')}>\n <InternalTextFilter\n filteringText={columnFilteringText}\n filteringPlaceholder={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringPlaceholder',\n i18nStrings?.columnFilteringPlaceholder\n )}\n filteringAriaLabel={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringAriaLabel',\n i18nStrings?.columnFilteringAriaLabel\n )}\n filteringClearAriaLabel={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n i18nStrings?.columnFilteringClearFilterText\n )}\n onChange={({ detail }) => setColumnFilteringText(detail.filteringText)}\n countText={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringCountText',\n i18nStrings?.columnFilteringCountText\n ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)\n : undefined,\n format => format({ count: sortedAndFilteredOptions.length })\n )}\n />\n </div>\n )}\n\n {/ No match /}\n {sortedAndFilteredOptions.length === 0 && (\n <div className={getClassName('no-match')}>\n <InternalSpaceBetween size=\"s\" alignItems=\"center\">\n <InternalBox margin={{ top: 'm' }}>\n {i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText',\n i18nStrings?.columnFilteringNoMatchText\n )}\n </InternalBox>\n <InternalButton onClick={() => setColumnFilteringText('')}>\n {i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n i18nStrings?.columnFilteringClearFilterText\n )}\n </InternalButton>\n </InternalSpaceBetween>\n </div>\n )}\n\n {/ Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n <ul\n className={getClassName('option-list')}\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n role=\"list\"\n >\n <DndArea\n items={sortedAndFilteredOptions.map(data => ({ id: data.id, label: data.label, data }))}\n onItemsChange={items => onChange(items.map(({ id, data }) => ({ id, visible: data.visible })))}\n disableReorder={columnFilteringText.trim().length > 0}\n renderItem={({ ref, item, isSorting, isActive, style, className, dragHandleProps }) => {\n className = clsx(className, getOptionClassName(), isSorting && styles.sorting);\n const content = (\n <ContentDisplayOption\n ref={ref}\n option={item.data}\n onToggle={onToggle}\n dragHandleProps={dragHandleProps}\n />\n );\n return isActive ? (\n content\n ) : (\n <li className={className} style={style}>\n {content}\n </li>\n );\n }}\n i18nStrings={{\n liveAnnouncementDndStarted: i18n(\n 'contentDisplayPreference.liveAnnouncementDndStarted',\n liveAnnouncementDndStarted,\n format => (position, total) => format({ position, total })\n ),\n liveAnnouncementDndItemReordered: i18n(\n 'contentDisplayPreference.liveAnnouncementDndItemReordered',\n liveAnnouncementDndItemReordered,\n format => (initialPosition, currentPosition, total) =>\n format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n ),\n liveAnnouncementDndItemCommitted: i18n(\n 'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n liveAnnouncementDndItemCommitted,\n format => (initialPosition, finalPosition, total) =>\n format({\n initialPosition,\n finalPosition,\n total,\n isInitialPosition: `${initialPosition === finalPosition}`,\n })\n ),\n liveAnnouncementDndDiscarded: i18n(\n 'contentDisplayPreference.liveAnnouncementDndDiscarded',\n liveAnnouncementDndDiscarded\n ),\n dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel),\n dragHandleAriaDescription: i18n(\n 'contentDisplayPreference.dragHandleAriaDescription',\n dragHandleAriaDescription\n ),\n }}\n />\n </ul>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useState } from 'react';\nimport clsx from 'clsx';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport SortableArea from '../../internal/components/sortable-area';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption, { getClassName as getOptionClassName } from './content-display-option';\nimport { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display';\n\nconst getClassName = (suffix: string) => styles[`${componentPrefix}-${suffix}`];\n\ninterface ContentDisplayPreferenceProps extends CollectionPreferencesProps.ContentDisplayPreference {\n onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;\n value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}\n\nexport default function ContentDisplayPreference({\n title,\n description,\n options,\n value = options.map(({ id }) => ({\n id,\n visible: true,\n })),\n onChange,\n liveAnnouncementDndStarted,\n liveAnnouncementDndItemReordered,\n liveAnnouncementDndItemCommitted,\n liveAnnouncementDndDiscarded,\n dragHandleAriaDescription,\n dragHandleAriaLabel,\n enableColumnFiltering = false,\n i18nStrings,\n}: ContentDisplayPreferenceProps) {\n const idPrefix = useUniqueId(componentPrefix);\n const i18n = useInternalI18n('collection-preferences');\n const [columnFilteringText, setColumnFilteringText] = useState('');\n\n const titleId = `${idPrefix}-title`;\n const descriptionId = `${idPrefix}-description`;\n\n const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {\n const sorted = getSortedOptions({ options, contentDisplay: value });\n const filtered = getFilteredOptions(sorted, columnFilteringText);\n return [sorted, filtered];\n }, [columnFilteringText, options, value]);\n\n const onToggle = (option: OptionWithVisibility) => {\n // We use sortedOptions as base and not value because there might be options that\n // are not in the value yet, so they're added as non-visible after the known ones.\n onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));\n };\n\n return (\n <div className={styles[componentPrefix]} {...getAnalyticsInnerContextAttribute('contentDisplay')}>\n <h3 className={getClassName('title')} id={titleId}>\n {i18n('contentDisplayPreference.title', title)}\n </h3>\n <p className={getClassName('description')} id={descriptionId}>\n {i18n('contentDisplayPreference.description', description)}\n </p>\n\n {/* Filter input /}\n {enableColumnFiltering && (\n <div className={getClassName('text-filter')}>\n <InternalTextFilter\n filteringText={columnFilteringText}\n filteringPlaceholder={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringPlaceholder',\n i18nStrings?.columnFilteringPlaceholder\n )}\n filteringAriaLabel={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringAriaLabel',\n i18nStrings?.columnFilteringAriaLabel\n )}\n filteringClearAriaLabel={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n i18nStrings?.columnFilteringClearFilterText\n )}\n onChange={({ detail }) => setColumnFilteringText(detail.filteringText)}\n countText={i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringCountText',\n i18nStrings?.columnFilteringCountText\n ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)\n : undefined,\n format => format({ count: sortedAndFilteredOptions.length })\n )}\n />\n </div>\n )}\n\n {/ No match /}\n {sortedAndFilteredOptions.length === 0 && (\n <div className={getClassName('no-match')}>\n <InternalSpaceBetween size=\"s\" alignItems=\"center\">\n <InternalBox margin={{ top: 'm' }}>\n {i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringNoMatchText',\n i18nStrings?.columnFilteringNoMatchText\n )}\n </InternalBox>\n <InternalButton onClick={() => setColumnFilteringText('')}>\n {i18n(\n 'contentDisplayPreference.i18nStrings.columnFilteringClearFilterText',\n i18nStrings?.columnFilteringClearFilterText\n )}\n </InternalButton>\n </InternalSpaceBetween>\n </div>\n )}\n\n {/ Use explicit list role to work around Safari not announcing lists as such when list-style is set to none.\n See https://bugs.webkit.org/show_bug.cgi?id=170179 */}\n <ul\n className={getClassName('option-list')}\n aria-describedby={descriptionId}\n aria-labelledby={titleId}\n role=\"list\"\n >\n <SortableArea\n items={sortedAndFilteredOptions}\n itemDefinition={{ id: item => item.id, label: item => item.label }}\n onItemsChange={({ detail }) => onChange(detail.items)}\n disableReorder={columnFilteringText.trim().length > 0}\n renderItem={({ ref, item, style, className, dragHandleProps, isDragGhost }) => {\n className = clsx(className, getOptionClassName());\n const content = (\n <ContentDisplayOption ref={ref} option={item} onToggle={onToggle} dragHandleProps={dragHandleProps} />\n );\n if (isDragGhost) {\n return content;\n }\n return (\n <li className={className} style={style}>\n {content}\n </li>\n );\n }}\n i18nStrings={{\n liveAnnouncementDndStarted: i18n(\n 'contentDisplayPreference.liveAnnouncementDndStarted',\n liveAnnouncementDndStarted,\n format => (position, total) => format({ position, total })\n ),\n liveAnnouncementDndItemReordered: i18n(\n 'contentDisplayPreference.liveAnnouncementDndItemReordered',\n liveAnnouncementDndItemReordered,\n format => (initialPosition, currentPosition, total) =>\n format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })\n ),\n liveAnnouncementDndItemCommitted: i18n(\n 'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n liveAnnouncementDndItemCommitted,\n format => (initialPosition, finalPosition, total) =>\n format({\n initialPosition,\n finalPosition,\n total,\n isInitialPosition: `${initialPosition === finalPosition}`,\n })\n ),\n liveAnnouncementDndDiscarded: i18n(\n 'contentDisplayPreference.liveAnnouncementDndDiscarded',\n liveAnnouncementDndDiscarded\n ),\n dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel),\n dragHandleAriaDescription: i18n(\n 'contentDisplayPreference.dragHandleAriaDescription',\n dragHandleAriaDescription\n ),\n }}\n />\n </ul>\n </div>\n );\n}\n"]}

package/lib/internal/template/container/styles.css.js CHANGED Viewed

@@ -1,36 +1,37 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_14iqq_15851_189",
-  "fit-height": "awsui_fit-height_14iqq_15851_222",
-  "with-side-media": "awsui_with-side-media_14iqq_15851_227",
-  "variant-default": "awsui_variant-default_14iqq_15851_230",
-  "variant-stacked": "awsui_variant-stacked_14iqq_15851_230",
-  "refresh": "awsui_refresh_14iqq_15851_238",
-  "sticky-enabled": "awsui_sticky-enabled_14iqq_15851_288",
-  "with-top-media": "awsui_with-top-media_14iqq_15851_300",
-  "content-wrapper": "awsui_content-wrapper_14iqq_15851_305",
-  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_15851_310",
-  "media": "awsui_media_14iqq_15851_317",
-  "media-top": "awsui_media-top_14iqq_15851_335",
-  "media-side": "awsui_media-side_14iqq_15851_340",
-  "header": "awsui_header_14iqq_15851_346",
-  "header-full-page": "awsui_header-full-page_14iqq_15851_351",
-  "header-with-media": "awsui_header-with-media_14iqq_15851_354",
-  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_15851_360",
-  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_15851_364",
-  "header-stuck": "awsui_header-stuck_14iqq_15851_370",
-  "header-variant-cards": "awsui_header-variant-cards_14iqq_15851_380",
-  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_15851_383",
-  "with-paddings": "awsui_with-paddings_14iqq_15851_389",
-  "with-hidden-content": "awsui_with-hidden-content_14iqq_15851_398",
-  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_15851_456",
-  "header-cover": "awsui_header-cover_14iqq_15851_459",
-  "content": "awsui_content_14iqq_15851_305",
-  "content-fit-height": "awsui_content-fit-height_14iqq_15851_487",
-  "content-inner": "awsui_content-inner_14iqq_15851_493",
-  "with-header": "awsui_with-header_14iqq_15851_500",
-  "footer": "awsui_footer_14iqq_15851_504",
-  "with-divider": "awsui_with-divider_14iqq_15851_508"
+  "root": "awsui_root_14iqq_1yot8_189",
+  "fit-height": "awsui_fit-height_14iqq_1yot8_222",
+  "with-side-media": "awsui_with-side-media_14iqq_1yot8_227",
+  "variant-default": "awsui_variant-default_14iqq_1yot8_230",
+  "variant-stacked": "awsui_variant-stacked_14iqq_1yot8_230",
+  "refresh": "awsui_refresh_14iqq_1yot8_238",
+  "sticky-enabled": "awsui_sticky-enabled_14iqq_1yot8_288",
+  "with-top-media": "awsui_with-top-media_14iqq_1yot8_300",
+  "content-wrapper": "awsui_content-wrapper_14iqq_1yot8_305",
+  "content-wrapper-fit-height": "awsui_content-wrapper-fit-height_14iqq_1yot8_310",
+  "media": "awsui_media_14iqq_1yot8_317",
+  "media-top": "awsui_media-top_14iqq_1yot8_335",
+  "media-side": "awsui_media-side_14iqq_1yot8_340",
+  "header": "awsui_header_14iqq_1yot8_346",
+  "header-full-page": "awsui_header-full-page_14iqq_1yot8_351",
+  "header-variant-embedded": "awsui_header-variant-embedded_14iqq_1yot8_354",
+  "header-sticky-enabled": "awsui_header-sticky-enabled_14iqq_1yot8_354",
+  "header-with-media": "awsui_header-with-media_14iqq_1yot8_357",
+  "header-sticky-disabled": "awsui_header-sticky-disabled_14iqq_1yot8_363",
+  "header-stuck": "awsui_header-stuck_14iqq_1yot8_373",
+  "header-variant-cards": "awsui_header-variant-cards_14iqq_1yot8_383",
+  "header-dynamic-height": "awsui_header-dynamic-height_14iqq_1yot8_386",
+  "with-paddings": "awsui_with-paddings_14iqq_1yot8_392",
+  "with-hidden-content": "awsui_with-hidden-content_14iqq_1yot8_401",
+  "header-variant-full-page": "awsui_header-variant-full-page_14iqq_1yot8_459",
+  "header-cover": "awsui_header-cover_14iqq_1yot8_462",
+  "content": "awsui_content_14iqq_1yot8_305",
+  "content-fit-height": "awsui_content-fit-height_14iqq_1yot8_490",
+  "content-inner": "awsui_content-inner_14iqq_1yot8_496",
+  "with-header": "awsui_with-header_14iqq_1yot8_503",
+  "footer": "awsui_footer_14iqq_1yot8_507",
+  "with-divider": "awsui_with-divider_14iqq_1yot8_511"
 };

package/lib/internal/template/container/styles.scoped.css CHANGED Viewed

@@ -186,7 +186,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_root_14iqq_15851_189:not(#\9) {
+.awsui_root_14iqq_1yot8_189:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -220,15 +220,15 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   word-wrap: break-word;
   position: relative;
 }
-.awsui_root_14iqq_15851_189.awsui_fit-height_14iqq_15851_222:not(#\9) {
+.awsui_root_14iqq_1yot8_189.awsui_fit-height_14iqq_1yot8_222:not(#\9) {
   display: flex;
   flex-direction: column;
   block-size: 100%;
 }
-.awsui_root_14iqq_15851_189.awsui_fit-height_14iqq_15851_222.awsui_with-side-media_14iqq_15851_227:not(#\9) {
+.awsui_root_14iqq_1yot8_189.awsui_fit-height_14iqq_1yot8_222.awsui_with-side-media_14iqq_1yot8_227:not(#\9) {
   flex-direction: row;
 }
-.awsui_root_14iqq_15851_189.awsui_variant-default_14iqq_15851_230:not(#\9), .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9) {
+.awsui_root_14iqq_1yot8_189.awsui_variant-default_14iqq_1yot8_230:not(#\9), .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9) {
   background-color: var(--color-background-container-content-myy7cn, #ffffff);
   border-start-start-radius: var(--border-radius-container-3o3ats, 0px);
   border-start-end-radius: var(--border-radius-container-3o3ats, 0px);
@@ -236,11 +236,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-3o3ats, 0px);
   box-sizing: border-box;
 }
-.awsui_root_14iqq_15851_189.awsui_variant-default_14iqq_15851_230.awsui_refresh_14iqq_15851_238:not(#\9), .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230.awsui_refresh_14iqq_15851_238:not(#\9) {
+.awsui_root_14iqq_1yot8_189.awsui_variant-default_14iqq_1yot8_230.awsui_refresh_14iqq_1yot8_238:not(#\9), .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230.awsui_refresh_14iqq_1yot8_238:not(#\9) {
   border-block: solid var(--border-divider-section-width-iueskx, 1px) var(--color-border-divider-default-u5ytia, #eaeded);
   border-inline: solid var(--border-divider-section-width-iueskx, 1px) var(--color-border-divider-default-u5ytia, #eaeded);
 }
-.awsui_root_14iqq_15851_189.awsui_variant-default_14iqq_15851_230:not(#\9):not(.awsui_refresh_14iqq_15851_238)::before, .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9):not(.awsui_refresh_14iqq_15851_238)::before {
+.awsui_root_14iqq_1yot8_189.awsui_variant-default_14iqq_1yot8_230:not(#\9):not(.awsui_refresh_14iqq_1yot8_238)::before, .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9):not(.awsui_refresh_14iqq_1yot8_238)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -258,7 +258,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-3o3ats, 0px);
   z-index: 1;
 }
-.awsui_root_14iqq_15851_189.awsui_variant-default_14iqq_15851_230:not(#\9):not(.awsui_refresh_14iqq_15851_238)::after, .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9):not(.awsui_refresh_14iqq_15851_238)::after {
+.awsui_root_14iqq_1yot8_189.awsui_variant-default_14iqq_1yot8_230:not(#\9):not(.awsui_refresh_14iqq_1yot8_238)::after, .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9):not(.awsui_refresh_14iqq_1yot8_238)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -274,144 +274,147 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-3o3ats, 0px);
   box-shadow: var(--shadow-container-8g76zh, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9):not(:last-child), .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9):not(:last-child)::before, .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9):not(:last-child)::after {
+.awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9):not(:last-child), .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9):not(:last-child)::before, .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9):not(:last-child)::after {
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   border-block-end-width: 0;
 }
-.awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230 + .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9), .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230 + .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9)::before, .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230 + .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9)::after {
+.awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230 + .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9), .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230 + .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9)::before, .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230 + .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9)::after {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230 + .awsui_root_14iqq_15851_189.awsui_variant-stacked_14iqq_15851_230:not(#\9):not(.awsui_refresh_14iqq_15851_238)::before {
+.awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230 + .awsui_root_14iqq_1yot8_189.awsui_variant-stacked_14iqq_1yot8_230:not(#\9):not(.awsui_refresh_14iqq_1yot8_238)::before {
   border-block-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-default-u5ytia, #eaeded);
 }
-.awsui_root_14iqq_15851_189.awsui_sticky-enabled_14iqq_15851_288:not(#\9):not(.awsui_refresh_14iqq_15851_238)::before {
+.awsui_root_14iqq_1yot8_189.awsui_sticky-enabled_14iqq_1yot8_288:not(#\9):not(.awsui_refresh_14iqq_1yot8_238)::before {
   inset-block-start: calc(-1 * var(--border-container-top-width-197qfn, 1px));
 }
-.awsui_root_14iqq_15851_189.awsui_sticky-enabled_14iqq_15851_288:not(#\9):not(.awsui_refresh_14iqq_15851_238).awsui_variant-stacked_14iqq_15851_230::before {
+.awsui_root_14iqq_1yot8_189.awsui_sticky-enabled_14iqq_1yot8_288:not(#\9):not(.awsui_refresh_14iqq_1yot8_238).awsui_variant-stacked_14iqq_1yot8_230::before {
   inset-block-start: calc(-1 * var(--border-divider-section-width-iueskx, 1px));
 }
-.awsui_with-side-media_14iqq_15851_227:not(#\9) {
+.awsui_with-side-media_14iqq_1yot8_227:not(#\9) {
   display: flex;
   flex-direction: row;
 }
-.awsui_with-top-media_14iqq_15851_300:not(#\9) {
+.awsui_with-top-media_14iqq_1yot8_300:not(#\9) {
   display: flex;
   flex-direction: column;
 }
-.awsui_content-wrapper_14iqq_15851_305:not(#\9) {
+.awsui_content-wrapper_14iqq_1yot8_305:not(#\9) {
   display: flex;
   flex-direction: column;
   inline-size: 100%;
 }
-.awsui_content-wrapper-fit-height_14iqq_15851_310:not(#\9) {
+.awsui_content-wrapper-fit-height_14iqq_1yot8_310:not(#\9) {
   block-size: 100%;
   overflow: hidden;
   border-end-start-radius: var(--border-radius-container-3o3ats, 0px);
   border-end-end-radius: var(--border-radius-container-3o3ats, 0px);
 }
-.awsui_media_14iqq_15851_317:not(#\9) {
+.awsui_media_14iqq_1yot8_317:not(#\9) {
   overflow: hidden;
   flex-shrink: 0;
 }
-.awsui_media_14iqq_15851_317 img:not(#\9),
-.awsui_media_14iqq_15851_317 video:not(#\9),
-.awsui_media_14iqq_15851_317 picture:not(#\9) {
+.awsui_media_14iqq_1yot8_317 img:not(#\9),
+.awsui_media_14iqq_1yot8_317 video:not(#\9),
+.awsui_media_14iqq_1yot8_317 picture:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   object-fit: cover;
   object-position: center;
 }
-.awsui_media_14iqq_15851_317 iframe:not(#\9) {
+.awsui_media_14iqq_1yot8_317 iframe:not(#\9) {
   inline-size: 100%;
   block-size: 100%;
   border-block: 0;
   border-inline: 0;
 }
-.awsui_media-top_14iqq_15851_335:not(#\9) {
+.awsui_media-top_14iqq_1yot8_335:not(#\9) {
   max-block-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-3o3ats, 0px) - 1px);
   border-start-end-radius: calc(var(--border-radius-container-3o3ats, 0px) - 1px);
 }
-.awsui_media-side_14iqq_15851_340:not(#\9) {
+.awsui_media-side_14iqq_1yot8_340:not(#\9) {
   max-inline-size: 66%;
   border-start-start-radius: calc(var(--border-radius-container-3o3ats, 0px) - 1px);
   border-end-start-radius: calc(var(--border-radius-container-3o3ats, 0px) - 1px);
 }
-.awsui_header_14iqq_15851_346:not(#\9) {
+.awsui_header_14iqq_1yot8_346:not(#\9) {
   background-color: var(--color-background-container-header-9jxtzb, #fafafa);
   border-start-start-radius: var(--border-radius-container-3o3ats, 0px);
   border-start-end-radius: var(--border-radius-container-3o3ats, 0px);
 }
-.awsui_header_14iqq_15851_346.awsui_header-full-page_14iqq_15851_351:not(#\9) {
+.awsui_header_14iqq_1yot8_346.awsui_header-full-page_14iqq_1yot8_351:not(#\9) {
   background-color: var(--color-background-layout-main-f96353, #f2f3f3);
 }
-.awsui_header_14iqq_15851_346.awsui_header-with-media_14iqq_15851_354:not(#\9) {
+.awsui_header-variant-embedded_14iqq_1yot8_354.awsui_refresh_14iqq_1yot8_238:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1yot8_354) {
+  background-color: transparent;
+}
+.awsui_header_14iqq_1yot8_346.awsui_header-with-media_14iqq_1yot8_357:not(#\9) {
   background: none;
 }
-.awsui_header_14iqq_15851_346.awsui_header-with-media_14iqq_15851_354:not(#\9):not(:empty) {
+.awsui_header_14iqq_1yot8_346.awsui_header-with-media_14iqq_1yot8_357:not(#\9):not(:empty) {
   border-block-end: none;
 }
-.awsui_header-sticky-disabled_14iqq_15851_360:not(#\9) {
+.awsui_header-sticky-disabled_14iqq_1yot8_363:not(#\9) {
   position: relative;
   z-index: 1;
 }
-.awsui_header-sticky-enabled_14iqq_15851_364:not(#\9) {
+.awsui_header-sticky-enabled_14iqq_1yot8_354:not(#\9) {
   inset-block-start: 0;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   position: sticky;
   z-index: 800;
 }
-.awsui_header-stuck_14iqq_15851_370:not(#\9) {
+.awsui_header-stuck_14iqq_1yot8_373:not(#\9) {
   border-start-start-radius: 0;
   border-start-end-radius: 0;
   border-end-start-radius: 0;
   border-end-end-radius: 0;
 }
-.awsui_header-stuck_14iqq_15851_370:not(#\9)::before {
+.awsui_header-stuck_14iqq_1yot8_373:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
 }
-.awsui_header-stuck_14iqq_15851_370:not(#\9):not(.awsui_header-variant-cards_14iqq_15851_380) {
+.awsui_header-stuck_14iqq_1yot8_373:not(#\9):not(.awsui_header-variant-cards_14iqq_1yot8_383) {
   box-shadow: var(--shadow-sticky-embedded-bxmsxm, 0px 1px 4px -2px rgba(0, 28, 36, 0.5));
 }
-.awsui_header-dynamic-height_14iqq_15851_383.awsui_header-stuck_14iqq_15851_370:not(#\9) {
+.awsui_header-dynamic-height_14iqq_1yot8_386.awsui_header-stuck_14iqq_1yot8_373:not(#\9) {
   margin-block-end: calc(var(--line-height-heading-xl-66u22x, 36px) - var(--line-height-heading-l-643aq3, 22px));
 }
-.awsui_header_14iqq_15851_346:not(#\9):not(:empty) {
+.awsui_header_14iqq_1yot8_346:not(#\9):not(:empty) {
   border-block-end: var(--border-container-sticky-width-lhedby, 1px) solid var(--color-border-container-divider-xr1vlc, #eaeded);
 }
-.awsui_header_14iqq_15851_346.awsui_with-paddings_14iqq_15851_389:not(#\9) {
+.awsui_header_14iqq_1yot8_346.awsui_with-paddings_14iqq_1yot8_392:not(#\9) {
   padding-block-start: var(--space-container-header-top-2yfg3x, 12px);
   padding-block-end: var(--space-container-header-bottom-p6av5y, 12px);
   padding-inline: var(--space-container-horizontal-v3575u, 20px);
 }
-.awsui_header_14iqq_15851_346.awsui_with-paddings_14iqq_15851_389.awsui_header-variant-cards_14iqq_15851_380:not(#\9) {
+.awsui_header_14iqq_1yot8_346.awsui_with-paddings_14iqq_1yot8_392.awsui_header-variant-cards_14iqq_1yot8_383:not(#\9) {
   padding-block: var(--space-container-header-top-2yfg3x, 12px);
   padding-inline: var(--space-container-horizontal-v3575u, 20px);
 }
-.awsui_header_14iqq_15851_346.awsui_with-hidden-content_14iqq_15851_398:not(#\9) {
+.awsui_header_14iqq_1yot8_346.awsui_with-hidden-content_14iqq_1yot8_401:not(#\9) {
   border-end-start-radius: var(--border-radius-container-3o3ats, 0px);
   border-end-end-radius: var(--border-radius-container-3o3ats, 0px);
 }
-.awsui_header-variant-cards_14iqq_15851_380:not(#\9) {
+.awsui_header-variant-cards_14iqq_1yot8_383:not(#\9) {
   border-start-start-radius: var(--border-radius-container-3o3ats, 0px);
   border-start-end-radius: var(--border-radius-container-3o3ats, 0px);
   border-end-start-radius: var(--border-radius-container-3o3ats, 0px);
   border-end-end-radius: var(--border-radius-container-3o3ats, 0px);
   box-sizing: border-box;
 }
-.awsui_header-variant-cards_14iqq_15851_380.awsui_refresh_14iqq_15851_238:not(#\9) {
+.awsui_header-variant-cards_14iqq_1yot8_383.awsui_refresh_14iqq_1yot8_238:not(#\9) {
   border-block: solid var(--border-divider-section-width-iueskx, 1px) var(--color-border-divider-default-u5ytia, #eaeded);
   border-inline: solid var(--border-divider-section-width-iueskx, 1px) var(--color-border-divider-default-u5ytia, #eaeded);
 }
-.awsui_header-variant-cards_14iqq_15851_380:not(#\9):not(.awsui_refresh_14iqq_15851_238)::before {
+.awsui_header-variant-cards_14iqq_1yot8_383:not(#\9):not(.awsui_refresh_14iqq_1yot8_238)::before {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -429,7 +432,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-3o3ats, 0px);
   z-index: 1;
 }
-.awsui_header-variant-cards_14iqq_15851_380:not(#\9):not(.awsui_refresh_14iqq_15851_238)::after {
+.awsui_header-variant-cards_14iqq_1yot8_383:not(#\9):not(.awsui_refresh_14iqq_1yot8_238)::after {
   content: "";
   position: absolute;
   inset-inline-start: 0px;
@@ -445,26 +448,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-container-3o3ats, 0px);
   box-shadow: var(--shadow-container-8g76zh, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_header-variant-cards_14iqq_15851_380:not(#\9):not(.awsui_header-sticky-enabled_14iqq_15851_364) {
+.awsui_header-variant-cards_14iqq_1yot8_383:not(#\9):not(.awsui_header-sticky-enabled_14iqq_1yot8_354) {
   position: relative;
 }
-.awsui_header-variant-cards_14iqq_15851_380.awsui_header-stuck_14iqq_15851_370:not(#\9)::after, .awsui_header-variant-cards_14iqq_15851_380.awsui_header-stuck_14iqq_15851_370:not(#\9)::before {
+.awsui_header-variant-cards_14iqq_1yot8_383.awsui_header-stuck_14iqq_1yot8_373:not(#\9)::after, .awsui_header-variant-cards_14iqq_1yot8_383.awsui_header-stuck_14iqq_1yot8_373:not(#\9)::before {
   border-block: 0;
   border-inline: 0;
   border-start-start-radius: 0;
   border-start-end-radius: 0;
 }
-.awsui_header-variant-full-page_14iqq_15851_456.awsui_header-stuck_14iqq_15851_370:not(#\9) {
+.awsui_header-variant-full-page_14iqq_1yot8_459.awsui_header-stuck_14iqq_1yot8_373:not(#\9) {
   box-shadow: none;
 }
-.awsui_header-variant-full-page_14iqq_15851_456.awsui_header-stuck_14iqq_15851_370 > .awsui_header-cover_14iqq_15851_459:not(#\9) {
+.awsui_header-variant-full-page_14iqq_1yot8_459.awsui_header-stuck_14iqq_1yot8_373 > .awsui_header-cover_14iqq_1yot8_462:not(#\9) {
   background-color: var(--color-background-layout-main-f96353, #f2f3f3);
   inline-size: 100%;
   position: absolute;
   block-size: var(--space-scaled-s-8j7izy, 12px);
   inset-block-start: calc(-1 * var(--space-scaled-s-8j7izy, 12px));
 }
-.awsui_header-variant-full-page_14iqq_15851_456.awsui_header-stuck_14iqq_15851_370:not(#\9)::before {
+.awsui_header-variant-full-page_14iqq_1yot8_459.awsui_header-stuck_14iqq_1yot8_373:not(#\9)::before {
   content: "";
   position: absolute;
   pointer-events: none;
@@ -474,7 +477,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   inset-block-start: 0;
   border-block-end: solid var(--border-divider-section-width-iueskx, 1px) var(--color-border-divider-default-u5ytia, #eaeded);
 }
-.awsui_header-variant-full-page_14iqq_15851_456.awsui_header-stuck_14iqq_15851_370:not(#\9)::after {
+.awsui_header-variant-full-page_14iqq_1yot8_459.awsui_header-stuck_14iqq_1yot8_373:not(#\9)::after {
   content: "";
   position: absolute;
   inset: 0;
@@ -482,30 +485,30 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   clip-path: polygon(-999% 100%, 999% 100%, 999% 999%, -999% 999%);
 }
-.awsui_content_14iqq_15851_305:not(#\9) {
+.awsui_content_14iqq_1yot8_305:not(#\9) {
   flex: 1;
 }
-.awsui_content-fit-height_14iqq_15851_487:not(#\9) {
+.awsui_content-fit-height_14iqq_1yot8_490:not(#\9) {
   overflow: auto;
   display: flex;
   flex-direction: column;
 }
-.awsui_content-inner_14iqq_15851_493:not(#\9) {
+.awsui_content-inner_14iqq_1yot8_496:not(#\9) {
   flex: 1;
 }
-.awsui_content-inner_14iqq_15851_493.awsui_with-paddings_14iqq_15851_389:not(#\9) {
+.awsui_content-inner_14iqq_1yot8_496.awsui_with-paddings_14iqq_1yot8_392:not(#\9) {
   padding-block: var(--space-scaled-l-7e51pg, 20px);
   padding-inline: var(--space-container-horizontal-v3575u, 20px);
 }
-.awsui_content-inner_14iqq_15851_493.awsui_with-paddings_14iqq_15851_389.awsui_with-header_14iqq_15851_500:not(#\9) {
+.awsui_content-inner_14iqq_1yot8_496.awsui_with-paddings_14iqq_1yot8_392.awsui_with-header_14iqq_1yot8_503:not(#\9) {
   padding-block-start: var(--space-container-content-top-pvv221, 16px);
 }
-.awsui_footer_14iqq_15851_504.awsui_with-paddings_14iqq_15851_389:not(#\9) {
+.awsui_footer_14iqq_1yot8_507.awsui_with-paddings_14iqq_1yot8_392:not(#\9) {
   padding-block: var(--space-scaled-s-8j7izy, 12px);
   padding-inline: var(--space-container-horizontal-v3575u, 20px);
 }
-.awsui_footer_14iqq_15851_504.awsui_with-divider_14iqq_15851_508:not(#\9) {
+.awsui_footer_14iqq_1yot8_507.awsui_with-divider_14iqq_1yot8_511:not(#\9) {
   border-block-start: var(--border-divider-section-width-iueskx, 1px) solid var(--color-border-divider-default-u5ytia, #eaeded);
 }