Add new getGroupOptions prop

.changeset/tender-turkeys-burn.md

@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Add `getGroupOptions` prop

packages/react-select/src/Select.tsx

@@ -36,6 +36,7 @@ import {
   getOptionLabel as getOptionLabelBuiltin,
   getOptionValue as getOptionValueBuiltin,
   isOptionDisabled as isOptionDisabledBuiltin,
+  getGroupOptions as getGroupOptionsBuiltin,
 } from './builtins';
 
 import { defaultComponents, SelectComponentsConfig } from './components/index';
@@ -53,6 +54,7 @@ import {
   FocusDirection,
   GetOptionLabel,
   GetOptionValue,
+  GetGroupOptions,
   GroupBase,
   InputActionMeta,
   MenuPlacement,
@@ -163,6 +165,8 @@ export interface Props<
   getOptionLabel: GetOptionLabel<Option>;
   /** Resolves option data to a string to compare options and specify value attributes */
   getOptionValue: GetOptionValue<Option>;
+  /** Resolves option data to identify group and access group options */
+  getGroupOptions: GetGroupOptions<Option, Group>,
   /** Hide the selected option from the menu */
   hideSelectedOptions?: boolean;
   /** The id to set on the SelectContainer component. */
@@ -292,6 +296,7 @@ export const defaultProps = {
   formatGroupLabel: formatGroupLabelBuiltin,
   getOptionLabel: getOptionLabelBuiltin,
   getOptionValue: getOptionValueBuiltin,
+  getGroupOptions: getGroupOptionsBuiltin,
   isDisabled: false,
   isLoading: false,
   isMulti: false,
@@ -394,24 +399,26 @@ function buildCategorizedOptions<
 ): CategorizedGroupOrOption<Option, Group>[] {
   return props.options
     .map((groupOrOption, groupOrOptionIndex) => {
-      if ('options' in groupOrOption) {
-        const categorizedOptions = groupOrOption.options
+      const groupOptions = props.getGroupOptions(groupOrOption);
+
+      if (groupOptions !== null) {
+        const categorizedOptions = groupOptions
           .map((option, optionIndex) =>
             toCategorizedOption(props, option, selectValue, optionIndex)
           )
           .filter((categorizedOption) => isFocusable(props, categorizedOption));
         return categorizedOptions.length > 0
           ? {
               type: 'group' as const,
-              data: groupOrOption,
+              data: groupOrOption as Group,
               options: categorizedOptions,
               index: groupOrOptionIndex,
             }
           : undefined;
       }
       const categorizedOption = toCategorizedOption(
         props,
-        groupOrOption,
+        groupOrOption as Option,
         selectValue,
         groupOrOptionIndex
       );

packages/react-select/src/builtins.ts

@@ -12,3 +12,6 @@ export const getOptionValue = <Option>(option: Option): string =>
 
 export const isOptionDisabled = <Option>(option: Option): boolean =>
   !!(option as { isDisabled?: unknown }).isDisabled;
+
+export const getGroupOptions = <Option, Group extends GroupBase<Option>>(groupOrOption: Option|Group): readonly Option[]|null =>
+  'options' in groupOrOption ? groupOrOption.options as readonly Option[] : null;

packages/react-select/src/types.ts

@@ -196,5 +196,6 @@ export type FocusDirection =
 
 export type GetOptionLabel<Option> = (option: Option) => string;
 export type GetOptionValue<Option> = (option: Option) => string;
+export type GetGroupOptions<Option, Group extends GroupBase<Option>> = (groupOrOption: Option | Group) => readonly Option[]|null;
 
 export type CSSObjectWithLabel = CSSObject & { label?: string };