@react-fabric/form 1.0.0-beta.57 → 1.0.0-beta.58

package/css/_field.css

@@ -68,6 +68,7 @@
     & input,
     & textarea {
       max-width: 100%;
+      line-height: 1;
     }
 
     & > input[type="number"] + .inputClear {

package/dist/cjs/form/Form.js

@@ -165,5 +165,29 @@ var Form = function Form(_ref) {
     }))
   }));
 };
+var useForm = function useForm() {
+  var _useFormContext = reactHookForm.useFormContext(),
+    formState = _useFormContext.formState,
+    getValues = _useFormContext.getValues,
+    setValue = _useFormContext.setValue,
+    watch = _useFormContext.watch,
+    reset = _useFormContext.reset,
+    resetField = _useFormContext.resetField,
+    setError = _useFormContext.setError,
+    setFocus = _useFormContext.setFocus;
+  var values = reactHookForm.useWatch();
+  return {
+    values: _objectSpread(_objectSpread({}, values), getValues()),
+    formState: formState,
+    getValues: getValues,
+    setValue: setValue,
+    watch: watch,
+    reset: reset,
+    resetField: resetField,
+    setError: setError,
+    setFocus: setFocus
+  };
+};
 
 exports.Form = Form;
+exports.useForm = useForm;

package/dist/cjs/index.js

@@ -35,6 +35,7 @@ var Select = require('./select/Select.js');
 
 exports.Controller = Controller.Controller;
 exports.Form = Form.Form;
+exports.useForm = Form.useForm;
 exports.SchemaEditor = SchemaEditor.SchemaEditor;
 exports.useFileUploader = useFileUploader.useFileUploader;
 exports.useFormBuilder = useFormBuilder.useFormBuilder;

package/dist/cjs/input/ArrayInput.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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');
@@ -15,7 +16,7 @@ var modifiers = require('@dnd-kit/modifiers');
 var utilities$1 = require('@dnd-kit/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["name", "children", "addLabel", "fixedList", "focusName", "buttonPosition", "onAdd", "onRemove", "onBeforeRemove", "canRemove", "arrayRef", "enableSorting", "disabled", "readOnly", "minItems", "maxItems"];
+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; }
 /**
@@ -61,7 +62,6 @@ var ArrayInput = function ArrayInput(_ref) {
   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,
@@ -94,11 +94,35 @@ var ArrayInput = function ArrayInput(_ref) {
     append = _useFieldArray.append,
     remove = _useFieldArray.remove,
     move = _useFieldArray.move;
+  var _useState = react.useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialList = _useState2[0],
+    setInitialList = _useState2[1];
+  react.useEffect(function () {
+    setInitialList(fields.map(function (f) {
+      return f.__ID__;
+    }));
+  }, []);
   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 removeCheck = react.useCallback(function (item, index) {
+    if (canRemove === false) return false;
+    if (canRemove === "newonly") {
+      return initialList.includes(item.__ID__) ? false : true;
+    }
+    if (typeof canRemove === "function") {
+      return canRemove({
+        item: item,
+        index: index,
+        lastItem: index + 1 === fields.length
+      });
+    }
+    return true;
+  }, [canRemove, initialList, fields]);
   var handleAdd = react.useCallback(function (item) {
+    if (!item) return;
     append(item);
     setTimeout(function () {
       form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
@@ -199,18 +223,18 @@ var ArrayInput = function ArrayInput(_ref) {
           },
           "data-invalid": !!error,
           disabled: !!disabled || readOnly || fields.length > maxItems,
-          className: classNames("fabric-addButton", "me-10"),
-          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
+          className: classNames("fabric-addButton", canRemove !== false && "me-10"),
+          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("form:addArray")
         })
       })
     });
-  }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
+  }, [error, fields, handleAdd, canRemove, disabled, readOnly, addLabel, maxItems]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "fabric-arrayInput",
     children: [/*#__PURE__*/jsxRuntime.jsx(FieldWrapper.FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
       appendLabel: /*#__PURE__*/jsxRuntime.jsx("div", {
         className: "-me-2",
-        children: !fixedList && onAdd && buttonPosition !== "bottom" && addButton
+        children: onAdd && buttonPosition !== "bottom" && addButton
       }),
       children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
         children: fields.map(function (item, index) {
@@ -219,6 +243,7 @@ var ArrayInput = function ArrayInput(_ref) {
             className: "flex items-center flex-nowrap gap-2 mb-1",
             children: [typeof children === "function" ? children({
               index: index,
+              item: item,
               name: "".concat(name, ".").concat(index)
             }) : core$1.cloneChildren(children, function (child) {
               return /*#__PURE__*/react.cloneElement(child, Object.assign({
@@ -231,17 +256,13 @@ var ArrayInput = function ArrayInput(_ref) {
                 required: undefined,
                 appendLabel: undefined
               }));
-            }), !fixedList && /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
+            }), canRemove !== false && /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
               "aria-label": "Remove item",
               icon: core$1.CoreIcons.remove,
               color: "danger",
               variant: "link",
               className: "self-end",
-              disabled: disabled || readOnly || fields.length <= minItems || (canRemove === null || canRemove === void 0 ? void 0 : canRemove({
-                item: item,
-                index: index,
-                lastItem: index + 1 === fields.length
-              })) !== false,
+              disabled: disabled || readOnly || fields.length <= minItems || removeCheck(item, index) === false,
               onClick: function onClick() {
                 return handleRemove(item, index);
               }
@@ -249,7 +270,7 @@ var ArrayInput = function ArrayInput(_ref) {
           }, item.__ID__);
         })
       })
-    })), !fixedList && onAdd && buttonPosition !== "top" && addButton]
+    })), onAdd && buttonPosition !== "top" && addButton]
   });
 };
 

package/dist/cjs/input/AvatarInput.js

@@ -9,9 +9,10 @@ var core = require('@react-fabric/core');
 var react = require('react');
 var useFileUploader = require('../hooks/useFileUploader.js');
 var Hidden = require('./Hidden.js');
+var classNames = require('classnames');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["size", "avatarName", "value", "defaultValue", "fileUrl", "uploadHandler"];
+var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -27,8 +28,12 @@ var AvatarInput = function AvatarInput(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "6rem" : _ref$size,
     avatarName = _ref.avatarName,
+    avatarClassName = _ref.avatarClassName,
     value = _ref.value,
+    rounded = _ref.rounded,
     defaultValue = _ref.defaultValue,
+    fallbackIcon = _ref.fallbackIcon,
+    variant = _ref.variant,
     fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -86,13 +91,17 @@ var AvatarInput = function AvatarInput(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: "flex flex-nowrap items-end overflow-hidden",
     children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "inline-block leading-none rounded-full relative outline overflow-hidden",
+      className: classNames("inline-block leading-none relative outline overflow-hidden", rounded && "rounded-full", !rounded && "rounded"),
       children: [/*#__PURE__*/jsxRuntime.jsx(core.Avatar, {
         name: avatarName !== null && avatarName !== void 0 ? avatarName : "temp",
         size: size,
-        avatar: base64
+        avatar: base64,
+        rounded: rounded,
+        variant: variant,
+        fallbackIcon: fallbackIcon,
+        className: avatarClassName
       }), /*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: "absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1",
+        className: "absolute inset-x-0 bottom-0 cursor-pointer opacity-50 bg-black/50 hover:opacity-90 text-white text-xs text-center py-1",
         children: [/*#__PURE__*/jsxRuntime.jsx("span", {
           children: "Edit"
         }), /*#__PURE__*/jsxRuntime.jsx("input", {

package/dist/cjs/select/DualList.js

@@ -190,36 +190,44 @@ var DualList = function DualList(_ref) {
           vertical: true,
           className: "outline overflow-hidden bg-base",
           children: [/*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll to top",
             onClick: moveAllLeft,
-            icon: core$1.CoreIcons.chevronsLeft,
+            icon: {
+              icon: core$1.CoreIcons.chevronsLeft,
+              rtlFlip: true
+            },
             disabled: !rightOptions.length
           }), /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll up",
             onClick: moveRightSelected,
-            icon: core$1.CoreIcons.chevronLeft,
+            icon: {
+              icon: core$1.CoreIcons.chevronLeft,
+              rtlFlip: true
+            },
             disabled: !rightSelected.length
           }), /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll down",
             onClick: moveLeftSelected,
-            icon: core$1.CoreIcons.chevronRight,
+            icon: {
+              icon: core$1.CoreIcons.chevronRight,
+              rtlFlip: true
+            },
             disabled: !leftSelected.length
           }), /*#__PURE__*/jsxRuntime.jsx(core$1.Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll to bottom",
             onClick: moveAllRight,
-            icon: core$1.CoreIcons.chevronsRight,
+            icon: {
+              icon: core$1.CoreIcons.chevronsRight,
+              rtlFlip: true
+            },
             disabled: !leftOptions.length
           })]
         })

package/dist/esm/form/Form.js

@@ -9,7 +9,7 @@ import { yupResolver } from '@hookform/resolvers/yup';
 import { useDebounce } from '@react-fabric/core';
 import { EMPTY_OBJECT } from '@react-fabric/utilities';
 import { useRef, useTransition, useEffect, useCallback, useImperativeHandle } from 'react';
-import { useForm, FormProvider } from 'react-hook-form';
+import { useForm as useForm$1, FormProvider, useFormContext, useWatch } from 'react-hook-form';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 var _excluded = ["formRef", "schema", "children", "defaultValues", "onSubmit", "onChange"];
@@ -61,7 +61,7 @@ var Form = function Form(_ref) {
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef(null);
-  var form = useForm({
+  var form = useForm$1({
     shouldFocusError: true,
     resolver: schema && yupResolver(schema),
     defaultValues: defaultValues
@@ -165,5 +165,28 @@ var Form = function Form(_ref) {
     }))
   }));
 };
+var useForm = function useForm() {
+  var _useFormContext = useFormContext(),
+    formState = _useFormContext.formState,
+    getValues = _useFormContext.getValues,
+    setValue = _useFormContext.setValue,
+    watch = _useFormContext.watch,
+    reset = _useFormContext.reset,
+    resetField = _useFormContext.resetField,
+    setError = _useFormContext.setError,
+    setFocus = _useFormContext.setFocus;
+  var values = useWatch();
+  return {
+    values: _objectSpread(_objectSpread({}, values), getValues()),
+    formState: formState,
+    getValues: getValues,
+    setValue: setValue,
+    watch: watch,
+    reset: reset,
+    resetField: resetField,
+    setError: setError,
+    setFocus: setFocus
+  };
+};
 
-export { Form };
+export { Form, useForm };

package/dist/esm/index.js

@@ -2,7 +2,7 @@
 
 import './i18n/index.js';
 export { Controller } from './form/Controller.js';
-export { Form } from './form/Form.js';
+export { Form, useForm } from './form/Form.js';
 export { SchemaEditor } from './builder/SchemaEditor.js';
 export { useFileUploader } from './hooks/useFileUploader.js';
 export { useFormBuilder } from './hooks/useFormBuilder.js';

package/dist/esm/input/ArrayInput.js

@@ -1,13 +1,14 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+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, Tooltip, Button, cloneChildren } from '@react-fabric/core';
 import { isFalse, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo, useCallback, useImperativeHandle, cloneElement } from 'react';
+import { useState, useEffect, useMemo, useCallback, useImperativeHandle, cloneElement } from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { FieldWrapper } from '../internal/FieldWrapper.js';
@@ -15,7 +16,7 @@ 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", "buttonPosition", "onAdd", "onRemove", "onBeforeRemove", "canRemove", "arrayRef", "enableSorting", "disabled", "readOnly", "minItems", "maxItems"];
+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; }
 /**
@@ -61,7 +62,6 @@ var ArrayInput = function ArrayInput(_ref) {
   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,
@@ -94,11 +94,35 @@ var ArrayInput = function ArrayInput(_ref) {
     append = _useFieldArray.append,
     remove = _useFieldArray.remove,
     move = _useFieldArray.move;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    initialList = _useState2[0],
+    setInitialList = _useState2[1];
+  useEffect(function () {
+    setInitialList(fields.map(function (f) {
+      return f.__ID__;
+    }));
+  }, []);
   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 removeCheck = useCallback(function (item, index) {
+    if (canRemove === false) return false;
+    if (canRemove === "newonly") {
+      return initialList.includes(item.__ID__) ? false : true;
+    }
+    if (typeof canRemove === "function") {
+      return canRemove({
+        item: item,
+        index: index,
+        lastItem: index + 1 === fields.length
+      });
+    }
+    return true;
+  }, [canRemove, initialList, fields]);
   var handleAdd = useCallback(function (item) {
+    if (!item) return;
     append(item);
     setTimeout(function () {
       form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
@@ -199,18 +223,18 @@ var ArrayInput = function ArrayInput(_ref) {
           },
           "data-invalid": !!error,
           disabled: !!disabled || readOnly || fields.length > maxItems,
-          className: classNames("fabric-addButton", "me-10"),
-          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("addArray")
+          className: classNames("fabric-addButton", canRemove !== false && "me-10"),
+          children: addLabel !== null && addLabel !== void 0 ? addLabel : t("form:addArray")
         })
       })
     });
-  }, [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems]);
+  }, [error, fields, handleAdd, canRemove, disabled, readOnly, addLabel, maxItems]);
   return /*#__PURE__*/jsxs("div", {
     className: "fabric-arrayInput",
     children: [/*#__PURE__*/jsx(FieldWrapper, _objectSpread(_objectSpread({}, rest), {}, {
       appendLabel: /*#__PURE__*/jsx("div", {
         className: "-me-2",
-        children: !fixedList && onAdd && buttonPosition !== "bottom" && addButton
+        children: onAdd && buttonPosition !== "bottom" && addButton
       }),
       children: /*#__PURE__*/jsx(Wrapper, {
         children: fields.map(function (item, index) {
@@ -219,6 +243,7 @@ var ArrayInput = function ArrayInput(_ref) {
             className: "flex items-center flex-nowrap gap-2 mb-1",
             children: [typeof children === "function" ? children({
               index: index,
+              item: item,
               name: "".concat(name, ".").concat(index)
             }) : cloneChildren(children, function (child) {
               return /*#__PURE__*/cloneElement(child, Object.assign({
@@ -231,17 +256,13 @@ var ArrayInput = function ArrayInput(_ref) {
                 required: undefined,
                 appendLabel: undefined
               }));
-            }), !fixedList && /*#__PURE__*/jsx(Button, {
+            }), canRemove !== false && /*#__PURE__*/jsx(Button, {
               "aria-label": "Remove item",
               icon: CoreIcons.remove,
               color: "danger",
               variant: "link",
               className: "self-end",
-              disabled: disabled || readOnly || fields.length <= minItems || (canRemove === null || canRemove === void 0 ? void 0 : canRemove({
-                item: item,
-                index: index,
-                lastItem: index + 1 === fields.length
-              })) !== false,
+              disabled: disabled || readOnly || fields.length <= minItems || removeCheck(item, index) === false,
               onClick: function onClick() {
                 return handleRemove(item, index);
               }
@@ -249,7 +270,7 @@ var ArrayInput = function ArrayInput(_ref) {
           }, item.__ID__);
         })
       })
-    })), !fixedList && onAdd && buttonPosition !== "top" && addButton]
+    })), onAdd && buttonPosition !== "top" && addButton]
   });
 };
 

package/dist/esm/input/AvatarInput.js

@@ -9,9 +9,10 @@ import { Avatar, Icon, CoreIcons, ProgressBar } from '@react-fabric/core';
 import { useState, useEffect } from 'react';
 import { useFileUploader } from '../hooks/useFileUploader.js';
 import { HiddenInput } from './Hidden.js';
+import classNames from 'classnames';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["size", "avatarName", "value", "defaultValue", "fileUrl", "uploadHandler"];
+var _excluded = ["size", "avatarName", "avatarClassName", "value", "rounded", "defaultValue", "fallbackIcon", "variant", "fileUrl", "uploadHandler"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
@@ -27,8 +28,12 @@ var AvatarInput = function AvatarInput(_ref) {
   var _ref$size = _ref.size,
     size = _ref$size === void 0 ? "6rem" : _ref$size,
     avatarName = _ref.avatarName,
+    avatarClassName = _ref.avatarClassName,
     value = _ref.value,
+    rounded = _ref.rounded,
     defaultValue = _ref.defaultValue,
+    fallbackIcon = _ref.fallbackIcon,
+    variant = _ref.variant,
     fileUrl = _ref.fileUrl,
     uploadHandler = _ref.uploadHandler,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -86,13 +91,17 @@ var AvatarInput = function AvatarInput(_ref) {
   return /*#__PURE__*/jsxs("div", {
     className: "flex flex-nowrap items-end overflow-hidden",
     children: [/*#__PURE__*/jsxs("div", {
-      className: "inline-block leading-none rounded-full relative outline overflow-hidden",
+      className: classNames("inline-block leading-none relative outline overflow-hidden", rounded && "rounded-full", !rounded && "rounded"),
       children: [/*#__PURE__*/jsx(Avatar, {
         name: avatarName !== null && avatarName !== void 0 ? avatarName : "temp",
         size: size,
-        avatar: base64
+        avatar: base64,
+        rounded: rounded,
+        variant: variant,
+        fallbackIcon: fallbackIcon,
+        className: avatarClassName
       }), /*#__PURE__*/jsxs("div", {
-        className: "absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1",
+        className: "absolute inset-x-0 bottom-0 cursor-pointer opacity-50 bg-black/50 hover:opacity-90 text-white text-xs text-center py-1",
         children: [/*#__PURE__*/jsx("span", {
           children: "Edit"
         }), /*#__PURE__*/jsx("input", {

package/dist/esm/select/DualList.js

@@ -190,36 +190,44 @@ var DualList = function DualList(_ref) {
           vertical: true,
           className: "outline overflow-hidden bg-base",
           children: [/*#__PURE__*/jsx(Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll to top",
             onClick: moveAllLeft,
-            icon: CoreIcons.chevronsLeft,
+            icon: {
+              icon: CoreIcons.chevronsLeft,
+              rtlFlip: true
+            },
             disabled: !rightOptions.length
           }), /*#__PURE__*/jsx(Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll up",
             onClick: moveRightSelected,
-            icon: CoreIcons.chevronLeft,
+            icon: {
+              icon: CoreIcons.chevronLeft,
+              rtlFlip: true
+            },
             disabled: !rightSelected.length
           }), /*#__PURE__*/jsx(Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll down",
             onClick: moveLeftSelected,
-            icon: CoreIcons.chevronRight,
+            icon: {
+              icon: CoreIcons.chevronRight,
+              rtlFlip: true
+            },
             disabled: !leftSelected.length
           }), /*#__PURE__*/jsx(Button, {
-            rtlFlip: true,
             size: "sm",
             variant: "link",
             "aria-label": "scroll to bottom",
             onClick: moveAllRight,
-            icon: CoreIcons.chevronsRight,
+            icon: {
+              icon: CoreIcons.chevronsRight,
+              rtlFlip: true
+            },
             disabled: !leftOptions.length
           })]
         })

package/dist/types/form/Form.d.ts

@@ -65,4 +65,15 @@ export interface FormProps<K extends KeyValue = KeyValue> {
  * @see {@link https://github.com/jquense/yup} for more details on the Yup validation schema.
  */
 export declare const Form: <K extends KeyValue>({ formRef, schema, children, defaultValues, onSubmit, onChange, ...rest }: PropsWithChildren<FormProps<K>>) => import("react/jsx-runtime").JSX.Element;
+export declare const useForm: <K extends KeyValue = KeyValue>() => {
+    values: import("react-hook-form").DeepPartialSkipArrayKey<K> & K;
+    formState: FormState<K>;
+    getValues: import("react-hook-form").UseFormGetValues<K>;
+    setValue: import("react-hook-form").UseFormSetValue<K>;
+    watch: import("react-hook-form").UseFormWatch<K>;
+    reset: import("react-hook-form").UseFormReset<K>;
+    resetField: import("react-hook-form").UseFormResetField<K>;
+    setError: import("react-hook-form").UseFormSetError<K>;
+    setFocus: import("react-hook-form").UseFormSetFocus<K>;
+};
 export {};

package/dist/types/index.d.ts

@@ -1,6 +1,6 @@
 import "./i18n";
 export { Controller } from "./form/Controller";
-export { Form, type FormRef } from "./form/Form";
+export { Form, useForm, type FormRef } from "./form/Form";
 export { SchemaEditor } from "./builder/SchemaEditor";
 export { useFileUploader } from "./hooks/useFileUploader";
 export { useFormBuilder } from "./hooks/useFormBuilder";

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

@@ -47,16 +47,13 @@ export interface ArrayInputProps<T extends AnyObject = string> {
     children: React.ReactNode | ((props: {
         index: number;
         name: string;
+        item: T;
     }) => ReactNode);
     /**
      * add item button label
      */
     addLabel?: string;
     buttonPosition?: "top" | "bottom" | "both";
-    /**
-     * fixed length list
-     */
-    fixedList?: boolean;
     arrayRef?: Ref<{
         addItem: (item: T) => void;
         removeItem: (idx: number) => void;
@@ -64,7 +61,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * add new item
      */
-    onAdd?: () => AnyObject;
+    onAdd?: () => T;
     /**
      * on item remove
      */
@@ -76,11 +73,11 @@ export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * can remove item
      */
-    canRemove?: (props: {
+    canRemove?: false | "newonly" | ((props: {
         item: T;
         index: number;
         lastItem: boolean;
-    }) => boolean;
+    }) => boolean);
     /**
      * field width
      */
@@ -133,4 +130,4 @@ export interface ArrayInputProps<T extends AnyObject = string> {
  * @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.
  */
-export declare const ArrayInput: <T extends AnyObject = string>({ name, children, addLabel, fixedList, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const ArrayInput: <T extends AnyObject = string>({ name, children, addLabel, focusName, buttonPosition, onAdd, onRemove, onBeforeRemove, canRemove, arrayRef, enableSorting, disabled, readOnly, minItems, maxItems, ...rest }: ArrayInputProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
 import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { type UploadHandler } from "../hooks/useFileUploader";
+import { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 export interface Props extends RefProp {
     /**
      * field name
@@ -17,6 +18,10 @@ export interface Props extends RefProp {
      * avatar name
      */
     avatarName?: string;
+    rounded?: boolean;
+    variant?: AvatarProps["variant"];
+    fallbackIcon?: AvatarProps["fallbackIcon"];
+    avatarClassName?: AvatarProps["className"];
     size?: string | number;
     /**
      * upload handler to store file in temp storage
@@ -43,4 +48,4 @@ export interface Props extends RefProp {
  * @param {Props} props - The properties for the AvatarInput component.
  * @returns {JSX.Element} - The rendered AvatarInput component.
  */
-export declare const AvatarInput: ({ size, avatarName, value, defaultValue, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const AvatarInput: ({ size, avatarName, avatarClassName, value, rounded, defaultValue, fallbackIcon, variant, fileUrl, uploadHandler, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.57",
+  "version": "1.0.0-beta.58",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,33 +35,32 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^9.0.0",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@floating-ui/react": "^0.27.9",
-    "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.57",
-    "@react-fabric/date": "^1.0.0-beta.57",
-    "@react-fabric/utilities": "^1.0.0-beta.52",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "react-color": "^2.19.3",
-    "react-hook-form": "^7.52.1"
+    "@dnd-kit/core": "~6.3.1",
+    "@dnd-kit/modifiers": "~9.0.0",
+    "@dnd-kit/sortable": "~10.0.0",
+    "@dnd-kit/utilities": "~3.2.2",
+    "@floating-ui/react": "~0.27.16",
+    "@hookform/resolvers": "~5.2.2",
+    "@react-fabric/core": "^1.0.0-beta.58",
+    "@react-fabric/date": "^1.0.0-beta.58",
+    "@react-fabric/utilities": "^1.0.0-beta.58",
+    "classnames": "~2.5.1",
+    "color": "~5.0.2",
+    "react-color": "~2.19.3",
+    "react-hook-form": "~7.65.0"
   },
   "peerDependencies": {
-    "i18next": "^25.2.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-i18next": "^15.5.2"
+    "i18next": "~25.6.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-i18next": "~16.2.1"
   },
   "devDependencies": {
-    "@types/axios": "^0.14.0",
-    "@types/react-color": "^3.0.12"
+    "@types/react-color": "~3.0.13"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "9b596a0a8d6cecaa8479f80c495b64fb42ce739f"
+  "gitHead": "7e66f8c498e37a40e410ecafff2ea6b31505dc1a"
 }

package/src/form/Form.tsx

@@ -29,13 +29,16 @@ import {
   useEffect,
   useImperativeHandle,
   useRef,
+  useState,
   useTransition,
   type PropsWithChildren,
   type Ref,
 } from "react";
 import {
   FormProvider,
-  useForm,
+  useFormContext,
+  useForm as useFormHook,
+  useWatch,
   type DefaultValues,
   type FormState,
 } from "react-hook-form";
@@ -120,7 +123,7 @@ export const Form = <K extends KeyValue>({
   ...rest
 }: PropsWithChildren<FormProps<K>>) => {
   const ref = useRef<HTMLFormElement>(null);
-  const form = useForm<K>({
+  const form = useFormHook<K>({
     shouldFocusError: true,
     resolver: schema && (yupResolver(schema) as AnyObject),
     defaultValues: defaultValues as DefaultValues<K>,
@@ -202,3 +205,32 @@ export const Form = <K extends KeyValue>({
     </FormProvider>
   );
 };
+
+export const useForm = <K extends KeyValue = KeyValue>() => {
+  const {
+    formState,
+    getValues,
+    setValue,
+    watch,
+    reset,
+    resetField,
+    setError,
+    setFocus,
+  } = useFormContext<K>();
+  const values = useWatch<K>();
+
+  return {
+    values: {
+      ...values,
+      ...getValues(),
+    },
+    formState,
+    getValues,
+    setValue,
+    watch,
+    reset,
+    resetField,
+    setError,
+    setFocus,
+  };
+};

package/src/index.ts

@@ -24,7 +24,7 @@
 import "./i18n";
 
 export { Controller } from "./form/Controller";
-export { Form, type FormRef } from "./form/Form";
+export { Form, useForm, type FormRef } from "./form/Form";
 
 export { SchemaEditor } from "./builder/SchemaEditor";
 

package/src/input/ArrayInput.tsx

@@ -34,9 +34,12 @@ import { isFalse, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
+  use,
   useCallback,
+  useEffect,
   useImperativeHandle,
   useMemo,
+  useState,
   type PropsWithChildren,
   type ReactNode,
   type Ref,
@@ -96,16 +99,12 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   enableSorting?: boolean;
   children:
     | React.ReactNode
-    | ((props: { index: number; name: string }) => ReactNode);
+    | ((props: { index: number; name: string; item: T }) => ReactNode);
   /**
    * add item button label
    */
   addLabel?: string;
   buttonPosition?: "top" | "bottom" | "both";
-  /**
-   * fixed length list
-   */
-  fixedList?: boolean;
   arrayRef?: Ref<{
     addItem: (item: T) => void;
     removeItem: (idx: number) => void;
@@ -113,7 +112,7 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   /**
    * add new item
    */
-  onAdd?: () => AnyObject;
+  onAdd?: () => T;
   /**
    * on item remove
    */
@@ -125,7 +124,10 @@ export interface ArrayInputProps<T extends AnyObject = string> {
   /**
    * can remove item
    */
-  canRemove?: (props: { item: T; index: number; lastItem: boolean }) => boolean;
+  canRemove?:
+    | false
+    | "newonly"
+    | ((props: { item: T; index: number; lastItem: boolean }) => boolean);
 
   /**
    * field width
@@ -184,7 +186,6 @@ export const ArrayInput = <T extends AnyObject = string>({
   name,
   children,
   addLabel,
-  fixedList,
   focusName = "",
   buttonPosition = "bottom",
   onAdd,
@@ -211,6 +212,11 @@ export const ArrayInput = <T extends AnyObject = string>({
     control: form.control,
   });
 
+  const [initialList, setInitialList] = useState<string[]>([]);
+  useEffect(() => {
+    setInitialList(fields.map((f) => f.__ID__));
+  }, []);
+
   const error = useMemo<AnyObject>(
     () =>
       form.formState.errors[name]?.message ??
@@ -218,8 +224,27 @@ export const ArrayInput = <T extends AnyObject = string>({
     [form.formState.errors],
   );
 
+  const removeCheck = useCallback(
+    (item: T, index: number) => {
+      if (canRemove === false) return false;
+      if (canRemove === "newonly") {
+        return initialList.includes((item as any).__ID__) ? false : true;
+      }
+      if (typeof canRemove === "function") {
+        return canRemove({
+          item,
+          index,
+          lastItem: index + 1 === fields.length,
+        });
+      }
+      return true;
+    },
+    [canRemove, initialList, fields],
+  );
+
   const handleAdd = useCallback(
-    (item: T) => {
+    (item?: T) => {
+      if (!item) return;
       append(item);
       setTimeout(() => {
         form.setFocus(
@@ -349,14 +374,26 @@ export const ArrayInput = <T extends AnyObject = string>({
             onClick={() => handleAdd(onAdd?.())}
             data-invalid={!!error}
             disabled={!!disabled || readOnly || fields.length > maxItems}
-            className={classNames("fabric-addButton", "me-10")}
+            className={classNames(
+              "fabric-addButton",
+              canRemove !== false && "me-10",
+            )}
           >
-            {addLabel ?? t("addArray")}
+            {addLabel ?? t("form:addArray")}
           </Button>
         </Tooltip>
       </div>
     ),
-    [error, fields, handleAdd, disabled, readOnly, addLabel, maxItems],
+    [
+      error,
+      fields,
+      handleAdd,
+      canRemove,
+      disabled,
+      readOnly,
+      addLabel,
+      maxItems,
+    ],
   );
 
   return (
@@ -365,7 +402,7 @@ export const ArrayInput = <T extends AnyObject = string>({
         {...rest}
         appendLabel={
           <div className="-me-2">
-            {!fixedList && onAdd && buttonPosition !== "bottom" && addButton}
+            {onAdd && buttonPosition !== "bottom" && addButton}
           </div>
         }
       >
@@ -379,6 +416,7 @@ export const ArrayInput = <T extends AnyObject = string>({
               {typeof children === "function"
                 ? children({
                     index,
+                    item: item as any,
                     name: `${name}.${index}`,
                   })
                 : cloneChildren(children, (child: AnyObject) =>
@@ -403,7 +441,7 @@ export const ArrayInput = <T extends AnyObject = string>({
                       ),
                     ),
                   )}
-              {!fixedList && (
+              {canRemove !== false && (
                 <Button
                   aria-label="Remove item"
                   icon={CoreIcons.remove}
@@ -414,20 +452,16 @@ export const ArrayInput = <T extends AnyObject = string>({
                     disabled ||
                     readOnly ||
                     fields.length <= minItems ||
-                    canRemove?.({
-                      item: item as T,
-                      index,
-                      lastItem: index + 1 === fields.length,
-                    }) !== false
+                    removeCheck(item as any, index) === false
                   }
-                  onClick={() => handleRemove(item as T, index)}
+                  onClick={() => handleRemove(item as any, index)}
                 />
               )}
             </SortableItem>
           ))}
         </Wrapper>
       </FieldWrapper>
-      {!fixedList && onAdd && buttonPosition !== "top" && addButton}
+      {onAdd && buttonPosition !== "top" && addButton}
     </div>
   );
 };

package/src/input/AvatarInput.tsx

@@ -26,6 +26,8 @@ import { type RefProp } from "@react-fabric/core/dist/types/types";
 import { useEffect, useState } from "react";
 import { useFileUploader, type UploadHandler } from "../hooks/useFileUploader";
 import { HiddenInput } from "./Hidden";
+import { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
+import classNames from "classnames";
 
 export interface Props extends RefProp {
   /**
@@ -44,6 +46,10 @@ export interface Props extends RefProp {
    * avatar name
    */
   avatarName?: string;
+  rounded?: boolean;
+  variant?: AvatarProps["variant"];
+  fallbackIcon?: AvatarProps["fallbackIcon"];
+  avatarClassName?: AvatarProps["className"];
   size?: string | number;
   /**
    * upload handler to store file in temp storage
@@ -74,8 +80,12 @@ export interface Props extends RefProp {
 export const AvatarInput = ({
   size = "6rem",
   avatarName,
+  avatarClassName,
   value,
+  rounded,
   defaultValue,
+  fallbackIcon,
+  variant,
   fileUrl,
   uploadHandler,
   ...rest
@@ -117,9 +127,23 @@ export const AvatarInput = ({
 
   return (
     <div className="flex flex-nowrap items-end overflow-hidden">
-      <div className="inline-block leading-none rounded-full relative outline overflow-hidden">
-        <Avatar name={avatarName ?? "temp"} size={size} avatar={base64} />
-        <div className="absolute inset-x-0 bottom-0 cursor-pointer bg-black/20 hover:bg-black/50 text-white text-xs text-center py-1">
+      <div
+        className={classNames(
+          "inline-block leading-none relative outline overflow-hidden",
+          rounded && "rounded-full",
+          !rounded && "rounded",
+        )}
+      >
+        <Avatar
+          name={avatarName ?? "temp"}
+          size={size}
+          avatar={base64}
+          rounded={rounded}
+          variant={variant}
+          fallbackIcon={fallbackIcon}
+          className={avatarClassName}
+        />
+        <div className="absolute inset-x-0 bottom-0 cursor-pointer opacity-50 bg-black/50 hover:opacity-90 text-white text-xs text-center py-1">
           <span>Edit</span>
           <input
             type="file"

package/src/select/DualList.tsx

@@ -240,39 +240,35 @@ export const DualList = <T extends AnyObject = string>({
         <div className="self-center mx-2">
           <ButtonGroup vertical className="outline overflow-hidden bg-base">
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll to top"
               onClick={moveAllLeft}
-              icon={CoreIcons.chevronsLeft}
+              icon={{ icon: CoreIcons.chevronsLeft, rtlFlip: true }}
               disabled={!rightOptions.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll up"
               onClick={moveRightSelected}
-              icon={CoreIcons.chevronLeft}
+              icon={{ icon: CoreIcons.chevronLeft, rtlFlip: true }}
               disabled={!rightSelected.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll down"
               onClick={moveLeftSelected}
-              icon={CoreIcons.chevronRight}
+              icon={{ icon: CoreIcons.chevronRight, rtlFlip: true }}
               disabled={!leftSelected.length}
             />
             <Button
-              rtlFlip
               size="sm"
               variant="link"
               aria-label="scroll to bottom"
               onClick={moveAllRight}
-              icon={CoreIcons.chevronsRight}
+              icon={{ icon: CoreIcons.chevronsRight, rtlFlip: true }}
               disabled={!leftOptions.length}
             />
           </ButtonGroup>