@react-fabric/form 1.0.0-beta.47 → 1.0.0-beta.48

package/dist/esm/input/Switch.js

@@ -6,7 +6,8 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import classNames from 'classnames';
 import { useState, useDeferredValue, useEffect, useCallback, Fragment } from 'react';
 import { ErrorIcon } from '../internal/ErrorIcon.js';
-import '@react-fabric/utilities';
+import '@floating-ui/react';
+import '@react-fabric/core';
 import { getBgClass, getColor, getColorClass } from '../utils/getColor.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 

package/dist/esm/input/Textarea.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useState, useDeferredValue, useRef, useEffect, useCallback } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsx } from 'react/jsx-runtime';
 
@@ -60,6 +60,9 @@ var Textarea = function Textarea(_ref) {
       setFixedRows(rows);
     }
   }, [actualValue, variableRows, rows, maxRows]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed, {
+    preventDefault: !!onEnterPressed
+  });
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue && !disabled && !readOnly,
     onClear: handleChange,
@@ -89,9 +92,7 @@ var Textarea = function Textarea(_ref) {
       onBlur: onBlur,
       onFocus: onFocus,
       onChange: handleChange,
-      onKeyDown: handleEnter(onEnterPressed, {
-        preventDefault: !!onEnterPressed
-      })
+      onKeyDown: handleEnterPressed
     })
   }));
 };

package/dist/esm/internal/FieldWrapper.js

@@ -1,6 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
+import { ErrorIcon } from './ErrorIcon.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 /*
@@ -39,6 +40,8 @@ var FieldWrapper = function FieldWrapper(_ref) {
     children = _ref.children,
     listing = _ref.listing,
     className = _ref.className,
+    invalid = _ref.invalid,
+    error = _ref.error,
     isInner = _ref["data-inner"];
   return /*#__PURE__*/jsxs("div", {
     className: classNames("fabric-fieldWrapper", className, inline ? "flex flex-nowrap gap-1" : "block"),
@@ -63,6 +66,9 @@ var FieldWrapper = function FieldWrapper(_ref) {
       }), required && /*#__PURE__*/jsx("span", {
         className: "text-danger-500 select-none flex-content text-[10px]",
         children: "\u273D"
+      }), /*#__PURE__*/jsx(ErrorIcon, {
+        invalid: invalid,
+        error: error
       }), /*#__PURE__*/jsx("div", {
         className: "flex-1"
       }), appendLabel && /*#__PURE__*/jsx("span", {

package/dist/esm/select/AutoComplete.js

@@ -17,8 +17,8 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var AutoComplete = function AutoComplete(_ref) {
   var _refs$reference$curre;
-  _ref.ref;
-    var name = _ref.name,
+  var ref = _ref.ref,
+    name = _ref.name,
     value = _ref.value,
     invalid = _ref.invalid,
     readOnly = _ref.readOnly,
@@ -220,6 +220,7 @@ var AutoComplete = function AutoComplete(_ref) {
         "data-testid": name,
         name: name,
         size: 1,
+        ref: ref,
         onInput: onInput,
         autoFocus: autoFocus,
         rows: !multiple && expandOnEdit && state.open ? 5 : 1,

package/dist/esm/select/List.js

@@ -13,7 +13,7 @@ import { Options } from './Options.js';
 import { useSelect } from './useSelect.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "placeholder", "autoFocus", "options", "height", "groupProperty", "labelProperty", "valueProperty", "multiple", "allowCreate", "searchable", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "emptyDisplay", "invalid", "error", "allowClear", "decorateStart", "decorateEnd", "data-inner", "data-hide-selected"];
+var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "placeholder", "autoFocus", "options", "height", "groupProperty", "labelProperty", "valueProperty", "sortProperty", "multiple", "allowCreate", "searchable", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed", "emptyDisplay", "invalid", "error", "allowClear", "decorateStart", "decorateEnd", "data-inner", "data-hide-selected"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var List = function List(_ref) {
@@ -31,6 +31,7 @@ var List = function List(_ref) {
     groupProperty = _ref.groupProperty,
     labelProperty = _ref.labelProperty,
     valueProperty = _ref.valueProperty,
+    sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,
     allowCreate = _ref.allowCreate,
     searchable = _ref.searchable,
@@ -63,6 +64,7 @@ var List = function List(_ref) {
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,

package/dist/esm/select/Select.js

@@ -12,7 +12,7 @@ import { Options } from './Options.js';
 import { useSelect } from './useSelect.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "defaultOpen", "hideHandle", "groupProperty", "labelProperty", "valueProperty", "multiple", "searchable", "allowCreate", "emptyDisplay", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
+var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "options", "defaultOpen", "hideHandle", "groupProperty", "labelProperty", "valueProperty", "sortProperty", "multiple", "searchable", "allowCreate", "emptyDisplay", "createOption", "matcher", "renderer", "onQuery", "onChange", "onSelect", "onEnterPressed"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var Select = function Select(_ref) {
@@ -35,6 +35,7 @@ var Select = function Select(_ref) {
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
     valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,
     searchable = _ref.searchable,
     allowCreate = _ref.allowCreate,
@@ -55,6 +56,7 @@ var Select = function Select(_ref) {
       groupProperty: groupProperty,
       labelProperty: labelProperty,
       valueProperty: valueProperty,
+      sortProperty: sortProperty,
       allowCreate: allowCreate,
       createOption: createOption,
       matcher: matcher,

package/dist/esm/select/useSelect.js

@@ -27,6 +27,7 @@ var useSelect = function useSelect(_ref) {
     valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    sortProperty = _ref.sortProperty,
     _ref$createOption = _ref.createOption,
     createOption = _ref$createOption === void 0 ? makeOption : _ref$createOption,
     matcher = _ref.matcher,
@@ -135,7 +136,7 @@ var useSelect = function useSelect(_ref) {
         if (autoComplete && action.query !== undefined) {
           optionList = dedupe([action.query].concat(_toConsumableArray(optionList)));
         }
-        optionList = optionList.sort(compareValues("asc", labelProperty));
+        if (sortProperty) optionList = optionList.sort(compareValues("asc", sortProperty));
         var grouped = groupBy(optionList, groupProperty, "");
         if (action.open) _newState.open = true;
         _newState.items = [];

package/dist/esm/types/schema.js

@@ -28,6 +28,7 @@ var DATA_TYPES = /*#__PURE__*/function (DATA_TYPES) {
   DATA_TYPES["COLOR"] = "color";
   DATA_TYPES["BOOL"] = "bool";
   DATA_TYPES["DATE"] = "date";
+  DATA_TYPES["DATETIME"] = "datetime";
   DATA_TYPES["STRING"] = "string";
   DATA_TYPES["NUMBER"] = "number";
   DATA_TYPES["RANGE"] = "range";

package/dist/esm/utils/eventHandlers.js

@@ -1,6 +1,7 @@
 'use client';
 
-import { debounce } from '@react-fabric/utilities';
+import { useFloatingTree } from '@floating-ui/react';
+import { useDebounce } from '@react-fabric/core';
 
 /*
  * React Fabric
@@ -26,16 +27,21 @@ import { debounce } from '@react-fabric/utilities';
  */
 
 /** ***************** common handler for enter press *******************/
-var handleEnter = function handleEnter(callback) {
+var useHandleEnter = function useHandleEnter(callback) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$stopPropagation = _ref.stopPropagation,
     stopPropagation = _ref$stopPropagation === void 0 ? false : _ref$stopPropagation,
     _ref$preventDefault = _ref.preventDefault,
     preventDefault = _ref$preventDefault === void 0 ? false : _ref$preventDefault;
-  var cbHandle = debounce(callback !== null && callback !== void 0 ? callback : function () {
+  var cbHandle = useDebounce(callback !== null && callback !== void 0 ? callback : function () {
     return undefined;
-  }, 100);
+  }, [callback], 100);
+  var tree = useFloatingTree();
   return function (e) {
+    // prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
+    if (tree && e.key !== "Escape") {
+      e === null || e === void 0 || e.stopPropagation();
+    }
     if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
       if (stopPropagation) e === null || e === void 0 || e.stopPropagation();
       cbHandle(e);
@@ -47,4 +53,4 @@ var handleEnter = function handleEnter(callback) {
   };
 };
 
-export { handleEnter };
+export { useHandleEnter };

package/dist/types/form/Form.d.ts

@@ -1,6 +1,9 @@
 import { type yup } from "@react-fabric/utilities";
 import { type PropsWithChildren, type Ref } from "react";
 import { type FormState } from "react-hook-form";
+type NestedKeyOf<T extends object> = {
+    [K in keyof T & (string | number)]: T[K] extends object ? `${K}` | `${K}.${NestedKeyOf<T[K]>}` : K;
+}[keyof T & (string | number)];
 export interface FormRef<K extends KeyValue> {
     state: FormState<K>;
     reset: () => void;
@@ -8,7 +11,7 @@ export interface FormRef<K extends KeyValue> {
     submit: () => void;
     validate: () => Promise<boolean>;
     getValues: () => K;
-    setValue: (key: keyof K, value: AnyObject) => void;
+    setValue: (key: NestedKeyOf<K>, value: AnyObject) => void;
     setValues: (values: K) => void;
 }
 export interface FormProps<K extends KeyValue = KeyValue> {
@@ -31,3 +34,4 @@ export interface FormProps<K extends KeyValue = KeyValue> {
     onSubmit?: (values: K) => void;
 }
 export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/types/input/AvatarInput.d.ts

@@ -10,14 +10,17 @@ export interface Props extends RefProp {
      */
     value?: string;
     /**
-     * avatar stream src
+     * avatar name
      */
-    src?: string;
+    avatarName?: string;
     size?: string | number;
     /**
      * upload handler to store file in temp storage
      */
     uploadHandler: UploadHandler;
+    /**
+     * file stream path
+     */
     fileUrl?: (path: string) => string;
     /**
      * change handler
@@ -28,4 +31,4 @@ export interface Props extends RefProp {
      */
     onChange?: (path: string) => void;
 }
-export declare const AvatarInput: ({ src, size, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarInput: ({ size, avatarName, value, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/dist/types/internal/FieldWrapper.d.ts

@@ -1 +1 @@
-export declare const FieldWrapper: ({ label, appendLabel, width, labelWidth, inline, info, disabled, required, children, listing, className, "data-inner": isInner, }: KeyValue) => import("react/jsx-runtime").JSX.Element;
+export declare const FieldWrapper: ({ label, appendLabel, width, labelWidth, inline, info, disabled, required, children, listing, className, invalid, error, "data-inner": isInner, }: KeyValue) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/List.d.ts

@@ -1,4 +1,4 @@
 import { type SelectProps } from "../types";
-export declare const List: <T extends unknown = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
+export declare const List: <T extends unknown = string>({ ref, name, value, readOnly, disabled, required, placeholder, autoFocus, options, height, groupProperty, labelProperty, valueProperty, sortProperty, multiple, allowCreate, searchable, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, emptyDisplay, invalid, error, allowClear, decorateStart, decorateEnd, "data-inner": isInner, "data-hide-selected": hideSelected, ...rest }: Omit<SelectProps<T>, "defaultOpen" | "hideHandle"> & {
     height?: string | number;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/Select.d.ts

@@ -1,2 +1,2 @@
 import { type SelectProps } from "../types";
-export declare const Select: <T extends unknown = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: <T extends unknown = string>({ ref, name, value, invalid, readOnly, disabled, required, placeholder, autoFocus, error, options, defaultOpen, hideHandle, groupProperty, labelProperty, valueProperty, sortProperty, multiple, searchable, allowCreate, emptyDisplay, createOption, matcher, renderer, onQuery, onChange, onSelect, onEnterPressed, ...rest }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/select/useSelect.d.ts

@@ -10,7 +10,7 @@ interface State {
     query?: string;
     items: AnyObject[];
 }
-export declare const useSelect: ({ options, value, defaultOpen, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
+export declare const useSelect: ({ options, value, defaultOpen, autoComplete, multiple, allowCreate, groupProperty, valueProperty, labelProperty, sortProperty, createOption, matcher, onQuery, onChange, onSelect, }: {
     value?: AnyObject;
     options?: AnyObject[];
     multiple?: boolean;
@@ -19,6 +19,7 @@ export declare const useSelect: ({ options, value, defaultOpen, autoComplete, mu
     groupProperty?: AnyObject;
     valueProperty?: AnyObject;
     labelProperty?: AnyObject;
+    sortProperty?: AnyObject;
     autoComplete?: boolean;
     matcher?: (item: AnyObject, query: string) => boolean;
     createOption?: (query: string) => AnyObject;

package/dist/types/types/index.d.ts

@@ -118,6 +118,10 @@ export interface BaseSelectProps<T extends AnyObject = string> {
      * value property name
      */
     valueProperty?: keyof T;
+    /**
+     * value property name
+     */
+    sortProperty?: keyof T | true;
     /**
      * searchable list
      */

package/dist/types/types/schema.d.ts

@@ -6,6 +6,7 @@ export declare enum DATA_TYPES {
     COLOR = "color",
     BOOL = "bool",
     DATE = "date",
+    DATETIME = "datetime",
     STRING = "string",
     NUMBER = "number",
     RANGE = "range",
@@ -51,8 +52,7 @@ export interface RangeSchema extends BaseSchema {
     step?: number;
 }
 export interface DateSchema extends BaseSchema {
-    datatype: DATA_TYPES.DATE;
-    type?: "date" | "datetime";
+    datatype: DATA_TYPES.DATE | DATA_TYPES.DATETIME;
     min?: DateLike;
     max?: DateLike;
 }

package/dist/types/utils/eventHandlers.d.ts

@@ -1,6 +1,6 @@
 import { type KeyboardEvent, type MouseEvent } from "react";
 /** ***************** common handler for enter press *******************/
-export declare const handleEnter: (callback?: (e: KeyboardEvent) => void, { stopPropagation, preventDefault, }?: {
+export declare const useHandleEnter: (callback?: (e: KeyboardEvent) => void, { stopPropagation, preventDefault, }?: {
     stopPropagation?: boolean;
     preventDefault?: boolean;
 }) => (e: KeyboardEvent) => false | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.47",
+  "version": "1.0.0-beta.48",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,15 +35,15 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
-    "@dnd-kit/modifiers": "^7.0.0",
-    "@dnd-kit/sortable": "^8.0.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/react": "^0.26.24",
+    "@floating-ui/react": "^0.27.9",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.47",
-    "@react-fabric/date": "^1.0.0-beta.47",
-    "@react-fabric/utilities": "^1.0.0-beta.47",
+    "@react-fabric/core": "^1.0.0-beta.48",
+    "@react-fabric/date": "^1.0.0-beta.48",
+    "@react-fabric/utilities": "^1.0.0-beta.48",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -63,5 +63,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "832a1bce055337127ba17c505731f419248cc15e"
+  "gitHead": "0b1001b4ae1ee67f8e1817d6395d1f3945321897"
 }

package/src/builder/FormField.tsx

@@ -79,6 +79,7 @@ export const FormField = ({
     if (rest.datatype === DATA_TYPES.BOOL) return Switch;
     if (rest.datatype === DATA_TYPES.TEXT) return Textarea;
     if (rest.datatype === DATA_TYPES.DATE) return DateInput;
+    if (rest.datatype === DATA_TYPES.DATETIME) return DateInput;
     if (rest.datatype === DATA_TYPES.COLOR) return ColorInput;
     if (hasOptions) return Select;
 
@@ -104,7 +105,13 @@ export const FormField = ({
       return {
         min: rest.min,
         max: rest.max,
-        type: rest.type,
+        type: "date",
+      };
+    if (rest.datatype === DATA_TYPES.DATETIME)
+      return {
+        min: rest.min,
+        max: rest.max,
+        type: "datetime",
       };
     if (rest.datatype === DATA_TYPES.TEXT) return { rows: 3 };
     if (rest.datatype === DATA_TYPES.COLOR) return { showPicker: true };

package/src/builder/components/SchemaField.tsx

@@ -190,7 +190,8 @@ export const SchemaField = ({
           } as StringSchema);
         } else if (type === DATA_TYPES.DATE) {
           reset = Object.assign(reset, {
-            type: "date",
+            min: modelRef.min,
+            max: modelRef.max,
           } as DateSchema);
         } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
           reset = Object.assign(reset, {

package/src/form/Form.tsx

@@ -40,6 +40,12 @@ import {
   type FormState,
 } from "react-hook-form";
 
+type NestedKeyOf<T extends object> = {
+  [K in keyof T & (string | number)]: T[K] extends object
+    ? `${K}` | `${K}.${NestedKeyOf<T[K]>}`
+    : K;
+}[keyof T & (string | number)];
+
 export interface FormRef<K extends KeyValue> {
   state: FormState<K>;
   reset: () => void;
@@ -47,7 +53,7 @@ export interface FormRef<K extends KeyValue> {
   submit: () => void;
   validate: () => Promise<boolean>;
   getValues: () => K;
-  setValue: (key: keyof K, value: AnyObject) => void;
+  setValue: (key: NestedKeyOf<K>, value: AnyObject) => void;
   setValues: (values: K) => void;
 }
 

package/src/input/AvatarInput.tsx

@@ -37,14 +37,17 @@ export interface Props extends RefProp {
    */
   value?: string;
   /**
-   * avatar stream src
+   * avatar name
    */
-  src?: string;
+  avatarName?: string;
   size?: string | number;
   /**
    * upload handler to store file in temp storage
    */
   uploadHandler: UploadHandler;
+  /**
+   * file stream path
+   */
   fileUrl?: (path: string) => string;
   /**
    * change handler
@@ -57,15 +60,16 @@ export interface Props extends RefProp {
 }
 
 export const AvatarInput = ({
-  src,
   size = "6rem",
+  avatarName,
+  value,
   fileUrl,
   uploadHandler,
   ...rest
 }: Props) => {
   const { files, list, upload, remove } = useFileUploader(
     async (data, config) => await uploadHandler?.(data, config),
-    rest.value,
+    value,
     false,
   );
 
@@ -92,13 +96,13 @@ export const AvatarInput = ({
   }, [files, list]);
 
   useEffect(() => {
-    src && setBase64(fileUrl?.(src) ?? src);
-  }, [src]);
+    value && setBase64(fileUrl?.(value) ?? value);
+  }, [value]);
 
   return (
     <div className="flex flex-nowrap items-end">
       <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
-        <Avatar name="temp" size={size} avatar={base64} />
+        <Avatar name={avatarName ?? "temp"} size={size} avatar={base64} />
         <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1">
           <span>Edit</span>
           <input

package/src/input/DateInput.tsx

@@ -37,6 +37,7 @@ import {
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type DateLike, DatePanel, DateUtil } from "@react-fabric/date";
 import { mergeRefs } from "@react-fabric/utilities";
+import classNames from "classnames";
 import {
   type ChangeEvent,
   startTransition,
@@ -49,8 +50,7 @@ import {
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
-import classNames from "classnames";
+import { useHandleEnter } from "../utils";
 
 export interface DateProps
   extends InputProps<string>,
@@ -105,10 +105,7 @@ export const DateInput = ({
     setInputValue(deferred ? DateUtil.format(deferred, inputFormat) : "");
   }, [deferred, inputFormat]);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   const handleChange = useCallback(
     (e?: ChangeEvent<HTMLInputElement>) => {

package/src/input/File.tsx

@@ -36,14 +36,13 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useRef,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface FileInputProps
   extends InputProps<AnyObject>,
@@ -100,10 +99,7 @@ export const FileInput = ({
   const [actualValue, setActualValue] = useState<File | File[] | null>();
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred);

package/src/input/Input.tsx

@@ -22,18 +22,17 @@
  */
 
 import { type RefProp } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
 import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
-import classNames from "classnames";
+import { useHandleEnter } from "../utils";
 
 export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -64,10 +63,7 @@ export const Input = ({
   const [actualValue, setActualValue] = useState("");
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");

package/src/input/Number.tsx

@@ -26,13 +26,12 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface NumberProps
   extends InputProps<number>,
@@ -73,10 +72,7 @@ export const Number = ({
   const [actualValue, setActualValue] = useState<"" | number>("");
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");

package/src/input/Password.tsx

@@ -28,14 +28,13 @@ import {
   useCallback,
   useDeferredValue,
   useEffect,
-  useMemo,
   useState,
   type ChangeEvent,
 } from "react";
 import { useTranslation } from "react-i18next";
 import { InputWrapper } from "../internal/InputWrapper";
 import { type InputProps } from "../types";
-import { handleEnter } from "../utils";
+import { useHandleEnter } from "../utils";
 
 export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
   /**
@@ -72,10 +71,7 @@ export const Password = ({
   const [actualValue, setActualValue] = useState("");
   const deferred = useDeferredValue(value);
 
-  const handleEnterPressed = useMemo(
-    () => handleEnter(onEnterPressed),
-    [onEnterPressed],
-  );
+  const handleEnterPressed = useHandleEnter(onEnterPressed);
 
   useEffect(() => {
     setActualValue(deferred ?? "");