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

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/cjs/types/schema.js

@@ -36,5 +36,7 @@ var DATA_TYPES = /*#__PURE__*/function (DATA_TYPES) {
   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/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

@@ -1,426 +1,65 @@
 'use client';
 
-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 { Footer } 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';
+import { useRef, useCallback, useEffect } from 'react';
 import { Form } from '../form/Form.js';
-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 { Input } from '../input/Input.js';
-import { Number } from '../input/Number.js';
-import { Select } from '../select/Select.js';
 import { DATA_TYPES } from '../types/schema.js';
+import { SchemaArrayForm } from './components/SchemaArrayForm.js';
 import { jsxs, jsx } 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 CUSTOM_LIST = "--CUSTOM--";
-var SchemaField = function SchemaField(_ref) {
-  var field = _ref.field,
-    getModel = _ref.getModel,
+/*
+ * 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,
-    allowRemove = _ref.allowRemove,
-    onTypeChange = _ref.onTypeChange,
-    acceptableTypes = _ref.acceptableTypes;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    type = _useState2[0],
-    setType = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    multiple = _useState4[0],
-    setMultiple = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasOptions = _useState6[0],
-    setHasOptions = _useState6[1];
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    customOptions = _useState8[0],
-    setCustomOptions = _useState8[1];
-  var _useOverlayService = useOverlayService(function (props) {
-      return /*#__PURE__*/jsxs(Modal, _objectSpread(_objectSpread({}, props), {}, {
-        children: [/*#__PURE__*/jsx(Content, {
-          children: /*#__PURE__*/jsx(ArrayInput, {
-            name: "".concat(field, ".options"),
-            onAdd: function onAdd() {
-              return String("");
-            },
-            children: /*#__PURE__*/jsx(Controller, {
-              children: /*#__PURE__*/jsx(Input, {})
-            })
-          })
-        }), /*#__PURE__*/jsx(Footer, {
-          flex: true,
-          justify: "end",
-          className: "sticky bottom-0 border-t bg-base px-6 py-2",
-          children: /*#__PURE__*/jsx(Button, {
-            variant: "link",
-            onClick: props.onClose,
-            children: "Close"
-          })
-        })]
-      }));
-    }),
-    _useOverlayService2 = _slicedToArray(_useOverlayService, 2),
-    OptionModal = _useOverlayService2[0],
-    openOptionModal = _useOverlayService2[1];
-  useEffect(function () {
-    setTimeout(function () {
-      var model = getModel();
-      setType(model.datatype);
-      setMultiple(model.multiple);
-      setHasOptions(!!model.optionList);
-      setCustomOptions(model.optionList === CUSTOM_LIST);
-    }, 10);
-  }, []);
-  useEffect(function () {
-    if (type) {
-      var modelRef = getModel();
-      var reset = {
-        datatype: type,
-        id: field,
-        label: modelRef.label,
-        defaultValue: modelRef.defaultValue,
-        required: modelRef.required,
-        multiple: type === DATA_TYPES.AVATAR ? false : modelRef.multiple,
-        minItems: modelRef.minItems,
-        maxItems: modelRef.maxItems
-      };
-      if (type === DATA_TYPES.STRING) {
-        reset = Object.assign(reset, {
-          optionList: modelRef.optionList,
-          options: modelRef.options,
-          regex: modelRef.regex
-        });
-      } else if (type === DATA_TYPES.DATE) {
-        reset = Object.assign(reset, {
-          type: "date"
-        });
-      } else if (type === DATA_TYPES.NUMBER || type === DATA_TYPES.RANGE) {
-        reset = Object.assign(reset, {
-          min: modelRef.min,
-          max: modelRef.max,
-          step: modelRef.step
-        });
-      }
-      if (type === DATA_TYPES.AVATAR) {
-        setMultiple(false);
-      }
-      onTypeChange(reset);
-    }
-  }, [type]);
-  return /*#__PURE__*/jsxs(Collapsable, {
-    open: true,
-    children: [/*#__PURE__*/jsxs("div", {
-      className: "flex flex-nowrap group/field",
-      children: [/*#__PURE__*/jsx("span", {
-        className: "flex-1 truncate",
-        children: field
-      }), allowRemove && /*#__PURE__*/jsx(Button, {
-        size: "sm",
-        color: "danger",
-        variant: "link",
-        "aria-label": "Delete",
-        stopPropagation: true,
-        icon: CoreIcons.trash,
-        className: "invisible group-hover/field:visible"
-      })]
-    }), /*#__PURE__*/jsxs("div", {
-      className: "flex flex-col gap-1 pb-4",
-      children: [/*#__PURE__*/jsx(Controller, {
-        name: "".concat(field, ".datatype"),
-        children: /*#__PURE__*/jsx(Select, {
-          inline: true,
-          label: "Type",
-          placeholder: "Data type",
-          options: acceptableTypes,
-          onChange: function onChange(val) {
-            return setType(val);
-          }
-        })
-      }), /*#__PURE__*/jsx(Controller, {
-        name: "".concat(field, ".label"),
-        children: /*#__PURE__*/jsx(Input, {
-          inline: true,
-          label: "Label",
-          allowClear: true,
-          placeholder: "Label...",
-          decorateEndShowWhenEmpty: true,
-          decorateEnd: /*#__PURE__*/jsx("span", {
-            className: "text-sm text-muted/50 px-1",
-            children: "OPTIONAL"
-          })
-        })
-      }), type === DATA_TYPES.STRING && /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".regex"),
-          children: /*#__PURE__*/jsx(Input, {
-            inline: true,
-            label: "Regex validation",
-            allowClear: true,
-            placeholder: "Regex value...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/jsx("span", {
-              className: "text-sm text-muted/50 px-1",
-              children: "OPTIONAL"
-            })
-          })
-        }), /*#__PURE__*/jsxs(Field, {
-          inline: true,
-          label: "Option list",
-          children: [/*#__PURE__*/jsx(Controller, {
-            name: "".concat(field, ".optionList"),
-            children: /*#__PURE__*/jsx(Select, {
-              allowClear: true,
-              options: [CUSTOM_LIST].concat(_toConsumableArray(optionLists)),
-              onChange: function onChange(v) {
-                return setCustomOptions(v === CUSTOM_LIST);
-              }
-            })
-          }), customOptions && /*#__PURE__*/jsx(Button, {
-            icon: CoreIcons.list,
-            "aria-label": "Custom options",
-            onClick: function onClick() {
-              void openOptionModal();
-            }
-          })]
-        }), OptionModal]
-      }), type === DATA_TYPES.FILE && /*#__PURE__*/jsx(Fragment, {
-        children: /*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".accept"),
-          children: /*#__PURE__*/jsx(Input, {
-            inline: true,
-            label: "Accept types",
-            allowClear: true,
-            placeholder: "Accept value...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/jsx("span", {
-              className: "text-sm text-muted/50 px-1",
-              children: "OPTIONAL"
-            })
-          })
-        })
-      }), [DATA_TYPES.NUMBER, DATA_TYPES.RANGE].includes(type) && /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".min"),
-          children: /*#__PURE__*/jsx(Number, {
-            inline: true,
-            label: "Min value",
-            allowClear: true,
-            placeholder: "Minimum value...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/jsx("span", {
-              className: "text-sm text-muted/50 px-1",
-              children: "OPTIONAL"
-            })
-          })
-        }), /*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".max"),
-          children: /*#__PURE__*/jsx(Number, {
-            inline: true,
-            label: "Max value",
-            allowClear: true,
-            placeholder: "Maximum value...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/jsx("span", {
-              className: "text-sm text-muted/50 px-1",
-              children: "OPTIONAL"
-            })
-          })
-        }), /*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".step"),
-          children: /*#__PURE__*/jsx(Number, {
-            inline: true,
-            label: "Step value",
-            allowClear: true,
-            placeholder: "Step value...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/jsx("span", {
-              className: "text-sm text-muted/50 px-1",
-              children: "OPTIONAL"
-            })
-          })
-        })]
-      }), type === DATA_TYPES.DATE && /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(Field, {
-          inline: true,
-          label: "Type",
-          plain: true,
-          children: /*#__PURE__*/jsx(Controller, {
-            name: "".concat(field, ".type"),
-            children: /*#__PURE__*/jsxs(ToggleButtonGroup, {
-              value: "",
-              fullWidth: true,
-              className: "flex-1",
-              children: [/*#__PURE__*/jsx(Button, {
-                className: "flex-1",
-                value: "date",
-                children: "Date"
-              }), /*#__PURE__*/jsx(Button, {
-                className: "flex-1",
-                value: "datetime",
-                children: "Date Time"
-              })]
-            })
-          })
-        }), /*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".min"),
-          children: /*#__PURE__*/jsx(DateInput, {
-            inline: true,
-            label: "Min value",
-            allowClear: true,
-            placeholder: "Minimum value...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/jsx("span", {
-              className: "text-sm text-muted/50 px-1",
-              children: "OPTIONAL"
-            })
-          })
-        }), /*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".max"),
-          children: /*#__PURE__*/jsx(DateInput, {
-            inline: true,
-            label: "Max value",
-            allowClear: true,
-            placeholder: "Maximum value...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/jsx("span", {
-              className: "text-sm text-muted/50 px-1",
-              children: "OPTIONAL"
-            })
-          })
-        })]
-      }), /*#__PURE__*/jsxs(Field, {
-        label: " ",
-        inline: true,
-        plain: true,
-        children: [/*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".required"),
-          children: /*#__PURE__*/jsx(Checkbox, {
-            label: "Required"
-          })
-        }), type !== DATA_TYPES.AVATAR && /*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".multiple"),
-          children: /*#__PURE__*/jsx(Checkbox, {
-            label: "Multiple",
-            onChange: setMultiple
-          })
-        }), hasOptions && /*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".allowCustom"),
-          children: /*#__PURE__*/jsx(Checkbox, {
-            label: "Allow custom value"
-          })
-        })]
-      }), multiple && /*#__PURE__*/jsxs(Fragment, {
-        children: [/*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".minItems"),
-          children: /*#__PURE__*/jsx(Number, {
-            inline: true,
-            label: "Min items",
-            allowClear: true,
-            placeholder: "Minimum items...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/jsx("span", {
-              className: "text-sm text-muted/50 px-1",
-              children: "OPTIONAL"
-            })
-          })
-        }), /*#__PURE__*/jsx(Controller, {
-          name: "".concat(field, ".maxItems"),
-          children: /*#__PURE__*/jsx(Number, {
-            inline: true,
-            label: "Max items",
-            allowClear: true,
-            placeholder: "Maximum items...",
-            decorateEndShowWhenEmpty: true,
-            decorateEnd: /*#__PURE__*/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 ? EMPTY_ARRAY : _ref2$optionLists,
-    onChange = _ref2.onChange;
+    children = _ref.children,
+    onChange = _ref.onChange;
   var formRef = useRef(null);
-  var schemaRef = useRef({});
-  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];
-  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 = useCallback(function (model) {
-    onChange === null || onChange === void 0 || onChange(Object.values(model));
+    onChange === null || onChange === void 0 || onChange(model.schema);
   }, []);
-  var handleTypeChange = useCallback(function (field, val) {
+  useEffect(function () {
     var _formRef$current;
-    (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValue(field, val);
-  }, []);
+    (_formRef$current = formRef.current) === null || _formRef$current === void 0 || _formRef$current.setValues({
+      schema: schemaDef
+    });
+  }, [schemaDef]);
   return /*#__PURE__*/jsxs(Form, {
     formRef: formRef,
-    values: schema,
-    defaultValues: schema,
     onSubmit: handleChange,
-    children: [/*#__PURE__*/jsx(Content, {
-      className: "divide-y",
-      children: schemaFields.map(function (field) {
-        return /*#__PURE__*/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(DATA_TYPES)
-        }, field);
-      })
-    }), /*#__PURE__*/jsxs(Footer, {
+    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,
-      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/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 };