npm - @cloudscape-design/components - Versions diffs - 3.0.772 → 3.0.774 - Mend

@cloudscape-design/components 3.0.772 → 3.0.774

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (218) hide show

package/collection-preferences/analytics-metadata/interfaces.d.ts ADDED Viewed

@@ -0,0 +1,43 @@
+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;
+    properties: {
+        disabled: string;
+        pageSize?: string;
+        wrapLines?: string;
+        stripedRows?: string;
+        contentDensity?: string;
+        visibleContentCount?: string;
+        stickyColumnsFirst?: string;
+        stickyColumnsLast?: string;
+        contentDisplayVisibleCount?: string;
+    };
+    innerContext?: {
+        preference: string;
+    };
+}
+//# sourceMappingURL=interfaces.d.ts.map

package/collection-preferences/analytics-metadata/interfaces.d.ts.map ADDED Viewed

@@ -0,0 +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"}

package/collection-preferences/analytics-metadata/interfaces.js ADDED Viewed

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

package/collection-preferences/analytics-metadata/interfaces.js.map ADDED Viewed

@@ -0,0 +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"]}

package/collection-preferences/analytics-metadata/styles.css.js ADDED Viewed

@@ -0,0 +1,6 @@
+    import './styles.scoped.css';
+    export default {
+  "trigger-button": "awsui_trigger-button_119fv_11zih_5"
+};

package/collection-preferences/analytics-metadata/styles.scoped.css ADDED Viewed

@@ -0,0 +1,7 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+.awsui_trigger-button_119fv_11zih_5:not(#\9) {
+  /* used in analytics metadata */
+}

package/collection-preferences/analytics-metadata/styles.selectors.js ADDED Viewed

@@ -0,0 +1,7 @@
+    // es-module interop with Babel and Typescript
+    Object.defineProperty(exports, "__esModule", { value: true });
+    module.exports.default = {
+  "trigger-button": "awsui_trigger-button_119fv_11zih_5"
+};

package/collection-preferences/analytics-metadata/utils.d.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import { CollectionPreferencesProps } from '../interfaces';
+import { GeneratedAnalyticsMetadataCollectionPreferencesComponent } from './interfaces';
+export declare const getComponentAnalyticsMetadata: (disabled: boolean, preferences?: CollectionPreferencesProps['preferences']) => GeneratedAnalyticsMetadataCollectionPreferencesComponent;
+export declare const getAnalyticsInnerContextAttribute: (preference: string) => {
+    "data-awsui-analytics": string;
+} | {
+    "data-awsui-analytics"?: undefined;
+};
+//# sourceMappingURL=utils.d.ts.map

package/collection-preferences/analytics-metadata/utils.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/analytics-metadata/utils.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAC3D,OAAO,EAAE,wDAAwD,EAAE,MAAM,cAAc,CAAC;AAIxF,eAAO,MAAM,6BAA6B,aAC9B,OAAO,gBACJ,0BAA0B,CAAC,aAAa,CAAC,KACrD,wDAmCF,CAAC;AAEF,eAAO,MAAM,iCAAiC,eAAgB,MAAM;;;;CAOhE,CAAC"}

package/collection-preferences/analytics-metadata/utils.js ADDED Viewed

@@ -0,0 +1,48 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
+import analyticsSelectors from './styles.css.js';
+export const getComponentAnalyticsMetadata = (disabled, preferences = {}) => {
+    const metadata = {
+        name: 'awsui.CollectionPreferences',
+        label: `.${analyticsSelectors['trigger-button']}`,
+        properties: {
+            disabled: `${!!disabled}`,
+        },
+    };
+    if (preferences.pageSize) {
+        metadata.properties.pageSize = `${preferences.pageSize}`;
+    }
+    if (preferences.wrapLines !== undefined) {
+        metadata.properties.wrapLines = `${!!preferences.wrapLines}`;
+    }
+    if (preferences.stripedRows !== undefined) {
+        metadata.properties.stripedRows = `${!!preferences.stripedRows}`;
+    }
+    if (preferences.contentDensity !== undefined) {
+        metadata.properties.contentDensity = preferences.contentDensity;
+    }
+    if (preferences.visibleContent) {
+        metadata.properties.visibleContentCount = `${preferences.visibleContent.length}`;
+    }
+    if (preferences.stickyColumns) {
+        if (preferences.stickyColumns.first) {
+            metadata.properties.stickyColumnsFirst = `${preferences.stickyColumns.first}`;
+        }
+        if (preferences.stickyColumns.last) {
+            metadata.properties.stickyColumnsLast = `${preferences.stickyColumns.last}`;
+        }
+    }
+    if (preferences.contentDisplay) {
+        metadata.properties.contentDisplayVisibleCount = `${preferences.contentDisplay.filter(({ visible }) => !!visible).length}`;
+    }
+    return metadata;
+};
+export const getAnalyticsInnerContextAttribute = (preference) => getAnalyticsMetadataAttribute({
+    component: {
+        innerContext: {
+            preference,
+        },
+    },
+});
+//# sourceMappingURL=utils.js.map

package/collection-preferences/analytics-metadata/utils.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/collection-preferences/analytics-metadata/utils.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAKjH,OAAO,kBAAkB,MAAM,iBAAiB,CAAC;AAEjD,MAAM,CAAC,MAAM,6BAA6B,GAAG,CAC3C,QAAiB,EACjB,cAAyD,EAAE,EACD,EAAE;IAC5D,MAAM,QAAQ,GAA6D;QACzE,IAAI,EAAE,6BAA6B;QACnC,KAAK,EAAE,IAAI,kBAAkB,CAAC,gBAAgB,CAAC,EAAE;QACjD,UAAU,EAAE;YACV,QAAQ,EAAE,GAAG,CAAC,CAAC,QAAQ,EAAE;SAC1B;KACF,CAAC;IACF,IAAI,WAAW,CAAC,QAAQ,EAAE;QACxB,QAAQ,CAAC,UAAU,CAAC,QAAQ,GAAG,GAAG,WAAW,CAAC,QAAQ,EAAE,CAAC;KAC1D;IACD,IAAI,WAAW,CAAC,SAAS,KAAK,SAAS,EAAE;QACvC,QAAQ,CAAC,UAAU,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC,WAAW,CAAC,SAAS,EAAE,CAAC;KAC9D;IACD,IAAI,WAAW,CAAC,WAAW,KAAK,SAAS,EAAE;QACzC,QAAQ,CAAC,UAAU,CAAC,WAAW,GAAG,GAAG,CAAC,CAAC,WAAW,CAAC,WAAW,EAAE,CAAC;KAClE;IACD,IAAI,WAAW,CAAC,cAAc,KAAK,SAAS,EAAE;QAC5C,QAAQ,CAAC,UAAU,CAAC,cAAc,GAAG,WAAW,CAAC,cAAc,CAAC;KACjE;IACD,IAAI,WAAW,CAAC,cAAc,EAAE;QAC9B,QAAQ,CAAC,UAAU,CAAC,mBAAmB,GAAG,GAAG,WAAW,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;KAClF;IACD,IAAI,WAAW,CAAC,aAAa,EAAE;QAC7B,IAAI,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE;YACnC,QAAQ,CAAC,UAAU,CAAC,kBAAkB,GAAG,GAAG,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE,CAAC;SAC/E;QACD,IAAI,WAAW,CAAC,aAAa,CAAC,IAAI,EAAE;YAClC,QAAQ,CAAC,UAAU,CAAC,iBAAiB,GAAG,GAAG,WAAW,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;SAC7E;KACF;IACD,IAAI,WAAW,CAAC,cAAc,EAAE;QAC9B,QAAQ,CAAC,UAAU,CAAC,0BAA0B,GAAG,GAAG,WAAW,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC;KAC5H;IACD,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,iCAAiC,GAAG,CAAC,UAAkB,EAAE,EAAE,CACtE,6BAA6B,CAAC;IAC5B,SAAS,EAAE;QACT,YAAY,EAAE;YACZ,UAAU;SACX;KACF;CACF,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { CollectionPreferencesProps } from '../interfaces';\nimport { GeneratedAnalyticsMetadataCollectionPreferencesComponent } from './interfaces';\n\nimport analyticsSelectors from './styles.css.js';\n\nexport const getComponentAnalyticsMetadata = (\n disabled: boolean,\n preferences: CollectionPreferencesProps['preferences'] = {}\n): GeneratedAnalyticsMetadataCollectionPreferencesComponent => {\n const metadata: GeneratedAnalyticsMetadataCollectionPreferencesComponent = {\n name: 'awsui.CollectionPreferences',\n label: `.${analyticsSelectors['trigger-button']}`,\n properties: {\n disabled: `${!!disabled}`,\n },\n };\n if (preferences.pageSize) {\n metadata.properties.pageSize = `${preferences.pageSize}`;\n }\n if (preferences.wrapLines !== undefined) {\n metadata.properties.wrapLines = `${!!preferences.wrapLines}`;\n }\n if (preferences.stripedRows !== undefined) {\n metadata.properties.stripedRows = `${!!preferences.stripedRows}`;\n }\n if (preferences.contentDensity !== undefined) {\n metadata.properties.contentDensity = preferences.contentDensity;\n }\n if (preferences.visibleContent) {\n metadata.properties.visibleContentCount = `${preferences.visibleContent.length}`;\n }\n if (preferences.stickyColumns) {\n if (preferences.stickyColumns.first) {\n metadata.properties.stickyColumnsFirst = `${preferences.stickyColumns.first}`;\n }\n if (preferences.stickyColumns.last) {\n metadata.properties.stickyColumnsLast = `${preferences.stickyColumns.last}`;\n }\n }\n if (preferences.contentDisplay) {\n metadata.properties.contentDisplayVisibleCount = `${preferences.contentDisplay.filter(({ visible }) => !!visible).length}`;\n }\n return metadata;\n};\n\nexport const getAnalyticsInnerContextAttribute = (preference: string) =>\n getAnalyticsMetadataAttribute({\n component: {\n innerContext: {\n preference,\n },\n },\n });\n"]}

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

@@ -7,6 +7,7 @@ export interface ContentDisplayOptionProps {
     listeners?: SyntheticListenerMap;
     onToggle?: (option: OptionWithVisibility) => void;
     option: OptionWithVisibility;
+    disabled?: boolean;
 }
 declare const ContentDisplayOption: React.ForwardRefExoticComponent<ContentDisplayOptionProps & React.RefAttributes<HTMLDivElement>>;
 export default ContentDisplayOption;

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

	@@ -1 +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;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAK1E,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,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"}
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;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAK1E,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,oBAAoB,CAAC;IACjC,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/collection-preferences/content-display/content-display-option.js CHANGED Viewed

@@ -7,14 +7,14 @@ import InternalToggle from '../../toggle/internal';
 import styles from '../styles.css.js';
 const componentPrefix = 'content-display-option';
 export const getClassName = (suffix) => styles[[componentPrefix, suffix].filter(Boolean).join('-')];
-const ContentDisplayOption = forwardRef(({ dragHandleAriaLabel, listeners, onToggle, option }, ref) => {
+const ContentDisplayOption = forwardRef(({ dragHandleAriaLabel, listeners, onToggle, option, disabled }, 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(DragHandle, { disabled: disabled, 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 }))));

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

	@@ -1 +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;AAGxD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AACjE,OAAO,cAAc,MAAM,uBAAuB,CAAC;AAGnD,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,eAAe,GAAG,wBAAwB,CAAC;AACjD,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,MAAe,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;~~AAS7G~~,MAAM,oBAAoB,GAAG,UAAU,CACrC,CACE,EAAE,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 React, { ForwardedRef, forwardRef } from 'react';\nimport { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';\n\nimport DragHandle 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?: 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"]}
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;AAGxD,OAAO,UAAU,MAAM,uCAAuC,CAAC;AAC/D,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';\nimport { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';\n\nimport DragHandle 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?: SyntheticListenerMap;\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/collection-preferences/content-display/draggable-option.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"draggable-option.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/draggable-option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/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~~"}
1	+ {"version":3,"file":"draggable-option.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/draggable-option.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAI/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,eAgCA"}

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

@@ -7,7 +7,7 @@ import clsx from 'clsx';
 import ContentDisplayOption, { getClassName } from './content-display-option';
 import styles from '../styles.css.js';
 export default function DraggableOption({ dragHandleAriaLabel, onKeyDown, onToggle, option, }) {
-    const { isDragging, isSorting, listeners, setNodeRef, transform } = useSortable({
+    const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({
         id: option.id,
     });
     const style = {
@@ -22,6 +22,6 @@ export default function DraggableOption({ dragHandleAriaLabel, onKeyDown, onTogg
             }
         } });
     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 })));
+        React.createElement(ContentDisplayOption, { ref: setNodeRef, listeners: combinedListeners, dragHandleAriaLabel: dragHandleAriaLabel, onToggle: onToggle, option: option, disabled: attributes['aria-disabled'] })));
 }
 //# sourceMappingURL=draggable-option.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"draggable-option.js","sourceRoot":"","sources":["../../../../src/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;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,oBAAoB,EAAE,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG9E,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 clsx from 'clsx';\n\nimport ContentDisplayOption, { getClassName } from './content-display-option';\nimport { OptionWithVisibility } from './utils';\n\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"]}
1	+ {"version":3,"file":"draggable-option.js","sourceRoot":"","sources":["../../../../src/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;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,oBAAoB,EAAE,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAG9E,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,UAAU,EAAE,GAAG,WAAW,CAAC;QAC1F,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,EACd,QAAQ,EAAE,UAAU,CAAC,eAAe,CAAC,GACrC,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 clsx from 'clsx';\n\nimport ContentDisplayOption, { getClassName } from './content-display-option';\nimport { OptionWithVisibility } from './utils';\n\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, attributes } = 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 disabled={attributes['aria-disabled']}\n />\n </li>\n );\n}\n"]}

package/collection-preferences/content-display/index.d.ts CHANGED Viewed

@@ -4,6 +4,6 @@ interface ContentDisplayPreferenceProps extends CollectionPreferencesProps.Conte
     onChange: (value: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>) => void;
     value?: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;
 }
-export default function ContentDisplayPreference({ title, description, options, value, onChange, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, dragHandleAriaDescription, dragHandleAriaLabel, }: ContentDisplayPreferenceProps): JSX.Element;
+export default function ContentDisplayPreference({ title, description, options, value, onChange, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, dragHandleAriaDescription, dragHandleAriaLabel, enableColumnFiltering, i18nStrings, }: ContentDisplayPreferenceProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

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

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

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

@@ -1,11 +1,16 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import { DndContext, DragOverlay } from '@dnd-kit/core';
 import { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import InternalBox from '../../box/internal';
+import InternalButton from '../../button/internal';
 import { useInternalI18n } from '../../i18n/context';
 import Portal from '../../internal/components/portal';
 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';
@@ -17,19 +22,20 @@ const getClassName = (suffix) => styles[`${componentPrefix}-${suffix}`];
 export default function ContentDisplayPreference({ title, description, options, value = options.map(({ id }) => ({
     id,
     visible: true,
-})), onChange, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, dragHandleAriaDescription, dragHandleAriaLabel, }) {
+})), onChange, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, dragHandleAriaDescription, dragHandleAriaLabel, enableColumnFiltering = false, i18nStrings, }) {
     const idPrefix = useUniqueId(componentPrefix);
     const i18n = useInternalI18n('collection-preferences');
+    const [columnFilteringText, setColumnFilteringText] = useState('');
     const onToggle = (option) => {
         onChange(value.map(item => (item.id === option.id ? Object.assign(Object.assign({}, item), { visible: !option.visible }) : item)));
     };
     const titleId = `${idPrefix}-title`;
     const descriptionId = `${idPrefix}-description`;
-    const sortedOptions = getSortedOptions({ options, contentDisplay: value });
+    const sortedAndFilteredOptions = useMemo(() => getSortedOptions({ options, contentDisplay: value }).filter(option => option.label.toLowerCase().trim().includes(columnFilteringText.toLowerCase().trim())), [columnFilteringText, options, value]);
     const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
-        sortedOptions,
+        sortedOptions: sortedAndFilteredOptions,
     });
-    const activeOption = activeItem ? sortedOptions.find(({ id }) => id === activeItem) : null;
+    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 })),
@@ -39,9 +45,17 @@ export default function ContentDisplayPreference({ title, description, options,
         sortedOptions: value,
     });
     const renderedDragHandleAriaDescription = i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription);
-    return (React.createElement("div", { className: styles[componentPrefix] },
+    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)),
+        enableColumnFiltering && (React.createElement("div", { className: getClassName('text-filter') },
+            React.createElement(InternalTextFilter, { filteringText: columnFilteringText, filteringPlaceholder: i18n('contentDisplayPreference.i18nStrings.columnFilteringPlaceholder', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringPlaceholder), filteringAriaLabel: i18n('contentDisplayPreference.i18nStrings.columnFilteringAriaLabel', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringAriaLabel), filteringClearAriaLabel: i18n('contentDisplayPreference.i18nStrings.columnFilteringClearFilterText', i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringClearFilterText), onChange: ({ detail }) => setColumnFilteringText(detail.filteringText), countText: i18n('contentDisplayPreference.i18nStrings.columnFilteringCountText', (i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringCountText)
+                    ? i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringCountText(sortedAndFilteredOptions.length)
+                    : undefined, format => format({ count: sortedAndFilteredOptions.length })) }))),
+        sortedAndFilteredOptions.length === 0 && (React.createElement("div", { className: getClassName('no-match') },
+            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,
@@ -58,7 +72,7 @@ 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(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,

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

	@@ -1 +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 from 'react';\nimport { DndContext, DragOverlay } from '@dnd-kit/core';\nimport { arrayMove, SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';\n\nimport { useInternalI18n } from '../../i18n/context';\nimport Portal from '../../internal/components/portal';\nimport { useUniqueId } from '../../internal/hooks/use-unique-id';\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 { 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}: ContentDisplayPreferenceProps) {\n const idPrefix = useUniqueId(componentPrefix);\n const i18n = useInternalI18n('collection-preferences');\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: 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: value,\n });\n\n const renderedDragHandleAriaDescription = i18n(\n 'contentDisplayPreference.dragHandleAriaDescription',\n dragHandleAriaDescription\n );\n\n return (\n <div className={styles[componentPrefix]}>\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 <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 = 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={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"]}
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 { 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 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 sortedAndFilteredOptions = useMemo(\n () =>\n getSortedOptions({ options, contentDisplay: value }).filter(option =>\n option.label.toLowerCase().trim().includes(columnFilteringText.toLowerCase().trim())\n ),\n [columnFilteringText, options, value]\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: value,\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 = 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\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"]}

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

@@ -1,16 +1,18 @@
     import './styles.scoped.css';
     export default {
-  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_nc6j8_281",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_nc6j8_285",
-  "content-display-option": "awsui_content-display-option_1f3h0_nc6j8_281",
-  "placeholder": "awsui_placeholder_1f3h0_nc6j8_335",
-  "sorting": "awsui_sorting_1f3h0_nc6j8_335",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_nc6j8_362",
-  "drag-overlay": "awsui_drag-overlay_1f3h0_nc6j8_369",
-  "content-display": "awsui_content-display_1f3h0_nc6j8_281",
-  "content-display-title": "awsui_content-display-title_1f3h0_nc6j8_402",
-  "content-display-description": "awsui_content-display-description_1f3h0_nc6j8_411",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_nc6j8_419"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_joe0p_281",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_joe0p_285",
+  "content-display-option": "awsui_content-display-option_1f3h0_joe0p_281",
+  "placeholder": "awsui_placeholder_1f3h0_joe0p_335",
+  "sorting": "awsui_sorting_1f3h0_joe0p_335",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_joe0p_362",
+  "drag-overlay": "awsui_drag-overlay_1f3h0_joe0p_369",
+  "content-display": "awsui_content-display_1f3h0_joe0p_281",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_joe0p_399",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_joe0p_400",
+  "content-display-title": "awsui_content-display-title_1f3h0_joe0p_404",
+  "content-display-description": "awsui_content-display-description_1f3h0_joe0p_413",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_joe0p_421"
 };

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

@@ -278,11 +278,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-.awsui_content-display-option-toggle_1f3h0_nc6j8_281:not(#\9) {
+.awsui_content-display-option-toggle_1f3h0_joe0p_281:not(#\9) {
   /* used in test-utils */
 }
-.awsui_content-display-option-content_1f3h0_nc6j8_285:not(#\9) {
+.awsui_content-display-option-content_1f3h0_joe0p_285:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -328,28 +328,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
-.awsui_content-display-option_1f3h0_nc6j8_281:not(#\9) {
+.awsui_content-display-option_1f3h0_joe0p_281:not(#\9) {
   list-style: none;
   position: relative;
   border-block-start: var(--border-divider-list-width-27y3k5, 1px) solid var(--color-border-divider-secondary-alwp8z, #ebebf0);
 }
-.awsui_content-display-option_1f3h0_nc6j8_281:not(#\9):not(.awsui_placeholder_1f3h0_nc6j8_335).awsui_sorting_1f3h0_nc6j8_335 {
+.awsui_content-display-option_1f3h0_joe0p_281:not(#\9):not(.awsui_placeholder_1f3h0_joe0p_335).awsui_sorting_1f3h0_joe0p_335 {
   transition: transform var(--motion-duration-transition-quick-6npj01, 90ms) var(--motion-easing-transition-quick-l9jfsx, linear);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_content-display-option_1f3h0_nc6j8_281:not(#\9):not(.awsui_placeholder_1f3h0_nc6j8_335).awsui_sorting_1f3h0_nc6j8_335 {
+  .awsui_content-display-option_1f3h0_joe0p_281:not(#\9):not(.awsui_placeholder_1f3h0_joe0p_335).awsui_sorting_1f3h0_joe0p_335 {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_content-display-option_1f3h0_nc6j8_281:not(#\9):not(.awsui_placeholder_1f3h0_nc6j8_335).awsui_sorting_1f3h0_nc6j8_335, .awsui-mode-entering .awsui_content-display-option_1f3h0_nc6j8_281:not(#\9):not(.awsui_placeholder_1f3h0_nc6j8_335).awsui_sorting_1f3h0_nc6j8_335 {
+.awsui-motion-disabled .awsui_content-display-option_1f3h0_joe0p_281:not(#\9):not(.awsui_placeholder_1f3h0_joe0p_335).awsui_sorting_1f3h0_joe0p_335, .awsui-mode-entering .awsui_content-display-option_1f3h0_joe0p_281:not(#\9):not(.awsui_placeholder_1f3h0_joe0p_335).awsui_sorting_1f3h0_joe0p_335 {
   animation: none;
   transition: none;
 }
-.awsui_content-display-option_1f3h0_nc6j8_281.awsui_placeholder_1f3h0_nc6j8_335 > .awsui_content-display-option-content_1f3h0_nc6j8_285:not(#\9) {
+.awsui_content-display-option_1f3h0_joe0p_281.awsui_placeholder_1f3h0_joe0p_335 > .awsui_content-display-option-content_1f3h0_joe0p_285:not(#\9) {
   position: relative;
 }
-.awsui_content-display-option_1f3h0_nc6j8_281.awsui_placeholder_1f3h0_nc6j8_335 > .awsui_content-display-option-content_1f3h0_nc6j8_285:not(#\9):after {
+.awsui_content-display-option_1f3h0_joe0p_281.awsui_placeholder_1f3h0_joe0p_335 > .awsui_content-display-option-content_1f3h0_joe0p_285:not(#\9):after {
   content: " ";
   position: absolute;
   inset: 0;
@@ -360,28 +360,28 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
-.awsui_content-display-option-label_1f3h0_nc6j8_362:not(#\9) {
+.awsui_content-display-option-label_1f3h0_joe0p_362:not(#\9) {
   flex-grow: 1;
   min-inline-size: 0;
   word-break: break-word;
   padding-inline-end: var(--space-l-t419sm, 20px);
 }
-.awsui_drag-overlay_1f3h0_nc6j8_369:not(#\9) {
+.awsui_drag-overlay_1f3h0_joe0p_369:not(#\9) {
   box-shadow: var(--shadow-container-active-kl29x9, 0px 1px 1px 1px #e9ebed, 0px 6px 36px rgba(0, 7, 22, 0.1019607843));
   border-start-start-radius: var(--border-radius-item-05df9h, 8px);
   border-start-end-radius: var(--border-radius-item-05df9h, 8px);
   border-end-start-radius: var(--border-radius-item-05df9h, 8px);
   border-end-end-radius: var(--border-radius-item-05df9h, 8px);
 }
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nc6j8_369:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_joe0p_369:not(#\9) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nc6j8_369:not(#\9) {
+body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_joe0p_369:not(#\9) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nc6j8_369:not(#\9)::before {
+body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_joe0p_369:not(#\9)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -396,11 +396,13 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nc6j8_369:not(#\9)
   box-shadow: 0 0 0 2px var(--color-border-item-focused-nv6mhz, #006ce0);
 }
-.awsui_content-display_1f3h0_nc6j8_281:not(#\9) {
+.awsui_content-display_1f3h0_joe0p_281:not(#\9),
+.awsui_content-display-text-filter_1f3h0_joe0p_399:not(#\9),
+.awsui_content-display-no-match_1f3h0_joe0p_400:not(#\9) {
   /* used in test-utils */
 }
-.awsui_content-display-title_1f3h0_nc6j8_402:not(#\9) {
+.awsui_content-display-title_1f3h0_joe0p_404:not(#\9) {
   font-size: var(--font-size-body-m-x4okxb, 14px);
   line-height: var(--line-height-body-m-30ar75, 20px);
   font-weight: var(--font-display-label-weight-815ja9, 700);
@@ -409,7 +411,7 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nc6j8_369:not(#\9)
   margin-inline: 0;
 }
-.awsui_content-display-description_1f3h0_nc6j8_411:not(#\9) {
+.awsui_content-display-description_1f3h0_joe0p_413:not(#\9) {
   color: var(--color-text-form-secondary-54emib, #656871);
   font-size: var(--font-size-body-s-asqx2i, 12px);
   line-height: var(--line-height-body-s-7zv1j5, 16px);
@@ -417,7 +419,7 @@ body[data-awsui-focus-visible=true] .awsui_drag-overlay_1f3h0_nc6j8_369:not(#\9)
   margin-block-start: var(--space-scaled-xxxs-27y4hv, 2px);
 }
-.awsui_content-display-option-list_1f3h0_nc6j8_419:not(#\9) {
+.awsui_content-display-option-list_1f3h0_joe0p_421:not(#\9) {
   position: relative;
   list-style: none;
   padding-block: 0;

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

@@ -2,16 +2,18 @@
     // 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_nc6j8_281",
-  "content-display-option-content": "awsui_content-display-option-content_1f3h0_nc6j8_285",
-  "content-display-option": "awsui_content-display-option_1f3h0_nc6j8_281",
-  "placeholder": "awsui_placeholder_1f3h0_nc6j8_335",
-  "sorting": "awsui_sorting_1f3h0_nc6j8_335",
-  "content-display-option-label": "awsui_content-display-option-label_1f3h0_nc6j8_362",
-  "drag-overlay": "awsui_drag-overlay_1f3h0_nc6j8_369",
-  "content-display": "awsui_content-display_1f3h0_nc6j8_281",
-  "content-display-title": "awsui_content-display-title_1f3h0_nc6j8_402",
-  "content-display-description": "awsui_content-display-description_1f3h0_nc6j8_411",
-  "content-display-option-list": "awsui_content-display-option-list_1f3h0_nc6j8_419"
+  "content-display-option-toggle": "awsui_content-display-option-toggle_1f3h0_joe0p_281",
+  "content-display-option-content": "awsui_content-display-option-content_1f3h0_joe0p_285",
+  "content-display-option": "awsui_content-display-option_1f3h0_joe0p_281",
+  "placeholder": "awsui_placeholder_1f3h0_joe0p_335",
+  "sorting": "awsui_sorting_1f3h0_joe0p_335",
+  "content-display-option-label": "awsui_content-display-option-label_1f3h0_joe0p_362",
+  "drag-overlay": "awsui_drag-overlay_1f3h0_joe0p_369",
+  "content-display": "awsui_content-display_1f3h0_joe0p_281",
+  "content-display-text-filter": "awsui_content-display-text-filter_1f3h0_joe0p_399",
+  "content-display-no-match": "awsui_content-display-no-match_1f3h0_joe0p_400",
+  "content-display-title": "awsui_content-display-title_1f3h0_joe0p_404",
+  "content-display-description": "awsui_content-display-description_1f3h0_joe0p_413",
+  "content-display-option-list": "awsui_content-display-option-list_1f3h0_joe0p_421"
 };

package/collection-preferences/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/index.tsx"],"names":[],"mappings":";~~AAoBA~~,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;~~AAgB1D~~,OAAO,EAAE,0BAA0B,EAAE,CAAC;AAItC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,YAAY,EACZ,WAAW,EACX,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EAEvB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,GAAG,IAAI,EACR,EAAE,0BAA0B,~~eAoL5B~~"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/index.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAiB1D,OAAO,EAAE,0BAA0B,EAAE,CAAC;AAItC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,YAAY,EACZ,WAAW,EACX,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EAEvB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,GAAG,IAAI,EACR,EAAE,0BAA0B,eA+L5B"}