@react-fabric/form 1.0.0-beta.33 → 1.0.0-beta.34

package/dist/cjs/builder/FormField.js

@@ -106,7 +106,7 @@ var FormField = function FormField(_ref) {
   });
   return rest.multiple && !hasOptions ? /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
     name: fieldName,
-    label: t(label, label),
+    label: t("fb.".concat(id), label || id),
     required: required,
     onAdd: function onAdd() {
       return String("");
@@ -118,8 +118,8 @@ var FormField = function FormField(_ref) {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread(_objectSpread({}, props), {}, {
       autoFocus: autoFocus,
-      label: t(label, label),
-      placeholder: t(label, label),
+      label: t("fb.".concat(id), label || id),
+      placeholder: t("fb.".concat(id), label || id),
       required: required,
       inline: inline
     }))

package/dist/cjs/builder/SchemaEditor.js

@@ -12,6 +12,7 @@ var ArrayInput = require('../input/ArrayInput.js');
 var Checkbox = require('../input/Checkbox.js');
 var DateInput = require('../input/DateInput.js');
 var Field = require('../input/Field.js');
+var Hidden = require('../input/Hidden.js');
 var Input = require('../input/Input.js');
 var Number = require('../input/Number.js');
 var Select = require('../select/Select.js');
@@ -24,6 +25,7 @@ var CUSTOM_LIST = "--CUSTOM--";
 var SchemaField = function SchemaField(_ref) {
   var field = _ref.field,
     getModel = _ref.getModel,
+    onRemove = _ref.onRemove,
     _ref$optionLists = _ref.optionLists,
     optionLists = _ref$optionLists === void 0 ? utilities.EMPTY_ARRAY : _ref$optionLists,
     allowRemove = _ref.allowRemove,
@@ -81,7 +83,7 @@ var SchemaField = function SchemaField(_ref) {
       setCustomOptions(model.optionList === CUSTOM_LIST);
     }, 10);
   }, []);
-  react.useEffect(function () {
+  var handleTypeChange = react.useCallback(function (type) {
     if (type) {
       var modelRef = getModel();
       var reset = {
@@ -115,8 +117,9 @@ var SchemaField = function SchemaField(_ref) {
         setMultiple(false);
       }
       onTypeChange(reset);
+      setType(type);
     }
-  }, [type]);
+  }, []);
   return /*#__PURE__*/jsxRuntime.jsxs(core.Collapsable, {
     open: true,
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -131,11 +134,17 @@ var SchemaField = function SchemaField(_ref) {
         "aria-label": "Delete",
         stopPropagation: true,
         icon: core.CoreIcons.trash,
+        onClick: onRemove,
         className: "invisible group-hover/field:visible"
       })]
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       className: "flex flex-col gap-1 pb-4",
       children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+        name: "".concat(field, ".id"),
+        children: /*#__PURE__*/jsxRuntime.jsx(Hidden.HiddenInput, {
+          hiddenValue: field
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
         name: "".concat(field, ".datatype"),
         children: /*#__PURE__*/jsxRuntime.jsx(Select.Select, {
           inline: true,
@@ -143,7 +152,7 @@ var SchemaField = function SchemaField(_ref) {
           placeholder: "Data type",
           options: acceptableTypes,
           onChange: function onChange(val) {
-            return setType(val);
+            return handleTypeChange(val);
           }
         })
       }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
@@ -357,39 +366,47 @@ var SchemaEditor = function SchemaEditor(_ref2) {
     acceptableTypes = _ref2.acceptableTypes,
     _ref2$optionLists = _ref2.optionLists,
     optionLists = _ref2$optionLists === void 0 ? utilities.EMPTY_ARRAY : _ref2$optionLists,
+    children = _ref2.children,
     onChange = _ref2.onChange;
   var formRef = react.useRef(null);
-  var schemaRef = react.useRef({});
-  var _useState9 = react.useState({}),
+  var _useState9 = react.useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    schema$1 = _useState10[0],
-    setSchema = _useState10[1];
-  var _useState11 = react.useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    schemaFields = _useState12[0],
-    setSchemaFields = _useState12[1];
+    schemaFields = _useState10[0],
+    setSchemaFields = _useState10[1];
   react.useEffect(function () {
+    var _formRef$current$getV, _formRef$current, _formRef$current2;
     var schemaMap = Object.fromEntries(schemaDef.map(function (schema) {
       return [schema.id, schema];
     }));
+    var currentModel = (_formRef$current$getV = (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getValues()) !== null && _formRef$current$getV !== void 0 ? _formRef$current$getV : {};
     var schema = Object.fromEntries(Object.keys(schemaMap).map(function (field) {
-      var _schemaRef$current$fi;
-      return [field, (_schemaRef$current$fi = schemaRef.current[field]) !== null && _schemaRef$current$fi !== void 0 ? _schemaRef$current$fi : schemaMap[field]];
+      var _currentModel$field;
+      return [field, (_currentModel$field = currentModel[field]) !== null && _currentModel$field !== void 0 ? _currentModel$field : schemaMap[field]];
     }));
-    setSchema(schema);
-    setSchemaFields(Object.keys(schema));
+    (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 || _formRef$current2.setValues(schema);
+    setTimeout(function () {
+      setSchemaFields(Object.keys(schema));
+    }, 100);
   }, [schemaDef]);
   var handleChange = react.useCallback(function (model) {
     onChange === null || onChange === void 0 || onChange(Object.values(model));
   }, []);
   var handleTypeChange = react.useCallback(function (field, val) {
-    var _formRef$current;
-    (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValue(field, val);
+    var _formRef$current3;
+    (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 || _formRef$current3.setValue(field, val);
+  }, []);
+  var handleRemove = react.useCallback(function (field) {
+    var _formRef$current$getV2, _formRef$current4, _formRef$current5;
+    var newSchema = (_formRef$current$getV2 = (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : _formRef$current4.getValues()) !== null && _formRef$current$getV2 !== void 0 ? _formRef$current$getV2 : {};
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete newSchema[field];
+    (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 || _formRef$current5.setValues(newSchema);
+    setTimeout(function () {
+      setSchemaFields(Object.keys(newSchema));
+    }, 100);
   }, []);
   return /*#__PURE__*/jsxRuntime.jsxs(Form.Form, {
     formRef: formRef,
-    values: schema$1,
-    defaultValues: schema$1,
     onSubmit: handleChange,
     children: [/*#__PURE__*/jsxRuntime.jsx(core.Content, {
       className: "divide-y",
@@ -398,9 +415,12 @@ var SchemaEditor = function SchemaEditor(_ref2) {
           field: field,
           allowRemove: allowRemove,
           optionLists: optionLists,
+          onRemove: function onRemove() {
+            return handleRemove(field);
+          },
           getModel: function getModel() {
-            var _formRef$current2;
-            return (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getValues()[field];
+            var _formRef$current6;
+            return (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 ? void 0 : _formRef$current6.getValues()[field];
           },
           onTypeChange: function onTypeChange(val) {
             return handleTypeChange(field, val);
@@ -408,19 +428,10 @@ var SchemaEditor = function SchemaEditor(_ref2) {
           acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
         }, field);
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs(core.Footer, {
+    }), children && /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
       flex: true,
-      justify: "end",
-      className: "sticky bottom-0 border-t bg-base px-6 py-2",
-      children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-        type: "reset",
-        variant: "link",
-        children: "Reset"
-      }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-        type: "submit",
-        variant: "solid",
-        children: "Submit"
-      })]
+      className: "border-t bg-base px-6 py-2",
+      children: children
     })]
   });
 };

package/dist/cjs/form/Form.js

@@ -7,11 +7,12 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var yup = require('@hookform/resolvers/yup');
 var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["formRef", "schema", "children", "values", "defaultValues", "onSubmit", "onChange"];
+var _excluded = ["formRef", "schema", "children", "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() {
@@ -21,16 +22,16 @@ var Form = function Form(_ref) {
   var formRef = _ref.formRef,
     schema = _ref.schema,
     children = _ref.children,
-    values = _ref.values,
-    defaultValues = _ref.defaultValues,
+    _ref$defaultValues = _ref.defaultValues,
+    defaultValues = _ref$defaultValues === void 0 ? utilities.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 = react.useRef(null);
   var form = reactHookForm.useForm({
-    values: values,
     shouldFocusError: true,
+    shouldUnregister: true,
     resolver: schema && yup.yupResolver(schema),
     defaultValues: defaultValues
   });
@@ -95,6 +96,12 @@ var Form = function Form(_ref) {
           return form.reset(v);
         }, 50);
       },
+      removeField: function removeField(field) {
+        return form.unregister(field, {
+          keepDefaultValue: false,
+          keepValue: false
+        });
+      },
       setValue: function setValue(k, v) {
         return setTimeout(function () {
           return form.setValue(k, v, {

package/dist/cjs/input/ColorInput.js

@@ -41,7 +41,7 @@ var ColorInput = function ColorInput(_ref) {
   var handleChange = react.useCallback(function (e) {
     setActualValue(e !== null && e !== void 0 ? e : defaultColor);
     onChange != null && react.startTransition(function () {
-      return onChange(e);
+      return onChange(e !== null && e !== void 0 ? e : null);
     });
   }, [onChange]);
   var arrowRef = react.useRef(null);

package/dist/cjs/input/DateInput.js

@@ -68,7 +68,7 @@ var DateInput = function DateInput(_ref) {
       setActualValue("");
       setInputValue("");
       onChange != null && react.startTransition(function () {
-        return onChange("");
+        return onChange(null);
       });
     }
   }, [onChange, inputFormat]);
@@ -86,7 +86,7 @@ var DateInput = function DateInput(_ref) {
       setActualValue("");
       setInputValue("");
       onChange != null && react.startTransition(function () {
-        return onChange("");
+        return onChange(null);
       });
     }
   }, [onChange, inputFormat]);

package/dist/cjs/input/File.js

@@ -90,7 +90,7 @@ var FileInput = function FileInput(_ref) {
     } else {
       var _e$target$files, _e$target$files$item, _e$target$files2;
       setActualValue(e === null || e === void 0 || (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files.item(0));
-      onChange === null || onChange === void 0 || onChange((_e$target$files$item = e === null || e === void 0 || (_e$target$files2 = e.target.files) === null || _e$target$files2 === void 0 ? void 0 : _e$target$files2.item(0)) !== null && _e$target$files$item !== void 0 ? _e$target$files$item : undefined);
+      onChange === null || onChange === void 0 || onChange((_e$target$files$item = e === null || e === void 0 || (_e$target$files2 = e.target.files) === null || _e$target$files2 === void 0 ? void 0 : _e$target$files2.item(0)) !== null && _e$target$files$item !== void 0 ? _e$target$files$item : null);
       if (!e && inputRef.current) inputRef.current.value = "";
     }
   }, [onChange, multiple, showList]);

package/dist/cjs/input/Hidden.js

@@ -36,7 +36,7 @@ var HiddenInput = function HiddenInput(_ref) {
     value = _ref$value === void 0 ? "" : _ref$value,
     name = _ref.name;
   react.useEffect(function () {
-    setTimeout(function () {
+    hiddenValue && setTimeout(function () {
       onChange === null || onChange === void 0 || onChange(hiddenValue);
     }, 50);
   }, [hiddenValue]);

package/dist/cjs/input/Input.js

@@ -42,7 +42,7 @@ var Input = function Input(_ref) {
   var handleChange = react.useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onchange]);
   return /*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/cjs/input/Number.js

@@ -42,7 +42,7 @@ var Number = function Number(_ref) {
   var handleChange = react.useCallback(function (e) {
     var number = e === null || e === void 0 ? void 0 : e.target.valueAsNumber;
     setActualValue(number !== null && number !== void 0 ? number : "");
-    onChange === null || onChange === void 0 || onChange(number !== null && number !== void 0 ? number : undefined);
+    onChange === null || onChange === void 0 || onChange(number !== null && number !== void 0 ? number : null);
   }, [onChange]);
   return /*#__PURE__*/jsxRuntime.jsx(InputWrapper.InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/cjs/input/Password.js

@@ -50,7 +50,7 @@ var Password = function Password(_ref) {
   var handleChange = react.useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onChange]);
   return /*#__PURE__*/jsxRuntime.jsxs(InputWrapper.InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/cjs/input/RangeSlider.js

@@ -71,7 +71,7 @@ var RangeSlider = function RangeSlider(_ref) {
   }, [showValue]);
   var handleChange = react.useCallback(function (val) {
     setActualValue(val !== null && val !== void 0 ? val : [min, max]);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, min, max]);
   var minDisplay = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsx("span", {

package/dist/cjs/input/Search.js

@@ -53,7 +53,7 @@ var Search = function Search(_ref) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     refValue.current = value !== null && value !== void 0 ? value : "";
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
 
     // value was cleared so force fire onSearch
     if (searchOnChange) {

package/dist/cjs/input/Slider.js

@@ -73,7 +73,7 @@ var Slider = function Slider(_ref) {
   var handleChange = react.useCallback(function (value) {
     var val = useInfinity && value === max ? Infinity : value;
     setActualValue(val !== null && val !== void 0 ? val : 0);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, max, useInfinity]);
   var minDisplay = react.useMemo(function () {
     return /*#__PURE__*/jsxRuntime.jsx("span", {

package/dist/cjs/input/Textarea.js

@@ -47,7 +47,7 @@ var Textarea = function Textarea(_ref) {
   var handleChange = react.useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onChange]);
   react.useEffect(function () {
     if (variableRows) {

package/dist/esm/builder/FormField.js

@@ -106,7 +106,7 @@ var FormField = function FormField(_ref) {
   });
   return rest.multiple && !hasOptions ? /*#__PURE__*/jsx(ArrayInput, {
     name: fieldName,
-    label: t(label, label),
+    label: t("fb.".concat(id), label || id),
     required: required,
     onAdd: function onAdd() {
       return String("");
@@ -118,8 +118,8 @@ var FormField = function FormField(_ref) {
     name: fieldName,
     children: /*#__PURE__*/jsx(E, _objectSpread(_objectSpread({}, props), {}, {
       autoFocus: autoFocus,
-      label: t(label, label),
-      placeholder: t(label, label),
+      label: t("fb.".concat(id), label || id),
+      placeholder: t("fb.".concat(id), label || id),
       required: required,
       inline: inline
     }))

package/dist/esm/builder/SchemaEditor.js

@@ -3,7 +3,7 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { Content, Footer, Button, useOverlayService, Modal, Collapsable, CoreIcons, ToggleButtonGroup } from '@react-fabric/core';
+import { Content, Footer, useOverlayService, Modal, Button, Collapsable, CoreIcons, ToggleButtonGroup } from '@react-fabric/core';
 import { EMPTY_ARRAY } from '@react-fabric/utilities';
 import { useRef, useState, useEffect, useCallback, Fragment } from 'react';
 import { Controller } from '../form/Controller.js';
@@ -12,6 +12,7 @@ import { ArrayInput } from '../input/ArrayInput.js';
 import { Checkbox } from '../input/Checkbox.js';
 import { DateInput } from '../input/DateInput.js';
 import { Field } from '../input/Field.js';
+import { HiddenInput } from '../input/Hidden.js';
 import { Input } from '../input/Input.js';
 import { Number } from '../input/Number.js';
 import { Select } from '../select/Select.js';
@@ -24,6 +25,7 @@ var CUSTOM_LIST = "--CUSTOM--";
 var SchemaField = function SchemaField(_ref) {
   var field = _ref.field,
     getModel = _ref.getModel,
+    onRemove = _ref.onRemove,
     _ref$optionLists = _ref.optionLists,
     optionLists = _ref$optionLists === void 0 ? EMPTY_ARRAY : _ref$optionLists,
     allowRemove = _ref.allowRemove,
@@ -81,7 +83,7 @@ var SchemaField = function SchemaField(_ref) {
       setCustomOptions(model.optionList === CUSTOM_LIST);
     }, 10);
   }, []);
-  useEffect(function () {
+  var handleTypeChange = useCallback(function (type) {
     if (type) {
       var modelRef = getModel();
       var reset = {
@@ -115,8 +117,9 @@ var SchemaField = function SchemaField(_ref) {
         setMultiple(false);
       }
       onTypeChange(reset);
+      setType(type);
     }
-  }, [type]);
+  }, []);
   return /*#__PURE__*/jsxs(Collapsable, {
     open: true,
     children: [/*#__PURE__*/jsxs("div", {
@@ -131,11 +134,17 @@ var SchemaField = function SchemaField(_ref) {
         "aria-label": "Delete",
         stopPropagation: true,
         icon: CoreIcons.trash,
+        onClick: onRemove,
         className: "invisible group-hover/field:visible"
       })]
     }), /*#__PURE__*/jsxs("div", {
       className: "flex flex-col gap-1 pb-4",
       children: [/*#__PURE__*/jsx(Controller, {
+        name: "".concat(field, ".id"),
+        children: /*#__PURE__*/jsx(HiddenInput, {
+          hiddenValue: field
+        })
+      }), /*#__PURE__*/jsx(Controller, {
         name: "".concat(field, ".datatype"),
         children: /*#__PURE__*/jsx(Select, {
           inline: true,
@@ -143,7 +152,7 @@ var SchemaField = function SchemaField(_ref) {
           placeholder: "Data type",
           options: acceptableTypes,
           onChange: function onChange(val) {
-            return setType(val);
+            return handleTypeChange(val);
           }
         })
       }), /*#__PURE__*/jsx(Controller, {
@@ -357,39 +366,47 @@ var SchemaEditor = function SchemaEditor(_ref2) {
     acceptableTypes = _ref2.acceptableTypes,
     _ref2$optionLists = _ref2.optionLists,
     optionLists = _ref2$optionLists === void 0 ? EMPTY_ARRAY : _ref2$optionLists,
+    children = _ref2.children,
     onChange = _ref2.onChange;
   var formRef = useRef(null);
-  var schemaRef = useRef({});
-  var _useState9 = useState({}),
+  var _useState9 = useState([]),
     _useState10 = _slicedToArray(_useState9, 2),
-    schema = _useState10[0],
-    setSchema = _useState10[1];
-  var _useState11 = useState([]),
-    _useState12 = _slicedToArray(_useState11, 2),
-    schemaFields = _useState12[0],
-    setSchemaFields = _useState12[1];
+    schemaFields = _useState10[0],
+    setSchemaFields = _useState10[1];
   useEffect(function () {
+    var _formRef$current$getV, _formRef$current, _formRef$current2;
     var schemaMap = Object.fromEntries(schemaDef.map(function (schema) {
       return [schema.id, schema];
     }));
+    var currentModel = (_formRef$current$getV = (_formRef$current = formRef.current) === null || _formRef$current === void 0 ? void 0 : _formRef$current.getValues()) !== null && _formRef$current$getV !== void 0 ? _formRef$current$getV : {};
     var schema = Object.fromEntries(Object.keys(schemaMap).map(function (field) {
-      var _schemaRef$current$fi;
-      return [field, (_schemaRef$current$fi = schemaRef.current[field]) !== null && _schemaRef$current$fi !== void 0 ? _schemaRef$current$fi : schemaMap[field]];
+      var _currentModel$field;
+      return [field, (_currentModel$field = currentModel[field]) !== null && _currentModel$field !== void 0 ? _currentModel$field : schemaMap[field]];
     }));
-    setSchema(schema);
-    setSchemaFields(Object.keys(schema));
+    (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 || _formRef$current2.setValues(schema);
+    setTimeout(function () {
+      setSchemaFields(Object.keys(schema));
+    }, 100);
   }, [schemaDef]);
   var handleChange = useCallback(function (model) {
     onChange === null || onChange === void 0 || onChange(Object.values(model));
   }, []);
   var handleTypeChange = useCallback(function (field, val) {
-    var _formRef$current;
-    (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValue(field, val);
+    var _formRef$current3;
+    (_formRef$current3 = formRef.current) === null || _formRef$current3 === void 0 || _formRef$current3.setValue(field, val);
+  }, []);
+  var handleRemove = useCallback(function (field) {
+    var _formRef$current$getV2, _formRef$current4, _formRef$current5;
+    var newSchema = (_formRef$current$getV2 = (_formRef$current4 = formRef.current) === null || _formRef$current4 === void 0 ? void 0 : _formRef$current4.getValues()) !== null && _formRef$current$getV2 !== void 0 ? _formRef$current$getV2 : {};
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete newSchema[field];
+    (_formRef$current5 = formRef.current) === null || _formRef$current5 === void 0 || _formRef$current5.setValues(newSchema);
+    setTimeout(function () {
+      setSchemaFields(Object.keys(newSchema));
+    }, 100);
   }, []);
   return /*#__PURE__*/jsxs(Form, {
     formRef: formRef,
-    values: schema,
-    defaultValues: schema,
     onSubmit: handleChange,
     children: [/*#__PURE__*/jsx(Content, {
       className: "divide-y",
@@ -398,9 +415,12 @@ var SchemaEditor = function SchemaEditor(_ref2) {
           field: field,
           allowRemove: allowRemove,
           optionLists: optionLists,
+          onRemove: function onRemove() {
+            return handleRemove(field);
+          },
           getModel: function getModel() {
-            var _formRef$current2;
-            return (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getValues()[field];
+            var _formRef$current6;
+            return (_formRef$current6 = formRef.current) === null || _formRef$current6 === void 0 ? void 0 : _formRef$current6.getValues()[field];
           },
           onTypeChange: function onTypeChange(val) {
             return handleTypeChange(field, val);
@@ -408,19 +428,10 @@ var SchemaEditor = function SchemaEditor(_ref2) {
           acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(DATA_TYPES)
         }, field);
       })
-    }), /*#__PURE__*/jsxs(Footer, {
+    }), children && /*#__PURE__*/jsx(Footer, {
       flex: true,
-      justify: "end",
-      className: "sticky bottom-0 border-t bg-base px-6 py-2",
-      children: [/*#__PURE__*/jsx(Button, {
-        type: "reset",
-        variant: "link",
-        children: "Reset"
-      }), /*#__PURE__*/jsx(Button, {
-        type: "submit",
-        variant: "solid",
-        children: "Submit"
-      })]
+      className: "border-t bg-base px-6 py-2",
+      children: children
     })]
   });
 };

package/dist/esm/form/Form.js

@@ -7,11 +7,12 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 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, FormProvider } from 'react-hook-form';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-var _excluded = ["formRef", "schema", "children", "values", "defaultValues", "onSubmit", "onChange"];
+var _excluded = ["formRef", "schema", "children", "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() {
@@ -21,16 +22,16 @@ var Form = function Form(_ref) {
   var formRef = _ref.formRef,
     schema = _ref.schema,
     children = _ref.children,
-    values = _ref.values,
-    defaultValues = _ref.defaultValues,
+    _ref$defaultValues = _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({
-    values: values,
     shouldFocusError: true,
+    shouldUnregister: true,
     resolver: schema && yupResolver(schema),
     defaultValues: defaultValues
   });
@@ -95,6 +96,12 @@ var Form = function Form(_ref) {
           return form.reset(v);
         }, 50);
       },
+      removeField: function removeField(field) {
+        return form.unregister(field, {
+          keepDefaultValue: false,
+          keepValue: false
+        });
+      },
       setValue: function setValue(k, v) {
         return setTimeout(function () {
           return form.setValue(k, v, {

package/dist/esm/input/ColorInput.js

@@ -41,7 +41,7 @@ var ColorInput = function ColorInput(_ref) {
   var handleChange = useCallback(function (e) {
     setActualValue(e !== null && e !== void 0 ? e : defaultColor);
     onChange != null && startTransition(function () {
-      return onChange(e);
+      return onChange(e !== null && e !== void 0 ? e : null);
     });
   }, [onChange]);
   var arrowRef = useRef(null);

package/dist/esm/input/DateInput.js

@@ -68,7 +68,7 @@ var DateInput = function DateInput(_ref) {
       setActualValue("");
       setInputValue("");
       onChange != null && startTransition(function () {
-        return onChange("");
+        return onChange(null);
       });
     }
   }, [onChange, inputFormat]);
@@ -86,7 +86,7 @@ var DateInput = function DateInput(_ref) {
       setActualValue("");
       setInputValue("");
       onChange != null && startTransition(function () {
-        return onChange("");
+        return onChange(null);
       });
     }
   }, [onChange, inputFormat]);

package/dist/esm/input/File.js

@@ -90,7 +90,7 @@ var FileInput = function FileInput(_ref) {
     } else {
       var _e$target$files, _e$target$files$item, _e$target$files2;
       setActualValue(e === null || e === void 0 || (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files.item(0));
-      onChange === null || onChange === void 0 || onChange((_e$target$files$item = e === null || e === void 0 || (_e$target$files2 = e.target.files) === null || _e$target$files2 === void 0 ? void 0 : _e$target$files2.item(0)) !== null && _e$target$files$item !== void 0 ? _e$target$files$item : undefined);
+      onChange === null || onChange === void 0 || onChange((_e$target$files$item = e === null || e === void 0 || (_e$target$files2 = e.target.files) === null || _e$target$files2 === void 0 ? void 0 : _e$target$files2.item(0)) !== null && _e$target$files$item !== void 0 ? _e$target$files$item : null);
       if (!e && inputRef.current) inputRef.current.value = "";
     }
   }, [onChange, multiple, showList]);

package/dist/esm/input/Hidden.js

@@ -36,7 +36,7 @@ var HiddenInput = function HiddenInput(_ref) {
     value = _ref$value === void 0 ? "" : _ref$value,
     name = _ref.name;
   useEffect(function () {
-    setTimeout(function () {
+    hiddenValue && setTimeout(function () {
       onChange === null || onChange === void 0 || onChange(hiddenValue);
     }, 50);
   }, [hiddenValue]);

package/dist/esm/input/Input.js

@@ -42,7 +42,7 @@ var Input = function Input(_ref) {
   var handleChange = useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onchange]);
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/esm/input/Number.js

@@ -42,7 +42,7 @@ var Number = function Number(_ref) {
   var handleChange = useCallback(function (e) {
     var number = e === null || e === void 0 ? void 0 : e.target.valueAsNumber;
     setActualValue(number !== null && number !== void 0 ? number : "");
-    onChange === null || onChange === void 0 || onChange(number !== null && number !== void 0 ? number : undefined);
+    onChange === null || onChange === void 0 || onChange(number !== null && number !== void 0 ? number : null);
   }, [onChange]);
   return /*#__PURE__*/jsx(InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/esm/input/Password.js

@@ -50,7 +50,7 @@ var Password = function Password(_ref) {
   var handleChange = useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onChange]);
   return /*#__PURE__*/jsxs(InputWrapper, _objectSpread(_objectSpread({
     showClear: !!actualValue,

package/dist/esm/input/RangeSlider.js

@@ -71,7 +71,7 @@ var RangeSlider = function RangeSlider(_ref) {
   }, [showValue]);
   var handleChange = useCallback(function (val) {
     setActualValue(val !== null && val !== void 0 ? val : [min, max]);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, min, max]);
   var minDisplay = useMemo(function () {
     return /*#__PURE__*/jsx("span", {

package/dist/esm/input/Search.js

@@ -53,7 +53,7 @@ var Search = function Search(_ref) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     refValue.current = value !== null && value !== void 0 ? value : "";
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
 
     // value was cleared so force fire onSearch
     if (searchOnChange) {

package/dist/esm/input/Slider.js

@@ -73,7 +73,7 @@ var Slider = function Slider(_ref) {
   var handleChange = useCallback(function (value) {
     var val = useInfinity && value === max ? Infinity : value;
     setActualValue(val !== null && val !== void 0 ? val : 0);
-    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : undefined);
+    onChange === null || onChange === void 0 || onChange(val !== null && val !== void 0 ? val : null);
   }, [onChange, max, useInfinity]);
   var minDisplay = useMemo(function () {
     return /*#__PURE__*/jsx("span", {

package/dist/esm/input/Textarea.js

@@ -47,7 +47,7 @@ var Textarea = function Textarea(_ref) {
   var handleChange = useCallback(function (e) {
     var value = e === null || e === void 0 ? void 0 : e.target.value;
     setActualValue(value !== null && value !== void 0 ? value : "");
-    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : undefined);
+    onChange === null || onChange === void 0 || onChange(value !== null && value !== void 0 ? value : null);
   }, [onChange]);
   useEffect(function () {
     if (variableRows) {

package/dist/types/builder/SchemaEditor.d.ts

@@ -1,10 +1,16 @@
+/// <reference types="react" />
+import { type Elements } from "@react-fabric/core/dist/types/types";
 import { DATA_TYPES, type FormSchema } from "../types/schema";
 interface Props {
     schemaDef: FormSchema;
     allowRemove?: boolean;
     acceptableTypes?: DATA_TYPES[];
     optionLists?: string[];
+    /**
+     * Footer actions
+     */
+    children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
     onChange: (schema: FormSchema) => void;
 }
-export declare const SchemaEditor: ({ schemaDef, allowRemove, acceptableTypes, optionLists, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const SchemaEditor: ({ schemaDef, allowRemove, acceptableTypes, optionLists, children, onChange, }: Props) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -8,6 +8,7 @@ export interface FormRef<K extends KeyValue> {
     submit: () => void;
     validate: () => Promise<boolean>;
     getValues: () => K;
+    removeField: (field: string) => void;
     setValue: (key: keyof K, value: AnyObject) => void;
     setValues: (values: K) => void;
 }
@@ -17,10 +18,6 @@ export interface FormProps<K extends KeyValue = KeyValue> {
      * form data schema
      */
     schema?: yup.ObjectSchema<K>;
-    /**
-     * current form model
-     */
-    values?: K;
     /**
      * default data values
      */
@@ -34,4 +31,4 @@ export interface FormProps<K extends KeyValue = KeyValue> {
      */
     onSubmit?: (values: K) => void;
 }
-export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, values, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const Form: <K extends KeyValue<any>>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type InputProps } from "../types";
 import { type ColorProps } from "./ColorPicker";
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps extends InputProps, Omit<ColorProps, "onChange">, RefProp {
     /**
      * show eydrop picker
      */

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

@@ -8,7 +8,7 @@ export interface InputProps<V = string> extends TestProps {
     /**
      * change handler
      */
-    onChange?: (value?: V) => void;
+    onChange?: (value?: V | null) => void;
     /**
      * on focus event handler
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.33",
+  "version": "1.0.0-beta.34",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,9 +39,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.33",
-    "@react-fabric/date": "^1.0.0-beta.33",
-    "@react-fabric/utilities": "^1.0.0-beta.33",
+    "@react-fabric/core": "^1.0.0-beta.34",
+    "@react-fabric/date": "^1.0.0-beta.34",
+    "@react-fabric/utilities": "^1.0.0-beta.34",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -61,5 +61,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "3b7ffc99aac7b8fdc72c7122c39db55d1104297f"
+  "gitHead": "dcd1c1b247b6597b168a0649d2b3a53463b9c37e"
 }

package/src/builder/FormField.tsx

@@ -151,7 +151,7 @@ export const FormField = ({
   return rest.multiple && !hasOptions ? (
     <ArrayInput
       name={fieldName}
-      label={t(label, label)}
+      label={t(`fb.${id}`, label || id)}
       required={required}
       onAdd={() => String("")}
     >
@@ -164,8 +164,8 @@ export const FormField = ({
       <E
         {...props}
         autoFocus={autoFocus}
-        label={t(label, label)}
-        placeholder={t(label, label)}
+        label={t(`fb.${id}`, label || id)}
+        placeholder={t(`fb.${id}`, label || id)}
         required={required}
         inline={inline}
       />

package/src/builder/SchemaEditor.tsx

@@ -31,6 +31,7 @@ import {
   ToggleButtonGroup,
   useOverlayService,
 } from "@react-fabric/core";
+import { type Elements } from "@react-fabric/core/dist/types/types";
 import { EMPTY_ARRAY } from "@react-fabric/utilities";
 import { Fragment, useCallback, useEffect, useRef, useState } from "react";
 import { Controller } from "../form/Controller";
@@ -39,6 +40,7 @@ import { ArrayInput } from "../input/ArrayInput";
 import { Checkbox } from "../input/Checkbox";
 import { DateInput } from "../input/DateInput";
 import { Field } from "../input/Field";
+import { HiddenInput } from "../input/Hidden";
 import { Input } from "../input/Input";
 import { Number } from "../input/Number";
 import { Select } from "../select/Select";
@@ -60,6 +62,11 @@ interface Props {
 
   optionLists?: string[];
 
+  /**
+   * Footer actions
+   */
+  children?: Elements<JSX.Element> | Array<Elements<JSX.Element>>;
+
   onChange: (schema: FormSchema) => void;
 }
 
@@ -68,12 +75,14 @@ const CUSTOM_LIST = "--CUSTOM--";
 const SchemaField = ({
   field,
   getModel,
+  onRemove,
   optionLists = EMPTY_ARRAY,
   allowRemove,
   onTypeChange,
   acceptableTypes,
 }: {
   field: string;
+  onRemove: () => void;
   getModel: () => KeyValue;
   onTypeChange: (val: KeyValue) => void;
 } & Omit<Props, "schemaDef" | "onChange">) => {
@@ -113,7 +122,7 @@ const SchemaField = ({
     }, 10);
   }, []);
 
-  useEffect(() => {
+  const handleTypeChange = useCallback((type: DATA_TYPES) => {
     if (type) {
       const modelRef = getModel();
       let reset = {
@@ -147,8 +156,9 @@ const SchemaField = ({
         setMultiple(false);
       }
       onTypeChange(reset);
+      setType(type);
     }
-  }, [type]);
+  }, []);
 
   return (
     <Collapsable key={field} open>
@@ -162,18 +172,22 @@ const SchemaField = ({
             aria-label="Delete"
             stopPropagation
             icon={CoreIcons.trash}
+            onClick={onRemove}
             className="invisible group-hover/field:visible"
           />
         )}
       </div>
       <div className="flex flex-col gap-1 pb-4">
+        <Controller name={`${field}.id`}>
+          <HiddenInput hiddenValue={field} />
+        </Controller>
         <Controller name={`${field}.datatype`}>
           <Select
             inline
             label="Type"
             placeholder="Data type"
             options={acceptableTypes}
-            onChange={(val) => setType(val as unknown as DATA_TYPES)}
+            onChange={(val) => handleTypeChange(val as unknown as DATA_TYPES)}
           />
         </Controller>
         <Controller name={`${field}.label`}>
@@ -374,11 +388,10 @@ export const SchemaEditor = ({
   allowRemove,
   acceptableTypes,
   optionLists = EMPTY_ARRAY,
+  children,
   onChange,
 }: Props) => {
   const formRef = useRef<FormRef<KeyValue>>(null);
-  const schemaRef = useRef<KeyValue>({});
-  const [schema, setSchema] = useState<KeyValue<SchemaDef>>({});
   const [schemaFields, setSchemaFields] = useState<string[]>([]);
 
   useEffect(() => {
@@ -386,14 +399,18 @@ export const SchemaEditor = ({
       schemaDef.map((schema) => [schema.id, schema]),
     );
 
+    const currentModel: KeyValue = formRef.current?.getValues() ?? {};
+
     const schema = Object.fromEntries(
       Object.keys(schemaMap).map((field) => [
         field,
-        schemaRef.current[field] ?? schemaMap[field],
+        currentModel[field] ?? schemaMap[field],
       ]),
     );
-    setSchema(schema);
-    setSchemaFields(Object.keys(schema));
+    formRef.current?.setValues(schema);
+    setTimeout(() => {
+      setSchemaFields(Object.keys(schema));
+    }, 100);
   }, [schemaDef]);
 
   const handleChange = useCallback((model: KeyValue<SchemaDef>) => {
@@ -404,13 +421,18 @@ export const SchemaEditor = ({
     formRef.current?.setValue(field, val);
   }, []);
 
+  const handleRemove = useCallback((field: string) => {
+    const newSchema: KeyValue = formRef.current?.getValues() ?? {};
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete newSchema[field];
+    formRef.current?.setValues(newSchema);
+    setTimeout(() => {
+      setSchemaFields(Object.keys(newSchema));
+    }, 100);
+  }, []);
+
   return (
-    <Form
-      formRef={formRef}
-      values={schema}
-      defaultValues={schema}
-      onSubmit={handleChange}
-    >
+    <Form formRef={formRef} onSubmit={handleChange}>
       <Content className="divide-y">
         {schemaFields.map((field) => (
           <SchemaField
@@ -418,24 +440,18 @@ export const SchemaEditor = ({
             field={field}
             allowRemove={allowRemove}
             optionLists={optionLists}
+            onRemove={() => handleRemove(field)}
             getModel={() => formRef.current?.getValues()[field]}
             onTypeChange={(val: KeyValue) => handleTypeChange(field, val)}
             acceptableTypes={acceptableTypes ?? Object.values(DATA_TYPES)}
           />
         ))}
       </Content>
-      <Footer
-        flex
-        justify="end"
-        className="sticky bottom-0 border-t bg-base px-6 py-2"
-      >
-        <Button type="reset" variant="link">
-          Reset
-        </Button>
-        <Button type="submit" variant="solid">
-          Submit
-        </Button>
-      </Footer>
+      {children && (
+        <Footer flex className="border-t bg-base px-6 py-2">
+          {children}
+        </Footer>
+      )}
     </Form>
   );
 };

package/src/form/Form.tsx

@@ -23,7 +23,7 @@
 
 import { yupResolver } from "@hookform/resolvers/yup";
 import { useDebounce } from "@react-fabric/core";
-import { type yup } from "@react-fabric/utilities";
+import { EMPTY_OBJECT, type yup } from "@react-fabric/utilities";
 import {
   useCallback,
   useEffect,
@@ -47,6 +47,7 @@ export interface FormRef<K extends KeyValue> {
   submit: () => void;
   validate: () => Promise<boolean>;
   getValues: () => K;
+  removeField: (field: string) => void;
   setValue: (key: keyof K, value: AnyObject) => void;
   setValues: (values: K) => void;
 }
@@ -57,10 +58,6 @@ export interface FormProps<K extends KeyValue = KeyValue> {
    * form data schema
    */
   schema?: yup.ObjectSchema<K>;
-  /**
-   * current form model
-   */
-  values?: K;
   /**
    * default data values
    */
@@ -81,16 +78,15 @@ export const Form = <K extends KeyValue>({
   formRef,
   schema,
   children,
-  values,
-  defaultValues,
+  defaultValues = EMPTY_OBJECT as K,
   onSubmit = DEFAULT_SUBMIT,
   onChange,
   ...rest
 }: PropsWithChildren<FormProps<K>>) => {
   const ref = useRef<HTMLFormElement>(null);
   const form = useForm<K>({
-    values,
     shouldFocusError: true,
+    shouldUnregister: true,
     resolver: schema && (yupResolver(schema) as AnyObject),
     defaultValues: defaultValues as DefaultValues<K>,
   });
@@ -125,6 +121,8 @@ export const Form = <K extends KeyValue>({
       validate: async () => await form.trigger(),
       getValues: () => form.getValues(),
       setValues: (v) => setTimeout(() => form.reset(v), 50),
+      removeField: (field: AnyObject) =>
+        form.unregister(field, { keepDefaultValue: false, keepValue: false }),
       setValue: (k, v) =>
         setTimeout(
           () =>

package/src/input/ColorInput.tsx

@@ -48,7 +48,10 @@ import {
 import { type InputProps } from "../types";
 import { ColorPicker, type ColorProps } from "./ColorPicker";
 
-export interface ColorInputProps extends InputProps, ColorProps, RefProp {
+export interface ColorInputProps
+  extends InputProps,
+    Omit<ColorProps, "onChange">,
+    RefProp {
   /**
    * show eydrop picker
    */
@@ -82,7 +85,7 @@ export const ColorInput = ({
   const handleChange = useCallback(
     (e?: string) => {
       setActualValue(e ?? defaultColor);
-      onChange != null && startTransition(() => onChange(e));
+      onChange != null && startTransition(() => onChange(e ?? null));
     },
     [onChange],
   );

package/src/input/DateInput.tsx

@@ -120,7 +120,7 @@ export const DateInput = ({
       } else {
         setActualValue("");
         setInputValue("");
-        onChange != null && startTransition(() => onChange(""));
+        onChange != null && startTransition(() => onChange(null));
       }
     },
     [onChange, inputFormat],
@@ -137,7 +137,7 @@ export const DateInput = ({
       } else {
         setActualValue("");
         setInputValue("");
-        onChange != null && startTransition(() => onChange(""));
+        onChange != null && startTransition(() => onChange(null));
       }
     },
     [onChange, inputFormat],

package/src/input/File.tsx

@@ -134,7 +134,7 @@ export const FileInput = ({
         }
       } else {
         setActualValue(e?.target.files?.item(0));
-        onChange?.(e?.target.files?.item(0) ?? undefined);
+        onChange?.(e?.target.files?.item(0) ?? null);
         if (!e && inputRef.current) inputRef.current.value = "";
       }
     },

package/src/input/Hidden.tsx

@@ -54,9 +54,10 @@ export const HiddenInput = ({
   name,
 }: Props) => {
   useEffect(() => {
-    setTimeout(() => {
-      onChange?.(hiddenValue);
-    }, 50);
+    hiddenValue &&
+      setTimeout(() => {
+        onChange?.(hiddenValue);
+      }, 50);
   }, [hiddenValue]);
   return (
     <Fragment>

package/src/input/Input.tsx

@@ -73,7 +73,7 @@ export const Input = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onchange],
   );

package/src/input/Number.tsx

@@ -84,7 +84,7 @@ export const Number = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const number = e?.target.valueAsNumber;
       setActualValue(number ?? "");
-      onChange?.(number ?? undefined);
+      onChange?.(number ?? null);
     },
     [onChange],
   );

package/src/input/Password.tsx

@@ -83,7 +83,7 @@ export const Password = ({
     (e?: ChangeEvent<HTMLInputElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onChange],
   );

package/src/input/RangeSlider.tsx

@@ -141,7 +141,7 @@ export const RangeSlider = ({
   const handleChange = useCallback(
     (val: [number, number]) => {
       setActualValue(val ?? [min, max]);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, min, max],
   );

package/src/input/Search.tsx

@@ -96,7 +96,7 @@ export const Search = ({
       const value = e?.target.value;
       refValue.current = value ?? "";
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
 
       // value was cleared so force fire onSearch
       if (searchOnChange) {

package/src/input/Slider.tsx

@@ -146,7 +146,7 @@ export const Slider = ({
     (value: number) => {
       const val = useInfinity && value === max ? Infinity : value;
       setActualValue(val ?? 0);
-      onChange?.(val ?? undefined);
+      onChange?.(val ?? null);
     },
     [onChange, max, useInfinity],
   );

package/src/input/Textarea.tsx

@@ -86,7 +86,7 @@ export const Textarea = ({
     (e?: ChangeEvent<HTMLTextAreaElement>) => {
       const value = e?.target.value;
       setActualValue(value ?? "");
-      onChange?.(value ?? undefined);
+      onChange?.(value ?? null);
     },
     [onChange],
   );

package/src/types/index.ts

@@ -34,7 +34,7 @@ export interface InputProps<V = string> extends TestProps {
   /**
    * change handler
    */
-  onChange?: (value?: V) => void;
+  onChange?: (value?: V | null) => void;
   /**
    * on focus event handler
    */