@react-fabric/form 1.0.0-beta.5 → 1.0.0-beta.51

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

@@ -0,0 +1,62 @@
+'use strict';
+
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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 Input = require('../../input/Input.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 fieldSchema = utilities.yup.object({
+  fields: utilities.yup.array(utilities.yup.string().trim().required()).required().min(1)
+});
+var AddSchemaFields = function AddSchemaFields(props) {
+  var handleSubmit = react.useCallback(function (model) {
+    props.onClose(model.fields.map(function (f) {
+      return f.split(",").map(function (ff) {
+        return ff.trim();
+      });
+    }).flat(2));
+  }, []);
+  return /*#__PURE__*/jsxRuntime.jsx(core.Modal, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/jsxRuntime.jsxs(Form.Form, {
+      schema: fieldSchema,
+      defaultValues: {
+        fields: [" "]
+      },
+      onSubmit: handleSubmit,
+      children: [/*#__PURE__*/jsxRuntime.jsxs(core.Content, {
+        children: [/*#__PURE__*/jsxRuntime.jsx(ArrayInput.ArrayInput, {
+          minItems: 1,
+          name: "fields",
+          onAdd: function onAdd() {
+            return String("");
+          },
+          children: /*#__PURE__*/jsxRuntime.jsx(Controller.Controller, {
+            children: /*#__PURE__*/jsxRuntime.jsx(Input.Input, {
+              autoFocus: true
+            })
+          })
+        }), /*#__PURE__*/jsxRuntime.jsx("p", {
+          className: "text-sm text-muted",
+          children: "Provide list of fields or comma-separated value"
+        })]
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Footer, {
+        flex: true,
+        justify: "end",
+        className: "px-2 py-1",
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          type: "submit",
+          children: "Add"
+        })
+      })]
+    })
+  }));
+};
+
+exports.AddSchemaFields = AddSchemaFields;

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

@@ -0,0 +1,143 @@
+'use strict';
+
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var core$1 = require('@dnd-kit/core');
+var modifiers = require('@dnd-kit/modifiers');
+var sortable = require('@dnd-kit/sortable');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
+var react = require('react');
+var reactHookForm = require('react-hook-form');
+var schema = require('../../types/schema.js');
+var AddSchemaFields = require('./AddSchemaFields.js');
+var SchemaField = require('./SchemaField.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+var SchemaArrayForm = function SchemaArrayForm(_ref) {
+  var dynamic = _ref.dynamic,
+    acceptableTypes = _ref.acceptableTypes,
+    optionLists = _ref.optionLists;
+  var form = reactHookForm.useFormContext();
+  var _useState = react.useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    defaultOpen = _useState2[0],
+    setDefaultOpen = _useState2[1];
+  var _useFieldArray = reactHookForm.useFieldArray({
+      name: "schema",
+      control: form.control
+    }),
+    fields = _useFieldArray.fields,
+    append = _useFieldArray.append,
+    remove = _useFieldArray.remove,
+    move = _useFieldArray.move;
+  var handleTypeChange = react.useCallback(function (index, val) {
+    form.setValue("schema.".concat(index), val);
+  }, []);
+  var handleRemove = react.useCallback(function (index) {
+    remove(index);
+  }, []);
+  var _useOverlayService = core.useOverlayService(AddSchemaFields.AddSchemaFields),
+    _useOverlayService2 = _slicedToArray(_useOverlayService, 2),
+    AddModal = _useOverlayService2[0],
+    openAddfields = _useOverlayService2[1];
+  var handleAdd = react.useCallback(function () {
+    void openAddfields().then(function (fields) {
+      if (utilities.isArray(fields)) {
+        var existing = form.getValues().schema.map(function (field) {
+          return field.id;
+        });
+        fields.forEach(function (field) {
+          if (!existing.includes(field)) {
+            append({
+              id: field,
+              datatype: schema.DATA_TYPES.STRING,
+              label: ""
+            });
+          }
+        });
+      }
+    });
+  }, []);
+  var Wrapper = react.useCallback(function (_ref2) {
+    var children = _ref2.children;
+    if (dynamic) {
+      // pass id list to dnd context
+      var idMap = fields.map(function (item) {
+        return item.id;
+      });
+      var handleDragEnd = function handleDragEnd(e) {
+        if (e.over && e.active.id !== e.over.id) {
+          // find index of item and drop over
+          var active = idMap.indexOf("".concat(e.active.id));
+          var end = idMap.indexOf("".concat(e.over.id));
+          move(active, end);
+        }
+      };
+      return /*#__PURE__*/jsxRuntime.jsx(core$1.DndContext, {
+        onDragEnd: handleDragEnd,
+        modifiers: [modifiers.restrictToVerticalAxis],
+        children: /*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, {
+          items: idMap,
+          children: children
+        })
+      });
+    }
+    return children;
+  }, [dynamic, fields]);
+  // @ts-expect-error ignore
+  Wrapper.displayName = "SortableWrapper";
+  return /*#__PURE__*/jsxRuntime.jsxs(Wrapper, {
+    children: [/*#__PURE__*/jsxRuntime.jsxs(core.Header, {
+      flex: true,
+      justify: "end",
+      className: "gap-1 px-2",
+      children: [dynamic && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        icon: core.CoreIcons.insert,
+        "aria-label": "add field",
+        onClick: handleAdd
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        icon: core.CoreIcons.colapseAllVar,
+        "aria-label": "collapse all",
+        onClick: function onClick() {
+          return setDefaultOpen(false);
+        }
+      }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+        size: "sm",
+        variant: "link",
+        icon: core.CoreIcons.expandAllVar,
+        "aria-label": "expand all",
+        onClick: function onClick() {
+          return setDefaultOpen(true);
+        }
+      })]
+    }), /*#__PURE__*/jsxRuntime.jsx(core.Content, {
+      className: "divide-y",
+      children: fields.map(function (field, index) {
+        return /*#__PURE__*/jsxRuntime.jsx(SchemaField.SchemaField, {
+          defaultOpen: defaultOpen,
+          id: form.getValues().schema[index].id,
+          fieldId: field.id,
+          field: "schema.".concat(index),
+          dynamic: dynamic,
+          optionLists: optionLists,
+          onRemove: function onRemove() {
+            return handleRemove(index);
+          },
+          getModel: function getModel() {
+            return form.getValues().schema[index];
+          },
+          onTypeChange: function onTypeChange(val) {
+            return handleTypeChange(index, val);
+          },
+          acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(schema.DATA_TYPES)
+        }, index);
+      })
+    }), AddModal]
+  });
+};
+
+exports.SchemaArrayForm = SchemaArrayForm;

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

@@ -0,0 +1,414 @@
+'use strict';
+
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var core = require('@react-fabric/core');
+var utilities$1 = require('@react-fabric/utilities');
+var classNames = require('classnames');
+var react = require('react');
+var Controller = require('../../form/Controller.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 Hidden = require('../../input/Hidden.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 SchemaField = function SchemaField(_ref) {
+  var id = _ref.id,
+    field = _ref.field,
+    fieldId = _ref.fieldId,
+    getModel = _ref.getModel,
+    onRemove = _ref.onRemove,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? true : _ref$defaultOpen,
+    _ref$optionLists = _ref.optionLists,
+    optionLists = _ref$optionLists === void 0 ? utilities$1.EMPTY_ARRAY : _ref$optionLists,
+    dynamic = _ref.dynamic,
+    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 SortableItem = react.useCallback(function (_ref2) {
+    var id = _ref2.id,
+      children = _ref2.children,
+      className = _ref2.className;
+    if (dynamic) {
+      var _useSortable = sortable.useSortable({
+          id: id
+        }),
+        attributes = _useSortable.attributes,
+        listeners = _useSortable.listeners,
+        setNodeRef = _useSortable.setNodeRef,
+        transform = _useSortable.transform,
+        transition = _useSortable.transition,
+        isDragging = _useSortable.isDragging;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: className,
+        ref: setNodeRef,
+        style: {
+          transform: utilities.CSS.Transform.toString(transform),
+          transition: transition
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread(_objectSpread({
+          className: classNames("invisible group-hover/field:visible my-2 w-4", isDragging ? "cursor-grabbing" : "cursor-grab")
+        }, attributes), listeners), {}, {
+          style: {
+            backgroundImage: "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='4' width='4'%3E%3Ccircle cx='2' cy='2' r='1' fill='%238888' /%3E%3C/svg%3E \")"
+          }
+        })), children]
+      });
+    }
+    return /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: className,
+      children: children
+    });
+  }, [dynamic]);
+  // @ts-expect-error ignore
+  SortableItem.displayName = "SortableItem";
+  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 === schema.SCHEMA_CUSTOM_LIST);
+    }, 10);
+  }, []);
+  var handleTypeChange = react.useCallback(function (type) {
+    if (type) {
+      var modelRef = getModel();
+      var reset = {
+        datatype: type,
+        id: id,
+        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, {
+          min: modelRef.min,
+          max: modelRef.max
+        });
+      } 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);
+      setType(type);
+    }
+  }, [id]);
+  return /*#__PURE__*/jsxRuntime.jsx(SortableItem, {
+    id: fieldId,
+    className: "flex flex-nowrap gap-1 group/field",
+    children: /*#__PURE__*/jsxRuntime.jsxs(core.Collapsable, {
+      open: defaultOpen,
+      className: "flex-1",
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex flex-nowrap items-center",
+        children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+          className: "flex-1 truncate",
+          children: id
+        }), dynamic && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          size: "sm",
+          color: "danger",
+          variant: "link",
+          "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: id
+          })
+        }), /*#__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 handleTypeChange(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-tint-300 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-tint-300 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: [schema.SCHEMA_CUSTOM_LIST].concat(_toConsumableArray(optionLists)),
+                onChange: function onChange(v) {
+                  return setCustomOptions(v === schema.SCHEMA_CUSTOM_LIST);
+                }
+              })
+            }), customOptions && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+              icon: core.CoreIcons.list,
+              "aria-label": "Custom options",
+              onClick: function onClick() {
+                void openOptionModal({
+                  title: "".concat(id, " Options")
+                });
+              }
+            })]
+          }), 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-tint-300 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-tint-300 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-tint-300 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-tint-300 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-tint-300 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-tint-300 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-tint-300 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-tint-300 px-1",
+                children: "OPTIONAL"
+              })
+            })
+          })]
+        })]
+      })]
+    }, fieldId)
+  });
+};
+
+exports.SchemaField = SchemaField;

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

@@ -7,6 +7,7 @@ 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');
@@ -21,9 +22,10 @@ var Form = function Form(_ref) {
   var formRef = _ref.formRef,
     schema = _ref.schema,
     children = _ref.children,
-    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,
+    _onSubmit = _ref$onSubmit === void 0 ? DEFAULT_SUBMIT : _ref$onSubmit,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var ref = react.useRef(null);
@@ -35,7 +37,7 @@ var Form = function Form(_ref) {
   var _useTransition = react.useTransition(),
     _useTransition2 = _slicedToArray(_useTransition, 2),
     startTransition = _useTransition2[1];
-  var changeHandler = core.useDebounce(onChange, [onChange]);
+  var changeHandler = core.useDebounce(onChange, [onChange], 300);
   react.useEffect(function () {
     var subscription = form.watch(function (value) {
       startTransition(function () {
@@ -63,7 +65,7 @@ var Form = function Form(_ref) {
         return handleReset();
       },
       submit: function submit() {
-        return form.handleSubmit(onSubmit);
+        return form.handleSubmit(_onSubmit);
       },
       validate: function () {
         var _validate = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
@@ -102,7 +104,7 @@ var Form = function Form(_ref) {
         }, 50);
       }
     };
-  }, [onSubmit, form, form.formState, defaultValues]);
+  }, [_onSubmit, form, form.formState, defaultValues]);
   var onInvalid = react.useCallback(function (_, e) {
     var el = e.target;
     setTimeout(function () {
@@ -116,7 +118,10 @@ var Form = function Form(_ref) {
       onReset: function onReset() {
         return handleReset(defaultValues);
       },
-      onSubmit: form.handleSubmit(onSubmit, onInvalid),
+      onSubmit: function onSubmit(e) {
+        e.stopPropagation();
+        void form.handleSubmit(_onSubmit, onInvalid)(e);
+      },
       "data-loading": form.formState.isSubmitting,
       className: "contents",
       autoComplete: "off"