@digigov/form 2.0.9 → 2.0.10

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Change Log - @digigov/form
 
-This log was last generated on Wed, 11 Feb 2026 14:46:37 GMT and should not be manually modified.
+<!-- This log was last generated on Thu, 05 Mar 2026 17:08:26 GMT and should not be manually modified. -->
+
+<!-- Start content -->
+
+## 2.0.10
+
+Thu, 05 Mar 2026 17:08:26 GMT
+
+### Patches
+
+- refactor ArrayDisplay and ArrayItemDisplay add deleteConfirmation prop (gpapadakis@admin.grnet.gr)
 
 ## 2.0.8
 Wed, 11 Feb 2026 14:46:37 GMT
@@ -726,4 +736,3 @@ _Version update only_
 Thu, 22 Apr 2021 12:56:25 GMT
 
 _Initial release_
-

package/FieldArray/BaseFieldArray.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { FieldArrayProps } from './index.js';
-type BaseFieldArrayProps = Omit<FieldArrayProps, 'registerFieldFocus' | 'trigger' | 'clearErrors' | 'setValue' | 'reset' | 'resetField'>;
-export declare const BaseFieldArray: React.ForwardRefExoticComponent<BaseFieldArrayProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const BaseFieldArray: React.ForwardRefExoticComponent<Omit<FieldArrayProps, "reset" | "resetField" | "setValue" | "clearErrors" | "trigger" | "registerFieldFocus"> & {
+    deleteConfirmation?: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
 export default BaseFieldArray;

package/FieldArray/BaseFieldArray.js

@@ -1,15 +1,31 @@
-import react from "react";
+import react, { useId, useRef } from "react";
 import { useFieldArray } from "react-hook-form";
+import DeleteConfirmationModal from "./DeleteConfirmationModal.js";
 import { FieldObject } from "../FieldObject/index.js";
 import { Fieldset, FieldsetLabel } from "../Fieldset/index.js";
+import { useModal } from "@digigov/ui/index.js";
 import { Card } from "@digigov/ui/content/Card/index.js";
 import { Button } from "@digigov/ui/form/Button/index.js";
-const BaseFieldArray_BaseFieldArray = /*#__PURE__*/ react.forwardRef(({ name, register, control, formState, error, getValues, Field, ...customField }, ref)=>{
+const BaseFieldArray_BaseFieldArray = /*#__PURE__*/ react.forwardRef(({ name, register, control, formState, error, getValues, Field, deleteConfirmation, ...customField }, ref)=>{
     const { append, remove } = useFieldArray({
         control,
         name
     });
     const fields = getValues(name) || [];
+    const { registerModal, open, ...modalProps } = useModal();
+    const confirmationModalId = useId();
+    const indexOfItemToDelete = useRef(null);
+    const handleRemoveClick = react.useCallback((index)=>{
+        if (deleteConfirmation) {
+            indexOfItemToDelete.current = index;
+            open(confirmationModalId);
+        } else remove(index);
+    }, [
+        deleteConfirmation,
+        open,
+        remove,
+        confirmationModalId
+    ]);
     return /*#__PURE__*/ react.createElement(react.Fragment, null, fields.map((field, index)=>/*#__PURE__*/ react.createElement(Card, {
             variant: customField.extra?.border ? 'border' : 'divider',
             key: field.id || index
@@ -26,7 +42,9 @@ const BaseFieldArray_BaseFieldArray = /*#__PURE__*/ react.forwardRef(({ name, re
             variant: customField.extra?.label.object?.deleteButtonVariant,
             type: "button",
             color: "warning",
-            onClick: ()=>remove(index),
+            onClick: ()=>{
+                handleRemoveClick(index);
+            },
             disabled: !customField?.editable
         }, customField.extra?.label.object?.delete)))), customField.editable && /*#__PURE__*/ react.createElement(Button, {
         ref: ref,
@@ -39,7 +57,11 @@ const BaseFieldArray_BaseFieldArray = /*#__PURE__*/ react.forwardRef(({ name, re
             append({});
         },
         disabled: !customField?.editable
-    }, customField.extra?.label.object?.add));
+    }, customField.extra?.label.object?.add), /*#__PURE__*/ react.createElement(DeleteConfirmationModal, {
+        ...modalProps,
+        ...registerModal(confirmationModalId),
+        remove: ()=>null !== indexOfItemToDelete.current ? remove(indexOfItemToDelete.current) : ()=>{}
+    }));
 });
 BaseFieldArray_BaseFieldArray.displayName = 'BaseFieldArray';
 const BaseFieldArray = BaseFieldArray_BaseFieldArray;

package/FieldArray/DeleteConfirmationModal.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { ModalProps } from '@digigov/ui';
+export interface DeleteConfirmationModalProps extends ModalProps {
+    remove: () => void;
+    close: () => void;
+}
+export declare const DeleteConfirmationModal: ({ remove, close, ...props }: DeleteConfirmationModalProps) => React.JSX.Element;
+export default DeleteConfirmationModal;

package/FieldArray/DeleteConfirmationModal.js

@@ -0,0 +1,29 @@
+import react, { useId } from "react";
+import { Button, Modal, ModalAction, ModalContent, ModalHeading, Paragraph } from "@digigov/ui/index.js";
+const DeleteConfirmationModal_DeleteConfirmationModal = ({ remove, close, ...props })=>{
+    const headingId = useId();
+    return /*#__PURE__*/ react.createElement(Modal, {
+        ...props,
+        "aria-labelledby": headingId
+    }, /*#__PURE__*/ react.createElement(ModalHeading, {
+        id: headingId
+    }, "Επιβεβαίωση διαγραφής"), /*#__PURE__*/ react.createElement(ModalContent, null, /*#__PURE__*/ react.createElement(Paragraph, {
+        margin: 0
+    }, "Είστε σίγουροι ότι θέλετε να διαγράψετε την εγγραφή;")), /*#__PURE__*/ react.createElement(ModalAction, null, /*#__PURE__*/ react.createElement(Button, {
+        color: "warning",
+        onClick: (e)=>{
+            e.preventDefault();
+            remove();
+            close();
+        }
+    }, "Διαγραφή"), /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        onClick: (e)=>{
+            e.preventDefault();
+            close();
+        }
+    }, "Ακύρωση")));
+};
+const DeleteConfirmationModal = DeleteConfirmationModal_DeleteConfirmationModal;
+export { DeleteConfirmationModal_DeleteConfirmationModal as DeleteConfirmationModal, DeleteConfirmationModal as default };

package/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay.js

@@ -72,7 +72,9 @@ const ArrayItemDisplay = ({ name, data, edit, remove, disabledEdit, disabledDele
     }, "Επεξεργασία"), true !== disabledDelete && /*#__PURE__*/ react.createElement(Button, {
         variant: "link",
         type: "button",
-        onClick: ()=>remove(name)
+        onClick: ()=>{
+            remove(name);
+        }
     }, "Διαγραφή")), sortable && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(SectionBreak, null), sortable && !disabled && !(isFirst && isLast) && /*#__PURE__*/ react.createElement(NormalText, {
         mb: 0
     }, "Μετακίνηση", ' ', !isFirst && /*#__PURE__*/ react.createElement(react.Fragment, null, "προς τα", ' ', /*#__PURE__*/ react.createElement(Button, {

package/FieldArray/FormDialog/ArrayDisplay/index.d.ts

@@ -9,7 +9,8 @@ export interface ArrayDisplayProps {
     onRemove: (index: number) => void;
     move: UseFieldArrayMove;
     sortable: boolean;
+    deleteConfirmation?: boolean;
     error?: any;
 }
-export declare const ArrayDisplay: ({ fieldArrayName, fieldArrayValues, ofField, customField, onEdit, onRemove, move, sortable, error, }: ArrayDisplayProps) => React.JSX.Element;
+export declare const ArrayDisplay: ({ fieldArrayName, fieldArrayValues, ofField, customField, onEdit, onRemove, move, sortable, deleteConfirmation, error, }: ArrayDisplayProps) => React.JSX.Element;
 export default ArrayDisplay;

package/FieldArray/FormDialog/ArrayDisplay/index.js

@@ -1,7 +1,27 @@
-import react from "react";
+import react, { useId, useState } from "react";
+import DeleteConfirmationModal from "../../DeleteConfirmationModal.js";
 import { ArrayContainerDisplay } from "./ArrayContainerDisplay.js";
 import { ArrayItemDisplay } from "./ArrayItemDisplay.js";
-const ArrayDisplay = ({ fieldArrayName, fieldArrayValues, ofField, customField, onEdit, onRemove, move, sortable, error })=>/*#__PURE__*/ react.createElement(ArrayContainerDisplay, {
+import { omit } from "../../../utils.js";
+import { useModal } from "@digigov/ui/index.js";
+const ArrayDisplay_ArrayDisplay = ({ fieldArrayName, fieldArrayValues, ofField, customField, onEdit, onRemove, move, sortable, deleteConfirmation, error })=>{
+    const confirmationModalId = useId();
+    const [removeCurrentModal, setRemoveCurrentModal] = useState(-1);
+    const { registerModal, open, ...modalProps } = useModal();
+    const handleRemoveClick = react.useCallback((index)=>{
+        const needsConfirmation = deleteConfirmation || customField.extra?.deleteConfirmation;
+        if (needsConfirmation) {
+            setRemoveCurrentModal(index);
+            open(confirmationModalId);
+        } else onRemove(index);
+    }, [
+        deleteConfirmation,
+        customField.extra,
+        open,
+        onRemove,
+        confirmationModalId
+    ]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(ArrayContainerDisplay, {
         fieldArrayValues: fieldArrayValues,
         ofField: ofField,
         customField: customField
@@ -17,7 +37,7 @@ const ArrayDisplay = ({ fieldArrayName, fieldArrayValues, ofField, customField,
             stackProps: customField?.extra?.stackProps,
             wordBreak: customField?.extra?.wordBreak,
             valueDisplay: customField?.extra?.valueDisplay,
-            remove: ()=>onRemove(index),
+            remove: ()=>handleRemoveClick(index),
             border: customField.extra?.border,
             move: move,
             sortable: sortable,
@@ -27,6 +47,19 @@ const ArrayDisplay = ({ fieldArrayName, fieldArrayValues, ofField, customField,
             fieldArrayValues: fieldArrayValues,
             ofField: ofField,
             customField: customField
-        })));
-const FormDialog_ArrayDisplay = ArrayDisplay;
-export { ArrayDisplay, FormDialog_ArrayDisplay as default };
+        }))), /*#__PURE__*/ react.createElement(DeleteConfirmationModal, {
+        ...omit(modalProps, [
+            'registerAction',
+            'currentOpen'
+        ]),
+        ...registerModal(confirmationModalId),
+        remove: ()=>{
+            if (-1 !== removeCurrentModal) {
+                onRemove(removeCurrentModal);
+                setRemoveCurrentModal(-1);
+            }
+        }
+    }));
+};
+const ArrayDisplay = ArrayDisplay_ArrayDisplay;
+export { ArrayDisplay_ArrayDisplay as ArrayDisplay, ArrayDisplay as default };

package/FieldArray/FormDialog/index.d.ts

@@ -14,6 +14,7 @@ export interface FormDialogProps extends FieldProps {
     resetField?: UseFormReturn['resetField'];
     sortable: boolean;
     Field: React.FC<FieldProps>;
+    deleteConfirmation?: boolean;
 }
 export declare const FormDialog: React.ForwardRefExoticComponent<FormDialogProps & React.RefAttributes<HTMLButtonElement>>;
 export default FormDialog;

package/FieldArray/FormDialog/index.js

@@ -6,7 +6,7 @@ import { useFormContext } from "../../FormContext.js";
 import { useModal } from "@digigov/ui/app/Modal/index.js";
 import { Button } from "@digigov/ui/form/Button/index.js";
 import { Hint } from "@digigov/ui/typography/Hint/index.js";
-const FormDialog = /*#__PURE__*/ react.forwardRef(({ name: fieldArrayName, control, error, getValues, Field, sortable, ...customField }, ref)=>{
+const FormDialog = /*#__PURE__*/ react.forwardRef(({ name: fieldArrayName, control, error, getValues, Field, sortable, deleteConfirmation = false, ...customField }, ref)=>{
     const [isAppending, setIsAppending] = useState(false);
     const [editingIndex, setEditingIndex] = useState(0);
     const { fields, append, remove, update, move } = useFieldArray({
@@ -181,7 +181,8 @@ const FormDialog = /*#__PURE__*/ react.forwardRef(({ name: fieldArrayName, contr
         onRemove: handleRemove,
         move: handleMove,
         sortable: sortable,
-        error: error
+        error: error,
+        deleteConfirmation: deleteConfirmation
     }), customField.extra?.editVariant !== 'display' && !customField.extra?.noAdd && /*#__PURE__*/ react.createElement("div", {
         className: customField.extra?.label.object?.addButtonVariant === 'link' ? 'px-2 py-2 bg-gray-200 border-t border-b border-gray-400' : '',
         ...customField?.extra?.label.object?.buttonGroup

package/FieldArray/index.js

@@ -49,6 +49,7 @@ const FieldArray = ({ name, trigger, register, clearErrors, control, formState,
         reset: reset,
         resetField: resetField,
         sortable: customField.extra.sortable,
+        deleteConfirmation: customField.extra?.deleteConfirmation,
         ...customField
     }) : /*#__PURE__*/ react.createElement(BaseFieldArray, {
         ref: buttonRef,
@@ -59,6 +60,7 @@ const FieldArray = ({ name, trigger, register, clearErrors, control, formState,
         error: error,
         getValues: getValues,
         Field: Field,
+        deleteConfirmation: customField.extra?.deleteConfirmation,
         ...customField
     }));
 };

package/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v2.0.9
+/** @license Digigov v2.0.10
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/lazy.d.ts

@@ -8,42 +8,12 @@ declare const _default: {
     FieldBase: import("react").LazyExoticComponent<import("react").FC<import("./internal.js").FieldBaseProps>>;
     FieldBaseContainer: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<import("./internal.js").FieldContainerProps & import("react").RefAttributes<HTMLFieldSetElement>>>;
     FieldConditional: import("react").LazyExoticComponent<import("react").FC<import("./internal.js").FieldConditionalProps>>;
-    BaseFieldArray: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<{
-        label?: import("./internal.js").FieldLabelProps | undefined;
-        trim?: boolean | undefined;
-        children?: React.ReactNode;
-        key: string;
-        disabled?: boolean | undefined;
-        autoComplete?: string | undefined;
-        maxLength?: number | undefined;
-        error?: import("react-hook-form").ErrorOption | undefined;
-        width?: string | undefined;
-        max?: number | undefined;
-        min?: number | undefined;
-        name: string;
-        placeholder?: string | undefined;
-        required?: boolean | undefined;
-        type?: ("int" | "string" | "text" | "boolean" | "email" | "uuid4" | "choice:multiple" | "choice:single" | "mobile_phone" | "date" | "datetime" | "otp" | "afm" | "amka" | "iban" | "file" | "rate" | "image" | "postal_code" | "phone_number" | "array" | "object") | undefined;
-        variant?: ("inline" | "dialog") | undefined;
-        layout?: Record<string, import("@digigov/ui/src/index.js").GridProps["xs"] | import("@digigov/ui/src/index.js").GridProps["sm"] | import("@digigov/ui/src/index.js").GridProps["md"] | import("@digigov/ui/src/index.js").GridProps["lg"] | import("@digigov/ui/src/index.js").GridProps["xl"]> | undefined;
-        Field: React.FC<import("./internal.js").FieldProps>;
-        extra?: Record<string, any> | undefined;
-        maxWidth?: string | undefined;
-        register: import("react-hook-form").UseFormReturn["register"];
-        control: import("react-hook-form").UseFormReturn["control"];
-        getValues: import("react-hook-form").UseFormReturn["getValues"];
-        component?: any;
-        condition?: Record<string, import("./internal.js").FieldCondition> | undefined;
-        controlled?: boolean | undefined;
-        editable?: boolean | undefined;
-        enabled?: boolean | undefined;
-        validators?: import("./validators/types.js").ValidatorSchema[] | undefined;
-        wrapper?: ("label" | "fieldset") | undefined;
-        maxHeight?: string | undefined;
-        formState: import("react-hook-form").UseFormReturn["formState"];
+    FieldObject: import("react").LazyExoticComponent<import("react").FC<import("./FieldObject/index.js").FieldObjectProps>>;
+    BaseFieldArray: import("react").LazyExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("./FieldArray/index.js").FieldArrayProps, "reset" | "resetField" | "setValue" | "clearErrors" | "trigger" | "registerFieldFocus"> & {
+        deleteConfirmation?: boolean;
     } & import("react").RefAttributes<HTMLButtonElement>>>;
+    DeleteConfirmationModal: import("react").LazyExoticComponent<({ remove, close, ...props }: import("./FieldArray/DeleteConfirmationModal.js").DeleteConfirmationModalProps) => import("react").JSX.Element>;
     FieldArray: import("react").LazyExoticComponent<import("react").FC<import("./FieldArray/index.js").FieldArrayProps>>;
-    FieldObject: import("react").LazyExoticComponent<import("react").FC<import("./FieldObject/index.js").FieldObjectProps>>;
     FieldsetWithContext: import("react").LazyExoticComponent<import("react").FC<{
         name: string;
     }>>;
@@ -92,6 +62,6 @@ declare const _default: {
         labels: any;
         disabled: any;
     }) => import("react").JSX.Element>;
-    ArrayDisplay: import("react").LazyExoticComponent<({ fieldArrayName, fieldArrayValues, ofField, customField, onEdit, onRemove, move, sortable, error, }: import("./FieldArray/FormDialog/ArrayDisplay/index.js").ArrayDisplayProps) => import("react").JSX.Element>;
+    ArrayDisplay: import("react").LazyExoticComponent<({ fieldArrayName, fieldArrayValues, ofField, customField, onEdit, onRemove, move, sortable, deleteConfirmation, error, }: import("./FieldArray/FormDialog/ArrayDisplay/index.js").ArrayDisplayProps) => import("react").JSX.Element>;
 };
 export default _default;

package/lazy.js

@@ -27,15 +27,18 @@ const src_lazy = {
     FieldConditional: lazy(()=>import("./Field/FieldConditional.js").then((module)=>({
                 default: module['FieldConditional']
             }))),
+    FieldObject: lazy(()=>import("./FieldObject/index.js").then((module)=>({
+                default: module['FieldObject']
+            }))),
     BaseFieldArray: lazy(()=>import("./FieldArray/BaseFieldArray.js").then((module)=>({
                 default: module['BaseFieldArray']
             }))),
+    DeleteConfirmationModal: lazy(()=>import("./FieldArray/DeleteConfirmationModal.js").then((module)=>({
+                default: module['DeleteConfirmationModal']
+            }))),
     FieldArray: lazy(()=>import("./FieldArray/index.js").then((module)=>({
                 default: module['FieldArray']
             }))),
-    FieldObject: lazy(()=>import("./FieldObject/index.js").then((module)=>({
-                default: module['FieldObject']
-            }))),
     FieldsetWithContext: lazy(()=>import("./Fieldset/FieldsetWithContext.js").then((module)=>({
                 default: module['FieldsetWithContext']
             }))),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/form",
-  "version": "2.0.9",
+  "version": "2.0.10",
   "description": "@digigov form builder",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -15,14 +15,14 @@
     "yup": "0.32.11",
     "dayjs": "1.10.4",
     "@hookform/resolvers": "5.0.1",
-    "@digigov/react-icons": "2.0.9"
+    "@digigov/react-icons": "2.0.10"
   },
   "peerDependencies": {
     "clsx": "2.1.1",
     "react": "^18.3.0 || ^19.1.0",
     "react-dom": "^18.3.0 || ^19.1.0",
-    "@digigov/ui": "2.0.9",
-    "@digigov/react-core": "2.0.9"
+    "@digigov/ui": "2.0.10",
+    "@digigov/react-core": "2.0.10"
   },
   "gitHead": "c903a46306f77f55ad7fc4d2e274006f39a6c871",
   "private": false,

package/registry.d.ts

@@ -10,9 +10,10 @@ declare const _default: {
     '@digigov/form/Field/FieldConditional': {};
     '@digigov/form/Field': {};
     '@digigov/form/Field/types': {};
+    '@digigov/form/FieldObject': {};
     '@digigov/form/FieldArray/BaseFieldArray': {};
+    '@digigov/form/FieldArray/DeleteConfirmationModal': {};
     '@digigov/form/FieldArray': {};
-    '@digigov/form/FieldObject': {};
     '@digigov/form/Fieldset/FieldsetWithContext': {};
     '@digigov/form/Fieldset': {};
     '@digigov/form/Fieldset/types': {};
@@ -49,13 +50,13 @@ declare const _default: {
     '@digigov/form/Questions/Step/types': {};
     '@digigov/form/inputs/AutoCompleteInput': {};
     '@digigov/form/inputs/Checkboxes': {};
-    '@digigov/form/inputs/DateTimeInput': {};
     '@digigov/form/inputs/DateInput': {};
+    '@digigov/form/inputs/DateTimeInput': {};
     '@digigov/form/inputs/FileInput': {};
     '@digigov/form/inputs/ImageInput': {};
     '@digigov/form/inputs/Input': {};
-    '@digigov/form/inputs/OtpInput': {};
     '@digigov/form/inputs/Label': {};
+    '@digigov/form/inputs/OtpInput': {};
     '@digigov/form/inputs/Radio': {};
     '@digigov/form/inputs/Select': {};
     '@digigov/form/validators/utils/afm': {};

package/registry.js

@@ -11,9 +11,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__Field_FieldBase_js_c624a2e3__ from "./Fie
 import * as __WEBPACK_EXTERNAL_MODULE__Field_FieldBaseContainer_js_01a670a9__ from "./Field/FieldBaseContainer.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Field_FieldConditional_js_198c9ee9__ from "./Field/FieldConditional.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Field_types_js_6ef04275__ from "./Field/types.js";
+import * as __WEBPACK_EXTERNAL_MODULE__FieldObject_index_js_3053c0b3__ from "./FieldObject/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FieldArray_BaseFieldArray_js_51879b3c__ from "./FieldArray/BaseFieldArray.js";
+import * as __WEBPACK_EXTERNAL_MODULE__FieldArray_DeleteConfirmationModal_js_c12845d4__ from "./FieldArray/DeleteConfirmationModal.js";
 import * as __WEBPACK_EXTERNAL_MODULE__FieldArray_index_js_f6888d1e__ from "./FieldArray/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__FieldObject_index_js_3053c0b3__ from "./FieldObject/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Fieldset_FieldsetWithContext_js_aa40ade4__ from "./Fieldset/FieldsetWithContext.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Fieldset_types_js_45030319__ from "./Fieldset/types.js";
 import * as __WEBPACK_EXTERNAL_MODULE__MultiplicityField_add_objects_js_bc5e12f3__ from "./MultiplicityField/add-objects.js";
@@ -48,13 +49,13 @@ import * as __WEBPACK_EXTERNAL_MODULE__Questions_Step_index_js_a5d00e0e__ from "
 import * as __WEBPACK_EXTERNAL_MODULE__Questions_Step_types_js_adca4924__ from "./Questions/Step/types.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_AutoCompleteInput_index_js_64b911d2__ from "./inputs/AutoCompleteInput/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_Checkboxes_index_js_794dd192__ from "./inputs/Checkboxes/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__inputs_DateTimeInput_index_js_c8900e1c__ from "./inputs/DateTimeInput/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_DateInput_index_js_4dd00af8__ from "./inputs/DateInput/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__inputs_DateTimeInput_index_js_c8900e1c__ from "./inputs/DateTimeInput/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_FileInput_index_js_a3efab43__ from "./inputs/FileInput/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_ImageInput_index_js_db0d371d__ from "./inputs/ImageInput/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_Input_index_js_a3d24895__ from "./inputs/Input/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__inputs_OtpInput_index_js_cf892bf0__ from "./inputs/OtpInput/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_Label_index_js_fd36dbbf__ from "./inputs/Label/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__inputs_OtpInput_index_js_cf892bf0__ from "./inputs/OtpInput/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_Radio_index_js_dd4e4535__ from "./inputs/Radio/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__inputs_Select_index_js_96a2f597__ from "./inputs/Select/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__validators_utils_afm_js_d3ce9cd4__ from "./validators/utils/afm.js";
@@ -98,9 +99,10 @@ const registry = {
     '@digigov/form/Field/FieldConditional': lazyImport(__WEBPACK_EXTERNAL_MODULE__Field_FieldConditional_js_198c9ee9__),
     '@digigov/form/Field': lazyImport(__WEBPACK_EXTERNAL_MODULE__Field_index_js_29296f3b__),
     '@digigov/form/Field/types': lazyImport(__WEBPACK_EXTERNAL_MODULE__Field_types_js_6ef04275__),
+    '@digigov/form/FieldObject': lazyImport(__WEBPACK_EXTERNAL_MODULE__FieldObject_index_js_3053c0b3__),
     '@digigov/form/FieldArray/BaseFieldArray': lazyImport(__WEBPACK_EXTERNAL_MODULE__FieldArray_BaseFieldArray_js_51879b3c__),
+    '@digigov/form/FieldArray/DeleteConfirmationModal': lazyImport(__WEBPACK_EXTERNAL_MODULE__FieldArray_DeleteConfirmationModal_js_c12845d4__),
     '@digigov/form/FieldArray': lazyImport(__WEBPACK_EXTERNAL_MODULE__FieldArray_index_js_f6888d1e__),
-    '@digigov/form/FieldObject': lazyImport(__WEBPACK_EXTERNAL_MODULE__FieldObject_index_js_3053c0b3__),
     '@digigov/form/Fieldset/FieldsetWithContext': lazyImport(__WEBPACK_EXTERNAL_MODULE__Fieldset_FieldsetWithContext_js_aa40ade4__),
     '@digigov/form/Fieldset': lazyImport(__WEBPACK_EXTERNAL_MODULE__Fieldset_index_js_3b7183e3__),
     '@digigov/form/Fieldset/types': lazyImport(__WEBPACK_EXTERNAL_MODULE__Fieldset_types_js_45030319__),
@@ -137,13 +139,13 @@ const registry = {
     '@digigov/form/Questions/Step/types': lazyImport(__WEBPACK_EXTERNAL_MODULE__Questions_Step_types_js_adca4924__),
     '@digigov/form/inputs/AutoCompleteInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_AutoCompleteInput_index_js_64b911d2__),
     '@digigov/form/inputs/Checkboxes': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_Checkboxes_index_js_794dd192__),
-    '@digigov/form/inputs/DateTimeInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_DateTimeInput_index_js_c8900e1c__),
     '@digigov/form/inputs/DateInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_DateInput_index_js_4dd00af8__),
+    '@digigov/form/inputs/DateTimeInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_DateTimeInput_index_js_c8900e1c__),
     '@digigov/form/inputs/FileInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_FileInput_index_js_a3efab43__),
     '@digigov/form/inputs/ImageInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_ImageInput_index_js_db0d371d__),
     '@digigov/form/inputs/Input': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_Input_index_js_a3d24895__),
-    '@digigov/form/inputs/OtpInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_OtpInput_index_js_cf892bf0__),
     '@digigov/form/inputs/Label': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_Label_index_js_fd36dbbf__),
+    '@digigov/form/inputs/OtpInput': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_OtpInput_index_js_cf892bf0__),
     '@digigov/form/inputs/Radio': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_Radio_index_js_dd4e4535__),
     '@digigov/form/inputs/Select': lazyImport(__WEBPACK_EXTERNAL_MODULE__inputs_Select_index_js_96a2f597__),
     '@digigov/form/validators/utils/afm': lazyImport(__WEBPACK_EXTERNAL_MODULE__validators_utils_afm_js_d3ce9cd4__),

package/src/FieldArray/BaseFieldArray.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
+import React, { useRef, useId } from 'react';
 import { useFieldArray } from 'react-hook-form';
 import type { FieldArrayProps } from '@digigov/form/FieldArray';
+import DeleteConfirmationModal from '@digigov/form/FieldArray/DeleteConfirmationModal';
 import { FieldObject } from '@digigov/form/FieldObject';
 import { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';
+import { useModal } from '@digigov/ui';
 import { Card } from '@digigov/ui/content/Card';
 import { Button } from '@digigov/ui/form/Button';
 
@@ -14,7 +16,9 @@ type BaseFieldArrayProps = Omit<
   | 'setValue'
   | 'reset'
   | 'resetField'
->;
+> & {
+  deleteConfirmation?: boolean;
+};
 export const BaseFieldArray = React.forwardRef<
   HTMLButtonElement,
   BaseFieldArrayProps
@@ -28,6 +32,7 @@ export const BaseFieldArray = React.forwardRef<
       error,
       getValues,
       Field,
+      deleteConfirmation,
       ...customField
     },
     ref
@@ -37,6 +42,21 @@ export const BaseFieldArray = React.forwardRef<
       name,
     });
     const fields = getValues(name) || [];
+    const { registerModal, open, ...modalProps } = useModal();
+    const confirmationModalId = useId();
+    const indexOfItemToDelete = useRef<number | null>(null);
+
+    const handleRemoveClick = React.useCallback(
+      (index: number) => {
+        if (deleteConfirmation) {
+          indexOfItemToDelete.current = index;
+          open(confirmationModalId);
+        } else {
+          remove(index);
+        }
+      },
+      [deleteConfirmation, open, remove, confirmationModalId]
+    );
 
     return (
       <>
@@ -63,7 +83,9 @@ export const BaseFieldArray = React.forwardRef<
                 variant={customField.extra?.label.object?.deleteButtonVariant}
                 type="button"
                 color="warning"
-                onClick={() => remove(index)}
+                onClick={() => {
+                  handleRemoveClick(index);
+                }}
                 disabled={!customField?.editable}
               >
                 {customField.extra?.label.object?.delete}
@@ -87,6 +109,15 @@ export const BaseFieldArray = React.forwardRef<
             {customField.extra?.label.object?.add}
           </Button>
         )}
+        <DeleteConfirmationModal
+          {...modalProps}
+          {...registerModal(confirmationModalId)}
+          remove={() =>
+            indexOfItemToDelete.current !== null
+              ? remove(indexOfItemToDelete.current)
+              : () => {}
+          }
+        />
       </>
     );
   }

package/src/FieldArray/DeleteConfirmationModal.tsx

@@ -0,0 +1,57 @@
+import React, { useId } from 'react';
+import type { ModalProps } from '@digigov/ui';
+import {
+  Button,
+  Modal,
+  ModalAction,
+  ModalContent,
+  ModalHeading,
+  Paragraph,
+} from '@digigov/ui';
+
+export interface DeleteConfirmationModalProps extends ModalProps {
+  remove: () => void;
+  close: () => void;
+}
+
+export const DeleteConfirmationModal = ({
+  remove,
+  close,
+  ...props
+}: DeleteConfirmationModalProps) => {
+  const headingId = useId();
+  return (
+    <Modal {...props} aria-labelledby={headingId}>
+      <ModalHeading id={headingId}>Επιβεβαίωση διαγραφής</ModalHeading>
+      <ModalContent>
+        <Paragraph margin={0}>
+          Είστε σίγουροι ότι θέλετε να διαγράψετε την εγγραφή;
+        </Paragraph>
+      </ModalContent>
+      <ModalAction>
+        <Button
+          color="warning"
+          onClick={(e) => {
+            e.preventDefault();
+            remove();
+            close();
+          }}
+        >
+          Διαγραφή
+        </Button>
+        <Button
+          variant="link"
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            close();
+          }}
+        >
+          Ακύρωση
+        </Button>
+      </ModalAction>
+    </Modal>
+  );
+};
+
+export default DeleteConfirmationModal;

package/src/FieldArray/FieldArray.stories.js

@@ -7,4 +7,5 @@ export default {
 export { Default } from '@digigov/form/FieldArray/__stories__/Default';
 export { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
 export { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';
+export { WithDeleteConfirmation } from '@digigov/form/FieldArray/__stories__/WithDeleteConfirmation';
 export { CardsWithError } from '@digigov/form/FieldArray/__stories__/CardsWithError';

package/src/FieldArray/FormDialog/ArrayDisplay/ArrayDisplay.stories.js

@@ -12,3 +12,4 @@ export { ReadOnly } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__sto
 export { Cards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Cards';
 export { SortableCards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/SortableCards';
 export { ReadOnlyCards } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnlyCards';
+export { WithDeleteConfirmation } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/WithDeleteConfirmation';

package/src/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay.tsx

@@ -209,7 +209,9 @@ export const ArrayItemDisplay = ({
                 <Button
                   variant="link"
                   type="button"
-                  onClick={() => remove(name)}
+                  onClick={() => {
+                    remove(name);
+                  }}
                 >
                   Διαγραφή
                 </Button>