soda-heroui 0.11.18 → 0.11.20

package/dist/components/AutoRefresh.d.ts

@@ -1,5 +1,5 @@
-import { addToast } from "@heroui/react";
 import { FC, ReactNode } from "react";
+import { addToast } from "@heroui/react";
 import { FirstParameter } from "soda-type";
 export interface AutoRefreshProps extends FirstParameter<typeof addToast> {
     onRefresh?: () => void;

package/dist/components/EnumSelect.cjs

@@ -29,16 +29,51 @@ __webpack_require__.d(__webpack_exports__, {
     createEnumSelect: ()=>createEnumSelect
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const react_namespaceObject = require("@heroui/react");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_FormSelect_cjs_namespaceObject = require("./FormSelect.cjs");
-function EnumSelect({ enumObject, ...rest }) {
-    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_FormSelect_cjs_namespaceObject.FormSelect, {
-        items: (0, external_deepsea_tools_namespaceObject.getEnumOptions)(enumObject),
+const external_soda_hooks_namespaceObject = require("soda-hooks");
+const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
+function render({ label, value }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.SelectItem, {
+        children: label
+    }, value);
+}
+function EnumSelect({ enumObject, selectionMode, value: _value, onValueChange, emptyValue, ...rest }) {
+    const context = (0, external_react_namespaceObject.useContext)(external_FormProvider_cjs_namespaceObject.FormContext);
+    emptyValue ??= context.emptyValue;
+    const [value, setValue] = (0, external_soda_hooks_namespaceObject.useInputState)(_value);
+    const isNumberEnum = "object" == typeof enumObject && !Array.isArray(enumObject) && "number" == typeof Object.values(enumObject).at(0);
+    const selectedKeys = (0, external_react_namespaceObject.useMemo)(()=>(Array.isArray(value) ? value : (0, external_deepsea_tools_namespaceObject.isNonNullable)(value) ? [
+            value
+        ] : []).map(String), [
+        value
+    ]);
+    const onSelectionChange = (0, external_react_namespaceObject.useCallback)(function(selection) {
+        const keys = Array.from(selection).map((item)=>isNumberEnum ? (0, external_deepsea_tools_namespaceObject.intParser)(String(item)) : String(item));
+        const nextValue = "multiple" === selectionMode ? keys : keys.at(0) ?? (0, external_FormProvider_cjs_namespaceObject.getEmptyValue)(emptyValue);
+        setValue(nextValue);
+        null == onValueChange || onValueChange(nextValue);
+    }, [
+        selectionMode,
+        onValueChange,
+        setValue,
+        isNumberEnum,
+        emptyValue
+    ]);
+    const items = (0, external_react_namespaceObject.useMemo)(()=>Array.isArray(enumObject) ? enumObject.map(([label, value])=>({
+                label,
+                value
+            })) : enumObject ? (0, external_deepsea_tools_namespaceObject.getEnumOptions)(enumObject) : [], [
+        enumObject
+    ]);
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.Select, {
+        items: items,
+        selectionMode: selectionMode,
+        selectedKeys: isNumberEnum ? selectedKeys.map(String) : selectedKeys,
+        onSelectionChange: onSelectionChange,
         ...rest,
-        children: ({ label, value })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.SelectItem, {
-                children: label
-            }, value)
+        children: render
     });
 }
 function createEnumSelect(enumObject) {

package/dist/components/EnumSelect.d.ts

@@ -1,9 +1,26 @@
-import { EnumOption } from "deepsea-tools";
-import { ReactNode } from "react";
-import { StrictOmit, ValueOf } from "soda-type";
-import { FormSelectProps, SelectionMode } from "./FormSelect";
-export interface EnumSelectProps<T extends Record<string, string>, Mode extends SelectionMode = "single", FieldValue extends (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined = (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined> extends StrictOmit<FormSelectProps<Mode, FieldValue, EnumOption<T>>, "children" | "items"> {
-    enumObject: T;
+import { ComponentProps, ReactNode } from "react";
+import { Select } from "@heroui/react";
+import { ValueOf } from "deepsea-tools";
+import { EmptyValue, GetEmptyValue } from "./FormProvider";
+import { SelectionMode } from "./FormSelect";
+/** 获取枚举值的类型 */
+export type EnumValue<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[]> = Options extends any[] ? Options[number][1] : ValueOf<Options>;
+/** 获取选择器的值的类型 */
+export type SelectValue<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[], Mode extends SelectionMode = "single", DisallowEmptySelection extends boolean = false, Empty extends EmptyValue = "null"> = Mode extends "multiple" ? EnumValue<Options>[] : EnumValue<Options> | (DisallowEmptySelection extends true ? never : GetEmptyValue<Empty>);
+export interface EnumOption<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[]> {
+    label: ReactNode;
+    value: EnumValue<Options>;
 }
-export declare function EnumSelect<T extends Record<string, string>, Mode extends SelectionMode = "single", FieldValue extends (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined = (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined>({ enumObject, ...rest }: EnumSelectProps<T, Mode, FieldValue>): ReactNode;
-export declare function createEnumSelect<T extends Record<string, string>>(enumObject: T): <Mode extends SelectionMode = "single", FieldValue extends (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined = (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined>(props: StrictOmit<EnumSelectProps<T, Mode, FieldValue>, "enumObject">) => import("react/jsx-runtime").JSX.Element;
+export interface EnumSelectPropsBase<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[], Mode extends SelectionMode = "single", DisallowEmptySelection extends boolean = false, Empty extends EmptyValue = "null", Value = SelectValue<Options, Mode, DisallowEmptySelection, Empty>> extends Omit<ComponentProps<typeof Select<EnumOption<Options>>>, "items" | "selectionMode" | "disallowEmptySelection" | "children" | "selectedKeys" | "onSelectionChange" | "value" | "onValueChange"> {
+    enumObject?: Options;
+    selectionMode?: Mode;
+    disallowEmptySelection?: DisallowEmptySelection;
+    value?: Value;
+    onValueChange?: (value: Value) => void;
+    emptyValue?: Empty;
+}
+export interface EnumSelectProps<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[], Mode extends SelectionMode = "single", DisallowEmptySelection extends boolean = false, Empty extends EmptyValue = "null"> extends EnumSelectPropsBase<Options, Mode, DisallowEmptySelection, Empty> {
+}
+export declare function EnumSelect<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[], Mode extends SelectionMode = "single", DisallowEmptySelection extends boolean = false, Empty extends EmptyValue = "null">({ enumObject, selectionMode, value: _value, onValueChange, emptyValue, ...rest }: EnumSelectProps<Options, Mode, DisallowEmptySelection, Empty>): ReactNode;
+export declare function createEnumSelect<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[]>(enumObject?: Options): EnumSelectComponent<EnumValue<Options>>;
+export type EnumSelectComponent<Value extends string | number> = <Mode extends SelectionMode = "single", DisallowEmptySelection extends boolean = false, Empty extends EmptyValue = "null">(props: Omit<EnumSelectProps<[ReactNode, Value][], Mode, DisallowEmptySelection, Empty>, "enumObject">) => ReactNode;

package/dist/components/EnumSelect.js

@@ -1,15 +1,50 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { SelectItem } from "@heroui/react";
-import { getEnumOptions } from "deepsea-tools";
-import { FormSelect as external_FormSelect_js_FormSelect } from "./FormSelect.js";
-function EnumSelect({ enumObject, ...rest }) {
-    return /*#__PURE__*/ jsx(external_FormSelect_js_FormSelect, {
-        items: getEnumOptions(enumObject),
+import { useCallback, useContext, useMemo } from "react";
+import { Select, SelectItem } from "@heroui/react";
+import { getEnumOptions, intParser, isNonNullable } from "deepsea-tools";
+import { useInputState } from "soda-hooks";
+import { FormContext, getEmptyValue } from "./FormProvider.js";
+function render({ label, value }) {
+    return /*#__PURE__*/ jsx(SelectItem, {
+        children: label
+    }, value);
+}
+function EnumSelect({ enumObject, selectionMode, value: _value, onValueChange, emptyValue, ...rest }) {
+    const context = useContext(FormContext);
+    emptyValue ??= context.emptyValue;
+    const [value, setValue] = useInputState(_value);
+    const isNumberEnum = "object" == typeof enumObject && !Array.isArray(enumObject) && "number" == typeof Object.values(enumObject).at(0);
+    const selectedKeys = useMemo(()=>(Array.isArray(value) ? value : isNonNullable(value) ? [
+            value
+        ] : []).map(String), [
+        value
+    ]);
+    const onSelectionChange = useCallback(function(selection) {
+        const keys = Array.from(selection).map((item)=>isNumberEnum ? intParser(String(item)) : String(item));
+        const nextValue = "multiple" === selectionMode ? keys : keys.at(0) ?? getEmptyValue(emptyValue);
+        setValue(nextValue);
+        null == onValueChange || onValueChange(nextValue);
+    }, [
+        selectionMode,
+        onValueChange,
+        setValue,
+        isNumberEnum,
+        emptyValue
+    ]);
+    const items = useMemo(()=>Array.isArray(enumObject) ? enumObject.map(([label, value])=>({
+                label,
+                value
+            })) : enumObject ? getEnumOptions(enumObject) : [], [
+        enumObject
+    ]);
+    return /*#__PURE__*/ jsx(Select, {
+        items: items,
+        selectionMode: selectionMode,
+        selectedKeys: isNumberEnum ? selectedKeys.map(String) : selectedKeys,
+        onSelectionChange: onSelectionChange,
         ...rest,
-        children: ({ label, value })=>/*#__PURE__*/ jsx(SelectItem, {
-                children: label
-            }, value)
+        children: render
     });
 }
 function createEnumSelect(enumObject) {

package/dist/components/FormAutocomplete.d.ts

@@ -1,5 +1,5 @@
-import { Autocomplete, AutocompleteProps } from "@heroui/react";
 import { ReactNode } from "react";
+import { Autocomplete, AutocompleteProps } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 export interface FormAutocompleteProps<FieldValue extends string | null | undefined = string | null | undefined, RenderItem extends object = object> extends FieldComponentProps<typeof Autocomplete<RenderItem>, FieldValue> {
     component?: <T extends object>(props: AutocompleteProps<T>) => ReactNode;

package/dist/components/FormCalendar.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     FormCalendar: ()=>FormCalendar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const react_namespaceObject = require("@heroui/react");
 const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@heroui/react");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const time_cjs_namespaceObject = require("../utils/time.cjs");

package/dist/components/FormCalendar.d.ts

@@ -1,5 +1,5 @@
-import { Calendar, CalendarProps, DateValue } from "@heroui/react";
 import { ReactNode } from "react";
+import { Calendar, CalendarProps, DateValue } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";

package/dist/components/FormCalendar.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { Calendar } from "@heroui/react";
 import { useContext } from "react";
+import { Calendar } from "@heroui/react";
 import { FormContext } from "./FormProvider.js";
 import { getFieldProps } from "../utils/getFieldProps.js";
 import { getFieldValue, getOnChange } from "../utils/time.js";

package/dist/components/FormCheckbox.d.ts

@@ -1,5 +1,5 @@
-import { As, CheckboxProps, MergeWithAs } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, CheckboxProps, MergeWithAs } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormCheckboxProps<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, CheckboxProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormCheckboxGroup.d.ts

@@ -1,5 +1,5 @@
-import { As, CheckboxGroupProps, MergeWithAs } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, CheckboxGroupProps, MergeWithAs } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormCheckboxGroupProps<FieldValue extends string[] | null | undefined = string[] | null | undefined, AsComponent extends As = "div"> = MergeWithAs<ComponentPropsWithoutRef<"div">, ComponentPropsWithoutRef<AsComponent>, CheckboxGroupProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormDateInput.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     FormDateInput: ()=>FormDateInput
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const react_namespaceObject = require("@heroui/react");
 const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@heroui/react");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const time_cjs_namespaceObject = require("../utils/time.cjs");

package/dist/components/FormDateInput.d.ts

@@ -1,5 +1,5 @@
-import { DateInput, DateInputProps, DateValue } from "@heroui/react";
 import { ReactNode } from "react";
+import { DateInput, DateInputProps, DateValue } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";

package/dist/components/FormDateInput.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { DateInput } from "@heroui/react";
 import { useContext } from "react";
+import { DateInput } from "@heroui/react";
 import { FormContext } from "./FormProvider.js";
 import { getFieldProps } from "../utils/getFieldProps.js";
 import { getFieldValue, getOnChange } from "../utils/time.js";

package/dist/components/FormDatePicker.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     FormDatePicker: ()=>FormDatePicker
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const react_namespaceObject = require("@heroui/react");
 const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@heroui/react");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const time_cjs_namespaceObject = require("../utils/time.cjs");

package/dist/components/FormDatePicker.d.ts

@@ -1,5 +1,5 @@
-import { DatePicker, DatePickerProps, DateValue } from "@heroui/react";
 import { ReactNode } from "react";
+import { DatePicker, DatePickerProps, DateValue } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";

package/dist/components/FormDatePicker.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { DatePicker } from "@heroui/react";
 import { useContext } from "react";
+import { DatePicker } from "@heroui/react";
 import { FormContext } from "./FormProvider.js";
 import { getFieldProps } from "../utils/getFieldProps.js";
 import { getFieldValue, getOnChange } from "../utils/time.js";

package/dist/components/FormDateRangePicker.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     FormDateRangePicker: ()=>FormDateRangePicker
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const react_namespaceObject = require("@heroui/react");
 const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@heroui/react");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const range_cjs_namespaceObject = require("../utils/range.cjs");

package/dist/components/FormDateRangePicker.d.ts

@@ -1,5 +1,5 @@
-import { DateRangePicker, DateRangePickerProps, DateValue } from "@heroui/react";
 import { ReactNode } from "react";
+import { DateRangePicker, DateRangePickerProps, DateValue } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";

package/dist/components/FormDateRangePicker.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { DateRangePicker } from "@heroui/react";
 import { useContext } from "react";
+import { DateRangePicker } from "@heroui/react";
 import { FormContext } from "./FormProvider.js";
 import { getFieldProps } from "../utils/getFieldProps.js";
 import { getFieldRangeValue, getOnRangeChange } from "../utils/range.js";

package/dist/components/FormInput.d.ts

@@ -1,5 +1,5 @@
-import { As, InputProps, MergeWithAs } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, InputProps, MergeWithAs } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormInputProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, InputProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormInputOtp.d.ts

@@ -1,5 +1,5 @@
-import { As, InputOtpProps, MergeWithAs } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, InputOtpProps, MergeWithAs } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormInputOtpProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, InputOtpProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormNumberInput.d.ts

@@ -1,5 +1,5 @@
-import { As, MergeWithAs, NumberInputProps } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, NumberInputProps } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormNumberInputProps<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, NumberInputProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormPagination.d.ts

@@ -1,5 +1,5 @@
-import { As, MergeWithAs, PaginationProps } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, PaginationProps } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormPaginationProps<FieldValue extends number | null | undefined = number | null | undefined, AsComponent extends As = "nav"> = MergeWithAs<ComponentPropsWithoutRef<"nav">, ComponentPropsWithoutRef<AsComponent>, PaginationProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormProvider.cjs

@@ -30,8 +30,8 @@ __webpack_require__.d(__webpack_exports__, {
     getEmptyValue: ()=>getEmptyValue
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 const external_react_namespaceObject = require("react");
+const external_deepsea_tools_namespaceObject = require("deepsea-tools");
 function getEmptyValue(value) {
     return "undefined" === value ? void 0 : null;
 }

package/dist/components/FormProvider.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { assign as external_deepsea_tools_assign } from "deepsea-tools";
 import { createContext, useContext } from "react";
+import { assign as external_deepsea_tools_assign } from "deepsea-tools";
 function getEmptyValue(value) {
     return "undefined" === value ? void 0 : null;
 }

package/dist/components/FormRadioGroup.d.ts

@@ -1,5 +1,5 @@
-import { As, MergeWithAs, RadioGroupProps } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, RadioGroupProps } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormRadioGroupProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "div"> = MergeWithAs<ComponentPropsWithoutRef<"div">, ComponentPropsWithoutRef<AsComponent>, RadioGroupProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormRangeCalendar.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     FormRangeCalendar: ()=>FormRangeCalendar
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const react_namespaceObject = require("@heroui/react");
 const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@heroui/react");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const range_cjs_namespaceObject = require("../utils/range.cjs");

package/dist/components/FormRangeCalendar.d.ts

@@ -1,5 +1,5 @@
-import { DateValue, RangeCalendar, RangeCalendarProps } from "@heroui/react";
 import { ReactNode } from "react";
+import { DateValue, RangeCalendar, RangeCalendarProps } from "@heroui/react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";

package/dist/components/FormRangeCalendar.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { RangeCalendar } from "@heroui/react";
 import { useContext } from "react";
+import { RangeCalendar } from "@heroui/react";
 import { FormContext } from "./FormProvider.js";
 import { getFieldProps } from "../utils/getFieldProps.js";
 import { getFieldRangeValue, getOnRangeChange } from "../utils/range.js";

package/dist/components/FormSelect.cjs

@@ -28,9 +28,9 @@ __webpack_require__.d(__webpack_exports__, {
     FormSelect: ()=>FormSelect
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
 const react_namespaceObject = require("@heroui/react");
 const external_deepsea_tools_namespaceObject = require("deepsea-tools");
-const external_react_namespaceObject = require("react");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 function FormSelect({ field, emptyValue, component: Select2 = react_namespaceObject.Select, selectionMode, labelPlacement, classNames: { base, label, ...restClassNames } = {}, ...rest }) {

package/dist/components/FormSelect.d.ts

@@ -1,6 +1,6 @@
+import { ReactNode } from "react";
 import { Select, SelectProps } from "@heroui/react";
 import { Key } from "@react-types/shared";
-import { ReactNode } from "react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";

package/dist/components/FormSelect.js

@@ -1,8 +1,8 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
+import { useContext } from "react";
 import { Select } from "@heroui/react";
 import { clsx, isNonNullable } from "deepsea-tools";
-import { useContext } from "react";
 import { getFieldProps } from "../utils/getFieldProps.js";
 import { FormContext, getEmptyValue } from "./FormProvider.js";
 function FormSelect({ field, emptyValue, component: Select2 = Select, selectionMode, labelPlacement, classNames: { base, label, ...restClassNames } = {}, ...rest }) {

package/dist/components/FormSwitch.d.ts

@@ -1,5 +1,5 @@
-import { As, MergeWithAs, SwitchProps } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, SwitchProps } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormSwitchProps<FieldValue extends boolean | null | undefined = boolean | null | undefined, AsComponent extends As = "input"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, SwitchProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormTextarea.d.ts

@@ -1,5 +1,5 @@
-import { As, MergeWithAs, TextAreaProps } from "@heroui/react";
 import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { As, MergeWithAs, TextAreaProps } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 export type FormTextareaProps<FieldValue extends string | null | undefined = string | null | undefined, AsComponent extends As = "textarea"> = MergeWithAs<ComponentPropsWithoutRef<"input">, ComponentPropsWithoutRef<AsComponent>, TextAreaProps, AsComponent> & {
     field: Field<FieldValue>;

package/dist/components/FormTimeInput.cjs

@@ -28,8 +28,8 @@ __webpack_require__.d(__webpack_exports__, {
     FormTimeInput: ()=>FormTimeInput
 });
 const jsx_runtime_namespaceObject = require("react/jsx-runtime");
-const react_namespaceObject = require("@heroui/react");
 const external_react_namespaceObject = require("react");
+const react_namespaceObject = require("@heroui/react");
 const external_FormProvider_cjs_namespaceObject = require("./FormProvider.cjs");
 const getFieldProps_cjs_namespaceObject = require("../utils/getFieldProps.cjs");
 const time_cjs_namespaceObject = require("../utils/time.cjs");

package/dist/components/FormTimeInput.d.ts

@@ -1,6 +1,6 @@
+import { ReactNode } from "react";
 import { TimeInput, TimeInputProps } from "@heroui/react";
 import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
-import { ReactNode } from "react";
 import { FieldComponentProps } from "soda-tanstack-form";
 import { StrictOmit } from "soda-type";
 import { EmptyValue } from "./FormProvider";

package/dist/components/FormTimeInput.js

@@ -1,7 +1,7 @@
 "use client"
 import { jsx } from "react/jsx-runtime";
-import { TimeInput } from "@heroui/react";
 import { useContext } from "react";
+import { TimeInput } from "@heroui/react";
 import { FormContext } from "./FormProvider.js";
 import { getFieldProps } from "../utils/getFieldProps.js";
 import { getFieldValue, getOnChange } from "../utils/time.js";

package/dist/utils/range.d.ts

@@ -1,5 +1,5 @@
-import { DateValue, RangeValue } from "@heroui/react";
 import { SetStateAction } from "react";
+import { DateValue, RangeValue } from "@heroui/react";
 import { Field } from "soda-tanstack-form";
 import { EmptyValue } from "../components/FormProvider";
 import { DefaultTime } from "./getTimeValue";

package/dist/utils/time.d.ts

@@ -1,5 +1,5 @@
-import { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
 import { SetStateAction } from "react";
+import { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date";
 import { Field } from "soda-tanstack-form";
 import { EmptyValue } from "../components/FormProvider";
 import { DefaultTime } from "./getTimeValue";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "soda-heroui",
-  "version": "0.11.18",
+  "version": "0.11.20",
   "description": "",
   "type": "module",
   "exports": {
@@ -37,8 +37,8 @@
   "dependencies": {
     "@internationalized/date": "^3.10.0",
     "@tanstack/react-form": "^1.23.6",
-    "deepsea-tools": "5.42.3",
-    "soda-hooks": "6.15.1",
+    "soda-hooks": "6.15.2",
+    "deepsea-tools": "5.42.4",
     "soda-tanstack-form": "0.3.1",
     "soda-type": "6.7.1"
   },

package/src/components/AutoRefresh.tsx

@@ -1,5 +1,5 @@
-import { Button, PressEvent, addToast } from "@heroui/react"
 import { FC, ReactNode } from "react"
+import { Button, PressEvent, addToast } from "@heroui/react"
 import { useAutoRefresh } from "soda-hooks"
 import { FirstParameter } from "soda-type"
 

package/src/components/EnumSelect.tsx

@@ -1,46 +1,124 @@
 "use client"
 
-import { SelectItem } from "@heroui/react"
-import { EnumOption, getEnumOptions } from "deepsea-tools"
-import { ReactNode } from "react"
-import { StrictOmit, ValueOf } from "soda-type"
+import { ComponentProps, ReactNode, useCallback, useContext, useMemo } from "react"
+import { Select, SelectItem, SharedSelection } from "@heroui/react"
+import { ValueOf, getEnumOptions, intParser, isNonNullable } from "deepsea-tools"
+import { useInputState } from "soda-hooks"
 
-import { FormSelect, FormSelectProps, SelectionMode } from "./FormSelect"
+import { EmptyValue, FormContext, GetEmptyValue, getEmptyValue } from "./FormProvider"
+import { SelectionMode } from "./FormSelect"
+
+/** 获取枚举值的类型 */
+export type EnumValue<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[]> =
+    Options extends any[] ? Options[number][1] : ValueOf<Options>
+
+/** 获取选择器的值的类型 */
+export type SelectValue<
+    Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[],
+    Mode extends SelectionMode = "single",
+    DisallowEmptySelection extends boolean = false,
+    Empty extends EmptyValue = "null",
+> = Mode extends "multiple" ? EnumValue<Options>[] : EnumValue<Options> | (DisallowEmptySelection extends true ? never : GetEmptyValue<Empty>)
+
+export interface EnumOption<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[]> {
+    label: ReactNode
+    value: EnumValue<Options>
+}
+
+export interface EnumSelectPropsBase<
+    Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[],
+    Mode extends SelectionMode = "single",
+    DisallowEmptySelection extends boolean = false,
+    Empty extends EmptyValue = "null",
+    Value = SelectValue<Options, Mode, DisallowEmptySelection, Empty>,
+> extends Omit<
+        ComponentProps<typeof Select<EnumOption<Options>>>,
+        "items" | "selectionMode" | "disallowEmptySelection" | "children" | "selectedKeys" | "onSelectionChange" | "value" | "onValueChange"
+    > {
+    enumObject?: Options
+    selectionMode?: Mode
+    disallowEmptySelection?: DisallowEmptySelection
+    value?: Value
+    onValueChange?: (value: Value) => void
+    emptyValue?: Empty
+}
 
 export interface EnumSelectProps<
-    T extends Record<string, string>,
+    Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[],
     Mode extends SelectionMode = "single",
-    FieldValue extends (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined =
-        | (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>)
-        | null
-        | undefined,
-> extends StrictOmit<FormSelectProps<Mode, FieldValue, EnumOption<T>>, "children" | "items"> {
-    enumObject: T
+    DisallowEmptySelection extends boolean = false,
+    Empty extends EmptyValue = "null",
+> extends EnumSelectPropsBase<Options, Mode, DisallowEmptySelection, Empty> {}
+
+function render<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[]>({
+    label,
+    value,
+}: EnumOption<Options>) {
+    return <SelectItem key={value}>{label}</SelectItem>
 }
 
 export function EnumSelect<
-    T extends Record<string, string>,
+    Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[],
     Mode extends SelectionMode = "single",
-    FieldValue extends (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined =
-        | (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>)
-        | null
-        | undefined,
->({ enumObject, ...rest }: EnumSelectProps<T, Mode, FieldValue>): ReactNode {
+    DisallowEmptySelection extends boolean = false,
+    Empty extends EmptyValue = "null",
+>({ enumObject, selectionMode, value: _value, onValueChange, emptyValue, ...rest }: EnumSelectProps<Options, Mode, DisallowEmptySelection, Empty>): ReactNode {
+    const context = useContext(FormContext)
+    emptyValue ??= context.emptyValue as Empty
+
+    type Value = SelectValue<Options, Mode, DisallowEmptySelection, Empty>
+
+    const [value, setValue] = useInputState(_value as Value)
+    const isNumberEnum = typeof enumObject === "object" && !Array.isArray(enumObject) && typeof Object.values(enumObject).at(0) === "number"
+    const selectedKeys = useMemo(() => (Array.isArray(value) ? value : isNonNullable(value) ? [value] : []).map(String), [value])
+
+    const onSelectionChange = useCallback(
+        function onSelectionChange(selection: SharedSelection) {
+            const keys = Array.from(selection).map(item => (isNumberEnum ? intParser(String(item)) : String(item)) as ValueOf<Options>)
+            const nextValue = (selectionMode === "multiple" ? keys : (keys.at(0) ?? getEmptyValue(emptyValue))) as Value
+            setValue(nextValue)
+            onValueChange?.(nextValue)
+        },
+        [selectionMode, onValueChange, setValue, isNumberEnum, emptyValue],
+    )
+
+    const items = useMemo(
+        () =>
+            (Array.isArray(enumObject)
+                ? enumObject.map(([label, value]) => ({ label, value }))
+                : enumObject
+                  ? getEnumOptions(enumObject)
+                  : []) as EnumOption<Options>[],
+        [enumObject],
+    )
+
     return (
-        <FormSelect items={getEnumOptions(enumObject)} {...rest}>
-            {({ label, value }) => <SelectItem key={value}>{label}</SelectItem>}
-        </FormSelect>
+        <Select
+            items={items}
+            selectionMode={selectionMode}
+            selectedKeys={isNumberEnum ? selectedKeys.map(String) : selectedKeys}
+            onSelectionChange={onSelectionChange}
+            {...rest}
+        >
+            {render}
+        </Select>
     )
 }
 
-export function createEnumSelect<T extends Record<string, string>>(enumObject: T) {
-    return function FormSelect<
-        Mode extends SelectionMode = "single",
-        FieldValue extends (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>) | null | undefined =
-            | (Mode extends "multiple" ? ValueOf<T>[] : ValueOf<T>)
-            | null
-            | undefined,
-    >(props: StrictOmit<EnumSelectProps<T, Mode, FieldValue>, "enumObject">) {
-        return <EnumSelect enumObject={enumObject} {...props} />
-    }
+export function createEnumSelect<Options extends Record<string, string | number> | ([ReactNode, string | number] | readonly [ReactNode, string | number])[]>(
+    enumObject?: Options,
+): EnumSelectComponent<EnumValue<Options>> {
+    return function EnumSelect2<Mode extends SelectionMode = "single", DisallowEmptySelection extends boolean = false, Empty extends EmptyValue = "null">(
+        props: Omit<EnumSelectProps<Options, Mode, DisallowEmptySelection, Empty>, "enumObject">,
+    ): ReactNode {
+        return <EnumSelect<Options, Mode, DisallowEmptySelection, Empty> enumObject={enumObject} {...props} />
+    } as EnumSelectComponent<EnumValue<Options>>
 }
+
+export type EnumSelectComponent<Value extends string | number> = <
+    Mode extends SelectionMode = "single",
+    DisallowEmptySelection extends boolean = false,
+    Empty extends EmptyValue = "null",
+>(
+    props: Omit<EnumSelectProps<[ReactNode, Value][], Mode, DisallowEmptySelection, Empty>, "enumObject">,
+) => ReactNode

package/src/components/ErrorMessage.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { isNonNullable } from "deepsea-tools"
 import { ComponentProps, FC } from "react"
+import { isNonNullable } from "deepsea-tools"
 
 export interface ErrorMessageItem {
     message: string

package/src/components/FormAutocomplete.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { Autocomplete, AutocompleteProps } from "@heroui/react"
 import { Key, ReactNode } from "react"
+import { Autocomplete, AutocompleteProps } from "@heroui/react"
 import { FieldComponentProps } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormCalendar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { Calendar, CalendarProps, DateValue } from "@heroui/react"
 import { ReactNode, useContext } from "react"
+import { Calendar, CalendarProps, DateValue } from "@heroui/react"
 import { FieldComponentProps } from "soda-tanstack-form"
 import { StrictOmit } from "soda-type"
 

package/src/components/FormCheckbox.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, Checkbox, CheckboxProps, MergeWithAs } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, Checkbox, CheckboxProps, MergeWithAs } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormCheckboxGroup.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, CheckboxGroup, CheckboxGroupProps, MergeWithAs } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, CheckboxGroup, CheckboxGroupProps, MergeWithAs } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormDateInput.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { DateInput, DateInputProps, DateValue } from "@heroui/react"
 import { ReactNode, useContext } from "react"
+import { DateInput, DateInputProps, DateValue } from "@heroui/react"
 import { FieldComponentProps } from "soda-tanstack-form"
 import { StrictOmit } from "soda-type"
 

package/src/components/FormDatePicker.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { DatePicker, DatePickerProps, DateValue } from "@heroui/react"
 import { ReactNode, useContext } from "react"
+import { DatePicker, DatePickerProps, DateValue } from "@heroui/react"
 import { FieldComponentProps } from "soda-tanstack-form"
 import { StrictOmit } from "soda-type"
 

package/src/components/FormDateRangePicker.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { DateRangePicker, DateRangePickerProps, DateValue } from "@heroui/react"
 import { ReactNode, useContext } from "react"
+import { DateRangePicker, DateRangePickerProps, DateValue } from "@heroui/react"
 import { Field, FieldComponentProps } from "soda-tanstack-form"
 import { StrictOmit } from "soda-type"
 

package/src/components/FormInput.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, Input, InputProps, MergeWithAs } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, Input, InputProps, MergeWithAs } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormInputOtp.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, InputOtp, InputOtpProps, MergeWithAs } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, InputOtp, InputOtpProps, MergeWithAs } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormNumberInput.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, MergeWithAs, NumberInput, NumberInputProps } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, NumberInput, NumberInputProps } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormPagination.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, MergeWithAs, Pagination, PaginationProps } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, Pagination, PaginationProps } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormProvider.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { assign } from "deepsea-tools"
 import { FC, ReactNode, createContext, useContext } from "react"
+import { assign } from "deepsea-tools"
 
 export type EmptyValue = "null" | "undefined"
 

package/src/components/FormRadioGroup.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, MergeWithAs, RadioGroup, RadioGroupProps } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, RadioGroup, RadioGroupProps } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormRangeCalendar.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { DateValue, RangeCalendar, RangeCalendarProps } from "@heroui/react"
 import { ReactNode, useContext } from "react"
+import { DateValue, RangeCalendar, RangeCalendarProps } from "@heroui/react"
 import { Field, FieldComponentProps } from "soda-tanstack-form"
 import { StrictOmit } from "soda-type"
 

package/src/components/FormSelect.tsx

@@ -1,9 +1,9 @@
 "use client"
 
+import { ReactNode, useContext } from "react"
 import { Select, SelectProps } from "@heroui/react"
 import { Key } from "@react-types/shared"
 import { clsx, isNonNullable } from "deepsea-tools"
-import { ReactNode, useContext } from "react"
 import { FieldComponentProps } from "soda-tanstack-form"
 import { StrictOmit } from "soda-type"
 

package/src/components/FormSwitch.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, MergeWithAs, Switch, SwitchProps } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, Switch, SwitchProps } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormTextarea.tsx

@@ -1,7 +1,7 @@
 "use client"
 
-import { As, MergeWithAs, TextAreaProps, Textarea } from "@heroui/react"
 import { ComponentPropsWithoutRef, ReactNode } from "react"
+import { As, MergeWithAs, TextAreaProps, Textarea } from "@heroui/react"
 import { Field } from "soda-tanstack-form"
 
 import { getFieldProps } from "../utils/getFieldProps"

package/src/components/FormTimeInput.tsx

@@ -1,8 +1,8 @@
 "use client"
 
+import { ReactNode, useContext } from "react"
 import { TimeInput, TimeInputProps } from "@heroui/react"
 import { CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date"
-import { ReactNode, useContext } from "react"
 import { FieldComponentProps } from "soda-tanstack-form"
 import { StrictOmit } from "soda-type"
 

package/src/utils/range.ts

@@ -1,6 +1,6 @@
+import { SetStateAction } from "react"
 import { DateValue, RangeValue } from "@heroui/react"
 import { isNonNullable } from "deepsea-tools"
-import { SetStateAction } from "react"
 import { Field } from "soda-tanstack-form"
 
 import { EmptyValue, getEmptyValue } from "@/components/FormProvider"

package/src/utils/time.ts

@@ -1,6 +1,6 @@
+import { SetStateAction } from "react"
 import { CalendarDate, CalendarDateTime, Time, ZonedDateTime } from "@internationalized/date"
 import { isNonNullable } from "deepsea-tools"
-import { SetStateAction } from "react"
 import { Field } from "soda-tanstack-form"
 
 import { EmptyValue, getEmptyValue } from "@/components/FormProvider"