Improve option types

src/Fields/FieldWrapper.tsx

@@ -5,7 +5,6 @@ import {
   UseControllerProps,
   FieldPathValue,
   FieldPath,
-  UnpackNestedValue,
 } from 'react-hook-form';
 
 import { Form, FormItemProps } from '../Form';
@@ -14,20 +13,20 @@ import { useFieldContext } from './FieldProvider';
 
 export type FieldWrapperProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
+  TFieldPath extends FieldPath<TFieldValues>,
 > = {
   children: ReactNode;
-  controller: UseControllerProps<TFieldValues, TName>;
-  formItem?: FormItemProps<
-    UnpackNestedValue<FieldPathValue<TFieldValues, TName>>
-  >;
+  controller: UseControllerProps<TFieldValues, TFieldPath>;
+  formItem?: FormItemProps<FieldPathValue<TFieldValues, TFieldPath>>;
 };
 
 export function FieldWrapper<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
->(props: FieldWrapperProps<TFieldValues, TName>) {
-  const { fieldState } = useController<TFieldValues, TName>(props.controller);
+  TFieldPath extends FieldPath<TFieldValues>,
+>(props: FieldWrapperProps<TFieldValues, TFieldPath>) {
+  const { fieldState } = useController<TFieldValues, TFieldPath>(
+    props.controller,
+  );
 
   const { formItemProps } = useFieldContext();
 

src/Fields/SelectField.tsx

@@ -1,43 +1,45 @@
-import { BaseOptionType, DefaultOptionType } from 'antd/lib/select';
 import React from 'react';
 import {
   useController,
   FieldPath,
   FieldPathValue,
   FieldValues,
   UseControllerProps,
-  UnpackNestedValue,
 } from 'react-hook-form';
 
-import { Select, SelectProps } from '../Select';
+import { Select, SelectProps, MaybeGroupedInputOption } from '../Select';
 
 import { useFieldContext } from './FieldProvider';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
 
+type UnpackArray<T> = T extends Array<infer U> ? U : T;
+
 type SelectFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
-  TOption extends BaseOptionType | DefaultOptionType,
-> = UseControllerProps<TFieldValues, TName> &
-  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
-    component?: SelectProps<
-      UnpackNestedValue<FieldPathValue<TFieldValues, TName>>,
-      TOption
-    >;
+  TFieldPath extends FieldPath<TFieldValues>,
+  TFieldPathValue extends UnpackArray<FieldPathValue<TFieldValues, TFieldPath>>,
+  TOption extends MaybeGroupedInputOption<TFieldPathValue>,
+> = UseControllerProps<TFieldValues, TFieldPath> &
+  Pick<FieldWrapperProps<TFieldValues, TFieldPath>, 'formItem'> & {
+    component?: SelectProps<TFieldPathValue, TOption>;
   };
 
 export function SelectField<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-  TOption extends BaseOptionType | DefaultOptionType = DefaultOptionType,
+  TFieldPath extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TFieldPathValue extends UnpackArray<
+    FieldPathValue<TFieldValues, TFieldPath>
+  > = UnpackArray<FieldPathValue<TFieldValues, TFieldPath>>,
+  TOption extends
+    MaybeGroupedInputOption<TFieldPathValue> = MaybeGroupedInputOption<TFieldPathValue>,
 >({
   formItem,
   component,
   ...controller
-}: SelectFieldProps<TFieldValues, TName, TOption>) {
+}: SelectFieldProps<TFieldValues, TFieldPath, TFieldPathValue, TOption>) {
   const {
     field: { onChange, ...fieldProps },
-  } = useController<TFieldValues, TName>(controller);
+  } = useController<TFieldValues, TFieldPath>(controller);
 
   const { disabled } = useFieldContext();
 

src/Fields/index.stories.tsx

@@ -31,11 +31,12 @@ export default {
 type FormType = {
   autocomplete: string;
   checkbox: boolean;
-  checkboxGroup: Array<string>;
+  checkbox_group: Array<string>;
   input: string;
   input_number: number;
   radio_group: 1 | 2;
   select: 'a' | 'b';
+  select_multiple: Array<string>;
   switch: boolean;
   text_area: string;
   date_range: string;
@@ -117,43 +118,44 @@ export const NestedProviders: Story<FieldProviderProps> =
   };
 
 function AllFields() {
-  const formMethods = useFormContext<FormType>();
+  const { control } = useFormContext<FormType>();
+
   return (
     <Form>
       <AutocompleteField
         name="autocomplete"
-        control={formMethods.control}
+        control={control}
         formItem={{ label: 'Autocomplete' }}
         component={{
           options: ['foo', 'bar'].map(toFormInputOption),
         }}
       />
       <CheckboxField
         name="checkbox"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Checkbox',
         }}
       >
         Checkbox children
       </CheckboxField>
       <CheckboxGroupField
-        name="checkboxGroup"
-        control={formMethods.control}
+        name="checkbox_group"
+        control={control}
         formItem={{ label: 'CheckboxGroup' }}
         component={{ options: ['a', 'b'].map(toFormInputOption) }}
       />
       <InputField
         name="input"
         rules={{ required: 'You really need this', maxLength: 3 }}
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Input required',
         }}
       />
       <InputField
         name="input"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Input styled',
         }}
@@ -166,14 +168,14 @@ function AllFields() {
       <InputNumberField
         name="input_number"
         rules={{ required: 'Absolutely necessary' }}
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'InputNumber required',
         }}
       />
       <InputNumberField
         name="input_number"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'InputNumber styled',
         }}
@@ -184,7 +186,7 @@ function AllFields() {
       />
       <RadioGroupField
         name="radio_group"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'RadioGroup',
         }}
@@ -194,30 +196,41 @@ function AllFields() {
       />
       <SelectField
         name="select"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Select',
         }}
         component={{
-          options: ['a', 'b'].map(toFormInputOption),
+          options: (['a', 'b'] as const).map(toFormInputOption),
+        }}
+      />
+      <SelectField
+        name="select_multiple"
+        control={control}
+        formItem={{
+          label: 'Select Multiple',
+        }}
+        component={{
+          mode: 'tags',
+          options: ['x', 'y', 'z'].map(toFormInputOption),
         }}
       />
       <SwitchField
         name="switch"
-        control={formMethods.control}
+        control={control}
         formItem={{
           label: 'Switch',
         }}
       />
       <DatePickerField
         name="date_picker"
-        control={formMethods.control}
+        control={control}
         formItem={{ label: 'DatePicker' }}
         component={{ placeholder: 'Datum wählen' }}
       />
       <DateRangePickerField
         name="date_range"
-        control={formMethods.control}
+        control={control}
         formItem={{ label: 'DateRangePicker' }}
       />
       <TextAreaStory />

src/Form/formInput.ts

@@ -1,6 +1,9 @@
 import { ReactNode } from 'react';
 
-export type FormInputOption<TValue, TLabel extends ReactNode> = {
+export type FormInputOption<
+  TValue = unknown,
+  TLabel extends ReactNode = ReactNode,
+> = {
   value: TValue;
   label: TLabel;
   disabled?: boolean;

src/Select/index.stories.tsx

@@ -31,7 +31,7 @@ export const Multiple: Story<SelectProps> = function Multiple(args) {
   return <Default mode="multiple" {...args} />;
 };
 
-export const Group: Story<SelectProps> = function Group(args) {
+export const OptGroup: Story<SelectProps> = function OptGroup(args) {
   return (
     <Select defaultValue="lucy" style={{ width: 120 }} {...args}>
       <Select.OptGroup label="Guys">
@@ -43,10 +43,38 @@ export const Group: Story<SelectProps> = function Group(args) {
       <Select.OptGroup label="Gals">
         <Select.Option value="lucy">Lucy</Select.Option>
       </Select.OptGroup>
+      <Select.OptGroup label="Other" disabled>
+        <Select.Option value="juice">Juice</Select.Option>
+      </Select.OptGroup>
     </Select>
   );
 };
 
+export const OptionsGroup: Story<SelectProps> = function OptionsGroups(args) {
+  return (
+    <Select
+      defaultValue="lucy"
+      style={{ width: 120 }}
+      options={[
+        {
+          label: 'Guys',
+          options: [
+            { label: 'Jack', value: 'jack' },
+            { label: 'Henry', value: 'henry', disabled: true },
+          ],
+        },
+        { label: 'Gals', options: [{ label: 'Lucy', value: 'lucy' }] },
+        {
+          label: 'Other',
+          disabled: true,
+          options: [{ label: 'Juice', value: 'juice' }],
+        },
+      ]}
+      {...args}
+    />
+  );
+};
+
 export const CustomDropdown: Story<SelectProps> = function CustomDropdown(
   args,
 ) {