@cloudscape-design/components-themeable 3.0.1309 → 3.0.1310

package/lib/internal/manifest.json

@@ -1,3 +1,3 @@
 {
-  "commit": "8ddbc9281c7c0600b2d5c12af1e0ae4eacbc884b"
+  "commit": "c158a478904bc2bdf92940131a95a09c1327a71f"
 }

package/lib/internal/scss/collection-preferences/content-display/content-display-list.scss

@@ -32,3 +32,13 @@
   padding-block: 0;
   padding-inline: 0;
 }
+
+$group-children-indentation: 28px;
+
+// Text-to-text indentation between group header and child items.
+// The drag handle (~20px) is rendered before the content, so we subtract it.
+.content-display-group-children {
+  padding-inline-start: calc(
+    #{$group-children-indentation} - #{awsui.$size-icon-normal} - 2 * #{awsui.$space-scaled-xxxs}
+  );
+}

package/lib/internal/scss/collection-preferences/content-display/content-display-option.scss

@@ -27,3 +27,15 @@
   @include styles.text-wrapping;
   padding-inline-end: awsui.$space-l;
 }
+
+.content-display-group-header {
+  @include styles.styles-reset;
+  display: flex;
+  align-items: flex-start;
+  padding-block: awsui.$space-scaled-xs;
+  padding-inline-end: awsui.$space-xs;
+  border-start-start-radius: awsui.$border-radius-item;
+  border-start-end-radius: awsui.$border-radius-item;
+  border-end-start-radius: awsui.$border-radius-item;
+  border-end-end-radius: awsui.$border-radius-item;
+}

package/lib/internal/scss/internal/generated/custom-css-properties/index.scss

@@ -1,6 +1,6 @@
 
     // Build environment
-    $awsui-commit-hash: "8ddbc928";
+    $awsui-commit-hash: "c158a478";
     // Manually managed CSS-variables
     $maxContentWidth: --awsui-max-content-width-6b9ypa;
 $minContentWidth: --awsui-min-content-width-6b9ypa;

package/lib/internal/scss/table/header-cell/styles.scss

@@ -53,7 +53,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   position: relative;
   text-align: start;
   box-sizing: border-box;
-  border-block-end: awsui.$border-divider-section-width solid awsui.$color-border-divider-default;
+  border-block-end: awsui.$border-divider-list-width solid awsui.$color-border-divider-interactive-default;
   background: awsui.$color-background-table-header;
   color: awsui.$color-text-column-header;
   font-weight: awsui.$font-weight-heading-s;
@@ -63,6 +63,13 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
 
   @include header-cell-focus-outline(awsui.$space-scaled-xxs);
 
+  &.header-cell-group,
+  &.header-cell-grouped,
+  &.header-cell-spans-rows {
+    padding-block: awsui.$space-xxxs;
+    padding-inline: awsui.$space-scaled-xs;
+  }
+
   &-sticky {
     border-block-end: awsui.$border-table-sticky-width solid awsui.$color-border-divider-default;
   }
@@ -80,6 +87,7 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
     background: none;
   }
   &:last-child,
+  &[data-rightmost],
   &.header-cell-sortable {
     padding-inline-end: awsui.$space-xs;
   }
@@ -143,6 +151,12 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   padding-inline-end: awsui.$space-s;
   @include cell-offset(awsui.$space-s);
 
+  .header-cell-group > &,
+  .header-cell-grouped > &,
+  .header-cell-spans-rows > & {
+    padding-block: awsui.$space-xxxs;
+  }
+
   .header-cell-sortable > & {
     padding-inline-end: calc(#{awsui.$space-xl} + #{awsui.$space-xxs});
   }
@@ -160,6 +174,26 @@ $cell-horizontal-padding: awsui.$space-scaled-l;
   }
 }
 
+.header-cell-spans-rows {
+  block-size: 100%;
+  vertical-align: bottom;
+
+  > .header-cell-content {
+    block-size: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+
+    // stylelint-disable-next-line no-descending-specificity
+    > .sorting-icon {
+      inset-block-start: auto;
+      inset-block-end: awsui.$space-scaled-xxs;
+      transform: none;
+    }
+  }
+}
+
 .header-cell-sortable:not(.header-cell-disabled) {
   & > .header-cell-content {
     cursor: pointer;
@@ -206,12 +240,14 @@ settings icon in the pagination slot.
   &:first-child {
     @include header-cell-focus-outline-first(awsui.$space-scaled-xxs);
   }
-  &:first-child > .header-cell-content {
+  &:first-child:not(.header-cell-grouped):not(.header-cell-group) > .header-cell-content {
     @include cell-offset(0px);
     @include header-cell-focus-outline-first(awsui.$space-table-header-focus-outline-gutter);
   }
 
-  &:first-child:not(.has-striped-rows):not(.sticky-cell-pad-inline-start) {
+  &:first-child:not(.has-striped-rows):not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(
+      .header-cell-grouped
+    ) {
     @include cell-offset(awsui.$space-xxxs);
   }
 
@@ -220,11 +256,12 @@ settings icon in the pagination slot.
     shaded background makes the child content appear too close
     to the table edge.
   */
-  &:first-child.has-striped-rows:not(.sticky-cell-pad-inline-start) {
+  &:first-child.has-striped-rows:not(.sticky-cell-pad-inline-start):not(.header-cell-group):not(.header-cell-grouped) {
     @include cell-offset(awsui.$space-xxs);
   }
 
-  &:last-child.header-cell-sortable:not(.header-cell-resizable) {
+  &:last-child.header-cell-sortable:not(.header-cell-resizable),
+  &[data-rightmost].header-cell-sortable:not(.header-cell-resizable) {
     padding-inline-end: awsui.$space-xxxs;
   }
 

package/lib/internal/scss/table/resizer/styles.scss

@@ -34,7 +34,7 @@ $block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
   block-size: 100%;
 }
 
-th:not(:last-child) > .divider,
+th:not([data-rightmost]) > .divider,
 .divider-interactive {
   position: absolute;
   outline: none;
@@ -46,25 +46,41 @@ th:not(:last-child) > .divider,
   max-block-size: calc(100% - #{$block-gap});
   margin-block: auto;
   margin-inline: auto;
-  border-inline-start: awsui.$border-item-width solid awsui.$color-border-divider-interactive-default;
+  border-inline-start: awsui.$border-divider-list-width solid awsui.$color-border-divider-interactive-default;
   box-sizing: border-box;
-}
 
-th:not(:last-child) > .divider-disabled {
-  border-inline-start-color: awsui.$color-border-divider-default;
+  // Position variants for grouped column headers.
+  // All Column dividers maintain the same bottom gap ($block-gap / 2) as the default.
+  &.divider-position-top {
+    // Leaf column under a group: extends upward, same bottom gap as default.
+    margin-block-start: 0;
+    margin-block-end: auto;
+    max-block-size: calc(100% - #{$block-gap} / 2);
+  }
+  &.divider-position-bottom {
+    // Group header: extends downward to meet the horizontal border below.
+    margin-block-start: auto;
+    margin-block-end: 0;
+    max-block-size: calc(100% - #{$block-gap} / 2);
+  }
+  &.divider-position-full {
+    margin-block: 0;
+    max-block-size: 100%;
+  }
 }
 
 .divider-interactive {
   inset-inline-end: calc(#{$handle-width} / 2);
 }
 
-// stylelint-disable-next-line selector-combinator-disallowed-list
-th:last-child > .resizer-wrapper.visual-refresh.is-borderless .divider-interactive {
-  inset-inline-end: 0;
+.divider-active {
+  /* used in test-utils */
 }
 
-.divider-active {
-  border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
+.resizer-wrapper.visual-refresh.is-borderless.is-last {
+  > .divider-interactive {
+    inset-inline-end: 0;
+  }
 }
 
 .resizer {
@@ -84,9 +100,6 @@ th:last-child > .resizer-wrapper.visual-refresh.is-borderless .divider-interacti
   .resize-active & {
     pointer-events: none;
   }
-  &:hover + .divider {
-    border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
-  }
   &.has-focus {
     @include focus-visible.when-visible-unfocused {
       @include styles.focus-highlight(calc(#{awsui.$space-table-header-focus-outline-gutter} - 2px));

package/lib/internal/scss/table/styles.scss

@@ -142,6 +142,15 @@ filter search icon.
     padding-inline: awsui.$space-scaled-l;
     border-inline-start: awsui.$border-width-item-selected solid transparent;
   }
+
+  // When the selection cell spans multiple header rows, use flex to push the
+  // checkbox to the bottom of the cell, matching bottom-aligned column headers.
+  &-content-spans-rows {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    block-size: 100%;
+  }
 }
 
 .header-secondary {

package/lib/internal/template/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/lib/internal/template/collection-preferences/content-display/content-display-option.js.map

@@ -1 +1 @@
-{"version":3,"file":"content-display-option.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/content-display-option.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAgB,UAAU,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,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/lib/internal/template/collection-preferences/content-display/index.d.ts

@@ -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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/collection-preferences/content-display/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { useMemo, useState } from 'react';\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/lib/internal/template/collection-preferences/content-display/utils.d.ts

@@ -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

@@ -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"}