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

package/dist/cjs/builder/FileField.js

@@ -12,7 +12,7 @@ var Field = require('../input/Field.js');
 var Hidden = require('../input/Hidden.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["uploadHandler", "inline", "label", "accept", "multiple", "value"];
+var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple"];
 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) {
@@ -20,9 +20,9 @@ var FileField = function FileField(_ref) {
     inline = _ref.inline,
     label = _ref.label,
     accept = _ref.accept,
-    _ref$multiple = _ref.multiple,
-    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
-    value = _ref.value,
+    value = _ref.value;
+    _ref.fileUrl;
+    var multiple = _ref.multiple,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useFileUploader = useFileUploader.useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {

package/dist/cjs/builder/FormField.js

@@ -2,22 +2,25 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactI18next = require('react-i18next');
 var Controller = require('../form/Controller.js');
 var ArrayInput = require('../input/ArrayInput.js');
 var AvatarInput = require('../input/AvatarInput.js');
 var ColorInput = require('../input/ColorInput.js');
+var DateInput = require('../input/DateInput.js');
 var Input = require('../input/Input.js');
 var Number = require('../input/Number.js');
-var Range = require('../input/Range.js');
+var RangeSlider = require('../input/RangeSlider.js');
 var Switch = require('../input/Switch.js');
 var Textarea = require('../input/Textarea.js');
 var Select = require('../select/Select.js');
+var schema = require('../types/schema.js');
 var FileField = require('./FileField.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["id", "label", "required", "inline", "prefix", "autoFocus", "defaultValue", "fileUrl", "uploadHandler"];
+var _excluded = ["id", "label", "required", "inline", "prefix", "autoFocus", "optionLists", "fileUrl", "uploadHandler"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FormField = function FormField(_ref) {
@@ -26,9 +29,9 @@ var FormField = function FormField(_ref) {
     required = _ref.required,
     inline = _ref.inline,
     prefix = _ref.prefix,
-    autoFocus = _ref.autoFocus;
-    _ref.defaultValue;
-    var fileUrl = _ref.fileUrl,
+    autoFocus = _ref.autoFocus,
+    optionLists = _ref.optionLists,
+    fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation(),
@@ -36,48 +39,55 @@ var FormField = function FormField(_ref) {
   var fieldName = react.useMemo(function () {
     return [prefix, id].filter(Boolean).join(".");
   }, [id, prefix]);
+  var hasOptions = react.useMemo(function () {
+    var _rest$optionList;
+    return rest.datatype === schema.DATA_TYPES.STRING && (rest.optionList === "--CUSTOM--" && !utilities.isEmpty(rest.options) || !utilities.isEmpty(optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList = rest.optionList) !== null && _rest$optionList !== void 0 ? _rest$optionList : ""]));
+  }, [rest]);
   var E = react.useMemo(function () {
-    if (rest.datatype === "number" || rest.datatype === "decimal") return Number.Number;
-    if (rest.datatype === "range") return Range.Range;
-    if (rest.datatype === "boolean") return Switch.Switch;
-    if (rest.datatype === "text") return Textarea.Textarea;
-    if (rest.datatype === "color") return ColorInput.ColorInput;
-    if (rest.datatype === "string" && rest.options) return Select.Select;
+    if (rest.datatype === schema.DATA_TYPES.NUMBER) return Number.Number;
+    if (rest.datatype === schema.DATA_TYPES.RANGE) return RangeSlider.RangeSlider;
+    if (rest.datatype === schema.DATA_TYPES.BOOL) return Switch.Switch;
+    if (rest.datatype === schema.DATA_TYPES.TEXT) return Textarea.Textarea;
+    if (rest.datatype === schema.DATA_TYPES.DATE) return DateInput.DateInput;
+    if (rest.datatype === schema.DATA_TYPES.COLOR) return ColorInput.ColorInput;
+    if (hasOptions) return Select.Select;
     return Input.Input;
-  }, [rest.datatype]);
+  }, [rest.datatype, hasOptions]);
   var props = react.useMemo(function () {
-    var _rest$step, _rest$step2, _rest$min, _rest$max, _rest$step3;
-    if (rest.datatype === "number") return {
+    var _rest$step, _rest$min, _rest$max, _rest$step2, _optionLists, _rest$optionList2;
+    if (rest.datatype === schema.DATA_TYPES.NUMBER) return {
       min: rest.min,
       max: rest.max,
       step: (_rest$step = rest.step) !== null && _rest$step !== void 0 ? _rest$step : 1
     };
-    if (rest.datatype === "decimal") return {
-      min: rest.min,
-      max: rest.max,
-      step: (_rest$step2 = rest.step) !== null && _rest$step2 !== void 0 ? _rest$step2 : 0.1
-    };
-    if (rest.datatype === "range") return {
+    if (rest.datatype === schema.DATA_TYPES.RANGE) return {
       min: (_rest$min = rest.min) !== null && _rest$min !== void 0 ? _rest$min : 1,
       max: (_rest$max = rest.max) !== null && _rest$max !== void 0 ? _rest$max : 99,
-      step: (_rest$step3 = rest.step) !== null && _rest$step3 !== void 0 ? _rest$step3 : 1,
+      step: (_rest$step2 = rest.step) !== null && _rest$step2 !== void 0 ? _rest$step2 : 1,
       showValue: true,
       showLabels: true
     };
-    if (rest.datatype === "text") return {
+    if (rest.datatype === schema.DATA_TYPES.DATE) return {
+      min: rest.min,
+      max: rest.max,
+      type: rest.type
+    };
+    if (rest.datatype === schema.DATA_TYPES.TEXT) return {
       rows: 3
     };
-    if (rest.datatype === "color") return {
+    if (rest.datatype === schema.DATA_TYPES.COLOR) return {
       showPicker: true
     };
-    if (rest.datatype === "string" && rest.options) return {
-      options: rest.options,
+    if (rest.datatype === schema.DATA_TYPES.STRING && hasOptions) return _objectSpread({
       multiple: rest.multiple,
+      allowCreate: rest.allowCustom,
       searchable: true
-    };
+    }, (_optionLists = optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList2 = rest.optionList) !== null && _rest$optionList2 !== void 0 ? _rest$optionList2 : ""]) !== null && _optionLists !== void 0 ? _optionLists : {
+      options: rest.options
+    });
     return {};
-  }, [rest]);
-  if (rest.datatype === "avatar") return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+  }, [rest, hasOptions, optionLists]);
+  if (rest.datatype === schema.DATA_TYPES.AVATAR) return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(AvatarInput.AvatarInput, {
       uploadHandler: uploadHandler,
@@ -85,7 +95,7 @@ var FormField = function FormField(_ref) {
       name: fieldName
     })
   });
-  if (rest.datatype === "file") return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+  if (rest.datatype === schema.DATA_TYPES.FILE) return uploadHandler && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsxRuntime.jsx(FileField.FileField, _objectSpread({
       uploadHandler: uploadHandler,
@@ -94,12 +104,12 @@ var FormField = function FormField(_ref) {
       id: id
     }, rest))
   });
-  return rest.multiple && !("options" in rest) ? /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
+  return rest.multiple && !hasOptions ? /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
     name: fieldName,
     label: t(label, label),
     required: required,
     onAdd: function onAdd() {
-      return "";
+      return String("");
     },
     children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
       children: /*#__PURE__*/jsxRuntime.jsx(E, _objectSpread({}, props))

package/dist/cjs/builder/SchemaEditor.js

@@ -0,0 +1,428 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var Controller = require('../form/Controller.js');
+var Form = require('../form/Form.js');
+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 Input = require('../input/Input.js');
+var Number = require('../input/Number.js');
+var Select = require('../select/Select.js');
+var schema = require('../types/schema.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+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 CUSTOM_LIST = "--CUSTOM--";
+var SchemaField = function SchemaField(_ref) {
+  var field = _ref.field,
+    getModel = _ref.getModel,
+    _ref$optionLists = _ref.optionLists,
+    optionLists = _ref$optionLists === void 0 ? utilities.EMPTY_ARRAY : _ref$optionLists,
+    allowRemove = _ref.allowRemove,
+    onTypeChange = _ref.onTypeChange,
+    acceptableTypes = _ref.acceptableTypes;
+  var _useState = react.useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var _useState3 = react.useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    multiple = _useState4[0],
+    setMultiple = _useState4[1];
+  var _useState5 = react.useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasOptions = _useState6[0],
+    setHasOptions = _useState6[1];
+  var _useState7 = react.useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    customOptions = _useState8[0],
+    setCustomOptions = _useState8[1];
+  var _useOverlayService = core.useOverlayService(function (props) {
+      return /*#__PURE__*/jsxRuntime.jsxs(core.Modal, _objectSpread(_objectSpread({}, props), {}, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(core.Content, {
+          children: /*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
+            name: "".concat(field, ".options"),
+            onAdd: function onAdd() {
+              return String("");
+            },
+            children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+              children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {})
+            })
+          })
+        }), /*#__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, {
+            variant: "link",
+            onClick: props.onClose,
+            children: "Close"
+          })
+        })]
+      }));
+    }),
+    _useOverlayService2 = _slicedToArray(_useOverlayService, 2),
+    OptionModal = _useOverlayService2[0],
+    openOptionModal = _useOverlayService2[1];
+  react.useEffect(function () {
+    setTimeout(function () {
+      var model = getModel();
+      setType(model.datatype);
+      setMultiple(model.multiple);
+      setHasOptions(!!model.optionList);
+      setCustomOptions(model.optionList === CUSTOM_LIST);
+    }, 10);
+  }, []);
+  react.useEffect(function () {
+    if (type) {
+      var modelRef = getModel();
+      var reset = {
+        datatype: type,
+        id: field,
+        label: modelRef.label,
+        defaultValue: modelRef.defaultValue,
+        required: modelRef.required,
+        multiple: type === schema.DATA_TYPES.AVATAR ? false : modelRef.multiple,
+        minItems: modelRef.minItems,
+        maxItems: modelRef.maxItems
+      };
+      if (type === schema.DATA_TYPES.STRING) {
+        reset = Object.assign(reset, {
+          optionList: modelRef.optionList,
+          options: modelRef.options,
+          regex: modelRef.regex
+        });
+      } else if (type === schema.DATA_TYPES.DATE) {
+        reset = Object.assign(reset, {
+          type: "date"
+        });
+      } else if (type === schema.DATA_TYPES.NUMBER || type === schema.DATA_TYPES.RANGE) {
+        reset = Object.assign(reset, {
+          min: modelRef.min,
+          max: modelRef.max,
+          step: modelRef.step
+        });
+      }
+      if (type === schema.DATA_TYPES.AVATAR) {
+        setMultiple(false);
+      }
+      onTypeChange(reset);
+    }
+  }, [type]);
+  return /*#__PURE__*/jsxRuntime.jsxs(core.Collapsable, {
+    open: true,
+    children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "flex flex-nowrap group/field",
+      children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+        className: "flex-1 truncate",
+        children: field
+      }), allowRemove && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        color: "danger",
+        variant: "link",
+        "aria-label": "Delete",
+        stopPropagation: true,
+        icon: core.CoreIcons.trash,
+        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, ".datatype"),
+        children: /*#__PURE__*/jsxRuntime.jsx(Select.Select, {
+          inline: true,
+          label: "Type",
+          placeholder: "Data type",
+          options: acceptableTypes,
+          onChange: function onChange(val) {
+            return setType(val);
+          }
+        })
+      }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+        name: "".concat(field, ".label"),
+        children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+          inline: true,
+          label: "Label",
+          allowClear: true,
+          placeholder: "Label...",
+          decorateEndShowWhenEmpty: true,
+          decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+            className: "text-sm text-muted/50 px-1",
+            children: "OPTIONAL"
+          })
+        })
+      }), type === schema.DATA_TYPES.STRING && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".regex"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+            inline: true,
+            label: "Regex validation",
+            allowClear: true,
+            placeholder: "Regex value...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsxs(Field.Field, {
+          inline: true,
+          label: "Option list",
+          children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".optionList"),
+            children: /*#__PURE__*/jsxRuntime.jsx(Select.Select, {
+              allowClear: true,
+              options: [CUSTOM_LIST].concat(_toConsumableArray(optionLists)),
+              onChange: function onChange(v) {
+                return setCustomOptions(v === CUSTOM_LIST);
+              }
+            })
+          }), customOptions && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+            icon: core.CoreIcons.list,
+            "aria-label": "Custom options",
+            onClick: function onClick() {
+              void openOptionModal();
+            }
+          })]
+        }), OptionModal]
+      }), type === schema.DATA_TYPES.FILE && /*#__PURE__*/jsxRuntime.jsx(react.Fragment, {
+        children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".accept"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+            inline: true,
+            label: "Accept types",
+            allowClear: true,
+            placeholder: "Accept value...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        })
+      }), [schema.DATA_TYPES.NUMBER, schema.DATA_TYPES.RANGE].includes(type) && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".min"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+            inline: true,
+            label: "Min value",
+            allowClear: true,
+            placeholder: "Minimum value...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".max"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+            inline: true,
+            label: "Max value",
+            allowClear: true,
+            placeholder: "Maximum value...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".step"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+            inline: true,
+            label: "Step value",
+            allowClear: true,
+            placeholder: "Step value...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        })]
+      }), type === schema.DATA_TYPES.DATE && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Field.Field, {
+          inline: true,
+          label: "Type",
+          plain: true,
+          children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            name: "".concat(field, ".type"),
+            children: /*#__PURE__*/jsxRuntime.jsxs(core.ToggleButtonGroup, {
+              value: "",
+              fullWidth: true,
+              className: "flex-1",
+              children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                className: "flex-1",
+                value: "date",
+                children: "Date"
+              }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+                className: "flex-1",
+                value: "datetime",
+                children: "Date Time"
+              })]
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".min"),
+          children: /*#__PURE__*/jsxRuntime.jsx(DateInput.DateInput, {
+            inline: true,
+            label: "Min value",
+            allowClear: true,
+            placeholder: "Minimum value...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".max"),
+          children: /*#__PURE__*/jsxRuntime.jsx(DateInput.DateInput, {
+            inline: true,
+            label: "Max value",
+            allowClear: true,
+            placeholder: "Maximum value...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsxs(Field.Field, {
+        label: " ",
+        inline: true,
+        plain: true,
+        children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".required"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Checkbox.Checkbox, {
+            label: "Required"
+          })
+        }), type !== schema.DATA_TYPES.AVATAR && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".multiple"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Checkbox.Checkbox, {
+            label: "Multiple",
+            onChange: setMultiple
+          })
+        }), hasOptions && /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".allowCustom"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Checkbox.Checkbox, {
+            label: "Allow custom value"
+          })
+        })]
+      }), multiple && /*#__PURE__*/jsxRuntime.jsxs(react.Fragment, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".minItems"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+            inline: true,
+            label: "Min items",
+            allowClear: true,
+            placeholder: "Minimum items...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+          name: "".concat(field, ".maxItems"),
+          children: /*#__PURE__*/jsxRuntime.jsx(Number.Number, {
+            inline: true,
+            label: "Max items",
+            allowClear: true,
+            placeholder: "Maximum items...",
+            decorateEndShowWhenEmpty: true,
+            decorateEnd: /*#__PURE__*/jsxRuntime.jsx("span", {
+              className: "text-sm text-muted/50 px-1",
+              children: "OPTIONAL"
+            })
+          })
+        })]
+      })]
+    })]
+  }, field);
+};
+var SchemaEditor = function SchemaEditor(_ref2) {
+  var schemaDef = _ref2.schemaDef,
+    allowRemove = _ref2.allowRemove,
+    acceptableTypes = _ref2.acceptableTypes,
+    _ref2$optionLists = _ref2.optionLists,
+    optionLists = _ref2$optionLists === void 0 ? utilities.EMPTY_ARRAY : _ref2$optionLists,
+    onChange = _ref2.onChange;
+  var formRef = react.useRef(null);
+  var schemaRef = react.useRef({});
+  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];
+  react.useEffect(function () {
+    var schemaMap = Object.fromEntries(schemaDef.map(function (schema) {
+      return [schema.id, schema];
+    }));
+    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]];
+    }));
+    setSchema(schema);
+    setSchemaFields(Object.keys(schema));
+  }, [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);
+  }, []);
+  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",
+      children: schemaFields.map(function (field) {
+        return /*#__PURE__*/jsxRuntime.jsx(SchemaField, {
+          field: field,
+          allowRemove: allowRemove,
+          optionLists: optionLists,
+          getModel: function getModel() {
+            var _formRef$current2;
+            return (_formRef$current2 = formRef.current) === null || _formRef$current2 === void 0 ? void 0 : _formRef$current2.getValues()[field];
+          },
+          onTypeChange: function onTypeChange(val) {
+            return handleTypeChange(field, val);
+          },
+          acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
+        }, field);
+      })
+    }), /*#__PURE__*/jsxRuntime.jsxs(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"
+      })]
+    })]
+  });
+};
+
+exports.SchemaEditor = SchemaEditor;

package/dist/cjs/form/Controller.js

@@ -46,7 +46,7 @@ var Controller = function Controller(_ref) {
           (_children$props$onCha = (_children$props = children.props).onChange) === null || _children$props$onCha === void 0 || _children$props$onCha.call(_children$props, v);
         }
       })) : children(_objectSpread(_objectSpread(_objectSpread({}, field), rest), {}, {
-        inputRef: function inputRef(el) {
+        ref: function ref(el) {
           el && _ref3(el);
         },
         readOnly: isSubmitting,

package/dist/cjs/form/Form.js

@@ -11,7 +11,7 @@ var react = require('react');
 var reactHookForm = require('react-hook-form');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["formRef", "schema", "children", "defaultValues", "onSubmit", "onChange"];
+var _excluded = ["formRef", "schema", "children", "values", "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,6 +21,7 @@ var Form = function Form(_ref) {
   var formRef = _ref.formRef,
     schema = _ref.schema,
     children = _ref.children,
+    values = _ref.values,
     defaultValues = _ref.defaultValues,
     _ref$onSubmit = _ref.onSubmit,
     onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
@@ -28,13 +29,11 @@ var Form = function Form(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var ref = react.useRef(null);
   var form = reactHookForm.useForm({
+    values: values,
     shouldFocusError: true,
     resolver: schema && yup.yupResolver(schema),
     defaultValues: defaultValues
   });
-  react.useEffect(function () {
-    form.reset();
-  }, []);
   var _useTransition = react.useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
     startTransition = _useTransition2[1];