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

package/dist/esm/input/AvatarInput.js

@@ -11,14 +11,15 @@ import { useFileUploader } from '../hooks/useFileUploader.js';
 import { HiddenInput } from './Hidden.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["src", "size", "fileUrl", "uploadHandler"];
+var _excluded = ["size", "avatarName", "value", "fileUrl", "uploadHandler"];
 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 AvatarInput = function AvatarInput(_ref) {
   var _list$;
-  var src = _ref.src,
-    _ref$size = _ref.size,
+  var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "6rem" : _ref$size,
+    avatarName = _ref.avatarName,
+    value = _ref.value,
     fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -40,7 +41,7 @@ var AvatarInput = function AvatarInput(_ref) {
       return function (_x, _x2) {
         return _ref2.apply(this, arguments);
       };
-    }(), rest.value, false),
+    }(), value, false),
     files = _useFileUploader.files,
     list = _useFileUploader.list,
     upload = _useFileUploader.upload,
@@ -69,14 +70,14 @@ var AvatarInput = function AvatarInput(_ref) {
   }, [files, list]);
   useEffect(function () {
     var _fileUrl;
-    src && setBase64((_fileUrl = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(src)) !== null && _fileUrl !== void 0 ? _fileUrl : src);
-  }, [src]);
+    value && setBase64((_fileUrl = fileUrl === null || fileUrl === void 0 ? void 0 : fileUrl(value)) !== null && _fileUrl !== void 0 ? _fileUrl : value);
+  }, [value]);
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-nowrap items-end",
     children: [/*#__PURE__*/jsxs("div", {
       className: "inline-block leading-none rounded-full relative outline overflow-hidden",
       children: [/*#__PURE__*/jsx(Avatar, {
-        name: "temp",
+        name: avatarName !== null && avatarName !== void 0 ? avatarName : "temp",
         size: size,
         avatar: base64
       }), /*#__PURE__*/jsxs("div", {

package/dist/esm/input/DateInput.js

@@ -6,10 +6,10 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { useFloating, autoUpdate, shift, flip, offset, arrow, useFocus, useClick, useDismiss, useInteractions, FloatingArrow } from '@floating-ui/react';
 import { DateUtil, DatePanel } from '@react-fabric/date';
 import { mergeRefs } from '@react-fabric/utilities';
+import classNames from 'classnames';
 import { useState, useDeferredValue, useMemo, useEffect, useCallback, startTransition, useRef } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
-import classNames from 'classnames';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "type", "onBlur", "onFocus", "onChange", "onEnterPressed", "format", "min", "max"];
@@ -52,9 +52,7 @@ var DateInput = function DateInput(_ref) {
     setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
     setInputValue(deferred ? DateUtil.format(deferred, inputFormat) : "");
   }, [deferred, inputFormat]);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   var handleChange = useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.currentTarget.value;
     if (value) {

package/dist/esm/input/File.js

@@ -6,9 +6,9 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { Icon, CoreIcons } from '@react-fabric/core';
 import { isArray, mergeRefs, isEmpty, FileUtil, Format } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useRef, useState, useDeferredValue, useMemo, useEffect, useCallback, Fragment } from 'react';
+import { useRef, useState, useDeferredValue, useEffect, useCallback, Fragment } from 'react';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "name", "accept", "showList", "multiple", "onChange", "onEnterPressed"];
@@ -59,9 +59,7 @@ var FileInput = function FileInput(_ref) {
     actualValue = _useState6[0],
     setActualValue = _useState6[1];
   var deferred = useDeferredValue(value);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   useEffect(function () {
     setActualValue(deferred);
   }, [deferred]);

package/dist/esm/input/Input.js

@@ -3,11 +3,11 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useDeferredValue, useMemo, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { useState, useDeferredValue, 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 classNames from 'classnames';
 import { jsx } from 'react/jsx-runtime';
 
 var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "required", "placeholder", "autoFocus", "error", "monospace", "type", "onBlur", "onFocus", "onChange", "onEnterPressed"];
@@ -37,9 +37,7 @@ var Input = function Input(_ref) {
     actualValue = _useState2[0],
     setActualValue = _useState2[1];
   var deferred = useDeferredValue(value);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   useEffect(function () {
     setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
   }, [deferred]);

package/dist/esm/input/Number.js

@@ -3,9 +3,9 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { useState, useDeferredValue, useMemo, useEffect, useCallback } from 'react';
+import { useState, useDeferredValue, 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';
 
@@ -35,9 +35,7 @@ var Number = function Number(_ref) {
     actualValue = _useState2[0],
     setActualValue = _useState2[1];
   var deferred = useDeferredValue(value);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   useEffect(function () {
     setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
   }, [deferred]);

package/dist/esm/input/Password.js

@@ -5,10 +5,10 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { Tooltip, Button, CoreIcons } from '@react-fabric/core';
 import classNames from 'classnames';
-import { useState, useDeferredValue, useMemo, useEffect, useCallback } from 'react';
+import { useState, useDeferredValue, useEffect, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { InputWrapper } from '../internal/InputWrapper.js';
-import { handleEnter } from '../utils/eventHandlers.js';
+import { useHandleEnter } from '../utils/eventHandlers.js';
 import '@react-fabric/utilities';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
@@ -43,9 +43,7 @@ var Password = function Password(_ref) {
     actualValue = _useState4[0],
     setActualValue = _useState4[1];
   var deferred = useDeferredValue(value);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(onEnterPressed);
-  }, [onEnterPressed]);
+  var handleEnterPressed = useHandleEnter(onEnterPressed);
   useEffect(function () {
     setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
   }, [deferred]);

package/dist/esm/input/Search.js

@@ -4,9 +4,9 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useDebounce, Icon, CoreIcons, Button } from '@react-fabric/core';
-import { useState, useDeferredValue, useRef, useMemo, useEffect, useCallback, Fragment } from 'react';
+import { useState, useDeferredValue, useRef, useEffect, useCallback, Fragment } 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, jsxs } from 'react/jsx-runtime';
 
@@ -44,9 +44,7 @@ var Search = function Search(_ref) {
   var handleSearch = useDebounce(function () {
     return onSearch === null || onSearch === void 0 ? void 0 : onSearch(refValue.current);
   }, [onSearch], 250);
-  var handleEnterPressed = useMemo(function () {
-    return handleEnter(handleSearch);
-  }, [handleSearch]);
+  var handleEnterPressed = useHandleEnter(handleSearch);
   useEffect(function () {
     setActualValue(deferred !== null && deferred !== void 0 ? deferred : "");
   }, [deferred]);
@@ -56,8 +54,8 @@ var Search = function Search(_ref) {
     setActualValue(value !== null && value !== void 0 ? value : "");
     onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
 
-    // value was cleared so force fire onSearch
-    if (searchOnChange) {
+    // when e is undefined value was cleared so force fire onSearch
+    if (!e || searchOnChange) {
       handleSearch();
     }
   }, [onChange, searchOnChange, handleSearch]);

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/ArrayInput.d.ts

@@ -1,5 +1,5 @@
 import { type ReactNode, type Ref } from "react";
-export interface ArrayInputProps {
+export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * input label
      */
@@ -58,13 +58,29 @@ export interface ArrayInputProps {
      */
     fixedList?: boolean;
     arrayRef?: Ref<{
-        addItem: (item: AnyObject) => void;
+        addItem: (item: T) => void;
         removeItem: (idx: number) => void;
     }>;
     /**
-     * Add item
+     * add new item
      */
     onAdd?: () => AnyObject;
+    /**
+     * on item remove
+     */
+    onRemove?: (item: T, idx: number) => void;
+    /**
+     * before item remove
+     */
+    onBeforeRemove?: (item: T, idx: number) => Promise<boolean> | boolean;
+    /**
+     * can remove item
+     */
+    canRemove?: (props: {
+        item: T;
+        index: number;
+        lastItem: boolean;
+    }) => boolean;
     /**
      * field width
      */
@@ -78,4 +94,4 @@ export interface ArrayInputProps {
      */
     labelWidth?: string;
 }
-export declare const ArrayInput: ({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArrayInput: <T extends unknown = string>({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>) => import("react/jsx-runtime").JSX.Element;

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.46",
+  "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.46",
-    "@react-fabric/date": "^1.0.0-beta.46",
-    "@react-fabric/utilities": "^1.0.0-beta.46",
+    "@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": "0dfc20b9c84712bb1cb5205c22464e8a1eb2341c"
+  "gitHead": "0b1001b4ae1ee67f8e1817d6395d1f3945321897"
 }