@react-fabric/form 1.0.0-beta.60 → 1.0.0-beta.62

package/dist/cjs/input/Hidden.js

@@ -36,23 +36,14 @@ var jsxRuntime = require('react/jsx-runtime');
  * @returns {JSX.Element} The rendered hidden input field and error icon.
  */
 var HiddenInput = function HiddenInput(_ref) {
-  var hiddenValue = _ref.hiddenValue,
-    defaultValue = _ref.defaultValue,
-    onChange = _ref.onChange,
-    invalid = _ref.invalid,
+  var invalid = _ref.invalid,
     error = _ref.error,
     _ref$value = _ref.value,
     value = _ref$value === void 0 ? "" : _ref$value,
     name = _ref.name;
-  react.useEffect(function () {
-    setTimeout(function () {
-      onChange === null || onChange === void 0 || onChange(hiddenValue !== null && hiddenValue !== void 0 ? hiddenValue : defaultValue);
-    }, 50);
-  }, [hiddenValue, defaultValue]);
   return /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("input", {
       type: "hidden",
-      onChange: onChange,
       value: value,
       name: name
     }), /*#__PURE__*/jsxRuntime.jsx(ErrorIcon.ErrorIcon, {

package/dist/cjs/input/Password.js

@@ -76,7 +76,7 @@ var Password = function Password(_ref) {
         color: "warning",
         variant: "link",
         "aria-label": t(show ? "password.hide" : "password.show"),
-        icon: show ? core.CoreIcons.eyeOff : core.CoreIcons.eye,
+        icon: show ? "icon-[mdi--eye-off-outline]" : "icon-[mdi--eye-outline]",
         onClick: function onClick() {
           return setShow(!show);
         }

package/dist/cjs/input/Radio.js

@@ -34,10 +34,10 @@ var Radio = function Radio(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var iconOn = react.useMemo(function () {
     var _ref2;
-    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : core.CoreIcons.radioOn;
+    return (_ref2 = iconChecked !== null && iconChecked !== void 0 ? iconChecked : icon) !== null && _ref2 !== void 0 ? _ref2 : "icon-[mdi--radiobox-marked]";
   }, [icon, iconChecked]);
   var iconOff = react.useMemo(function () {
-    return icon !== null && icon !== void 0 ? icon : core.CoreIcons.radioOff;
+    return icon !== null && icon !== void 0 ? icon : "icon-[mdi--radiobox-blank]";
   }, [icon]);
   var handleChange = react.useCallback(function (e) {
     // @ts-expect-error ignore

package/dist/cjs/input/RadioGroup.js

@@ -7,7 +7,7 @@ var react = require('react');
 var FieldWrapper = require('../internal/FieldWrapper.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["children", "name", "className", "optionWidth", "onChange"];
+var _excluded = ["children", "name", "className", "optionWidth", "value", "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; }
 /**
@@ -23,6 +23,7 @@ var RadioGroup = function RadioGroup(_ref) {
     name = _ref.name,
     className = _ref.className,
     optionWidth = _ref.optionWidth,
+    value = _ref.value,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
@@ -31,6 +32,7 @@ var RadioGroup = function RadioGroup(_ref) {
       children: core.cloneChildren(children, function (child) {
         return /*#__PURE__*/react.cloneElement(child, {
           name: name,
+          checked: child.props.value === value,
           onChange: onChange,
           width: optionWidth
         });

package/dist/cjs/input/Search.js

@@ -81,14 +81,13 @@ var Search = function Search(_ref) {
     actionButton: /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
       children: [searching && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         className: "p-2",
-        icon: core.CoreIcons.spinner,
-        animate: "spin"
+        icon: "icon-[svg-spinners--eclipse]"
       }), !searching && !hideHandle && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
         tabIndex: -1,
         variant: "link",
         "aria-label": "search",
         disabled: !actualValue,
-        icon: core.CoreIcons.search,
+        icon: "icon-[mdi--magnify]",
         onClick: handleSearch
       })]
     })

package/dist/cjs/internal/ErrorIcon.js

@@ -24,7 +24,7 @@ var ErrorIcon = function ErrorIcon(_ref) {
     children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
       className: "flex-content first:ms-2 self-center",
       color: "danger",
-      icon: core.CoreIcons.alert
+      icon: "icon-[mdi--alert-circle-outline]"
     })
   });
 };

package/dist/cjs/internal/InputWrapper.js

@@ -85,7 +85,7 @@ var InputWrapper = function InputWrapper(_ref) {
       invalid: invalid,
       error: error
     }), children, allowClear && showClear && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-      icon: core.CoreIcons.close,
+      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")
     }), decorateEnd && /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -100,14 +100,14 @@ var InputWrapper = function InputWrapper(_ref) {
       onClick: function onClick() {
         return setExpanded(!isExpanded);
       },
-      icon: isExpanded ? core.CoreIcons.arrowCollapse : core.CoreIcons.arrowExpand,
+      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"
     })]
   });
   return /*#__PURE__*/jsxRuntime.jsx(Wrapper, _objectSpread(_objectSpread({}, wrapperProps), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       ref: elRef,
-      className: classNames("relative min-h-8 flex flex-col flex-nowrap", width ? "flex-auto" : "flex-1"),
+      className: classNames("relative min-h-8 flex flex-col flex-nowrap", width ? "flex-content" : "flex-1"),
       style: {
         width: width,
         flexBasis: width

package/dist/cjs/select/AutoComplete.js

@@ -243,9 +243,8 @@ var AutoComplete = function AutoComplete(_ref) {
         className: "opacity-0 absolute"
       })]
     }), state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-      animate: "spin",
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: core.CoreIcons.spinner
+      icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,

package/dist/cjs/select/DualList.js

@@ -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,
@@ -195,7 +195,7 @@ var DualList = function DualList(_ref) {
             "aria-label": "scroll to top",
             onClick: moveAllLeft,
             icon: {
-              icon: core$1.CoreIcons.chevronsLeft,
+              icon: "icon-[mdi--chevron-double-left]",
               rtlFlip: true
             },
             disabled: !rightOptions.length
@@ -205,7 +205,7 @@ var DualList = function DualList(_ref) {
             "aria-label": "scroll up",
             onClick: moveRightSelected,
             icon: {
-              icon: core$1.CoreIcons.chevronLeft,
+              icon: "icon-[mdi--chevron-left]",
               rtlFlip: true
             },
             disabled: !rightSelected.length
@@ -215,7 +215,7 @@ var DualList = function DualList(_ref) {
             "aria-label": "scroll down",
             onClick: moveLeftSelected,
             icon: {
-              icon: core$1.CoreIcons.chevronRight,
+              icon: "icon-[mdi--chevron-right]",
               rtlFlip: true
             },
             disabled: !leftSelected.length
@@ -225,7 +225,7 @@ var DualList = function DualList(_ref) {
             "aria-label": "scroll to bottom",
             onClick: moveAllRight,
             icon: {
-              icon: core$1.CoreIcons.chevronsRight,
+              icon: "icon-[mdi--chevron-double-right]",
               rtlFlip: true
             },
             disabled: !leftOptions.length

package/dist/cjs/select/List.js

@@ -1,9 +1,7 @@
 'use strict';
 
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var react$1 = require('@floating-ui/react');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
@@ -31,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,
@@ -259,26 +259,10 @@ var List = function List(_ref) {
         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"],
-        children: ( /*#__PURE__*/function () {
-          var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, label) {
-            var _renderer3;
-            return _regeneratorRuntime.wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  _context.next = 2;
-                  return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-                case 2:
-                  return _context.abrupt("return", _context.sent);
-                case 3:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          }));
-          return function (_x, _x2) {
-            return _ref4.apply(this, arguments);
-          };
-        }())
+        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/Select.js

@@ -1,9 +1,7 @@
 'use strict';
 
-var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var react$1 = require('@floating-ui/react');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
@@ -36,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,
@@ -200,7 +198,7 @@ var Select = function Select(_ref) {
     } else if (!utilities.isEmpty(state.value) && !state.query) {
       var _ref3, _renderer2;
       return /*#__PURE__*/jsxRuntime.jsx("span", {
-        className: "self-center pointer-events-none select-none",
+        className: "self-center pointer-events-none select-none truncate leading-tight",
         children: (_ref3 = (_renderer2 = renderer === null || renderer === void 0 ? void 0 : renderer(state.value)) !== null && _renderer2 !== void 0 ? _renderer2 : state.value[labelProperty]) !== null && _ref3 !== void 0 ? _ref3 : state.value
       });
     }
@@ -248,7 +246,7 @@ var Select = function Select(_ref) {
         size: 1,
         ref: ref,
         autoFocus: autoFocus,
-        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple && "min-w-24"),
+        className: classNames("appearance-none bg-transparent outline-none border-none ring-0 flex-1 peer", disabled && "cursor-not-allowed pointer-events-none", multiple ? "min-w-24" : "min-w-2"),
         placeholder: utilities.isEmpty(state.value) ? placeholder : "",
         onChange: function onChange(evt) {
           return handleQuery(evt.target.value);
@@ -259,11 +257,10 @@ var Select = function Select(_ref) {
       onClick: function onClick() {
         return !disabled && openDropdown();
       },
-      icon: core.CoreIcons.chevronDown
+      icon: "icon-[mdi--chevron-down]"
     }), state.loading && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-      animate: "spin",
       className: classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none"),
-      icon: core.CoreIcons.spinner
+      icon: "icon-[svg-spinners--eclipse]"
     }), state.open && !state.loading && /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingPortal, {
       children: /*#__PURE__*/jsxRuntime.jsx(react$1.FloatingFocusManager, {
         context: context,
@@ -284,26 +281,10 @@ var Select = function Select(_ref) {
           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"],
-          children: ( /*#__PURE__*/function () {
-            var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(item, label) {
-              var _renderer3;
-              return _regeneratorRuntime.wrap(function _callee$(_context) {
-                while (1) switch (_context.prev = _context.next) {
-                  case 0:
-                    _context.next = 2;
-                    return (_renderer3 = renderer === null || renderer === void 0 ? void 0 : renderer(item)) !== null && _renderer3 !== void 0 ? _renderer3 : label;
-                  case 2:
-                    return _context.abrupt("return", _context.sent);
-                  case 3:
-                  case "end":
-                    return _context.stop();
-                }
-              }, _callee);
-            }));
-            return function (_x, _x2) {
-              return _ref4.apply(this, arguments);
-            };
-          }())
+          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/esm/builder/FileField.js

@@ -4,7 +4,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { Tooltip, Button, Icon, CoreIcons, ProgressBar } from '@react-fabric/core';
+import { Tooltip, Button, Icon, ProgressBar } from '@react-fabric/core';
 import { isString, FileUtil, Format } from '@react-fabric/utilities';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -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,7 +24,8 @@ 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);
@@ -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",
@@ -110,7 +113,7 @@ var FileField = function FileField(_ref) {
                 children: file.error
               })
             }), file.progress && /*#__PURE__*/jsx(Icon, {
-              icon: CoreIcons.stop,
+              icon: "icon-[mdi--stop]",
               bg: "danger",
               color: "white",
               size: "sm",
@@ -121,7 +124,7 @@ var FileField = function FileField(_ref) {
                 return (_file$abort = file.abort) === null || _file$abort === void 0 ? void 0 : _file$abort.call(file);
               }
             }), !file.progress && /*#__PURE__*/jsx(Icon, {
-              icon: CoreIcons.trash,
+              icon: "icon-[mdi--trash-can-outline]",
               color: "danger",
               size: "sm",
               "aria-label": "remove",

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

@@ -1,6 +1,7 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { yupResolver } from '@hookform/resolvers/yup';
 import { Modal, Content, Footer, Button } from '@react-fabric/core';
 import { yup } from '@react-fabric/utilities';
 import { useCallback } from 'react';
@@ -25,7 +26,7 @@ var AddSchemaFields = function AddSchemaFields(props) {
   }, []);
   return /*#__PURE__*/jsx(Modal, _objectSpread(_objectSpread({}, props), {}, {
     children: /*#__PURE__*/jsxs(Form, {
-      schema: fieldSchema,
+      resolver: yupResolver(fieldSchema),
       defaultValues: {
         fields: [" "]
       },

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

@@ -4,7 +4,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { DndContext } from '@dnd-kit/core';
 import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
 import { SortableContext } from '@dnd-kit/sortable';
-import { useOverlayService, Header, Button, CoreIcons, Content } from '@react-fabric/core';
+import { useOverlayService, Header, Button, Content } from '@react-fabric/core';
 import { isArray } from '@react-fabric/utilities';
 import { useState, useCallback } from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
@@ -96,13 +96,13 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
       children: [dynamic && /*#__PURE__*/jsx(Button, {
         size: "sm",
         variant: "link",
-        icon: CoreIcons.insert,
+        icon: "icon-[mdi--plus-circle-outline]",
         "aria-label": "add field",
         onClick: handleAdd
       }), /*#__PURE__*/jsx(Button, {
         size: "sm",
         variant: "link",
-        icon: CoreIcons.colapseAllVar,
+        icon: "icon-[mdi--arrow-collapse-vertical]",
         "aria-label": "collapse all",
         onClick: function onClick() {
           return setDefaultOpen(false);
@@ -110,7 +110,7 @@ var SchemaArrayForm = function SchemaArrayForm(_ref) {
       }), /*#__PURE__*/jsx(Button, {
         size: "sm",
         variant: "link",
-        icon: CoreIcons.expandAllVar,
+        icon: "icon-[mdi--arrow-expand-vertical]",
         "aria-label": "expand all",
         onClick: function onClick() {
           return setDefaultOpen(true);
@@ -138,7 +138,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

@@ -5,7 +5,7 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { useOverlayService, Modal, Content, Footer, Button, Collapsable, CoreIcons, ToggleButtonGroup } from '@react-fabric/core';
+import { useOverlayService, Modal, Content, Footer, Button, Collapsable, ToggleButtonGroup } from '@react-fabric/core';
 import { EMPTY_ARRAY } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useState, useCallback, useEffect, Fragment } from 'react';
@@ -180,7 +180,7 @@ var SchemaField = function SchemaField(_ref) {
           variant: "link",
           "aria-label": "Delete",
           stopPropagation: true,
-          icon: CoreIcons.trash,
+          icon: "icon-[mdi--trash-can-outline]",
           onClick: onRemove,
           className: "invisible group-hover/field:visible"
         })]
@@ -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"),
@@ -242,7 +242,7 @@ var SchemaField = function SchemaField(_ref) {
                 }
               })
             }), customOptions && /*#__PURE__*/jsx(Button, {
-              icon: CoreIcons.list,
+              icon: "icon-[mdi--list-box-outline]",
               "aria-label": "Custom options",
               onClick: function onClick() {
                 void openOptionModal({
@@ -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/Form.js

@@ -1,18 +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 { yupResolver } from '@hookform/resolvers/yup';
 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 { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["formRef", "schema", "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() {
@@ -31,10 +30,7 @@ var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
  * ```jsx
  * <Form
  *   formRef={formRef}
- *   schema={yup.object().shape({
- *     name: yup.string().required("Name is required"),
- *     email: yup.string().email("Invalid email").required("Email is required"),
- *   })}
+ *   resolver={hookformResolver(schema)}
  *   defaultValues={{ name: "", email: "" }}
  *   onSubmit={(values) => {
  *     console.log("Form submitted with values:", values);
@@ -52,10 +48,11 @@ var DEFAULT_SUBMIT = function DEFAULT_SUBMIT() {
  */
 var Form = function Form(_ref) {
   var formRef = _ref.formRef,
-    schema = _ref.schema,
+    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,
@@ -63,8 +60,27 @@ var Form = function Form(_ref) {
   var ref = useRef(null);
   var form = useForm$1({
     shouldFocusError: true,
-    resolver: schema && yupResolver(schema),
-    defaultValues: defaultValues
+    resolver: resolver,
+    defaultValues: function () {
+      var _defaultValues2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return Promise.resolve(_defaultValues);
+            case 2:
+              return _context.abrupt("return", _context.sent);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function defaultValues() {
+        return _defaultValues2.apply(this, arguments);
+      }
+      return defaultValues;
+    }()
   });
   var _useTransition = useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
@@ -86,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();
@@ -100,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 _callee2$(_context2) {
+            while (1) switch (_context2.prev = _context2.next) {
               case 0:
-                _context.next = 2;
+                _context2.next = 2;
                 return form.trigger(fields);
               case 2:
-                return _context.abrupt("return", _context.sent);
+                return _context2.abrupt("return", _context2.sent);
               case 3:
               case "end":
-                return _context.stop();
+                return _context2.stop();
             }
-          }, _callee);
+          }, _callee2);
         }));
         function validate(_x) {
           return _validate.apply(this, arguments);
@@ -136,9 +157,10 @@ 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);
     setTimeout(function () {
       var _el$querySelector;
       return (_el$querySelector = el.querySelector("input[aria-invalid='true'],textarea[aria-invalid='true']")) === null || _el$querySelector === void 0 ? void 0 : _el$querySelector.focus();
@@ -148,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();