fix: OptionType and GroupedOptionType with generics

Author: spawnia

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,47 @@
-import { DefaultOptionType } from 'antd/lib/select';
 import React from 'react';
 import {
   useController,
   FieldPath,
   FieldPathValue,
   FieldValues,
   UseControllerProps,
-  UnpackNestedValue,
 } from 'react-hook-form';
 
-import { GroupedOptionType, Select, SelectProps } from '../Select';
+import { OptionType, GroupedOptionType, Select, SelectProps } from '../Select';
 
 import { useFieldContext } from './FieldProvider';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
 
 type SelectFieldProps<
   TFieldValues extends FieldValues,
-  TName extends FieldPath<TFieldValues>,
-  TOption extends DefaultOptionType | GroupedOptionType,
-> = UseControllerProps<TFieldValues, TName> &
-  Pick<FieldWrapperProps<TFieldValues, TName>, 'formItem'> & {
-    component?: SelectProps<
-      UnpackNestedValue<FieldPathValue<TFieldValues, TName>>,
-      TOption
-    >;
+  TFieldPath extends FieldPath<TFieldValues>,
+  TFieldPathValue extends FieldPathValue<TFieldValues, TFieldPath>,
+  TOption extends
+    | OptionType<TFieldPathValue>
+    | GroupedOptionType<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 DefaultOptionType | GroupedOptionType = DefaultOptionType,
+  TFieldPath extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TFieldPathValue extends FieldPathValue<
+    TFieldValues,
+    TFieldPath
+  > = FieldPathValue<TFieldValues, TFieldPath>,
+  TOption extends
+    | OptionType<TFieldPathValue>
+    | GroupedOptionType<TFieldPathValue> = OptionType<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

@@ -199,7 +199,7 @@ function AllFields() {
           label: 'Select',
         }}
         component={{
-          options: ['a', 'b'].map(toFormInputOption),
+          options: (['a', 'b'] as const).map(toFormInputOption),
         }}
       />
       <SwitchField

src/Select/index.tsx

@@ -1,31 +1,36 @@
 import { Select as AntdSelect, SelectProps as AntdSelectProps } from 'antd';
-import { DefaultOptionType } from 'antd/lib/select';
 import { BaseSelectRef } from 'rc-select';
 import React, {
   ForwardedRef,
   forwardRef,
   ReactElement,
+  ReactNode,
   RefAttributes,
   useCallback,
 } from 'react';
 import styled from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';
 
-/** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
-export type GroupedOptionType = {
-  label: string;
-  options: Array<DefaultOptionType>;
+export type OptionType<TValue = unknown> = {
+  label: ReactNode;
+  value: TValue;
 };
 
-export type { DefaultOptionType } from 'antd/lib/select';
+/** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
+export type GroupedOptionType<TValue = unknown> = {
+  label: ReactNode;
+  options: Array<OptionType<TValue>>;
+};
 
 export type { FilterFunc as FilterOptionFunction } from 'rc-select/es/Select';
 
 export type SelectProps<
-  ValueType = unknown,
-  OptionType extends DefaultOptionType | GroupedOptionType = DefaultOptionType,
-> = AntdSelectProps<ValueType, OptionType> & RefAttributes<BaseSelectRef>;
+  TValue = unknown,
+  TOption extends
+    | OptionType<TValue>
+    | GroupedOptionType<TValue> = OptionType<TValue>,
+> = AntdSelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>;
 
 const StyledSelect = styled(AntdSelect)`
   &,
@@ -54,10 +59,10 @@ const StyledDropdown = styled.div`
 `;
 
 function SelectInner<
-  ValueType,
-  OptionType extends DefaultOptionType | GroupedOptionType,
+  TValue,
+  TOptionType extends OptionType<TValue> | GroupedOptionType<TValue>,
 >(
-  { children, dropdownRender, ...props }: SelectProps<ValueType, OptionType>,
+  { children, dropdownRender, ...props }: SelectProps<TValue, TOptionType>,
   ref: ForwardedRef<BaseSelectRef>,
 ) {
   const styledDropdownRender = useCallback(
@@ -70,7 +75,7 @@ function SelectInner<
   );
 
   return (
-    <StyledSelect<ValueType, OptionType>
+    <StyledSelect<TValue, TOptionType>
       ref={ref}
       dropdownRender={styledDropdownRender}
       {...props}
@@ -82,9 +87,11 @@ function SelectInner<
 
 export const Select = forwardRef(SelectInner) as unknown as (<
   TValue = unknown,
-  TOption extends DefaultOptionType | GroupedOptionType = DefaultOptionType,
+  TOptionType extends
+    | OptionType<TValue>
+    | GroupedOptionType<TValue> = OptionType<TValue>,
 >(
-  props: SelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>,
+  props: SelectProps<TValue, TOptionType> & RefAttributes<BaseSelectRef>,
 ) => ReactElement) & {
   Option: typeof AntdSelect.Option;
   OptGroup: typeof AntdSelect.OptGroup;