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

package/dist/cjs/select/useSelect.js

@@ -15,6 +15,10 @@ var useSelect = function useSelect(_ref) {
     options = _ref$options === void 0 ? utilities.EMPTY_ARRAY : _ref$options,
     value = _ref.value,
     autoComplete = _ref.autoComplete,
+    _ref$alwaysOpen = _ref.alwaysOpen,
+    alwaysOpen = _ref$alwaysOpen === void 0 ? false : _ref$alwaysOpen,
+    _ref$defaultOpen = _ref.defaultOpen,
+    defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     _ref$multiple = _ref.multiple,
     multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$allowCreate = _ref.allowCreate,
@@ -25,6 +29,7 @@ var useSelect = function useSelect(_ref) {
     valueProperty = _ref$valueProperty === void 0 ? "id" : _ref$valueProperty,
     _ref$labelProperty = _ref.labelProperty,
     labelProperty = _ref$labelProperty === void 0 ? "label" : _ref$labelProperty,
+    sortProperty = _ref.sortProperty,
     _ref$createOption = _ref.createOption,
     createOption = _ref$createOption === void 0 ? helpers.makeOption : _ref$createOption,
     matcher = _ref.matcher,
@@ -63,13 +68,16 @@ var useSelect = function useSelect(_ref) {
       if (action.type === "close") {
         return _objectSpread(_objectSpread({}, state), {}, {
           activeIndex: null,
+          activeItem: null,
           open: false
         });
       }
       if (action.type === "active" && state.open) {
+        var _action$index;
         if (autoComplete && action.index !== null) state.query = state.items[action.index];
         return _objectSpread(_objectSpread({}, state), {}, {
-          activeIndex: action.index
+          activeIndex: action.index,
+          activeItem: state.items[(_action$index = action.index) !== null && _action$index !== void 0 ? _action$index : -1]
         });
       }
       if (action.type === "setValue") {
@@ -83,6 +91,7 @@ var useSelect = function useSelect(_ref) {
         var newState = _objectSpread(_objectSpread({}, state), {}, {
           value: state.emptyValue,
           activeIndex: null,
+          activeItem: null,
           selectedIndex: autoComplete ? state.multiple ? (_action$value = action.value) === null || _action$value === void 0 ? void 0 : _action$value.length : 0 : state.items.indexOf(action.value)
         });
         if (action.value !== undefined) {
@@ -100,16 +109,16 @@ var useSelect = function useSelect(_ref) {
             newState.value = action.value;
           }
         }
-        if (!state.multiple) newState.open = false;
+        if (!state.multiple) newState.open = alwaysOpen;
         fireChange(newState.value);
         return newState;
       }
       if (action.type === "removeItem") {
         var newValue = state.value;
         if (state.multiple) {
-          var _action$index;
+          var _action$index2;
           newValue = _toConsumableArray(newValue);
-          newValue.splice((_action$index = action.index) !== null && _action$index !== void 0 ? _action$index : -1, 1);
+          newValue.splice((_action$index2 = action.index) !== null && _action$index2 !== void 0 ? _action$index2 : -1, 1);
         } else {
           newValue = "";
         }
@@ -133,13 +142,14 @@ var useSelect = function useSelect(_ref) {
         if (autoComplete && action.query !== undefined) {
           optionList = utilities.dedupe([action.query].concat(_toConsumableArray(optionList)));
         }
+        if (sortProperty) optionList = optionList.sort(utilities.compareValues("asc", sortProperty));
         var grouped = utilities.groupBy(optionList, groupProperty, "");
         if (action.open) _newState.open = true;
         _newState.items = [];
         // add new item if allowCreate
         if (allowCreate && action.query) _newState.items.push({
           ___create___: true,
-          value: createOption(action.query)
+          value: action.query
         });
         Object.entries(grouped).forEach(function (_ref2) {
           var _newState$items;
@@ -169,9 +179,10 @@ var useSelect = function useSelect(_ref) {
     }, {
       multiple: multiple,
       emptyValue: emptyValue,
-      open: false,
+      open: alwaysOpen || defaultOpen,
       loading: false,
       activeIndex: null,
+      activeItem: null,
       selectedIndex: null,
       value: emptyValue,
       // filter
@@ -201,7 +212,7 @@ var useSelect = function useSelect(_ref) {
       });
       dispatch({
         type: "setValue",
-        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : ""
+        value: (_ref4 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref4 !== void 0 ? _ref4 : deferred
       });
     }
     if (multiple) {
@@ -211,12 +222,12 @@ var useSelect = function useSelect(_ref) {
         var newOption = (allowCreate || autoComplete) && item ? createOption(item) : undefined;
         var hasValue = options.find(function (opt) {
           var _opt$valueProperty2;
-          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === deferred;
+          return ((_opt$valueProperty2 = opt[valueProperty]) !== null && _opt$valueProperty2 !== void 0 ? _opt$valueProperty2 : opt) === item;
         });
         if (!hasValue && newOption) {
           optionsRef.current.push(newOption);
         }
-        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : "";
+        return (_ref5 = hasValue !== null && hasValue !== void 0 ? hasValue : newOption) !== null && _ref5 !== void 0 ? _ref5 : item;
       });
       optionsRef.current = [].concat(_toConsumableArray(optionsRef.current), _toConsumableArray(options !== null && options !== void 0 ? options : []));
       dispatch({
@@ -246,7 +257,7 @@ var useSelect = function useSelect(_ref) {
         setActive: true
       });
     });
-  }, [onQuery]);
+  }, [onQuery], 300);
 
   // handlers
   var handleQuery = react.useCallback(function (query) {
@@ -316,7 +327,7 @@ var useSelect = function useSelect(_ref) {
     });
   }, []);
   var setActiveIndex = react.useCallback(function (index) {
-    dispatch({
+    index && index > -1 && dispatch({
       type: "active",
       index: index
     });

package/dist/cjs/types/schema.js

@@ -0,0 +1,43 @@
+'use strict';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var DATA_TYPES = /*#__PURE__*/function (DATA_TYPES) {
+  DATA_TYPES["TEXT"] = "text";
+  DATA_TYPES["COLOR"] = "color";
+  DATA_TYPES["BOOL"] = "bool";
+  DATA_TYPES["DATE"] = "date";
+  DATA_TYPES["DATETIME"] = "datetime";
+  DATA_TYPES["STRING"] = "string";
+  DATA_TYPES["NUMBER"] = "number";
+  DATA_TYPES["RANGE"] = "range";
+  DATA_TYPES["FILE"] = "file";
+  DATA_TYPES["AVATAR"] = "avatar";
+  DATA_TYPES["SCHEMA"] = "schema";
+  return DATA_TYPES;
+}({});
+var SCHEMA_CUSTOM_LIST = "--CUSTOM--";
+
+exports.DATA_TYPES = DATA_TYPES;
+exports.SCHEMA_CUSTOM_LIST = SCHEMA_CUSTOM_LIST;

package/dist/cjs/utils/eventHandlers.js

@@ -1,6 +1,7 @@
 'use strict';
 
-var utilities = require('@react-fabric/utilities');
+var react = require('@floating-ui/react');
+var core = require('@react-fabric/core');
 
 /*
  * React Fabric
@@ -26,16 +27,25 @@ var utilities = require('@react-fabric/utilities');
  */
 
 /** ***************** common handler for enter press *******************/
-var handleEnter = function handleEnter(callback) {
+var useHandleEnter = function useHandleEnter(callback) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref$stopPropagation = _ref.stopPropagation,
     stopPropagation = _ref$stopPropagation === void 0 ? false : _ref$stopPropagation,
     _ref$preventDefault = _ref.preventDefault,
     preventDefault = _ref$preventDefault === void 0 ? false : _ref$preventDefault;
-  var cbHandle = utilities.debounce(callback !== null && callback !== void 0 ? callback : function () {
+  var cbHandle = core.useDebounce(callback !== null && callback !== void 0 ? callback : function () {
     return undefined;
-  }, 100);
+  }, [callback], 100);
+  var tree = react.useFloatingTree();
   return function (e) {
+    // prevent propagation of event if input within dropdown (work around for floating-ui typeahead)
+    if (tree && e.key !== "Escape") {
+      e === null || e === void 0 || e.stopPropagation();
+    }
+    // blur input on escape key press
+    if (e.key === "Escape") {
+      e.currentTarget.blur();
+    }
     if (!e.shiftKey && !e.altKey && !e.metaKey && e.key === "Enter" && callback) {
       if (stopPropagation) e === null || e === void 0 || e.stopPropagation();
       cbHandle(e);
@@ -47,4 +57,4 @@ var handleEnter = function handleEnter(callback) {
   };
 };
 
-exports.handleEnter = handleEnter;
+exports.useHandleEnter = useHandleEnter;

package/dist/esm/builder/FileField.js

@@ -4,26 +4,32 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import { Button, Icon, ProgressBar } from '@react-fabric/core';
-import { FileUtil, Format } from '@react-fabric/utilities';
+import { Tooltip, Button, Icon, CoreIcons, ProgressBar } from '@react-fabric/core';
+import { isString, FileUtil, Format } from '@react-fabric/utilities';
 import { Fragment } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useFileUploader } from '../hooks/useFileUploader.js';
 import { Field } from '../input/Field.js';
 import { HiddenInput } from '../input/Hidden.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["uploadHandler", "inline", "label", "accept", "multiple", "value"];
+var _excluded = ["uploadHandler", "inline", "label", "accept", "value", "fileUrl", "multiple", "invalid", "error"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var FileField = function FileField(_ref) {
+  var _error$values$label, _error$values, _error$values2;
   var uploadHandler = _ref.uploadHandler,
     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;
+    _ref.invalid;
+    var error = _ref.error,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
   var _useFileUploader = useFileUploader( /*#__PURE__*/function () {
       var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(data, config) {
         return _regeneratorRuntime.wrap(function _callee$(_context) {
@@ -49,32 +55,38 @@ var FileField = function FileField(_ref) {
     upload = _useFileUploader.upload,
     remove = _useFileUploader.remove;
   return /*#__PURE__*/jsxs(Fragment, {
-    children: [/*#__PURE__*/jsxs(Field, {
+    children: [/*#__PURE__*/jsx(Field, {
       plain: true,
       inline: inline,
       label: label,
-      className: "inline-block",
-      children: [/*#__PURE__*/jsx(HiddenInput, _objectSpread({
+      children: /*#__PURE__*/jsx(HiddenInput, _objectSpread({
         hiddenValue: multiple ? list : list === null || list === void 0 ? void 0 : list[0]
-      }, rest)), /*#__PURE__*/jsx("span", {
-        children: /*#__PURE__*/jsx(Button, {
-          badge: pending > 0 ? "".concat(pending) : undefined,
-          "data-ref": "filebtn",
-          children: /*#__PURE__*/jsxs(Fragment, {
-            children: [/*#__PURE__*/jsx("span", {
-              children: "Add file"
-            }), /*#__PURE__*/jsx("input", {
-              type: "file",
-              accept: accept,
-              multiple: multiple,
-              className: "absolute inset-0 opacity-0 z-5",
-              onChange: function onChange(e) {
-                return [upload(e.target.files), e.target.value = ""];
-              }
-            })]
-          })
+      }, rest))
+    }), /*#__PURE__*/jsx(Tooltip, {
+      color: "danger-200",
+      content: isString(error) ? "".concat(error) : error && t(error === null || error === void 0 ? void 0 : error.key, error.values ? _objectSpread(_objectSpread({}, error === null || error === void 0 ? void 0 : error.values), {}, {
+        label: t((_error$values$label = (_error$values = error.values) === null || _error$values === void 0 ? void 0 : _error$values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", (_error$values2 = error.values) === null || _error$values2 === void 0 ? void 0 : _error$values2.path)
+      }) : {}),
+      disabled: !error,
+      children: /*#__PURE__*/jsx(Button, {
+        badge: pending > 0 ? "".concat(pending) : undefined,
+        color: error ? "danger" : undefined,
+        variant: error ? "soft" : undefined,
+        "data-ref": "filebtn",
+        children: /*#__PURE__*/jsxs(Fragment, {
+          children: [/*#__PURE__*/jsx("span", {
+            children: "Add file"
+          }), /*#__PURE__*/jsx("input", {
+            type: "file",
+            accept: accept,
+            multiple: multiple,
+            className: "absolute inset-0 opacity-0 z-5",
+            onChange: function onChange(e) {
+              return [upload(e.target.files), e.target.value = ""];
+            }
+          })]
         })
-      })]
+      })
     }), /*#__PURE__*/jsx("br", {}), /*#__PURE__*/jsx("div", {
       className: "bg-alternate",
       children: files.map(function (file, idx) {
@@ -98,18 +110,18 @@ var FileField = function FileField(_ref) {
                 children: file.error
               })
             }), file.progress && /*#__PURE__*/jsx(Icon, {
-              icon: "mdi mdi-stop-circle",
+              icon: CoreIcons.stop,
               bg: "danger",
               color: "white",
               size: "sm",
-              className: "p-[2px]",
+              className: "p-0.5",
               "aria-label": "abort",
               onClick: function onClick() {
                 var _file$abort;
                 return (_file$abort = file.abort) === null || _file$abort === void 0 ? void 0 : _file$abort.call(file);
               }
             }), !file.progress && /*#__PURE__*/jsx(Icon, {
-              icon: "mdi mdi-trash-can",
+              icon: CoreIcons.trash,
               color: "danger",
               size: "sm",
               "aria-label": "remove",

package/dist/esm/builder/FormField.js

@@ -2,22 +2,25 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { isEmpty } from '@react-fabric/utilities';
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Controller } from '../form/Controller.js';
 import { ArrayInput } from '../input/ArrayInput.js';
 import { AvatarInput } from '../input/AvatarInput.js';
 import { ColorInput } from '../input/ColorInput.js';
+import { DateInput } from '../input/DateInput.js';
 import { Input } from '../input/Input.js';
 import { Number } from '../input/Number.js';
-import { Range } from '../input/Range.js';
+import { RangeSlider } from '../input/RangeSlider.js';
 import { Switch } from '../input/Switch.js';
 import { Textarea } from '../input/Textarea.js';
 import { Select } from '../select/Select.js';
+import { DATA_TYPES } from '../types/schema.js';
 import { FileField } from './FileField.js';
 import { jsx } from '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 = useTranslation(),
@@ -36,48 +39,61 @@ var FormField = function FormField(_ref) {
   var fieldName = useMemo(function () {
     return [prefix, id].filter(Boolean).join(".");
   }, [id, prefix]);
+  var hasOptions = useMemo(function () {
+    var _rest$optionList;
+    return rest.datatype === DATA_TYPES.STRING && (rest.optionList === "--CUSTOM--" && !isEmpty(rest.options) || !isEmpty(optionLists === null || optionLists === void 0 ? void 0 : optionLists[(_rest$optionList = rest.optionList) !== null && _rest$optionList !== void 0 ? _rest$optionList : ""]));
+  }, [rest]);
   var E = useMemo(function () {
-    if (rest.datatype === "number" || rest.datatype === "decimal") return Number;
-    if (rest.datatype === "range") return Range;
-    if (rest.datatype === "boolean") return Switch;
-    if (rest.datatype === "text") return Textarea;
-    if (rest.datatype === "color") return ColorInput;
-    if (rest.datatype === "string" && rest.options) return Select;
+    if (rest.datatype === DATA_TYPES.NUMBER) return Number;
+    if (rest.datatype === DATA_TYPES.RANGE) return RangeSlider;
+    if (rest.datatype === DATA_TYPES.BOOL) return Switch;
+    if (rest.datatype === DATA_TYPES.TEXT) return Textarea;
+    if (rest.datatype === DATA_TYPES.DATE) return DateInput;
+    if (rest.datatype === DATA_TYPES.DATETIME) return DateInput;
+    if (rest.datatype === DATA_TYPES.COLOR) return ColorInput;
+    if (hasOptions) return Select;
     return Input;
-  }, [rest.datatype]);
+  }, [rest.datatype, hasOptions]);
   var props = 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 === 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 === 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 === DATA_TYPES.DATE) return {
+      min: rest.min,
+      max: rest.max,
+      type: "date"
+    };
+    if (rest.datatype === DATA_TYPES.DATETIME) return {
+      min: rest.min,
+      max: rest.max,
+      type: "datetime"
+    };
+    if (rest.datatype === DATA_TYPES.TEXT) return {
       rows: 3
     };
-    if (rest.datatype === "color") return {
+    if (rest.datatype === DATA_TYPES.COLOR) return {
       showPicker: true
     };
-    if (rest.datatype === "string" && rest.options) return {
-      options: rest.options,
+    if (rest.datatype === 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__*/jsx(Controller, {
+  }, [rest, hasOptions, optionLists]);
+  if (rest.datatype === DATA_TYPES.AVATAR) return uploadHandler && /*#__PURE__*/jsx(Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsx(AvatarInput, {
       uploadHandler: uploadHandler,
@@ -85,7 +101,7 @@ var FormField = function FormField(_ref) {
       name: fieldName
     })
   });
-  if (rest.datatype === "file") return uploadHandler && /*#__PURE__*/jsx(Controller, {
+  if (rest.datatype === DATA_TYPES.FILE) return uploadHandler && /*#__PURE__*/jsx(Controller, {
     name: fieldName,
     children: /*#__PURE__*/jsx(FileField, _objectSpread({
       uploadHandler: uploadHandler,
@@ -94,12 +110,12 @@ var FormField = function FormField(_ref) {
       id: id
     }, rest))
   });
-  return rest.multiple && !("options" in rest) ? /*#__PURE__*/jsx(ArrayInput, {
+  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 "";
+      return String("");
     },
     children: /*#__PURE__*/jsx(Controller, {
       children: /*#__PURE__*/jsx(E, _objectSpread({}, props))
@@ -108,8 +124,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

@@ -0,0 +1,72 @@
+'use client';
+
+import { Footer } from '@react-fabric/core';
+import { EMPTY_ARRAY } from '@react-fabric/utilities';
+import { useRef, useCallback, useEffect } from 'react';
+import { Form } from '../form/Form.js';
+import { DATA_TYPES } from '../types/schema.js';
+import { SchemaArrayForm } from './components/SchemaArrayForm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var SchemaEditor = function SchemaEditor(_ref) {
+  var schemaDef = _ref.schemaDef,
+    dynamic = _ref.dynamic,
+    acceptableTypes = _ref.acceptableTypes,
+    _ref$optionLists = _ref.optionLists,
+    optionLists = _ref$optionLists === void 0 ? EMPTY_ARRAY : _ref$optionLists,
+    children = _ref.children,
+    onSubmit = _ref.onSubmit,
+    onChange = _ref.onChange;
+  var formRef = useRef(null);
+  var handleChange = useCallback(function (model) {
+    onChange === null || onChange === void 0 || onChange(model.schema);
+  }, []);
+  var handleSubmit = useCallback(function (model) {
+    onSubmit === null || onSubmit === void 0 || onSubmit(model.schema);
+  }, []);
+  useEffect(function () {
+    var _formRef$current;
+    (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValues({
+      schema: schemaDef
+    });
+  }, [schemaDef]);
+  return /*#__PURE__*/jsxs(Form, {
+    formRef: formRef,
+    onChange: handleChange,
+    onSubmit: handleSubmit,
+    children: [/*#__PURE__*/jsx(SchemaArrayForm, {
+      dynamic: dynamic,
+      optionLists: optionLists,
+      acceptableTypes: acceptableTypes !== null && acceptableTypes !== void 0 ? acceptableTypes : Object.values(DATA_TYPES)
+    }), children && /*#__PURE__*/jsx(Footer, {
+      flex: true,
+      className: "border-t bg-base px-6 py-2",
+      children: children
+    })]
+  });
+};
+
+export { SchemaEditor };

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

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