@ultraviolet/form 2.13.2 → 2.13.4

package/dist/components/KeyValueField/index.js

@@ -1,11 +1,7 @@
-import { Stack, Row, Button } from '@ultraviolet/ui';
-import { useFieldArray } from 'react-hook-form';
-import { TextInputField } from '../TextInputFieldV2/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-/**
- * A React component that allows users to manage key-value pairs
- */
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { Stack, Row, Button } from "@ultraviolet/ui";
+import { useFieldArray } from "react-hook-form";
+import { TextInputField } from "../TextInputFieldV2/index.js";
 const KeyValueField = ({
   name,
   inputKey,
@@ -23,62 +19,33 @@ const KeyValueField = ({
     name,
     control
   });
-  const canAdd = fields.length !== undefined && fields.length < maxSize;
+  const canAdd = fields.length !== void 0 && fields.length < maxSize;
   const maxSizeReachedTooltip = addButton.maxSizeReachedTooltip ?? `Cannot add more than ${maxSize} elements`;
-  return jsxs(Stack, {
-    gap: 3,
-    children: [fields.length ? jsx(Stack, {
-      gap: 3,
-      children: fields.map((field, index) => jsxs(Row, {
-        templateColumns: "1fr 1fr auto",
-        gap: 2,
-        alignItems: "end",
-        children: [jsx(TextInputField, {
-          readOnly: readonly,
-          required: inputKey.required,
-          name: `${name}.${index}.key`,
-          label: inputKey.label,
-          regex: inputKey.regex
-        }), jsx(TextInputField, {
-          readOnly: readonly,
-          required: inputValue.required,
-          name: `${name}.${index}.value`,
-          label: inputValue.label,
-          placeholder: inputValue.placeholder,
-          type: inputValue.type,
-          autoComplete: "off",
-          regex: inputValue.regex
-        }), jsx(Button, {
-          disabled: readonly,
-          "data-testid": `remove-button-${index}`,
-          icon: "delete",
-          variant: "outlined",
-          sentiment: "danger",
-          size: "large",
-          onClick: () => remove(index)
-        })]
-      }, field.id))
-    }) : null, jsx(Stack, {
-      direction: "row",
-      justifyContent: "flex-start",
-      children: jsx(Button, {
+  return /* @__PURE__ */ jsxs(Stack, { gap: 3, children: [
+    fields.length ? /* @__PURE__ */ jsx(Stack, { gap: 3, children: fields.map((field, index) => /* @__PURE__ */ jsxs(Row, { templateColumns: "1fr 1fr auto", gap: 2, alignItems: "end", children: [
+      /* @__PURE__ */ jsx(TextInputField, { readOnly: readonly, required: inputKey.required, name: `${name}.${index}.key`, label: inputKey.label, regex: inputKey.regex }),
+      /* @__PURE__ */ jsx(TextInputField, { readOnly: readonly, required: inputValue.required, name: `${name}.${index}.value`, label: inputValue.label, placeholder: inputValue.placeholder, type: inputValue.type, autoComplete: "off", regex: inputValue.regex }),
+      /* @__PURE__ */ jsx(Button, { disabled: readonly, "data-testid": `remove-button-${index}`, icon: "delete", variant: "outlined", sentiment: "danger", size: "large", onClick: () => remove(index) })
+    ] }, field.id)) }) : null,
+    /* @__PURE__ */ jsx(Stack, { direction: "row", justifyContent: "flex-start", children: /* @__PURE__ */ jsx(
+      Button,
+      {
         "data-testid": "add-button",
         icon: "plus",
         variant: "filled",
         sentiment: "neutral",
         fullWidth: addButton.fullWidth,
         disabled: !canAdd || readonly,
-        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip
-        // @ts-expect-error can't infer properly
-        ,
+        tooltip: !canAdd ? maxSizeReachedTooltip : addButton.tooltip,
         onClick: () => append({
-          key: '',
-          value: ''
+          key: "",
+          value: ""
         }),
         children: addButton.name
-      })
-    })]
-  });
+      }
+    ) })
+  ] });
+};
+export {
+  KeyValueField
 };
-
-export { KeyValueField };

package/dist/components/NumberInputField/index.d.ts

@@ -0,0 +1,13 @@
+import { NumberInput } from '@ultraviolet/ui';
+import type { ComponentProps, FocusEventHandler } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type NumberInputValueFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof NumberInput>, 'disabled' | 'maxValue' | 'minValue' | 'onMaxCrossed' | 'onMinCrossed' | 'size' | 'step' | 'text' | 'className'>> & {
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+};
+/**
+ * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
+ */
+export declare const NumberInputField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, maxValue, minValue, name, onChange, onBlur, onFocus, onMaxCrossed, onMinCrossed, required, size, step, text, rules, className, label, shouldUnregister, }: NumberInputValueFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NumberInputField/index.js

@@ -1,11 +1,7 @@
-import { NumberInput } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-/**
- * @deprecated This component is deprecated, use `NumberInputFieldV2` instead.
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { NumberInput } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const NumberInputField = ({
   disabled,
   maxValue,
@@ -43,35 +39,18 @@ const NumberInputField = ({
       ...rules
     }
   });
-  return jsx(NumberInput, {
-    name: field.name,
-    value: field.value,
-    disabled: disabled,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onChange: event => {
-      // React hook form doesnt allow undefined values after definition https://react-hook-form.com/docs/usecontroller/controller (that make sense)
-      field.onChange(event ?? null);
-      onChange?.(event);
-    },
-    onFocus: onFocus,
-    maxValue: maxValue,
-    minValue: minValue,
-    onMinCrossed: onMinCrossed,
-    onMaxCrossed: onMaxCrossed,
-    size: size,
-    step: step,
-    text: text,
-    className: className,
-    label: label,
-    error: getError({
-      label: label ?? '',
-      max: maxValue,
-      min: minValue
-    }, error)
-  });
+  return /* @__PURE__ */ jsx(NumberInput, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (event) => {
+    field.onChange(event ?? null);
+    onChange?.(event);
+  }, onFocus, maxValue, minValue, onMinCrossed, onMaxCrossed, size, step, text, className, label, error: getError({
+    label: label ?? "",
+    max: maxValue,
+    min: minValue
+  }, error) });
+};
+export {
+  NumberInputField
 };
-
-export { NumberInputField };

package/dist/components/NumberInputFieldV2/index.d.ts

@@ -0,0 +1,11 @@
+import { NumberInputV2 } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type NumberInputV2Props<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof NumberInputV2>, 'disabled' | 'id' | 'onBlur' | 'onChange' | 'onFocus' | 'value' | 'data-testid' | 'label' | 'tooltip' | 'unit' | 'size' | 'step' | 'className' | 'placeholder' | 'error' | 'success' | 'helper' | 'labelDescription' | 'aria-label' | 'autoFocus' | 'readOnly' | 'min' | 'max'>> & {
+    className?: string;
+    name: string;
+    required?: boolean;
+};
+export declare const NumberInputFieldV2: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, max, min, name, onChange, onBlur, size, step, unit, tooltip, className, label, labelDescription, id, placeholder, success, helper, rules, "aria-label": ariaLabel, "data-testid": dataTestId, required, autoFocus, readOnly, shouldUnregister, }: NumberInputV2Props<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/NumberInputFieldV2/index.js

@@ -1,8 +1,7 @@
-import { NumberInputV2 } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { NumberInputV2 } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const NumberInputFieldV2 = ({
   disabled,
   max = Number.MAX_SAFE_INTEGER,
@@ -22,8 +21,8 @@ const NumberInputFieldV2 = ({
   success,
   helper,
   rules,
-  'aria-label': ariaLabel,
-  'data-testid': dataTestId,
+  "aria-label": ariaLabel,
+  "data-testid": dataTestId,
   required,
   autoFocus,
   readOnly,
@@ -47,43 +46,18 @@ const NumberInputFieldV2 = ({
       ...rules
     }
   });
-  return jsx(NumberInputV2, {
-    name: field.name,
-    value: field.value,
-    disabled: disabled,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onChange: newValue => {
-      // React hook form doesnt allow undefined values after definition https://react-hook-form.com/docs/usecontroller/controller (that make sense)
-      field.onChange(newValue);
-      onChange?.(newValue);
-    },
-    max: max,
-    min: min,
-    size: size,
-    step: step,
-    className: className,
-    "data-testid": dataTestId,
-    id: id,
-    label: label,
-    labelDescription: labelDescription,
-    placeholder: placeholder,
-    error: getError({
-      label: label ?? '',
-      max,
-      min
-    }, error),
-    success: success,
-    helper: helper,
-    tooltip: tooltip,
-    unit: unit,
-    "aria-label": ariaLabel,
-    autoFocus: autoFocus,
-    readOnly: readOnly,
-    required: required
-  });
+  return /* @__PURE__ */ jsx(NumberInputV2, { name: field.name, value: field.value, disabled, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (newValue) => {
+    field.onChange(newValue);
+    onChange?.(newValue);
+  }, max, min, size, step, className, "data-testid": dataTestId, id, label, labelDescription, placeholder, error: getError({
+    label: label ?? "",
+    max,
+    min
+  }, error), success, helper, tooltip, unit, "aria-label": ariaLabel, autoFocus, readOnly, required });
+};
+export {
+  NumberInputFieldV2
 };
-
-export { NumberInputFieldV2 };

package/dist/components/RadioField/index.d.ts

@@ -0,0 +1,12 @@
+import { Radio } from '@ultraviolet/ui';
+import type { ComponentProps } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type RadioFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'label'> & Partial<Pick<ComponentProps<typeof Radio>, 'disabled' | 'id' | 'onBlur' | 'onFocus' | 'data-testid' | 'tooltip' | 'label'>> & {
+    className?: string;
+};
+/**
+ * @deprecated This component is deprecated, use `RadioGroupField` instead.
+ */
+export declare const RadioField: <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, "data-testid": dataTestId, disabled, id, name, onBlur, label, onChange, onFocus, required, value, rules, tooltip, shouldUnregister, }: RadioFieldProps<TFieldValues, TName>) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/RadioField/index.js

@@ -1,19 +1,15 @@
-import { Radio } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-/**
- * @deprecated This component is deprecated, use `RadioGroupField` instead.
- */
+import { jsx } from "@emotion/react/jsx-runtime";
+import { Radio } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioField = ({
   className,
-  'data-testid': dataTestId,
+  "data-testid": dataTestId,
   disabled,
   id,
   name,
   onBlur,
-  label = '',
+  label = "",
   onChange,
   onFocus,
   required,
@@ -38,30 +34,16 @@ const RadioField = ({
       ...rules
     }
   });
-  return jsx(Radio, {
-    name: field.name,
-    checked: field.value === value,
-    className: className,
-    "data-testid": dataTestId,
-    disabled: disabled,
-    error: getError({
-      label: typeof label === 'string' ? label : ''
-    }, error),
-    id: id,
-    onChange: () => {
-      field.onChange(value);
-      onChange?.(value);
-    },
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onFocus: onFocus,
-    required: required,
-    value: value ?? '',
-    label: label,
-    tooltip: tooltip
-  });
+  return /* @__PURE__ */ jsx(Radio, { name: field.name, checked: field.value === value, className, "data-testid": dataTestId, disabled, error: getError({
+    label: typeof label === "string" ? label : ""
+  }, error), id, onChange: () => {
+    field.onChange(value);
+    onChange?.(value);
+  }, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onFocus, required, value: value ?? "", label, tooltip });
+};
+export {
+  RadioField
 };
-
-export { RadioField };

package/dist/components/RadioGroupField/index.d.ts

@@ -0,0 +1,28 @@
+import { RadioGroup } from '@ultraviolet/ui';
+import type { ComponentProps, JSX } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { BaseFieldProps } from '../../types';
+type RadioGroupFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = BaseFieldProps<TFieldValues, TName> & Partial<Pick<ComponentProps<typeof RadioGroup>, 'legend' | 'children' | 'error' | 'helper' | 'direction'>> & {
+    className?: string;
+};
+export declare const RadioGroupField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ className, legend, name, onChange, required, rules, children, label, error: customError, helper, direction, shouldUnregister, }: RadioGroupFieldProps<TFieldValues, TName>): JSX.Element;
+    Radio: ({ onFocus, onBlur, disabled, error, name, value, label, helper, className, autoFocus, onKeyDown, "data-testid": dataTestId, }: Omit<({
+        error?: import("react").ReactNode;
+        checked?: boolean | undefined;
+        value: string | number;
+        helper?: import("react").ReactNode;
+        className?: string | undefined;
+        'data-testid'?: string | undefined;
+        tooltip?: string | undefined;
+    } & Required<Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "onChange">> & (Pick<import("react").InputHTMLAttributes<HTMLInputElement>, "required" | "onBlur" | "disabled" | "name" | "onFocus" | "autoFocus" | "id" | "onKeyDown"> & ({
+        'aria-label': string;
+        label?: undefined;
+    } | {
+        'aria-label'?: undefined;
+        label: import("react").ReactNode;
+    }))) & import("react").RefAttributes<HTMLInputElement>, "required" | "onChange" | "checked"> & {
+        name?: string | undefined;
+    }) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export {};

package/dist/components/RadioGroupField/index.js

@@ -1,17 +1,16 @@
-import { RadioGroup } from '@ultraviolet/ui';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { RadioGroup } from "@ultraviolet/ui";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
 const RadioGroupField = ({
   className,
-  legend = '',
+  legend = "",
   name,
   onChange,
   required,
   rules,
   children,
-  label = '',
+  label = "",
   error: customError,
   helper,
   direction,
@@ -33,24 +32,14 @@ const RadioGroupField = ({
       ...rules
     }
   });
-  return jsx(RadioGroup, {
-    className: className,
-    name: field.name,
-    onChange: event => {
-      field.onChange(event);
-      onChange?.(event.target.value);
-    },
-    required: required,
-    value: field.value,
-    legend: legend,
-    error: getError({
-      label
-    }, error) ?? customError,
-    helper: helper,
-    direction: direction,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(RadioGroup, { className, name: field.name, onChange: (event) => {
+    field.onChange(event);
+    onChange?.(event.target.value);
+  }, required, value: field.value, legend, error: getError({
+    label
+  }, error) ?? customError, helper, direction, children });
 };
 RadioGroupField.Radio = RadioGroup.Radio;
-
-export { RadioGroupField };
+export {
+  RadioGroupField
+};

package/dist/components/SelectInputField/index.d.ts

@@ -0,0 +1,82 @@
+import type { CSSObject, Theme, css } from '@emotion/react';
+import { SelectInput } from '@ultraviolet/ui';
+import type { ComponentProps, ForwardedRef, ReactNode } from 'react';
+import type { FieldPath, FieldValues } from 'react-hook-form';
+import type { CommonProps, GroupBase, OptionProps, Props } from 'react-select';
+import type Select from 'react-select';
+import type { BaseFieldProps } from '../../types';
+export type SelectInputType = typeof SelectInput;
+type SelectOption = {
+    value: string;
+    label: ReactNode;
+    disabled?: boolean;
+    description?: string;
+    inlineDescription?: string;
+};
+type WithSelectProps = {
+    selectProps: SelectProps;
+};
+type SelectStyleProps = {
+    error?: string;
+    /**
+     * Custom styles of the SelectInput. See [React select documentation](https://react-select.com/styles)
+     */
+    customStyle: (state: SelectProps & WithSelectProps) => Record<string, CSSObject>;
+    animation?: string;
+    /**
+     * Time of the animation
+     */
+    animationDuration?: number;
+    /**
+     * Show/hide the label inside the component
+     */
+    noTopLabel?: boolean;
+    theme: Theme;
+};
+type StyledContainerProps = {
+    isDisabled?: boolean;
+    additionalStyles?: Parameters<typeof css>[0];
+};
+type SelectProps = StyledContainerProps & Omit<Props<SelectOption>, 'value'> & CommonProps<SelectOption, boolean, GroupBase<SelectOption>> & {
+    value?: string | SelectOption;
+    checked?: boolean;
+    error?: string;
+    labelId?: string;
+    required?: boolean;
+    time?: boolean;
+};
+type StateManagedSelect = typeof Select;
+type SelectInputProps = Partial<SelectProps & SelectStyleProps & Pick<ComponentProps<typeof SelectInput>, 'data-testid'> & {
+    /**
+     * Name of the animation
+     */
+    animation?: string;
+    /**
+     * Play the animation when the value change
+     */
+    animationOnChange?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    innerRef?: ForwardedRef<StateManagedSelect>;
+    /**
+     * Custom components of the SelectInput. See [React select documentation](https://react-select.com/components)
+     */
+    customComponents?: SelectProps['components'];
+    children: ReactNode;
+    emptyState?: ComponentProps<Select>['noOptionsMessage'];
+}>;
+/**
+ * @deprecated This component is deprecated, please use `SelectInputFieldV2` instead
+ */
+export type SelectInputFieldProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = Omit<BaseFieldProps<TFieldValues, TName>, 'onChange'> & Partial<Pick<SelectInputProps, 'animation' | 'animationDuration' | 'animationOnChange' | 'children' | 'className' | 'disabled' | 'error' | 'id' | 'inputId' | 'isClearable' | 'isLoading' | 'isSearchable' | 'menuPortalTarget' | 'onBlur' | 'onChange' | 'onFocus' | 'options' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'noTopLabel' | 'emptyState' | 'customStyle' | 'data-testid'>> & {
+    multiple?: boolean;
+    parse?: (value: unknown, name?: string) => unknown;
+    format?: (value: unknown, name: string) => unknown;
+    maxLength?: number;
+    minLength?: number;
+};
+export declare const SelectInputField: {
+    <TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ animation, animationDuration, animationOnChange, children, className, disabled, format: formatProp, id, inputId, isClearable, isLoading, isSearchable, label, maxLength, menuPortalTarget, minLength, multiple, name, onBlur, onChange, onFocus, options: optionsProp, parse: parseProp, placeholder, readOnly, required, rules, noTopLabel, emptyState, customStyle, shouldUnregister, "data-testid": dataTestId, }: SelectInputFieldProps<TFieldValues, TName>): import("@emotion/react/jsx-runtime").JSX.Element;
+    Option: (props: Partial<OptionProps<import("@ultraviolet/ui").SelectOption, boolean, GroupBase<import("@ultraviolet/ui").SelectOption>> & import("@ultraviolet/ui").SelectOption>) => import("react").JSX.Element;
+};
+export {};

package/dist/components/SelectInputField/index.js

@@ -1,12 +1,9 @@
-import { SelectInput } from '@ultraviolet/ui';
-import { useMemo, Children, useCallback } from 'react';
-import { useController } from 'react-hook-form';
-import { jsx } from '@emotion/react/jsx-runtime';
-import { useErrors } from '../../providers/ErrorContext/index.js';
-
-const identity = x => x;
-// const identity = <T,>(x: T) => x
-
+import { jsx } from "@emotion/react/jsx-runtime";
+import { SelectInput } from "@ultraviolet/ui";
+import { useMemo, Children, useCallback } from "react";
+import { useController } from "react-hook-form";
+import { useErrors } from "../../providers/ErrorContext/index.js";
+const identity = (x) => x;
 const SelectInputField = ({
   animation,
   animationDuration,
@@ -22,7 +19,7 @@ const SelectInputField = ({
   isClearable,
   isLoading,
   isSearchable,
-  label = '',
+  label = "",
   maxLength,
   menuPortalTarget,
   minLength,
@@ -41,7 +38,7 @@ const SelectInputField = ({
   emptyState,
   customStyle,
   shouldUnregister = false,
-  'data-testid': dataTestId
+  "data-testid": dataTestId
 }) => {
   const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({
     props: {
@@ -52,18 +49,18 @@ const SelectInputField = ({
     ...option,
     label: labelChild
   })), [optionsProp, children]);
-  const parse = useMemo(() => multiple ? parseProp : option => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
-  const format = useCallback(val => {
-    if (multiple) return formatProp(val, name);
-    const find = (opts, valueToFind) => opts?.find(option => option.value === valueToFind);
-    let selected = '';
+  const parse = useMemo(() => multiple ? parseProp : (option) => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
+  const format = useCallback((val) => {
+    if (multiple)
+      return formatProp(val, name);
+    const find = (opts, valueToFind) => opts?.find((option) => option.value === valueToFind);
+    let selected = "";
     if (val && options) {
-      // TODO: find a proper way to simplify format with recursive options
       selected = find(options, val);
       if (!selected) {
-        selected = options.map(curr => find(curr.options, val)).filter(identity);
+        selected = options.map((curr) => find(curr.options, val)).filter(identity);
         if (Array.isArray(selected) && selected.length === 0) {
-          selected = '';
+          selected = "";
         }
       }
     }
@@ -82,51 +79,24 @@ const SelectInputField = ({
     shouldUnregister,
     rules: {
       required,
-      minLength: minLength || required ? 1 : undefined,
+      minLength: minLength || required ? 1 : void 0,
       maxLength,
       ...rules
     }
   });
-  return jsx(SelectInput, {
-    name: field.name,
-    animation: animation,
-    animationDuration: animationDuration,
-    animationOnChange: animationOnChange,
-    className: className,
-    disabled: disabled,
-    error: getError({
-      label,
-      minLength,
-      maxLength
-    }, error),
-    id: id,
-    inputId: inputId,
-    isClearable: isClearable,
-    isLoading: isLoading,
-    isMulti: multiple,
-    customStyle: customStyle,
-    isSearchable: isSearchable,
-    menuPortalTarget: menuPortalTarget,
-    onBlur: event => {
-      field.onBlur();
-      onBlur?.(event);
-    },
-    onChange: (event, action) => {
-      field.onChange(parse(event));
-      onChange?.(event, action);
-    },
-    onFocus: onFocus,
-    options: options,
-    placeholder: placeholder,
-    readOnly: readOnly,
-    noTopLabel: noTopLabel,
-    required: required,
-    value: format(field.value),
-    emptyState: emptyState,
-    "data-testid": dataTestId,
-    children: children
-  });
+  return /* @__PURE__ */ jsx(SelectInput, { name: field.name, animation, animationDuration, animationOnChange, className, disabled, error: getError({
+    label,
+    minLength,
+    maxLength
+  }, error), id, inputId, isClearable, isLoading, isMulti: multiple, customStyle, isSearchable, menuPortalTarget, onBlur: (event) => {
+    field.onBlur();
+    onBlur?.(event);
+  }, onChange: (event, action) => {
+    field.onChange(parse(event));
+    onChange?.(event, action);
+  }, onFocus, options, placeholder, readOnly, noTopLabel, required, value: format(field.value), emptyState, "data-testid": dataTestId, children });
 };
 SelectInputField.Option = SelectInput.Option;
-
-export { SelectInputField };
+export {
+  SelectInputField
+};