@cloudscape-design/components 3.0.854 → 3.0.855

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

@@ -3,8 +3,7 @@ import { DragHandleProps } from '../../internal/components/drag-handle';
 import { OptionWithVisibility } from './utils';
 export declare const getClassName: (suffix?: string) => string;
 interface ContentDisplayOptionProps {
-    dragHandleAttributes: DragHandleProps['attributes'];
-    dragHandleListeners?: DragHandleProps['listeners'];
+    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;AAExD,OAAmB,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAGpF,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAK/C,eAAO,MAAM,YAAY,YAAa,MAAM,WAAgE,CAAC;AAE7G,UAAU,yBAAyB;IACjC,oBAAoB,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;IACpD,mBAAmB,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACnD,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED,QAAA,MAAM,oBAAoB,kGAyBzB,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;AAExD,OAAmB,EAAE,eAAe,EAAE,MAAM,uCAAuC,CAAC;AAGpF,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,kGAsBzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -7,11 +7,11 @@ 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(({ dragHandleAttributes, dragHandleListeners, onToggle, option }, ref) => {
+const ContentDisplayOption = forwardRef(({ dragHandleProps, onToggle, option }, ref) => {
     const idPrefix = useUniqueId(componentPrefix);
     const controlId = `${idPrefix}-control-${option.id}`;
     return (React.createElement("div", { ref: ref, className: getClassName('content') },
-        React.createElement(DragHandle, { attributes: dragHandleAttributes, listeners: dragHandleListeners }),
+        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,UAA+B,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,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;AAS7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,QAAQ,EAAE,MAAM,EAA6B,EAC1F,GAAiC,EACjC,EAAE;IACF,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,oBAAC,UAAU,IAAC,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,mBAAmB,GAAI;QAEhF,+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 DragHandle, { DragHandleProps } from '../../internal/components/drag-handle';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\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  dragHandleAttributes: DragHandleProps['attributes'];\n  dragHandleListeners?: DragHandleProps['listeners'];\n  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n}\n\nconst ContentDisplayOption = forwardRef(\n  (\n    { dragHandleAttributes, dragHandleListeners, onToggle, option }: ContentDisplayOptionProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const idPrefix = useUniqueId(componentPrefix);\n    const controlId = `${idPrefix}-control-${option.id}`;\n    return (\n      <div ref={ref} className={getClassName('content')}>\n        <DragHandle attributes={dragHandleAttributes} listeners={dragHandleListeners} />\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,UAA+B,MAAM,uCAAuC,CAAC;AACpF,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,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,oBAAC,UAAU,oBAAK,eAAe,EAAI;QAEnC,+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 DragHandle, { DragHandleProps } from '../../internal/components/drag-handle';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\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        <DragHandle {...dragHandleProps} />\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"]}

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":";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,eA0I/B"}
+{"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"}

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

@@ -1,4 +1,3 @@
-import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useMemo, useState } from 'react';
@@ -6,7 +5,7 @@ import clsx from 'clsx';
 import InternalBox from '../../box/internal';
 import InternalButton from '../../button/internal';
 import { useInternalI18n } from '../../i18n/context';
-import { DndContainer } from '../../internal/components/dnd-container';
+import { DndArea } from '../../internal/components/dnd-area';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import InternalSpaceBetween from '../../space-between/internal';
 import InternalTextFilter from '../../text-filter/internal';
@@ -47,10 +46,9 @@ 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(DndContainer, { 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: (_a) => {
-                    var { ref, item, isDragging, isSorting, isActive, style } = _a, dragHandle = __rest(_a, ["ref", "item", "isDragging", "isSorting", "isActive", "style"]);
-                    const className = clsx(getOptionClassName(), isDragging && styles.placeholder, isSorting && styles.sorting);
-                    const content = React.createElement(ContentDisplayOption, Object.assign({ ref: ref, option: item.data, onToggle: onToggle }, dragHandle));
+            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));
                 }, i18nStrings: {
                     liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', liveAnnouncementDndStarted, format => (position, total) => format({ position, total })),

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 InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport { DndContainer } from '../../internal/components/dnd-container';\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        <DndContainer\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, isDragging, isSorting, isActive, style, ...dragHandle }) => {\n            const className = clsx(getOptionClassName(), isDragging && styles.placeholder, isSorting && styles.sorting);\n            const content = <ContentDisplayOption ref={ref} option={item.data} onToggle={onToggle} {...dragHandle} />;\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"]}
+{"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"]}

package/collection-preferences/content-display/styles.css.js

@@ -1,17 +1,15 @@
 
     import './styles.scoped.css';
     export default {
-  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_1k9f2_289",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1k9f2_293",
-  "content-display-option": "awsui_content-display-option_1f3h0_1k9f2_289",
-  "placeholder": "awsui_placeholder_1f3h0_1k9f2_340",
-  "sorting": "awsui_sorting_1f3h0_1k9f2_340",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1k9f2_367",
-  "content-display": "awsui_content-display_1f3h0_1k9f2_289",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1k9f2_375",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1k9f2_376",
-  "content-display-title": "awsui_content-display-title_1f3h0_1k9f2_380",
-  "content-display-description": "awsui_content-display-description_1f3h0_1k9f2_389",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1k9f2_397"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_1r7a5_289",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1r7a5_293",
+  "content-display-option": "awsui_content-display-option_1f3h0_1r7a5_289",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1r7a5_341",
+  "content-display": "awsui_content-display_1f3h0_1r7a5_289",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1r7a5_349",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1r7a5_350",
+  "content-display-title": "awsui_content-display-title_1f3h0_1r7a5_354",
+  "content-display-description": "awsui_content-display-description_1f3h0_1r7a5_363",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1r7a5_371"
 };
   

package/collection-preferences/content-display/styles.scoped.css

@@ -286,11 +286,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_1f3h0_1k9f2_289:not(#\9) {
+.awsui_content-display-option-toggle_1f3h0_1r7a5_289:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-option-content_1f3h0_1k9f2_293:not(#\9) {
+.awsui_content-display-option-content_1f3h0_1r7a5_293:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -333,52 +333,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
 
-.awsui_content-display-option_1f3h0_1k9f2_289:not(#\9) {
+.awsui_content-display-option_1f3h0_1r7a5_289:not(#\9) {
   list-style: none;
   position: relative;
   border-block-start: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
-.awsui_content-display-option_1f3h0_1k9f2_289:not(#\9):not(.awsui_placeholder_1f3h0_1k9f2_340).awsui_sorting_1f3h0_1k9f2_340 {
-  transition: transform var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
-}
-@media (prefers-reduced-motion: reduce) {
-  .awsui_content-display-option_1f3h0_1k9f2_289:not(#\9):not(.awsui_placeholder_1f3h0_1k9f2_340).awsui_sorting_1f3h0_1k9f2_340 {
-    animation: none;
-    transition: none;
-  }
-}
-.awsui-motion-disabled .awsui_content-display-option_1f3h0_1k9f2_289:not(#\9):not(.awsui_placeholder_1f3h0_1k9f2_340).awsui_sorting_1f3h0_1k9f2_340, .awsui-mode-entering .awsui_content-display-option_1f3h0_1k9f2_289:not(#\9):not(.awsui_placeholder_1f3h0_1k9f2_340).awsui_sorting_1f3h0_1k9f2_340 {
-  animation: none;
-  transition: none;
-}
-.awsui_content-display-option_1f3h0_1k9f2_289.awsui_placeholder_1f3h0_1k9f2_340 > .awsui_content-display-option-content_1f3h0_1k9f2_293:not(#\9) {
-  position: relative;
-}
-.awsui_content-display-option_1f3h0_1k9f2_289.awsui_placeholder_1f3h0_1k9f2_340 > .awsui_content-display-option-content_1f3h0_1k9f2_293:not(#\9):after {
-  content: " ";
-  position: absolute;
-  inset: 0;
-  background: var(--color-drag-placeholder-hover-oikifl, #d1f1ff);
-  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
-}
 
-.awsui_content-display-option-label_1f3h0_1k9f2_367:not(#\9) {
+.awsui_content-display-option-label_1f3h0_1r7a5_341:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-t419sm, 20px);
 }
 
-.awsui_content-display_1f3h0_1k9f2_289:not(#\9),
-.awsui_content-display-text-filter_1f3h0_1k9f2_375:not(#\9),
-.awsui_content-display-no-match_1f3h0_1k9f2_376:not(#\9) {
+.awsui_content-display_1f3h0_1r7a5_289:not(#\9),
+.awsui_content-display-text-filter_1f3h0_1r7a5_349:not(#\9),
+.awsui_content-display-no-match_1f3h0_1r7a5_350:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-title_1f3h0_1k9f2_380:not(#\9) {
+.awsui_content-display-title_1f3h0_1r7a5_354:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: var(--font-display-label-weight-815ja9, 700);
@@ -387,7 +361,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
 
-.awsui_content-display-description_1f3h0_1k9f2_389:not(#\9) {
+.awsui_content-display-description_1f3h0_1r7a5_363:not(#\9) {
   color: var(--color-text-form-secondary-54emib, #656871);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
@@ -395,7 +369,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-scaled-xxxs-27y4hv, 2px);
 }
 
-.awsui_content-display-option-list_1f3h0_1k9f2_397:not(#\9) {
+.awsui_content-display-option-list_1f3h0_1r7a5_371:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;

package/collection-preferences/content-display/styles.selectors.js

@@ -2,17 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_1k9f2_289",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1k9f2_293",
-  "content-display-option": "awsui_content-display-option_1f3h0_1k9f2_289",
-  "placeholder": "awsui_placeholder_1f3h0_1k9f2_340",
-  "sorting": "awsui_sorting_1f3h0_1k9f2_340",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1k9f2_367",
-  "content-display": "awsui_content-display_1f3h0_1k9f2_289",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1k9f2_375",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1k9f2_376",
-  "content-display-title": "awsui_content-display-title_1f3h0_1k9f2_380",
-  "content-display-description": "awsui_content-display-description_1f3h0_1k9f2_389",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1k9f2_397"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_1r7a5_289",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1r7a5_293",
+  "content-display-option": "awsui_content-display-option_1f3h0_1r7a5_289",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1r7a5_341",
+  "content-display": "awsui_content-display_1f3h0_1r7a5_289",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1r7a5_349",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1r7a5_350",
+  "content-display-title": "awsui_content-display-title_1f3h0_1r7a5_354",
+  "content-display-description": "awsui_content-display-description_1f3h0_1r7a5_363",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1r7a5_371"
 };
   

package/collection-preferences/styles.css.js

@@ -1,43 +1,41 @@
 
     import './styles.scoped.css';
     export default {
-  "visible-content": "awsui_visible-content_tc96w_1xqaf_289",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_1xqaf_290",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_1xqaf_291",
-  "visible-content-group": "awsui_visible-content-group_tc96w_1xqaf_291",
-  "visible-content-title": "awsui_visible-content-title_tc96w_1xqaf_296",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_1xqaf_306",
-  "visible-content-option": "awsui_visible-content-option_tc96w_1xqaf_312",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_1xqaf_325",
-  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_1xqaf_620",
-  "content-display-option-content": "awsui_content-display-option-content_tc96w_1xqaf_624",
-  "content-display-option": "awsui_content-display-option_tc96w_1xqaf_620",
-  "placeholder": "awsui_placeholder_tc96w_1xqaf_671",
-  "sorting": "awsui_sorting_tc96w_1xqaf_671",
-  "content-display-option-label": "awsui_content-display-option-label_tc96w_1xqaf_698",
-  "content-display": "awsui_content-display_tc96w_1xqaf_620",
-  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_1xqaf_706",
-  "content-display-no-match": "awsui_content-display-no-match_tc96w_1xqaf_707",
-  "content-display-title": "awsui_content-display-title_tc96w_1xqaf_711",
-  "content-display-description": "awsui_content-display-description_tc96w_1xqaf_720",
-  "content-display-option-list": "awsui_content-display-option-list_tc96w_1xqaf_728",
-  "root": "awsui_root_tc96w_1xqaf_735",
-  "modal-root": "awsui_modal-root_tc96w_1xqaf_736",
-  "trigger-button": "awsui_trigger-button_tc96w_1xqaf_737",
-  "cancel-button": "awsui_cancel-button_tc96w_1xqaf_738",
-  "confirm-button": "awsui_confirm-button_tc96w_1xqaf_739",
-  "custom": "awsui_custom_tc96w_1xqaf_740",
-  "second-column-small": "awsui_second-column-small_tc96w_1xqaf_744",
-  "wrap-lines": "awsui_wrap-lines_tc96w_1xqaf_748",
-  "striped-rows": "awsui_striped-rows_tc96w_1xqaf_749",
-  "content-density": "awsui_content-density_tc96w_1xqaf_750",
-  "page-size": "awsui_page-size_tc96w_1xqaf_751",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_1xqaf_752",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_1xqaf_753",
-  "sticky-columns": "awsui_sticky-columns_tc96w_1xqaf_754",
-  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_1xqaf_755",
-  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_1xqaf_756",
-  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_1xqaf_757",
-  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_1xqaf_758"
+  "visible-content": "awsui_visible-content_tc96w_356y9_289",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_356y9_290",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_356y9_291",
+  "visible-content-group": "awsui_visible-content-group_tc96w_356y9_291",
+  "visible-content-title": "awsui_visible-content-title_tc96w_356y9_296",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_356y9_306",
+  "visible-content-option": "awsui_visible-content-option_tc96w_356y9_312",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_356y9_325",
+  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_356y9_620",
+  "content-display-option-content": "awsui_content-display-option-content_tc96w_356y9_624",
+  "content-display-option": "awsui_content-display-option_tc96w_356y9_620",
+  "content-display-option-label": "awsui_content-display-option-label_tc96w_356y9_672",
+  "content-display": "awsui_content-display_tc96w_356y9_620",
+  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_356y9_680",
+  "content-display-no-match": "awsui_content-display-no-match_tc96w_356y9_681",
+  "content-display-title": "awsui_content-display-title_tc96w_356y9_685",
+  "content-display-description": "awsui_content-display-description_tc96w_356y9_694",
+  "content-display-option-list": "awsui_content-display-option-list_tc96w_356y9_702",
+  "root": "awsui_root_tc96w_356y9_709",
+  "modal-root": "awsui_modal-root_tc96w_356y9_710",
+  "trigger-button": "awsui_trigger-button_tc96w_356y9_711",
+  "cancel-button": "awsui_cancel-button_tc96w_356y9_712",
+  "confirm-button": "awsui_confirm-button_tc96w_356y9_713",
+  "custom": "awsui_custom_tc96w_356y9_714",
+  "second-column-small": "awsui_second-column-small_tc96w_356y9_718",
+  "wrap-lines": "awsui_wrap-lines_tc96w_356y9_722",
+  "striped-rows": "awsui_striped-rows_tc96w_356y9_723",
+  "content-density": "awsui_content-density_tc96w_356y9_724",
+  "page-size": "awsui_page-size_tc96w_356y9_725",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_356y9_726",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_356y9_727",
+  "sticky-columns": "awsui_sticky-columns_tc96w_356y9_728",
+  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_356y9_729",
+  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_356y9_730",
+  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_356y9_731",
+  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_356y9_732"
 };
   

package/collection-preferences/styles.scoped.css

@@ -286,14 +286,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_1xqaf_289:not(#\9),
-.awsui_visible-content-toggle_tc96w_1xqaf_290:not(#\9),
-.awsui_visible-content-groups_tc96w_1xqaf_291:not(#\9),
-.awsui_visible-content-group_tc96w_1xqaf_291:not(#\9) {
+.awsui_visible-content_tc96w_356y9_289:not(#\9),
+.awsui_visible-content-toggle_tc96w_356y9_290:not(#\9),
+.awsui_visible-content-groups_tc96w_356y9_291:not(#\9),
+.awsui_visible-content-group_tc96w_356y9_291:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_visible-content-title_tc96w_1xqaf_296:not(#\9) {
+.awsui_visible-content-title_tc96w_356y9_296:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: var(--font-display-label-weight-815ja9, 700);
@@ -303,13 +303,13 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
 
-.awsui_visible-content-group-label_tc96w_1xqaf_306:not(#\9) {
+.awsui_visible-content-group-label_tc96w_356y9_306:not(#\9) {
   color: var(--color-text-group-label-8pk3es, #424650);
   padding-block-end: var(--space-xs-zb16t3, 8px);
   border-block-end: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
 
-.awsui_visible-content-option_tc96w_1xqaf_312:not(#\9) {
+.awsui_visible-content-option_tc96w_356y9_312:not(#\9) {
   display: flex;
   flex-wrap: nowrap;
   justify-content: space-between;
@@ -318,11 +318,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-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
-.awsui_visible-content-option_tc96w_1xqaf_312:not(#\9):last-child {
+.awsui_visible-content-option_tc96w_356y9_312:not(#\9):last-child {
   border-block-end: none;
 }
 
-.awsui_visible-content-option-label_tc96w_1xqaf_325:not(#\9) {
+.awsui_visible-content-option-label_tc96w_356y9_325:not(#\9) {
   overflow: hidden;
   text-overflow: ellipsis;
   padding-inline-end: var(--space-l-t419sm, 20px);
@@ -617,11 +617,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_1xqaf_620:not(#\9) {
+.awsui_content-display-option-toggle_tc96w_356y9_620:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-option-content_tc96w_1xqaf_624:not(#\9) {
+.awsui_content-display-option-content_tc96w_356y9_624:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -664,52 +664,26 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
 
-.awsui_content-display-option_tc96w_1xqaf_620:not(#\9) {
+.awsui_content-display-option_tc96w_356y9_620:not(#\9) {
   list-style: none;
   position: relative;
   border-block-start: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
-.awsui_content-display-option_tc96w_1xqaf_620:not(#\9):not(.awsui_placeholder_tc96w_1xqaf_671).awsui_sorting_tc96w_1xqaf_671 {
-  transition: transform var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
-}
-@media (prefers-reduced-motion: reduce) {
-  .awsui_content-display-option_tc96w_1xqaf_620:not(#\9):not(.awsui_placeholder_tc96w_1xqaf_671).awsui_sorting_tc96w_1xqaf_671 {
-    animation: none;
-    transition: none;
-  }
-}
-.awsui-motion-disabled .awsui_content-display-option_tc96w_1xqaf_620:not(#\9):not(.awsui_placeholder_tc96w_1xqaf_671).awsui_sorting_tc96w_1xqaf_671, .awsui-mode-entering .awsui_content-display-option_tc96w_1xqaf_620:not(#\9):not(.awsui_placeholder_tc96w_1xqaf_671).awsui_sorting_tc96w_1xqaf_671 {
-  animation: none;
-  transition: none;
-}
-.awsui_content-display-option_tc96w_1xqaf_620.awsui_placeholder_tc96w_1xqaf_671 > .awsui_content-display-option-content_tc96w_1xqaf_624:not(#\9) {
-  position: relative;
-}
-.awsui_content-display-option_tc96w_1xqaf_620.awsui_placeholder_tc96w_1xqaf_671 > .awsui_content-display-option-content_tc96w_1xqaf_624:not(#\9):after {
-  content: " ";
-  position: absolute;
-  inset: 0;
-  background: var(--color-drag-placeholder-hover-oikifl, #d1f1ff);
-  border-start-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-start-end-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-start-radius: var(--border-radius-item-05df9h, 8px);
-  border-end-end-radius: var(--border-radius-item-05df9h, 8px);
-}
 
-.awsui_content-display-option-label_tc96w_1xqaf_698:not(#\9) {
+.awsui_content-display-option-label_tc96w_356y9_672:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-t419sm, 20px);
 }
 
-.awsui_content-display_tc96w_1xqaf_620:not(#\9),
-.awsui_content-display-text-filter_tc96w_1xqaf_706:not(#\9),
-.awsui_content-display-no-match_tc96w_1xqaf_707:not(#\9) {
+.awsui_content-display_tc96w_356y9_620:not(#\9),
+.awsui_content-display-text-filter_tc96w_356y9_680:not(#\9),
+.awsui_content-display-no-match_tc96w_356y9_681:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-title_tc96w_1xqaf_711:not(#\9) {
+.awsui_content-display-title_tc96w_356y9_685:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: var(--font-display-label-weight-815ja9, 700);
@@ -718,7 +692,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-inline: 0;
 }
 
-.awsui_content-display-description_tc96w_1xqaf_720:not(#\9) {
+.awsui_content-display-description_tc96w_356y9_694:not(#\9) {
   color: var(--color-text-form-secondary-54emib, #656871);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
@@ -726,36 +700,36 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   margin-block-start: var(--space-scaled-xxxs-27y4hv, 2px);
 }
 
-.awsui_content-display-option-list_tc96w_1xqaf_728:not(#\9) {
+.awsui_content-display-option-list_tc96w_356y9_702:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;
   padding-inline: 0;
 }
 
-.awsui_root_tc96w_1xqaf_735:not(#\9),
-.awsui_modal-root_tc96w_1xqaf_736:not(#\9),
-.awsui_trigger-button_tc96w_1xqaf_737:not(#\9),
-.awsui_cancel-button_tc96w_1xqaf_738:not(#\9),
-.awsui_confirm-button_tc96w_1xqaf_739:not(#\9),
-.awsui_custom_tc96w_1xqaf_740:not(#\9) {
+.awsui_root_tc96w_356y9_709:not(#\9),
+.awsui_modal-root_tc96w_356y9_710:not(#\9),
+.awsui_trigger-button_tc96w_356y9_711:not(#\9),
+.awsui_cancel-button_tc96w_356y9_712:not(#\9),
+.awsui_confirm-button_tc96w_356y9_713:not(#\9),
+.awsui_custom_tc96w_356y9_714:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_second-column-small_tc96w_1xqaf_744:not(#\9) {
+.awsui_second-column-small_tc96w_356y9_718:not(#\9) {
   padding-block-start: calc(2 * var(--space-scaled-l-0hpmd7, 20px));
 }
 
-.awsui_wrap-lines_tc96w_1xqaf_748:not(#\9),
-.awsui_striped-rows_tc96w_1xqaf_749:not(#\9),
-.awsui_content-density_tc96w_1xqaf_750:not(#\9),
-.awsui_page-size_tc96w_1xqaf_751:not(#\9),
-.awsui_page-size-form-field_tc96w_1xqaf_752:not(#\9),
-.awsui_page-size-radio-group_tc96w_1xqaf_753:not(#\9),
-.awsui_sticky-columns_tc96w_1xqaf_754:not(#\9),
-.awsui_sticky-columns-form-field_tc96w_1xqaf_755:not(#\9),
-.awsui_sticky-columns-radio-group_tc96w_1xqaf_756:not(#\9),
-.awsui_sticky-columns-first_tc96w_1xqaf_757:not(#\9),
-.awsui_sticky-columns-last_tc96w_1xqaf_758:not(#\9) {
+.awsui_wrap-lines_tc96w_356y9_722:not(#\9),
+.awsui_striped-rows_tc96w_356y9_723:not(#\9),
+.awsui_content-density_tc96w_356y9_724:not(#\9),
+.awsui_page-size_tc96w_356y9_725:not(#\9),
+.awsui_page-size-form-field_tc96w_356y9_726:not(#\9),
+.awsui_page-size-radio-group_tc96w_356y9_727:not(#\9),
+.awsui_sticky-columns_tc96w_356y9_728:not(#\9),
+.awsui_sticky-columns-form-field_tc96w_356y9_729:not(#\9),
+.awsui_sticky-columns-radio-group_tc96w_356y9_730:not(#\9),
+.awsui_sticky-columns-first_tc96w_356y9_731:not(#\9),
+.awsui_sticky-columns-last_tc96w_356y9_732:not(#\9) {
   /* used in test-utils */
 }