Add option group support to Select and OptionMenuList

* OptionMenuListItem has a new prop, `type`, which can be set to either
  `option` (the default) or `heading` (an option group heading).  The
  usual OptionMenuListItem event handlers and icons are ignored for
  option group headings.
* OptionMenuList now accepts arrays of child options as option values;
  these values will be rendered as an option group.  The parent item's
  label will be used as the option group heading. If the parent item is
  disabled, all children will also be disabled.

Author: caseywilliams

packages/data-grid/src/__test__/__snapshots__/quickFitler.test.jsx.snap

@@ -252,6 +252,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
                     onMouseEnter={[Function]}
                     selected={false}
                     svg={null}
+                    type="option"
                   >
                     <li
                       aria-selected={false}
@@ -304,6 +305,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
                     onMouseEnter={[Function]}
                     selected={false}
                     svg={null}
+                    type="option"
                   >
                     <li
                       aria-selected={false}
@@ -356,6 +358,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
                     onMouseEnter={[Function]}
                     selected={false}
                     svg={null}
+                    type="option"
                   >
                     <li
                       aria-selected={false}
@@ -600,6 +603,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
                     onMouseEnter={[Function]}
                     selected={false}
                     svg={null}
+                    type="option"
                   >
                     <li
                       aria-selected={false}
@@ -652,6 +656,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
                     onMouseEnter={[Function]}
                     selected={false}
                     svg={null}
+                    type="option"
                   >
                     <li
                       aria-selected={false}
@@ -704,6 +709,7 @@ exports[`Snapshot test Check component matches previous HTML snapshot 1`] = `
                     onMouseEnter={[Function]}
                     selected={false}
                     svg={null}
+                    type="option"
                   >
                     <li
                       aria-selected={false}

packages/react-components/source/react/helpers/customPropTypes.js

@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import Icon from '../library/icon';
 
 /**
  * Design system available element elevations
@@ -81,3 +82,16 @@ export const deprecated = message => typeChecker => {
     return typeChecker(props, key, componentName, location, propFullName);
   };
 };
+
+export const optionMenuItemShape = {
+  /** Value of the option */
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** The label to show */
+  label: PropTypes.node.isRequired,
+  /** Optional icon associated with this option */
+  icon: PropTypes.oneOf(Icon.AVAILABLE_ICONS),
+  /** Optional custom icon associated with this option */
+  svg: PropTypes.element,
+  /** Whether this option is disabled */
+  disabled: PropTypes.bool,
+};

packages/react-components/source/react/internal/option-menu-list/OptionMenuList.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { isNil, focus, cancelEvent } from '../../helpers/statics';
+import { optionMenuItemShape } from '../../helpers/customPropTypes';
 
 import {
   UP_KEY_CODE,
@@ -15,21 +16,20 @@ import {
 } from '../../constants';
 
 import OptionMenuListItem from './OptionMenuListItem';
-import Icon from '../../library/icon';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
   multiple: PropTypes.bool,
   autocomplete: PropTypes.bool,
   showCancel: PropTypes.bool,
   options: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-        .isRequired,
-      label: PropTypes.node.isRequired,
-      icon: PropTypes.oneOf(Icon.AVAILABLE_ICONS),
-      disabled: PropTypes.bool,
-    }),
+    PropTypes.oneOfType([
+      PropTypes.shape(optionMenuItemShape),
+      PropTypes.shape({
+        ...optionMenuItemShape,
+        value: PropTypes.arrayOf(PropTypes.shape(optionMenuItemShape)),
+      }),
+    ]),
   ),
   selected: PropTypes.oneOfType([
     PropTypes.string,
@@ -72,10 +72,16 @@ const defaultProps = {
 
 const getOptionId = (id, value) => `${id}-${value}`;
 
+const getFocusableOptions = options =>
+  options.map(opt => (Array.isArray(opt.value) ? opt.value : opt)).flat();
+
 const getFocusedId = (focusedIndex, id, options) =>
-  isNil(focusedIndex) || focusedIndex >= options.length
+  typeof focusedIndex !== 'number' || focusedIndex >= options.length
     ? undefined
-    : getOptionId(id, options[focusedIndex].value);
+    : getOptionId(
+        id,
+        getFocusableOptions(options)[Math.max(focusedIndex, 0)].value,
+      );
 
 const getSelectionSet = selection =>
   new Set(
@@ -134,7 +140,11 @@ class OptionMenuList extends Component {
   }
 
   onMouseEnterItem(focusedIndex) {
-    this.focusItem(focusedIndex);
+    if (typeof focusedIndex === 'number') {
+      this.focusItem(focusedIndex);
+    } else {
+      this.setState({ focusedIndex: null });
+    }
   }
 
   onCancel(e) {
@@ -161,7 +171,9 @@ class OptionMenuList extends Component {
     if (isNil(focusedIndex)) {
       this.focusFirst();
     } else {
-      this.focusItem(Math.min(options.length - 1, focusedIndex + 1));
+      this.focusItem(
+        Math.min(getFocusableOptions(options).length - 1, focusedIndex + 1),
+      );
     }
   }
 
@@ -192,7 +204,7 @@ class OptionMenuList extends Component {
       }
       case SPACE_KEY_CODE:
       case ENTER_KEY_CODE: {
-        const focused = options[focusedIndex];
+        const focused = getFocusableOptions(options)[focusedIndex];
         if (focused && !focused.disabled) {
           this.selectFocusedItem();
           onClickItem();
@@ -251,7 +263,7 @@ class OptionMenuList extends Component {
   focusLast() {
     const { options } = this.props;
 
-    this.focusItem(options.length - 1);
+    this.focusItem(getFocusableOptions(options).length - 1);
   }
 
   focusItem(focusedIndex) {
@@ -296,25 +308,14 @@ class OptionMenuList extends Component {
     const { options } = this.props;
 
     if (!isNil(focusedIndex)) {
-      const { value } = options[focusedIndex];
+      const { value } = getFocusableOptions(options)[focusedIndex];
 
       this.select(value);
     }
   }
 
   /* eslint-disable jsx-a11y/click-events-have-key-events */
   render() {
-    const {
-      onClickItem,
-      onMouseEnterItem,
-      onCancel,
-      onKeyDown,
-      onKeyDownInAction,
-      onFocus,
-      onMenuBlur,
-      onActionBlur,
-    } = this;
-    const { focusedIndex } = this.state;
     const {
       id,
       options,
@@ -329,7 +330,6 @@ class OptionMenuList extends Component {
       className,
       style,
       onBlur,
-      focusedIndex: focussed,
       onFocusItem,
       footer,
       onClickItem: onClick,
@@ -340,8 +340,95 @@ class OptionMenuList extends Component {
       return null;
     }
 
+    const {
+      onClickItem,
+      onMouseEnterItem,
+      onCancel,
+      onKeyDown,
+      onKeyDownInAction,
+      onFocus,
+      onMenuBlur,
+      onActionBlur,
+    } = this;
+
     const selectionSet = getSelectionSet(selected);
-    const focusedId = getFocusedId(focusedIndex, id, options);
+
+    delete rest.focusedIndex;
+    const { focusedIndex } = this.state;
+    const focusedId = getFocusedId(
+      focusedIndex,
+      id,
+      getFocusableOptions(options),
+    );
+
+    const renderListItems = (items, offset = 0) => {
+      const list = [];
+
+      items.forEach(item => {
+        if (Array.isArray(item.value)) {
+          const groupId = `group-${item.value
+            .map(child => child.value)
+            .join('-')}`;
+          const labelId = `${groupId}-label`;
+
+          list.push(
+            <ul
+              role="group"
+              aria-labelledby={labelId}
+              className="rc-menu-list-group"
+              id={groupId}
+              key={groupId}
+            >
+              {item.label && (
+                <OptionMenuListItem
+                  type="heading"
+                  disabled={item.disabled}
+                  id={labelId}
+                  key={labelId}
+                  onMouseEnter={() => onMouseEnterItem(null)}
+                >
+                  {item.label}
+                </OptionMenuListItem>
+              )}
+              {renderListItems(
+                item.value.map(child =>
+                  Object.assign(child, {
+                    disabled: item.disabled || child.disabled,
+                  }),
+                ),
+                list.length + offset,
+              )}
+            </ul>,
+          );
+          // eslint-disable-next-line no-param-reassign
+          offset += item.value.length - 1;
+        } else {
+          const index = list.length + offset;
+          list.push(
+            <OptionMenuListItem
+              id={getOptionId(id, item.value)}
+              key={item.value}
+              focused={index === focusedIndex}
+              selected={selectionSet.has(item.value)}
+              icon={item.icon}
+              svg={item.svg}
+              disabled={item.disabled}
+              onClick={() =>
+                item.disabled ? undefined : onClickItem(item.value)
+              }
+              onMouseEnter={() => onMouseEnterItem(index)}
+              ref={option => {
+                this.optionRefs[index] = option;
+              }}
+            >
+              {item.label}
+            </OptionMenuListItem>,
+          );
+        }
+      });
+
+      return list;
+    };
 
     const list = (
       <ul
@@ -359,24 +446,7 @@ class OptionMenuList extends Component {
         }}
         {...rest}
       >
-        {options.map(({ value, label, icon, svg, disabled }, index) => (
-          <OptionMenuListItem
-            id={getOptionId(id, value)}
-            key={value}
-            focused={index === focusedIndex}
-            selected={selectionSet.has(value)}
-            icon={icon}
-            svg={svg}
-            disabled={disabled}
-            onClick={disabled ? undefined : () => onClickItem(value)}
-            onMouseEnter={() => onMouseEnterItem(index)}
-            ref={option => {
-              this.optionRefs[index] = option;
-            }}
-          >
-            {label}
-          </OptionMenuListItem>
-        ))}
+        {renderListItems(options)}
       </ul>
     );