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

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

@@ -2,19 +2,19 @@
 
 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/esm/i18n/index.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { addTranslationBundle } from '@react-fabric/core';
-import ar from './ar.json.js';
-import en from './en.json.js';
+import ar from './ar/form.json.js';
+import en from './en/form.json.js';
 
 /*
  * React Fabric

package/dist/esm/index.js

@@ -3,12 +3,15 @@
 import './i18n/index.js';
 export { Controller } from './form/Controller.js';
 export { Form } from './form/Form.js';
+export { useForm } from './form/useForm.js';
 export { useFileUploader } from './hooks/useFileUploader.js';
 export { useFormBuilder } from './hooks/useFormBuilder.js';
 export { ArrayInput } from './input/ArrayInput.js';
+export { AvatarInput } from './input/AvatarInput.js';
 export { Checkbox } from './input/Checkbox.js';
 export { ColorInput } from './input/ColorInput.js';
 export { ColorPicker } from './input/ColorPicker.js';
+export { DateInput } from './input/DateInput.js';
 export { Field } from './input/Field.js';
 export { FileInput } from './input/File.js';
 export { HiddenInput } from './input/Hidden.js';
@@ -17,7 +20,7 @@ export { Number } from './input/Number.js';
 export { Password } from './input/Password.js';
 export { Radio } from './input/Radio.js';
 export { RadioGroup } from './input/RadioGroup.js';
-export { Range } from './input/Range.js';
+export { RangeSlider } from './input/RangeSlider.js';
 export { Search } from './input/Search.js';
 export { Slider } from './input/Slider.js';
 export { Switch } from './input/Switch.js';
@@ -26,3 +29,35 @@ export { AutoComplete } from './select/AutoComplete.js';
 export { DualList } from './select/DualList.js';
 export { List } from './select/List.js';
 export { Select } from './select/Select.js';
+export { SchemaEditor } from './builder/SchemaEditor.js';
+export { DATA_TYPES, SCHEMA_CUSTOM_LIST } from './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";
+
+export { FORM_PACKAGE, FORM_VERSION };

package/dist/esm/input/ArrayInput.js

@@ -1,189 +1,313 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { DndContext } from '@dnd-kit/core';
-import { SortableContext, useSortable } from '@dnd-kit/sortable';
-import { Icon, CoreIcons, Button, Tooltip } from '@react-fabric/core';
-import { isString } from '@react-fabric/utilities';
-import classNames from 'classnames';
-import { useMemo, useCallback, useImperativeHandle, Children, cloneElement } from 'react';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { RestrictToVerticalAxis } from '@dnd-kit/abstract/modifiers';
+import { DragDropProvider } from '@dnd-kit/react';
+import { useSortable } from '@dnd-kit/react/sortable';
+import { Tooltip, Button, cloneChildren, Icon } from '@react-fabric/core';
+import { isFalse, cn, isObject, isString } from '@react-fabric/utilities';
+import { useState, useEffect, useMemo, useCallback, useImperativeHandle, isValidElement, cloneElement } from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
-import classes from './ArrayInput.module.css';
-import { restrictToVerticalAxis } from '@dnd-kit/modifiers';
-import { CSS } from '@dnd-kit/utilities';
 import { jsx, jsxs } from '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 = useSortable({
+      id: id,
+      index: index,
+      disabled: !enableSorting
+    }),
+    ref = _useSortable.ref,
+    handleRef = _useSortable.handleRef,
+    isDragging = _useSortable.isDragging;
+  if (enableSorting) {
+    return /*#__PURE__*/jsxs("div", {
+      className: className,
+      ref: ref,
+      children: [/*#__PURE__*/jsx(Icon, {
+        ref: handleRef,
+        className: isDragging ? "cursor-grabbing" : "cursor-grab",
+        icon: "icon-[mdi--drag-vertical]"
+      }), children]
+    });
+  }
+  return /*#__PURE__*/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__*/jsx(DragDropProvider, {
+      onDragEnd: handleDragEnd,
+      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 = useTranslation("form"),
     t = _useTranslation.t;
   var form = useFormContext();
   if (!(form !== null && form !== void 0 && form.control)) throw new Error("ArrayInput must be contained within a Form element");
   var _useFieldArray = useFieldArray({
       name: name,
+      keyName: "__ID__",
       control: form.control
     }),
     fields = _useFieldArray.fields,
     append = _useFieldArray.append,
     remove = _useFieldArray.remove,
     move = _useFieldArray.move;
+  var _useState = useState(function () {
+      return [];
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialList = _useState2[0],
+    setInitialList = _useState2[1];
+  useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setInitialList(fields.map(function (f) {
+      return f.__ID__;
+    }));
+  }, [fields]);
   var error = 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 = 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 = 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 = 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 = useCallback(function (item, index) {
+    var ret = onBeforeRemove === null || onBeforeRemove === void 0 ? void 0 : onBeforeRemove(item, index);
+    void Promise.resolve(ret).then(function (b) {
+      if (!isFalse(b)) {
+        remove(index);
+        onRemove === null || onRemove === void 0 || onRemove(item, index);
+      }
+    });
+  }, [remove, onRemove, onBeforeRemove]);
   useImperativeHandle(arrayRef, function () {
     return {
-      addItem: handleAdd,
+      addItem: function addItem(t) {
+        return handleAdd(Promise.resolve(t));
+      },
       removeItem: remove
     };
   });
-  var Wrapper = 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__*/jsx(DndContext, {
-        onDragEnd: handleDragEnd,
-        modifiers: [restrictToVerticalAxis],
-        children: /*#__PURE__*/jsx(SortableContext, {
-          items: idMap,
-          children: children
-        })
-      });
-    }
-    return children;
-  }, [enableSorting, fields]);
-  // @ts-expect-error ignore
-  Wrapper.displayName = "SortableWrapper";
-  var SortableItem = useCallback(function (_ref3) {
-    var id = _ref3.id,
-      children = _ref3.children,
-      className = _ref3.className;
-    if (enableSorting) {
-      var _useSortable = useSortable({
-          id: id
-        }),
-        attributes = _useSortable.attributes,
-        listeners = _useSortable.listeners,
-        setNodeRef = _useSortable.setNodeRef,
-        transform = _useSortable.transform,
-        transition = _useSortable.transition,
-        isDragging = _useSortable.isDragging;
-      return /*#__PURE__*/jsxs("div", {
-        className: className,
-        ref: setNodeRef,
-        style: {
-          transform: CSS.Transform.toString(transform),
-          transition: transition
-        },
-        children: [/*#__PURE__*/jsx(Icon, _objectSpread(_objectSpread({
-          className: isDragging ? "cursor-grabbing" : "cursor-grab",
-          icon: CoreIcons.dragHandle
-        }, attributes), listeners)), children]
-      });
-    }
+  var addButton = useMemo(function () {
+    var _error$values$label;
     return /*#__PURE__*/jsx("div", {
-      className: className,
-      children: children
+      className: "flex justify-end",
+      children: /*#__PURE__*/jsx(Tooltip, {
+        color: "danger",
+        content: isObject(error) ? t(error.key, 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)
+        }) : {}) : isString(error) ? error : "",
+        children: /*#__PURE__*/jsx(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: 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__*/jsxs("div", {
-    className: classes.arrayInput,
+    className: "fabric-arrayInput",
     children: [/*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+      appendLabel: /*#__PURE__*/jsx("div", {
+        className: "-me-2",
+        children: onAdd && buttonPosition !== "bottom" && addButton
+      }),
       children: /*#__PURE__*/jsx(Wrapper, {
+        onMove: move,
+        enableSorting: enableSorting,
+        fields: fields,
         children: fields.map(function (item, index) {
+          var _cloneChildren;
           return /*#__PURE__*/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)
-            }) : Children.map(children, function (child) {
-              return /*#__PURE__*/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__*/jsx(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 = cloneChildren(children)) === null || _cloneChildren === void 0 ? void 0 : _cloneChildren.map(function (child) {
+              if (/*#__PURE__*/isValidElement(child)) {
+                var childEl = child;
+                return /*#__PURE__*/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__*/jsx(Button, {
               "aria-label": "Remove item",
-              icon: 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__*/jsx("div", {
-      className: "flex justify-end",
-      children: /*#__PURE__*/jsx(Tooltip, {
-        color: "danger",
-        content: 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__*/jsx(Button, {
-          "aria-label": "Add item",
-          icon: CoreIcons.insert,
-          onClick: function onClick() {
-            return handleAdd(onAdd());
-          },
-          "data-invalid": !!error,
-          disabled: !!disabled || readOnly,
-          className: classNames(classes.addButton, "me-10"),
-          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
+          }, item.__ID__);
         })
       })
-    })]
+    })), onAdd && buttonPosition !== "top" && addButton]
   });
-};
+}
 
 export { ArrayInput };