@bosonprotocol/react-kit 0.36.3-alpha.3 → 0.36.3-alpha.5

package/src/components/form/Select.tsx

@@ -1,30 +1,90 @@
-/* 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 {
@@ -64,14 +124,14 @@ const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
       ...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" : "default",
@@ -79,21 +139,19 @@ const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
         ? (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: any) => {
+  indicatorsContainer: (provided, state) => {
     return {
       ...provided,
       ...(state.isDisabled && {
@@ -123,7 +181,7 @@ const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
       ...(!checkIfValueIsEmpty(error) && customTheme?.singleValue?.error)
     };
   },
-  multiValue: (provided, state: any) => {
+  multiValue: (provided, state) => {
     return {
       ...provided,
       ...customTheme?.multiValue,
@@ -134,24 +192,32 @@ const customStyles = <Option extends Record<string, unknown> = SelectDataProps>(
     };
   }
 });
-
-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
@@ -163,10 +229,10 @@ 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 (disabled) {
+    if (isDisabled) {
       return;
     }
     if (!meta.touched) {
@@ -175,34 +241,43 @@ export default function SelectComponent<
     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 {
@@ -100,14 +95,14 @@ export interface BaseSelectProps<Value = string> {
   placeholder?: string;
   defaultValue?: SelectDataProps<Value> | null;
   onChange?: OnChange<Value>;
+  hasError?: boolean;
 }
 export type SupportedReactSelectProps<
   M extends boolean | undefined = false,
   Option extends Record<string, unknown> = SelectDataProps
 > = Pick<
   StateManagerProps<Option, M extends undefined ? false : boolean>,
-  | "formatGroupLabel"
-  | "formatOptionLabel"
+  // | "formatOptionLabel"
   | "menuPlacement"
   | "menuPosition"
   | "menuIsOpen"
@@ -126,45 +121,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<{
-        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 }>;
-  }>;
-} & 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/hooks/form/useFixSelectFont.tsx

@@ -2,9 +2,11 @@ import React, { useEffect, useRef } from "react";
 import { inputStyles } from "../../components/form/styles";
 
 export const useFixSelectFont = ({
-  selectClassName
+  selectClassName,
+  hasError
 }: {
   selectClassName: string;
+  hasError?: boolean;
 }) => {
   const inputFontSize = useRef<string>();
   useEffect(() => {
@@ -22,14 +24,21 @@ export const useFixSelectFont = ({
     jsx: (
       <style>{`.${selectClassName}{
         [class*="-placeholder"],[class*="-singleValue"],[class*="-option"]{
-          font-size: ${inputFontSize.current || "13.3333px"};
+          font-size: ${inputFontSize.current || "0.875rem"};
         }
+        ${
+          hasError
+            ? ""
+            : `
         [class*="-singleValue"]{
           color: ${inputStyles.color};
         }
         [class*="-placeholder"]{
           color: ${inputStyles.placeholder.color};
         }
+          `
+        }
+        
       }`}</style>
     ),
     selectClassName

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

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