@react-fabric/form 1.0.0-beta.61 → 1.0.0-beta.63

package/dist/cjs/internal/InputWrapper.js

@@ -87,7 +87,7 @@ var InputWrapper = function InputWrapper(_ref) {
     }), children, allowClear && showClear && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       icon: "icon-[mdi--close]",
       onClick: handleClear,
-      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear", textarea && "self-start mt-1 me-1")
+      className: classNames("text-tint-500 hover:text-tint-700 p-1 z-1 flex-content", "fabric-inputClear")
     }), decorateEnd && /*#__PURE__*/jsxRuntime.jsx("div", {
       onClickCapture: doFocus,
       className: classNames("fabric-decorate", "text-muted leading-none flex-content", utilities.isString(decorateEnd) && "px-1", decorateEndHideWhenEmpty && "peer-placeholder-shown:hidden", decorateEndShowWhenEmpty && "hidden peer-placeholder-shown:inline-block"),
@@ -101,7 +101,7 @@ var InputWrapper = function InputWrapper(_ref) {
         return setExpanded(!isExpanded);
       },
       icon: isExpanded ? "icon-[mdi--arrow-collapse]" : "icon-[mdi--arrow-expand]",
-      className: "hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
+      className: "hidden group-hover:block absolute top-0 inset-e-0 bg-default hover:bg-tint-200 p-1 opacity-65 rounded-capped"
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {

package/dist/cjs/ranger/index.js

@@ -195,17 +195,17 @@ var useRanger = function useRanger(opts) {
     } else {
       setActiveHandleIndex(i);
     }
-    var handleRelease = function handleRelease(e) {
+    var _handleRelease = function handleRelease(e) {
       var _getLatest5 = getLatest(),
         tempValues = _getLatest5.tempValues,
         onChange = _getLatest5.onChange,
         onDragEnd = _getLatest5.onDragEnd;
       document.removeEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
       document.removeEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
-      document.removeEventListener("mouseup", handleRelease, {
+      document.removeEventListener("mouseup", _handleRelease, {
         capture: true
       });
-      document.removeEventListener("touchend", handleRelease, {
+      document.removeEventListener("touchend", _handleRelease, {
         capture: true
       });
       var sortedValues = utils.sortNumList(tempValues || values);
@@ -218,10 +218,10 @@ var useRanger = function useRanger(opts) {
     onDragStart === null || onDragStart === void 0 || onDragStart();
     document.addEventListener("mousemove", i === -1 ? handleSegmentDrag : handleDrag);
     document.addEventListener("touchmove", i === -1 ? handleSegmentDrag : handleDrag);
-    document.addEventListener("mouseup", handleRelease, {
+    document.addEventListener("mouseup", _handleRelease, {
       capture: true
     });
-    document.addEventListener("touchend", handleRelease, {
+    document.addEventListener("touchend", _handleRelease, {
       capture: true
     });
   }, [getLatest, handleDrag]);

package/dist/cjs/select/AutoComplete.js

@@ -20,10 +20,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * It supports multiple selections, history suggestions, and custom styling.
  *
  * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
- * @returns {JSX.Element} The rendered AutoComplete component.
+ * @returns {React.ReactElement} The rendered AutoComplete component.
  */
 var AutoComplete = function AutoComplete(_ref) {
-  var _refs$reference$curre;
+  var _refs$domReference$cu2, _refs$domReference$cu3, _refs$reference$curre;
   var ref = _ref.ref,
     name = _ref.name,
     value = _ref.value,
@@ -246,10 +246,12 @@ var AutoComplete = function AutoComplete(_ref) {
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
       icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      root: (_refs$domReference$cu2 = (_refs$domReference$cu3 = refs.domReference.current) === null || _refs$domReference$cu3 === void 0 ? void 0 : _refs$domReference$cu3.closest(".theme-base")) !== null && _refs$domReference$cu2 !== void 0 ? _refs$domReference$cu2 : undefined,
       children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
         initialFocus: -1,
         visuallyHiddenDismiss: true,
+        closeOnFocusOut: true,
         children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
           className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",

package/dist/cjs/select/DualList.js

@@ -25,7 +25,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
  *
  * @param {DualListProps<T>} props - The properties for the DualList component.
- * @returns {JSX.Element} The rendered DualList component.
+ * @returns {React.ReactElement} The rendered DualList component.
  */
 var DualList = function DualList(_ref) {
   var ref = _ref.ref,
@@ -38,7 +38,7 @@ var DualList = function DualList(_ref) {
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
-    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     renderer = _ref.renderer,
     onChange = _ref.onChange,
     name = _ref.name,
@@ -188,7 +188,7 @@ var DualList = function DualList(_ref) {
         className: "self-center mx-2",
         children: /*#__PURE__*/jsxRuntime.jsxs(core$1.ButtonGroup, {
           vertical: true,
-          className: "outline overflow-hidden bg-base",
+          className: "outline overflow-hidden bg-default",
           children: [/*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
             size: "sm",
             variant: "link",

package/dist/cjs/select/List.js

@@ -17,7 +17,7 @@ var _excluded = ["ref", "name", "value", "readOnly", "disabled", "required", "pl
 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) {
-  var _state$query, _state$activeItem;
+  var _state$query;
   var ref = _ref.ref,
     name = _ref.name,
     value = _ref.value,
@@ -29,8 +29,10 @@ var List = function List(_ref) {
     options = _ref.options,
     height = _ref.height,
     groupProperty = _ref.groupProperty,
-    labelProperty = _ref.labelProperty,
-    valueProperty = _ref.valueProperty,
+    _ref$labelProperty = _ref.labelProperty,
+    labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    _ref$valueProperty = _ref.valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     infoProperty = _ref.infoProperty,
     sortProperty = _ref.sortProperty,
     multiple = _ref.multiple,
@@ -242,6 +244,7 @@ var List = function List(_ref) {
       context: context,
       initialFocus: -1,
       visuallyHiddenDismiss: true,
+      closeOnFocusOut: true,
       children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
         ref: refs.setFloating,
         className: classNames("max-h-96 z-0 rounded-capped rounded-t-none outline", disabled && "pointer-events-none opacity-65"),
@@ -256,7 +259,7 @@ var List = function List(_ref) {
         itemRef: setItemRef,
         itemProps: makeItemProps,
         empty: emptyDisplay,
-        info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
+        info: utilities.getByPath(state.activeItem, infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"),
         children: function children(item, label) {
           var _renderer3;
           return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;

package/dist/cjs/select/Options.js

@@ -3,6 +3,7 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var reactI18next = require('react-i18next');
 var jsxRuntime = require('react/jsx-runtime');
@@ -27,7 +28,7 @@ var Options = function Options(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsxs("div", _objectSpread(_objectSpread({
     ref: ref,
-    className: classNames("bg-base select-none flex flex-col", className),
+    className: classNames("bg-default select-none flex flex-col", className),
     style: style
   }, rest), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -37,9 +38,9 @@ var Options = function Options(_ref) {
           i18nKey: "form:select.emptyList"
         })
       })), items.map(function (item, index) {
-        var _item$value, _item$labelProperty;
+        var _item$value, _getByPath;
         if (item.___group___) return /*#__PURE__*/jsxRuntime.jsx("p", {
-          className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
+          className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-default border-t",
           children: item.label
         }, index);
         if (item.___create___) return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
@@ -70,7 +71,7 @@ var Options = function Options(_ref) {
           "data-active": active === index ? true : undefined,
           className: classNames("block text-start truncate px-2 py-1 leading-normal cursor-pointer", "data-active:bg-primary-200 data-selected:bg-primary-600 data-selected:text-white data-active:data-selected:underline")
         }, itemProps(item)), {}, {
-          children: children(item, (_item$labelProperty = item[labelProperty]) !== null && _item$labelProperty !== void 0 ? _item$labelProperty : item)
+          children: children(item, (_getByPath = utilities.getByPath(item, labelProperty)) !== null && _getByPath !== void 0 ? _getByPath : "".concat(item))
         }), index);
       })]
     }), info && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/select/Select.js

@@ -16,7 +16,7 @@ var _excluded = ["ref", "name", "value", "invalid", "readOnly", "disabled", "req
 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) {
-  var _state$query, _refs$reference$curre, _state$activeItem;
+  var _state$query, _refs$domReference$cu3, _refs$domReference$cu4, _refs$reference$curre;
   var ref = _ref.ref,
     name = _ref.name,
     value = _ref.value,
@@ -34,7 +34,7 @@ var Select = function Select(_ref) {
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
     _ref$valueProperty = _ref.valueProperty,
-    valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
+    valueProperty = _ref$valueProperty === void 0 ? "value" : _ref$valueProperty,
     sortProperty = _ref.sortProperty,
     infoProperty = _ref.infoProperty,
     multiple = _ref.multiple,
@@ -262,10 +262,12 @@ var Select = function Select(_ref) {
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
       icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
+      root: (_refs$domReference$cu3 = (_refs$domReference$cu4 = refs.domReference.current) === null || _refs$domReference$cu4 === void 0 ? void 0 : _refs$domReference$cu4.closest(".theme-base")) !== null && _refs$domReference$cu3 !== void 0 ? _refs$domReference$cu3 : undefined,
       children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
         initialFocus: -1,
         visuallyHiddenDismiss: true,
+        closeOnFocusOut: true,
         children: /*#__PURE__*/jsxRuntime.jsx(Options.Options, _objectSpread(_objectSpread({
           ref: refs.setFloating,
           className: "outline shadow-lg max-h-[40vh] z-(--z-popover)",
@@ -280,7 +282,7 @@ var Select = function Select(_ref) {
           itemRef: setItemRef,
           itemProps: makeItemProps,
           empty: emptyDisplay,
-          info: (_state$activeItem = state.activeItem) === null || _state$activeItem === void 0 ? void 0 : _state$activeItem[infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"],
+          info: utilities.getByPath(state.activeItem, infoProperty !== null && infoProperty !== void 0 ? infoProperty : "info"),
           children: function children(item, label) {
             var _renderer3;
             return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;

package/dist/cjs/select/useSelect.js

@@ -176,19 +176,21 @@ var useSelect = function useSelect(_ref) {
         return _newState;
       }
       return state;
-    }, {
-      multiple: multiple,
-      emptyValue: emptyValue,
-      open: alwaysOpen || defaultOpen,
-      loading: false,
-      activeIndex: null,
-      activeItem: null,
-      selectedIndex: null,
-      value: emptyValue,
-      // filter
-      query: undefined,
-      // dropdown items
-      items: []
+    }, {}, function () {
+      return {
+        multiple: multiple,
+        emptyValue: emptyValue,
+        open: alwaysOpen || defaultOpen,
+        loading: false,
+        activeIndex: null,
+        activeItem: null,
+        selectedIndex: null,
+        value: emptyValue,
+        // filter
+        query: undefined,
+        // dropdown items
+        items: []
+      };
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],

package/dist/esm/builder/FileField.js

@@ -13,7 +13,7 @@ import { Field } from '../input/Field.js';
 import { HiddenInput } from '../input/Hidden.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
+var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "onChange", "multiple", "invalid", "error"];
 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 FileField = function FileField(_ref) {
@@ -24,22 +24,23 @@ var FileField = function FileField(_ref) {
     accept = _ref.accept,
     value = _ref.value;
     _ref.fileUrl;
-    var multiple = _ref.multiple;
+    var onChange = _ref.onChange,
+    multiple = _ref.multiple;
     _ref.invalid;
     var error = _ref.error,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation(),
     t = _useTranslation.t;
-  var _useFileUploader = useFileUploader( /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
-        return _regeneratorRuntime.wrap(function _callee$(_context) {
+  var _useFileUploader = useFileUploader(/*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
+        return _regeneratorRuntime.wrap(function (_context) {
           while (1) switch (_context.prev = _context.next) {
             case 0:
-              _context.next = 2;
+              _context.next = 1;
               return uploadHandler === null || uploadHandler === void 0 ? void 0 : uploadHandler(data, config);
-            case 2:
+            case 1:
               return _context.abrupt("return", _context.sent);
-            case 3:
+            case 2:
             case "end":
               return _context.stop();
           }
@@ -48,10 +49,12 @@ var FileField = function FileField(_ref) {
       return function (_x, _x2) {
         return _ref2.apply(this, arguments);
       };
-    }(), value, multiple),
+    }(), value, {
+      multiple: multiple,
+      onChange: onChange
+    }),
     pending = _useFileUploader.pending,
     files = _useFileUploader.files,
-    list = _useFileUploader.list,
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   return /*#__PURE__*/jsxs(Fragment, {
@@ -60,7 +63,7 @@ var FileField = function FileField(_ref) {
       inline: inline,
       label: label,
       children: /*#__PURE__*/jsx(HiddenInput, _objectSpread({
-        hiddenValue: multiple ? list : list === null || list === void 0 ? void 0 : list[0]
+        value: multiple ? files : files === null || files === void 0 ? void 0 : files[0]
       }, rest))
     }), /*#__PURE__*/jsx(Tooltip, {
       color: "danger-200",

package/dist/esm/builder/SchemaEditor.js

@@ -63,7 +63,7 @@ var SchemaEditor = function SchemaEditor(_ref) {
       acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(DATA_TYPES)
     }), children && /*#__PURE__*/jsx(Footer, {
       flex: true,
-      className: "border-t bg-base px-6 py-2",
+      className: "border-t bg-default px-6 py-2",
       children: children
     })]
   });

package/dist/esm/builder/components/SchemaArrayForm.js

@@ -58,9 +58,7 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
       }
     });
   }, []);
-  var Wrapper = useCallback(
-  // eslint-disable-next-line @typescript-eslint/promise-function-async
-  function (_ref2) {
+  var Wrapper = useCallback(function (_ref2) {
     var children = _ref2.children;
     if (dynamic) {
       // pass id list to dnd context
@@ -138,7 +136,7 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
           acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(DATA_TYPES)
         }, index);
       })
-    }), AddModal]
+    }), /*#__PURE__*/jsx(AddModal, {})]
   });
 };
 

package/dist/esm/builder/components/SchemaField.js

@@ -104,7 +104,7 @@ var SchemaField = function SchemaField(_ref) {
         }), /*#__PURE__*/jsx(Footer, {
           flex: true,
           justify: "end",
-          className: "sticky bottom-0 border-t bg-base px-6 py-2",
+          className: "sticky bottom-0 border-t bg-default px-6 py-2",
           children: /*#__PURE__*/jsx(Button, {
             variant: "link",
             onClick: props.onClose,
@@ -189,7 +189,7 @@ var SchemaField = function SchemaField(_ref) {
         children: [/*#__PURE__*/jsx(Controller, {
           name: "".concat(field, ".id"),
           children: /*#__PURE__*/jsx(HiddenInput, {
-            hiddenValue: id
+            value: id
           })
         }), /*#__PURE__*/jsx(Controller, {
           name: "".concat(field, ".datatype"),
@@ -250,7 +250,7 @@ var SchemaField = function SchemaField(_ref) {
                 });
               }
             })]
-          }), OptionModal]
+          }), /*#__PURE__*/jsx(OptionModal, {})]
         }), type === DATA_TYPES.FILE && /*#__PURE__*/jsx(Fragment, {
           children: /*#__PURE__*/jsx(Controller, {
             name: "".concat(field, ".accept"),

package/dist/esm/form/Controller.js

@@ -36,7 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * to the child component, allowing for proper focus management and DOM access.
  *
  * @param {ControllerProps} props - The properties for the Controller component.
- * @returns {JSX.Element} The rendered Controller component.
+ * @returns {React.ReactElement} The rendered Controller component.
  *
  * @example
  * ```jsx

package/dist/esm/form/Form.js

@@ -1,17 +1,17 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
 import { useDebounce } from '@react-fabric/core';
 import { EMPTY_OBJECT } from '@react-fabric/utilities';
 import { useRef, useTransition, useEffect, useCallback, useImperativeHandle } from 'react';
-import { useForm as useForm$1, FormProvider, useFormContext, useWatch } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["formRef", "resolver", "children", "defaultValues", "onSubmit", "onChange"];
+var _excluded = ["formRef", "resolver", "children", "resetOnChange", "defaultValues", "onSubmit", "onChange"];
 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 DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
@@ -24,7 +24,7 @@ var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
  * It supports nested form structures and allows for custom validation schemas using Yup.
  *
  * @param {FormProps<K>} props - The properties for the Form component.
- * @returns {JSX.Element} The rendered Form component.
+ * @returns {React.ReactElement} The rendered Form component.
  *
  * @example
  * ```jsx
@@ -50,17 +50,37 @@ var Form = function Form(_ref) {
   var formRef = _ref.formRef,
     resolver = _ref.resolver,
     children = _ref.children,
+    resetOnChange = _ref.resetOnChange,
     _ref$defaultValues = _ref.defaultValues,
-    defaultValues = _ref$defaultValues === void 0 ? EMPTY_OBJECT : _ref$defaultValues,
+    _defaultValues = _ref$defaultValues === void 0 ? EMPTY_OBJECT : _ref$defaultValues,
     _ref$onSubmit = _ref.onSubmit,
     _onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef(null);
-  var form = useForm$1({
+  var form = useForm({
     shouldFocusError: true,
     resolver: resolver,
-    defaultValues: defaultValues
+    defaultValues: function () {
+      var _defaultValues2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 1;
+              return Promise.resolve(_defaultValues);
+            case 1:
+              return _context.abrupt("return", _context.sent);
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function defaultValues() {
+        return _defaultValues2.apply(this, arguments);
+      }
+      return defaultValues;
+    }()
   });
   var _useTransition = useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
@@ -82,12 +102,17 @@ var Form = function Form(_ref) {
     form.reset(reset);
     form.clearErrors();
     (_ref$current = ref.current) === null || _ref$current === void 0 || (_ref$current = _ref$current.querySelector("[auto-focus], input, textarea")) === null || _ref$current === void 0 || _ref$current.focus();
-  }, [defaultValues]);
+  }, []);
+  useEffect(function () {
+    if (resetOnChange) {
+      handleReset(_defaultValues);
+    }
+  }, [_defaultValues, resetOnChange]);
   useImperativeHandle(formRef, function () {
     return {
       state: form.formState,
       reset: function reset() {
-        return handleReset(defaultValues);
+        return handleReset(_defaultValues);
       },
       clear: function clear() {
         return handleReset();
@@ -96,19 +121,19 @@ var Form = function Form(_ref) {
         return form.handleSubmit(_onSubmit);
       },
       validate: function () {
-        var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(fields) {
-          return _regeneratorRuntime.wrap(function _callee$(_context) {
-            while (1) switch (_context.prev = _context.next) {
+        var _validate = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fields) {
+          return _regeneratorRuntime.wrap(function (_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                _context.next = 2;
+                _context2.next = 1;
                 return form.trigger(fields);
+              case 1:
+                return _context2.abrupt("return", _context2.sent);
               case 2:
-                return _context.abrupt("return", _context.sent);
-              case 3:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
-          }, _callee);
+          }, _callee2);
         }));
         function validate(_x) {
           return _validate.apply(this, arguments);
@@ -132,7 +157,7 @@ var Form = function Form(_ref) {
         }, 50);
       }
     };
-  }, [_onSubmit, form, form.formState, defaultValues]);
+  }, [_onSubmit, form, form.formState, _defaultValues]);
   var onInvalid = useCallback(function (_, e) {
     var el = e.target;
     console.log("Invalid:", _, e);
@@ -145,7 +170,7 @@ var Form = function Form(_ref) {
     children: /*#__PURE__*/jsxs("form", _objectSpread(_objectSpread({
       ref: ref,
       onReset: function onReset() {
-        return handleReset(defaultValues);
+        return handleReset(_defaultValues);
       },
       onSubmit: function onSubmit(e) {
         e.stopPropagation();
@@ -162,28 +187,5 @@ var Form = function Form(_ref) {
     }))
   }));
 };
-var useForm = function useForm() {
-  var _useFormContext = useFormContext(),
-    formState = _useFormContext.formState,
-    getValues = _useFormContext.getValues,
-    setValue = _useFormContext.setValue,
-    watch = _useFormContext.watch,
-    reset = _useFormContext.reset,
-    resetField = _useFormContext.resetField,
-    setError = _useFormContext.setError,
-    setFocus = _useFormContext.setFocus;
-  var values = useWatch();
-  return {
-    values: _objectSpread(_objectSpread({}, values), getValues()),
-    formState: formState,
-    getValues: getValues,
-    setValue: setValue,
-    watch: watch,
-    reset: reset,
-    resetField: resetField,
-    setError: setError,
-    setFocus: setFocus
-  };
-};
 
-export { Form, useForm };
+export { Form };

package/dist/esm/form/useForm.js

@@ -0,0 +1,32 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { useFormContext, useWatch } from 'react-hook-form';
+
+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 useForm = function useForm() {
+  var _useFormContext = useFormContext(),
+    formState = _useFormContext.formState,
+    getValues = _useFormContext.getValues,
+    setValue = _useFormContext.setValue,
+    watch = _useFormContext.watch,
+    reset = _useFormContext.reset,
+    resetField = _useFormContext.resetField,
+    setError = _useFormContext.setError,
+    setFocus = _useFormContext.setFocus;
+  var values = useWatch();
+  return {
+    values: _objectSpread(_objectSpread({}, values), getValues()),
+    formState: formState,
+    getValues: getValues,
+    setValue: setValue,
+    watch: watch,
+    reset: reset,
+    resetField: resetField,
+    setError: setError,
+    setFocus: setFocus
+  };
+};
+
+export { useForm };