@react-fabric/form 1.0.0-beta.46 → 1.0.0-beta.47

package/dist/cjs/input/ArrayInput.js

@@ -5,17 +5,17 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var core$1 = require('@react-fabric/core');
-var utilities$1 = require('@react-fabric/utilities');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var reactHookForm = require('react-hook-form');
 var reactI18next = require('react-i18next');
 var FieldWrapper = require('../internal/FieldWrapper.js');
 var modifiers = require('@dnd-kit/modifiers');
-var utilities = require('@dnd-kit/utilities');
+var utilities$1 = require('@dnd-kit/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["name", "children", "addLabel", "fixedList", "focusName", "buttonPosition", "onAdd", "arrayRef", "enableSorting", "disabled", "readOnly", "minItems", "maxItems"];
+var _excluded = ["name", "children", "addLabel", "fixedList", "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) {
@@ -28,6 +28,9 @@ var ArrayInput = function ArrayInput(_ref) {
     _ref$buttonPosition = _ref.buttonPosition,
     buttonPosition = _ref$buttonPosition === void 0 ? "bottom" : _ref$buttonPosition,
     onAdd = _ref.onAdd,
+    onRemove = _ref.onRemove,
+    onBeforeRemove = _ref.onBeforeRemove,
+    canRemove = _ref.canRemove,
     arrayRef = _ref.arrayRef,
     enableSorting = _ref.enableSorting,
     _ref$disabled = _ref.disabled,
@@ -45,6 +48,7 @@ var ArrayInput = function ArrayInput(_ref) {
   if (!(form !== null && form !== void 0 && form.control)) throw new Error("ArrayInput must be contained within a Form element");
   var _useFieldArray = reactHookForm.useFieldArray({
       name: name,
+      keyName: "__ID__",
       control: form.control
     }),
     fields = _useFieldArray.fields,
@@ -61,6 +65,15 @@ var ArrayInput = function ArrayInput(_ref) {
       form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
     }, 100);
   }, [name, fields, focusName]);
+  var handleRemove = react.useCallback(function (item, index) {
+    var ret = onBeforeRemove === null || onBeforeRemove === void 0 ? void 0 : onBeforeRemove(item, index);
+    void Promise.resolve(ret).then(function (b) {
+      if (!utilities.isFalse(b)) {
+        remove(index);
+        onRemove === null || onRemove === void 0 || onRemove(item, index);
+      }
+    });
+  }, [remove, onRemove, onBeforeRemove]);
   react.useImperativeHandle(arrayRef, function () {
     return {
       addItem: handleAdd,
@@ -72,7 +85,7 @@ var ArrayInput = function ArrayInput(_ref) {
     if (enableSorting) {
       // pass id list to dnd context
       var idMap = fields.map(function (item) {
-        return item.id;
+        return item.__ID__;
       });
       var handleDragEnd = function handleDragEnd(e) {
         if (e.over && e.active.id !== e.over.id) {
@@ -113,7 +126,7 @@ var ArrayInput = function ArrayInput(_ref) {
         className: className,
         ref: setNodeRef,
         style: {
-          transform: utilities.CSS.Transform.toString(transform),
+          transform: utilities$1.CSS.Transform.toString(transform),
           transition: transition
         },
         children: [/*#__PURE__*/jsxRuntime.jsx(core$1.Icon, _objectSpread(_objectSpread({
@@ -135,7 +148,7 @@ var ArrayInput = function ArrayInput(_ref) {
       className: "flex justify-end",
       children: /*#__PURE__*/jsxRuntime.jsx(core$1.Tooltip, {
         color: "danger-200",
-        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), {}, {
+        content: utilities.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, {
@@ -163,7 +176,7 @@ var ArrayInput = function ArrayInput(_ref) {
       children: /*#__PURE__*/jsxRuntime.jsx(Wrapper, {
         children: fields.map(function (item, index) {
           return /*#__PURE__*/jsxRuntime.jsxs(SortableItem, {
-            id: item.id,
+            id: item.__ID__,
             className: "flex items-center flex-nowrap gap-2 mb-1",
             children: [typeof children === "function" ? children({
               index: index,
@@ -185,12 +198,16 @@ var ArrayInput = function ArrayInput(_ref) {
               color: "danger",
               variant: "link",
               className: "self-end",
-              disabled: disabled || readOnly || fields.length <= minItems,
+              disabled: disabled || readOnly || fields.length <= minItems || (canRemove === null || canRemove === void 0 ? void 0 : canRemove({
+                item: item,
+                index: index,
+                lastItem: index + 1 === fields.length
+              })) !== false,
               onClick: function onClick() {
-                return remove(index);
+                return handleRemove(item, index);
               }
             })]
-          }, item.id);
+          }, item.__ID__);
         })
       })
     })), !fixedList && onAdd && buttonPosition !== "top" && addButton]

package/dist/esm/input/ArrayInput.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { DndContext } from '@dnd-kit/core';
 import { SortableContext, useSortable } from '@dnd-kit/sortable';
 import { Icon, CoreIcons, Tooltip, Button, cloneChildren } from '@react-fabric/core';
-import { isString } from '@react-fabric/utilities';
+import { isFalse, isString } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, useCallback, useImperativeHandle, cloneElement } from 'react';
 import { useFormContext, useFieldArray } from 'react-hook-form';
@@ -15,7 +15,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", "arrayRef", "enableSorting", "disabled", "readOnly", "minItems", "maxItems"];
+var _excluded = ["name", "children", "addLabel", "fixedList", "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) {
@@ -28,6 +28,9 @@ var ArrayInput = function ArrayInput(_ref) {
     _ref$buttonPosition = _ref.buttonPosition,
     buttonPosition = _ref$buttonPosition === void 0 ? "bottom" : _ref$buttonPosition,
     onAdd = _ref.onAdd,
+    onRemove = _ref.onRemove,
+    onBeforeRemove = _ref.onBeforeRemove,
+    canRemove = _ref.canRemove,
     arrayRef = _ref.arrayRef,
     enableSorting = _ref.enableSorting,
     _ref$disabled = _ref.disabled,
@@ -45,6 +48,7 @@ var ArrayInput = function ArrayInput(_ref) {
   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,
@@ -61,6 +65,15 @@ var ArrayInput = function ArrayInput(_ref) {
       form.setFocus("".concat(name, ".").concat(fields.length).concat(focusName ? "." + focusName : ""));
     }, 100);
   }, [name, fields, 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,
@@ -72,7 +85,7 @@ var ArrayInput = function ArrayInput(_ref) {
     if (enableSorting) {
       // pass id list to dnd context
       var idMap = fields.map(function (item) {
-        return item.id;
+        return item.__ID__;
       });
       var handleDragEnd = function handleDragEnd(e) {
         if (e.over && e.active.id !== e.over.id) {
@@ -163,7 +176,7 @@ var ArrayInput = function ArrayInput(_ref) {
       children: /*#__PURE__*/jsx(Wrapper, {
         children: fields.map(function (item, index) {
           return /*#__PURE__*/jsxs(SortableItem, {
-            id: item.id,
+            id: item.__ID__,
             className: "flex items-center flex-nowrap gap-2 mb-1",
             children: [typeof children === "function" ? children({
               index: index,
@@ -185,12 +198,16 @@ var ArrayInput = function ArrayInput(_ref) {
               color: "danger",
               variant: "link",
               className: "self-end",
-              disabled: disabled || readOnly || fields.length <= minItems,
+              disabled: disabled || readOnly || fields.length <= minItems || (canRemove === null || canRemove === void 0 ? void 0 : canRemove({
+                item: item,
+                index: index,
+                lastItem: index + 1 === fields.length
+              })) !== false,
               onClick: function onClick() {
-                return remove(index);
+                return handleRemove(item, index);
               }
             })]
-          }, item.id);
+          }, item.__ID__);
         })
       })
     })), !fixedList && onAdd && buttonPosition !== "top" && addButton]

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

@@ -1,5 +1,5 @@
 import { type ReactNode, type Ref } from "react";
-export interface ArrayInputProps {
+export interface ArrayInputProps<T extends AnyObject = string> {
     /**
      * input label
      */
@@ -58,13 +58,29 @@ export interface ArrayInputProps {
      */
     fixedList?: boolean;
     arrayRef?: Ref<{
-        addItem: (item: AnyObject) => void;
+        addItem: (item: T) => void;
         removeItem: (idx: number) => void;
     }>;
     /**
-     * Add item
+     * add new item
      */
     onAdd?: () => AnyObject;
+    /**
+     * on item remove
+     */
+    onRemove?: (item: T, idx: number) => void;
+    /**
+     * before item remove
+     */
+    onBeforeRemove?: (item: T, idx: number) => Promise<boolean> | boolean;
+    /**
+     * can remove item
+     */
+    canRemove?: (props: {
+        item: T;
+        index: number;
+        lastItem: boolean;
+    }) => boolean;
     /**
      * field width
      */
@@ -78,4 +94,4 @@ export interface ArrayInputProps {
      */
     labelWidth?: string;
 }
-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;
+export declare const ArrayInput: <T extends unknown = 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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/form",
-  "version": "1.0.0-beta.46",
+  "version": "1.0.0-beta.47",
   "description": "RUF: Form package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -41,9 +41,9 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@floating-ui/react": "^0.26.24",
     "@hookform/resolvers": "^3.9.0",
-    "@react-fabric/core": "^1.0.0-beta.46",
-    "@react-fabric/date": "^1.0.0-beta.46",
-    "@react-fabric/utilities": "^1.0.0-beta.46",
+    "@react-fabric/core": "^1.0.0-beta.47",
+    "@react-fabric/date": "^1.0.0-beta.47",
+    "@react-fabric/utilities": "^1.0.0-beta.47",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "react-color": "^2.19.3",
@@ -63,5 +63,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "0dfc20b9c84712bb1cb5205c22464e8a1eb2341c"
+  "gitHead": "832a1bce055337127ba17c505731f419248cc15e"
 }

package/src/input/ArrayInput.tsx

@@ -30,7 +30,7 @@ import {
   Icon,
   Tooltip,
 } from "@react-fabric/core";
-import { isString } from "@react-fabric/utilities";
+import { isFalse, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import {
   cloneElement,
@@ -48,7 +48,7 @@ import { FieldWrapper } from "../internal/FieldWrapper";
 import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
 
-export interface ArrayInputProps {
+export interface ArrayInputProps<T extends AnyObject = string> {
   /**
    * input label
    */
@@ -107,13 +107,25 @@ export interface ArrayInputProps {
    */
   fixedList?: boolean;
   arrayRef?: Ref<{
-    addItem: (item: AnyObject) => void;
+    addItem: (item: T) => void;
     removeItem: (idx: number) => void;
   }>;
   /**
-   * Add item
+   * add new item
    */
   onAdd?: () => AnyObject;
+  /**
+   * on item remove
+   */
+  onRemove?: (item: T, idx: number) => void;
+  /**
+   * before item remove
+   */
+  onBeforeRemove?: (item: T, idx: number) => Promise<boolean> | boolean;
+  /**
+   * can remove item
+   */
+  canRemove?: (props: { item: T; index: number; lastItem: boolean }) => boolean;
 
   /**
    * field width
@@ -129,7 +141,7 @@ export interface ArrayInputProps {
   labelWidth?: string;
 }
 
-export const ArrayInput = ({
+export const ArrayInput = <T extends AnyObject = string>({
   name,
   children,
   addLabel,
@@ -137,6 +149,9 @@ export const ArrayInput = ({
   focusName = "",
   buttonPosition = "bottom",
   onAdd,
+  onRemove,
+  onBeforeRemove,
+  canRemove,
   arrayRef,
   enableSorting,
   disabled = false,
@@ -144,7 +159,7 @@ export const ArrayInput = ({
   minItems = 0,
   maxItems = Number.MAX_SAFE_INTEGER,
   ...rest
-}: ArrayInputProps) => {
+}: ArrayInputProps<T>) => {
   const { t } = useTranslation("form");
   const form = useFormContext();
 
@@ -153,6 +168,7 @@ export const ArrayInput = ({
 
   const { fields, append, remove, move } = useFieldArray({
     name,
+    keyName: "__ID__",
     control: form.control,
   });
 
@@ -164,7 +180,7 @@ export const ArrayInput = ({
   );
 
   const handleAdd = useCallback(
-    (item: AnyObject) => {
+    (item: T) => {
       append(item);
       setTimeout(() => {
         form.setFocus(
@@ -175,6 +191,19 @@ export const ArrayInput = ({
     [name, fields, focusName],
   );
 
+  const handleRemove = useCallback(
+    (item: T, index: number) => {
+      const ret = onBeforeRemove?.(item, index);
+      void Promise.resolve(ret).then((b) => {
+        if (!isFalse(b)) {
+          remove(index);
+          onRemove?.(item, index);
+        }
+      });
+    },
+    [remove, onRemove, onBeforeRemove],
+  );
+
   useImperativeHandle(arrayRef, () => ({
     addItem: handleAdd,
     removeItem: remove,
@@ -184,7 +213,7 @@ export const ArrayInput = ({
     ({ children }: PropsWithChildren) => {
       if (enableSorting) {
         // pass id list to dnd context
-        const idMap = fields.map((item) => item.id);
+        const idMap = fields.map((item) => item.__ID__);
         const handleDragEnd = (e: DragEndEvent) => {
           if (e.over && e.active.id !== e.over.id) {
             // find index of item and drop over
@@ -304,8 +333,8 @@ export const ArrayInput = ({
         <Wrapper>
           {fields.map((item, index) => (
             <SortableItem
-              key={item.id}
-              id={item.id}
+              key={item.__ID__}
+              id={item.__ID__}
               className="flex items-center flex-nowrap gap-2 mb-1"
             >
               {typeof children === "function"
@@ -342,8 +371,17 @@ export const ArrayInput = ({
                   color="danger"
                   variant="link"
                   className="self-end"
-                  disabled={disabled || readOnly || fields.length <= minItems}
-                  onClick={() => remove(index)}
+                  disabled={
+                    disabled ||
+                    readOnly ||
+                    fields.length <= minItems ||
+                    canRemove?.({
+                      item: item as T,
+                      index,
+                      lastItem: index + 1 === fields.length,
+                    }) !== false
+                  }
+                  onClick={() => handleRemove(item as T, index)}
                 />
               )}
             </SortableItem>