@patternfly/react-core 5.0.0-alpha.106 → 5.0.0-alpha.108

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "5.0.0-alpha.106",
+  "version": "5.0.0-alpha.108",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -71,5 +71,5 @@
     "react": "^17 || ^18",
     "react-dom": "^17 || ^18"
   },
-  "gitHead": "5627bdc7f27951dc9485026dd832585760749a66"
+  "gitHead": "c3fe2fb841eabc1aded749983b71c487fc9cdf0c"
 }

package/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -114,39 +114,37 @@ exports[`With popover opened 1`] = `
                     >
                       Month
                     </span>
-                    <div>
-                      <button
-                        aria-expanded="false"
-                        class="pf-v5-c-menu-toggle"
-                        style="width: 140px;"
-                        type="button"
+                    <button
+                      aria-expanded="false"
+                      class="pf-v5-c-menu-toggle"
+                      style="width: 140px;"
+                      type="button"
+                    >
+                      <span
+                        class="pf-v5-c-menu-toggle__text"
+                      >
+                        December
+                      </span>
+                      <span
+                        class="pf-v5-c-menu-toggle__controls"
                       >
                         <span
-                          class="pf-v5-c-menu-toggle__text"
-                        >
-                          December
-                        </span>
-                        <span
-                          class="pf-v5-c-menu-toggle__controls"
+                          class="pf-v5-c-menu-toggle__toggle-icon"
                         >
-                          <span
-                            class="pf-v5-c-menu-toggle__toggle-icon"
+                          <svg
+                            aria-hidden="true"
+                            class="pf-v5-svg"
+                            fill="currentColor"
+                            role="img"
+                            viewBox="0 0 320 512"
                           >
-                            <svg
-                              aria-hidden="true"
-                              class="pf-v5-svg"
-                              fill="currentColor"
-                              role="img"
-                              viewBox="0 0 320 512"
-                            >
-                              <path
-                                d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                              />
-                            </svg>
-                          </span>
+                            <path
+                              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                            />
+                          </svg>
                         </span>
-                      </button>
-                    </div>
+                      </span>
+                    </button>
                   </div>
                 </div>
                 <div
@@ -813,4 +811,4 @@ exports[`disabled date picker 1`] = `
     </div>
   </div>
 </DocumentFragment>
-`;
+`;

package/src/components/DatePicker/examples/DatePicker.md

@@ -4,7 +4,6 @@ section: components
 subsection: date-and-time
 cssPrefix: pf-c-date-picker
 propComponents: ['DatePicker', 'CalendarFormat', 'DatePickerRef']
-beta: true
 ---
 
 ## Examples

package/src/components/Dropdown/Dropdown.tsx

@@ -19,6 +19,13 @@ export interface DropdownPopperProps {
   enableFlip?: boolean;
 }
 
+export interface DropdownToggleProps {
+  /**  Dropdown toggle node. */
+  toggleNode: React.ReactNode;
+  /** Reference to the toggle. */
+  toggleRef?: React.RefObject<HTMLButtonElement>;
+}
+
 /**
  * See the Menu documentation for additional props that may be passed.
  */
@@ -27,16 +34,14 @@ export interface DropdownProps extends MenuProps, OUIAProps {
   children?: React.ReactNode;
   /** Classes applied to root element of dropdown. */
   className?: string;
-  /** Renderer for a custom dropdown toggle. Forwards a ref to the toggle. */
-  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
+  /** Dropdown toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property. */
+  toggle: DropdownToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
   /** Flag to indicate if menu is opened.*/
   isOpen?: boolean;
+  /** Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. */
+  shouldFocusToggleOnSelect?: boolean;
   /** Function callback called when user selects item. */
-  onSelect?: (
-    event?: React.MouseEvent<Element, MouseEvent>,
-    itemId?: string | number,
-    toggleRef?: React.RefObject<any>
-  ) => void;
+  onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
   /** Callback to allow the dropdown component to change the open state of the menu.
    * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
   onOpenChange?: (isOpen: boolean) => void;
@@ -62,6 +67,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onSelect,
   isOpen,
   toggle,
+  shouldFocusToggleOnSelect = false,
   onOpenChange,
   isPlain,
   isScrollable,
@@ -73,10 +79,15 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
+  const localToggleRef = React.useRef<HTMLButtonElement>();
   const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const toggleRef =
+    typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
+      ? localToggleRef
+      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
@@ -119,13 +130,16 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef, onOpenChange]);
+  }, [isOpen, menuRef, toggleRef, onOpenChange]);
 
   const menu = (
     <Menu
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => onSelect && onSelect(event, itemId, toggleRef)}
+      onSelect={(event, itemId) => {
+        onSelect && onSelect(event, itemId);
+        shouldFocusToggleOnSelect && toggleRef.current.focus();
+      }}
       isPlain={isPlain}
       isScrollable={isScrollable}
       {...props}
@@ -136,7 +150,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   );
   return (
     <Popper
-      trigger={toggle(toggleRef)}
+      trigger={typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode}
       triggerRef={toggleRef}
       popper={menu}
       popperRef={menuRef}

package/src/components/Dropdown/examples/Dropdown.md

@@ -3,7 +3,16 @@ id: Dropdown
 section: components
 subsection: menus
 cssPrefix: pf-c-menu
-propComponents: ['Dropdown', DropdownGroup, 'DropdownItem', 'DropdownList', 'MenuToggle', 'DropdownPopperProps']
+propComponents:
+  [
+    'Dropdown',
+    'DropdownGroup',
+    'DropdownItem',
+    'DropdownList',
+    'MenuToggle',
+    'DropdownToggleProps',
+    'DropdownPopperProps'
+  ]
 ---
 
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

package/src/components/Dropdown/examples/DropdownBasic.tsx

@@ -8,15 +8,10 @@ export const DropdownBasic: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -30,6 +25,7 @@ export const DropdownBasic: React.FunctionComponent = () => {
         </MenuToggle>
       )}
       ouiaId="BasicDropdown"
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
         <DropdownItem itemId={0} key="action">

package/src/components/Dropdown/examples/DropdownWithDescriptions.tsx

@@ -8,15 +8,10 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -29,6 +24,7 @@ export const DropdownWithDescriptions: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
         <DropdownItem itemId={0} key="action" description="This is a description">

package/src/components/Dropdown/examples/DropdownWithGroups.tsx

@@ -16,15 +16,10 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -37,6 +32,7 @@ export const DropdownWithGroups: React.FunctionComponent = () => {
           Dropdown
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownGroup>
         <DropdownList>

package/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx

@@ -9,15 +9,10 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
     setIsOpen(!isOpen);
   };
 
-  const onSelect = (
-    _event: React.MouseEvent<Element, MouseEvent> | undefined,
-    itemId: string | number | undefined,
-    toggleRef: React.RefObject<any>
-  ) => {
+  const onSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, itemId: string | number | undefined) => {
     // eslint-disable-next-line no-console
     console.log('selected', itemId);
     setIsOpen(false);
-    toggleRef?.current.focus();
   };
 
   return (
@@ -36,6 +31,7 @@ export const DropdownWithKebab: React.FunctionComponent = () => {
           <EllipsisVIcon />
         </MenuToggle>
       )}
+      shouldFocusToggleOnSelect
     >
       <DropdownList>
         <DropdownItem itemId={0} key="action">

package/src/components/Icon/examples/Icon.md

@@ -3,7 +3,6 @@ id: Icon
 section: components
 cssPrefix: pf-c-icon
 propComponents: ['Icon']
-beta: true
 ---
 
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';

package/src/components/Menu/MenuItem.tsx

@@ -24,7 +24,7 @@ export interface MenuItemProps extends Omit<React.HTMLProps<HTMLLIElement>, 'onC
   itemId?: any;
   /** Target navigation link. Should not be used if the flyout prop is defined. */
   to?: string;
-  /** @beta Flag indicating the item has a checkbox */
+  /** Flag indicating the item has a checkbox */
   hasCheckbox?: boolean;
   /** Flag indicating whether the item is active */
   isActive?: boolean;

package/src/components/Menu/examples/Menu.md

@@ -81,7 +81,7 @@ Use the `description` property to add short descriptive text below any menu item
 
 Use the `hasCheck` property to add a checkbox to a `<MenuItem>`. Use the `isSelected` property to indicate when a `<MenuItem>` is selected.
 
-```ts file="./MenuWithCheckbox.tsx" isBeta
+```ts file="./MenuWithCheckbox.tsx"
 
 ```
 

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -54,7 +54,7 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
-  /** @beta Additional content related to the status item. */
+  /** Additional content related to the status item. */
   progressHelperText?: React.ReactNode;
 }
 

package/src/components/Progress/Progress.tsx

@@ -42,7 +42,7 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   'aria-label'?: string;
   /** Associates the ProgressBar with it's label for accessibility purposes. Required when title not used */
   'aria-labelledby'?: string;
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/ProgressContainer.tsx

@@ -54,7 +54,7 @@ export interface ProgressContainerProps extends Omit<React.HTMLProps<HTMLDivElem
     | 'left-end'
     | 'right-start'
     | 'right-end';
-  /** @beta Content which can be used to convey additional information about the progress component.
+  /** Content which can be used to convey additional information about the progress component.
    * We recommend the helper text component as it was designed for this purpose.
    */
   helperText?: React.ReactNode;

package/src/components/Progress/examples/Progress.md

@@ -76,5 +76,5 @@ propComponents: ['Progress']
 ```
 
 ### Helper text
-```ts file="./ProgressHelperText.tsx" isBeta
+```ts file="./ProgressHelperText.tsx"
 ```

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -3,7 +3,6 @@ id: Progress stepper
 section: components
 cssPrefix: pf-c-progress-stepper
 propComponents: ['ProgressStepper', 'ProgressStep']
-beta: true
 ---
 
 import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';

package/src/components/SearchInput/examples/SearchInput.md

@@ -3,7 +3,6 @@ id: 'Search input'
 section: components
 cssPrefix: 'pf-c-search-input'
 propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpandable']
-beta: true
 ---
 
 import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';

package/src/components/Select/Select.tsx

@@ -1,9 +1,35 @@
 import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { Menu, MenuContent, MenuProps } from '../Menu';
-import { Popper, PopperProps } from '../../helpers/Popper/Popper';
+import { Popper } from '../../helpers/Popper/Popper';
 import { getOUIAProps, OUIAProps, getDefaultOUIAId } from '../../helpers';
 
+export interface SelectPopperProps {
+  /** Vertical direction of the popper. If enableFlip is set to true, this will set the initial direction before the popper flips. */
+  direction?: 'up' | 'down';
+  /** Horizontal position of the popper */
+  position?: 'right' | 'left' | 'center';
+  /** Custom width of the popper. If the value is "trigger", it will set the width to the select toggle's width */
+  width?: string | 'trigger';
+  /** Minimum width of the popper. If the value is "trigger", it will set the min width to the select toggle's width */
+  minWidth?: string | 'trigger';
+  /** Maximum width of the popper. If the value is "trigger", it will set the max width to the select toggle's width */
+  maxWidth?: string | 'trigger';
+  /** Enable to flip the popper when it reaches the boundary */
+  enableFlip?: boolean;
+}
+
+export interface SelectToggleProps {
+  /**  Select toggle node. */
+  toggleNode: React.ReactNode;
+  /** Reference to the toggle. */
+  toggleRef?: React.RefObject<HTMLButtonElement>;
+}
+
+/**
+ * See the Menu documentation for additional props that may be passed.
+ */
+
 export interface SelectProps extends MenuProps, OUIAProps {
   /** Anything which can be rendered in a select */
   children?: React.ReactNode;
@@ -13,13 +39,17 @@ export interface SelectProps extends MenuProps, OUIAProps {
   isOpen?: boolean;
   /** Single itemId for single select menus, or array of itemIds for multi select. You can also specify isSelected on the SelectOption. */
   selected?: any | any[];
-  /** Renderer for a custom select toggle. Forwards a ref to the toggle. */
-  toggle: (toggleRef: React.RefObject<any>) => React.ReactNode;
+  /** Select toggle. The toggle should either be a renderer function which forwards the given toggle ref, or a direct ReactNode that should be passed along with the toggleRef property. */
+  toggle: SelectToggleProps | ((toggleRef: React.RefObject<any>) => React.ReactNode);
+  /** Flag indicating the toggle should be focused after a selection. If this use case is too restrictive, the optional toggleRef property with a node toggle may be used to control focus. */
+  shouldFocusToggleOnSelect?: boolean;
   /** Function callback when user selects an option. */
   onSelect?: (event?: React.MouseEvent<Element, MouseEvent>, itemId?: string | number) => void;
   /** Callback to allow the select component to change the open state of the menu.
-   * Triggered by clicking outside of the menu, or by pressing either tab or escape. */
+   * Triggered by clicking outside of the menu, or by pressing any keys specificed in onOpenChangeKeys. */
   onOpenChange?: (isOpen: boolean) => void;
+  /** @beta Keys that trigger onOpenChange, defaults to tab and escape. It is highly recommended to include Escape in the array, while Tab may be omitted if the menu contains non-menu items that are focusable. */
+  onOpenChangeKeys?: string[];
   /** Indicates if the select should be without the outer box-shadow */
   isPlain?: boolean;
   /** @hide Forwarded ref */
@@ -29,7 +59,7 @@ export interface SelectProps extends MenuProps, OUIAProps {
   /** @beta Determines the accessible role of the select. For a checkbox select pass in "menu". */
   role?: string;
   /** Additional properties to pass to the popper */
-  popperProps?: Partial<PopperProps>;
+  popperProps?: SelectPopperProps;
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -39,7 +69,9 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   isOpen,
   selected,
   toggle,
+  shouldFocusToggleOnSelect = false,
   onOpenChange,
+  onOpenChangeKeys = ['Escape', 'Tab'],
   isPlain,
   innerRef,
   zIndex = 9999,
@@ -48,18 +80,24 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
-  const toggleRef = React.useRef<HTMLButtonElement>();
-  const containerRef = React.useRef<HTMLDivElement>();
+  const localToggleRef = React.useRef<HTMLButtonElement>();
 
   const menuRef = (innerRef as React.RefObject<HTMLDivElement>) || localMenuRef;
+  const toggleRef =
+    typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
+      ? localToggleRef
+      : (toggle?.toggleRef as React.RefObject<HTMLButtonElement>);
+
   React.useEffect(() => {
     const handleMenuKeys = (event: KeyboardEvent) => {
       // Close the menu on tab or escape if onOpenChange is provided
       if (
-        (isOpen && onOpenChange && menuRef.current?.contains(event.target as Node)) ||
-        toggleRef.current?.contains(event.target as Node)
+        isOpen &&
+        onOpenChange &&
+        (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node))
       ) {
-        if (event.key === 'Escape' || event.key === 'Tab') {
+        if (onOpenChangeKeys.includes(event.key)) {
+          event.preventDefault();
           onOpenChange(false);
           toggleRef.current?.focus();
         }
@@ -90,14 +128,17 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
       window.removeEventListener('keydown', handleMenuKeys);
       window.removeEventListener('click', handleClick);
     };
-  }, [isOpen, menuRef, onOpenChange]);
+  }, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
 
   const menu = (
     <Menu
       role={role}
       className={css(className)}
       ref={menuRef}
-      onSelect={(event, itemId) => onSelect && onSelect(event, itemId)}
+      onSelect={(event, itemId) => {
+        onSelect && onSelect(event, itemId);
+        shouldFocusToggleOnSelect && toggleRef.current.focus();
+      }}
       isPlain={isPlain}
       selected={selected}
       {...getOUIAProps(
@@ -111,18 +152,15 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
     </Menu>
   );
   return (
-    <div ref={containerRef}>
-      <Popper
-        trigger={toggle(toggleRef)}
-        triggerRef={toggleRef}
-        popper={menu}
-        popperRef={menuRef}
-        appendTo={containerRef.current || undefined}
-        isVisible={isOpen}
-        zIndex={zIndex}
-        {...popperProps}
-      />
-    </div>
+    <Popper
+      trigger={typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode}
+      triggerRef={toggleRef}
+      popper={menu}
+      popperRef={menuRef}
+      isVisible={isOpen}
+      zIndex={zIndex}
+      {...popperProps}
+    />
   );
 };
 

package/src/components/Select/SelectGroup.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { MenuGroupProps, MenuGroup } from '../Menu';
 
+/**
+ * See the MenuGroup section of the Menu documentation for additional props that may be passed.
+ */
 export interface SelectGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Anything which can be rendered in a select group */
   children: React.ReactNode;

package/src/components/Select/SelectOption.tsx

@@ -2,11 +2,17 @@ import React from 'react';
 import { css } from '@patternfly/react-styles';
 import { MenuItemProps, MenuItem } from '../Menu';
 
+/**
+ * See the MenuItem section of the Menu documentation for additional props that may be passed.
+ */
+
 export interface SelectOptionProps extends Omit<MenuItemProps, 'ref'> {
   /** Anything which can be rendered in a select option */
   children?: React.ReactNode;
   /** Classes applied to root element of select option */
   className?: string;
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<HTMLAnchorElement | HTMLButtonElement>;
   /** Identifies the component in the Select onSelect callback */
   itemId?: any;
   /** Indicates the option has a checkbox */
@@ -17,15 +23,29 @@ export interface SelectOptionProps extends Omit<MenuItemProps, 'ref'> {
   isSelected?: boolean;
   /** Indicates the option is focused */
   isFocused?: boolean;
+  /** Render an external link icon on focus or hover, and set the link's
+   * "target" attribute to a value of "_blank".
+   */
+  isExternalLink?: boolean;
+  /** Render option with icon */
+  icon?: React.ReactNode;
+  /** Description of the option */
+  description?: React.ReactNode;
 }
 
-export const SelectOption: React.FunctionComponent<MenuItemProps> = ({
+const SelectOptionBase: React.FunctionComponent<MenuItemProps> = ({
   children,
   className,
+  innerRef,
   ...props
 }: SelectOptionProps) => (
-  <MenuItem className={css(className)} {...props}>
+  <MenuItem ref={innerRef} className={css(className)} {...props}>
     {children}
   </MenuItem>
 );
+
+export const SelectOption = React.forwardRef((props: SelectOptionProps, ref: React.Ref<any>) => (
+  <SelectOptionBase {...props} innerRef={ref} />
+));
+
 SelectOption.displayName = 'SelectOption';