npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1308 → 3.0.1310 - Mend

@cloudscape-design/components-themeable 3.0.1308 → 3.0.1310

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 (195) hide show

package/lib/internal/template/badge/styles.scoped.css CHANGED Viewed

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_badge_1yjyg_kce2m_145:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -183,40 +183,53 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-end-end-radius: var(--border-radius-badge-o70tla, 16px);
   border-block-style: solid;
   border-inline-style: solid;
-  border-width: 0;
+  border-width: var(--border-width-badge-xsbmkz, 0px);
   padding-block: 0;
   padding-inline: var(--space-xs-kw7k3v, 8px);
   color: var(--color-text-notification-default-fmebm4, #fafafa);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-grey_1yjyg_kce2m_191:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-grey_1yjyg_zpkv4_191:not(#\9) {
   background-color: var(--color-background-notification-grey-yzex9c, #545b64);
+  border-color: var(--color-border-badge-grey-7x1xit, transparent);
+  color: var(--color-text-badge-grey-5hljh0, #fafafa);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-green_1yjyg_kce2m_194:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-green_1yjyg_zpkv4_196:not(#\9) {
   background-color: var(--color-background-notification-green-7yuv70, #1d8102);
+  border-color: var(--color-border-badge-green-t7n2iz, transparent);
+  color: var(--color-text-badge-green-i688l8, #fafafa);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-blue_1yjyg_kce2m_197:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-blue_1yjyg_zpkv4_201:not(#\9) {
   background-color: var(--color-background-notification-blue-jgc5fr, #0073bb);
+  border-color: var(--color-border-badge-blue-p28tag, transparent);
+  color: var(--color-text-badge-blue-pfnjhv, #fafafa);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-red_1yjyg_kce2m_200:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-red_1yjyg_zpkv4_206:not(#\9) {
   background-color: var(--color-background-notification-red-k51keq, #d13212);
+  border-color: var(--color-border-badge-red-w6mok2, transparent);
+  color: var(--color-text-badge-red-e7xtdk, #fafafa);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-severity-critical_1yjyg_kce2m_203:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-critical_1yjyg_zpkv4_211:not(#\9) {
   background-color: var(--color-background-notification-severity-critical-gsxtat, #870303);
-  color: var(--color-text-notification-severity-critical-h34hq6, #fafafa);
+  color: var(--color-text-badge-severity-critical-9m2t9l, #fafafa);
+  border-color: var(--color-border-badge-severity-critical-afw1t4, transparent);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-severity-high_1yjyg_kce2m_207:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-high_1yjyg_zpkv4_216:not(#\9) {
   background-color: var(--color-background-notification-severity-high-hz1dy0, #ce3311);
-  color: var(--color-text-notification-severity-high-fb28xa, #fafafa);
+  color: var(--color-text-badge-severity-high-yhnb3j, #fafafa);
+  border-color: var(--color-border-badge-severity-high-xpyb3z, transparent);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-severity-medium_1yjyg_kce2m_211:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-medium_1yjyg_zpkv4_221:not(#\9) {
   background-color: var(--color-background-notification-severity-medium-f2pwwo, #f89256);
-  color: var(--color-text-notification-severity-medium-z7mfdy, #000000);
+  color: var(--color-text-badge-severity-medium-seazfm, #000000);
+  border-color: var(--color-border-badge-severity-medium-lglq87, transparent);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-severity-low_1yjyg_kce2m_215:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-low_1yjyg_zpkv4_226:not(#\9) {
   background-color: var(--color-background-notification-severity-low-11rcv3, #f2cd54);
-  color: var(--color-text-notification-severity-low-8cm5oo, #16191f);
+  color: var(--color-text-badge-severity-low-ixtax4, #16191f);
+  border-color: var(--color-border-badge-severity-low-w6znea, transparent);
 }
-.awsui_badge_1yjyg_kce2m_145.awsui_badge-color-severity-neutral_1yjyg_kce2m_219:not(#\9) {
+.awsui_badge_1yjyg_zpkv4_145.awsui_badge-color-severity-neutral_1yjyg_zpkv4_231:not(#\9) {
   background-color: var(--color-background-notification-severity-neutral-1tqomh, #687078);
-  color: var(--color-text-notification-severity-neutral-bqmgv3, #fafafa);
+  color: var(--color-text-badge-severity-neutral-vfdy0w, #fafafa);
+  border-color: var(--color-border-badge-severity-neutral-kdj4l5, transparent);
 }

package/lib/internal/template/badge/styles.selectors.js CHANGED Viewed

@@ -2,15 +2,15 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "badge": "awsui_badge_1yjyg_kce2m_145",
-  "badge-color-grey": "awsui_badge-color-grey_1yjyg_kce2m_191",
-  "badge-color-green": "awsui_badge-color-green_1yjyg_kce2m_194",
-  "badge-color-blue": "awsui_badge-color-blue_1yjyg_kce2m_197",
-  "badge-color-red": "awsui_badge-color-red_1yjyg_kce2m_200",
-  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_kce2m_203",
-  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_kce2m_207",
-  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_kce2m_211",
-  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_kce2m_215",
-  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_kce2m_219"
+  "badge": "awsui_badge_1yjyg_zpkv4_145",
+  "badge-color-grey": "awsui_badge-color-grey_1yjyg_zpkv4_191",
+  "badge-color-green": "awsui_badge-color-green_1yjyg_zpkv4_196",
+  "badge-color-blue": "awsui_badge-color-blue_1yjyg_zpkv4_201",
+  "badge-color-red": "awsui_badge-color-red_1yjyg_zpkv4_206",
+  "badge-color-severity-critical": "awsui_badge-color-severity-critical_1yjyg_zpkv4_211",
+  "badge-color-severity-high": "awsui_badge-color-severity-high_1yjyg_zpkv4_216",
+  "badge-color-severity-medium": "awsui_badge-color-severity-medium_1yjyg_zpkv4_221",
+  "badge-color-severity-low": "awsui_badge-color-severity-low_1yjyg_zpkv4_226",
+  "badge-color-severity-neutral": "awsui_badge-color-severity-neutral_1yjyg_zpkv4_231"
 };

package/lib/internal/template/collection-preferences/content-display/content-display-option.js CHANGED Viewed

@@ -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/lib/internal/template/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;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"]}
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,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/lib/internal/template/collection-preferences/content-display/index.d.ts CHANGED Viewed

@@ -3,6 +3,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, enableColumnFiltering, i18nStrings, }: ContentDisplayPreferenceProps): JSX.Element;
+export default function ContentDisplayPreference({ title, description, options, value, groups, onChange, enableColumnFiltering, i18nStrings, ...dndProps }: ContentDisplayPreferenceProps): JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/lib/internal/template/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":"~~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"}
1	+ {"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/lib/internal/template/collection-preferences/content-display/index.js CHANGED Viewed

@@ -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/lib/internal/template/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, { 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"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAE5E,OAAO,WAAW,MAAM,oBAAoB,CAAC;AAC7C,OAAO,cAAc,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAErD,OAAO,EACL,sBAAsB,EACtB,sBAAsB,EACtB,gBAAgB,GACjB,MAAM,gEAAgE,CAAC;AACxE,OAAO,YAAY,MAAM,qBAAqB,CAAC;AAC/C,OAAO,oBAAoB,MAAM,8BAA8B,CAAC;AAChE,OAAO,kBAAkB,MAAM,4BAA4B,CAAC;AAC5D,OAAO,EAAE,iCAAiC,EAAE,MAAM,6BAA6B,CAAC;AAEhF,OAAO,oBAAoB,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EACL,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAGhB,qBAAqB,GACtB,MAAM,SAAS,CAAC;AAEjB,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC,MAAM,eAAe,GAAG,iBAAiB,CAAC;AAE1C,MAAM,YAAY,GAAG,CAAC,MAAc,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,eAAe,IAAI,MAAM,EAAE,CAAC,CAAC;AAMhF,SAAS,iBAAiB,CACxB,IAAkE,EAClE,KAQC;IAED,OAAO;QACL,0BAA0B,EAAE,IAAI,CAC9B,qDAAqD,EACrD,KAAK,CAAC,0BAA0B,EAChC,gBAAgB,CACjB;QACD,gCAAgC,EAAE,IAAI,CACpC,2DAA2D,EAC3D,KAAK,CAAC,gCAAgC,EACtC,sBAAsB,CACvB;QACD,gCAAgC,EAAE,IAAI,CACpC,2DAA2D,EAC3D,KAAK,CAAC,gCAAgC,EACtC,sBAAsB,CACvB;QACD,4BAA4B,EAAE,IAAI,CAChC,uDAAuD,EACvD,KAAK,CAAC,4BAA4B,CACnC;QACD,mBAAmB,EAAE,IAAI,CAAC,8CAA8C,EAAE,KAAK,CAAC,mBAAmB,CAAC;QACpG,yBAAyB,EAAE,IAAI,CAC7B,oDAAoD,EACpD,KAAK,CAAC,yBAAyB,CAChC;KACF,CAAC;AACJ,CAAC;AAeD,SAAS,SAAS,CAAC,EACjB,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,WAAW,EACX,YAAY,EACZ,mBAAmB,GAQpB;IACC,OAAO,CACL,+CAAoB,OAAO;QACzB,oBAAC,oBAAoB,IAAC,IAAI,EAAC,KAAK;YAC9B,6BAAK,SAAS,EAAE,MAAM,CAAC,8BAA8B,CAAC;gBACpD,oBAAC,WAAW,IAAC,UAAU,EAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,IAC5C,IAAI,CAAC,KAAK,CACC,CACV;YACL,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,CAC3B,6BAAK,SAAS,EAAE,MAAM,CAAC,gCAAgC,CAAC;gBACtD,oBAAC,0BAA0B,IACzB,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,QAAQ,EAAE,QAAQ,EAClB,YAAY,EAAE,gBAAgB,EAC9B,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,IAAI,CAAC,KAAK,EACrB,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAC5B,mBAAmB,EAAE,mBAAmB,GACxC,CACE,CACP,CACoB,CACnB,CACP,CAAC;AACJ,CAAC;AAED,SAAS,0BAA0B,CAAC,EAClC,IAAI,EACJ,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,YAAY,EACZ,gBAAgB,EAChB,mBAAmB,GACa;IAChC,OAAO,CACL,oBAAC,YAAY,IACX,KAAK,EAAE,IAAI,EACX,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,IAAI,EACd,mBAAmB,EAAE,IAAI,EACzB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,YAAY,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,EACpE,UAAU,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;YACnB,EAAE,EAAE,IAAI,CAAC,EAAE;YACX,iBAAiB,EACf,IAAI,CAAC,IAAI,KAAK,OAAO;gBACnB,CAAC,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;gBACvD,CAAC,CAAC,gBAAgB;oBAChB,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,KAAK,gBAAgB,EAAE;oBACtC,CAAC,CAAC,IAAI,CAAC,KAAK;YAClB,OAAO,EACL,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,CACtB,oBAAC,SAAS,IACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,gBAAgB,EAAE,WAAW,CAAC,EAAE,CAC9B,YAAY,CACV,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,IAAI,CAAC,EAAE,IAAI,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAC9F,EAEH,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,mBAAmB,EAAE,mBAAmB,GACxC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,oBAAoB,IAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,GAAI,CAC1E;SACJ,CAAC,GACF,CACH,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAAC,EAC/C,KAAK,EACL,WAAW,EACX,OAAO,EACP,KAAK,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/B,EAAE;IACF,OAAO,EAAE,IAAI;CACd,CAAC,CAAC,EACH,MAAM,EACN,QAAQ,EACR,qBAAqB,GAAG,KAAK,EAC7B,WAAW,EACX,GAAG,QAAQ,EACmB;;IAC9B,MAAM,QAAQ,GAAG,WAAW,CAAC,eAAe,CAAC,CAAC;IAC9C,MAAM,IAAI,GAAG,eAAe,CAAC,wBAAwB,CAAC,CAAC;IACvD,MAAM,CAAC,mBAAmB,EAAE,sBAAsB,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnE,MAAM,OAAO,GAAG,GAAG,QAAQ,QAAQ,CAAC;IACpC,MAAM,aAAa,GAAG,GAAG,QAAQ,cAAc,CAAC;IAEhD,MAAM,eAAe,GAAG,iBAAiB,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC;IAC1D,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,KAAa,EAAE,EAAE;;QAC3D,OAAA,IAAI,CACF,wDAAwD,EACxD,MAAA,MAAA,QAAQ,CAAC,6BAA6B,yDAAG,KAAK,EAAE,KAAK,CAAC,mCAAI,GAAG,KAAK,KAAK,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAAE,EAChH,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,CACnC,CAAA;KAAA,CAAC;IACJ,MAAM,SAAS,GAAG,CAAC,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC;IAChD,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IAE1D,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,gBAAgB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC,CAAC;IAC5G,MAAM,eAAe,GAAG,OAAO,CAC7B,GAAG,EAAE,CAAC,kBAAkB,CAAC,aAAa,EAAE,mBAAmB,CAAC,EAC5D,CAAC,aAAa,EAAE,mBAAmB,CAAC,CACrC,CAAC;IACF,MAAM,UAAU,GAAG,OAAO,CACxB,GAAG,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,eAAe,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAClE,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,CAAC,CACpC,CAAC;IACF,MAAM,YAAY,GAAG,OAAO,CAC1B,GAAG,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,eAAe,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,EAC5E,CAAC,UAAU,EAAE,mBAAmB,CAAC,CAClC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,EAAU,EAAE,EAAE;QAClC,uFAAuF;QACvF,IAAI,CAAC,SAAS,EAAE,CAAC;YACf,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,CAAC,EAAE,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;YAC1G,OAAO;QACT,CAAC;QACD,6DAA6D;QAC7D,MAAM,MAAM,GAAG,CACb,KAAmE,EAClB,EAAE,CACnD,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;YACf,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,OAAO,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC;YACtD,CAAC;YACD,OAAO,IAAI,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,EAAE,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;QACrE,CAAC,CAAC,CAAC;QACL,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC1B,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,MAAM,KAAK,CAAC,CAAC;IAC1F,OAAO,CACL,6BACE,IAAI,EAAC,OAAO,qBACK,OAAO,sBACN,aAAa,EAC/B,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC,KAC9B,iCAAiC,CAAC,gBAAgB,CAAC;QAEvD,4BAAI,SAAS,EAAE,YAAY,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,OAAO,IAC9C,IAAI,CAAC,gCAAgC,EAAE,KAAK,CAAC,CAC3C;QACL,2BAAG,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC,EAAE,EAAE,EAAE,aAAa,IACzD,IAAI,CAAC,sCAAsC,EAAE,WAAW,CAAC,CACxD;QAGH,qBAAqB,IAAI,CACxB,6BAAK,SAAS,EAAE,YAAY,CAAC,aAAa,CAAC;YACzC,oBAAC,kBAAkB,IACjB,aAAa,EAAE,mBAAmB,EAClC,oBAAoB,EAAE,IAAI,CACxB,iEAAiE,EACjE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,0BAA0B,CACxC,EACD,kBAAkB,EAAE,IAAI,CACtB,+DAA+D,EAC/D,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,CACtC,EACD,uBAAuB,EAAE,IAAI,CAC3B,qEAAqE,EACrE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAC5C,EACD,QAAQ,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,sBAAsB,CAAC,MAAM,CAAC,aAAa,CAAC,EACtE,SAAS,EAAE,IAAI,CACb,+DAA+D,EAC/D,MAAA,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,wBAAwB,4DAAG,eAAe,CAAC,MAAM,CAAC,EAC/D,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,eAAe,CAAC,MAAM,EAAE,CAAC,CACpD,GACD,CACE,CACP;QAEA,SAAS,IAAI,CACZ,6BAAK,SAAS,EAAE,YAAY,CAAC,UAAU,CAAC;YACtC,oBAAC,oBAAoB,IAAC,IAAI,EAAC,GAAG,EAAC,UAAU,EAAC,QAAQ;gBAChD,oBAAC,WAAW,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,IAC9B,IAAI,CACH,iEAAiE,EACjE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,0BAA0B,CACxC,CACW;gBACd,oBAAC,cAAc,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,sBAAsB,CAAC,EAAE,CAAC,IACtD,IAAI,CACH,qEAAqE,EACrE,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,8BAA8B,CAC5C,CACc,CACI,CACnB,CACP;QAED,6BAAK,IAAI,EAAC,aAAa,qBAAkB,OAAO,IAC7C,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,CAC5B,oBAAC,0BAA0B,IACzB,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,UAAU,EAC7C,QAAQ,EAAE,YAAY,EACtB,YAAY,EAAE,OAAO,CAAC,EAAE,CAAC,QAAQ,CAAC,qBAAqB,CAAC,OAAO,CAAC,CAAC,EACjE,cAAc,EAAE,OAAO,EACvB,eAAe,EAAE,aAAa,EAC9B,WAAW,EAAE,eAAe,EAC5B,YAAY,EAAE,WAAW,EACzB,mBAAmB,EAAE,mBAAmB,GACxC,CACH,CAAC,CAAC,CAAC,CACF,oBAAC,YAAY,IACX,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,IAAI,EACd,YAAY,EAAE,WAAW,EACzB,mBAAmB,EAAE,IAAI,EACzB,cAAc,EAAE,OAAO,EACvB,eAAe,EAAE,aAAa,EAC9B,WAAW,EAAE,eAAe,EAC5B,eAAe,EAAE,CAAC,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,EACvG,UAAU,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;gBACnB,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,iBAAiB,EAAE,IAAI,CAAC,KAAK;gBAC7B,OAAO,EAAE,oBAAC,oBAAoB,IAAC,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,GAAI;aACvF,CAAC,GACF,CACH,CACG,CACF,CACP,CAAC;AACJ,CAAC","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/lib/internal/template/collection-preferences/content-display/utils.d.ts CHANGED Viewed

@@ -1,10 +1,49 @@
 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, }: {
     options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;
     contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;
 }): ReadonlyArray<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 {};
 //# sourceMappingURL=utils.d.ts.map

package/lib/internal/template/collection-preferences/content-display/utils.d.ts.map CHANGED Viewed

	@@ -1 +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~~"}
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,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/lib/internal/template/collection-preferences/content-display/utils.js CHANGED Viewed

@@ -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/lib/internal/template/collection-preferences/content-display/utils.js.map CHANGED Viewed

	@@ -1 +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"]}
1	+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/utils.ts"],"names":[],"mappings":"AA0BA;;GAEG;AACH,MAAM,UAAU,UAAU,CAAC,KAAwC;IACjE,MAAM,MAAM,GAAuC,EAAE,CAAC;IACtD,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;QACzB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,MAAM,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC5C,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAC/B,OAAO,EACP,cAAc,GAIf;IACC,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,MAAM,GAAG,IAAI,GAAG,EAAgC,CAAC;IAEvD,KAAK,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,IAAI,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC;QACzD,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;QACjC,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,CAAC,CAAC;QACzC,CAAC;IACH,CAAC;IAED,KAAK,MAAM,MAAM,IAAI,OAAO,EAAE,CAAC;QAC7B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,EAAE,CAAC;YAC3B,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;QACvD,CAAC;IACH,CAAC;IAED,OAAO,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;AACrC,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,eAAe,CAC7B,OAA4C,EAC5C,MAAgD,EAChD,cAAiD;IAEjD,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACnB,MAAM,MAAM,GAAG,gBAAgB,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,CAAC,CAAC;QAC7D,OAAO,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,GAAG,EAAE,IAAI,EAAE,MAAe,EAAE,CAAC,CAAC,CAAC;IAChE,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,IAAI,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAErD,MAAM,OAAO,GAAG,CAAC,KAAwC,EAAoB,EAAE;;QAC7E,MAAM,MAAM,GAAqB,EAAE,CAAC;QACpC,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE,CAAC;YACzB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;gBAC1B,MAAM,KAAK,GAAG,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACpC,MAAM,CAAC,IAAI,CAAC;oBACV,IAAI,EAAE,OAAO;oBACb,EAAE,EAAE,IAAI,CAAC,EAAE;oBACX,KAAK,EAAE,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,mCAAI,IAAI,CAAC,EAAE;oBAC9B,OAAO,EAAE,IAAI,CAAC,OAAO;oBACrB,QAAQ,EAAE,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;iBACjC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,MAAM,MAAM,GAAG,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;gBACtC,IAAI,MAAM,EAAE,CAAC;oBACX,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC;gBAClE,CAAC;YACH,CAAC;QACH,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,OAAO,CAAC,cAAc,CAAC,CAAC;AACjC,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,qBAAqB,CAAC,IAAsB;IAC1D,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE;QACrB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,OAAO;gBACL,IAAI,EAAE,OAAgB;gBACtB,EAAE,EAAE,IAAI,CAAC,EAAE;gBACX,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,qBAAqB,CAAC,IAAI,CAAC,QAAQ,CAAC;aAC/C,CAAC;QACJ,CAAC;QACD,OAAO,EAAE,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,eAAe,CAAC,IAAsB,EAAE,UAAkB;IACxE,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7C,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,MAAM,GAAqB,EAAE,CAAC;IACpC,KAAK,MAAM,IAAI,IAAI,IAAI,EAAE,CAAC;QACxB,IAAI,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1B,MAAM,QAAQ,GAAG,eAAe,CAAC,IAAI,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;YACtD,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACxB,MAAM,CAAC,IAAI,CAAC,EAAE,GAAG,IAAI,EAAE,QAAQ,EAAE,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;aAAM,IAAI,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC;YACnD,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;IACH,CAAC;IACD,OAAO,MAAM,CAAC;AAChB,CAAC;AAED,MAAM,UAAU,kBAAkB,CAAC,OAA4C,EAAE,UAAkB;IACjG,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;IAC7C,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,OAAO,CAAC;IACjB,CAAC;IACD,OAAO,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;AAC7E,CAAC","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/lib/internal/template/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":"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~~"}
1	+ {"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"}