@react-fabric/form 1.0.0-beta.22 → 1.0.0-beta.24

package/dist/cjs/input/ArrayInput.js

@@ -16,17 +16,18 @@ 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", "fixedList", "focusName", "buttonPosition", "onAdd", "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,
     children = _ref.children,
     addLabel = _ref.addLabel,
     fixedList = _ref.fixedList,
     _ref$focusName = _ref.focusName,
     focusName = _ref$focusName === void 0 ? "" : _ref$focusName,
+    _ref$buttonPosition = _ref.buttonPosition,
+    buttonPosition = _ref$buttonPosition === void 0 ? "bottom" : _ref$buttonPosition,
     onAdd = _ref.onAdd,
     arrayRef = _ref.arrayRef,
     enableSorting = _ref.enableSorting,
@@ -36,6 +37,8 @@ var ArrayInput = function ArrayInput(_ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$minItems = _ref.minItems,
     minItems = _ref$minItems === void 0 ? 0 : _ref$minItems,
+    _ref$maxItems = _ref.maxItems,
+    maxItems = _ref$maxItems === void 0 ? Number.MAX_SAFE_INTEGER : _ref$maxItems,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = reactI18next.useTranslation("form"),
     t = _useTranslation.t;
@@ -127,9 +130,32 @@ var ArrayInput = function ArrayInput(_ref) {
   }, [enableSorting]);
   // @ts-expect-error ignore
   SortableItem.displayName = "SortableItem";
+  var addButton = react.useMemo(function () {
+    var _error$values$label, _error$values, _error$values2;
+    return /*#__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 === null || onAdd === void 0 ? void 0 : onAdd());
+          },
+          "data-invalid": !!error,
+          disabled: !!disabled || readOnly || fields.length < maxItems,
+          className: classNames(ArrayInput_module.addButton, "me-10"),
+          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
+        })
+      })
+    });
+  }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: ArrayInput_module.arrayInput,
-    children: [/*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [!fixedList && onAdd && buttonPosition !== "bottom" && addButton, /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
       children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
         children: fields.map(function (item, index) {
           return /*#__PURE__*/jsxRuntime.jsxs(SortableItem, {
@@ -138,7 +164,7 @@ var ArrayInput = function ArrayInput(_ref) {
             children: [typeof children === "function" ? children({
               index: index,
               name: "".concat(name, ".").concat(index)
-            }) : utilities$1.cloneChildren(children, function (child) {
+            }) : core$1.cloneChildren(children, function (child) {
               return /*#__PURE__*/react.cloneElement(child, Object.assign({
                 disabled: disabled,
                 readOnly: readOnly,
@@ -163,26 +189,7 @@ var ArrayInput = function ArrayInput(_ref) {
           }, 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")
-        })
-      })
-    })]
+    })), !fixedList && onAdd && buttonPosition !== "top" && addButton]
   });
 };
 

package/dist/cjs/input/Field.js

@@ -2,7 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var utilities = require('@react-fabric/utilities');
+var core = require('@react-fabric/core');
 var classNames = require('classnames');
 var react = require('react');
 var Field_module = require('../internal/Field.module.css');
@@ -21,7 +21,7 @@ var Field = function Field(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: classNames(Field_module.fieldGroup, !plain && !noOutline && "outline", !plain && "bg-base", "flex-1 rounded", !vertical && "flex flex-nowrap"),
-      children: utilities.cloneChildren(children, function (child) {
+      children: core.cloneChildren(children, function (child) {
         return /*#__PURE__*/react.cloneElement(child, {
           "data-inner": true
         });

package/dist/cjs/input/RadioGroup.js

@@ -2,7 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
-var utilities = require('@react-fabric/utilities');
+var core = require('@react-fabric/core');
 var react = require('react');
 var FieldWrapper = require('../internal/FieldWrapper.js');
 var jsxRuntime = require('react/jsx-runtime');
@@ -20,7 +20,7 @@ var RadioGroup = function RadioGroup(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
       className: className,
-      children: utilities.cloneChildren(children, function (child) {
+      children: core.cloneChildren(children, function (child) {
         return /*#__PURE__*/react.cloneElement(child, {
           name: name,
           onChange: onChange,

package/dist/cjs/select/Options.js

@@ -34,7 +34,7 @@ var Options = function Options(_ref) {
         i18nKey: "form:select.emptyList"
       })
     })), items.map(function (item, index) {
-      var _item$labelProperty;
+      var _item$value, _item$labelProperty;
       if (item.___group___) return /*#__PURE__*/jsxRuntime.jsx("p", {
         className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
         children: item.label
@@ -51,7 +51,7 @@ var Options = function Options(_ref) {
         children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
           i18nKey: "form:select.createOption",
           values: {
-            query: item.value
+            query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
           },
           components: [/*#__PURE__*/jsxRuntime.jsx("strong", {
             children: "query"

package/dist/cjs/select/Select.js

@@ -140,6 +140,9 @@ var Select = function Select(_ref) {
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
           }

package/dist/cjs/select/useSelect.js

@@ -140,7 +140,7 @@ var useSelect = function useSelect(_ref) {
         // 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;
@@ -212,7 +212,7 @@ 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);

package/dist/esm/input/ArrayInput.js

@@ -4,8 +4,8 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 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 { cloneChildren, isString } from '@react-fabric/utilities';
+import { Icon, CoreIcons, Tooltip, Button, cloneChildren } from '@react-fabric/core';
+import { isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, useCallback, useImperativeHandle, cloneElement } from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
@@ -16,17 +16,18 @@ 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", "fixedList", "focusName", "buttonPosition", "onAdd", "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,
     children = _ref.children,
     addLabel = _ref.addLabel,
     fixedList = _ref.fixedList,
     _ref$focusName = _ref.focusName,
     focusName = _ref$focusName === void 0 ? "" : _ref$focusName,
+    _ref$buttonPosition = _ref.buttonPosition,
+    buttonPosition = _ref$buttonPosition === void 0 ? "bottom" : _ref$buttonPosition,
     onAdd = _ref.onAdd,
     arrayRef = _ref.arrayRef,
     enableSorting = _ref.enableSorting,
@@ -36,6 +37,8 @@ var ArrayInput = function ArrayInput(_ref) {
     readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
     _ref$minItems = _ref.minItems,
     minItems = _ref$minItems === void 0 ? 0 : _ref$minItems,
+    _ref$maxItems = _ref.maxItems,
+    maxItems = _ref$maxItems === void 0 ? Number.MAX_SAFE_INTEGER : _ref$maxItems,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useTranslation = useTranslation("form"),
     t = _useTranslation.t;
@@ -127,9 +130,32 @@ var ArrayInput = function ArrayInput(_ref) {
   }, [enableSorting]);
   // @ts-expect-error ignore
   SortableItem.displayName = "SortableItem";
+  var addButton = useMemo(function () {
+    var _error$values$label, _error$values, _error$values2;
+    return /*#__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 === null || onAdd === void 0 ? void 0 : onAdd());
+          },
+          "data-invalid": !!error,
+          disabled: !!disabled || readOnly || fields.length < maxItems,
+          className: classNames(classes.addButton, "me-10"),
+          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
+        })
+      })
+    });
+  }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
   return /*#__PURE__*/jsxs("div", {
     className: classes.arrayInput,
-    children: [/*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
+    children: [!fixedList && onAdd && buttonPosition !== "bottom" && addButton, /*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
       children: /*#__PURE__*/jsx(Wrapper, {
         children: fields.map(function (item, index) {
           return /*#__PURE__*/jsxs(SortableItem, {
@@ -163,26 +189,7 @@ var ArrayInput = function ArrayInput(_ref) {
           }, 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")
-        })
-      })
-    })]
+    })), !fixedList && onAdd && buttonPosition !== "top" && addButton]
   });
 };
 

package/dist/esm/input/Field.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { cloneChildren } from '@react-fabric/utilities';
+import { cloneChildren } from '@react-fabric/core';
 import classNames from 'classnames';
 import { cloneElement } from 'react';
 import classes from '../internal/Field.module.css';

package/dist/esm/input/RadioGroup.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { cloneChildren } from '@react-fabric/utilities';
+import { cloneChildren } from '@react-fabric/core';
 import { cloneElement } from 'react';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
 import { jsx } from 'react/jsx-runtime';

package/dist/esm/select/Options.js

@@ -34,7 +34,7 @@ var Options = function Options(_ref) {
         i18nKey: "form:select.emptyList"
       })
     })), items.map(function (item, index) {
-      var _item$labelProperty;
+      var _item$value, _item$labelProperty;
       if (item.___group___) return /*#__PURE__*/jsx("p", {
         className: "px-2 py-1 text-muted text-xs sticky -top-px z-2 bg-base border-t",
         children: item.label
@@ -51,7 +51,7 @@ var Options = function Options(_ref) {
         children: /*#__PURE__*/jsx(Trans, {
           i18nKey: "form:select.createOption",
           values: {
-            query: item.value
+            query: (_item$value = item.value) !== null && _item$value !== void 0 ? _item$value : item
           },
           components: [/*#__PURE__*/jsx("strong", {
             children: "query"

package/dist/esm/select/Select.js

@@ -140,6 +140,9 @@ var Select = function Select(_ref) {
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed === null || onEnterPressed === void 0 || onEnterPressed(evt);
           }

package/dist/esm/select/useSelect.js

@@ -140,7 +140,7 @@ var useSelect = function useSelect(_ref) {
         // 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;
@@ -212,7 +212,7 @@ 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);

package/dist/types/input/ArrayInput.d.ts

@@ -32,6 +32,10 @@ export interface ArrayInputProps {
      * minimum required length
      */
     minItems?: number;
+    /**
+     * maximum length
+     */
+    maxItems?: number;
     /**
      * field name to focus on add
      */
@@ -48,6 +52,7 @@ export interface ArrayInputProps {
      * add item button label
      */
     addLabel?: string;
+    buttonPosition?: "top" | "bottom" | "both";
     /**
      * fixed length list
      */
@@ -73,4 +78,4 @@ export interface ArrayInputProps {
      */
     labelWidth?: string;
 }
-export declare const ArrayInput: ({ name, children, addLabel, fixedList, focusName, onAdd, arrayRef, enableSorting, disabled, readOnly, minItems, ...rest }: ArrayInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ArrayInput: ({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.22",
+  "version": "1.0.0-beta.24",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -39,8 +39,8 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.22",
-    "@react-fabric/utilities": "^1.0.0-beta.22",
+    "@react-fabric/core": "^1.0.0-beta.24",
+    "@react-fabric/utilities": "^1.0.0-beta.24",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -60,5 +60,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "71904746bcfbbb6b4ee39c5fc7a00c8f4a18a052"
+  "gitHead": "ccdec75c17dcc549e7a0cad3fd1fda2001c5f990"
 }

package/src/input/ArrayInput.tsx

@@ -23,8 +23,14 @@
 
 import { DndContext, type DragEndEvent } from "@dnd-kit/core";
 import { SortableContext, useSortable } from "@dnd-kit/sortable";
-import { Button, CoreIcons, Icon, Tooltip } from "@react-fabric/core";
-import { cloneChildren, isString } from "@react-fabric/utilities";
+import {
+  Button,
+  cloneChildren,
+  CoreIcons,
+  Icon,
+  Tooltip,
+} from "@react-fabric/core";
+import { isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
@@ -76,6 +82,10 @@ export interface ArrayInputProps {
    * minimum required length
    */
   minItems?: number;
+  /**
+   * maximum length
+   */
+  maxItems?: number;
   /**
    * field name to focus on add
    */
@@ -91,6 +101,7 @@ export interface ArrayInputProps {
    * add item button label
    */
   addLabel?: string;
+  buttonPosition?: "top" | "bottom" | "both";
   /**
    * fixed length list
    */
@@ -124,12 +135,14 @@ export const ArrayInput = ({
   addLabel,
   fixedList,
   focusName = "",
+  buttonPosition = "bottom",
   onAdd,
   arrayRef,
   enableSorting,
   disabled = false,
   readOnly = false,
   minItems = 0,
+  maxItems = Number.MAX_SAFE_INTEGER,
   ...rest
 }: ArrayInputProps) => {
   const { t } = useTranslation("form");
@@ -239,8 +252,47 @@ export const ArrayInput = ({
   // @ts-expect-error ignore
   SortableItem.displayName = "SortableItem";
 
+  const addButton = useMemo(
+    () => (
+      <div className="flex justify-end">
+        <Tooltip
+          color="danger"
+          content={
+            isString(error)
+              ? `${error}`
+              : (t(
+                  error?.key,
+                  error?.values
+                    ? {
+                        ...error?.values,
+                        label: t(
+                          error.values?.label ?? "form:badkey",
+                          error.values?.path,
+                        ),
+                      }
+                    : {},
+                ) as string)
+          }
+        >
+          <Button
+            aria-label="Add item"
+            icon={CoreIcons.insert}
+            onClick={() => handleAdd(onAdd?.())}
+            data-invalid={!!error}
+            disabled={!!disabled || readOnly || fields.length < maxItems}
+            className={classNames(classes.addButton, "me-10")}
+          >
+            {addLabel ?? t("addArray")}
+          </Button>
+        </Tooltip>
+      </div>
+    ),
+    [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems],
+  );
+
   return (
     <div className={classes.arrayInput}>
+      {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
       <FieldWrapper {...rest}>
         <Wrapper>
           {fields.map((item, index) => (
@@ -291,40 +343,7 @@ export const ArrayInput = ({
           ))}
         </Wrapper>
       </FieldWrapper>
-      {!fixedList && onAdd && (
-        <div className="flex justify-end">
-          <Tooltip
-            color="danger"
-            content={
-              isString(error)
-                ? `${error}`
-                : (t(
-                    error?.key,
-                    error?.values
-                      ? {
-                          ...error?.values,
-                          label: t(
-                            error.values?.label ?? "form:badkey",
-                            error.values?.path,
-                          ),
-                        }
-                      : {},
-                  ) as string)
-            }
-          >
-            <Button
-              aria-label="Add item"
-              icon={CoreIcons.insert}
-              onClick={() => handleAdd(onAdd())}
-              data-invalid={!!error}
-              disabled={!!disabled || readOnly}
-              className={classNames(classes.addButton, "me-10")}
-            >
-              {addLabel ?? t("addArray")}
-            </Button>
-          </Tooltip>
-        </div>
-      )}
+      {!fixedList && onAdd && buttonPosition !== "top" && addButton}
     </div>
   );
 };

package/src/input/Field.tsx

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cloneChildren } from "@react-fabric/core";
 import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
-import { cloneChildren } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { cloneElement } from "react";
 import classes from "../internal/Field.module.css";

package/src/input/RadioGroup.tsx

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { cloneChildren } from "@react-fabric/core";
 import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
-import { cloneChildren } from "@react-fabric/utilities";
 import { cloneElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 import { type Radio } from "./Radio";

package/src/select/Options.tsx

@@ -93,7 +93,7 @@ export const Options = ({
             >
               <Trans
                 i18nKey="form:select.createOption"
-                values={{ query: item.value }}
+                values={{ query: item.value ?? item }}
                 components={[<strong key="t0">query</strong>]}
               />
             </div>

package/src/select/Select.tsx

@@ -172,6 +172,9 @@ export const Select = <T extends AnyObject = string>({
             return false;
           } else if (state.query) {
             handleQuery("");
+            evt.preventDefault();
+            evt.stopPropagation();
+            return false;
           } else {
             onEnterPressed?.(evt);
           }

package/src/select/useSelect.tsx

@@ -232,7 +232,7 @@ export const useSelect = ({
         if (allowCreate && action.query)
           newState.items.push({
             ___create___: true,
-            value: createOption(action.query),
+            value: action.query,
           });
         Object.entries(grouped).forEach(([key, list]) => {
           if (key) {
@@ -297,7 +297,7 @@ export const useSelect = ({
               ? createOption(item)
               : undefined;
           const hasValue = options.find(
-            (opt: AnyObject) => (opt[valueProperty] ?? opt) === deferred,
+            (opt: AnyObject) => (opt[valueProperty] ?? opt) === item,
           );
           if (!hasValue && newOption) {
             optionsRef.current.push(newOption);