@cloudscape-design/components-themeable 3.0.852 → 3.0.854

package/lib/internal/template/code-editor/styles.selectors.js

@@ -2,38 +2,38 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_vc118_154",
-  "code-editor": "awsui_code-editor_1gl9c_vc118_154",
-  "pane": "awsui_pane_1gl9c_vc118_696",
-  "pane__close-container": "awsui_pane__close-container_1gl9c_vc118_707",
-  "pane__list": "awsui_pane__list_1gl9c_vc118_712",
-  "pane__table": "awsui_pane__table_1gl9c_vc118_719",
-  "pane__item": "awsui_pane__item_1gl9c_vc118_725",
-  "pane__cell": "awsui_pane__cell_1gl9c_vc118_725",
-  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_vc118_739",
-  "pane__location": "awsui_pane__location_1gl9c_vc118_760",
-  "pane__description": "awsui_pane__description_1gl9c_vc118_760",
-  "focus-lock": "awsui_focus-lock_1gl9c_vc118_775",
-  "editor": "awsui_editor_1gl9c_vc118_819",
-  "editor-refresh": "awsui_editor-refresh_1gl9c_vc118_847",
-  "status-bar": "awsui_status-bar_1gl9c_vc118_852",
-  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_vc118_861",
-  "status-bar__left": "awsui_status-bar__left_1gl9c_vc118_865",
-  "status-bar__right": "awsui_status-bar__right_1gl9c_vc118_872",
-  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_vc118_876",
-  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_vc118_876",
-  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_vc118_882",
-  "tab-list": "awsui_tab-list_1gl9c_vc118_887",
-  "tab-button": "awsui_tab-button_1gl9c_vc118_892",
-  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_vc118_925",
-  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_vc118_928",
-  "tab-button--active": "awsui_tab-button--active_1gl9c_vc118_937",
-  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_vc118_953",
-  "tab-button--divider": "awsui_tab-button--divider_1gl9c_vc118_986",
-  "tab-button--errors": "awsui_tab-button--errors_1gl9c_vc118_993",
-  "count": "awsui_count_1gl9c_vc118_1002",
-  "text": "awsui_text_1gl9c_vc118_1005",
-  "loading-screen": "awsui_loading-screen_1gl9c_vc118_1027",
-  "error-screen": "awsui_error-screen_1gl9c_vc118_1028"
+  "code-editor-refresh": "awsui_code-editor-refresh_1gl9c_pz01r_158",
+  "code-editor": "awsui_code-editor_1gl9c_pz01r_158",
+  "pane": "awsui_pane_1gl9c_pz01r_700",
+  "pane__close-container": "awsui_pane__close-container_1gl9c_pz01r_711",
+  "pane__list": "awsui_pane__list_1gl9c_pz01r_716",
+  "pane__table": "awsui_pane__table_1gl9c_pz01r_723",
+  "pane__item": "awsui_pane__item_1gl9c_pz01r_729",
+  "pane__cell": "awsui_pane__cell_1gl9c_pz01r_729",
+  "pane__item--highlighted": "awsui_pane__item--highlighted_1gl9c_pz01r_743",
+  "pane__location": "awsui_pane__location_1gl9c_pz01r_764",
+  "pane__description": "awsui_pane__description_1gl9c_pz01r_764",
+  "focus-lock": "awsui_focus-lock_1gl9c_pz01r_779",
+  "editor": "awsui_editor_1gl9c_pz01r_823",
+  "editor-refresh": "awsui_editor-refresh_1gl9c_pz01r_851",
+  "status-bar": "awsui_status-bar_1gl9c_pz01r_856",
+  "status-bar-with-hidden-pane": "awsui_status-bar-with-hidden-pane_1gl9c_pz01r_865",
+  "status-bar__left": "awsui_status-bar__left_1gl9c_pz01r_869",
+  "status-bar__right": "awsui_status-bar__right_1gl9c_pz01r_876",
+  "status-bar__language-mode": "awsui_status-bar__language-mode_1gl9c_pz01r_880",
+  "status-bar__cursor-position": "awsui_status-bar__cursor-position_1gl9c_pz01r_880",
+  "status-bar__cog-button": "awsui_status-bar__cog-button_1gl9c_pz01r_886",
+  "tab-list": "awsui_tab-list_1gl9c_pz01r_891",
+  "tab-button": "awsui_tab-button_1gl9c_pz01r_896",
+  "tab-button--refresh": "awsui_tab-button--refresh_1gl9c_pz01r_929",
+  "tab-button--warnings": "awsui_tab-button--warnings_1gl9c_pz01r_932",
+  "tab-button--active": "awsui_tab-button--active_1gl9c_pz01r_941",
+  "tab-button--disabled": "awsui_tab-button--disabled_1gl9c_pz01r_957",
+  "tab-button--divider": "awsui_tab-button--divider_1gl9c_pz01r_990",
+  "tab-button--errors": "awsui_tab-button--errors_1gl9c_pz01r_997",
+  "count": "awsui_count_1gl9c_pz01r_1006",
+  "text": "awsui_text_1gl9c_pz01r_1009",
+  "loading-screen": "awsui_loading-screen_1gl9c_pz01r_1031",
+  "error-screen": "awsui_error-screen_1gl9c_pz01r_1032"
 };
   

package/lib/internal/template/collection-preferences/analytics-metadata/interfaces.d.ts

@@ -1,27 +1,3 @@
-export interface GeneratedAnalyticsMetadataCollectionPreferencesOpen {
-    action: 'open';
-    detail: {
-        label: string;
-    };
-}
-export interface GeneratedAnalyticsMetadataCollectionPreferencesDismiss {
-    action: 'dismiss';
-    detail: {
-        label: string;
-    };
-}
-export interface GeneratedAnalyticsMetadataCollectionPreferencesConfirm {
-    action: 'confirm';
-    detail: {
-        label: string;
-    };
-}
-export interface GeneratedAnalyticsMetadataCollectionPreferencesCancel {
-    action: 'cancel';
-    detail: {
-        label: string;
-    };
-}
 export interface GeneratedAnalyticsMetadataCollectionPreferencesComponent {
     name: 'awsui.CollectionPreferences';
     label: string;

package/lib/internal/template/collection-preferences/analytics-metadata/interfaces.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,mDAAmD;IAClE,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,sDAAsD;IACrE,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,sDAAsD;IACrE,MAAM,EAAE,SAAS,CAAC;IAClB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,qDAAqD;IACpE,MAAM,EAAE,QAAQ,CAAC;IACjB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH;AAED,MAAM,WAAW,wDAAwD;IACvE,IAAI,EAAE,6BAA6B,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;KACrC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,wDAAwD;IACvE,IAAI,EAAE,6BAA6B,CAAC;IACpC,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE;QACV,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;QAClB,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,cAAc,CAAC,EAAE,MAAM,CAAC;QACxB,mBAAmB,CAAC,EAAE,MAAM,CAAC;QAC7B,kBAAkB,CAAC,EAAE,MAAM,CAAC;QAC5B,iBAAiB,CAAC,EAAE,MAAM,CAAC;QAC3B,0BAA0B,CAAC,EAAE,MAAM,CAAC;KACrC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;CACH"}

package/lib/internal/template/collection-preferences/analytics-metadata/interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/collection-preferences/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface GeneratedAnalyticsMetadataCollectionPreferencesOpen {\n  action: 'open';\n  detail: {\n    label: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataCollectionPreferencesDismiss {\n  action: 'dismiss';\n  detail: {\n    label: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataCollectionPreferencesConfirm {\n  action: 'confirm';\n  detail: {\n    label: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataCollectionPreferencesCancel {\n  action: 'cancel';\n  detail: {\n    label: string;\n  };\n}\n\nexport interface GeneratedAnalyticsMetadataCollectionPreferencesComponent {\n  name: 'awsui.CollectionPreferences';\n  label: string;\n  properties: {\n    disabled: string;\n    pageSize?: string;\n    wrapLines?: string;\n    stripedRows?: string;\n    contentDensity?: string;\n    visibleContentCount?: string;\n    stickyColumnsFirst?: string;\n    stickyColumnsLast?: string;\n    contentDisplayVisibleCount?: string;\n  };\n  innerContext?: {\n    preference: string;\n  };\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../src/collection-preferences/analytics-metadata/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport interface GeneratedAnalyticsMetadataCollectionPreferencesComponent {\n  name: 'awsui.CollectionPreferences';\n  label: string;\n  properties: {\n    disabled: string;\n    pageSize?: string;\n    wrapLines?: string;\n    stripedRows?: string;\n    contentDensity?: string;\n    visibleContentCount?: string;\n    stickyColumnsFirst?: string;\n    stickyColumnsLast?: string;\n    contentDisplayVisibleCount?: string;\n  };\n  innerContext?: {\n    preference: string;\n  };\n}\n"]}

package/lib/internal/template/collection-preferences/content-display/content-display-option.d.ts

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

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,MAAM,WAAW,yBAAyB;IACxC,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,kGA8BzB,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,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAClD,MAAM,EAAE,oBAAoB,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,oBAAoB,kGA8BzB,CAAC;AAEF,eAAe,oBAAoB,CAAC"}

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;AAU7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAA6B,EACzF,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,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,GAAI;QAE1F,+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\nexport interface ContentDisplayOptionProps {\n  dragHandleAriaLabel?: string;\n  listeners?: DragHandleProps['listeners'];\n  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n  disabled?: boolean;\n}\n\nconst ContentDisplayOption = forwardRef(\n  (\n    { dragHandleAriaLabel, listeners, onToggle, option, disabled }: 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 disabled={disabled} 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"]}
+{"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;AAU7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EAAE,mBAAmB,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAA6B,EACzF,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,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,oBAAoB,EAAE,SAAS,EAAE,SAAS,GAAI;QAE1F,+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  dragHandleAriaLabel?: string;\n  listeners?: DragHandleProps['listeners'];\n  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n  disabled?: boolean;\n}\n\nconst ContentDisplayOption = forwardRef(\n  (\n    { dragHandleAriaLabel, listeners, onToggle, option, disabled }: 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 disabled={disabled} 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/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":";AAcA,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,EACnB,qBAA6B,EAC7B,WAAW,GACZ,EAAE,6BAA6B,eA2L/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,eA2J/B"}

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

@@ -1,20 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { useMemo, useState } from 'react';
-import { DndContext, DragOverlay } from '@dnd-kit/core';
-import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import clsx from 'clsx';
 import InternalBox from '../../box/internal';
 import InternalButton from '../../button/internal';
 import { useInternalI18n } from '../../i18n/context';
-import Portal from '../../internal/components/portal';
+import { DndContainer } from '../../internal/components/dnd-container';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import InternalSpaceBetween from '../../space-between/internal';
 import InternalTextFilter from '../../text-filter/internal';
 import { getAnalyticsInnerContextAttribute } from '../analytics-metadata/utils';
-import ContentDisplayOption from './content-display-option';
-import DraggableOption from './draggable-option';
-import useDragAndDropReorder from './use-drag-and-drop-reorder';
-import useLiveAnnouncements from './use-live-announcements';
+import ContentDisplayOption, { getClassName as getOptionClassName } from './content-display-option';
 import { getFilteredOptions, getSortedOptions } from './utils';
 import styles from '../styles.css.js';
 const componentPrefix = 'content-display';
@@ -38,19 +34,6 @@ export default function ContentDisplayPreference({ title, description, options,
         // are not in the value yet, so they're added as non-visible after the known ones.
         onChange(sortedOptions.map(({ id, visible }) => ({ id, visible: id === option.id ? !option.visible : visible })));
     };
-    const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
-        sortedOptions: sortedAndFilteredOptions,
-    });
-    const activeOption = activeItem ? sortedAndFilteredOptions.find(({ id }) => id === activeItem) : null;
-    const announcements = useLiveAnnouncements({
-        isDragging: activeItem !== null,
-        liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', liveAnnouncementDndStarted, format => (position, total) => format({ position, total })),
-        liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, format => (initialPosition, currentPosition, total) => format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })),
-        liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, format => (initialPosition, finalPosition, total) => format({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })),
-        liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
-        sortedOptions: sortedAndFilteredOptions,
-    });
-    const renderedDragHandleAriaDescription = i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription);
     return (React.createElement("div", Object.assign({ className: styles[componentPrefix] }, getAnalyticsInnerContextAttribute('contentDisplay')),
         React.createElement("h3", { className: getClassName('title'), id: titleId }, i18n('contentDisplayPreference.title', title)),
         React.createElement("p", { className: getClassName('description'), id: descriptionId }, i18n('contentDisplayPreference.description', description)),
@@ -62,27 +45,20 @@ export default function ContentDisplayPreference({ title, description, options,
             React.createElement(InternalSpaceBetween, { size: "s", alignItems: "center" },
                 React.createElement(InternalBox, { margin: { top: 'm' } }, i18n('contentDisplayPreference.i18nStrings.columnFilteringNoMatchText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringNoMatchText)),
                 React.createElement(InternalButton, { onClick: () => setColumnFilteringText('') }, i18n('contentDisplayPreference.i18nStrings.columnFilteringClearFilterText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringClearFilterText))))),
-        React.createElement(DndContext, { sensors: sensors, collisionDetection: collisionDetection, accessibility: {
-                announcements,
-                restoreFocus: false,
-                screenReaderInstructions: renderedDragHandleAriaDescription
-                    ? { draggable: renderedDragHandleAriaDescription }
-                    : undefined,
-            }, onDragStart: ({ active }) => setActiveItem(active.id), onDragEnd: event => {
-                setActiveItem(null);
-                const { active, over } = event;
-                if (over && active.id !== over.id) {
-                    const oldIndex = sortedOptions.findIndex(({ id }) => id === active.id);
-                    const newIndex = sortedOptions.findIndex(({ id }) => id === over.id);
-                    // We need to remember to trim the options down to id and visible to emit changes.
-                    onChange(arrayMove([...sortedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));
-                }
-            }, onDragCancel: () => setActiveItem(null) },
-            React.createElement("ul", { className: getClassName('option-list'), "aria-describedby": descriptionId, "aria-labelledby": titleId, role: "list" },
-                React.createElement(SortableContext, { disabled: columnFilteringText.trim().length > 0, items: sortedAndFilteredOptions.map(({ id }) => id), strategy: verticalListSortingStrategy }, sortedAndFilteredOptions.map(option => {
-                    return (React.createElement(DraggableOption, { dragHandleAriaLabel: i18n('contentDisplayPreference.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: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel), onToggle: onToggle, option: activeOption })))))));
+        React.createElement("ul", { className: getClassName('option-list'), "aria-describedby": descriptionId, "aria-labelledby": titleId, role: "list" },
+            React.createElement(DndContainer, { sortedOptions: sortedAndFilteredOptions, getId: option => option.id, onChange: options => onChange(options.map(({ id, visible }) => ({ id, visible }))), disabled: columnFilteringText.trim().length > 0, renderOption: props => (React.createElement("li", { className: clsx(getOptionClassName(), props.isDragging && styles.placeholder, props.isSorting && styles.sorting), style: props.style },
+                    React.createElement(ContentDisplayOption, { ref: props.ref, listeners: props.listeners, dragHandleAriaLabel: props.dragHandleAriaLabel, onToggle: onToggle, option: props.option, disabled: props.attributes['aria-disabled'] }))), renderActiveOption: props => (React.createElement(ContentDisplayOption, { option: props.option, dragHandleAriaLabel: props.dragHandleAriaLabel, listeners: props.listeners, onToggle: onToggle })), i18nStrings: {
+                    liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', liveAnnouncementDndStarted, format => (position, total) => format({ position, total })),
+                    liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, format => (initialPosition, currentPosition, total) => format({ currentPosition, total, isInitialPosition: `${initialPosition === currentPosition}` })),
+                    liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, format => (initialPosition, finalPosition, total) => format({
+                        initialPosition,
+                        finalPosition,
+                        total,
+                        isInitialPosition: `${initialPosition === finalPosition}`,
+                    })),
+                    liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
+                    dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel),
+                    dragHandleAriaDescription: i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription),
+                } }))));
 }
 //# sourceMappingURL=index.js.map

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 { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport Portal from '../../internal/components/portal';\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 from './content-display-option';\nimport DraggableOption from './draggable-option';\nimport useDragAndDropReorder from './use-drag-and-drop-reorder';\nimport useLiveAnnouncements from './use-live-announcements';\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  const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({\n    sortedOptions: sortedAndFilteredOptions,\n  });\n\n  const activeOption = activeItem ? sortedAndFilteredOptions.find(({ id }) => id === activeItem) : null;\n\n  const announcements = useLiveAnnouncements({\n    isDragging: activeItem !== null,\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({ initialPosition, finalPosition, total, isInitialPosition: `${initialPosition === finalPosition}` })\n    ),\n    liveAnnouncementDndDiscarded: i18n(\n      'contentDisplayPreference.liveAnnouncementDndDiscarded',\n      liveAnnouncementDndDiscarded\n    ),\n    sortedOptions: sortedAndFilteredOptions,\n  });\n\n  const renderedDragHandleAriaDescription = i18n(\n    'contentDisplayPreference.dragHandleAriaDescription',\n    dragHandleAriaDescription\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      {/* Drag and drop */}\n      <DndContext\n        sensors={sensors}\n        collisionDetection={collisionDetection}\n        accessibility={{\n          announcements,\n          restoreFocus: false,\n          screenReaderInstructions: renderedDragHandleAriaDescription\n            ? { draggable: renderedDragHandleAriaDescription }\n            : 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 = sortedOptions.findIndex(({ id }) => id === active.id);\n            const newIndex = sortedOptions.findIndex(({ id }) => id === over.id);\n            // We need to remember to trim the options down to id and visible to emit changes.\n            onChange(arrayMove([...sortedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));\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\n            disabled={columnFilteringText.trim().length > 0}\n            items={sortedAndFilteredOptions.map(({ id }) => id)}\n            strategy={verticalListSortingStrategy}\n          >\n            {sortedAndFilteredOptions.map(option => {\n              return (\n                <DraggableOption\n                  dragHandleAriaLabel={i18n('contentDisplayPreference.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={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}\n                onToggle={onToggle}\n                option={activeOption}\n              />\n            )}\n          </DragOverlay>\n        </Portal>\n      </DndContext>\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 { 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          sortedOptions={sortedAndFilteredOptions}\n          getId={option => option.id}\n          onChange={options => onChange(options.map(({ id, visible }) => ({ id, visible })))}\n          disabled={columnFilteringText.trim().length > 0}\n          renderOption={props => (\n            <li\n              className={clsx(\n                getOptionClassName(),\n                props.isDragging && styles.placeholder,\n                props.isSorting && styles.sorting\n              )}\n              style={props.style}\n            >\n              <ContentDisplayOption\n                ref={props.ref}\n                listeners={props.listeners}\n                dragHandleAriaLabel={props.dragHandleAriaLabel}\n                onToggle={onToggle}\n                option={props.option}\n                disabled={props.attributes['aria-disabled']}\n              />\n            </li>\n          )}\n          renderActiveOption={props => (\n            <ContentDisplayOption\n              option={props.option}\n              dragHandleAriaLabel={props.dragHandleAriaLabel}\n              listeners={props.listeners}\n              onToggle={onToggle}\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,18 +1,17 @@
 
     import './styles.scoped.css';
     export default {
-  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_6bely_281",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_6bely_285",
-  "content-display-option": "awsui_content-display-option_1f3h0_6bely_281",
-  "placeholder": "awsui_placeholder_1f3h0_6bely_332",
-  "sorting": "awsui_sorting_1f3h0_6bely_332",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_6bely_359",
-  "drag-overlay": "awsui_drag-overlay_1f3h0_6bely_366",
-  "content-display": "awsui_content-display_1f3h0_6bely_281",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_6bely_396",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_6bely_397",
-  "content-display-title": "awsui_content-display-title_1f3h0_6bely_401",
-  "content-display-description": "awsui_content-display-description_1f3h0_6bely_410",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_6bely_418"
+  "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"
 };
   

package/lib/internal/template/collection-preferences/content-display/styles.scoped.css

@@ -136,6 +136,10 @@
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
@@ -272,17 +276,21 @@ 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
 */
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
 /*
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_content-display-option-toggle_1f3h0_6bely_281:not(#\9) {
+.awsui_content-display-option-toggle_1f3h0_1c3gl_289:not(#\9) {
   /* used in test-utils */
 }
 
-.awsui_content-display-option-content_1f3h0_6bely_285:not(#\9) {
+.awsui_content-display-option-content_1f3h0_1c3gl_293:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -325,28 +333,28 @@ 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_6bely_281:not(#\9) {
+.awsui_content-display-option_1f3h0_1c3gl_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_6bely_281:not(#\9):not(.awsui_placeholder_1f3h0_6bely_332).awsui_sorting_1f3h0_6bely_332 {
+.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_6bely_281:not(#\9):not(.awsui_placeholder_1f3h0_6bely_332).awsui_sorting_1f3h0_6bely_332 {
+  .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_6bely_281:not(#\9):not(.awsui_placeholder_1f3h0_6bely_332).awsui_sorting_1f3h0_6bely_332, .awsui-mode-entering .awsui_content-display-option_1f3h0_6bely_281:not(#\9):not(.awsui_placeholder_1f3h0_6bely_332).awsui_sorting_1f3h0_6bely_332 {
+.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_6bely_281.awsui_placeholder_1f3h0_6bely_332 > .awsui_content-display-option-content_1f3h0_6bely_285:not(#\9) {
+.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_6bely_281.awsui_placeholder_1f3h0_6bely_332 > .awsui_content-display-option-content_1f3h0_6bely_285:not(#\9):after {
+.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;
@@ -357,49 +365,20 @@ 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-label_1f3h0_6bely_359:not(#\9) {
+.awsui_content-display-option-label_1f3h0_1c3gl_367:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-eenfqd, 20px);
 }
 
-.awsui_drag-overlay_1f3h0_6bely_366:not(#\9) {
-  box-shadow: var(--shadow-container-active-b0dn3h, 0px 4px 8px rgba(0, 28, 36, 0.45));
-  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);
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_6bely_366:not(#\9) {
-  position: relative;
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_6bely_366:not(#\9) {
-  outline: 2px dotted transparent;
-  outline-offset: calc(0px - 1px);
-}
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_6bely_366:not(#\9)::before {
-  content: " ";
-  display: block;
-  position: absolute;
-  inset-inline-start: calc(-1 * 0px);
-  inset-block-start: calc(-1 * 0px);
-  inline-size: calc(100% + 0px + 0px);
-  block-size: calc(100% + 0px + 0px);
-  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);
-  box-shadow: 0 0 0 2px var(--color-border-item-focused-q68bgg, #0073bb);
-}
-
-.awsui_content-display_1f3h0_6bely_281:not(#\9),
-.awsui_content-display-text-filter_1f3h0_6bely_396:not(#\9),
-.awsui_content-display-no-match_1f3h0_6bely_397:not(#\9) {
+.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) {
   /* used in test-utils */
 }
 
-.awsui_content-display-title_1f3h0_6bely_401:not(#\9) {
+.awsui_content-display-title_1f3h0_1c3gl_380: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);
@@ -408,7 +387,7 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_6bely_366:not(#\9)
   margin-inline: 0;
 }
 
-.awsui_content-display-description_1f3h0_6bely_410:not(#\9) {
+.awsui_content-display-description_1f3h0_1c3gl_389: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);
@@ -416,7 +395,7 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_6bely_366:not(#\9)
   margin-block-start: var(--space-scaled-xxxs-6vyqo7, 2px);
 }
 
-.awsui_content-display-option-list_1f3h0_6bely_418:not(#\9) {
+.awsui_content-display-option-list_1f3h0_1c3gl_397:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;

package/lib/internal/template/collection-preferences/content-display/styles.selectors.js

@@ -2,18 +2,17 @@
     // 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_6bely_281",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_6bely_285",
-  "content-display-option": "awsui_content-display-option_1f3h0_6bely_281",
-  "placeholder": "awsui_placeholder_1f3h0_6bely_332",
-  "sorting": "awsui_sorting_1f3h0_6bely_332",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_6bely_359",
-  "drag-overlay": "awsui_drag-overlay_1f3h0_6bely_366",
-  "content-display": "awsui_content-display_1f3h0_6bely_281",
-  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_6bely_396",
-  "content-display-no-match": "awsui_content-display-no-match_1f3h0_6bely_397",
-  "content-display-title": "awsui_content-display-title_1f3h0_6bely_401",
-  "content-display-description": "awsui_content-display-description_1f3h0_6bely_410",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_6bely_418"
+  "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"
 };