@soyfri/shared-library 2.0.0-beta.9 → 2.0.0

package/components/Select/Select.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import { SelectProps as MuiSelectProps } from '@mui/material';
-import { Control, RegisterOptions } from 'react-hook-form';
+import { RegisterOptions } from 'react-hook-form';
 export interface SelectOption {
     value: string | number;
     label: string;
@@ -10,7 +10,6 @@ export interface SelectOption {
     [key: string]: any;
 }
 export type LabelPosition = 'outside' | 'floating';
-export type ChipVariant = 'outlined' | 'filled';
 export type SelectSize = 'small' | 'medium';
 export type RenderOptionItem = (item: SelectOption) => ReactNode;
 export type RenderChipLabel = (item: SelectOption) => ReactNode;
@@ -22,21 +21,12 @@ export interface BaseSelectProps<TValue extends SelectOption['value'] = SelectOp
     options?: SelectOption[];
     defaultValue?: TValue | TValue[];
     size?: SelectSize;
-    multiple?: boolean;
-    filterable?: boolean;
     placeholder?: string;
     children?: ReactElement<{
         children: RenderOptionItem;
     }>;
     maxHeight?: number | string;
     maxWidth?: number | string;
-    maxChipsToShow?: number;
-    renderChipLabel?: RenderChipLabel;
-    chipVariant?: ChipVariant;
-    loadOptions?: (inputValue: string) => Promise<SelectOption[]>;
-    loadingMessage?: ReactNode;
-    noOptionsMessage?: ReactNode;
-    debounceTimeout?: number;
     disabled?: boolean;
     error?: boolean;
     helperText?: string;
@@ -56,20 +46,45 @@ export interface BaseSelectProps<TValue extends SelectOption['value'] = SelectOp
     preset?: string;
     sx?: MuiSelectProps['sx'];
     className?: string;
+    /** Cantidad máxima de chips visibles antes de colapsar al "+N más". Default: 3. */
+    maxChipsToShow?: number;
+    /** Custom render del label de cada chip. Si no se pasa, usa `option.label`. */
+    renderChipLabel?: RenderChipLabel;
+    /** Variant de los chips. Default: 'outlined'. */
+    chipVariant?: 'outlined' | 'filled';
 }
-export interface RHFSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
-    name: string;
-    control: Control<any>;
-    validation?: RegisterOptions;
-    value?: TValue | TValue[];
-    onChange?: (val: TValue | TValue[]) => void;
+export interface SingleStandardSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
+    multiple?: false;
+    name?: string;
+    control?: never;
+    validation?: never;
+    value: TValue;
+    onChange: (val: TValue) => void;
 }
-export interface StandardSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
+export interface MultipleStandardSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
+    multiple: true;
     name?: string;
     control?: never;
     validation?: never;
-    value: TValue | TValue[];
-    onChange: (val: TValue | TValue[]) => void;
+    value: TValue[];
+    onChange: (val: TValue[]) => void;
+}
+export type StandardSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> = SingleStandardSelectProps<TValue> | MultipleStandardSelectProps<TValue>;
+export interface RHFSelectProps<TValue extends SelectOption['value'] = SelectOption['value']> extends BaseSelectProps<TValue> {
+    /** En RHF se acepta como boolean dinámico — `field.value` se trata según
+     *  esto: array si `multiple`, valor único si no. */
+    multiple?: boolean;
+    name: string;
+    control: any;
+    validation?: RegisterOptions;
+    /**
+     * Side-effect que corre después de que RHF actualiza el form state.
+     * Útil para cascadas entre campos (ej. reset de municipio al cambiar
+     * departamento). NO reemplaza al handler de RHF.
+     */
+    onValueChange?: (value: TValue | TValue[]) => void;
+    value?: never;
+    onChange?: never;
 }
 export type SelectProps<TValue extends SelectOption['value'] = SelectOption['value']> = RHFSelectProps<TValue> | StandardSelectProps<TValue>;
 export declare function Option(_props: OptionProps): null;

package/components/Select/Select.helpers.d.ts

@@ -1,9 +1,4 @@
 import { SelectOption } from './Select';
-/**
- * Filtra opciones por `label` (case-insensitive). Si `search` es vacío,
- * devuelve el array completo. Solo se usa en modo no-async.
- */
-export declare const filterOptionsByLabel: (options: SelectOption[], search: string) => SelectOption[];
 /**
  * Agrupa opciones por la propiedad `group`. Las opciones sin group caen
  * bajo la key especial `__default`. Devuelve un Record para iterar en orden
@@ -11,18 +6,10 @@ export declare const filterOptionsByLabel: (options: SelectOption[], search: str
  */
 export declare const groupOptions: (options: SelectOption[]) => Record<string, SelectOption[]>;
 /**
- * Determina si un conjunto de grupos está efectivamente vacío
- * (no hay grupos o solo existe `__default` sin items).
- */
-export declare const isGroupedOptionsEmpty: (groups: Record<string, SelectOption[]>) => boolean;
-/**
- * Normaliza el valor actual al shape que espera el MUI Select:
- * - multiple: siempre array (aunque esté vacío).
- * - single:   string vacío si null/undefined.
- */
-export declare const normalizeSelectValue: <T>(value: T | T[] | null | undefined, multiple: boolean) => T | T[] | "";
-/**
- * Evalúa si el valor actual está vacío (para decidir shrink del label
- * y visibilidad del placeholder).
+ * Normaliza el valor single al shape que espera MUI Select: string vacío si
+ * el valor es `null`/`undefined`.
  */
-export declare const isSelectValueEmpty: (normalizedValue: unknown, multiple: boolean) => boolean;
+export declare const normalizeSelectValue: <T>(value: T | null | undefined) => T | "";
+/** `true` si el valor está vacío (para shrink del label + placeholder). En
+ *  multi se considera vacío cuando el array no tiene elementos. */
+export declare const isSelectValueEmpty: (normalizedValue: unknown) => boolean;

package/components/Select/Select.js

@@ -29,21 +29,15 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import React__default, { useMemo, isValidElement, useState, useRef, useEffect } from "react";
-import { ListSubheader, TextField, Typography, Box, Chip, Avatar, MenuItem, ListItemIcon, CircularProgress, FormControl, InputLabel, Select as Select$1, FormHelperText, OutlinedInput } from "@mui/material";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo, Children, isValidElement, useState } from "react";
+import { MenuItem, ListItemIcon, FormControl, InputLabel, Select as Select$1, FormHelperText, ListSubheader, OutlinedInput, Typography, Box, Chip, Avatar } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
 import { Controller } from "react-hook-form";
-import { b as buildFormFieldSx } from "../../formField.sx-DfVbMe0V.js";
+import { b as buildFormFieldSx } from "../../formField.sx-8_QRnKxv.js";
 import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
-import ClearIcon from "@mui/icons-material/Clear";
 import CheckIcon from "@mui/icons-material/Check";
 const buildSelectSx = (borderRadius, labelPosition) => buildFormFieldSx({ borderRadius, labelPosition });
-const filterOptionsByLabel = (options, search) => {
-  if (!search) return options;
-  const needle = search.toLowerCase();
-  return options.filter((opt) => opt.label.toLowerCase().includes(needle));
-};
 const groupOptions = (options) => {
   const groups = {};
   options.forEach((opt) => {
@@ -53,108 +47,11 @@ const groupOptions = (options) => {
   });
   return groups;
 };
-const isGroupedOptionsEmpty = (groups) => {
-  const keys = Object.keys(groups);
-  if (keys.length === 0) return true;
-  if (keys.length === 1 && groups["__default"] && groups["__default"].length === 0) {
-    return true;
-  }
-  return false;
-};
-const normalizeSelectValue = (value, multiple) => {
-  if (multiple) return value != null ? value : [];
-  return value != null ? value : "";
-};
-const isSelectValueEmpty = (normalizedValue, multiple) => {
-  if (multiple) return Array.isArray(normalizedValue) && normalizedValue.length === 0;
+const normalizeSelectValue = (value) => value != null ? value : "";
+const isSelectValueEmpty = (normalizedValue) => {
+  if (Array.isArray(normalizedValue)) return normalizedValue.length === 0;
   return normalizedValue === "" || normalizedValue === null || normalizedValue === void 0;
 };
-const SelectSearchHeader = ({
-  value,
-  onChange,
-  placeholder = "Buscar...",
-  inputRef
-}) => {
-  return /* @__PURE__ */ jsx(
-    ListSubheader,
-    {
-      sx: {
-        px: 2,
-        pt: 1,
-        pb: 1,
-        backgroundColor: "background.paper",
-        zIndex: 1,
-        position: "sticky",
-        top: 0
-      },
-      children: /* @__PURE__ */ jsx(
-        TextField,
-        {
-          inputRef,
-          placeholder,
-          variant: "standard",
-          size: "small",
-          fullWidth: true,
-          value,
-          onChange: (e) => onChange(e.target.value),
-          slotProps: { htmlInput: { autoFocus: true } },
-          onClick: (e) => e.stopPropagation(),
-          onKeyDown: (e) => e.stopPropagation()
-        }
-      )
-    }
-  );
-};
-function SelectValue(props) {
-  var _a;
-  const {
-    selected,
-    options,
-    multiple,
-    placeholder,
-    maxChipsToShow,
-    chipVariant,
-    renderChipLabel,
-    onDeleteChip,
-    currentValues
-  } = props;
-  const isEmpty = !selected || Array.isArray(selected) && selected.length === 0;
-  if (isEmpty) {
-    return /* @__PURE__ */ jsx(Typography, { sx: { color: "text.disabled" }, children: placeholder || "" });
-  }
-  if (!multiple) {
-    const item = options.find((opt) => opt.value === selected);
-    if (renderChipLabel && item) return /* @__PURE__ */ jsx(Fragment, { children: renderChipLabel(item) });
-    return /* @__PURE__ */ jsx(Fragment, { children: (_a = item == null ? void 0 : item.label) != null ? _a : String(selected) });
-  }
-  const selectedValuesArray = selected;
-  const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);
-  const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;
-  const handleDelete = (chipValue) => {
-    if (!onDeleteChip || !currentValues) return;
-    onDeleteChip(currentValues.filter((v) => v !== chipValue));
-  };
-  return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
-    displayedChips.map((val) => {
-      const item = options.find((o) => o.value === val);
-      if (!item) return null;
-      return /* @__PURE__ */ jsx(
-        Chip,
-        {
-          variant: chipVariant,
-          color: "primary",
-          size: "small",
-          label: renderChipLabel ? renderChipLabel(item) : item.label,
-          avatar: item.img ? /* @__PURE__ */ jsx(Avatar, { src: item.img }) : void 0,
-          onDelete: () => handleDelete(val),
-          deleteIcon: /* @__PURE__ */ jsx(ClearIcon, { fontSize: "small" })
-        },
-        String(val)
-      );
-    }),
-    hiddenChipsCount > 0 && /* @__PURE__ */ jsx(Chip, { size: "small", variant: chipVariant, label: `+${hiddenChipsCount} más` })
-  ] });
-}
 const renderSelectMenuItem = ({
   option,
   selected,
@@ -180,23 +77,12 @@ function Select(props) {
   const _a = props, {
     label,
     options = [],
-    value,
-    onChange,
     defaultValue,
     size = "small",
-    multiple = false,
-    filterable = false,
     placeholder,
     children,
     maxHeight = 300,
     maxWidth,
-    maxChipsToShow = 3,
-    renderChipLabel,
-    chipVariant = "outlined",
-    loadOptions,
-    loadingMessage = "Cargando opciones...",
-    noOptionsMessage = "No hay opciones",
-    debounceTimeout = 300,
     disabled = false,
     error = false,
     helperText,
@@ -204,27 +90,26 @@ function Select(props) {
     labelPosition = "outside",
     preset,
     sx,
-    className
+    className,
+    multiple = false,
+    maxChipsToShow = 3,
+    renderChipLabel,
+    chipVariant = "outlined",
+    name: _nameIgnored,
+    control: _controlIgnored,
+    validation: _validationIgnored,
+    value: _valueIgnored,
+    onChange: _onChangeIgnored,
+    onValueChange: _onValueChangeIgnored
   } = _a, rest = __objRest(_a, [
     "label",
     "options",
-    "value",
-    "onChange",
     "defaultValue",
     "size",
-    "multiple",
-    "filterable",
     "placeholder",
     "children",
     "maxHeight",
     "maxWidth",
-    "maxChipsToShow",
-    "renderChipLabel",
-    "chipVariant",
-    "loadOptions",
-    "loadingMessage",
-    "noOptionsMessage",
-    "debounceTimeout",
     "disabled",
     "error",
     "helperText",
@@ -232,136 +117,119 @@ function Select(props) {
     "labelPosition",
     "preset",
     "sx",
-    "className"
+    "className",
+    "multiple",
+    "maxChipsToShow",
+    "renderChipLabel",
+    "chipVariant",
+    // Separamos estos aunque no se usen directamente acá — evita que lleguen
+    // al DOM del MuiSelect via `{...rest}` y generen warnings de React.
+    "name",
+    "control",
+    "validation",
+    "value",
+    "onChange",
+    "onValueChange"
   ]);
   const theme = useTheme();
   const presetSx = resolvePreset("Select", preset, theme);
-  const isRHFMode = "control" in rest && rest.control !== void 0;
+  const isRHFMode = "control" in props && props.control !== void 0;
   const customRender = useMemo(() => {
     var _a2;
-    if (React__default.Children.count(children) === 1) {
-      const child = React__default.Children.only(children);
+    if (Children.count(children) === 1) {
+      const child = Children.only(children);
       if (isValidElement(child) && ((_a2 = child.type) == null ? void 0 : _a2.displayName) === "Option") {
         return child.props.children;
       }
     }
     return null;
   }, [children]);
-  const [search, setSearch] = useState("");
-  const [asyncOptions, setAsyncOptions] = useState([]);
-  const [loading, setLoading] = useState(false);
-  const debounceTimerRef = useRef(null);
-  const searchInputRef = useRef(null);
   const [isOpen, setIsOpen] = useState(false);
   const [isFocused, setIsFocused] = useState(false);
-  const isAsync = typeof loadOptions === "function";
-  const currentOptions = isAsync ? asyncOptions : options;
-  useEffect(() => {
-    var _a2;
-    if (!isAsync) return;
-    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
-    if (search) {
-      setLoading(true);
-      debounceTimerRef.current = window.setTimeout(() => {
-        loadOptions(search).then(setAsyncOptions).finally(() => {
-          var _a3;
-          setLoading(false);
-          (_a3 = searchInputRef.current) == null ? void 0 : _a3.focus();
-        });
-      }, debounceTimeout);
-    } else {
-      setAsyncOptions([]);
-      setLoading(false);
-      (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
-    }
-  }, [search, isAsync, loadOptions, debounceTimeout]);
-  const filteredOptions = useMemo(() => {
-    if (isAsync) return currentOptions;
-    if (!filterable) return currentOptions;
-    return filterOptionsByLabel(currentOptions, search);
-  }, [search, filterable, currentOptions, isAsync]);
-  const groupedOptions = useMemo(() => groupOptions(filteredOptions), [filteredOptions]);
-  const menuItems = useMemo(() => {
+  const groupedOptions = useMemo(() => groupOptions(options), [options]);
+  const isSelected = (currentValue, val) => {
+    if (Array.isArray(currentValue)) return currentValue.includes(val);
+    return currentValue === val;
+  };
+  const buildMenuItems = (currentValue) => {
     const items = [];
-    if (filterable || isAsync) {
-      items.push(
-        /* @__PURE__ */ jsx(
-          SelectSearchHeader,
-          {
-            value: search,
-            onChange: setSearch,
-            inputRef: searchInputRef
-          },
-          "search-header"
-        )
-      );
-    }
-    const noOptions = isGroupedOptionsEmpty(groupedOptions);
-    if (loading) {
-      items.push(
-        /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ jsx(CircularProgress, { size: 20 }),
-          /* @__PURE__ */ jsx(Typography, { children: loadingMessage })
-        ] }) }, "loading-message")
-      );
-    } else if (noOptions) {
-      items.push(
-        /* @__PURE__ */ jsx(MenuItem, { disabled: true, children: /* @__PURE__ */ jsx(Typography, { children: noOptionsMessage }) }, "no-options-message")
-      );
-    } else {
-      Object.entries(groupedOptions).forEach(([group, opts]) => {
-        if (group !== "__default") {
-          items.push(
-            /* @__PURE__ */ jsx(ListSubheader, { disableSticky: true, children: group }, group)
-          );
-        }
-        opts.forEach((opt) => {
-          var _a2;
-          const isSelected = multiple ? (_a2 = value == null ? void 0 : value.includes(opt.value)) != null ? _a2 : false : value === opt.value;
-          items.push(
-            renderSelectMenuItem({
-              option: opt,
-              selected: isSelected,
-              customRender
-            })
-          );
-        });
+    Object.entries(groupedOptions).forEach(([group, opts]) => {
+      if (group !== "__default") {
+        items.push(
+          /* @__PURE__ */ jsx(ListSubheader, { disableSticky: true, children: group }, group)
+        );
+      }
+      opts.forEach((opt) => {
+        items.push(
+          renderSelectMenuItem({
+            option: opt,
+            selected: isSelected(currentValue, opt.value),
+            customRender
+          })
+        );
       });
-    }
+    });
     return items;
-  }, [
-    groupedOptions,
-    customRender,
-    filterable,
-    isAsync,
-    search,
-    loading,
-    loadingMessage,
-    noOptionsMessage,
-    multiple,
-    value
-  ]);
-  const handleChangeInternal = (event, rhfOnChange) => {
-    const newValue = event.target.value;
-    if (isRHFMode) {
-      rhfOnChange == null ? void 0 : rhfOnChange(newValue);
-    } else {
-      onChange == null ? void 0 : onChange(newValue);
-    }
   };
   const mergedSx = [
     buildSelectSx(borderRadius, labelPosition),
     ...presetSx ? [presetSx] : [],
-    ...Array.isArray(sx) ? sx : [sx]
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
   ];
-  const renderSelect = (selectValue, selectOnChange, onBlur, inputRef, rhfError, rhfHelperText) => {
-    const finalError = rhfError != null ? rhfError : error;
+  const renderSelect = (selectValue, commitValue, onBlur, inputRef, rhfError, rhfHelperText) => {
+    const finalError = !!rhfError || !!error;
     const finalHelperText = rhfHelperText != null ? rhfHelperText : helperText;
     const inputElement = labelPosition === "floating" ? /* @__PURE__ */ jsx(OutlinedInput, { label }) : /* @__PURE__ */ jsx(OutlinedInput, {});
-    const normalizedValue = normalizeSelectValue(selectValue, multiple);
-    const isEmpty = isSelectValueEmpty(normalizedValue, multiple);
+    const normalizedValue = multiple ? selectValue != null ? selectValue : [] : normalizeSelectValue(selectValue);
+    const isEmpty = isSelectValueEmpty(normalizedValue);
     const shouldShrink = !isEmpty || isFocused || isOpen;
     const shouldDisplayPlaceholder = isEmpty && (isFocused || isOpen) && !!placeholder;
+    const renderValueFn = (selected) => {
+      var _a2;
+      if (multiple) {
+        const arr = selected != null ? selected : [];
+        if (arr.length === 0) {
+          return /* @__PURE__ */ jsx(Typography, { sx: { color: "text.disabled" }, children: placeholder != null ? placeholder : "" });
+        }
+        const visible = arr.slice(0, maxChipsToShow);
+        const hidden = arr.length - visible.length;
+        return /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
+          visible.map((val) => {
+            const item2 = options.find((o) => o.value === val);
+            if (!item2) return null;
+            return /* @__PURE__ */ jsx(
+              Chip,
+              {
+                variant: chipVariant,
+                color: "primary",
+                size,
+                label: renderChipLabel ? renderChipLabel(item2) : item2.label,
+                avatar: item2.img ? /* @__PURE__ */ jsx(Avatar, { src: item2.img }) : void 0,
+                onMouseDown: (e) => e.stopPropagation(),
+                onDelete: () => {
+                  commitValue(arr.filter((v) => v !== val));
+                }
+              },
+              String(val)
+            );
+          }),
+          hidden > 0 && /* @__PURE__ */ jsx(
+            Chip,
+            {
+              variant: chipVariant,
+              size,
+              label: `+${hidden} más`,
+              onMouseDown: (e) => e.stopPropagation()
+            }
+          )
+        ] });
+      }
+      if (isSelectValueEmpty(selected)) {
+        return /* @__PURE__ */ jsx(Typography, { sx: { color: "text.disabled" }, children: placeholder != null ? placeholder : "" });
+      }
+      const item = options.find((opt) => opt.value === selected);
+      return (_a2 = item == null ? void 0 : item.label) != null ? _a2 : String(selected);
+    };
     return /* @__PURE__ */ jsxs(
       FormControl,
       {
@@ -376,10 +244,9 @@ function Select(props) {
           /* @__PURE__ */ jsx(
             Select$1,
             __spreadProps(__spreadValues({
-              value: normalizedValue,
-              defaultValue,
               multiple,
-              onChange: selectOnChange,
+              value: normalizedValue,
+              onChange: (e) => commitValue(e.target.value),
               onBlur: (e) => {
                 setIsFocused(false);
                 onBlur == null ? void 0 : onBlur(e);
@@ -387,20 +254,7 @@ function Select(props) {
               onFocus: () => setIsFocused(true),
               onOpen: () => setIsOpen(true),
               onClose: () => setIsOpen(false),
-              renderValue: (selected) => /* @__PURE__ */ jsx(
-                SelectValue,
-                {
-                  selected,
-                  options: currentOptions,
-                  multiple,
-                  placeholder,
-                  maxChipsToShow,
-                  chipVariant,
-                  renderChipLabel,
-                  currentValues: value != null ? value : [],
-                  onDeleteChip: (next) => onChange == null ? void 0 : onChange(next)
-                }
-              ),
+              renderValue: renderValueFn,
               displayEmpty: shouldDisplayPlaceholder,
               input: inputElement,
               disabled,
@@ -411,7 +265,7 @@ function Select(props) {
               },
               inputRef
             }, rest), {
-              children: menuItems
+              children: buildMenuItems(normalizedValue)
             })
           ),
           finalHelperText && /* @__PURE__ */ jsx(FormHelperText, { children: finalHelperText })
@@ -420,25 +274,36 @@ function Select(props) {
     );
   };
   if (isRHFMode) {
-    const rhfProps = rest;
+    const { name, control, validation, onValueChange } = props;
     return /* @__PURE__ */ jsx(
       Controller,
       {
-        name: rhfProps.name,
-        control: rhfProps.control,
-        rules: rhfProps.validation,
-        render: ({ field, fieldState: { error: fieldError } }) => renderSelect(
-          field.value,
-          (e) => handleChangeInternal(e, field.onChange),
-          field.onBlur,
-          field.ref,
-          !!fieldError,
-          fieldError == null ? void 0 : fieldError.message
-        )
+        name,
+        control,
+        rules: validation,
+        defaultValue,
+        render: ({ field, fieldState: { error: fieldError } }) => {
+          var _a2;
+          return renderSelect(
+            (_a2 = field.value) != null ? _a2 : multiple ? [] : null,
+            (next) => {
+              field.onChange(next);
+              onValueChange == null ? void 0 : onValueChange(next);
+            },
+            field.onBlur,
+            field.ref,
+            !!fieldError,
+            fieldError == null ? void 0 : fieldError.message
+          );
+        }
       }
     );
   }
-  return renderSelect(value, (e) => handleChangeInternal(e));
+  const standardProps = props;
+  return renderSelect(
+    standardProps.value,
+    (next) => standardProps.onChange(next)
+  );
 }
 export {
   Option,