Fix Select types

src/components/RegionSelect.tsx

@@ -1,7 +1,13 @@
+import gd from "date-fns/locale/gd";
 import { useAtom } from "jotai";
 import { useTranslations } from "next-intl";
 import { IoAdd } from "react-icons/io5";
-import { GroupBase, OptionsOrGroups, SingleValue } from "react-select";
+import {
+  GroupBase,
+  OnChangeValue,
+  OptionsOrGroups,
+  SingleValue,
+} from "react-select";
 
 import { regionFilterAtom } from "@/atoms";
 import { BaseOption, Select, SelectProps } from "@/components/form/Select";
@@ -9,7 +15,10 @@ import { useZones } from "@/hooks/useZones";
 import { Zone } from "@/server/myZones";
 import { useRouter } from "@/utils/navigation";
 
-type RegionSelectProps = Omit<SelectProps, "options" | "value" | "onChange"> & {
+type RegionSelectProps = Omit<
+  SelectProps<false, string, Zone | null>,
+  "options" | "value" | "onChange"
+> & {
   syncTitle: string;
 };
 
@@ -55,7 +64,9 @@ export const RegionSelect = ({
     },
   ];
 
-  const onChange = (option: SingleValue<RegionOption>) => {
+  const onChange = (
+    option: OnChangeValue<BaseOption<string, Zone | null>, false>,
+  ) => {
     if (!option) return;
     if (option.value === "create") {
       router.push("/zones/create");
@@ -99,9 +110,10 @@ export const RegionSelect = ({
           ? o.value === regionFilter
           : o.value === regionFilter.id,
       )}
-      formatGroupLabel={(g) => formatGroupLabel(g as GroupedOption)}
-      formatOptionLabel={(o) => formatOptionLabel(o as RegionOption)}
-      onChange={(v) => onChange(v as SingleValue<RegionOption>)}
+      isMulti={false}
+      formatGroupLabel={formatGroupLabel}
+      formatOptionLabel={formatOptionLabel}
+      onChange={onChange}
       {...selectProps}
     />
   );

src/components/form/AsyncSelectField.tsx

@@ -15,8 +15,7 @@ import AsyncSelect from "react-select/async";
 import { Prettify } from "@/types";
 
 import { Field, GenericFieldProps } from "./Field";
-import { classNames } from "./Select";
-import { BaseOption } from "./SelectField";
+import { BaseOption, classNames } from "./Select";
 
 export type AsyncSelectFieldProps<
   TFieldValues extends FieldValues = FieldValues,

src/components/form/Select.tsx

@@ -62,10 +62,7 @@ export type SelectProps<
   T = string,
   D = unknown,
 > = Prettify<
-  Omit<
-    Props<BaseOption<T, D>, IsMulti, GroupBase<BaseOption<T, D>>>,
-    "classNames"
-  > & {
+  Omit<Props<BaseOption<T, D>, IsMulti>, "classNames"> & {
     required?: boolean;
     separators?: boolean;
     hasError?: boolean;

src/components/form/SelectField.tsx

@@ -10,18 +10,11 @@ import {
 } from "react-hook-form";
 import { GroupBase, OnChangeValue } from "react-select";
 
-import { Select, SelectProps } from "@/components/form/Select";
+import { BaseOption, Select, SelectProps } from "@/components/form/Select";
 import { Prettify } from "@/types";
 
 import { Field, GenericFieldProps } from "./Field";
 
-export type BaseOption<T = string, D = unknown> = {
-  value: T;
-  label: string | JSX.Element;
-  disabled?: boolean;
-  data?: D;
-};
-
 export type SelectFieldProps<
   TFieldValues extends FieldValues = FieldValues,
   TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,