feat: extend select props in select component in react kit (#823)

* feat: extend select props in select component in react kit
bosonprotocol · Oct 30, 2024 · a39d82d · a39d82d
1 parent 71dd801
commit a39d82d
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 15 deletions.
diff --git a/packages/react-kit/src/components/form/Select.tsx b/packages/react-kit/src/components/form/Select.tsx
@@ -125,15 +125,6 @@ export default function SelectComponent<M extends boolean>({
   const displayError =
     typeof displayErrorMessage === "string" && displayErrorMessage !== "";
 
-  const handleChange = (
-    option: Parameters<NonNullable<typeof onChange>>[0]
-  ) => {
-    if (!meta.touched) {
-      helpers.setTouched(true);
-    }
-    helpers.setValue(option);
-    onChange?.(option);
-  };
   const handleBlur = () => {
     if (!meta.touched) {
       helpers.setTouched(true);
@@ -150,7 +141,13 @@ export default function SelectComponent<M extends boolean>({
         placeholder={placeholder}
         options={options}
         value={field.value}
-        onChange={handleChange}
+        onChange={(option, ...rest) => {
+          if (!meta.touched) {
+            helpers.setTouched(true);
+          }
+          helpers.setValue(option);
+          onChange?.(option, ...rest);
+        }}
         onBlur={handleBlur}
         isSearchable={isSearchable}
         isClearable={isClearable}

diff --git a/packages/react-kit/src/components/form/types.ts b/packages/react-kit/src/components/form/types.ts
@@ -1,5 +1,10 @@
 import { ReactNode } from "react";
-import { CSSObjectWithLabel, MultiValue, SingleValue } from "react-select";
+import Select, {
+  ActionMeta,
+  CSSObjectWithLabel,
+  MultiValue,
+  SingleValue
+} from "react-select";
 import { CSSProperties } from "styled-components";
 import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal";
 import type {
@@ -8,6 +13,7 @@ import type {
   TextAreaTheme
 } from "./Field.styles";
 import type { GridProps } from "../ui/Grid";
+import { StateManagerProps } from "react-select/dist/declarations/src/useStateManager";
 
 export interface BaseProps {
   name: string;
@@ -86,8 +92,7 @@ export interface BaseSelectProps {
   onChange?: OnChange;
 }
 
-export interface SelectProps<M extends boolean | undefined = false>
-  extends BaseProps {
+export type SelectProps<M extends boolean | undefined = false> = BaseProps & {
   isMulti?: M;
   disabled?: boolean;
   isClearable?: boolean;
@@ -97,7 +102,8 @@ export interface SelectProps<M extends boolean | undefined = false>
   onChange?: (
     option: M extends true
       ? MultiValue<SelectDataProps<string>>
-      : SingleValue<SelectDataProps<string>>
+      : SingleValue<SelectDataProps<string>>,
+    actionMeta: ActionMeta<SelectDataProps<string>>
   ) => void;
   label?: string;
   theme?: Partial<{
@@ -120,7 +126,13 @@ export interface SelectProps<M extends boolean | undefined = false>
     singleValue: Partial<CSSProperties> &
       Partial<{ error: CSSObjectWithLabel }>;
   }>;
-}
+} & Pick<
+    StateManagerProps<
+      SelectDataProps<string>,
+      M extends undefined ? false : boolean
+    >,
+    "formatGroupLabel" | "formatOptionLabel"
+  >;
 
 export type UploadProps = BaseProps & {
   accept?: string;