@cloudscape-design/components 3.0.1013 → 3.0.1015

package/collection-preferences/content-display/content-display-option.d.ts

@@ -1,9 +1,7 @@
 import React from 'react';
-import { DragHandleProps } from '../../internal/components/drag-handle';
 import { OptionWithVisibility } from './utils';
 export declare const getClassName: (suffix?: string) => string;
 interface ContentDisplayOptionProps {
-  dragHandleProps: DragHandleProps;
   onToggle?: (option: OptionWithVisibility) => void;
   option: OptionWithVisibility;
 }

package/collection-preferences/content-display/content-display-option.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"content-display-option.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAIxD,OAAmB,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAEpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAK/C,eAAO,MAAM,YAAY,YAAa,MAAM,WAAgE,CAAC;AAE7G,UAAU,yBAAyB;IACjC,eAAe,EAAE,eAAe,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED,QAAA,MAAM,oBAAoB,kGAwBzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"content-display-option.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAKxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAK/C,eAAO,MAAM,YAAY,YAAa,MAAM,WAAgE,CAAC;AAE7G,UAAU,yBAAyB;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED,QAAA,MAAM,oBAAoB,kGAoBzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

package/collection-preferences/content-display/content-display-option.js

@@ -2,17 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { forwardRef } from 'react';
 import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
-import DragHandle from '../../internal/components/drag-handle';
 import InternalToggle from '../../toggle/internal';
 import styles from '../styles.css.js';
 const componentPrefix = 'content-display-option';
 export const getClassName = (suffix) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];
-const ContentDisplayOption = forwardRef(({ dragHandleProps, onToggle, option }, ref) => {
+const ContentDisplayOption = forwardRef(({ onToggle, option }, ref) => {
     const idPrefix = useUniqueId(componentPrefix);
     const controlId = `${idPrefix}-control-${option.id}`;
     return (React.createElement("div", { ref: ref, className: getClassName('content') },
-        React.createElement("div", { className: styles['drag-handle-wrapper'] },
-            React.createElement(DragHandle, Object.assign({}, dragHandleProps))),
         React.createElement("label", { className: getClassName('label'), htmlFor: controlId }, option.label),
         React.createElement("div", { className: getClassName('toggle') },
             React.createElement(InternalToggle, { checked: !!option.visible, onChange: () => onToggle && onToggle(option), disabled: option.alwaysVisible === true, controlId: controlId }))));

package/collection-preferences/content-display/content-display-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-display-option.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,UAA+B,MAAM,uCAAuC,CAAC;AACpF,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAGnD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,eAAe,GAAG,wBAAwB,CAAC;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAe,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAQ7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CAAC,EAAE,eAAe,EAAE,QAAQ,EAAE,MAAM,EAA6B,EAAE,GAAiC,EAAE,EAAE;IACtG,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,QAAQ,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC;IACrD,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;QAC/C,6BAAK,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC;YAC3C,oBAAC,UAAU,oBAAK,eAAe,EAAI,CAC/B;QAEN,+BAAO,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,IACxD,MAAM,CAAC,KAAK,CACP;QACR,6BAAK,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC;YACpC,oBAAC,cAAc,IACb,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,EAC5C,QAAQ,EAAE,MAAM,CAAC,aAAa,KAAK,IAAI,EACvC,SAAS,EAAE,SAAS,GACpB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ForwardedRef, forwardRef } from 'react';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport DragHandle, { DragHandleProps } from '../../internal/components/drag-handle';\nimport InternalToggle from '../../toggle/internal';\nimport { OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display-option';\nexport const getClassName = (suffix?: string) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];\n\ninterface ContentDisplayOptionProps {\n  dragHandleProps: DragHandleProps;\n  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n}\n\nconst ContentDisplayOption = forwardRef(\n  ({ dragHandleProps, onToggle, option }: ContentDisplayOptionProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const idPrefix = useUniqueId(componentPrefix);\n    const controlId = `${idPrefix}-control-${option.id}`;\n    return (\n      <div ref={ref} className={getClassName('content')}>\n        <div className={styles['drag-handle-wrapper']}>\n          <DragHandle {...dragHandleProps} />\n        </div>\n\n        <label className={getClassName('label')} htmlFor={controlId}>\n          {option.label}\n        </label>\n        <div className={getClassName('toggle')}>\n          <InternalToggle\n            checked={!!option.visible}\n            onChange={() => onToggle && onToggle(option)}\n            disabled={option.alwaysVisible === true}\n            controlId={controlId}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default ContentDisplayOption;\n"]}
+{"version":3,"file":"content-display-option.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAGnD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,eAAe,GAAG,wBAAwB,CAAC;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAe,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AAO7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAA6B,EAAE,GAAiC,EAAE,EAAE;IACrF,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,QAAQ,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC;IACrD,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;QAC/C,+BAAO,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,OAAO,EAAE,SAAS,IACxD,MAAM,CAAC,KAAK,CACP;QACR,6BAAK,SAAS,EAAE,YAAY,CAAC,QAAQ,CAAC;YACpC,oBAAC,cAAc,IACb,OAAO,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EACzB,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,QAAQ,CAAC,MAAM,CAAC,EAC5C,QAAQ,EAAE,MAAM,CAAC,aAAa,KAAK,IAAI,EACvC,SAAS,EAAE,SAAS,GACpB,CACE,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,oBAAoB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ForwardedRef, forwardRef } from 'react';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalToggle from '../../toggle/internal';\nimport { OptionWithVisibility } from './utils';\n\nimport styles from '../styles.css.js';\n\nconst componentPrefix = 'content-display-option';\nexport const getClassName = (suffix?: string) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];\n\ninterface ContentDisplayOptionProps {\n  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n}\n\nconst ContentDisplayOption = forwardRef(\n  ({ onToggle, option }: ContentDisplayOptionProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const idPrefix = useUniqueId(componentPrefix);\n    const controlId = `${idPrefix}-control-${option.id}`;\n    return (\n      <div ref={ref} className={getClassName('content')}>\n        <label className={getClassName('label')} htmlFor={controlId}>\n          {option.label}\n        </label>\n        <div className={getClassName('toggle')}>\n          <InternalToggle\n            checked={!!option.visible}\n            onChange={() => onToggle && onToggle(option)}\n            disabled={option.alwaysVisible === true}\n            controlId={controlId}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default ContentDisplayOption;\n"]}

package/collection-preferences/content-display/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAcA,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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAkBA,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,eA0H/B"}

package/collection-preferences/content-display/index.js

@@ -1,16 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useMemo, useState } from 'react';
-import clsx from 'clsx';
 import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import InternalBox from '../../box/internal';
 import InternalButton from '../../button/internal';
 import { useInternalI18n } from '../../i18n/context';
-import SortableArea from '../../internal/components/sortable-area';
+import { formatDndItemCommitted, formatDndItemReordered, formatDndStarted, } from '../../internal/components/sortable-area/use-live-announcements';
+import InternalList from '../../list/internal';
 import InternalSpaceBetween from '../../space-between/internal';
 import InternalTextFilter from '../../text-filter/internal';
 import { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';
-import ContentDisplayOption, { getClassName as getOptionClassName } from './content-display-option';
+import ContentDisplayOption from './content-display-option';
 import { getFilteredOptions, getSortedOptions } from './utils';
 import styles from '../styles.css.js';
 const componentPrefix = 'content-display';
@@ -45,26 +45,19 @@ export default function ContentDisplayPreference({ title, description, options,
             React.createElement(InternalSpaceBetween, { size: "s", alignItems: "center" },
                 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(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}` })),
-                    liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, format => (initialPosition, finalPosition, total) => format({
-                        initialPosition,
-                        finalPosition,
-                        total,
-                        isInitialPosition: `${initialPosition === finalPosition}`,
-                    })),
-                    liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
-                    dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel),
-                    dragHandleAriaDescription: i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription),
-                } }))));
+        React.createElement(InternalList, { items: sortedAndFilteredOptions, renderItem: item => ({
+                id: item.id,
+                content: React.createElement(ContentDisplayOption, { option: item, onToggle: onToggle }),
+                announcementLabel: item.label,
+            }), disableItemPaddings: true, sortable: true, sortDisabled: columnFilteringText.trim().length > 0, onSortingChange: ({ detail: { items } }) => {
+                onChange(items);
+            }, ariaDescribedby: descriptionId, ariaLabelledby: titleId, i18nStrings: {
+                liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', liveAnnouncementDndStarted, formatDndStarted),
+                liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, formatDndItemReordered),
+                liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, formatDndItemCommitted),
+                liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
+                dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel),
+                dragHandleAriaDescription: i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription),
+            } })));
 }
 //# sourceMappingURL=index.js.map

package/collection-preferences/content-display/index.js.map

@@ -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 { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport SortableArea from '../../internal/components/sortable-area';\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"]}
+{"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';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport {\n  formatDndItemCommitted,\n  formatDndItemReordered,\n  formatDndStarted,\n} from '../../internal/components/sortable-area/use-live-announcements';\nimport InternalList from '../../list/internal';\nimport InternalSpaceBetween from '../../space-between/internal';\nimport InternalTextFilter from '../../text-filter/internal';\nimport { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';\nimport { CollectionPreferencesProps } from '../interfaces';\nimport ContentDisplayOption 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      <InternalList\n        items={sortedAndFilteredOptions}\n        renderItem={item => ({\n          id: item.id,\n          content: <ContentDisplayOption option={item} onToggle={onToggle} />,\n          announcementLabel: item.label,\n        })}\n        disableItemPaddings={true}\n        sortable={true}\n        sortDisabled={columnFilteringText.trim().length > 0}\n        onSortingChange={({ detail: { items } }) => {\n          onChange(items);\n        }}\n        ariaDescribedby={descriptionId}\n        ariaLabelledby={titleId}\n        i18nStrings={{\n          liveAnnouncementDndStarted: i18n(\n            'contentDisplayPreference.liveAnnouncementDndStarted',\n            liveAnnouncementDndStarted,\n            formatDndStarted\n          ),\n          liveAnnouncementDndItemReordered: i18n(\n            'contentDisplayPreference.liveAnnouncementDndItemReordered',\n            liveAnnouncementDndItemReordered,\n            formatDndItemReordered\n          ),\n          liveAnnouncementDndItemCommitted: i18n(\n            'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n            liveAnnouncementDndItemCommitted,\n            formatDndItemCommitted\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    </div>\n  );\n}\n"]}

package/collection-preferences/interfaces.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { BaseComponentProps } from '../internal/base-component';
+import { SortableAreaProps } from '../internal/components/sortable-area';
 import { NonCancelableEventHandler } from '../internal/events';
 import { BaseModalProps } from '../modal/interfaces';
 export interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps, BaseModalProps {
@@ -217,16 +218,10 @@ export declare namespace CollectionPreferencesProps {
     contentDisplay?: ReadonlyArray<ContentDisplayItem>;
     custom?: CustomPreferenceType;
   }
-  export interface ContentDisplayPreference {
+  export interface ContentDisplayPreference extends SortableAreaProps.DndAreaI18nStrings {
     title?: string;
     description?: string;
     options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;
-    liveAnnouncementDndStarted?: (position: number, total: number) => string;
-    liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;
-    liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;
-    liveAnnouncementDndDiscarded?: string;
-    dragHandleAriaLabel?: string;
-    dragHandleAriaDescription?: string;
     enableColumnFiltering?: boolean;
     i18nStrings?: ContentDisplayPreferenceI18nStrings;
   }

package/collection-preferences/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"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"}

package/collection-preferences/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseModalProps } from '../modal/interfaces';\n\nexport interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps, BaseModalProps {\n  /**\n   * Specifies the title of the preferences modal dialog. It is also used as an `aria-label` for the trigger button.\n   * @i18n\n   */\n  title?: string;\n  /**\n   * Label of the confirm button in the modal footer.\n   * @i18n\n   */\n  confirmLabel?: string;\n  /**\n   * Label of the cancel button in the modal footer.\n   * @i18n\n   */\n  cancelLabel?: string;\n  /**\n   * Adds an aria-label to the close button, for accessibility.\n   * @i18n\n   */\n  closeAriaLabel?: string;\n  /**\n   * Determines whether the preferences trigger button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Configures the built-in \"page size selection\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `options` - Specifies an array of options for page size selection. Each entry contains:\n   *   - `value` (number) - The value for the radio button (that is, the number of items per page).\n   *   - `label` (string) - A label for the radio button (for example, \"10 resources\").\n   *\n   * You must set the current value in the `preferences.pageSize` property.\n   * @i18n\n   */\n  pageSizePreference?: CollectionPreferencesProps.PageSizePreference;\n  /**\n   * Configures the built-in \"wrap lines\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.wrapLines` property.\n   * @i18n\n   */\n  wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;\n  /**\n   * Configures the built-in \"striped rows\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.stripedRows` property.\n   * @i18n\n   */\n  stripedRowsPreference?: CollectionPreferencesProps.StripedRowsPreference;\n  /**\n   * Configures the content density preference (Comfortable / Compact).\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.contentDensity` property.\n   * @i18n\n   */\n  contentDensityPreference?: CollectionPreferencesProps.ContentDensityPreference;\n  /**\n   * Configures the sticky columns preference that can be set for both left and right columns.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for each radio group.\n   * - `description` (string) - Specifies the text displayed below each radio group label.\n   *\n   * You must set the current value in the `preferences.stickyColumns` property.\n   */\n  stickyColumnsPreference?: CollectionPreferencesProps.StickyColumnsPreference;\n  /**\n   * Configures the built-in content display preference for order and visibility of the table columns.\n   *\n   * Recommended for table and not applicable for cards.\n   *\n   * Cannot be used together with `visibleContentPreference`.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `description` (string) - Specifies the description displayed below the title.\n   * - `options` - Specifies an array of options for reordering and visible content selection.\n   * - `enableColumnFiltering` (boolean) - Adds a columns filter.\n   * - `liveAnnouncementDndStarted` ((position: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an option is picked.\n   * - `liveAnnouncementDndDiscarded` (string) - (Optional) Adds a message to be announced by screen readers when a reordering action is canceled.\n   * - `liveAnnouncementDndItemReordered` ((initialPosition: number, currentPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is being moved.\n   * - `liveAnnouncementDndItemCommitted` ((initialPosition: number, finalPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when a reordering action is committed.\n   * - `dragHandleAriaDescription` (string) - (Optional) Adds an ARIA description for the drag handle.\n   * - `dragHandleAriaLabel` (string) - (Optional) Adds an ARIA label for the drag handle.\n   *\n   * Each option contains the following:\n   * - `id` (string) - Corresponds to a table column `id`.\n   * - `label` (string) - Specifies a short description of the content.\n   * - `alwaysVisible` (boolean) - (Optional) Determines whether the visibility is always on and therefore cannot be toggled. This is set to `false` by default.\n   *\n   * You must provide an ordered list of the items to display in the `preferences.contentDisplay` property.\n   * @i18n\n   */\n  contentDisplayPreference?: CollectionPreferencesProps.ContentDisplayPreference;\n  /**\n   * Configures the built-in visible sections preference for cards or visible columns for table.\n   *\n   * Recommended for cards. For table use `contentDisplayPreference` instead.\n   *\n   * Cannot be used together with `contentDisplayPreference`.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `options` - Specifies an array of groups of options for visible content selection.\n   *\n   * Each group of options contains the following:\n   * - `label` (string) - The text to display as a title for the options group.\n   * - `options` - Specifies an array of options in the group. Each option contains the following:\n   *   - `id` (string) - Corresponds to a column `id` for tables or to a section `id` for cards.\n   *   - `label` (string) - Specifies a short description of the content.\n   *   - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.\n   *\n   * You must set the current list of visible content `id`s in the `preferences.visibleContent` property.\n   *\n   * **Deprecated** in table, replaced by `contentDisplayPreference`.\n   */\n  visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;\n  /**\n   * Specifies the current preference values. This includes both built-in and custom preferences.\n   *\n   * It contains the following:\n   * - `pageSize` (number) - (Optional)\n   * - `wrapLines` (boolean) - (Optional)\n   * - `contentDisplay` (ReadonlyArray<ContentDisplayItem>) - (Optional) Specifies the list of content and their visibility. The order of the elements influences the display.\n   * - `visibleContent` (ReadonlyArray<string>) - Specifies the list of visible content `id`s. The order of the `id`s does not influence the display. If the `contentDisplay` property is set, this property is ignored.\n   * - `custom` (CustomPreferenceType) - Specifies the value for your custom preference.\n   */\n  preferences?: CollectionPreferencesProps.Preferences<CustomPreferenceType>;\n  /**\n   * Configures custom preferences. The function receives two parameters:\n   *\n   * - `customValue` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in `preferences.custom`.\n   * - `setCustomValue` - A function that is called to notify a state update.\n   *\n   * It should return the content of your custom preference, for example:\n   * ```\n   * (customValue, setCustomValue) => (\n   *   <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />\n   * )\n   * ```\n   *\n   * When the user confirms the changes, the new value is passed in the `detail.custom` property of the `onConfirm` listener.\n   * When the user cancels the changes, the `customValue` is reset to the one present in `preferences.custom` property.\n   *\n   * **Display**\n   * - If any of the built-in preferences (`pageSizePreference`, `wrapLinesPreference`, or `visibleContentPreference`) are displayed,\n   * the custom content is displayed at the bottom of the left column within the modal.\n   * - If no built-in preference is displayed, the custom content occupies the whole modal.\n   */\n  customPreference?: (\n    customValue: CustomPreferenceType,\n    setCustomValue: React.Dispatch<CustomPreferenceType>\n  ) => React.ReactNode;\n  /**\n   * Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.\n   */\n  onCancel?: NonCancelableEventHandler;\n  /**\n   * Called when the user confirms a preference change using the confirm button in the modal footer.\n   *\n   * The event `detail` contains the following:\n   * - `contentDensity` (boolean) - (Optional) The current content density preference value. Available only if you specify the `contentDensityPreference` property.\n   * - `contentDisplay` (ReadonlyArray<ContentDisplayItem>) - (Optional) The ordered list of table columns and their visibility. Available only if you specify the `contentDisplayPreference` property.\n   * - `custom` (CustomPreferenceType) - (Optional) The selected value for your custom preference.\n   * - `pageSize` (number) - (Optional) The selected page size value. Available only if you specify the `pageSizePreference` property.\n   * - `stickyColumns` (CollectionPreferencesProps.StickyColumns) - (Optional) The current sticky columns preference value. Available only if you specify the `stickyColumnsPreference` property.\n   * - `stripedRows` (boolean) - (Optional) The current striped rows preference value. Available only if you specify the `stripedRowsPreference` property.\n   * - `visibleContent` (ReadonlyArray<string>) - (Optional) The list of selected content `id`s. Available only if you specify the `visibleContentPreference` property.\n   * - `wrapLines` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the `wrapLinesPreference` property.\n   *\n   * The values for all configured preferences are present even if the user didn't change their values.\n   */\n  onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;\n  /**\n   * Content displayed before the preferences. Use it to display additional information relating to the preferences.\n   */\n  contentBefore?: React.ReactNode;\n}\n\nexport namespace CollectionPreferencesProps {\n  export interface Preferences<CustomPreferenceType = any> {\n    pageSize?: number;\n    wrapLines?: boolean;\n    stripedRows?: boolean;\n    contentDensity?: 'comfortable' | 'compact';\n    visibleContent?: ReadonlyArray<string>;\n    stickyColumns?: StickyColumns;\n    contentDisplay?: ReadonlyArray<ContentDisplayItem>;\n    custom?: CustomPreferenceType;\n  }\n\n  export interface ContentDisplayPreference {\n    title?: string;\n    description?: string;\n    options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n    liveAnnouncementDndStarted?: (position: number, total: number) => string;\n    liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;\n    liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;\n    liveAnnouncementDndDiscarded?: string;\n    dragHandleAriaLabel?: string;\n    dragHandleAriaDescription?: string;\n    enableColumnFiltering?: boolean;\n    i18nStrings?: ContentDisplayPreferenceI18nStrings;\n  }\n\n  export interface ContentDisplayOption {\n    id: string;\n    label: string;\n    alwaysVisible?: boolean;\n  }\n\n  export interface ContentDisplayItem {\n    id: string;\n    visible: boolean;\n  }\n\n  export interface VisibleContentPreference {\n    title: string;\n    options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>;\n  }\n\n  export interface VisibleContentOptionsGroup {\n    label: string;\n    options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n  }\n\n  export interface VisibleContentOption {\n    id: string;\n    label: string;\n    editable?: boolean;\n  }\n\n  export interface PageSizePreference {\n    title?: string;\n    options: ReadonlyArray<PageSizeOption>;\n  }\n\n  export interface PageSizeOption {\n    value: number;\n    label?: string;\n  }\n\n  export interface WrapLinesPreference {\n    label?: string;\n    description?: string;\n  }\n\n  export interface StripedRowsPreference {\n    label?: string;\n    description?: string;\n  }\n\n  export interface ContentDensityPreference {\n    label?: string;\n    description?: string;\n  }\n\n  interface StickyColumns {\n    first?: number;\n    last?: number;\n  }\n\n  interface StickyColumnPreference {\n    title: string;\n    description: string;\n    options: ReadonlyArray<{\n      label: string;\n      value: number;\n    }>;\n  }\n  export interface StickyColumnsPreference {\n    firstColumns?: StickyColumnPreference;\n    lastColumns?: StickyColumnPreference;\n  }\n\n  export interface ContentDisplayPreferenceI18nStrings {\n    /**\n     * Specifies a `placeholder` for the filtering input.\n     * @i18n\n     */\n    columnFilteringPlaceholder?: string;\n\n    /**\n     * Specifies an `aria-label` for the filtering input.\n     * @i18n\n     */\n    columnFilteringAriaLabel?: string;\n\n    /**\n     * Specifies the `count text` for the filtering input to reflect matches found.\n     * @i18n\n     */\n    columnFilteringCountText?: (count: number) => string;\n\n    /**\n     * Specifies the `no match` text for when there are no matching options in the filtering.\n     * @i18n\n     */\n    columnFilteringNoMatchText?: string;\n\n    /**\n     * Specifies both an `aria-label` for the clear filtering input action and the `clear filter button` text for the no match button.\n     * @i18n\n     */\n    columnFilteringClearFilterText?: string;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/collection-preferences/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { BaseComponentProps } from '../internal/base-component';\nimport { SortableAreaProps } from '../internal/components/sortable-area';\nimport { NonCancelableEventHandler } from '../internal/events';\nimport { BaseModalProps } from '../modal/interfaces';\n\nexport interface CollectionPreferencesProps<CustomPreferenceType = any> extends BaseComponentProps, BaseModalProps {\n  /**\n   * Specifies the title of the preferences modal dialog. It is also used as an `aria-label` for the trigger button.\n   * @i18n\n   */\n  title?: string;\n  /**\n   * Label of the confirm button in the modal footer.\n   * @i18n\n   */\n  confirmLabel?: string;\n  /**\n   * Label of the cancel button in the modal footer.\n   * @i18n\n   */\n  cancelLabel?: string;\n  /**\n   * Adds an aria-label to the close button, for accessibility.\n   * @i18n\n   */\n  closeAriaLabel?: string;\n  /**\n   * Determines whether the preferences trigger button is disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Configures the built-in \"page size selection\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `options` - Specifies an array of options for page size selection. Each entry contains:\n   *   - `value` (number) - The value for the radio button (that is, the number of items per page).\n   *   - `label` (string) - A label for the radio button (for example, \"10 resources\").\n   *\n   * You must set the current value in the `preferences.pageSize` property.\n   * @i18n\n   */\n  pageSizePreference?: CollectionPreferencesProps.PageSizePreference;\n  /**\n   * Configures the built-in \"wrap lines\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.wrapLines` property.\n   * @i18n\n   */\n  wrapLinesPreference?: CollectionPreferencesProps.WrapLinesPreference;\n  /**\n   * Configures the built-in \"striped rows\" preference.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.stripedRows` property.\n   * @i18n\n   */\n  stripedRowsPreference?: CollectionPreferencesProps.StripedRowsPreference;\n  /**\n   * Configures the content density preference (Comfortable / Compact).\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for the option checkbox.\n   * - `description` (string) - Specifies the text displayed below the checkbox label.\n   *\n   * You must set the current value in the `preferences.contentDensity` property.\n   * @i18n\n   */\n  contentDensityPreference?: CollectionPreferencesProps.ContentDensityPreference;\n  /**\n   * Configures the sticky columns preference that can be set for both left and right columns.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `label` (string) - Specifies the label for each radio group.\n   * - `description` (string) - Specifies the text displayed below each radio group label.\n   *\n   * You must set the current value in the `preferences.stickyColumns` property.\n   */\n  stickyColumnsPreference?: CollectionPreferencesProps.StickyColumnsPreference;\n  /**\n   * Configures the built-in content display preference for order and visibility of the table columns.\n   *\n   * Recommended for table and not applicable for cards.\n   *\n   * Cannot be used together with `visibleContentPreference`.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `description` (string) - Specifies the description displayed below the title.\n   * - `options` - Specifies an array of options for reordering and visible content selection.\n   * - `enableColumnFiltering` (boolean) - Adds a columns filter.\n   * - `liveAnnouncementDndStarted` ((position: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an option is picked.\n   * - `liveAnnouncementDndDiscarded` (string) - (Optional) Adds a message to be announced by screen readers when a reordering action is canceled.\n   * - `liveAnnouncementDndItemReordered` ((initialPosition: number, currentPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when an item is being moved.\n   * - `liveAnnouncementDndItemCommitted` ((initialPosition: number, finalPosition: number, total: number) => string) - (Optional) Adds a message to be announced by screen readers when a reordering action is committed.\n   * - `dragHandleAriaDescription` (string) - (Optional) Adds an ARIA description for the drag handle.\n   * - `dragHandleAriaLabel` (string) - (Optional) Adds an ARIA label for the drag handle.\n   *\n   * Each option contains the following:\n   * - `id` (string) - Corresponds to a table column `id`.\n   * - `label` (string) - Specifies a short description of the content.\n   * - `alwaysVisible` (boolean) - (Optional) Determines whether the visibility is always on and therefore cannot be toggled. This is set to `false` by default.\n   *\n   * You must provide an ordered list of the items to display in the `preferences.contentDisplay` property.\n   * @i18n\n   */\n  contentDisplayPreference?: CollectionPreferencesProps.ContentDisplayPreference;\n  /**\n   * Configures the built-in visible sections preference for cards or visible columns for table.\n   *\n   * Recommended for cards. For table use `contentDisplayPreference` instead.\n   *\n   * Cannot be used together with `contentDisplayPreference`.\n   *\n   * If you set it, the component displays this preference in the modal.\n   *\n   * It contains the following:\n   * - `title` (string) - Specifies the text displayed at the top of the preference.\n   * - `options` - Specifies an array of groups of options for visible content selection.\n   *\n   * Each group of options contains the following:\n   * - `label` (string) - The text to display as a title for the options group.\n   * - `options` - Specifies an array of options in the group. Each option contains the following:\n   *   - `id` (string) - Corresponds to a column `id` for tables or to a section `id` for cards.\n   *   - `label` (string) - Specifies a short description of the content.\n   *   - `editable` (boolean) - (Optional) Determines whether the user is able to toggle its visibility. This is `true` by default.\n   *\n   * You must set the current list of visible content `id`s in the `preferences.visibleContent` property.\n   *\n   * **Deprecated** in table, replaced by `contentDisplayPreference`.\n   */\n  visibleContentPreference?: CollectionPreferencesProps.VisibleContentPreference;\n  /**\n   * Specifies the current preference values. This includes both built-in and custom preferences.\n   *\n   * It contains the following:\n   * - `pageSize` (number) - (Optional)\n   * - `wrapLines` (boolean) - (Optional)\n   * - `contentDisplay` (ReadonlyArray<ContentDisplayItem>) - (Optional) Specifies the list of content and their visibility. The order of the elements influences the display.\n   * - `visibleContent` (ReadonlyArray<string>) - Specifies the list of visible content `id`s. The order of the `id`s does not influence the display. If the `contentDisplay` property is set, this property is ignored.\n   * - `custom` (CustomPreferenceType) - Specifies the value for your custom preference.\n   */\n  preferences?: CollectionPreferencesProps.Preferences<CustomPreferenceType>;\n  /**\n   * Configures custom preferences. The function receives two parameters:\n   *\n   * - `customValue` (CustomPreferenceType) - Current value for your custom preference. It is initialized using the value you provide in `preferences.custom`.\n   * - `setCustomValue` - A function that is called to notify a state update.\n   *\n   * It should return the content of your custom preference, for example:\n   * ```\n   * (customValue, setCustomValue) => (\n   *   <Checkbox checked={customValue} onChange={({ detail }) => setCustomValue(detail.checked)} />\n   * )\n   * ```\n   *\n   * When the user confirms the changes, the new value is passed in the `detail.custom` property of the `onConfirm` listener.\n   * When the user cancels the changes, the `customValue` is reset to the one present in `preferences.custom` property.\n   *\n   * **Display**\n   * - If any of the built-in preferences (`pageSizePreference`, `wrapLinesPreference`, or `visibleContentPreference`) are displayed,\n   * the custom content is displayed at the bottom of the left column within the modal.\n   * - If no built-in preference is displayed, the custom content occupies the whole modal.\n   */\n  customPreference?: (\n    customValue: CustomPreferenceType,\n    setCustomValue: React.Dispatch<CustomPreferenceType>\n  ) => React.ReactNode;\n  /**\n   * Called when the user cancels a preference change using the cancel button in the modal footer or by dismissing the modal.\n   */\n  onCancel?: NonCancelableEventHandler;\n  /**\n   * Called when the user confirms a preference change using the confirm button in the modal footer.\n   *\n   * The event `detail` contains the following:\n   * - `contentDensity` (boolean) - (Optional) The current content density preference value. Available only if you specify the `contentDensityPreference` property.\n   * - `contentDisplay` (ReadonlyArray<ContentDisplayItem>) - (Optional) The ordered list of table columns and their visibility. Available only if you specify the `contentDisplayPreference` property.\n   * - `custom` (CustomPreferenceType) - (Optional) The selected value for your custom preference.\n   * - `pageSize` (number) - (Optional) The selected page size value. Available only if you specify the `pageSizePreference` property.\n   * - `stickyColumns` (CollectionPreferencesProps.StickyColumns) - (Optional) The current sticky columns preference value. Available only if you specify the `stickyColumnsPreference` property.\n   * - `stripedRows` (boolean) - (Optional) The current striped rows preference value. Available only if you specify the `stripedRowsPreference` property.\n   * - `visibleContent` (ReadonlyArray<string>) - (Optional) The list of selected content `id`s. Available only if you specify the `visibleContentPreference` property.\n   * - `wrapLines` (boolean) - (Optional) The current line wrapping preference value. Available only if you specify the `wrapLinesPreference` property.\n   *\n   * The values for all configured preferences are present even if the user didn't change their values.\n   */\n  onConfirm?: NonCancelableEventHandler<CollectionPreferencesProps.Preferences<CustomPreferenceType>>;\n  /**\n   * Content displayed before the preferences. Use it to display additional information relating to the preferences.\n   */\n  contentBefore?: React.ReactNode;\n}\n\nexport namespace CollectionPreferencesProps {\n  export interface Preferences<CustomPreferenceType = any> {\n    pageSize?: number;\n    wrapLines?: boolean;\n    stripedRows?: boolean;\n    contentDensity?: 'comfortable' | 'compact';\n    visibleContent?: ReadonlyArray<string>;\n    stickyColumns?: StickyColumns;\n    contentDisplay?: ReadonlyArray<ContentDisplayItem>;\n    custom?: CustomPreferenceType;\n  }\n\n  export interface ContentDisplayPreference extends SortableAreaProps.DndAreaI18nStrings {\n    title?: string;\n    description?: string;\n    options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n    enableColumnFiltering?: boolean;\n    i18nStrings?: ContentDisplayPreferenceI18nStrings;\n  }\n\n  export interface ContentDisplayOption {\n    id: string;\n    label: string;\n    alwaysVisible?: boolean;\n  }\n\n  export interface ContentDisplayItem {\n    id: string;\n    visible: boolean;\n  }\n\n  export interface VisibleContentPreference {\n    title: string;\n    options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOptionsGroup>;\n  }\n\n  export interface VisibleContentOptionsGroup {\n    label: string;\n    options: ReadonlyArray<CollectionPreferencesProps.VisibleContentOption>;\n  }\n\n  export interface VisibleContentOption {\n    id: string;\n    label: string;\n    editable?: boolean;\n  }\n\n  export interface PageSizePreference {\n    title?: string;\n    options: ReadonlyArray<PageSizeOption>;\n  }\n\n  export interface PageSizeOption {\n    value: number;\n    label?: string;\n  }\n\n  export interface WrapLinesPreference {\n    label?: string;\n    description?: string;\n  }\n\n  export interface StripedRowsPreference {\n    label?: string;\n    description?: string;\n  }\n\n  export interface ContentDensityPreference {\n    label?: string;\n    description?: string;\n  }\n\n  interface StickyColumns {\n    first?: number;\n    last?: number;\n  }\n\n  interface StickyColumnPreference {\n    title: string;\n    description: string;\n    options: ReadonlyArray<{\n      label: string;\n      value: number;\n    }>;\n  }\n  export interface StickyColumnsPreference {\n    firstColumns?: StickyColumnPreference;\n    lastColumns?: StickyColumnPreference;\n  }\n\n  export interface ContentDisplayPreferenceI18nStrings {\n    /**\n     * Specifies a `placeholder` for the filtering input.\n     * @i18n\n     */\n    columnFilteringPlaceholder?: string;\n\n    /**\n     * Specifies an `aria-label` for the filtering input.\n     * @i18n\n     */\n    columnFilteringAriaLabel?: string;\n\n    /**\n     * Specifies the `count text` for the filtering input to reflect matches found.\n     * @i18n\n     */\n    columnFilteringCountText?: (count: number) => string;\n\n    /**\n     * Specifies the `no match` text for when there are no matching options in the filtering.\n     * @i18n\n     */\n    columnFilteringNoMatchText?: string;\n\n    /**\n     * Specifies both an `aria-label` for the clear filtering input action and the `clear filter button` text for the no match button.\n     * @i18n\n     */\n    columnFilteringClearFilterText?: string;\n  }\n}\n"]}

package/collection-preferences/styles.css.js

@@ -1,43 +1,41 @@
 
     import './styles.scoped.css';
     export default {
-  "visible-content": "awsui_visible-content_tc96w_p118b_153",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_p118b_154",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_p118b_155",
-  "visible-content-group": "awsui_visible-content-group_tc96w_p118b_155",
-  "visible-content-title": "awsui_visible-content-title_tc96w_p118b_160",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_p118b_170",
-  "visible-content-option": "awsui_visible-content-option_tc96w_p118b_176",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_p118b_189",
-  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_p118b_212",
-  "content-display-option-content": "awsui_content-display-option-content_tc96w_p118b_216",
-  "content-display-option": "awsui_content-display-option_tc96w_p118b_212",
-  "content-display-option-label": "awsui_content-display-option-label_tc96w_p118b_264",
-  "drag-handle-wrapper": "awsui_drag-handle-wrapper_tc96w_p118b_271",
-  "content-display": "awsui_content-display_tc96w_p118b_212",
-  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_p118b_276",
-  "content-display-no-match": "awsui_content-display-no-match_tc96w_p118b_277",
-  "content-display-title": "awsui_content-display-title_tc96w_p118b_281",
-  "content-display-description": "awsui_content-display-description_tc96w_p118b_290",
-  "content-display-option-list": "awsui_content-display-option-list_tc96w_p118b_298",
-  "root": "awsui_root_tc96w_p118b_305",
-  "modal-root": "awsui_modal-root_tc96w_p118b_306",
-  "trigger-button": "awsui_trigger-button_tc96w_p118b_307",
-  "cancel-button": "awsui_cancel-button_tc96w_p118b_308",
-  "confirm-button": "awsui_confirm-button_tc96w_p118b_309",
-  "custom": "awsui_custom_tc96w_p118b_310",
-  "content-before": "awsui_content-before_tc96w_p118b_311",
-  "second-column-small": "awsui_second-column-small_tc96w_p118b_315",
-  "wrap-lines": "awsui_wrap-lines_tc96w_p118b_319",
-  "striped-rows": "awsui_striped-rows_tc96w_p118b_320",
-  "content-density": "awsui_content-density_tc96w_p118b_321",
-  "page-size": "awsui_page-size_tc96w_p118b_322",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_p118b_323",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_p118b_324",
-  "sticky-columns": "awsui_sticky-columns_tc96w_p118b_325",
-  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_p118b_326",
-  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_p118b_327",
-  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_p118b_328",
-  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_p118b_329"
+  "visible-content": "awsui_visible-content_tc96w_via2y_153",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_via2y_154",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_via2y_155",
+  "visible-content-group": "awsui_visible-content-group_tc96w_via2y_155",
+  "visible-content-title": "awsui_visible-content-title_tc96w_via2y_160",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_via2y_170",
+  "visible-content-option": "awsui_visible-content-option_tc96w_via2y_176",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_via2y_189",
+  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_via2y_212",
+  "content-display-option-content": "awsui_content-display-option-content_tc96w_via2y_216",
+  "content-display-option-label": "awsui_content-display-option-label_tc96w_via2y_256",
+  "content-display": "awsui_content-display_tc96w_via2y_212",
+  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_via2y_264",
+  "content-display-no-match": "awsui_content-display-no-match_tc96w_via2y_265",
+  "content-display-title": "awsui_content-display-title_tc96w_via2y_269",
+  "content-display-description": "awsui_content-display-description_tc96w_via2y_278",
+  "content-display-option-list": "awsui_content-display-option-list_tc96w_via2y_286",
+  "root": "awsui_root_tc96w_via2y_293",
+  "modal-root": "awsui_modal-root_tc96w_via2y_294",
+  "trigger-button": "awsui_trigger-button_tc96w_via2y_295",
+  "cancel-button": "awsui_cancel-button_tc96w_via2y_296",
+  "confirm-button": "awsui_confirm-button_tc96w_via2y_297",
+  "custom": "awsui_custom_tc96w_via2y_298",
+  "content-before": "awsui_content-before_tc96w_via2y_299",
+  "second-column-small": "awsui_second-column-small_tc96w_via2y_303",
+  "wrap-lines": "awsui_wrap-lines_tc96w_via2y_307",
+  "striped-rows": "awsui_striped-rows_tc96w_via2y_308",
+  "content-density": "awsui_content-density_tc96w_via2y_309",
+  "page-size": "awsui_page-size_tc96w_via2y_310",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_via2y_311",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_via2y_312",
+  "sticky-columns": "awsui_sticky-columns_tc96w_via2y_313",
+  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_via2y_314",
+  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_via2y_315",
+  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_via2y_316",
+  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_via2y_317"
 };
   

package/collection-preferences/styles.scoped.css

@@ -150,14 +150,14 @@ 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_visible-content_tc96w_p118b_153:not(#\9),
-.awsui_visible-content-toggle_tc96w_p118b_154:not(#\9),
-.awsui_visible-content-groups_tc96w_p118b_155:not(#\9),
-.awsui_visible-content-group_tc96w_p118b_155:not(#\9) {
+.awsui_visible-content_tc96w_via2y_153:not(#\9),
+.awsui_visible-content-toggle_tc96w_via2y_154:not(#\9),
+.awsui_visible-content-groups_tc96w_via2y_155:not(#\9),
+.awsui_visible-content-group_tc96w_via2y_155:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_visible-content-title_tc96w_p118b_160:not(#\9) {
+.awsui_visible-content-title_tc96w_via2y_160:not(#\9) {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
   font-weight: var(--font-display-label-weight-zavpeo, 700);
@@ -167,13 +167,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
 
-.awsui_visible-content-group-label_tc96w_p118b_170:not(#\9) {
+.awsui_visible-content-group-label_tc96w_via2y_170:not(#\9) {
   color: var(--color-text-group-label-a2qc05, #424650);
   padding-block-end: var(--space-xs-ymlm0b, 8px);
   border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
 }
 
-.awsui_visible-content-option_tc96w_p118b_176:not(#\9) {
+.awsui_visible-content-option_tc96w_via2y_176:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
@@ -182,11 +182,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline-end: 0px;
   border-block-end: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
 }
-.awsui_visible-content-option_tc96w_p118b_176:not(#\9):last-child {
+.awsui_visible-content-option_tc96w_via2y_176:not(#\9):last-child {
   border-block-end: none;
 }
 
-.awsui_visible-content-option-label_tc96w_p118b_189:not(#\9) {
+.awsui_visible-content-option-label_tc96w_via2y_189:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-inline-end: var(--space-l-2ud1p3, 20px);
@@ -209,11 +209,11 @@ 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_content-display-option-toggle_tc96w_p118b_212:not(#\9) {
+.awsui_content-display-option-toggle_tc96w_via2y_212:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-option-content_tc96w_p118b_216:not(#\9) {
+.awsui_content-display-option-content_tc96w_via2y_216:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -245,40 +245,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   -moz-osx-font-smoothing: auto;
   display: flex;
   align-items: flex-start;
-  padding-block: var(--space-xs-ymlm0b, 8px);
-  padding-inline-start: 0;
-  padding-inline-end: var(--space-scaled-xs-xwoogq, 8px);
-  background-color: var(--color-background-container-content-6u8rvp, #ffffff);
+  padding-block: var(--space-scaled-xs-xwoogq, 8px);
+  padding-inline-end: var(--space-xs-ymlm0b, 8px);
   border-start-start-radius: var(--border-radius-item-iwaia5, 8px);
   border-start-end-radius: var(--border-radius-item-iwaia5, 8px);
   border-end-start-radius: var(--border-radius-item-iwaia5, 8px);
   border-end-end-radius: var(--border-radius-item-iwaia5, 8px);
 }
 
-.awsui_content-display-option_tc96w_p118b_212:not(#\9) {
-  list-style: none;
-  position: relative;
-  border-block-start: var(--border-divider-list-width-tdfx1x, 1px) solid var(--color-border-divider-secondary-qoitch, #ebebf0);
-}
-
-.awsui_content-display-option-label_tc96w_p118b_264:not(#\9) {
+.awsui_content-display-option-label_tc96w_via2y_256:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-2ud1p3, 20px);
 }
 
-.awsui_drag-handle-wrapper_tc96w_p118b_271:not(#\9) {
-  margin-inline: var(--space-scaled-xxs-pfm1nx, 4px);
-}
-
-.awsui_content-display_tc96w_p118b_212:not(#\9),
-.awsui_content-display-text-filter_tc96w_p118b_276:not(#\9),
-.awsui_content-display-no-match_tc96w_p118b_277:not(#\9) {
+.awsui_content-display_tc96w_via2y_212:not(#\9),
+.awsui_content-display-text-filter_tc96w_via2y_264:not(#\9),
+.awsui_content-display-no-match_tc96w_via2y_265:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-title_tc96w_p118b_281:not(#\9) {
+.awsui_content-display-title_tc96w_via2y_269:not(#\9) {
   font-size: var(--font-size-body-m-a7nh2n, 14px);
   line-height: var(--line-height-body-m-2mh3ke, 20px);
   font-weight: var(--font-display-label-weight-zavpeo, 700);
@@ -287,7 +275,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
 
-.awsui_content-display-description_tc96w_p118b_290:not(#\9) {
+.awsui_content-display-description_tc96w_via2y_278:not(#\9) {
   color: var(--color-text-form-secondary-1nm780, #656871);
   font-size: var(--font-size-body-s-smc8cv, 12px);
   line-height: var(--line-height-body-s-nu5hx1, 16px);
@@ -295,37 +283,37 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-scaled-xxxs-oo06c7, 2px);
 }
 
-.awsui_content-display-option-list_tc96w_p118b_298:not(#\9) {
+.awsui_content-display-option-list_tc96w_via2y_286:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
 }
 
-.awsui_root_tc96w_p118b_305:not(#\9),
-.awsui_modal-root_tc96w_p118b_306:not(#\9),
-.awsui_trigger-button_tc96w_p118b_307:not(#\9),
-.awsui_cancel-button_tc96w_p118b_308:not(#\9),
-.awsui_confirm-button_tc96w_p118b_309:not(#\9),
-.awsui_custom_tc96w_p118b_310:not(#\9),
-.awsui_content-before_tc96w_p118b_311:not(#\9) {
+.awsui_root_tc96w_via2y_293:not(#\9),
+.awsui_modal-root_tc96w_via2y_294:not(#\9),
+.awsui_trigger-button_tc96w_via2y_295:not(#\9),
+.awsui_cancel-button_tc96w_via2y_296:not(#\9),
+.awsui_confirm-button_tc96w_via2y_297:not(#\9),
+.awsui_custom_tc96w_via2y_298:not(#\9),
+.awsui_content-before_tc96w_via2y_299:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_second-column-small_tc96w_p118b_315:not(#\9) {
+.awsui_second-column-small_tc96w_via2y_303:not(#\9) {
   padding-block-start: calc(2 * var(--space-scaled-l-sej05l, 20px));
 }
 
-.awsui_wrap-lines_tc96w_p118b_319:not(#\9),
-.awsui_striped-rows_tc96w_p118b_320:not(#\9),
-.awsui_content-density_tc96w_p118b_321:not(#\9),
-.awsui_page-size_tc96w_p118b_322:not(#\9),
-.awsui_page-size-form-field_tc96w_p118b_323:not(#\9),
-.awsui_page-size-radio-group_tc96w_p118b_324:not(#\9),
-.awsui_sticky-columns_tc96w_p118b_325:not(#\9),
-.awsui_sticky-columns-form-field_tc96w_p118b_326:not(#\9),
-.awsui_sticky-columns-radio-group_tc96w_p118b_327:not(#\9),
-.awsui_sticky-columns-first_tc96w_p118b_328:not(#\9),
-.awsui_sticky-columns-last_tc96w_p118b_329:not(#\9) {
+.awsui_wrap-lines_tc96w_via2y_307:not(#\9),
+.awsui_striped-rows_tc96w_via2y_308:not(#\9),
+.awsui_content-density_tc96w_via2y_309:not(#\9),
+.awsui_page-size_tc96w_via2y_310:not(#\9),
+.awsui_page-size-form-field_tc96w_via2y_311:not(#\9),
+.awsui_page-size-radio-group_tc96w_via2y_312:not(#\9),
+.awsui_sticky-columns_tc96w_via2y_313:not(#\9),
+.awsui_sticky-columns-form-field_tc96w_via2y_314:not(#\9),
+.awsui_sticky-columns-radio-group_tc96w_via2y_315:not(#\9),
+.awsui_sticky-columns-first_tc96w_via2y_316:not(#\9),
+.awsui_sticky-columns-last_tc96w_via2y_317:not(#\9) {
   /* used in test-utils */
 }