@cloudscape-design/components 3.0.274 → 3.0.276

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

@@ -0,0 +1,13 @@
+import React from 'react';
+import { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
+import { OptionWithVisibility } from './utils';
+export declare const getClassName: (suffix?: string) => string;
+export interface ContentDisplayOptionProps {
+    dragHandleAriaLabel?: string;
+    listeners?: SyntheticListenerMap;
+    onToggle?: (option: OptionWithVisibility) => void;
+    option: OptionWithVisibility;
+}
+declare const ContentDisplayOption: React.ForwardRefExoticComponent<ContentDisplayOptionProps & React.RefAttributes<HTMLDivElement>>;
+export default ContentDisplayOption;
+//# sourceMappingURL=content-display-option.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content-display-option.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAmC,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAC1E,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/C,eAAO,MAAM,YAAY,YAAa,MAAM,WAAgE,CAAC;AAE7G,MAAM,WAAW,yBAAyB;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,oBAAoB,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;CAC9B;AAED,QAAA,MAAM,oBAAoB,kGA8BzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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

@@ -0,0 +1,23 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import styles from '../styles.css.js';
+import DragHandle from '../../internal/drag-handle';
+import InternalToggle from '../../toggle/internal';
+import React, { forwardRef } from 'react';
+import { useUniqueId } from '../../internal/hooks/use-unique-id';
+const componentPrefix = 'content-display-option';
+export const getClassName = (suffix) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];
+const ContentDisplayOption = forwardRef(({ dragHandleAriaLabel, listeners, onToggle, option }, ref) => {
+    const idPrefix = useUniqueId(componentPrefix);
+    const controlId = `${idPrefix}-control-${option.id}`;
+    const dragHandleAttributes = {
+        ['aria-label']: [dragHandleAriaLabel, option.label].join(', '),
+    };
+    return (React.createElement("div", { ref: ref, className: getClassName('content') },
+        React.createElement(DragHandle, { attributes: dragHandleAttributes, listeners: listeners }),
+        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 }))));
+});
+export default ContentDisplayOption;
+//# sourceMappingURL=content-display-option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"content-display-option.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAGxD,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEjE,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,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAA6B,EAC/E,GAAiC,EACjC,EAAE;IACF,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,QAAQ,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC;IAErD,MAAM,oBAAoB,GAAG;QAC3B,CAAC,YAAY,CAAC,EAAE,CAAC,mBAAmB,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;KAC/D,CAAC;IAEF,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;QAC/C,oBAAC,UAAU,IAAC,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,GAAI;QAEtE,+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 styles from '../styles.css.js';\nimport DragHandle from '../../internal/drag-handle';\nimport InternalToggle from '../../toggle/internal';\nimport React, { ForwardedRef, forwardRef } from 'react';\nimport { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';\nimport { OptionWithVisibility } from './utils';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\nconst componentPrefix = 'content-display-option';\nexport const getClassName = (suffix?: string) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];\n\nexport interface ContentDisplayOptionProps {\n  dragHandleAriaLabel?: string;\n  listeners?: SyntheticListenerMap;\n  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n}\n\nconst ContentDisplayOption = forwardRef(\n  (\n    { dragHandleAriaLabel, listeners, onToggle, option }: ContentDisplayOptionProps,\n    ref: ForwardedRef<HTMLDivElement>\n  ) => {\n    const idPrefix = useUniqueId(componentPrefix);\n    const controlId = `${idPrefix}-control-${option.id}`;\n\n    const dragHandleAttributes = {\n      ['aria-label']: [dragHandleAriaLabel, option.label].join(', '),\n    };\n\n    return (\n      <div ref={ref} className={getClassName('content')}>\n        <DragHandle attributes={dragHandleAttributes} listeners={listeners} />\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/{sortable-item.d.ts → draggable-option.d.ts}

@@ -1,9 +1,9 @@
 import React from 'react';
 import { OptionWithVisibility } from './utils';
-export declare function SortableItem({ dragHandleAriaLabel, onKeyDown, onToggle, option, }: {
+export default function DraggableOption({ dragHandleAriaLabel, onKeyDown, onToggle, option, }: {
     dragHandleAriaLabel?: string;
     onKeyDown?: (event: React.KeyboardEvent) => void;
     onToggle: (option: OptionWithVisibility) => void;
     option: OptionWithVisibility;
 }): JSX.Element;
-//# sourceMappingURL=sortable-item.d.ts.map
+//# sourceMappingURL=draggable-option.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draggable-option.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/draggable-option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAK/C,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,MAAM,GACP,EAAE;IACD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IACjD,MAAM,EAAE,oBAAoB,CAAC;CAC9B,eA+BA"}

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

@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import ContentDisplayOption, { getClassName } from './content-display-option';
+import clsx from 'clsx';
+import styles from '../styles.css.js';
+export default function DraggableOption({ dragHandleAriaLabel, onKeyDown, onToggle, option, }) {
+    const { isDragging, isSorting, listeners, setNodeRef, transform } = useSortable({
+        id: option.id,
+    });
+    const style = {
+        transform: CSS.Translate.toString(transform),
+    };
+    const combinedListeners = Object.assign(Object.assign({}, listeners), { onKeyDown: (event) => {
+            if (onKeyDown) {
+                onKeyDown(event);
+            }
+            if (listeners === null || listeners === void 0 ? void 0 : listeners.onKeyDown) {
+                listeners.onKeyDown(event);
+            }
+        } });
+    return (React.createElement("li", { className: clsx(getClassName(), isDragging && styles.placeholder, isSorting && styles.sorting), style: style },
+        React.createElement(ContentDisplayOption, { ref: setNodeRef, listeners: combinedListeners, dragHandleAriaLabel: dragHandleAriaLabel, onToggle: onToggle, option: option })));
+}
+//# sourceMappingURL=draggable-option.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"draggable-option.js","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/draggable-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,oBAAoB,CAAC;AAEzC,OAAO,oBAAoB,EAAE,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,mBAAmB,EACnB,SAAS,EACT,QAAQ,EACR,MAAM,GAMP;IACC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,WAAW,CAAC;QAC9E,EAAE,EAAE,MAAM,CAAC,EAAE;KACd,CAAC,CAAC;IACH,MAAM,KAAK,GAAG;QACZ,SAAS,EAAE,GAAG,CAAC,SAAS,CAAC,QAAQ,CAAC,SAAS,CAAC;KAC7C,CAAC;IAEF,MAAM,iBAAiB,mCAClB,SAAS,KACZ,SAAS,EAAE,CAAC,KAA0B,EAAE,EAAE;YACxC,IAAI,SAAS,EAAE;gBACb,SAAS,CAAC,KAAK,CAAC,CAAC;aAClB;YACD,IAAI,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,SAAS,EAAE;gBACxB,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;aAC5B;QACH,CAAC,GACF,CAAC;IAEF,OAAO,CACL,4BAAI,SAAS,EAAE,IAAI,CAAC,YAAY,EAAE,EAAE,UAAU,IAAI,MAAM,CAAC,WAAW,EAAE,SAAS,IAAI,MAAM,CAAC,OAAO,CAAC,EAAE,KAAK,EAAE,KAAK;QAC9G,oBAAC,oBAAoB,IACnB,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,iBAAiB,EAC5B,mBAAmB,EAAE,mBAAmB,EACxC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,GACd,CACC,CACN,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { OptionWithVisibility } from './utils';\nimport ContentDisplayOption, { getClassName } from './content-display-option';\nimport clsx from 'clsx';\nimport styles from '../styles.css.js';\n\nexport default function DraggableOption({\n  dragHandleAriaLabel,\n  onKeyDown,\n  onToggle,\n  option,\n}: {\n  dragHandleAriaLabel?: string;\n  onKeyDown?: (event: React.KeyboardEvent) => void;\n  onToggle: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n}) {\n  const { isDragging, isSorting, listeners, setNodeRef, transform } = useSortable({\n    id: option.id,\n  });\n  const style = {\n    transform: CSS.Translate.toString(transform),\n  };\n\n  const combinedListeners = {\n    ...listeners,\n    onKeyDown: (event: React.KeyboardEvent) => {\n      if (onKeyDown) {\n        onKeyDown(event);\n      }\n      if (listeners?.onKeyDown) {\n        listeners.onKeyDown(event);\n      }\n    },\n  };\n\n  return (\n    <li className={clsx(getClassName(), isDragging && styles.placeholder, isSorting && styles.sorting)} style={style}>\n      <ContentDisplayOption\n        ref={setNodeRef}\n        listeners={combinedListeners}\n        dragHandleAriaLabel={dragHandleAriaLabel}\n        onToggle={onToggle}\n        option={option}\n      />\n    </li>\n  );\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAa3D,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,GACpB,EAAE,6BAA6B,eA6E/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"lib/default/","sources":["collection-preferences/content-display/index.tsx"],"names":[],"mappings":";AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAe3D,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,GACpB,EAAE,6BAA6B,eAmG/B"}

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

@@ -4,11 +4,13 @@ import React from 'react';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import styles from '../styles.css.js';
 import { getSortedOptions } from './utils';
-import { DndContext } from '@dnd-kit/core';
+import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { SortableItem } from './sortable-item';
+import DraggableOption from './draggable-option';
 import useDragAndDropReorder from './use-drag-and-drop-reorder';
 import useLiveAnnouncements from './use-live-announcements';
+import Portal from '../../internal/components/portal';
+import ContentDisplayOption from './content-display-option';
 const componentPrefix = 'content-display';
 const getClassName = (suffix) => styles[`${componentPrefix}-${suffix}`];
 export default function ContentDisplayPreference({ title, description, options, value = options.map(({ id }) => ({
@@ -25,6 +27,7 @@ export default function ContentDisplayPreference({ title, description, options,
     const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
         sortedOptions,
     });
+    const activeOption = activeItem ? sortedOptions.find(({ id }) => id === activeItem) : null;
     const announcements = useLiveAnnouncements({
         isDragging: activeItem !== null,
         liveAnnouncementDndStarted,
@@ -50,6 +53,10 @@ export default function ContentDisplayPreference({ title, description, options,
                 }
             }, onDragCancel: () => setActiveItem(null) },
             React.createElement("ul", { className: getClassName('option-list'), "aria-describedby": descriptionId, "aria-labelledby": titleId, role: "list" },
-                React.createElement(SortableContext, { items: sortedOptions.map(({ id }) => id), strategy: verticalListSortingStrategy }, sortedOptions.map(option => (React.createElement(SortableItem, { dragHandleAriaLabel: dragHandleAriaLabel, key: option.id, onKeyDown: handleKeyDown, onToggle: onToggle, option: option }))))))));
+                React.createElement(SortableContext, { items: sortedOptions.map(({ id }) => id), strategy: verticalListSortingStrategy }, sortedOptions.map(option => {
+                    return (React.createElement(DraggableOption, { dragHandleAriaLabel: dragHandleAriaLabel, key: option.id, onKeyDown: handleKeyDown, onToggle: onToggle, option: option }));
+                }))),
+            React.createElement(Portal, null,
+                React.createElement(DragOverlay, { className: styles['drag-overlay'], dropAnimation: null, style: { zIndex: 5000 } }, activeOption && (React.createElement(ContentDisplayOption, { listeners: { onKeyDown: handleKeyDown }, dragHandleAriaLabel: dragHandleAriaLabel, onToggle: onToggle, option: activeOption })))))));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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 from 'react';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\nimport { CollectionPreferencesProps } from '../interfaces';\nimport styles from '../styles.css.js';\nimport { getSortedOptions, OptionWithVisibility } from './utils';\nimport { DndContext } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport { SortableItem } from './sortable-item';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\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}: ContentDisplayPreferenceProps) {\n  const idPrefix = useUniqueId(componentPrefix);\n\n  const onToggle = (option: OptionWithVisibility) => {\n    onChange(value.map(item => (item.id === option.id ? { ...item, visible: !option.visible } : item)));\n  };\n\n  const titleId = `${idPrefix}-title`;\n  const descriptionId = `${idPrefix}-description`;\n\n  const sortedOptions = getSortedOptions({ options, contentDisplay: value });\n\n  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions,\n  });\n\n  const announcements = useLiveAnnouncements({\n    isDragging: activeItem !== null,\n    liveAnnouncementDndStarted,\n    liveAnnouncementDndItemReordered,\n    liveAnnouncementDndItemCommitted,\n    liveAnnouncementDndDiscarded,\n    sortedOptions: value,\n  });\n\n  return (\n    <div className={styles[componentPrefix]}>\n      <h3 className={getClassName('title')} id={titleId}>\n        {title}\n      </h3>\n      <p className={getClassName('description')} id={descriptionId}>\n        {description}\n      </p>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        accessibility={{\n          announcements,\n          restoreFocus: false,\n          screenReaderInstructions: dragHandleAriaDescription ? { draggable: dragHandleAriaDescription } : undefined,\n        }}\n        onDragStart={({ active }) => setActiveItem(active.id)}\n        onDragEnd={event => {\n          setActiveItem(null);\n          const { active, over } = event;\n\n          if (over && active.id !== over.id) {\n            const oldIndex = value.findIndex(({ id }) => id === active.id);\n            const newIndex = value.findIndex(({ id }) => id === over.id);\n            onChange(arrayMove([...value], oldIndex, newIndex));\n          }\n        }}\n        onDragCancel={() => setActiveItem(null)}\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          <SortableContext items={sortedOptions.map(({ id }) => id)} strategy={verticalListSortingStrategy}>\n            {sortedOptions.map(option => (\n              <SortableItem\n                dragHandleAriaLabel={dragHandleAriaLabel}\n                key={option.id}\n                onKeyDown={handleKeyDown}\n                onToggle={onToggle}\n                option={option}\n              />\n            ))}\n          </SortableContext>\n        </ul>\n      </DndContext>\n    </div>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"lib/default/","sources":["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 from 'react';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\n\nimport { CollectionPreferencesProps } from '../interfaces';\nimport styles from '../styles.css.js';\nimport { getSortedOptions, OptionWithVisibility } from './utils';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\nimport Portal from '../../internal/components/portal';\nimport ContentDisplayOption from './content-display-option';\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}: ContentDisplayPreferenceProps) {\n  const idPrefix = useUniqueId(componentPrefix);\n\n  const onToggle = (option: OptionWithVisibility) => {\n    onChange(value.map(item => (item.id === option.id ? { ...item, visible: !option.visible } : item)));\n  };\n\n  const titleId = `${idPrefix}-title`;\n  const descriptionId = `${idPrefix}-description`;\n\n  const sortedOptions = getSortedOptions({ options, contentDisplay: value });\n\n  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions,\n  });\n\n  const activeOption = activeItem ? sortedOptions.find(({ id }) => id === activeItem) : null;\n\n  const announcements = useLiveAnnouncements({\n    isDragging: activeItem !== null,\n    liveAnnouncementDndStarted,\n    liveAnnouncementDndItemReordered,\n    liveAnnouncementDndItemCommitted,\n    liveAnnouncementDndDiscarded,\n    sortedOptions: value,\n  });\n\n  return (\n    <div className={styles[componentPrefix]}>\n      <h3 className={getClassName('title')} id={titleId}>\n        {title}\n      </h3>\n      <p className={getClassName('description')} id={descriptionId}>\n        {description}\n      </p>\n      <DndContext\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        accessibility={{\n          announcements,\n          restoreFocus: false,\n          screenReaderInstructions: dragHandleAriaDescription ? { draggable: dragHandleAriaDescription } : undefined,\n        }}\n        onDragStart={({ active }) => setActiveItem(active.id)}\n        onDragEnd={event => {\n          setActiveItem(null);\n          const { active, over } = event;\n\n          if (over && active.id !== over.id) {\n            const oldIndex = value.findIndex(({ id }) => id === active.id);\n            const newIndex = value.findIndex(({ id }) => id === over.id);\n            onChange(arrayMove([...value], oldIndex, newIndex));\n          }\n        }}\n        onDragCancel={() => setActiveItem(null)}\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          <SortableContext items={sortedOptions.map(({ id }) => id)} strategy={verticalListSortingStrategy}>\n            {sortedOptions.map(option => {\n              return (\n                <DraggableOption\n                  dragHandleAriaLabel={dragHandleAriaLabel}\n                  key={option.id}\n                  onKeyDown={handleKeyDown}\n                  onToggle={onToggle}\n                  option={option}\n                />\n              );\n            })}\n          </SortableContext>\n        </ul>\n        <Portal>\n          {/* Make sure that the drag overlay is above the modal\n              by assigning the z-index as inline style\n              so that it prevails over dnd-kit's inline z-index of 999  */}\n          {/* className is a documented prop of the DragOverlay component:\n              https://docs.dndkit.com/api-documentation/draggable/drag-overlay#class-name-and-inline-styles */\n          /* eslint-disable-next-line react/forbid-component-props */}\n          <DragOverlay className={styles['drag-overlay']} dropAnimation={null} style={{ zIndex: 5000 }}>\n            {activeOption && (\n              <ContentDisplayOption\n                listeners={{ onKeyDown: handleKeyDown }}\n                dragHandleAriaLabel={dragHandleAriaLabel}\n                onToggle={onToggle}\n                option={activeOption}\n              />\n            )}\n          </DragOverlay>\n        </Portal>\n      </DndContext>\n    </div>\n  );\n}\n"]}

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

@@ -1,20 +1,16 @@
 
     import './styles.scoped.css';
     export default {
-  "sortable-item-toggle": "awsui_sortable-item-toggle_1f3h0_1bra9_185",
-  "sortable-item": "awsui_sortable-item_1f3h0_1bra9_185",
-  "sortable-item-placeholder": "awsui_sortable-item-placeholder_1f3h0_1bra9_193",
-  "sortable-item-content": "awsui_sortable-item-content_1f3h0_1bra9_203",
-  "draggable": "awsui_draggable_1f3h0_1bra9_213",
-  "active": "awsui_active_1f3h0_1bra9_222",
-  "sorting": "awsui_sorting_1f3h0_1bra9_228",
-  "sortable-item-label": "awsui_sortable-item-label_1f3h0_1bra9_271",
-  "content-display": "awsui_content-display_1f3h0_1bra9_276",
-  "content-display-groups": "awsui_content-display-groups_1f3h0_1bra9_277",
-  "content-display-group": "awsui_content-display-group_1f3h0_1bra9_277",
-  "content-display-option": "awsui_content-display-option_1f3h0_1bra9_279",
-  "content-display-title": "awsui_content-display-title_1f3h0_1bra9_283",
-  "content-display-description": "awsui_content-display-description_1f3h0_1bra9_291",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1bra9_299"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_e9tk2_185",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_e9tk2_189",
+  "content-display-option": "awsui_content-display-option_1f3h0_e9tk2_185",
+  "placeholder": "awsui_placeholder_1f3h0_e9tk2_212",
+  "sorting": "awsui_sorting_1f3h0_e9tk2_212",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_e9tk2_240",
+  "drag-overlay": "awsui_drag-overlay_1f3h0_e9tk2_248",
+  "content-display": "awsui_content-display_1f3h0_e9tk2_185",
+  "content-display-title": "awsui_content-display-title_1f3h0_e9tk2_275",
+  "content-display-description": "awsui_content-display-description_1f3h0_e9tk2_283",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_e9tk2_291"
 };
   

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

@@ -182,81 +182,107 @@ 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_sortable-item-toggle_1f3h0_1bra9_185:not(#\9) {
+.awsui_content-display-option-toggle_1f3h0_e9tk2_185:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_sortable-item_1f3h0_1bra9_185:not(#\9) {
-  position: relative;
-}
-
-.awsui_sortable-item-placeholder_1f3h0_1bra9_193:not(#\9) {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: var(--color-drag-placeholder-hover-3ohnz1, #d3e7f9);
-  border-radius: var(--border-radius-item-u2ibpi, 8px);
-}
-
-.awsui_sortable-item-content_1f3h0_1bra9_203:not(#\9) {
-  border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
+.awsui_content-display-option-content_1f3h0_e9tk2_189:not(#\9) {
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
+  border-collapse: separate;
+  border-spacing: 0;
+  caption-side: top;
+  cursor: auto;
+  direction: ltr;
+  empty-cells: show;
+  font-family: serif;
+  font-size: medium;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  font-stretch: normal;
+  line-height: normal;
+  -webkit-hyphens: none;
+          hyphens: none;
+  letter-spacing: normal;
+  list-style: disc outside none;
+  tab-size: 8;
+  text-align: left;
+  text-align-last: auto;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  visibility: visible;
+  white-space: normal;
+  widows: 2;
+  word-spacing: normal;
+  box-sizing: border-box;
+  font-size: var(--font-body-m-size-sregvd, 14px);
+  line-height: var(--font-body-m-line-height-i7xxvv, 22px);
+  color: var(--color-text-body-default-ajf1h5, #000716);
+  font-weight: 400;
+  font-family: var(--font-family-base-qnistn, "Open Sans", "Helvetica Neue", Roboto, Arial, sans-serif);
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
   display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
   align-items: flex-start;
-  padding-top: var(--space-xs-rsr2qu, 8px);
-  padding-bottom: var(--space-xs-rsr2qu, 8px);
-  padding-right: 0;
-}
-.awsui_sortable-item-content_1f3h0_1bra9_203:not(#\9):not(.awsui_draggable_1f3h0_1bra9_213) {
-  padding-left: var(--space-scaled-l-t03y3z, 20px);
-}
-.awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9) {
-  padding-left: 0;
-  padding-right: var(--space-scaled-xs-6859qs, 8px);
+  padding: var(--space-xs-rsr2qu, 8px) var(--space-scaled-xs-6859qs, 8px) var(--space-xs-rsr2qu, 8px) 0;
   background-color: var(--color-background-container-content-i8i4a0, #ffffff);
-  z-index: 1;
+  border-radius: var(--border-radius-item-u2ibpi, 8px);
 }
-.awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
+
+.awsui_content-display-option_1f3h0_e9tk2_185:not(#\9) {
+  list-style: none;
   position: relative;
-  z-index: 2;
-  box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
-  border-radius: var(--border-radius-item-u2ibpi, 8px);
+  border-top: var(--border-divider-list-width-hacikr, 1px) solid var(--color-border-divider-default-7s2wjw, #e9ebed);
 }
-.awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9):not(.awsui_active_1f3h0_1bra9_222).awsui_sorting_1f3h0_1bra9_228 {
+.awsui_content-display-option_1f3h0_e9tk2_185:not(#\9):not(.awsui_placeholder_1f3h0_e9tk2_212).awsui_sorting_1f3h0_e9tk2_212 {
   transition: transform var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
+  z-index: 1;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9):not(.awsui_active_1f3h0_1bra9_222).awsui_sorting_1f3h0_1bra9_228 {
+  .awsui_content-display-option_1f3h0_e9tk2_185:not(#\9):not(.awsui_placeholder_1f3h0_e9tk2_212).awsui_sorting_1f3h0_e9tk2_212 {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9):not(.awsui_active_1f3h0_1bra9_222).awsui_sorting_1f3h0_1bra9_228, .awsui-mode-entering .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213:not(#\9):not(.awsui_active_1f3h0_1bra9_222).awsui_sorting_1f3h0_1bra9_228 {
+.awsui-motion-disabled .awsui_content-display-option_1f3h0_e9tk2_185:not(#\9):not(.awsui_placeholder_1f3h0_e9tk2_212).awsui_sorting_1f3h0_e9tk2_212, .awsui-mode-entering .awsui_content-display-option_1f3h0_e9tk2_185:not(#\9):not(.awsui_placeholder_1f3h0_e9tk2_212).awsui_sorting_1f3h0_e9tk2_212 {
   animation: none;
   transition: none;
 }
-body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
-  transition: transform var(--motion-duration-transition-quick-x85tae, 90ms) var(--motion-easing-transition-quick-lukbd8, linear);
+.awsui_content-display-option_1f3h0_e9tk2_185.awsui_placeholder_1f3h0_e9tk2_212 > .awsui_content-display-option-content_1f3h0_e9tk2_189:not(#\9) {
   position: relative;
 }
-@media (prefers-reduced-motion: reduce) {
-  body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
-    animation: none;
-    transition: none;
-  }
+.awsui_content-display-option_1f3h0_e9tk2_185.awsui_placeholder_1f3h0_e9tk2_212 > .awsui_content-display-option-content_1f3h0_e9tk2_189:not(#\9):after {
+  content: " ";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--color-drag-placeholder-hover-3ohnz1, #d3e7f9);
+  border-radius: var(--border-radius-item-u2ibpi, 8px);
 }
-.awsui-motion-disabled body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9), .awsui-mode-entering body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
-  animation: none;
-  transition: none;
+
+.awsui_content-display-option-label_1f3h0_e9tk2_240:not(#\9) {
+  flex-grow: 1;
+  min-width: 0;
+  -ms-word-break: break-all;
+  word-break: break-word;
+  padding-right: var(--space-l-4vl6xu, 20px);
 }
-body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9) {
+
+.awsui_drag-overlay_1f3h0_e9tk2_248:not(#\9) {
+  box-shadow: var(--shadow-container-active-l4kuxc, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
+  border-radius: var(--border-radius-item-u2ibpi, 8px);
+}
+body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_e9tk2_248:not(#\9) {
+  position: relative;
+}
+body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_e9tk2_248:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203.awsui_draggable_1f3h0_1bra9_213.awsui_active_1f3h0_1bra9_222:not(#\9)::before {
+body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_e9tk2_248:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -264,23 +290,15 @@ body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203
   top: calc(-1 * 0px);
   width: calc(100% + 2 * 0px);
   height: calc(100% + 2 * 0px);
-  border-radius: var(--border-radius-control-default-focus-ring-7661kz, 4px);
+  border-radius: var(--border-radius-item-u2ibpi, 8px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-ap3b6s, #0972d3);
 }
 
-.awsui_sortable-item-label_1f3h0_1bra9_271:not(#\9) {
-  padding-right: var(--space-l-4vl6xu, 20px);
-  flex-grow: 1;
-}
-
-.awsui_content-display_1f3h0_1bra9_276:not(#\9),
-.awsui_content-display-groups_1f3h0_1bra9_277:not(#\9),
-.awsui_content-display-group_1f3h0_1bra9_277:not(#\9),
-.awsui_content-display-option_1f3h0_1bra9_279:not(#\9) {
+.awsui_content-display_1f3h0_e9tk2_185:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-title_1f3h0_1bra9_283:not(#\9) {
+.awsui_content-display-title_1f3h0_e9tk2_275:not(#\9) {
   font-size: var(--font-body-m-size-sregvd, 14px);
   line-height: var(--font-body-m-line-height-i7xxvv, 22px);
   font-weight: var(--font-display-label-weight-m18hjh, 700);
@@ -288,7 +306,7 @@ body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203
   margin: 0;
 }
 
-.awsui_content-display-description_1f3h0_1bra9_291:not(#\9) {
+.awsui_content-display-description_1f3h0_e9tk2_283:not(#\9) {
   color: var(--color-text-form-secondary-ih9x7l, #5f6b7a);
   font-size: var(--font-body-s-size-ukw2p9, 12px);
   line-height: var(--font-body-s-line-height-kdsbrl, 16px);
@@ -296,7 +314,7 @@ body[data-awsui-focus-visible=true] .awsui_sortable-item-content_1f3h0_1bra9_203
   margin-top: var(--space-scaled-xxxs-lo883m, 2px);
 }
 
-.awsui_content-display-option-list_1f3h0_1bra9_299:not(#\9) {
+.awsui_content-display-option-list_1f3h0_e9tk2_291:not(#\9) {
   position: relative;
   list-style: none;
   padding: 0;

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

@@ -2,20 +2,16 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "sortable-item-toggle": "awsui_sortable-item-toggle_1f3h0_1bra9_185",
-  "sortable-item": "awsui_sortable-item_1f3h0_1bra9_185",
-  "sortable-item-placeholder": "awsui_sortable-item-placeholder_1f3h0_1bra9_193",
-  "sortable-item-content": "awsui_sortable-item-content_1f3h0_1bra9_203",
-  "draggable": "awsui_draggable_1f3h0_1bra9_213",
-  "active": "awsui_active_1f3h0_1bra9_222",
-  "sorting": "awsui_sorting_1f3h0_1bra9_228",
-  "sortable-item-label": "awsui_sortable-item-label_1f3h0_1bra9_271",
-  "content-display": "awsui_content-display_1f3h0_1bra9_276",
-  "content-display-groups": "awsui_content-display-groups_1f3h0_1bra9_277",
-  "content-display-group": "awsui_content-display-group_1f3h0_1bra9_277",
-  "content-display-option": "awsui_content-display-option_1f3h0_1bra9_279",
-  "content-display-title": "awsui_content-display-title_1f3h0_1bra9_283",
-  "content-display-description": "awsui_content-display-description_1f3h0_1bra9_291",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_1bra9_299"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_e9tk2_185",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_e9tk2_189",
+  "content-display-option": "awsui_content-display-option_1f3h0_e9tk2_185",
+  "placeholder": "awsui_placeholder_1f3h0_e9tk2_212",
+  "sorting": "awsui_sorting_1f3h0_e9tk2_212",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_e9tk2_240",
+  "drag-overlay": "awsui_drag-overlay_1f3h0_e9tk2_248",
+  "content-display": "awsui_content-display_1f3h0_e9tk2_185",
+  "content-display-title": "awsui_content-display-title_1f3h0_e9tk2_275",
+  "content-display-description": "awsui_content-display-description_1f3h0_e9tk2_283",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_e9tk2_291"
 };
   

package/collection-preferences/styles.css.js

@@ -1,41 +1,37 @@
 
     import './styles.scoped.css';
     export default {
-  "visible-content": "awsui_visible-content_tc96w_1m6re_185",
-  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_1m6re_186",
-  "visible-content-groups": "awsui_visible-content-groups_tc96w_1m6re_187",
-  "visible-content-group": "awsui_visible-content-group_tc96w_1m6re_187",
-  "visible-content-title": "awsui_visible-content-title_tc96w_1m6re_192",
-  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_1m6re_201",
-  "visible-content-option": "awsui_visible-content-option_tc96w_1m6re_207",
-  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_1m6re_218",
-  "sortable-item-toggle": "awsui_sortable-item-toggle_tc96w_1m6re_409",
-  "sortable-item": "awsui_sortable-item_tc96w_1m6re_409",
-  "sortable-item-placeholder": "awsui_sortable-item-placeholder_tc96w_1m6re_417",
-  "sortable-item-content": "awsui_sortable-item-content_tc96w_1m6re_427",
-  "draggable": "awsui_draggable_tc96w_1m6re_437",
-  "active": "awsui_active_tc96w_1m6re_446",
-  "sorting": "awsui_sorting_tc96w_1m6re_452",
-  "sortable-item-label": "awsui_sortable-item-label_tc96w_1m6re_495",
-  "content-display": "awsui_content-display_tc96w_1m6re_500",
-  "content-display-groups": "awsui_content-display-groups_tc96w_1m6re_501",
-  "content-display-group": "awsui_content-display-group_tc96w_1m6re_501",
-  "content-display-option": "awsui_content-display-option_tc96w_1m6re_503",
-  "content-display-title": "awsui_content-display-title_tc96w_1m6re_507",
-  "content-display-description": "awsui_content-display-description_tc96w_1m6re_515",
-  "content-display-option-list": "awsui_content-display-option-list_tc96w_1m6re_523",
-  "root": "awsui_root_tc96w_1m6re_529",
-  "modal-root": "awsui_modal-root_tc96w_1m6re_530",
-  "trigger-button": "awsui_trigger-button_tc96w_1m6re_531",
-  "cancel-button": "awsui_cancel-button_tc96w_1m6re_532",
-  "confirm-button": "awsui_confirm-button_tc96w_1m6re_533",
-  "custom": "awsui_custom_tc96w_1m6re_534",
-  "second-column-small": "awsui_second-column-small_tc96w_1m6re_538",
-  "wrap-lines": "awsui_wrap-lines_tc96w_1m6re_542",
-  "striped-rows": "awsui_striped-rows_tc96w_1m6re_543",
-  "content-density": "awsui_content-density_tc96w_1m6re_544",
-  "page-size": "awsui_page-size_tc96w_1m6re_545",
-  "page-size-form-field": "awsui_page-size-form-field_tc96w_1m6re_546",
-  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_1m6re_547"
+  "visible-content": "awsui_visible-content_tc96w_rxrhz_185",
+  "visible-content-toggle": "awsui_visible-content-toggle_tc96w_rxrhz_186",
+  "visible-content-groups": "awsui_visible-content-groups_tc96w_rxrhz_187",
+  "visible-content-group": "awsui_visible-content-group_tc96w_rxrhz_187",
+  "visible-content-title": "awsui_visible-content-title_tc96w_rxrhz_192",
+  "visible-content-group-label": "awsui_visible-content-group-label_tc96w_rxrhz_201",
+  "visible-content-option": "awsui_visible-content-option_tc96w_rxrhz_207",
+  "visible-content-option-label": "awsui_visible-content-option-label_tc96w_rxrhz_218",
+  "content-display-option-toggle": "awsui_content-display-option-toggle_tc96w_rxrhz_409",
+  "content-display-option-content": "awsui_content-display-option-content_tc96w_rxrhz_413",
+  "content-display-option": "awsui_content-display-option_tc96w_rxrhz_409",
+  "placeholder": "awsui_placeholder_tc96w_rxrhz_436",
+  "sorting": "awsui_sorting_tc96w_rxrhz_436",
+  "content-display-option-label": "awsui_content-display-option-label_tc96w_rxrhz_464",
+  "drag-overlay": "awsui_drag-overlay_tc96w_rxrhz_472",
+  "content-display": "awsui_content-display_tc96w_rxrhz_409",
+  "content-display-title": "awsui_content-display-title_tc96w_rxrhz_499",
+  "content-display-description": "awsui_content-display-description_tc96w_rxrhz_507",
+  "content-display-option-list": "awsui_content-display-option-list_tc96w_rxrhz_515",
+  "root": "awsui_root_tc96w_rxrhz_521",
+  "modal-root": "awsui_modal-root_tc96w_rxrhz_522",
+  "trigger-button": "awsui_trigger-button_tc96w_rxrhz_523",
+  "cancel-button": "awsui_cancel-button_tc96w_rxrhz_524",
+  "confirm-button": "awsui_confirm-button_tc96w_rxrhz_525",
+  "custom": "awsui_custom_tc96w_rxrhz_526",
+  "second-column-small": "awsui_second-column-small_tc96w_rxrhz_530",
+  "wrap-lines": "awsui_wrap-lines_tc96w_rxrhz_534",
+  "striped-rows": "awsui_striped-rows_tc96w_rxrhz_535",
+  "content-density": "awsui_content-density_tc96w_rxrhz_536",
+  "page-size": "awsui_page-size_tc96w_rxrhz_537",
+  "page-size-form-field": "awsui_page-size-form-field_tc96w_rxrhz_538",
+  "page-size-radio-group": "awsui_page-size-radio-group_tc96w_rxrhz_539"
 };