@cloudscape-design/components 3.0.1308 → 3.0.1309

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

@@ -9,7 +9,7 @@ export const getClassName = (suffix) => styles[[componentPrefix, suffix].filter(
 const ContentDisplayOption = forwardRef(({ onToggle, option }, ref) => {
     const idPrefix = useUniqueId(componentPrefix);
     const controlId = `${idPrefix}-control-${option.id}`;
-    return (React.createElement("div", { ref: ref, className: getClassName('content') },
+    return (React.createElement("div", { ref: ref, className: getClassName('content'), "data-item-type": "column" },
         React.createElement("label", { className: getClassName('label'), htmlFor: controlId }, option.label),
         React.createElement("div", { className: getClassName('toggle') },
             React.createElement(InternalToggle, { checked: !!option.visible, onChange: () => onToggle && onToggle(option), disabled: option.alwaysVisible === true, controlId: controlId }))));

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

@@ -1 +1 @@
-{"version":3,"file":"content-display-option.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,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;AAO7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAA6B,EAAE,GAAiC,EAAE,EAAE;IACrF,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,QAAQ,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC;IACrD,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC;QAC/C,+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 { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\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  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n}\n\nconst ContentDisplayOption = forwardRef(\n  ({ onToggle, option }: ContentDisplayOptionProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const idPrefix = useUniqueId(componentPrefix);\n    const controlId = `${idPrefix}-control-${option.id}`;\n    return (\n      <div ref={ref} className={getClassName('content')}>\n        <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,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,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;AAO7G,MAAM,oBAAoB,GAAG,UAAU,CACrC,CAAC,EAAE,QAAQ,EAAE,MAAM,EAA6B,EAAE,GAAiC,EAAE,EAAE;IACrF,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,SAAS,GAAG,GAAG,QAAQ,YAAY,MAAM,CAAC,EAAE,EAAE,CAAC;IACrD,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,CAAC,SAAS,CAAC,oBAAiB,QAAQ;QACxE,+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 { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\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  onToggle?: (option: OptionWithVisibility) => void;\n  option: OptionWithVisibility;\n}\n\nconst ContentDisplayOption = forwardRef(\n  ({ onToggle, option }: ContentDisplayOptionProps, ref: ForwardedRef<HTMLDivElement>) => {\n    const idPrefix = useUniqueId(componentPrefix);\n    const controlId = `${idPrefix}-control-${option.id}`;\n    return (\n      <div ref={ref} className={getClassName('content')} data-item-type=\"column\">\n        <label className={getClassName('label')} htmlFor={controlId}>\n          {option.label}\n        </label>\n        <div className={getClassName('toggle')}>\n          <InternalToggle\n            checked={!!option.visible}\n            onChange={() => onToggle && onToggle(option)}\n            disabled={option.alwaysVisible === true}\n            controlId={controlId}\n          />\n        </div>\n      </div>\n    );\n  }\n);\n\nexport default ContentDisplayOption;\n"]}

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

@@ -8,14 +8,10 @@ export default function ContentDisplayPreference({
   description,
   options,
   value,
+  groups,
   onChange,
-  liveAnnouncementDndStarted,
-  liveAnnouncementDndItemReordered,
-  liveAnnouncementDndItemCommitted,
-  liveAnnouncementDndDiscarded,
-  dragHandleAriaDescription,
-  dragHandleAriaLabel,
   enableColumnFiltering,
-  i18nStrings
+  i18nStrings,
+  ...dndProps
 }: ContentDisplayPreferenceProps): JSX.Element;
 export {};

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"AAkBA,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,eAgI/B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAkB3D,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;AAqJD,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAGG,EACH,MAAM,EACN,QAAQ,EACR,qBAA6B,EAC7B,WAAW,EACX,GAAG,QAAQ,EACZ,EAAE,6BAA6B,eAgJ/B"}

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

@@ -11,53 +11,89 @@ 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 { getFilteredOptions, getSortedOptions } from './utils';
+import { buildOptionTree, getFilteredOptions, getFilteredTree, getSortedOptions, toContentDisplayItems, } from './utils';
 import styles from '../styles.css.js';
 const componentPrefix = 'content-display';
 const getClassName = (suffix) => styles[`${componentPrefix}-${suffix}`];
+function getDndI18nStrings(i18n, props) {
+    return {
+        liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', props.liveAnnouncementDndStarted, formatDndStarted),
+        liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', props.liveAnnouncementDndItemReordered, formatDndItemReordered),
+        liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', props.liveAnnouncementDndItemCommitted, formatDndItemCommitted),
+        liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', props.liveAnnouncementDndDiscarded),
+        dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', props.dragHandleAriaLabel),
+        dragHandleAriaDescription: i18n('contentDisplayPreference.dragHandleAriaDescription', props.dragHandleAriaDescription),
+    };
+}
+function GroupItem({ node, onToggle, onChildrenChange, i18nStrings, sortDisabled, groupLabelFormatter, }) {
+    return (React.createElement("div", { "data-item-type": "group" },
+        React.createElement(InternalSpaceBetween, { size: "xxs" },
+            React.createElement("div", { className: styles['content-display-group-header'] },
+                React.createElement(InternalBox, { fontWeight: "bold", display: "inline" }, node.label)),
+            node.children.length > 0 && (React.createElement("div", { className: styles['content-display-group-children'] },
+                React.createElement(HierarchicalContentDisplay, { tree: node.children, onToggle: onToggle, onTreeChange: onChildrenChange, i18nStrings: i18nStrings, sortDisabled: sortDisabled, ariaLabel: node.label, parentGroupLabel: node.label, groupLabelFormatter: groupLabelFormatter }))))));
+}
+function HierarchicalContentDisplay({ tree, onToggle, onTreeChange, ariaLabel, ariaLabelledby, ariaDescribedby, i18nStrings, sortDisabled, parentGroupLabel, groupLabelFormatter, }) {
+    return (React.createElement(InternalList, { items: tree, sortDisabled: sortDisabled, sortable: true, disableItemPaddings: true, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, i18nStrings: i18nStrings, onSortingChange: ({ detail: { items } }) => onTreeChange([...items]), renderItem: node => ({
+            id: node.id,
+            announcementLabel: node.type === 'group'
+                ? groupLabelFormatter(node.label, node.children.length)
+                : parentGroupLabel
+                    ? `${node.label}, ${parentGroupLabel}`
+                    : node.label,
+            content: node.type === 'group' ? (React.createElement(GroupItem, { node: node, onToggle: onToggle, onChildrenChange: newChildren => onTreeChange(tree.map(n => (n.id === node.id && n.type === 'group' ? { ...n, children: newChildren } : n))), i18nStrings: i18nStrings, sortDisabled: sortDisabled, groupLabelFormatter: groupLabelFormatter })) : (React.createElement(ContentDisplayOption, { option: node, onToggle: () => onToggle(node.id) })),
+        }) }));
+}
 export default function ContentDisplayPreference({ title, description, options, value = options.map(({ id }) => ({
     id,
     visible: true,
-})), onChange, liveAnnouncementDndStarted, liveAnnouncementDndItemReordered, liveAnnouncementDndItemCommitted, liveAnnouncementDndDiscarded, dragHandleAriaDescription, dragHandleAriaLabel, enableColumnFiltering = false, i18nStrings, }) {
+})), groups, onChange, enableColumnFiltering = false, i18nStrings, ...dndProps }) {
+    var _a;
     const idPrefix = useUniqueId(componentPrefix);
     const i18n = useInternalI18n('collection-preferences');
     const [columnFilteringText, setColumnFilteringText] = useState('');
     const titleId = `${idPrefix}-title`;
     const descriptionId = `${idPrefix}-description`;
-    const [sortedOptions, sortedAndFilteredOptions] = useMemo(() => {
-        const sorted = getSortedOptions({ options, contentDisplay: value });
-        const filtered = getFilteredOptions(sorted, columnFilteringText);
-        return [sorted, filtered];
-    }, [columnFilteringText, options, value]);
-    const onToggle = (option) => {
-        // We use sortedOptions as base and not value because there might be options that
-        // 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 listI18nStrings = getDndI18nStrings(i18n, dndProps);
+    const groupLabelFormatter = (label, count) => {
+        var _a, _b;
+        return i18n('contentDisplayPreference.liveAnnouncementDndGroupLabel', (_b = (_a = dndProps.liveAnnouncementDndGroupLabel) === null || _a === void 0 ? void 0 : _a.call(dndProps, label, count)) !== null && _b !== void 0 ? _b : `${label}, ${count} ${count === 1 ? 'item' : 'items'}`, format => format({ label, count }));
+    };
+    const hasGroups = !!groups && groups.length > 0;
+    const isFiltering = columnFilteringText.trim().length > 0;
+    const sortedOptions = useMemo(() => getSortedOptions({ options, contentDisplay: value }), [options, value]);
+    const filteredOptions = useMemo(() => getFilteredOptions(sortedOptions, columnFilteringText), [sortedOptions, columnFilteringText]);
+    const optionTree = useMemo(() => (hasGroups ? buildOptionTree(options, groups, value) : null), [hasGroups, groups, options, value]);
+    const filteredTree = useMemo(() => (optionTree ? getFilteredTree(optionTree, columnFilteringText) : null), [optionTree, columnFilteringText]);
+    const handleToggle = (id) => {
+        // For flat (non-grouped) mode, rebuild from sortedOptions to handle items not in value
+        if (!hasGroups) {
+            onChange(sortedOptions.map(opt => ({ id: opt.id, visible: opt.id === id ? !opt.visible : opt.visible })));
+            return;
+        }
+        // For grouped mode, walk the tree and flip the matching item
+        const toggle = (items) => items.map(item => {
+            if (item.type === 'group') {
+                return { ...item, children: toggle(item.children) };
+            }
+            return item.id === id ? { ...item, visible: !item.visible } : item;
+        });
+        onChange(toggle(value));
     };
+    const noResults = filteredTree ? filteredTree.length === 0 : filteredOptions.length === 0;
     return (React.createElement("div", { role: "group", "aria-labelledby": titleId, "aria-describedby": descriptionId, 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(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', (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.columnFilteringCountText) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, filteredOptions.length), format => format({ count: filteredOptions.length })) }))),
+        noResults && (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(InternalList, { items: sortedAndFilteredOptions, renderItem: item => ({
+        React.createElement("div", { role: "application", "aria-labelledby": titleId }, optionTree && filteredTree ? (React.createElement(HierarchicalContentDisplay, { tree: isFiltering ? filteredTree : optionTree, onToggle: handleToggle, onTreeChange: newTree => onChange(toContentDisplayItems(newTree)), ariaLabelledby: titleId, ariaDescribedby: descriptionId, i18nStrings: listI18nStrings, sortDisabled: isFiltering, groupLabelFormatter: groupLabelFormatter })) : (React.createElement(InternalList, { items: filteredOptions, sortable: true, sortDisabled: isFiltering, disableItemPaddings: true, ariaLabelledby: titleId, ariaDescribedby: descriptionId, i18nStrings: listI18nStrings, onSortingChange: ({ detail: { items } }) => onChange(items.map(({ id, visible }) => ({ id, visible }))), renderItem: item => ({
                 id: item.id,
-                content: React.createElement(ContentDisplayOption, { option: item, onToggle: onToggle }),
                 announcementLabel: item.label,
-            }), disableItemPaddings: true, sortable: true, sortDisabled: columnFilteringText.trim().length > 0, onSortingChange: ({ detail: { items } }) => {
-                onChange(items);
-            }, ariaDescribedby: descriptionId, ariaLabelledby: titleId, i18nStrings: {
-                liveAnnouncementDndStarted: i18n('contentDisplayPreference.liveAnnouncementDndStarted', liveAnnouncementDndStarted, formatDndStarted),
-                liveAnnouncementDndItemReordered: i18n('contentDisplayPreference.liveAnnouncementDndItemReordered', liveAnnouncementDndItemReordered, formatDndItemReordered),
-                liveAnnouncementDndItemCommitted: i18n('contentDisplayPreference.liveAnnouncementDndItemCommitted', liveAnnouncementDndItemCommitted, formatDndItemCommitted),
-                liveAnnouncementDndDiscarded: i18n('contentDisplayPreference.liveAnnouncementDndDiscarded', liveAnnouncementDndDiscarded),
-                dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel),
-                dragHandleAriaDescription: i18n('contentDisplayPreference.dragHandleAriaDescription', dragHandleAriaDescription),
-            } })));
+                content: React.createElement(ContentDisplayOption, { option: item, onToggle: () => handleToggle(item.id) }),
+            }) })))));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useState } from 'react';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport {\n  formatDndItemCommitted,\n  formatDndItemReordered,\n  formatDndStarted,\n} from '../../internal/components/sortable-area/use-live-announcements';\nimport InternalList from '../../list/internal';\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 { 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\n      role=\"group\"\n      aria-labelledby={titleId}\n      aria-describedby={descriptionId}\n      className={styles[componentPrefix]}\n      {...getAnalyticsInnerContextAttribute('contentDisplay')}\n    >\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      <InternalList\n        items={sortedAndFilteredOptions}\n        renderItem={item => ({\n          id: item.id,\n          content: <ContentDisplayOption option={item} onToggle={onToggle} />,\n          announcementLabel: item.label,\n        })}\n        disableItemPaddings={true}\n        sortable={true}\n        sortDisabled={columnFilteringText.trim().length > 0}\n        onSortingChange={({ detail: { items } }) => {\n          onChange(items);\n        }}\n        ariaDescribedby={descriptionId}\n        ariaLabelledby={titleId}\n        i18nStrings={{\n          liveAnnouncementDndStarted: i18n(\n            'contentDisplayPreference.liveAnnouncementDndStarted',\n            liveAnnouncementDndStarted,\n            formatDndStarted\n          ),\n          liveAnnouncementDndItemReordered: i18n(\n            'contentDisplayPreference.liveAnnouncementDndItemReordered',\n            liveAnnouncementDndItemReordered,\n            formatDndItemReordered\n          ),\n          liveAnnouncementDndItemCommitted: i18n(\n            'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n            liveAnnouncementDndItemCommitted,\n            formatDndItemCommitted\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    </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';\n\nimport { useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport InternalBox from '../../box/internal';\nimport InternalButton from '../../button/internal';\nimport { useInternalI18n } from '../../i18n/context';\nimport { SortableAreaProps } from '../../internal/components/sortable-area/interfaces';\nimport {\n  formatDndItemCommitted,\n  formatDndItemReordered,\n  formatDndStarted,\n} from '../../internal/components/sortable-area/use-live-announcements';\nimport InternalList from '../../list/internal';\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 {\n  buildOptionTree,\n  getFilteredOptions,\n  getFilteredTree,\n  getSortedOptions,\n  OptionGroupNode,\n  OptionTreeNode,\n  toContentDisplayItems,\n} 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}\nfunction getDndI18nStrings(\n  i18n: ReturnType<typeof useInternalI18n<'collection-preferences'>>,\n  props: Pick<\n    ContentDisplayPreferenceProps,\n    | 'liveAnnouncementDndStarted'\n    | 'liveAnnouncementDndItemReordered'\n    | 'liveAnnouncementDndItemCommitted'\n    | 'liveAnnouncementDndDiscarded'\n    | 'dragHandleAriaLabel'\n    | 'dragHandleAriaDescription'\n  >\n) {\n  return {\n    liveAnnouncementDndStarted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndStarted',\n      props.liveAnnouncementDndStarted,\n      formatDndStarted\n    ),\n    liveAnnouncementDndItemReordered: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemReordered',\n      props.liveAnnouncementDndItemReordered,\n      formatDndItemReordered\n    ),\n    liveAnnouncementDndItemCommitted: i18n(\n      'contentDisplayPreference.liveAnnouncementDndItemCommitted',\n      props.liveAnnouncementDndItemCommitted,\n      formatDndItemCommitted\n    ),\n    liveAnnouncementDndDiscarded: i18n(\n      'contentDisplayPreference.liveAnnouncementDndDiscarded',\n      props.liveAnnouncementDndDiscarded\n    ),\n    dragHandleAriaLabel: i18n('contentDisplayPreference.dragHandleAriaLabel', props.dragHandleAriaLabel),\n    dragHandleAriaDescription: i18n(\n      'contentDisplayPreference.dragHandleAriaDescription',\n      props.dragHandleAriaDescription\n    ),\n  };\n}\n\ninterface HierarchicalContentDisplayProps {\n  tree: OptionTreeNode[];\n  onToggle: (id: string) => void;\n  onTreeChange: (newTree: OptionTreeNode[]) => void;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  i18nStrings: SortableAreaProps.DndAreaI18nStrings;\n  sortDisabled: boolean;\n  parentGroupLabel?: string;\n  groupLabelFormatter: (label: string, count: number) => string;\n}\n\nfunction GroupItem({\n  node,\n  onToggle,\n  onChildrenChange,\n  i18nStrings,\n  sortDisabled,\n  groupLabelFormatter,\n}: {\n  node: OptionGroupNode;\n  onToggle: (id: string) => void;\n  onChildrenChange: (children: OptionTreeNode[]) => void;\n  i18nStrings: SortableAreaProps.DndAreaI18nStrings;\n  sortDisabled: boolean;\n  groupLabelFormatter: (label: string, count: number) => string;\n}) {\n  return (\n    <div data-item-type=\"group\">\n      <InternalSpaceBetween size=\"xxs\">\n        <div className={styles['content-display-group-header']}>\n          <InternalBox fontWeight=\"bold\" display=\"inline\">\n            {node.label}\n          </InternalBox>\n        </div>\n        {node.children.length > 0 && (\n          <div className={styles['content-display-group-children']}>\n            <HierarchicalContentDisplay\n              tree={node.children}\n              onToggle={onToggle}\n              onTreeChange={onChildrenChange}\n              i18nStrings={i18nStrings}\n              sortDisabled={sortDisabled}\n              ariaLabel={node.label}\n              parentGroupLabel={node.label}\n              groupLabelFormatter={groupLabelFormatter}\n            />\n          </div>\n        )}\n      </InternalSpaceBetween>\n    </div>\n  );\n}\n\nfunction HierarchicalContentDisplay({\n  tree,\n  onToggle,\n  onTreeChange,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  i18nStrings,\n  sortDisabled,\n  parentGroupLabel,\n  groupLabelFormatter,\n}: HierarchicalContentDisplayProps) {\n  return (\n    <InternalList\n      items={tree}\n      sortDisabled={sortDisabled}\n      sortable={true}\n      disableItemPaddings={true}\n      ariaLabel={ariaLabel}\n      ariaLabelledby={ariaLabelledby}\n      ariaDescribedby={ariaDescribedby}\n      i18nStrings={i18nStrings}\n      onSortingChange={({ detail: { items } }) => onTreeChange([...items])}\n      renderItem={node => ({\n        id: node.id,\n        announcementLabel:\n          node.type === 'group'\n            ? groupLabelFormatter(node.label, node.children.length)\n            : parentGroupLabel\n              ? `${node.label}, ${parentGroupLabel}`\n              : node.label,\n        content:\n          node.type === 'group' ? (\n            <GroupItem\n              node={node}\n              onToggle={onToggle}\n              onChildrenChange={newChildren =>\n                onTreeChange(\n                  tree.map(n => (n.id === node.id && n.type === 'group' ? { ...n, children: newChildren } : n))\n                )\n              }\n              i18nStrings={i18nStrings}\n              sortDisabled={sortDisabled}\n              groupLabelFormatter={groupLabelFormatter}\n            />\n          ) : (\n            <ContentDisplayOption option={node} onToggle={() => onToggle(node.id)} />\n          ),\n      })}\n    />\n  );\n}\n\nexport default function ContentDisplayPreference({\n  title,\n  description,\n  options,\n  value = options.map(({ id }) => ({\n    id,\n    visible: true,\n  })),\n  groups,\n  onChange,\n  enableColumnFiltering = false,\n  i18nStrings,\n  ...dndProps\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 listI18nStrings = getDndI18nStrings(i18n, dndProps);\n  const groupLabelFormatter = (label: string, count: number) =>\n    i18n(\n      'contentDisplayPreference.liveAnnouncementDndGroupLabel',\n      dndProps.liveAnnouncementDndGroupLabel?.(label, count) ?? `${label}, ${count} ${count === 1 ? 'item' : 'items'}`,\n      format => format({ label, count })\n    );\n  const hasGroups = !!groups && groups.length > 0;\n  const isFiltering = columnFilteringText.trim().length > 0;\n\n  const sortedOptions = useMemo(() => getSortedOptions({ options, contentDisplay: value }), [options, value]);\n  const filteredOptions = useMemo(\n    () => getFilteredOptions(sortedOptions, columnFilteringText),\n    [sortedOptions, columnFilteringText]\n  );\n  const optionTree = useMemo(\n    () => (hasGroups ? buildOptionTree(options, groups, value) : null),\n    [hasGroups, groups, options, value]\n  );\n  const filteredTree = useMemo(\n    () => (optionTree ? getFilteredTree(optionTree, columnFilteringText) : null),\n    [optionTree, columnFilteringText]\n  );\n\n  const handleToggle = (id: string) => {\n    // For flat (non-grouped) mode, rebuild from sortedOptions to handle items not in value\n    if (!hasGroups) {\n      onChange(sortedOptions.map(opt => ({ id: opt.id, visible: opt.id === id ? !opt.visible : opt.visible })));\n      return;\n    }\n    // For grouped mode, walk the tree and flip the matching item\n    const toggle = (\n      items: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>\n    ): CollectionPreferencesProps.ContentDisplayItem[] =>\n      items.map(item => {\n        if (item.type === 'group') {\n          return { ...item, children: toggle(item.children) };\n        }\n        return item.id === id ? { ...item, visible: !item.visible } : item;\n      });\n    onChange(toggle(value));\n  };\n  const noResults = filteredTree ? filteredTree.length === 0 : filteredOptions.length === 0;\n  return (\n    <div\n      role=\"group\"\n      aria-labelledby={titleId}\n      aria-describedby={descriptionId}\n      className={styles[componentPrefix]}\n      {...getAnalyticsInnerContextAttribute('contentDisplay')}\n    >\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?.(filteredOptions.length),\n              format => format({ count: filteredOptions.length })\n            )}\n          />\n        </div>\n      )}\n\n      {noResults && (\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      <div role=\"application\" aria-labelledby={titleId}>\n        {optionTree && filteredTree ? (\n          <HierarchicalContentDisplay\n            tree={isFiltering ? filteredTree : optionTree}\n            onToggle={handleToggle}\n            onTreeChange={newTree => onChange(toContentDisplayItems(newTree))}\n            ariaLabelledby={titleId}\n            ariaDescribedby={descriptionId}\n            i18nStrings={listI18nStrings}\n            sortDisabled={isFiltering}\n            groupLabelFormatter={groupLabelFormatter}\n          />\n        ) : (\n          <InternalList\n            items={filteredOptions}\n            sortable={true}\n            sortDisabled={isFiltering}\n            disableItemPaddings={true}\n            ariaLabelledby={titleId}\n            ariaDescribedby={descriptionId}\n            i18nStrings={listI18nStrings}\n            onSortingChange={({ detail: { items } }) => onChange(items.map(({ id, visible }) => ({ id, visible })))}\n            renderItem={item => ({\n              id: item.id,\n              announcementLabel: item.label,\n              content: <ContentDisplayOption option={item} onToggle={() => handleToggle(item.id)} />,\n            })}\n          />\n        )}\n      </div>\n    </div>\n  );\n}\n"]}

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

@@ -1,7 +1,32 @@
 import { CollectionPreferencesProps } from '../interfaces';
-export interface OptionWithVisibility extends CollectionPreferencesProps.ContentDisplayOption {
+type ContentDisplayItem = CollectionPreferencesProps.ContentDisplayItem;
+type ContentDisplayOption = CollectionPreferencesProps.ContentDisplayOption;
+type ContentDisplayOptionGroup = CollectionPreferencesProps.ContentDisplayOptionGroup;
+export interface OptionWithVisibility extends ContentDisplayOption {
   visible: boolean;
 }
+export interface OptionGroupNode {
+  type: 'group';
+  id: string;
+  label: string;
+  visible: boolean;
+  children: OptionTreeNode[];
+}
+export interface OptionLeafNode extends OptionWithVisibility {
+  type: 'leaf';
+}
+export type OptionTreeNode = OptionGroupNode | OptionLeafNode;
+/**
+ * Extracts a flat ordered list of leaf items from the contentDisplay tree (depth-first).
+ */
+export declare function walkLeaves(items: ReadonlyArray<ContentDisplayItem>): {
+  id: string;
+  visible: boolean;
+}[];
+/**
+ * Returns options ordered by contentDisplay, with visibility applied.
+ * Options not in contentDisplay are appended as non-visible.
+ */
 export declare function getSortedOptions({
   options,
   contentDisplay
@@ -9,4 +34,18 @@ export declare function getSortedOptions({
   options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;
   contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;
 }): ReadonlyArray<OptionWithVisibility>;
-export declare function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string): readonly OptionWithVisibility[];
+/**
+ * Converts contentDisplay tree into an internal OptionTreeNode tree,
+ * resolving labels from options/groups definitions.
+ */
+export declare function buildOptionTree(options: ReadonlyArray<ContentDisplayOption>, groups: ReadonlyArray<ContentDisplayOptionGroup>, contentDisplay: ReadonlyArray<ContentDisplayItem>): OptionTreeNode[];
+/**
+ * Converts OptionTreeNode[] back to ContentDisplayItem[].
+ */
+export declare function toContentDisplayItems(tree: OptionTreeNode[]): ContentDisplayItem[];
+/**
+ * Filters tree, keeping leaves matching filterText and groups with matching descendants.
+ */
+export declare function getFilteredTree(tree: OptionTreeNode[], filterText: string): OptionTreeNode[];
+export declare function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string): readonly OptionWithVisibility[];
+export {};

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,oBAAqB,SAAQ,0BAA0B,CAAC,oBAAoB;IAC3F,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GACf,EAAE;IACD,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;IACxE,cAAc,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CAC9E,GAAG,aAAa,CAAC,oBAAoB,CAAC,CActC;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAE,MAAM,mCAQlG"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,0BAA0B,EAAE,MAAM,eAAe,CAAC;AAE3D,KAAK,kBAAkB,GAAG,0BAA0B,CAAC,kBAAkB,CAAC;AACxE,KAAK,oBAAoB,GAAG,0BAA0B,CAAC,oBAAoB,CAAC;AAC5E,KAAK,yBAAyB,GAAG,0BAA0B,CAAC,yBAAyB,CAAC;AAEtF,MAAM,WAAW,oBAAqB,SAAQ,oBAAoB;IAChE,OAAO,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,OAAO,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,cAAc,EAAE,CAAC;CAC5B;AAED,MAAM,WAAW,cAAe,SAAQ,oBAAoB;IAC1D,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,MAAM,cAAc,GAAG,eAAe,GAAG,cAAc,CAAC;AAE9D;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB,CAAC,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,EAAE,CAUvG;AAED;;;GAGG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GACf,EAAE;IACD,OAAO,EAAE,aAAa,CAAC,0BAA0B,CAAC,oBAAoB,CAAC,CAAC;IACxE,cAAc,EAAE,aAAa,CAAC,0BAA0B,CAAC,kBAAkB,CAAC,CAAC;CAC9E,GAAG,aAAa,CAAC,oBAAoB,CAAC,CAkBtC;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAC7B,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,EAC5C,MAAM,EAAE,aAAa,CAAC,yBAAyB,CAAC,EAChD,cAAc,EAAE,aAAa,CAAC,kBAAkB,CAAC,GAChD,cAAc,EAAE,CAgClB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,IAAI,EAAE,cAAc,EAAE,GAAG,kBAAkB,EAAE,CAYlF;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,IAAI,EAAE,cAAc,EAAE,EAAE,UAAU,EAAE,MAAM,GAAG,cAAc,EAAE,CAkB5F;AAED,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,aAAa,CAAC,oBAAoB,CAAC,EAAE,UAAU,EAAE,MAAM,mCAMlG"}

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

@@ -1,23 +1,117 @@
+/**
+ * Extracts a flat ordered list of leaf items from the contentDisplay tree (depth-first).
+ */
+export function walkLeaves(items) {
+    const result = [];
+    for (const item of items) {
+        if (item.type === 'group') {
+            result.push(...walkLeaves(item.children));
+        }
+        else {
+            result.push({ id: item.id, visible: item.visible });
+        }
+    }
+    return result;
+}
+/**
+ * Returns options ordered by contentDisplay, with visibility applied.
+ * Options not in contentDisplay are appended as non-visible.
+ */
 export function getSortedOptions({ options, contentDisplay, }) {
-    // By using a Map, we are guaranteed to preserve insertion order on future iteration.
-    const optionsById = new Map();
-    // We insert contentDisplay first so we respect the currently selected order
-    for (const { id, visible } of contentDisplay) {
-        // If an option is provided in contentDisplay and not options, we default the label to the id
-        optionsById.set(id, { id, label: id, visible });
+    const optionMap = new Map(options.map(o => [o.id, o]));
+    const result = new Map();
+    for (const { id, visible } of walkLeaves(contentDisplay)) {
+        const option = optionMap.get(id);
+        if (option) {
+            result.set(id, { ...option, visible });
+        }
     }
-    // We merge options data, and insert any that were not in contentDisplay as non-visible
     for (const option of options) {
-        const existing = optionsById.get(option.id);
-        optionsById.set(option.id, { ...option, visible: !!(existing === null || existing === void 0 ? void 0 : existing.visible) });
+        if (!result.has(option.id)) {
+            result.set(option.id, { ...option, visible: false });
+        }
+    }
+    return Array.from(result.values());
+}
+/**
+ * Converts contentDisplay tree into an internal OptionTreeNode tree,
+ * resolving labels from options/groups definitions.
+ */
+export function buildOptionTree(options, groups, contentDisplay) {
+    if (!groups.length) {
+        const sorted = getSortedOptions({ options, contentDisplay });
+        return sorted.map(opt => ({ ...opt, type: 'leaf' }));
+    }
+    const optionMap = new Map(options.map(o => [o.id, o]));
+    const groupMap = new Map(groups.map(g => [g.id, g]));
+    const convert = (items) => {
+        var _a;
+        const result = [];
+        for (const item of items) {
+            if (item.type === 'group') {
+                const group = groupMap.get(item.id);
+                result.push({
+                    type: 'group',
+                    id: item.id,
+                    label: (_a = group === null || group === void 0 ? void 0 : group.label) !== null && _a !== void 0 ? _a : item.id,
+                    visible: item.visible,
+                    children: convert(item.children),
+                });
+            }
+            else {
+                const option = optionMap.get(item.id);
+                if (option) {
+                    result.push({ type: 'leaf', ...option, visible: item.visible });
+                }
+            }
+        }
+        return result;
+    };
+    return convert(contentDisplay);
+}
+/**
+ * Converts OptionTreeNode[] back to ContentDisplayItem[].
+ */
+export function toContentDisplayItems(tree) {
+    return tree.map(node => {
+        if (node.type === 'group') {
+            return {
+                type: 'group',
+                id: node.id,
+                visible: node.visible,
+                children: toContentDisplayItems(node.children),
+            };
+        }
+        return { id: node.id, visible: node.visible };
+    });
+}
+/**
+ * Filters tree, keeping leaves matching filterText and groups with matching descendants.
+ */
+export function getFilteredTree(tree, filterText) {
+    const text = filterText.trim().toLowerCase();
+    if (!text) {
+        return tree;
+    }
+    const result = [];
+    for (const node of tree) {
+        if (node.type === 'group') {
+            const children = getFilteredTree(node.children, text);
+            if (children.length > 0) {
+                result.push({ ...node, children });
+            }
+        }
+        else if (node.label.toLowerCase().includes(text)) {
+            result.push(node);
+        }
     }
-    return Array.from(optionsById.values());
+    return result;
 }
 export function getFilteredOptions(options, filterText) {
-    filterText = filterText.trim().toLowerCase();
-    if (!filterText) {
+    const text = filterText.trim().toLowerCase();
+    if (!text) {
         return options;
     }
-    return options.filter(option => option.label.toLowerCase().trim().includes(filterText));
+    return options.filter(option => option.label.toLowerCase().includes(text));
 }
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AAQA,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GAIf;IACC,qFAAqF;IACrF,MAAM,WAAW,GAAG,IAAI,GAAG,EAAgC,CAAC;IAC5D,4EAA4E;IAC5E,KAAK,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,cAAc,EAAE,CAAC;QAC7C,6FAA6F;QAC7F,WAAW,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC;IAClD,CAAC;IACD,uFAAuF;IACvF,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;QAC5C,WAAW,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC,CAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,OAAO,CAAA,EAAE,CAAC,CAAC;IAC1E,CAAC;IACD,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,OAA4C,EAAE,UAAkB;IACjG,UAAU,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAE7C,IAAI,CAAC,UAAU,EAAE,CAAC;QAChB,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC;AAC1F,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { CollectionPreferencesProps } from '../interfaces';\n\nexport interface OptionWithVisibility extends CollectionPreferencesProps.ContentDisplayOption {\n  visible: boolean;\n}\n\nexport function getSortedOptions({\n  options,\n  contentDisplay,\n}: {\n  options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n  contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}): ReadonlyArray<OptionWithVisibility> {\n  // By using a Map, we are guaranteed to preserve insertion order on future iteration.\n  const optionsById = new Map<string, OptionWithVisibility>();\n  // We insert contentDisplay first so we respect the currently selected order\n  for (const { id, visible } of contentDisplay) {\n    // If an option is provided in contentDisplay and not options, we default the label to the id\n    optionsById.set(id, { id, label: id, visible });\n  }\n  // We merge options data, and insert any that were not in contentDisplay as non-visible\n  for (const option of options) {\n    const existing = optionsById.get(option.id);\n    optionsById.set(option.id, { ...option, visible: !!existing?.visible });\n  }\n  return Array.from(optionsById.values());\n}\n\nexport function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string) {\n  filterText = filterText.trim().toLowerCase();\n\n  if (!filterText) {\n    return options;\n  }\n\n  return options.filter(option => option.label.toLowerCase().trim().includes(filterText));\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"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 { CollectionPreferencesProps } from '../interfaces';\n\ntype ContentDisplayItem = CollectionPreferencesProps.ContentDisplayItem;\ntype ContentDisplayOption = CollectionPreferencesProps.ContentDisplayOption;\ntype ContentDisplayOptionGroup = CollectionPreferencesProps.ContentDisplayOptionGroup;\n\nexport interface OptionWithVisibility extends ContentDisplayOption {\n  visible: boolean;\n}\n\nexport interface OptionGroupNode {\n  type: 'group';\n  id: string;\n  label: string;\n  visible: boolean;\n  children: OptionTreeNode[];\n}\n\nexport interface OptionLeafNode extends OptionWithVisibility {\n  type: 'leaf';\n}\n\nexport type OptionTreeNode = OptionGroupNode | OptionLeafNode;\n\n/**\n * Extracts a flat ordered list of leaf items from the contentDisplay tree (depth-first).\n */\nexport function walkLeaves(items: ReadonlyArray<ContentDisplayItem>): { id: string; visible: boolean }[] {\n  const result: { id: string; visible: boolean }[] = [];\n  for (const item of items) {\n    if (item.type === 'group') {\n      result.push(...walkLeaves(item.children));\n    } else {\n      result.push({ id: item.id, visible: item.visible });\n    }\n  }\n  return result;\n}\n\n/**\n * Returns options ordered by contentDisplay, with visibility applied.\n * Options not in contentDisplay are appended as non-visible.\n */\nexport function getSortedOptions({\n  options,\n  contentDisplay,\n}: {\n  options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;\n  contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;\n}): ReadonlyArray<OptionWithVisibility> {\n  const optionMap = new Map(options.map(o => [o.id, o]));\n  const result = new Map<string, OptionWithVisibility>();\n\n  for (const { id, visible } of walkLeaves(contentDisplay)) {\n    const option = optionMap.get(id);\n    if (option) {\n      result.set(id, { ...option, visible });\n    }\n  }\n\n  for (const option of options) {\n    if (!result.has(option.id)) {\n      result.set(option.id, { ...option, visible: false });\n    }\n  }\n\n  return Array.from(result.values());\n}\n\n/**\n * Converts contentDisplay tree into an internal OptionTreeNode tree,\n * resolving labels from options/groups definitions.\n */\nexport function buildOptionTree(\n  options: ReadonlyArray<ContentDisplayOption>,\n  groups: ReadonlyArray<ContentDisplayOptionGroup>,\n  contentDisplay: ReadonlyArray<ContentDisplayItem>\n): OptionTreeNode[] {\n  if (!groups.length) {\n    const sorted = getSortedOptions({ options, contentDisplay });\n    return sorted.map(opt => ({ ...opt, type: 'leaf' as const }));\n  }\n\n  const optionMap = new Map(options.map(o => [o.id, o]));\n  const groupMap = new Map(groups.map(g => [g.id, g]));\n\n  const convert = (items: ReadonlyArray<ContentDisplayItem>): OptionTreeNode[] => {\n    const result: OptionTreeNode[] = [];\n    for (const item of items) {\n      if (item.type === 'group') {\n        const group = groupMap.get(item.id);\n        result.push({\n          type: 'group',\n          id: item.id,\n          label: group?.label ?? item.id,\n          visible: item.visible,\n          children: convert(item.children),\n        });\n      } else {\n        const option = optionMap.get(item.id);\n        if (option) {\n          result.push({ type: 'leaf', ...option, visible: item.visible });\n        }\n      }\n    }\n    return result;\n  };\n\n  return convert(contentDisplay);\n}\n\n/**\n * Converts OptionTreeNode[] back to ContentDisplayItem[].\n */\nexport function toContentDisplayItems(tree: OptionTreeNode[]): ContentDisplayItem[] {\n  return tree.map(node => {\n    if (node.type === 'group') {\n      return {\n        type: 'group' as const,\n        id: node.id,\n        visible: node.visible,\n        children: toContentDisplayItems(node.children),\n      };\n    }\n    return { id: node.id, visible: node.visible };\n  });\n}\n\n/**\n * Filters tree, keeping leaves matching filterText and groups with matching descendants.\n */\nexport function getFilteredTree(tree: OptionTreeNode[], filterText: string): OptionTreeNode[] {\n  const text = filterText.trim().toLowerCase();\n  if (!text) {\n    return tree;\n  }\n\n  const result: OptionTreeNode[] = [];\n  for (const node of tree) {\n    if (node.type === 'group') {\n      const children = getFilteredTree(node.children, text);\n      if (children.length > 0) {\n        result.push({ ...node, children });\n      }\n    } else if (node.label.toLowerCase().includes(text)) {\n      result.push(node);\n    }\n  }\n  return result;\n}\n\nexport function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string) {\n  const text = filterText.trim().toLowerCase();\n  if (!text) {\n    return options;\n  }\n  return options.filter(option => option.label.toLowerCase().includes(text));\n}\n"]}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/index.tsx"],"names":[],"mappings":"AAwBA,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,cAAc,EACd,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,GAAG,IAAI,EACR,EAAE,0BAA0B,eAiO5B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/collection-preferences/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,cAAc,CAAC;AAkB1D,OAAO,EAAE,0BAA0B,EAAE,CAAC;AAItC,MAAM,CAAC,OAAO,UAAU,qBAAqB,CAAC,EAC5C,KAAK,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,QAAgB,EAChB,SAAS,EACT,QAAQ,EACR,wBAAwB,EACxB,wBAAwB,EACxB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,WAAW,EACX,gBAAgB,EAChB,YAAY,EACZ,eAAe,EACf,aAAa,EACb,GAAG,IAAI,EACR,EAAE,0BAA0B,eAkO5B"}

package/collection-preferences/index.js

@@ -19,7 +19,7 @@ import InternalModal from '../modal/internal';
 import InternalSpaceBetween from '../space-between/internal';
 import { getComponentAnalyticsMetadata } from './analytics-metadata/utils';
 import ContentDisplayPreference from './content-display';
-import { ContentDensityPreference, copyPreferences, CustomPreference, mergePreferences, ModalContentLayout, PageSizePreference, StickyColumnsPreference, StripedRowsPreference, WrapLinesPreference, } from './utils';
+import { collectVisibleIds, ContentDensityPreference, copyPreferences, CustomPreference, mergePreferences, ModalContentLayout, PageSizePreference, StickyColumnsPreference, StripedRowsPreference, WrapLinesPreference, } from './utils';
 import VisibleContentPreference from './visible-content';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
@@ -86,7 +86,7 @@ export default function CollectionPreferences({ title, confirmLabel, cancelLabel
             tableComponentContext.preferencesRef.current.pageSize = preferences === null || preferences === void 0 ? void 0 : preferences.pageSize;
             // When both are used contentDisplayPreference takes preference and so we always prefer to use this as our visible columns if available
             if (preferences === null || preferences === void 0 ? void 0 : preferences.contentDisplay) {
-                tableComponentContext.preferencesRef.current.visibleColumns = preferences === null || preferences === void 0 ? void 0 : preferences.contentDisplay.filter(column => column.visible).map(column => column.id);
+                tableComponentContext.preferencesRef.current.visibleColumns = collectVisibleIds(preferences.contentDisplay, true);
             }
             else if (preferences === null || preferences === void 0 ? void 0 : preferences.visibleContent) {
                 tableComponentContext.preferencesRef.current.visibleColumns = [...preferences.visibleContent];