Added section support to Picker (#plugins-292)

Author: bmingles

packages/components/src/spectrum/picker/Picker.tsx

@@ -1,18 +1,19 @@
-import { useMemo } from 'react';
-import { Item, Picker as SpectrumPicker } from '@adobe/react-spectrum';
+import { useCallback, useMemo } from 'react';
+import { Item, Picker as SpectrumPicker, Section } from '@adobe/react-spectrum';
 import { Tooltip } from '../../popper';
 import {
   NormalizedSpectrumPickerProps,
   normalizePickerItemList,
   normalizeTooltipOptions,
-  PickerItem,
+  PickerItemOrSection,
   PickerItemKey,
   TooltipOptions,
+  NormalizedPickerItem,
 } from './PickerUtils';
 import { PickerItemContent } from './PickerItemContent';
 
 export type PickerProps = {
-  children: PickerItem | PickerItem[];
+  children: PickerItemOrSection | PickerItemOrSection[];
   /** Can be set to true or a TooltipOptions to enable item tooltips */
   tooltip?: boolean | TooltipOptions;
   /** The currently selected key in the collection (controlled). */
@@ -71,6 +72,18 @@ export function Picker({
     [tooltip]
   );
 
+  const renderItem = useCallback(
+    ({ content, textValue }: NormalizedPickerItem) => (
+      <Item textValue={textValue === '' ? 'Empty' : textValue}>
+        <PickerItemContent>{content}</PickerItemContent>
+        {tooltipOptions == null || content === '' ? null : (
+          <Tooltip options={tooltipOptions}>{content}</Tooltip>
+        )}
+      </Item>
+    ),
+    [tooltipOptions]
+  );
+
   return (
     <SpectrumPicker
       // eslint-disable-next-line react/jsx-props-no-spreading
@@ -89,14 +102,21 @@ export function Picker({
           onSelectionChange) as NormalizedSpectrumPickerProps['onSelectionChange']
       }
     >
-      {({ content, textValue }) => (
-        <Item textValue={textValue === '' ? 'Empty' : textValue}>
-          <PickerItemContent>{content}</PickerItemContent>
-          {tooltipOptions == null || content === '' ? null : (
-            <Tooltip options={tooltipOptions}>{content}</Tooltip>
-          )}
-        </Item>
-      )}
+      {itemOrSection => {
+        if ('items' in itemOrSection) {
+          return (
+            <Section
+              key={itemOrSection.key}
+              title={itemOrSection.title}
+              items={itemOrSection.items}
+            >
+              {renderItem}
+            </Section>
+          );
+        }
+
+        return renderItem(itemOrSection);
+      }}
     </SpectrumPicker>
   );
 }

packages/components/src/spectrum/picker/PickerUtils.ts

@@ -1,10 +1,24 @@
-import { Key, ReactElement, ReactNode } from 'react';
-import type { SpectrumPickerProps } from '@adobe/react-spectrum';
-import type { ItemProps } from '@react-types/shared';
+import { isValidElement, Key, ReactElement, ReactNode } from 'react';
+import { Item, Section, SpectrumPickerProps } from '@adobe/react-spectrum';
+import type {
+  ItemProps,
+  ItemRenderer,
+  SectionProps,
+} from '@react-types/shared';
 import { PopperOptions } from '../../popper';
 
+export type SectionPropsNoItemRenderer<T> = Omit<
+  SectionProps<T>,
+  'children'
+> & {
+  children: Exclude<SectionProps<T>['children'], ItemRenderer<T>>;
+};
+
 export type ItemElement = ReactElement<ItemProps<unknown>>;
+export type SectionElement = ReactElement<SectionPropsNoItemRenderer<unknown>>;
 export type PickerItem = number | string | boolean | ItemElement;
+export type PickerSection = SectionElement;
+export type PickerItemOrSection = PickerItem | PickerSection;
 
 /**
  * Augment the Spectrum selection key type to include boolean values.
@@ -32,32 +46,64 @@ export interface NormalizedPickerItem {
   textValue: string;
 }
 
+export interface NormalizedPickerSection {
+  key: Key;
+  title: ReactNode;
+  items: NormalizedPickerItem[];
+}
+
 export type NormalizedSpectrumPickerProps =
   SpectrumPickerProps<NormalizedPickerItem>;
 
 export type TooltipOptions = { placement: PopperOptions['placement'] };
 
+export function isSectionElement<T>(
+  node: ReactNode
+): node is ReactElement<SectionProps<T>> {
+  return isValidElement<SectionProps<T>>(node) && node.type === Section;
+}
+
+export function isItemElement<T>(
+  node: ReactNode
+): node is ReactElement<ItemProps<T>> {
+  return isValidElement<ItemProps<T>>(node) && node.type === Item;
+}
+
 /**
  * Determine the `key` of a picker item.
- * @param item The picker item
+ * @param item The picker item or section
  * @returns A `PickerItemKey` for the picker item
  */
-function normalizeItemKey(item: PickerItem): PickerItemKey {
+function normalizeItemKey(item: PickerItem): PickerItemKey;
+function normalizeItemKey(item: PickerSection): Key;
+function normalizeItemKey(
+  item: PickerItem | PickerSection
+): Key | PickerItemKey {
   // string, number, or boolean
   if (typeof item !== 'object') {
-    return item;
+    return item as PickerItemKey;
   }
 
-  // `ItemElement` with `key` prop set
+  // If `key` prop is explicitly set
   if (item.key != null) {
     return item.key;
   }
 
+  if (isSectionElement(item)) {
+    if (typeof item.props.title === 'string') {
+      return item.props.title;
+    }
+  } else if (isItemElement(item)) {
+    if (item.props.textValue != null) {
+      return item.props.textValue;
+    }
+  }
+
   if (typeof item.props.children === 'string') {
     return item.props.children;
   }
 
-  return item.props.textValue ?? '';
+  return '';
 }
 
 /**
@@ -86,7 +132,25 @@ function normalizeTextValue(item: PickerItem): string {
  * @param item item to normalize
  * @returns NormalizedPickerItem object
  */
-function normalizePickerItem(item: PickerItem): NormalizedPickerItem {
+function normalizePickerItem(
+  item: PickerItemOrSection
+): NormalizedPickerItem | NormalizedPickerSection {
+  if (isSectionElement(item)) {
+    const key = normalizeItemKey(item);
+    const { title } = item.props;
+
+    const items = normalizePickerItemList(item.props.children).filter(
+      // We don't support nested section elements
+      childItem => !isSectionElement(childItem)
+    ) as NormalizedPickerItem[];
+
+    return {
+      key,
+      title,
+      items,
+    };
+  }
+
   const key = normalizeItemKey(item);
   const content = typeof item === 'object' ? item.props.children : String(item);
   const textValue = normalizeTextValue(item);
@@ -104,8 +168,8 @@ function normalizePickerItem(item: PickerItem): NormalizedPickerItem {
  * @returns An array of normalized picker items
  */
 export function normalizePickerItemList(
-  items: PickerItem | PickerItem[]
-): NormalizedPickerItem[] {
+  items: PickerItemOrSection | PickerItemOrSection[]
+): (NormalizedPickerItem | NormalizedPickerSection)[] {
   const itemsArray = Array.isArray(items) ? items : [items];
   return itemsArray.map(normalizePickerItem);
 }