fix: allow disabled

Author: spawnia

src/Fields/SelectField.tsx

@@ -7,7 +7,7 @@ import {
   UseControllerProps,
 } from 'react-hook-form';
 
-import { OptionType, GroupedOptionType, Select, SelectProps } from '../Select';
+import { Select, SelectProps, OptionType } from '../Select';
 
 import { useFieldContext } from './FieldProvider';
 import { FieldWrapper, FieldWrapperProps } from './FieldWrapper';
@@ -16,9 +16,7 @@ type SelectFieldProps<
   TFieldValues extends FieldValues,
   TFieldPath extends FieldPath<TFieldValues>,
   TFieldPathValue extends FieldPathValue<TFieldValues, TFieldPath>,
-  TOption extends
-    | OptionType<TFieldPathValue>
-    | GroupedOptionType<TFieldPathValue>,
+  TOption extends OptionType<TFieldPathValue>,
 > = UseControllerProps<TFieldValues, TFieldPath> &
   Pick<FieldWrapperProps<TFieldValues, TFieldPath>, 'formItem'> & {
     component?: SelectProps<TFieldPathValue, TOption>;
@@ -31,9 +29,7 @@ export function SelectField<
     TFieldValues,
     TFieldPath
   > = FieldPathValue<TFieldValues, TFieldPath>,
-  TOption extends
-    | OptionType<TFieldPathValue>
-    | GroupedOptionType<TFieldPathValue> = OptionType<TFieldPathValue>,
+  TOption extends OptionType<TFieldPathValue> = OptionType<TFieldPathValue>,
 >({
   formItem,
   component,

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,
 ) {

src/Select/index.tsx

@@ -12,24 +12,28 @@ import styled from 'styled-components';
 
 import { fontSizeFromTheme } from '../styled-utils';
 
-export type OptionType<TValue = unknown> = {
+export type OptionType<TValue = unknown> =
+  | ValueOptionType<TValue>
+  | GroupedOptionType<TValue>;
+
+export type ValueOptionType<TValue = unknown> = {
   label: ReactNode;
   value: TValue;
+  disabled?: boolean;
 };
 
 /** As described in https://4x.ant.design/components/select/#components-select-demo-optgroup. */
 export type GroupedOptionType<TValue = unknown> = {
   label: ReactNode;
-  options: Array<OptionType<TValue>>;
+  options: Array<ValueOptionType<TValue>>;
+  disabled?: boolean;
 };
 
 export type { FilterFunc as FilterOptionFunction } from 'rc-select/es/Select';
 
 export type SelectProps<
   TValue = unknown,
-  TOption extends
-    | OptionType<TValue>
-    | GroupedOptionType<TValue> = OptionType<TValue>,
+  TOption extends OptionType<TValue> = OptionType<TValue>,
 > = AntdSelectProps<TValue, TOption> & RefAttributes<BaseSelectRef>;
 
 const StyledSelect = styled(AntdSelect)`
@@ -58,10 +62,7 @@ const StyledDropdown = styled.div`
   }
 `;
 
-function SelectInner<
-  TValue,
-  TOptionType extends OptionType<TValue> | GroupedOptionType<TValue>,
->(
+function SelectInner<TValue, TOptionType extends OptionType<TValue>>(
   { children, dropdownRender, ...props }: SelectProps<TValue, TOptionType>,
   ref: ForwardedRef<BaseSelectRef>,
 ) {
@@ -87,9 +88,7 @@ function SelectInner<
 
 export const Select = forwardRef(SelectInner) as unknown as (<
   TValue = unknown,
-  TOptionType extends
-    | OptionType<TValue>
-    | GroupedOptionType<TValue> = OptionType<TValue>,
+  TOptionType extends OptionType<TValue> = OptionType<TValue>,
 >(
   props: SelectProps<TValue, TOptionType> & RefAttributes<BaseSelectRef>,
 ) => ReactElement) & {