🤖 Merge PR DefinitelyTyped#49276 [react-select] Added group support t…

…o `isValidNewOption` for CreatableProps by @mathieumg

types/react-select/src/Creatable.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Select, { Props as SelectProps } from './Select';
-import { OptionsType, ValueType, ActionMeta, OptionTypeBase } from './types';
+import { OptionsType, GroupedOptionsType, ValueType, ActionMeta, OptionTypeBase } from './types';
 import { cleanValue } from './utils';
 import manageState from './stateManager';
 
@@ -14,7 +14,11 @@ export interface CreatableProps<OptionType extends OptionTypeBase> {
   formatCreateLabel?: (inputValue: string) => React.ReactNode;
   /* Determines whether the "create new ..." option should be displayed based on
      the current input value, select value and options array. */
-  isValidNewOption?: (inputValue: string, value: ValueType<OptionType>, options: OptionsType<OptionType>) => boolean;
+  isValidNewOption?: (
+    inputValue: string,
+    value: ValueType<OptionType>,
+    options: OptionsType<OptionType> | GroupedOptionsType<OptionType>,
+   ) => boolean;
   /* Returns the data for the new option when it is created. Used to display the
      value, and is passed to `onChange`. */
   getNewOptionData?: (inputValue: string, optionLabel: React.ReactNode) => OptionType;

types/react-select/test/examples/CreatableGroup.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import CreatableSelect from 'react-select/creatable';
+import { ColourOption, groupedOptions, FlavourOption } from '../data';
+
+export default class CreatableGroup extends React.Component {
+  handleIsValidNewOption = (inputValue: any, value: any, groups: any) => {
+    for (const group of groups) {
+      console.group(`Group: ${group.label}`);
+      for (const option of group.options) {
+        console.log(`Option: ${option.label}`);
+      }
+      console.groupEnd();
+    }
+
+    return true;
+  }
+  render() {
+    return (
+      <CreatableSelect<ColourOption | FlavourOption>
+        isValidNewOption={this.handleIsValidNewOption}
+        options={groupedOptions}
+      />
+    );
+  }
+}

types/react-select/tsconfig.json

@@ -39,6 +39,7 @@
         "test/examples/ControlledMenu.tsx",
         "test/examples/CreatableAdvanced.tsx",
         "test/examples/CreatableInputOnly.tsx",
+        "test/examples/CreatableGroup.tsx",
         "test/examples/CreatableMulti.tsx",
         "test/examples/CreatableSingle.tsx",
         "test/examples/CreateFilter.tsx",