@cloudscape-design/components-themeable 3.0.866 → 3.0.868

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "e9fab188c5920793e22b07bc34d78485ec8efb40"
+  "commit": "d0ecb9aaad86fab076bd04d1c539e844a9c128d7"
 }

package/lib/internal/scss/collection-preferences/content-display/content-display-option.scss

@@ -6,14 +6,6 @@
 @use '../../internal/styles' as styles;
 @use '../../internal/styles/tokens' as awsui;
 
-$border-radius: awsui.$border-radius-item;
-
-@mixin animated {
-  @include styles.with-motion {
-    transition: transform awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
-  }
-}
-
 .content-display-option-toggle {
   /* used in test-utils */
 }
@@ -26,34 +18,16 @@ $border-radius: awsui.$border-radius-item;
   padding-inline-start: 0;
   padding-inline-end: awsui.$space-scaled-xs;
   background-color: awsui.$color-background-container-content;
-  border-start-start-radius: $border-radius;
-  border-start-end-radius: $border-radius;
-  border-end-start-radius: $border-radius;
-  border-end-end-radius: $border-radius;
+  border-start-start-radius: awsui.$border-radius-item;
+  border-start-end-radius: awsui.$border-radius-item;
+  border-end-start-radius: awsui.$border-radius-item;
+  border-end-end-radius: awsui.$border-radius-item;
 }
 
 .content-display-option {
   list-style: none;
   position: relative;
   border-block-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-secondary;
-  &:not(.placeholder).sorting {
-    @include animated;
-  }
-  &.placeholder {
-    > .content-display-option-content {
-      position: relative;
-      &:after {
-        content: ' ';
-        position: absolute;
-        inset: 0;
-        background: awsui.$color-drag-placeholder-hover;
-        border-start-start-radius: $border-radius;
-        border-start-end-radius: $border-radius;
-        border-end-start-radius: $border-radius;
-        border-end-end-radius: $border-radius;
-      }
-    }
-  }
 }
 
 .content-display-option-label {

package/lib/internal/scss/internal/components/dnd-area/styles.scss

@@ -0,0 +1,70 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../styles' as styles;
+@use '../../styles/tokens' as awsui;
+@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
+
+@mixin animated {
+  @include styles.with-motion {
+    transition: transform awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
+  }
+}
+
+@mixin drag-overlay-with-radius($border-radius) {
+  border-start-start-radius: $border-radius;
+  border-start-end-radius: $border-radius;
+  border-end-start-radius: $border-radius;
+  border-end-end-radius: $border-radius;
+
+  @include focus-visible.when-visible-unfocused {
+    @include styles.focus-highlight(0px, $border-radius);
+  }
+}
+
+.drag-overlay {
+  box-shadow: awsui.$shadow-container-active;
+
+  &-item {
+    @include drag-overlay-with-radius(awsui.$border-radius-item);
+  }
+  &-container {
+    @include drag-overlay-with-radius(awsui.$border-radius-container);
+  }
+}
+
+.active {
+  @include styles.default-text-style;
+}
+
+.placeholder {
+  position: relative;
+  &:after {
+    content: ' ';
+    position: absolute;
+    inset: 0;
+    background: awsui.$color-drag-placeholder-hover;
+  }
+  &-item {
+    &:after {
+      border-start-start-radius: awsui.$border-radius-item;
+      border-start-end-radius: awsui.$border-radius-item;
+      border-end-start-radius: awsui.$border-radius-item;
+      border-end-end-radius: awsui.$border-radius-item;
+    }
+  }
+  &-container {
+    &:after {
+      border-start-start-radius: awsui.$border-radius-container;
+      border-start-end-radius: awsui.$border-radius-container;
+      border-end-start-radius: awsui.$border-radius-container;
+      border-end-end-radius: awsui.$border-radius-container;
+    }
+  }
+}
+
+.sorting {
+  @include animated;
+}

package/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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/lib/internal/template/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_1c3gl_289",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1c3gl_293",
-  "content-display-option": "awsui_content-display-option_1f3h0_1c3gl_289",
-  "placeholder": "awsui_placeholder_1f3h0_1c3gl_340",
-  "sorting": "awsui_sorting_1f3h0_1c3gl_340",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1c3gl_367",
-  "content-display": "awsui_content-display_1f3h0_1c3gl_289",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1c3gl_375",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1c3gl_376",
-  "content-display-title": "awsui_content-display-title_1f3h0_1c3gl_380",
-  "content-display-description": "awsui_content-display-description_1f3h0_1c3gl_389",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1c3gl_397"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_1jgk7_289",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1jgk7_293",
+  "content-display-option": "awsui_content-display-option_1f3h0_1jgk7_289",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1jgk7_341",
+  "content-display": "awsui_content-display_1f3h0_1jgk7_289",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1jgk7_349",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1jgk7_350",
+  "content-display-title": "awsui_content-display-title_1f3h0_1jgk7_354",
+  "content-display-description": "awsui_content-display-description_1f3h0_1jgk7_363",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1jgk7_371"
 };
   

package/lib/internal/template/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_1c3gl_289:not(#\9) {
+.awsui_content-display-option-toggle_1f3h0_1jgk7_289:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-option-content_1f3h0_1c3gl_293:not(#\9) {
+.awsui_content-display-option-content_1f3h0_1jgk7_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-q4wr0w, 0px);
 }
 
-.awsui_content-display-option_1f3h0_1c3gl_289:not(#\9) {
+.awsui_content-display-option_1f3h0_1jgk7_289:not(#\9) {
   list-style: none;
   position: relative;
   border-block-start: var(--border-divider-list-width-x6rz7e, 1px) solid var(--color-border-divider-secondary-1xu6lb, #eaeded);
 }
-.awsui_content-display-option_1f3h0_1c3gl_289:not(#\9):not(.awsui_placeholder_1f3h0_1c3gl_340).awsui_sorting_1f3h0_1c3gl_340 {
-  transition: transform var(--motion-duration-transition-quick-1ym1ir, 90ms) var(--motion-easing-transition-quick-c2tqbv, linear);
-}
-@media (prefers-reduced-motion: reduce) {
-  .awsui_content-display-option_1f3h0_1c3gl_289:not(#\9):not(.awsui_placeholder_1f3h0_1c3gl_340).awsui_sorting_1f3h0_1c3gl_340 {
-    animation: none;
-    transition: none;
-  }
-}
-.awsui-motion-disabled .awsui_content-display-option_1f3h0_1c3gl_289:not(#\9):not(.awsui_placeholder_1f3h0_1c3gl_340).awsui_sorting_1f3h0_1c3gl_340, .awsui-mode-entering .awsui_content-display-option_1f3h0_1c3gl_289:not(#\9):not(.awsui_placeholder_1f3h0_1c3gl_340).awsui_sorting_1f3h0_1c3gl_340 {
-  animation: none;
-  transition: none;
-}
-.awsui_content-display-option_1f3h0_1c3gl_289.awsui_placeholder_1f3h0_1c3gl_340 > .awsui_content-display-option-content_1f3h0_1c3gl_293:not(#\9) {
-  position: relative;
-}
-.awsui_content-display-option_1f3h0_1c3gl_289.awsui_placeholder_1f3h0_1c3gl_340 > .awsui_content-display-option-content_1f3h0_1c3gl_293:not(#\9):after {
-  content: " ";
-  position: absolute;
-  inset: 0;
-  background: var(--color-drag-placeholder-hover-gowvta, #99cbe4);
-  border-start-start-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-start-end-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-end-start-radius: var(--border-radius-item-q4wr0w, 0px);
-  border-end-end-radius: var(--border-radius-item-q4wr0w, 0px);
-}
 
-.awsui_content-display-option-label_1f3h0_1c3gl_367:not(#\9) {
+.awsui_content-display-option-label_1f3h0_1jgk7_341:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-eenfqd, 20px);
 }
 
-.awsui_content-display_1f3h0_1c3gl_289:not(#\9),
-.awsui_content-display-text-filter_1f3h0_1c3gl_375:not(#\9),
-.awsui_content-display-no-match_1f3h0_1c3gl_376:not(#\9) {
+.awsui_content-display_1f3h0_1jgk7_289:not(#\9),
+.awsui_content-display-text-filter_1f3h0_1jgk7_349:not(#\9),
+.awsui_content-display-no-match_1f3h0_1jgk7_350:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-title_1f3h0_1c3gl_380:not(#\9) {
+.awsui_content-display-title_1f3h0_1jgk7_354:not(#\9) {
   font-size: var(--font-size-body-m-6wxxs5, 14px);
   line-height: var(--line-height-body-m-gw0130, 22px);
   font-weight: var(--font-display-label-weight-5p8eav, 400);
@@ -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_1c3gl_389:not(#\9) {
+.awsui_content-display-description_1f3h0_1jgk7_363:not(#\9) {
   color: var(--color-text-form-secondary-5q4khe, #687078);
   font-size: var(--font-size-body-s-4dzx5q, 12px);
   line-height: var(--line-height-body-s-egzl4q, 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-6vyqo7, 2px);
 }
 
-.awsui_content-display-option-list_1f3h0_1c3gl_397:not(#\9) {
+.awsui_content-display-option-list_1f3h0_1jgk7_371:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;

package/lib/internal/template/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_1c3gl_289",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1c3gl_293",
-  "content-display-option": "awsui_content-display-option_1f3h0_1c3gl_289",
-  "placeholder": "awsui_placeholder_1f3h0_1c3gl_340",
-  "sorting": "awsui_sorting_1f3h0_1c3gl_340",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1c3gl_367",
-  "content-display": "awsui_content-display_1f3h0_1c3gl_289",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1c3gl_375",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1c3gl_376",
-  "content-display-title": "awsui_content-display-title_1f3h0_1c3gl_380",
-  "content-display-description": "awsui_content-display-description_1f3h0_1c3gl_389",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1c3gl_397"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_1jgk7_289",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_1jgk7_293",
+  "content-display-option": "awsui_content-display-option_1f3h0_1jgk7_289",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_1jgk7_341",
+  "content-display": "awsui_content-display_1f3h0_1jgk7_289",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_1jgk7_349",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_1jgk7_350",
+  "content-display-title": "awsui_content-display-title_1f3h0_1jgk7_354",
+  "content-display-description": "awsui_content-display-description_1f3h0_1jgk7_363",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1jgk7_371"
 };
   

package/lib/internal/template/collection-preferences/styles.css.js

@@ -1,43 +1,41 @@
 
     import './styles.scoped.css';
     export default {
-  "visible-content": "awsui_visible-content_tc96w_11461_289",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_11461_290",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_11461_291",
-  "visible-content-group": "awsui_visible-content-group_tc96w_11461_291",
-  "visible-content-title": "awsui_visible-content-title_tc96w_11461_296",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_11461_306",
-  "visible-content-option": "awsui_visible-content-option_tc96w_11461_312",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_11461_325",
-  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_11461_620",
-  "content-display-option-content": "awsui_content-display-option-content_tc96w_11461_624",
-  "content-display-option": "awsui_content-display-option_tc96w_11461_620",
-  "placeholder": "awsui_placeholder_tc96w_11461_671",
-  "sorting": "awsui_sorting_tc96w_11461_671",
-  "content-display-option-label": "awsui_content-display-option-label_tc96w_11461_698",
-  "content-display": "awsui_content-display_tc96w_11461_620",
-  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_11461_706",
-  "content-display-no-match": "awsui_content-display-no-match_tc96w_11461_707",
-  "content-display-title": "awsui_content-display-title_tc96w_11461_711",
-  "content-display-description": "awsui_content-display-description_tc96w_11461_720",
-  "content-display-option-list": "awsui_content-display-option-list_tc96w_11461_728",
-  "root": "awsui_root_tc96w_11461_735",
-  "modal-root": "awsui_modal-root_tc96w_11461_736",
-  "trigger-button": "awsui_trigger-button_tc96w_11461_737",
-  "cancel-button": "awsui_cancel-button_tc96w_11461_738",
-  "confirm-button": "awsui_confirm-button_tc96w_11461_739",
-  "custom": "awsui_custom_tc96w_11461_740",
-  "second-column-small": "awsui_second-column-small_tc96w_11461_744",
-  "wrap-lines": "awsui_wrap-lines_tc96w_11461_748",
-  "striped-rows": "awsui_striped-rows_tc96w_11461_749",
-  "content-density": "awsui_content-density_tc96w_11461_750",
-  "page-size": "awsui_page-size_tc96w_11461_751",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_11461_752",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_11461_753",
-  "sticky-columns": "awsui_sticky-columns_tc96w_11461_754",
-  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_11461_755",
-  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_11461_756",
-  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_11461_757",
-  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_11461_758"
+  "visible-content": "awsui_visible-content_tc96w_4nczn_289",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_4nczn_290",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_4nczn_291",
+  "visible-content-group": "awsui_visible-content-group_tc96w_4nczn_291",
+  "visible-content-title": "awsui_visible-content-title_tc96w_4nczn_296",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_4nczn_306",
+  "visible-content-option": "awsui_visible-content-option_tc96w_4nczn_312",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_4nczn_325",
+  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_4nczn_620",
+  "content-display-option-content": "awsui_content-display-option-content_tc96w_4nczn_624",
+  "content-display-option": "awsui_content-display-option_tc96w_4nczn_620",
+  "content-display-option-label": "awsui_content-display-option-label_tc96w_4nczn_672",
+  "content-display": "awsui_content-display_tc96w_4nczn_620",
+  "content-display-text-filter": "awsui_content-display-text-filter_tc96w_4nczn_680",
+  "content-display-no-match": "awsui_content-display-no-match_tc96w_4nczn_681",
+  "content-display-title": "awsui_content-display-title_tc96w_4nczn_685",
+  "content-display-description": "awsui_content-display-description_tc96w_4nczn_694",
+  "content-display-option-list": "awsui_content-display-option-list_tc96w_4nczn_702",
+  "root": "awsui_root_tc96w_4nczn_709",
+  "modal-root": "awsui_modal-root_tc96w_4nczn_710",
+  "trigger-button": "awsui_trigger-button_tc96w_4nczn_711",
+  "cancel-button": "awsui_cancel-button_tc96w_4nczn_712",
+  "confirm-button": "awsui_confirm-button_tc96w_4nczn_713",
+  "custom": "awsui_custom_tc96w_4nczn_714",
+  "second-column-small": "awsui_second-column-small_tc96w_4nczn_718",
+  "wrap-lines": "awsui_wrap-lines_tc96w_4nczn_722",
+  "striped-rows": "awsui_striped-rows_tc96w_4nczn_723",
+  "content-density": "awsui_content-density_tc96w_4nczn_724",
+  "page-size": "awsui_page-size_tc96w_4nczn_725",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_4nczn_726",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_4nczn_727",
+  "sticky-columns": "awsui_sticky-columns_tc96w_4nczn_728",
+  "sticky-columns-form-field": "awsui_sticky-columns-form-field_tc96w_4nczn_729",
+  "sticky-columns-radio-group": "awsui_sticky-columns-radio-group_tc96w_4nczn_730",
+  "sticky-columns-first": "awsui_sticky-columns-first_tc96w_4nczn_731",
+  "sticky-columns-last": "awsui_sticky-columns-last_tc96w_4nczn_732"
 };