@bosonprotocol/react-kit 0.36.3-alpha.2 → 0.36.3-alpha.4

package/src/components/form/Select.tsx

@@ -1,30 +1,92 @@
-/* eslint @typescript-eslint/no-explicit-any: "off" */
 import React from "react";
 import { useField } from "formik";
-import Select, { GroupBase, StylesConfig } from "react-select";
+import ReactSelect, {
+  GroupBase,
+  StylesConfig,
+  MultiValue,
+  SingleValue,
+  ActionMeta,
+  Props as ReactSelectProps,
+  PropsValue,
+  CSSObjectWithLabel
+} from "react-select";
+import { CSSProperties } from "react";
 import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
 import { colors, getCssVar } from "../../theme";
 import { zIndex } from "../ui/zIndex";
-
 import Error from "./Error";
-import type { SelectDataProps, SelectProps } from "./types";
 import { useFixSelectFont } from "../../hooks/form/useFixSelectFont";
-export type { SelectProps } from "./types";
+export { GroupBase } from "react-select";
+
+// Base theme type with proper CSS types
+type SelectTheme = Partial<{
+  control: Partial<CSSProperties> &
+    Partial<{
+      disabled: Partial<CSSProperties>;
+      hover: Partial<CSSProperties>;
+      focus: Partial<CSSProperties>;
+      error: Partial<CSSProperties>;
+    }>;
+  option: Partial<CSSProperties> &
+    Partial<{
+      selected: Partial<CSSProperties>;
+      disabled: Partial<CSSProperties>;
+      focus: Partial<CSSProperties>;
+      error: Partial<CSSObjectWithLabel>;
+    }>;
+  placeholder: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+  input: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+  singleValue: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+  multiValue: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
+}>;
+export type DefaultSelectOption = {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+};
+
+// Base option type that all options must extend
+export interface SelectOption extends Record<string, unknown> {
+  label: string;
+  value: string | number;
+  disabled?: boolean;
+}
+
+// Type-safe props with conditional types based on IsMulti
+export type SelectProps<
+  Option extends SelectOption = DefaultSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
+> = Omit<ReactSelectProps<Option, IsMulti, Group>, "styles" | "theme"> & {
+  name: string;
+  errorMessage?: string;
+  label?: string;
+  theme?: Partial<SelectTheme>;
+  reactSelectTheme?: ReactSelectProps<Option, IsMulti, Group>["theme"];
+};
 
-const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
+// Custom styles function with proper typing
+const customStyles = <
+  Option extends SelectOption,
+  IsMulti extends boolean,
+  Group extends GroupBase<Option>
+>(
   error: unknown,
-  customTheme: SelectProps["theme"]
-): StylesConfig<Option, boolean, GroupBase<Option>> => ({
-  control: (provided, state: any) => {
-    const before = state.selectProps.label
-      ? {
-          ":before": {
-            content: `"${state.selectProps.label}"`,
-            fontWeight: "600",
-            paddingLeft: "1rem"
+  customTheme?: Partial<SelectTheme>
+): StylesConfig<Option, IsMulti, Group> => ({
+  control: (provided, state) => {
+    const before =
+      "label" in state.selectProps && state.selectProps.label
+        ? {
+            ":before": {
+              content: `"${state.selectProps.label}"`,
+              fontWeight: "600",
+              paddingLeft: "1rem"
+            }
           }
-        }
-      : null;
+        : null;
+    const defaultBorderColor =
+      customTheme?.control?.borderColor || colors.border;
     return {
       ...provided,
       borderRadius: 0,
@@ -32,48 +94,71 @@ const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
       boxShadow: "none",
       background: getCssVar("--background-color"),
       ...customTheme?.control,
-      border: state.isFocused
-        ? (customTheme?.control?.focus?.border ?? `1px solid ${colors.violet}`)
-        : !checkIfValueIsEmpty(error)
-          ? (customTheme?.control?.error?.border ??
-            `1px solid ${colors.orange}`)
-          : (customTheme?.control?.border ?? `1px solid ${colors.border}`),
-      ":hover": {
-        borderColor: colors.violet,
-        borderWidth: "1px",
-        ...customTheme?.control?.hover
-      },
+      cursor: state.isDisabled ? "not-allowed" : "default",
+      opacity: state.isDisabled
+        ? (customTheme?.control?.disabled?.opacity ?? "0.5")
+        : (customTheme?.control?.opacity ?? "1"),
+      border: state.isDisabled
+        ? `1px solid ${defaultBorderColor}`
+        : state.isFocused
+          ? (customTheme?.control?.focus?.border ??
+            `1px solid ${colors.violet}`)
+          : !checkIfValueIsEmpty(error)
+            ? (customTheme?.control?.error?.border ??
+              `1px solid ${colors.orange}`)
+            : (customTheme?.control?.border ??
+              `1px solid ${defaultBorderColor}`),
+      ...(state.isDisabled
+        ? {
+            ":hover": {
+              border: `1px solid ${defaultBorderColor}`
+            }
+          }
+        : {
+            ":hover": {
+              borderColor: colors.violet,
+              borderWidth: "1px",
+              ...customTheme?.control?.hover
+            }
+          }),
       ...before
     };
   },
-  container: (provided, state: any) => ({
+  container: (provided, state) => ({
     ...provided,
+    pointerEvents: "initial",
     zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
     position: "relative",
     width: "100%"
   }),
-  option: (provided, state: any) => {
+  option: (provided, state) => {
     return {
       ...provided,
-      cursor: state.isDisabled ? "not-allowed" : "pointer",
+      cursor: state.isDisabled ? "not-allowed" : "default",
       opacity: state.isDisabled
         ? (customTheme?.option?.disabled?.opacity ?? "0.5")
         : (customTheme?.option?.opacity ?? "1"),
       background:
-        state.isOptionSelected || state.isSelected || state.isFocused
+        state.isSelected || state.isFocused
           ? (customTheme?.option?.selected?.background ?? colors.greyLight)
           : (customTheme?.option?.background ?? colors.white),
-      color:
-        state.isOptionSelected || state.isSelected
-          ? (customTheme?.option?.selected?.color ?? colors.violet)
-          : (customTheme?.option?.color ?? colors.black),
+      color: state.isSelected
+        ? (customTheme?.option?.selected?.color ?? colors.violet)
+        : (customTheme?.option?.color ?? colors.black),
       ...(state.isDisabled && customTheme?.option?.disabled),
-      ...((state.isOptionSelected || state.isSelected) &&
-        customTheme?.option?.selected),
+      ...(state.isSelected && customTheme?.option?.selected),
       ...(state.isFocused && customTheme?.option?.focus),
       ...(!checkIfValueIsEmpty(error) && customTheme?.option?.error)
     };
   },
+  indicatorsContainer: (provided, state) => {
+    return {
+      ...provided,
+      ...(state.isDisabled && {
+        pointerEvents: "none"
+      })
+    };
+  },
   indicatorSeparator: () => ({
     display: "none"
   }),
@@ -95,26 +180,44 @@ const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
       ...customTheme?.singleValue,
       ...(!checkIfValueIsEmpty(error) && customTheme?.singleValue?.error)
     };
+  },
+  multiValue: (provided, state) => {
+    return {
+      ...provided,
+      ...customTheme?.multiValue,
+      ...(state.isDisabled && {
+        pointerEvents: "none"
+      }),
+      ...(!checkIfValueIsEmpty(error) && customTheme?.multiValue?.error)
+    };
   }
 });
-
-export default function SelectComponent<
-  M extends boolean,
-  Option extends Record<string, unknown> = SelectDataProps
+export type DefaultSelectProps<IsMulti extends boolean = false> = SelectProps<
+  DefaultSelectOption,
+  IsMulti,
+  GroupBase<DefaultSelectOption>
+>;
+export function Select<
+  Option extends SelectOption = DefaultSelectOption,
+  IsMulti extends boolean = false,
+  Group extends GroupBase<Option> = GroupBase<Option>
 >({
   name,
   options,
   placeholder = "Choose...",
   isClearable = false,
   isSearchable = true,
-  disabled = false,
+  isDisabled = false,
   errorMessage,
   onChange,
+  onBlur,
   theme,
+  reactSelectTheme,
   isMulti,
   ...props
-}: SelectProps<M, Option>) {
+}: SelectProps<Option, IsMulti, Group>) {
   const [field, meta, helpers] = useField(name);
+
   const displayErrorMessage =
     meta.error && meta.touched && !errorMessage
       ? meta.error
@@ -126,43 +229,55 @@ export default function SelectComponent<
     typeof displayErrorMessage === "string" && displayErrorMessage !== "";
 
   const handleChange = (
-    option: Parameters<NonNullable<typeof onChange>>[0],
-    actionMeta: Parameters<NonNullable<typeof onChange>>[1]
+    option: IsMulti extends true ? MultiValue<Option> : SingleValue<Option>,
+    actionMeta: ActionMeta<Option>
   ) => {
+    if (isDisabled) {
+      return;
+    }
     if (!meta.touched) {
       helpers.setTouched(true);
     }
     helpers.setValue(option);
     onChange?.(option, actionMeta);
   };
-  const handleBlur = () => {
+
+  const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {
     if (!meta.touched) {
       helpers.setTouched(true);
     }
+    field.onBlur(event);
+    onBlur?.(event);
   };
+
   const { jsx, selectClassName } = useFixSelectFont({
     selectClassName: "boson-select"
   });
+
   return (
     <>
       {jsx}
-      <Select
-        styles={customStyles<Option>(displayErrorMessage, theme)}
+      <ReactSelect<Option, IsMulti, Group>
+        styles={customStyles<Option, IsMulti, Group>(
+          displayErrorMessage,
+          theme
+        )}
         {...field}
         {...props}
+        theme={reactSelectTheme}
         className={selectClassName}
         isMulti={isMulti}
         placeholder={placeholder}
         options={options}
-        value={field.value}
+        value={field.value as PropsValue<Option>}
         onChange={handleChange}
         onBlur={handleBlur}
         isSearchable={isSearchable}
         isClearable={isClearable}
-        isDisabled={disabled}
+        isDisabled={isDisabled}
         isOptionDisabled={(option) => !!option.disabled}
       />
-      <Error display={displayError} message={displayErrorMessage} />{" "}
+      <Error display={displayError} message={displayErrorMessage} />
     </>
   );
 }

package/src/components/form/index.ts

@@ -6,7 +6,7 @@ export { FormField, FormFieldProps } from "./FormField";
 export * from "./BaseInput";
 export { default as Input, InputProps } from "./Input";
 export { default as Phone, PhoneProps } from "./Phone";
-export { default as Select, SelectProps } from "./Select";
+export * from "./Select";
 export * from "./CountrySelect";
 export * from "./BaseTagsInput";
 export * from "./BaseTextArea";

package/src/components/form/types.ts

@@ -1,10 +1,5 @@
 import { ReactNode } from "react";
-import {
-  ActionMeta,
-  CSSObjectWithLabel,
-  MultiValue,
-  SingleValue
-} from "react-select";
+import { SingleValue } from "react-select";
 import { CSSProperties } from "styled-components";
 import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal";
 import type {
@@ -106,8 +101,7 @@ export type SupportedReactSelectProps<
   Option extends Record<string, unknown> = SelectDataProps
 > = Pick<
   StateManagerProps<Option, M extends undefined ? false : boolean>,
-  | "formatGroupLabel"
-  | "formatOptionLabel"
+  // | "formatOptionLabel"
   | "menuPlacement"
   | "menuPosition"
   | "menuIsOpen"
@@ -126,43 +120,9 @@ export type SupportedReactSelectProps<
   | "closeMenuOnSelect"
   | "captureMenuScroll"
   | "defaultMenuIsOpen"
+  | "placeholder"
+  | "hideSelectedOptions"
 >;
-export type SelectProps<
-  M extends boolean | undefined = false,
-  Option extends Record<string, unknown> = SelectDataProps
-> = BaseProps & {
-  isMulti?: M;
-  disabled?: boolean;
-  isClearable?: boolean;
-  isSearchable?: boolean;
-  options: Array<Option> | Readonly<Array<Option>>;
-  errorMessage?: string;
-  onChange?: (
-    option: M extends true ? MultiValue<Option> : SingleValue<Option>,
-    actionMeta?: ActionMeta<Option>
-  ) => void;
-  label?: string;
-  theme?: Partial<{
-    control: Partial<CSSProperties> &
-      Partial<{
-        hover: Partial<CSSProperties>;
-        focus: Partial<CSSProperties>;
-        error: Partial<CSSProperties>;
-      }>;
-    option: Partial<CSSProperties> &
-      Partial<{
-        selected: Partial<CSSProperties>;
-        disabled: Partial<CSSProperties>;
-        focus: Partial<CSSProperties>;
-        error: Partial<CSSObjectWithLabel>;
-      }>;
-    placeholder: Partial<CSSProperties> &
-      Partial<{ error: CSSObjectWithLabel }>;
-    input: Partial<CSSProperties> & Partial<{ error: CSSObjectWithLabel }>;
-    singleValue: Partial<CSSProperties> &
-      Partial<{ error: CSSObjectWithLabel }>;
-  }>;
-} & SupportedReactSelectProps<M, Option>;
 
 export type UploadProps = BaseProps & {
   accept?: string;

package/src/components/modal/components/common/VariationSelects.tsx

@@ -354,7 +354,7 @@ export default function VariationSelects({
                       setLastChangedVariation("color");
                       submitForm();
                     }}
-                    disabled={disabled}
+                    isDisabled={disabled}
                   />
                 </>
               )}
@@ -373,7 +373,7 @@ export default function VariationSelects({
                       setLastChangedVariation("size");
                       submitForm();
                     }}
-                    disabled={disabled}
+                    isDisabled={disabled}
                   />
                 </>
               )}

package/src/stories/selects/Select.stories.tsx

@@ -29,7 +29,10 @@ export default {
         disable: true // remove name input in controls
       }
     },
-    disabled: { control: "boolean" },
+    isDisabled: { control: "boolean" },
+    isMulti: { control: "boolean" },
+    isClearable: { control: "boolean" },
+    isSearchable: { control: "boolean" },
     placeholder: { control: "text" }
   },
   decorators: [
@@ -58,7 +61,7 @@ const BASE_ARGS = {
   name: inputName,
   options: [
     { label: "first option", value: "1" },
-    { label: "second option", value: "2" },
+    { label: "second option", value: "2", disabled: true },
     { label: "third option", value: "3" }
   ]
 } as SelectProps;
@@ -114,3 +117,7 @@ export const WithError = {
     placeholder: "this is a placeholder"
   } satisfies SelectProps
 };
+
+export const WithLabel = {
+  args: { ...BASE_ARGS, label: "my label" } satisfies SelectProps
+};