@react-fabric/form 1.0.0-beta.9 → 1.0.1

package/dist/cjs/i18n/{en.json.js → en/form.json.js}

@@ -4,19 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var addArray = "Add Item";
 var password = {
-	show: "Show password",
-	hide: "Hide password"
+	hide: "Hide password",
+	show: "Show password"
 };
 var select = {
+	createOption: "Create new option for <0>{{query}}</0>",
 	emptyList: "No options available",
-	notFound: "No options found for <0>{{query}}</0>",
-	createOption: "Create new option for <0>{{query}}</0>"
+	notFound: "No options found for <0>{{query}}</0>"
 };
 var yup = {
 	arrayMax: "{{label}} must contain upto {{max}} item",
 	arrayMin: "{{label}} must contain atleast {{min}} item",
-	invalid: "{{label}} invalid",
 	empty: "{{label}} must not be empty",
+	invalid: "{{label}} invalid",
 	invalidType: "{{label}} invalid datatype",
 	numberMax: "{{label}} maximum {{max}}",
 	numberMin: "{{label}} minimum {{min}}",

package/dist/cjs/i18n/index.js

@@ -1,8 +1,8 @@
 'use strict';
 
 var core = require('@react-fabric/core');
-var ar = require('./ar.json.js');
-var en = require('./en.json.js');
+var form = require('./ar/form.json.js');
+var form$1 = require('./en/form.json.js');
 
 /*
  * React Fabric
@@ -28,6 +28,6 @@ var en = require('./en.json.js');
  */
 
 core.addTranslationBundle("form", {
-  en: en.default,
-  ar: ar.default
+  en: form$1.default,
+  ar: form.default
 });

package/dist/cjs/index.js

@@ -3,12 +3,15 @@
 require('./i18n/index.js');
 var Controller = require('./form/Controller.js');
 var Form = require('./form/Form.js');
+var useForm = require('./form/useForm.js');
 var useFileUploader = require('./hooks/useFileUploader.js');
 var useFormBuilder = require('./hooks/useFormBuilder.js');
 var ArrayInput = require('./input/ArrayInput.js');
+var AvatarInput = require('./input/AvatarInput.js');
 var Checkbox = require('./input/Checkbox.js');
 var ColorInput = require('./input/ColorInput.js');
 var ColorPicker = require('./input/ColorPicker.js');
+var DateInput = require('./input/DateInput.js');
 var Field = require('./input/Field.js');
 var File = require('./input/File.js');
 var Hidden = require('./input/Hidden.js');
@@ -17,7 +20,7 @@ var Number = require('./input/Number.js');
 var Password = require('./input/Password.js');
 var Radio = require('./input/Radio.js');
 var RadioGroup = require('./input/RadioGroup.js');
-var Range = require('./input/Range.js');
+var RangeSlider = require('./input/RangeSlider.js');
 var Search = require('./input/Search.js');
 var Slider = require('./input/Slider.js');
 var Switch = require('./input/Switch.js');
@@ -26,17 +29,48 @@ var AutoComplete = require('./select/AutoComplete.js');
 var DualList = require('./select/DualList.js');
 var List = require('./select/List.js');
 var Select = require('./select/Select.js');
+var SchemaEditor = require('./builder/SchemaEditor.js');
+var schema = require('./types/schema.js');
 
+/**
+ * React Fabric
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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 FORM_PACKAGE = "@react-fabric/form";
+var FORM_VERSION = "1.0.1";
 
 exports.Controller = Controller.Controller;
 exports.Form = Form.Form;
+exports.useForm = useForm.useForm;
 exports.useFileUploader = useFileUploader.useFileUploader;
 exports.useFormBuilder = useFormBuilder.useFormBuilder;
 exports.ArrayInput = ArrayInput.ArrayInput;
+exports.AvatarInput = AvatarInput.AvatarInput;
 exports.Checkbox = Checkbox.Checkbox;
 exports.ColorInput = ColorInput.ColorInput;
 exports.ColorPicker = ColorPicker.ColorPicker;
+exports.DateInput = DateInput.DateInput;
 exports.Field = Field.Field;
 exports.FileInput = File.FileInput;
 exports.HiddenInput = Hidden.HiddenInput;
@@ -45,7 +79,7 @@ exports.Number = Number.Number;
 exports.Password = Password.Password;
 exports.Radio = Radio.Radio;
 exports.RadioGroup = RadioGroup.RadioGroup;
-exports.Range = Range.Range;
+exports.RangeSlider = RangeSlider.RangeSlider;
 exports.Search = Search.Search;
 exports.Slider = Slider.Slider;
 exports.Switch = Switch.Switch;
@@ -54,3 +88,8 @@ exports.AutoComplete = AutoComplete.AutoComplete;
 exports.DualList = DualList.DualList;
 exports.List = List.List;
 exports.Select = Select.Select;
+exports.SchemaEditor = SchemaEditor.SchemaEditor;
+exports.DATA_TYPES = schema.DATA_TYPES;
+exports.SCHEMA_CUSTOM_LIST = schema.SCHEMA_CUSTOM_LIST;
+exports.FORM_PACKAGE = FORM_PACKAGE;
+exports.FORM_VERSION = FORM_VERSION;

package/dist/cjs/input/ArrayInput.js

@@ -1,189 +1,313 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var core = require('@dnd-kit/core');
-var sortable = require('@dnd-kit/sortable');
-var core$1 = require('@react-fabric/core');
-var utilities$1 = require('@react-fabric/utilities');
-var classNames = require('classnames');
+var _regeneratorRuntime = require('@babel/runtime/regenerator');
+var modifiers = require('@dnd-kit/abstract/modifiers');
+var react$1 = require('@dnd-kit/react');
+var sortable = require('@dnd-kit/react/sortable');
+var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var react = require('react');
 var reactHookForm = require('react-hook-form');
 var reactI18next = require('react-i18next');
 var FieldWrapper = require('../internal/FieldWrapper.js');
-var ArrayInput_module = require('./ArrayInput.module.css');
-var modifiers = require('@dnd-kit/modifiers');
-var utilities = require('@dnd-kit/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["name", "children", "addLabel", "fixedList", "focusName", "onAdd", "arrayRef", "enableSorting", "disabled", "readOnly", "minItems"];
+var _excluded = ["name", "children", "addLabel", "focusName", "buttonPosition", "onAdd", "onRemove", "onBeforeRemove", "canRemove", "arrayRef", "enableSorting", "disabled", "readOnly", "minItems", "maxItems"];
 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 ArrayInput = function ArrayInput(_ref) {
-  var _error$values$label, _error$values, _error$values2;
-  var name = _ref.name,
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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; }
+function SortableItem(_ref) {
+  var id = _ref.id,
+    index = _ref.index,
     children = _ref.children,
-    addLabel = _ref.addLabel,
-    fixedList = _ref.fixedList,
-    _ref$focusName = _ref.focusName,
-    focusName = _ref$focusName === void 0 ? "" : _ref$focusName,
-    onAdd = _ref.onAdd,
-    arrayRef = _ref.arrayRef,
-    enableSorting = _ref.enableSorting,
-    _ref$disabled = _ref.disabled,
-    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
-    _ref$readOnly = _ref.readOnly,
-    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
-    _ref$minItems = _ref.minItems,
-    minItems = _ref$minItems === void 0 ? 0 : _ref$minItems,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    className = _ref.className,
+    enableSorting = _ref.enableSorting;
+  var _useSortable = sortable.useSortable({
+      id: id,
+      index: index,
+      disabled: !enableSorting
+    }),
+    ref = _useSortable.ref,
+    handleRef = _useSortable.handleRef,
+    isDragging = _useSortable.isDragging;
+  if (enableSorting) {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: className,
+      ref: ref,
+      children: [/*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        ref: handleRef,
+        className: isDragging ? "cursor-grabbing" : "cursor-grab",
+        icon: "icon-[mdi--drag-vertical]"
+      }), children]
+    });
+  }
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: className,
+    children: children
+  });
+}
+function Wrapper(_ref2) {
+  var children = _ref2.children,
+    fields = _ref2.fields,
+    enableSorting = _ref2.enableSorting,
+    onMove = _ref2.onMove;
+  if (enableSorting) {
+    // pass id list to dnd context
+    var idMap = fields.map(function (item) {
+      return item.__ID__;
+    });
+    var handleDragEnd = function handleDragEnd(e) {
+      var _e$operation$source, _e$operation$target;
+      if (((_e$operation$source = e.operation.source) === null || _e$operation$source === void 0 ? void 0 : _e$operation$source.id) !== ((_e$operation$target = e.operation.target) === null || _e$operation$target === void 0 ? void 0 : _e$operation$target.id)) {
+        var _e$operation$source2, _e$operation$target2;
+        // find index of item and drop over
+        var active = idMap.indexOf("".concat((_e$operation$source2 = e.operation.source) === null || _e$operation$source2 === void 0 ? void 0 : _e$operation$source2.id));
+        var end = idMap.indexOf("".concat((_e$operation$target2 = e.operation.target) === null || _e$operation$target2 === void 0 ? void 0 : _e$operation$target2.id));
+        onMove(active, end);
+      }
+    };
+    return /*#__PURE__*/jsxRuntime.jsx(react$1.DragDropProvider, {
+      onDragEnd: handleDragEnd,
+      modifiers: [modifiers.RestrictToVerticalAxis],
+      children: children
+    });
+  }
+  return children;
+}
+
+/**
+ * ArrayInput component for managing an array of items in a form.
+ * It allows adding, removing, and sorting items within the array.
+ * It integrates with react-hook-form for form state management and validation.
+ * It supports fixed-length lists, custom add/remove handlers, and can display validation errors.
+ * It also provides options for inline display and custom button positioning.
+ *
+ * It uses the `useFieldArray` hook from `react-hook-form` to manage the array state and provides a simple interface for adding and removing items.
+ *
+ * It also supports drag-and-drop sorting using `@dnd-kit/core` and `@dnd-kit/sortable` for a better user experience when reordering items.
+ *
+ * @example
+ * ```jsx
+ * <ArrayInput
+ *   name="items"
+ *   label="Items"
+ *   addLabel="Add Item"
+ *   onAdd={() => ({ name: "", value: "" })}
+ *   onRemove={(item, index) => console.log("Removed item:", item, "at index:", index)}
+ *   onBeforeRemove={(item, index) => confirm(`Are you sure you want to remove item at index ${index}?`)}
+ *   canRemove={({ item, index, lastItem }) => !lastItem} // Prevent removing the last item
+ * >
+ *   {({ index, name }) => (
+ *     <Input
+ *       name={name}
+ *       label={`Item ${index + 1}`}
+ *       placeholder="Enter item value"
+ *       required={index === 0} // Make the first item required
+ *     />
+ *   )}
+ * </ArrayInput>
+ * ```
+ *
+ * @see {@link https://react-hook-form.com/api/usefieldarray} for more details on `useFieldArray`.
+ * @see {@link https://react-dnd.github.io/react-dnd/about} for more details on DnD context and sorting.
+ */
+function ArrayInput(_ref3) {
+  var name = _ref3.name,
+    children = _ref3.children,
+    addLabel = _ref3.addLabel,
+    _ref3$focusName = _ref3.focusName,
+    focusName = _ref3$focusName === void 0 ? "" : _ref3$focusName,
+    _ref3$buttonPosition = _ref3.buttonPosition,
+    buttonPosition = _ref3$buttonPosition === void 0 ? "bottom" : _ref3$buttonPosition,
+    onAdd = _ref3.onAdd,
+    onRemove = _ref3.onRemove,
+    onBeforeRemove = _ref3.onBeforeRemove,
+    canRemove = _ref3.canRemove,
+    arrayRef = _ref3.arrayRef,
+    enableSorting = _ref3.enableSorting,
+    _ref3$disabled = _ref3.disabled,
+    disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
+    _ref3$readOnly = _ref3.readOnly,
+    readOnly = _ref3$readOnly === void 0 ? false : _ref3$readOnly,
+    _ref3$minItems = _ref3.minItems,
+    minItems = _ref3$minItems === void 0 ? 0 : _ref3$minItems,
+    _ref3$maxItems = _ref3.maxItems,
+    maxItems = _ref3$maxItems === void 0 ? Number.MAX_SAFE_INTEGER : _ref3$maxItems,
+    rest = _objectWithoutProperties(_ref3, _excluded);
   var _useTranslation = reactI18next.useTranslation("form"),
     t = _useTranslation.t;
   var form = reactHookForm.useFormContext();
   if (!(form !== null && form !== void 0 && form.control)) throw new Error("ArrayInput must be contained within a Form element");
   var _useFieldArray = reactHookForm.useFieldArray({
       name: name,
+      keyName: "__ID__",
       control: form.control
     }),
     fields = _useFieldArray.fields,
     append = _useFieldArray.append,
     remove = _useFieldArray.remove,
     move = _useFieldArray.move;
+  var _useState = react.useState(function () {
+      return [];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialList = _useState2[0],
+    setInitialList = _useState2[1];
+  react.useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setInitialList(fields.map(function (f) {
+      return f.__ID__;
+    }));
+  }, [fields]);
   var error = react.useMemo(function () {
     var _form$formState$error, _form$formState$error2, _form$formState$error3;
     return (_form$formState$error = (_form$formState$error2 = form.formState.errors[name]) === null || _form$formState$error2 === void 0 ? void 0 : _form$formState$error2.message) !== null && _form$formState$error !== void 0 ? _form$formState$error : (_form$formState$error3 = form.formState.errors[name]) === null || _form$formState$error3 === void 0 || (_form$formState$error3 = _form$formState$error3.root) === null || _form$formState$error3 === void 0 ? void 0 : _form$formState$error3.message;
-  }, [form.formState.errors]);
-  var handleAdd = react.useCallback(function (item) {
-    append(item);
-    setTimeout(function () {
-      form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
-    }, 100);
-  }, [name, fields, focusName]);
+  }, [form.formState.errors, name]);
+  var removeCheck = react.useCallback(function (item, index) {
+    if (canRemove === false) return false;
+    if (canRemove === "newonly") {
+      return !initialList.includes(item.__ID__);
+    }
+    if (typeof canRemove === "function") {
+      return canRemove({
+        item: item,
+        index: index,
+        lastItem: index + 1 === fields.length
+      });
+    }
+    return true;
+  }, [canRemove, initialList, fields]);
+  var handleAdd = react.useCallback(/*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(item) {
+      var _t;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (item) {
+              _context.next = 1;
+              break;
+            }
+            return _context.abrupt("return");
+          case 1:
+            _t = append;
+            _context.next = 2;
+            return item;
+          case 2:
+            _t(_context.sent);
+            setTimeout(function () {
+              form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
+            }, 100);
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref4.apply(this, arguments);
+    };
+  }(), [append, form, name, fields.length, focusName]);
+  var handleRemove = react.useCallback(function (item, index) {
+    var ret = onBeforeRemove === null || onBeforeRemove === void 0 ? void 0 : onBeforeRemove(item, index);
+    void Promise.resolve(ret).then(function (b) {
+      if (!utilities.isFalse(b)) {
+        remove(index);
+        onRemove === null || onRemove === void 0 || onRemove(item, index);
+      }
+    });
+  }, [remove, onRemove, onBeforeRemove]);
   react.useImperativeHandle(arrayRef, function () {
     return {
-      addItem: handleAdd,
+      addItem: function addItem(t) {
+        return handleAdd(Promise.resolve(t));
+      },
       removeItem: remove
     };
   });
-  var Wrapper = react.useCallback(function (_ref2) {
-    var children = _ref2.children;
-    if (enableSorting) {
-      // 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.DndContext, {
-        onDragEnd: handleDragEnd,
-        modifiers: [modifiers.restrictToVerticalAxis],
-        children: /*#__PURE__*/jsxRuntime.jsx(sortable.SortableContext, {
-          items: idMap,
-          children: children
-        })
-      });
-    }
-    return children;
-  }, [enableSorting, fields]);
-  // @ts-expect-error ignore
-  Wrapper.displayName = "SortableWrapper";
-  var SortableItem = react.useCallback(function (_ref3) {
-    var id = _ref3.id,
-      children = _ref3.children,
-      className = _ref3.className;
-    if (enableSorting) {
-      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(core$1.Icon, _objectSpread(_objectSpread({
-          className: isDragging ? "cursor-grabbing" : "cursor-grab",
-          icon: core$1.CoreIcons.dragHandle
-        }, attributes), listeners)), children]
-      });
-    }
+  var addButton = react.useMemo(function () {
+    var _error$values$label;
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: className,
-      children: children
+      className: "flex justify-end",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Tooltip, {
+        color: "danger",
+        content: utilities.isObject(error) ? t(error.key, utilities.isObject(error.values) ? _objectSpread(_objectSpread({}, error.values), {}, {
+          label: t((_error$values$label = error.values.label) !== null && _error$values$label !== void 0 ? _error$values$label : "form:badkey", error.values.path)
+        }) : {}) : utilities.isString(error) ? error : "",
+        children: /*#__PURE__*/jsxRuntime.jsx(core.Button, {
+          size: "sm",
+          "aria-label": "Add item",
+          icon: "icon-[mdi--plus-circle-outline]",
+          onClick: function onClick() {
+            return handleAdd(Promise.resolve(onAdd === null || onAdd === void 0 ? void 0 : onAdd()));
+          },
+          "data-invalid": !!error,
+          disabled: !!disabled || readOnly || fields.length > maxItems,
+          className: utilities.cn("fabric-addButton", canRemove !== false && "me-10"),
+          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("form:addArray")
+        })
+      })
     });
-  }, [enableSorting]);
-  // @ts-expect-error ignore
-  SortableItem.displayName = "SortableItem";
+  }, [error, t, disabled, readOnly, fields.length, maxItems, canRemove, addLabel, handleAdd, onAdd]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: ArrayInput_module.arrayInput,
+    className: "fabric-arrayInput",
     children: [/*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+      appendLabel: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "-me-2",
+        children: onAdd && buttonPosition !== "bottom" && addButton
+      }),
       children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
+        onMove: move,
+        enableSorting: enableSorting,
+        fields: fields,
         children: fields.map(function (item, index) {
+          var _cloneChildren;
           return /*#__PURE__*/jsxRuntime.jsxs(SortableItem, {
-            id: item.id,
+            id: item.__ID__,
+            index: index,
+            enableSorting: enableSorting,
             className: "flex items-center flex-nowrap gap-2 mb-1",
             children: [typeof children === "function" ? children({
               index: index,
-              name: "".concat(name, ".").concat(index)
-            }) : react.Children.map(children, function (child) {
-              return /*#__PURE__*/react.cloneElement(child, Object.assign({
-                disabled: disabled,
-                readOnly: readOnly,
-                "data-inner": true,
-                name: "".concat(name, ".").concat(index).concat(child.props.name ? "." + child.props.name : "")
-              }, index > 0 && {
-                label: undefined,
-                required: undefined,
-                appendLabel: undefined
-              }));
-            }), !fixedList && /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+              item: item,
+              name: "".concat(name, ".").concat(index),
+              onChange: function onChange(val) {
+                void Promise.resolve(val).then(function (result) {
+                  if (result) form.setValue("".concat(name, ".").concat(index), result);
+                });
+              }
+            }) : (_cloneChildren = core.cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child) {
+              if (/*#__PURE__*/react.isValidElement(child)) {
+                var childEl = child;
+                return /*#__PURE__*/react.cloneElement(childEl, Object.assign({
+                  disabled: disabled,
+                  readOnly: readOnly,
+                  "data-inner": true,
+                  name: "".concat(name, ".").concat(index).concat(childEl.props.name ? "." + childEl.props.name : "")
+                }, index > 0 && {
+                  label: undefined,
+                  required: undefined,
+                  appendLabel: undefined
+                }));
+              }
+            }), canRemove !== false && /*#__PURE__*/jsxRuntime.jsx(core.Button, {
               "aria-label": "Remove item",
-              icon: core$1.CoreIcons.remove,
+              icon: "icon-[mdi--minus-circle-outline]",
               color: "danger",
               variant: "link",
               className: "self-end",
-              disabled: disabled || readOnly || fields.length <= minItems,
+              disabled: disabled || readOnly || fields.length <= minItems || !removeCheck(item, index),
               onClick: function onClick() {
-                return remove(index);
+                return handleRemove(item, index);
               }
             })]
-          }, item.id);
-        })
-      })
-    })), !fixedList && onAdd && /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "flex justify-end",
-      children: /*#__PURE__*/jsxRuntime.jsx(core$1.Tooltip, {
-        color: "danger",
-        content: utilities$1.isString(error) ? "".concat(error) : t(error === null || error === void 0 ? void 0 : error.key, error !== null && error !== void 0 && 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)
-        }) : {}),
-        children: /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
-          "aria-label": "Add item",
-          icon: core$1.CoreIcons.insert,
-          onClick: function onClick() {
-            return handleAdd(onAdd());
-          },
-          "data-invalid": !!error,
-          disabled: !!disabled || readOnly,
-          className: classNames(ArrayInput_module.addButton, "me-10"),
-          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
+          }, item.__ID__);
         })
       })
-    })]
+    })), onAdd && buttonPosition !== "top" && addButton]
   });
-};
+}
 
 exports.ArrayInput = ArrayInput;