From 64284a0e8a2c3c4eb60e6cca257b6291c72f5f5e Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Fri, 29 Nov 2024 14:26:38 +0100
Subject: [PATCH 1/2] enhanced test page and fixed bug with no match

---
 pages/collection-preferences/simple.page.tsx  | 82 +++++++++++++------
 .../content-display/index.tsx                 |  2 +-
 src/collection-preferences/interfaces.ts      |  9 +-
 3 files changed, 68 insertions(+), 25 deletions(-)

diff --git a/pages/collection-preferences/simple.page.tsx b/pages/collection-preferences/simple.page.tsx
index 8a5d4bbd7b..62d818c652 100644
--- a/pages/collection-preferences/simple.page.tsx
+++ b/pages/collection-preferences/simple.page.tsx
@@ -2,8 +2,10 @@
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
 
+import { Box, SpaceBetween } from '~components';
 import CollectionPreferences from '~components/collection-preferences';
 
+import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings';
 import ScreenshotArea from '../utils/screenshot-area';
 import {
   baseProperties,
@@ -20,29 +22,63 @@ export default function CollectionPreferencesPermutations() {
     <>
       <h1>CollectionPreferences page for screenshot tests</h1>
       <ScreenshotArea disableAnimations={true}>
-        <CollectionPreferences
-          className={`cp-1`}
-          {...baseProperties}
-          pageSizePreference={pageSizePreference}
-          wrapLinesPreference={wrapLinesPreference}
-          contentDensityPreference={contentDensityPreference}
-          visibleContentPreference={visibleContentPreference}
-          stickyColumnsPreference={stickyColumnsPreference}
-          customPreference={customPreference}
-        />
-        <CollectionPreferences className={`cp-2`} {...baseProperties} customPreference={customPreference} />
-        <CollectionPreferences
-          className={`cp-3`}
-          {...baseProperties}
-          pageSizePreference={pageSizePreference}
-          wrapLinesPreference={wrapLinesPreference}
-          customPreference={customPreference}
-        />
-        <CollectionPreferences
-          className="cp-4"
-          {...baseProperties}
-          visibleContentPreference={visibleContentPreference}
-        />
+        <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+          <CollectionPreferences
+            className={`cp-1`}
+            {...baseProperties}
+            pageSizePreference={pageSizePreference}
+            wrapLinesPreference={wrapLinesPreference}
+            contentDensityPreference={contentDensityPreference}
+            visibleContentPreference={visibleContentPreference}
+            stickyColumnsPreference={stickyColumnsPreference}
+            customPreference={customPreference}
+          />
+
+          <Box>Table prefs with visible content</Box>
+        </SpaceBetween>
+
+        <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+          <CollectionPreferences className={`cp-2`} {...baseProperties} customPreference={customPreference} />
+
+          <Box>Custom prefs only</Box>
+        </SpaceBetween>
+
+        <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+          <CollectionPreferences
+            className={`cp-3`}
+            {...baseProperties}
+            pageSizePreference={pageSizePreference}
+            wrapLinesPreference={wrapLinesPreference}
+            customPreference={customPreference}
+          />
+
+          <Box>Single column with custom prefs</Box>
+        </SpaceBetween>
+
+        <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+          <CollectionPreferences
+            className="cp-4"
+            {...baseProperties}
+            visibleContentPreference={visibleContentPreference}
+          />
+
+          <Box>Single column visible content</Box>
+        </SpaceBetween>
+
+        <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+          <CollectionPreferences
+            className="cp-5"
+            {...baseProperties}
+            contentDisplayPreference={{
+              title: 'Column preferences',
+              description: 'Customize the columns visibility and order.',
+              options: [],
+              ...contentDisplayPreferenceI18nStrings,
+            }}
+          />
+
+          <Box>Single column content display with groups</Box>
+        </SpaceBetween>
       </ScreenshotArea>
     </>
   );
diff --git a/src/collection-preferences/content-display/index.tsx b/src/collection-preferences/content-display/index.tsx
index 1949803a79..c37a56e2d6 100644
--- a/src/collection-preferences/content-display/index.tsx
+++ b/src/collection-preferences/content-display/index.tsx
@@ -143,7 +143,7 @@ export default function ContentDisplayPreference({
       )}
 
       {/* No match */}
-      {sortedAndFilteredOptions.length === 0 && (
+      {enableColumnFiltering && sortedAndFilteredOptions.length === 0 && (
         <div className={getClassName('no-match')}>
           <InternalSpaceBetween size="s" alignItems="center">
             <InternalBox margin={{ top: 'm' }}>
diff --git a/src/collection-preferences/interfaces.ts b/src/collection-preferences/interfaces.ts
index 246a75b3cf..d1231229e2 100644
--- a/src/collection-preferences/interfaces.ts
+++ b/src/collection-preferences/interfaces.ts
@@ -218,7 +218,7 @@ export namespace CollectionPreferencesProps {
   export interface ContentDisplayPreference {
     title?: string;
     description?: string;
-    options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;
+    options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOptionOrGroup>;
     liveAnnouncementDndStarted?: (position: number, total: number) => string;
     liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;
     liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;
@@ -229,6 +229,13 @@ export namespace CollectionPreferencesProps {
     i18nStrings?: ContentDisplayPreferenceI18nStrings;
   }
 
+  export interface ContentDisplayOptionOrGroup {
+    id: string;
+    label: string;
+    alwaysVisible?: boolean;
+    options?: ReadonlyArray<ContentDisplayOption>;
+  }
+
   export interface ContentDisplayOption {
     id: string;
     label: string;

From c9abe80ba796f0730b02b6e1f10d69377e00ba07 Mon Sep 17 00:00:00 2001
From: Andrei Zhaleznichenka <zhalea@amazon.de>
Date: Fri, 29 Nov 2024 15:46:32 +0100
Subject: [PATCH 2/2] poc with nested options

---
 .../reorder-content.page.tsx                  | 147 ++++++++++++++----
 pages/collection-preferences/simple.page.tsx  |  16 --
 .../content-display-option.scss               |   6 +
 .../content-display-option.tsx                |  11 +-
 .../content-display/draggable-option.tsx      |   6 +-
 .../content-display/index.tsx                 |  89 +++++++----
 .../content-display/utils.ts                  |  84 ++++++++--
 src/collection-preferences/interfaces.ts      |   6 +-
 8 files changed, 258 insertions(+), 107 deletions(-)

diff --git a/pages/collection-preferences/reorder-content.page.tsx b/pages/collection-preferences/reorder-content.page.tsx
index 0a10cb2e9a..d821f78d0c 100644
--- a/pages/collection-preferences/reorder-content.page.tsx
+++ b/pages/collection-preferences/reorder-content.page.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import CollectionPreferences from '~components/collection-preferences';
+import { Box, CollectionPreferences, SpaceBetween } from '~components';
 
 import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings';
 import ScreenshotArea from '../utils/screenshot-area';
@@ -43,39 +43,126 @@ const longOptionsList = Array(50)
   .fill(1)
   .map((item, index) => ({ id: `id_${index}`, label: `Item ${index + 1}` }));
 
+const optionListWithGroups = [
+  {
+    id: 'id',
+    label: 'Item ID',
+    alwaysVisible: true,
+  },
+  { id: 'name', label: 'Item name' },
+  {
+    id: 'prices',
+    label: 'Prices',
+    options: [
+      {
+        id: 'price-de',
+        label: 'Price DE',
+      },
+      {
+        id: 'price-pl',
+        label: 'Price PL',
+      },
+      {
+        id: 'price-uk',
+        label: 'Price UK',
+      },
+      {
+        id: 'price-fr',
+        label: 'Price FR',
+      },
+      {
+        id: 'price-it',
+        label: 'Price IT',
+      },
+    ],
+  },
+  {
+    id: 'attributes',
+    label: 'Attributes',
+    options: [
+      {
+        id: 'size',
+        label: 'Size',
+      },
+      {
+        id: 'weight',
+        label: 'Weight',
+      },
+      {
+        id: 'battery',
+        label: 'Battery',
+      },
+      {
+        id: 'power',
+        label: 'Power',
+      },
+      {
+        id: 'condition',
+        label: 'Condition',
+      },
+    ],
+  },
+];
+
 export default function App() {
   return (
     <ScreenshotArea>
       <h1>CollectionPreferences page with content reordering</h1>
-      <CollectionPreferences
-        className={`cp-1`}
-        {...baseProperties}
-        pageSizePreference={pageSizePreference}
-        wrapLinesPreference={wrapLinesPreference}
-        contentDensityPreference={contentDensityPreference}
-        customPreference={customPreference}
-        contentDisplayPreference={{
-          title: 'Column preferences',
-          description: 'Customize the columns visibility and order.',
-          options: shortOptionsList,
-          ...contentDisplayPreferenceI18nStrings,
-        }}
-      />
-      <CollectionPreferences
-        className={`cp-2`}
-        {...baseProperties}
-        pageSizePreference={pageSizePreference}
-        wrapLinesPreference={wrapLinesPreference}
-        contentDensityPreference={contentDensityPreference}
-        customPreference={customPreference}
-        contentDisplayPreference={{
-          enableColumnFiltering: true,
-          title: 'Column preferences',
-          description: 'Customize the columns visibility and order.',
-          options: longOptionsList,
-          ...contentDisplayPreferenceI18nStrings,
-        }}
-      />
+
+      <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+        <CollectionPreferences
+          className={`cp-1`}
+          {...baseProperties}
+          pageSizePreference={pageSizePreference}
+          wrapLinesPreference={wrapLinesPreference}
+          contentDensityPreference={contentDensityPreference}
+          customPreference={customPreference}
+          contentDisplayPreference={{
+            title: 'Column preferences',
+            description: 'Customize the columns visibility and order.',
+            options: shortOptionsList,
+            ...contentDisplayPreferenceI18nStrings,
+          }}
+        />
+
+        <Box>No groups and no column filter</Box>
+      </SpaceBetween>
+
+      <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+        <CollectionPreferences
+          className={`cp-2`}
+          {...baseProperties}
+          pageSizePreference={pageSizePreference}
+          wrapLinesPreference={wrapLinesPreference}
+          contentDensityPreference={contentDensityPreference}
+          customPreference={customPreference}
+          contentDisplayPreference={{
+            enableColumnFiltering: true,
+            title: 'Column preferences',
+            description: 'Customize the columns visibility and order.',
+            options: longOptionsList,
+            ...contentDisplayPreferenceI18nStrings,
+          }}
+        />
+
+        <Box>No groups with column filter</Box>
+      </SpaceBetween>
+
+      <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
+        <CollectionPreferences
+          className="cp-3"
+          {...baseProperties}
+          contentDisplayPreference={{
+            enableColumnFiltering: true,
+            title: 'Column preferences',
+            description: 'Customize the columns visibility and order.',
+            options: optionListWithGroups,
+            ...contentDisplayPreferenceI18nStrings,
+          }}
+        />
+
+        <Box>With groups with column filter</Box>
+      </SpaceBetween>
     </ScreenshotArea>
   );
 }
diff --git a/pages/collection-preferences/simple.page.tsx b/pages/collection-preferences/simple.page.tsx
index 62d818c652..c45693eefd 100644
--- a/pages/collection-preferences/simple.page.tsx
+++ b/pages/collection-preferences/simple.page.tsx
@@ -5,7 +5,6 @@ import * as React from 'react';
 import { Box, SpaceBetween } from '~components';
 import CollectionPreferences from '~components/collection-preferences';
 
-import { contentDisplayPreferenceI18nStrings } from '../common/i18n-strings';
 import ScreenshotArea from '../utils/screenshot-area';
 import {
   baseProperties,
@@ -64,21 +63,6 @@ export default function CollectionPreferencesPermutations() {
 
           <Box>Single column visible content</Box>
         </SpaceBetween>
-
-        <SpaceBetween size="xxs" direction="horizontal" alignItems="center">
-          <CollectionPreferences
-            className="cp-5"
-            {...baseProperties}
-            contentDisplayPreference={{
-              title: 'Column preferences',
-              description: 'Customize the columns visibility and order.',
-              options: [],
-              ...contentDisplayPreferenceI18nStrings,
-            }}
-          />
-
-          <Box>Single column content display with groups</Box>
-        </SpaceBetween>
       </ScreenshotArea>
     </>
   );
diff --git a/src/collection-preferences/content-display/content-display-option.scss b/src/collection-preferences/content-display/content-display-option.scss
index 9ed1ed9e00..9da0766907 100644
--- a/src/collection-preferences/content-display/content-display-option.scss
+++ b/src/collection-preferences/content-display/content-display-option.scss
@@ -32,6 +32,9 @@ $border-radius: awsui.$border-radius-item;
   border-end-start-radius: $border-radius;
   border-end-end-radius: $border-radius;
 }
+.content-display-option-nested {
+  padding-inline-start: awsui.$space-l;
+}
 
 .content-display-option {
   list-style: none;
@@ -62,6 +65,9 @@ $border-radius: awsui.$border-radius-item;
   @include styles.text-wrapping;
   padding-inline-end: awsui.$space-l;
 }
+.content-display-option-group {
+  font-weight: bold;
+}
 
 .drag-overlay {
   box-shadow: awsui.$shadow-container-active;
diff --git a/src/collection-preferences/content-display/content-display-option.tsx b/src/collection-preferences/content-display/content-display-option.tsx
index 0bbb10e7d3..b9284873c0 100644
--- a/src/collection-preferences/content-display/content-display-option.tsx
+++ b/src/collection-preferences/content-display/content-display-option.tsx
@@ -1,11 +1,12 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React, { ForwardedRef, forwardRef } from 'react';
+import clsx from 'clsx';
 
 import DragHandle, { DragHandleProps } from '../../internal/components/drag-handle';
 import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import InternalToggle from '../../toggle/internal';
-import { OptionWithVisibility } from './utils';
+import { FlatOption } from './utils';
 
 import styles from '../styles.css.js';
 
@@ -15,8 +16,8 @@ export const getClassName = (suffix?: string) => styles[[componentPrefix, suffix
 export interface ContentDisplayOptionProps {
   dragHandleAriaLabel?: string;
   listeners?: DragHandleProps['listeners'];
-  onToggle?: (option: OptionWithVisibility) => void;
-  option: OptionWithVisibility;
+  onToggle?: (option: FlatOption) => void;
+  option: FlatOption;
   disabled?: boolean;
 }
 
@@ -33,10 +34,10 @@ const ContentDisplayOption = forwardRef(
     };
 
     return (
-      <div ref={ref} className={getClassName('content')}>
+      <div ref={ref} className={clsx(getClassName('content'), option.parent !== null && getClassName('nested'))}>
         <DragHandle disabled={disabled} attributes={dragHandleAttributes} listeners={listeners} />
 
-        <label className={getClassName('label')} htmlFor={controlId}>
+        <label className={clsx(getClassName('label'), option.group && getClassName('group'))} htmlFor={controlId}>
           {option.label}
         </label>
         <div className={getClassName('toggle')}>
diff --git a/src/collection-preferences/content-display/draggable-option.tsx b/src/collection-preferences/content-display/draggable-option.tsx
index 0ef0116e30..d9c5418fd5 100644
--- a/src/collection-preferences/content-display/draggable-option.tsx
+++ b/src/collection-preferences/content-display/draggable-option.tsx
@@ -6,7 +6,7 @@ import { CSS } from '@dnd-kit/utilities';
 import clsx from 'clsx';
 
 import ContentDisplayOption, { getClassName } from './content-display-option';
-import { OptionWithVisibility } from './utils';
+import { FlatOption } from './utils';
 
 import styles from '../styles.css.js';
 
@@ -18,8 +18,8 @@ export default function DraggableOption({
 }: {
   dragHandleAriaLabel?: string;
   onKeyDown?: (event: React.KeyboardEvent) => void;
-  onToggle: (option: OptionWithVisibility) => void;
-  option: OptionWithVisibility;
+  onToggle: (option: FlatOption) => void;
+  option: FlatOption;
 }) {
   const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({
     id: option.id,
diff --git a/src/collection-preferences/content-display/index.tsx b/src/collection-preferences/content-display/index.tsx
index c37a56e2d6..3470385460 100644
--- a/src/collection-preferences/content-display/index.tsx
+++ b/src/collection-preferences/content-display/index.tsx
@@ -17,7 +17,7 @@ import ContentDisplayOption from './content-display-option';
 import DraggableOption from './draggable-option';
 import useDragAndDropReorder from './use-drag-and-drop-reorder';
 import useLiveAnnouncements from './use-live-announcements';
-import { getFilteredOptions, getSortedOptions, OptionWithVisibility } from './utils';
+import { FlatOption, getProcessedOptions } from './utils';
 
 import styles from '../styles.css.js';
 
@@ -34,10 +34,16 @@ export default function ContentDisplayPreference({
   title,
   description,
   options,
-  value = options.map(({ id }) => ({
-    id,
-    visible: true,
-  })),
+  value = options.flatMap(option => {
+    const nested = 'options' in option ? option.options.map(({ id }) => ({ id, visible: true })) : [];
+    return [
+      {
+        id: option.id,
+        visible: true,
+      },
+      ...nested,
+    ];
+  }),
   onChange,
   liveAnnouncementDndStarted,
   liveAnnouncementDndItemReordered,
@@ -55,23 +61,42 @@ export default function ContentDisplayPreference({
   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 processedOptions = useMemo(
+    () => getProcessedOptions({ options, contentDisplay: value, filterText: columnFilteringText }),
+    [columnFilteringText, options, value]
+  );
 
-  const onToggle = (option: OptionWithVisibility) => {
+  const onToggle = (option: FlatOption) => {
     // 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 next = processedOptions.map(({ id, visible, parent }) => ({
+      id,
+      visible: id === option.id || parent === option.id ? !option.visible : visible,
+    }));
+
+    const optionsVisibility = new Map<string, boolean>();
+    for (const optionPreference of next) {
+      optionsVisibility.set(optionPreference.id, optionPreference.visible);
+    }
+
+    for (const option of options) {
+      if ('options' in option) {
+        let allVisible = true;
+        for (const nested of option.options) {
+          allVisible = allVisible && !!optionsVisibility.get(nested.id);
+        }
+        optionsVisibility.set(option.id, allVisible);
+      }
+    }
+
+    onChange(next.map(({ id }) => ({ id, visible: optionsVisibility.get(id) ?? false })));
   };
 
   const { activeItem, collisionDetection, handleKeyDown, sensors, setActiveItem } = useDragAndDropReorder({
-    sortedOptions: sortedAndFilteredOptions,
+    sortedOptions: processedOptions,
   });
 
-  const activeOption = activeItem ? sortedAndFilteredOptions.find(({ id }) => id === activeItem) : null;
+  const activeOption = activeItem ? processedOptions.find(({ id }) => id === activeItem) : null;
 
   const announcements = useLiveAnnouncements({
     isDragging: activeItem !== null,
@@ -96,7 +121,7 @@ export default function ContentDisplayPreference({
       'contentDisplayPreference.liveAnnouncementDndDiscarded',
       liveAnnouncementDndDiscarded
     ),
-    sortedOptions: sortedAndFilteredOptions,
+    sortedOptions: processedOptions,
   });
 
   const renderedDragHandleAriaDescription = i18n(
@@ -134,16 +159,16 @@ export default function ContentDisplayPreference({
             countText={i18n(
               'contentDisplayPreference.i18nStrings.columnFilteringCountText',
               i18nStrings?.columnFilteringCountText
-                ? i18nStrings?.columnFilteringCountText(sortedAndFilteredOptions.length)
+                ? i18nStrings?.columnFilteringCountText(processedOptions.length)
                 : undefined,
-              format => format({ count: sortedAndFilteredOptions.length })
+              format => format({ count: processedOptions.length })
             )}
           />
         </div>
       )}
 
       {/* No match */}
-      {enableColumnFiltering && sortedAndFilteredOptions.length === 0 && (
+      {enableColumnFiltering && processedOptions.length === 0 && (
         <div className={getClassName('no-match')}>
           <InternalSpaceBetween size="s" alignItems="center">
             <InternalBox margin={{ top: 'm' }}>
@@ -179,10 +204,10 @@ export default function ContentDisplayPreference({
           const { active, over } = event;
 
           if (over && active.id !== over.id) {
-            const oldIndex = sortedOptions.findIndex(({ id }) => id === active.id);
-            const newIndex = sortedOptions.findIndex(({ id }) => id === over.id);
+            const oldIndex = processedOptions.findIndex(({ id }) => id === active.id);
+            const newIndex = processedOptions.findIndex(({ id }) => id === over.id);
             // We need to remember to trim the options down to id and visible to emit changes.
-            onChange(arrayMove([...sortedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));
+            onChange(arrayMove([...processedOptions], oldIndex, newIndex).map(({ id, visible }) => ({ id, visible })));
           }
         }}
         onDragCancel={() => setActiveItem(null)}
@@ -197,20 +222,18 @@ export default function ContentDisplayPreference({
         >
           <SortableContext
             disabled={columnFilteringText.trim().length > 0}
-            items={sortedAndFilteredOptions.map(({ id }) => id)}
+            items={processedOptions.map(({ id }) => id)}
             strategy={verticalListSortingStrategy}
           >
-            {sortedAndFilteredOptions.map(option => {
-              return (
-                <DraggableOption
-                  dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}
-                  key={option.id}
-                  onKeyDown={handleKeyDown}
-                  onToggle={onToggle}
-                  option={option}
-                />
-              );
-            })}
+            {processedOptions.map(option => (
+              <DraggableOption
+                dragHandleAriaLabel={i18n('contentDisplayPreference.dragHandleAriaLabel', dragHandleAriaLabel)}
+                key={option.id}
+                onKeyDown={handleKeyDown}
+                onToggle={onToggle}
+                option={option}
+              />
+            ))}
           </SortableContext>
         </ul>
         <Portal>
diff --git a/src/collection-preferences/content-display/utils.ts b/src/collection-preferences/content-display/utils.ts
index 9877ce3ed6..6c7db5f02c 100644
--- a/src/collection-preferences/content-display/utils.ts
+++ b/src/collection-preferences/content-display/utils.ts
@@ -1,39 +1,89 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
+
 import { CollectionPreferencesProps } from '../interfaces';
 
-export interface OptionWithVisibility extends CollectionPreferencesProps.ContentDisplayOption {
+type OptionOrGroup =
+  | CollectionPreferencesProps.ContentDisplayOptionGroup
+  | CollectionPreferencesProps.ContentDisplayOption;
+
+export interface FlatOption extends CollectionPreferencesProps.ContentDisplayOption {
   visible: boolean;
+  parent: null | string;
+  group: boolean;
 }
 
-export function getSortedOptions({
+export function getProcessedOptions({
   options,
   contentDisplay,
+  filterText,
 }: {
-  options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOption>;
-  contentDisplay: ReadonlyArray<CollectionPreferencesProps.ContentDisplayItem>;
-}): ReadonlyArray<OptionWithVisibility> {
-  // By using a Map, we are guaranteed to preserve insertion order on future iteration.
-  const optionsById = new Map<string, OptionWithVisibility>();
-  // 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 });
+  options: readonly OptionOrGroup[];
+  contentDisplay: readonly CollectionPreferencesProps.ContentDisplayItem[];
+  filterText: string;
+}) {
+  const optionDefinitions = new Map<string, OptionOrGroup>();
+  for (const option of options) {
+    optionDefinitions.set(option.id, option);
+    'options' in option && option.options.forEach(option => optionDefinitions.set(option.id, option));
   }
-  // We merge options data, and insert any that were not in contentDisplay as non-visible
+
+  const optionsVisibility = new Set<string>();
+  const optionsOrder = new Map<string, number>();
+  for (const optionPreference of contentDisplay) {
+    optionPreference.visible && optionsVisibility.add(optionPreference.id);
+    optionsOrder.set(optionPreference.id, optionsOrder.size);
+  }
+
+  // Add options from content display preference even if those are not defined in preference settings.
+  const undefinedOptions: OptionOrGroup[] = contentDisplay
+    .filter(optionPreference => !optionDefinitions.has(optionPreference.id))
+    .map(optionPreference => ({ ...optionPreference, label: optionPreference.id }));
+
+  options = getFilteredOptions([...undefinedOptions, ...options], filterText);
+  options = getSortedOptions([...undefinedOptions, ...options], optionsOrder);
+
+  const processedOptions: FlatOption[] = [];
   for (const option of options) {
-    const existing = optionsById.get(option.id);
-    optionsById.set(option.id, { ...option, visible: !!existing?.visible });
+    const hasNested = 'options' in option;
+    processedOptions.push({ ...option, visible: optionsVisibility.has(option.id), group: hasNested, parent: null });
+    for (const child of hasNested ? option.options : []) {
+      processedOptions.push({ ...child, visible: optionsVisibility.has(child.id), group: false, parent: option.id });
+    }
   }
-  return Array.from(optionsById.values());
+
+  return processedOptions;
 }
 
-export function getFilteredOptions(options: ReadonlyArray<OptionWithVisibility>, filterText: string) {
+function getFilteredOptions(options: readonly OptionOrGroup[], filterText: string): readonly OptionOrGroup[] {
   filterText = filterText.trim().toLowerCase();
 
   if (!filterText) {
     return options;
   }
 
-  return options.filter(option => option.label.toLowerCase().trim().includes(filterText));
+  const matchOption = (option: OptionOrGroup) => option.label.toLowerCase().trim().includes(filterText);
+
+  let filtered = options.map(option => {
+    if ('options' in option) {
+      return { ...option, options: option.options.filter(matchOption) };
+    }
+    return option;
+  });
+
+  filtered = filtered.filter(option => matchOption(option) || ('options' in option && option.options.length > 0));
+
+  return filtered;
+}
+
+function getSortedOptions(options: readonly OptionOrGroup[], indices: Map<string, number>): readonly OptionOrGroup[] {
+  const compare = (a: OptionOrGroup, b: OptionOrGroup) => (indices.get(a.id) ?? -1) - (indices.get(b.id) ?? -1);
+  return options
+    .map(option => {
+      if ('options' in option) {
+        return { ...option, options: [...option.options].sort(compare) };
+      }
+      return option;
+    })
+    .sort(compare);
 }
diff --git a/src/collection-preferences/interfaces.ts b/src/collection-preferences/interfaces.ts
index d1231229e2..605070db5c 100644
--- a/src/collection-preferences/interfaces.ts
+++ b/src/collection-preferences/interfaces.ts
@@ -218,7 +218,7 @@ export namespace CollectionPreferencesProps {
   export interface ContentDisplayPreference {
     title?: string;
     description?: string;
-    options: ReadonlyArray<CollectionPreferencesProps.ContentDisplayOptionOrGroup>;
+    options: ReadonlyArray<ContentDisplayOption | ContentDisplayOptionGroup>;
     liveAnnouncementDndStarted?: (position: number, total: number) => string;
     liveAnnouncementDndItemReordered?: (initialPosition: number, currentPosition: number, total: number) => string;
     liveAnnouncementDndItemCommitted?: (initialPosition: number, finalPosition: number, total: number) => string;
@@ -229,11 +229,11 @@ export namespace CollectionPreferencesProps {
     i18nStrings?: ContentDisplayPreferenceI18nStrings;
   }
 
-  export interface ContentDisplayOptionOrGroup {
+  export interface ContentDisplayOptionGroup {
     id: string;
     label: string;
     alwaysVisible?: boolean;
-    options?: ReadonlyArray<ContentDisplayOption>;
+    options: ReadonlyArray<ContentDisplayOption>;
   }
 
   export interface ContentDisplayOption {