@digigov/form 2.0.9 → 2.0.11

package/src/FieldArray/__tests__/nested-fieldset-multiplicity.spec.tsx

@@ -272,12 +272,8 @@ describe('nested_fieldset_multiplicity case from dilosi', () => {
     it(`should open the nested_multiplicity_${fieldsetType} dialog on nested "add" button click`, async () => {
       render(<TestForm />);
       openMainDialog();
-      const nestedFieldset = getNestedFieldset(fieldsetType);
-      const nestedFieldsetAddButton = within(nestedFieldset!).getByRole(
-        'button',
-        { name: 'Προσθήκη' }
-      );
-      fireEvent.click(nestedFieldsetAddButton);
+      const nestedAddButton = getNestedAddButton(fieldsetType);
+      fireEvent.click(nestedAddButton);
       expect(screen.getAllByRole('dialog').length).toBe(2);
       const inputField = screen.getByRole('textbox');
       expect(inputField).toBeInTheDocument();
@@ -306,18 +302,12 @@ describe('nested_fieldset_multiplicity case from dilosi', () => {
   it('should validate nested_multiplicity_required string field', async () => {
     render(<TestForm />);
     openMainDialog();
-    const nestedFieldset = getNestedFieldset('required');
-    const nestedFieldsetAddButton = within(nestedFieldset).getByRole('button', {
-      name: 'Προσθήκη',
-    });
-    fireEvent.click(nestedFieldsetAddButton);
+    const nestedAddButton = getNestedAddButton('required');
+    fireEvent.click(nestedAddButton);
     expect(screen.getAllByRole('dialog').length).toBe(2);
     const inputField = screen.getByRole('textbox');
     expect(inputField).toHaveProperty('name', `nested_multiplicity_required`);
-    const submitButton = screen.getAllByRole('button', {
-      name: 'Αποθήκευση',
-    })[1];
-    fireEvent.click(submitButton);
+    clickNestedSaveButton();
     await waitFor(() =>
       expect(
         screen.getByText('Το πεδίο είναι υποχρεωτικό.')
@@ -328,49 +318,17 @@ describe('nested_fieldset_multiplicity case from dilosi', () => {
   it('should submit nested_multiplicity_required item added by nested form', async () => {
     render(<TestForm />);
     openMainDialog();
-    const nestedFieldset = getNestedFieldset('required');
-    const nestedFieldsetAddButton = within(nestedFieldset).getByRole('button', {
-      name: 'Προσθήκη',
-    });
-    fireEvent.click(nestedFieldsetAddButton);
-    expect(screen.getAllByRole('dialog').length).toBe(2);
-    const nestedFieldsetInput = screen.getByRole('textbox');
-    expect(nestedFieldsetInput).toBeInTheDocument();
-    expect(nestedFieldsetInput).toHaveProperty(
-      'name',
-      `nested_multiplicity_required`
-    );
-    fireEvent.change(nestedFieldsetInput, {
-      target: { value: 'Test Value' },
-    });
-    expect(nestedFieldsetInput).toHaveValue('Test Value');
-    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
-    const submitButton = screen.getAllByRole('button', {
-      name: 'Αποθήκευση',
-    })[1];
-    fireEvent.click(submitButton);
-    await waitFor(() => {
-      // Only one dialog should remain open (the main one)
-      expect(screen.getAllByRole('dialog').length).toBe(1);
-    });
+
+    const nestedAddButton = getNestedAddButton('required');
+    await addNestedItem(nestedAddButton, 'Test Value');
 
     expect(screen.getByText('Test Value')).toBeInTheDocument();
     expect(submitHandler).not.toHaveBeenCalled();
 
-    const mainDialogSubmitButton = screen.getByRole('button', {
-      name: 'Αποθήκευση',
-    });
-    fireEvent.click(mainDialogSubmitButton);
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
+    await saveMainDialog();
     expect(screen.getByText('Test Value')).toBeInTheDocument();
-    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
-    expect(continueButton).toBeInTheDocument();
-    fireEvent.click(continueButton);
-    await waitFor(() => {
-      expect(submitHandler).toHaveBeenCalledTimes(1);
-    });
+
+    await submitForm(submitHandler);
     expect(submitHandler).toHaveBeenCalledWith({
       nested_fieldset_multiplicity: expect.arrayContaining([
         {
@@ -386,108 +344,25 @@ describe('nested_fieldset_multiplicity case from dilosi', () => {
     openMainDialog();
 
     // Add multiple nested_multiplicity_required items
-    const requiredNestedFieldset = getNestedFieldset('required');
-    const requiredNestedFieldsetAddButton = within(
-      requiredNestedFieldset
-    ).getByRole('button', {
-      name: 'Προσθήκη',
-    });
-    fireEvent.click(requiredNestedFieldsetAddButton);
-    expect(screen.getAllByRole('dialog').length).toBe(2);
-    const requiredNestedFieldsetInput = screen.getByRole('textbox');
-    expect(requiredNestedFieldsetInput).toBeInTheDocument();
-    expect(requiredNestedFieldsetInput).toHaveProperty(
-      'name',
-      `nested_multiplicity_required`
-    );
-    fireEvent.change(requiredNestedFieldsetInput, {
-      target: { value: 'Required Test Value 1' },
-    });
-    expect(requiredNestedFieldsetInput).toHaveValue('Required Test Value 1');
-    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
-    const requiredSubmitButton = screen.getAllByRole('button', {
-      name: 'Αποθήκευση',
-    })[1];
-    fireEvent.click(requiredSubmitButton);
-    await waitFor(() => {
-      // Only one dialog should remain open (the main one)
-      expect(screen.getAllByRole('dialog').length).toBe(1);
-    });
-
+    const requiredAddButton = getNestedAddButton('required');
+    await addNestedItem(requiredAddButton, 'Required Test Value 1');
     expect(screen.getByText('Required Test Value 1')).toBeInTheDocument();
     expect(submitHandler).not.toHaveBeenCalled();
-    // Add a second required item
-    fireEvent.click(requiredNestedFieldsetAddButton);
-    expect(screen.getAllByRole('dialog').length).toBe(2);
-    const secondRequiredNestedFieldsetInput = screen.getByRole('textbox');
-    expect(secondRequiredNestedFieldsetInput).toBeInTheDocument();
-    expect(secondRequiredNestedFieldsetInput).toHaveProperty(
-      'name',
-      `nested_multiplicity_required`
-    );
-    fireEvent.change(secondRequiredNestedFieldsetInput, {
-      target: { value: 'Required Test Value 2' },
-    });
-    expect(secondRequiredNestedFieldsetInput).toHaveValue(
-      'Required Test Value 2'
-    );
-    const secondRequiredSubmitButton = screen.getAllByRole('button', {
-      name: 'Αποθήκευση',
-    })[1];
-    fireEvent.click(secondRequiredSubmitButton);
-    await waitFor(() => {
-      // Only one dialog should remain open (the main one)
-      expect(screen.getAllByRole('dialog').length).toBe(1);
-    });
 
+    await addNestedItem(requiredAddButton, 'Required Test Value 2');
     expect(screen.getByText('Required Test Value 1')).toBeInTheDocument();
     expect(submitHandler).not.toHaveBeenCalled();
 
     // Add nested_multiplicity_optional item
-    const optionalNestedFieldset = getNestedFieldset('optional');
-    const optionalNestedFieldsetAddButton = within(
-      optionalNestedFieldset
-    ).getByRole('button', { name: 'Προσθήκη' });
-    fireEvent.click(optionalNestedFieldsetAddButton);
-    expect(screen.getAllByRole('dialog').length).toBe(2);
-    const optionalNestedFieldsetInput = screen.getByRole('textbox');
-    expect(optionalNestedFieldsetInput).toBeInTheDocument();
-    expect(optionalNestedFieldsetInput).toHaveProperty(
-      'name',
-      `nested_multiplicity_optional`
-    );
-    fireEvent.change(optionalNestedFieldsetInput, {
-      target: { value: 'Optional Test Value' },
-    });
-    expect(optionalNestedFieldsetInput).toHaveValue('Optional Test Value');
-
-    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
-    const optionalSubmitButton = screen.getAllByRole('button', {
-      name: 'Αποθήκευση',
-    })[1];
-    fireEvent.click(optionalSubmitButton);
-    await waitFor(() => {
-      // Only one dialog should remain open (the main one)
-      expect(screen.getAllByRole('dialog').length).toBe(1);
-    });
-
+    const optionalAddButton = getNestedAddButton('optional');
+    await addNestedItem(optionalAddButton, 'Optional Test Value');
     expect(screen.getByText('Optional Test Value')).toBeInTheDocument();
     expect(submitHandler).not.toHaveBeenCalled();
 
-    const mainDialogSubmitButton = screen.getByRole('button', {
-      name: 'Αποθήκευση',
-    });
-    fireEvent.click(mainDialogSubmitButton);
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
+    await saveMainDialog();
     expect(screen.getByText('Optional Test Value')).toBeInTheDocument();
-    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
-    expect(continueButton).toBeInTheDocument();
-    fireEvent.click(continueButton);
-    await waitFor(() => {
-      expect(submitHandler).toHaveBeenCalledTimes(1);
-    });
+
+    await submitForm(submitHandler);
     expect(submitHandler).toHaveBeenCalledWith({
       nested_fieldset_multiplicity: expect.arrayContaining([
         {
@@ -501,96 +376,144 @@ describe('nested_fieldset_multiplicity case from dilosi', () => {
     });
   });
 
-  it('should submit multiple fieldset items added to main form', async () => {
+  it('should have independent nested_multiplicity_required max limits per fieldset item', async () => {
     render(<TestForm />);
+
+    // --- First nested_fieldset_multiplicity item ---
     openMainDialog();
 
-    // Add first item
-    const nestedFieldset = getNestedFieldset('required');
-    const nestedFieldsetAddButton = within(nestedFieldset).getByRole('button', {
-      name: 'Προσθήκη',
-    });
-    fireEvent.click(nestedFieldsetAddButton);
-    expect(screen.getAllByRole('dialog').length).toBe(2);
-    const nestedFieldsetInput = screen.getByRole('textbox');
-    expect(nestedFieldsetInput).toBeInTheDocument();
-    expect(nestedFieldsetInput).toHaveProperty(
-      'name',
-      `nested_multiplicity_required`
-    );
-    fireEvent.change(nestedFieldsetInput, {
-      target: { value: 'Test Value 1' },
-    });
-    expect(nestedFieldsetInput).toHaveValue('Test Value 1');
-    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
-    const submitButton = screen.getAllByRole('button', {
-      name: 'Αποθήκευση',
-    })[1];
-    fireEvent.click(submitButton);
-    await waitFor(() => {
-      // Only one dialog should remain open (the main one)
-      expect(screen.getAllByRole('dialog').length).toBe(1);
+    const nestedAddButton = getNestedAddButton('required');
+
+    // Fill all 10 (max) nested_multiplicity_required items
+    await addNestedItems(nestedAddButton, 'Item 1', 10);
+
+    // The "add" button for nested_multiplicity_required should now be disabled (max reached)
+    expect(nestedAddButton).toBeDisabled();
+
+    // Submit first fieldset item
+    await saveMainDialog();
+
+    // --- Second nested_fieldset_multiplicity item ---
+    openMainDialog();
+
+    const nestedAddButton2 = getNestedAddButton('required', true);
+
+    // The "add" button should NOT be disabled — it's a fresh fieldset item
+    expect(nestedAddButton2).not.toBeDisabled();
+
+    // Add a nested_multiplicity_required item to verify it works
+    await addNestedItems(nestedAddButton2, 'Item 2', 1);
+    expect(screen.getByText('Item 2-1')).toBeInTheDocument();
+  });
+
+  it('should not validate nested_multiplicity_optional when empty (min 0)', async () => {
+    render(<TestForm />);
+    openMainDialog();
+
+    // Add only a required item — leave optional empty
+    const requiredAddButton = getNestedAddButton('required');
+    await addNestedItem(requiredAddButton, 'Required Value');
+
+    // Save main dialog — should succeed without optional validation error
+    await saveMainDialog();
+
+    await submitForm(submitHandler);
+    expect(submitHandler).toHaveBeenCalledWith({
+      nested_fieldset_multiplicity: expect.arrayContaining([
+        {
+          nested_multiplicity_required: ['Required Value'],
+          nested_multiplicity_optional: [],
+        },
+      ]),
     });
+  });
+
+  it('should disable nested_multiplicity_optional add button when max (10) is reached', async () => {
+    render(<TestForm />);
+    openMainDialog();
+
+    // Must add at least 1 required item to allow saving later
+    const requiredAddButton = getNestedAddButton('required');
+    await addNestedItem(requiredAddButton, 'Required Value');
+
+    const optionalAddButton = getNestedAddButton('optional');
+
+    // Fill all 10 (max) optional items
+    await addNestedItems(optionalAddButton, 'Opt', 10);
+
+    // The "add" button for nested_multiplicity_optional should now be disabled
+    expect(optionalAddButton).toBeDisabled();
+  });
+
+  it('should have independent nested_multiplicity_optional max limits per fieldset item', async () => {
+    render(<TestForm />);
+
+    // --- First nested_fieldset_multiplicity item ---
+    openMainDialog();
+
+    const requiredAddButton = getNestedAddButton('required');
+    await addNestedItem(requiredAddButton, 'Req 1');
+
+    const optionalAddButton = getNestedAddButton('optional');
+    await addNestedItems(optionalAddButton, 'Opt 1', 10);
+
+    // Max reached for optional in first fieldset item
+    expect(optionalAddButton).toBeDisabled();
+
+    await saveMainDialog();
+
+    // --- Second nested_fieldset_multiplicity item ---
+    openMainDialog();
+
+    const requiredAddButton2 = getNestedAddButton('required', true);
+    await addNestedItem(requiredAddButton2, 'Req 2');
+
+    const optionalAddButton2 = getNestedAddButton('optional', true);
+
+    // The "add" button should NOT be disabled — it's a fresh fieldset item
+    expect(optionalAddButton2).not.toBeDisabled();
+
+    await addNestedItem(optionalAddButton2, 'Opt 2-1');
+    expect(screen.getByText('Opt 2-1')).toBeInTheDocument();
+  });
+
+  it('should disable outer add button when max (5) fieldset items are reached', async () => {
+    render(<TestForm />);
+
+    // Add 5 fieldset items (the max)
+    for (let i = 1; i <= 5; i++) {
+      await addFieldsetItem(`Value ${i}`);
+    }
+
+    // The outer "Προσθήκη" button should now be disabled
+    const outerAddButton = screen.getByRole('button', { name: 'Προσθήκη' });
+    expect(outerAddButton).toBeDisabled();
+  });
+
+  it('should submit multiple fieldset items added to main form', async () => {
+    render(<TestForm />);
+
+    // Add first item
+    openMainDialog();
+    const nestedAddButton = getNestedAddButton('required');
+    await addNestedItem(nestedAddButton, 'Test Value 1');
     expect(screen.getByText('Test Value 1')).toBeInTheDocument();
     expect(submitHandler).not.toHaveBeenCalled();
 
-    // Submit first item
-    const mainDialogSubmitButton = screen.getByRole('button', {
-      name: 'Αποθήκευση',
-    });
-    fireEvent.click(mainDialogSubmitButton);
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
+    await saveMainDialog();
     expect(screen.getByText('Test Value 1')).toBeInTheDocument();
 
     // Add second item
     openMainDialog();
-    const secondNestedFieldset = getNestedFieldset('required', true);
-    const secondNestedFieldsetAddButton = within(
-      secondNestedFieldset
-    ).getByRole('button', {
-      name: 'Προσθήκη',
-    });
-    fireEvent.click(secondNestedFieldsetAddButton);
-    expect(screen.getAllByRole('dialog').length).toBe(2);
-    const secondNestedFieldsetInput = screen.getByRole('textbox');
-    expect(secondNestedFieldsetInput).toBeInTheDocument();
-    expect(secondNestedFieldsetInput).toHaveProperty(
-      'name',
-      `nested_multiplicity_required`
-    );
-    fireEvent.change(secondNestedFieldsetInput, {
-      target: { value: 'Test Value 2' },
-    });
-    expect(secondNestedFieldsetInput).toHaveValue('Test Value 2');
-    // There are two "Αποθήκευση" buttons, one for the nested dialog and one for the main dialog
-    const secondSubmitButton = screen.getAllByRole('button', {
-      name: 'Αποθήκευση',
-    })[1];
-    fireEvent.click(secondSubmitButton);
-    await waitFor(() => {
-      // Only one dialog should remain open (the main one)
-      expect(screen.getAllByRole('dialog').length).toBe(1);
-    });
+    const secondNestedAddButton = getNestedAddButton('required', true);
+    await addNestedItem(secondNestedAddButton, 'Test Value 2');
     expect(screen.getByText('Test Value 2')).toBeInTheDocument();
     expect(submitHandler).not.toHaveBeenCalled();
-    // Submit second item
-    const secondMainDialogSubmitButton = screen.getByRole('button', {
-      name: 'Αποθήκευση',
-    });
-    fireEvent.click(secondMainDialogSubmitButton);
-    await waitFor(() => {
-      expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
-    });
+
+    await saveMainDialog();
     expect(screen.getByText('Test Value 2')).toBeInTheDocument();
 
-    const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
-    expect(continueButton).toBeInTheDocument();
-    fireEvent.click(continueButton);
-    await waitFor(() => {
-      expect(submitHandler).toHaveBeenCalledTimes(1);
-    });
+    await submitForm(submitHandler);
     expect(submitHandler).toHaveBeenCalledWith({
       nested_fieldset_multiplicity: expect.arrayContaining([
         {
@@ -606,6 +529,8 @@ describe('nested_fieldset_multiplicity case from dilosi', () => {
   });
 });
 
+// --- Helper functions ---
+
 function openMainDialog() {
   const addButton = screen.getByRole('button', { name: 'Προσθήκη' });
   fireEvent.click(addButton);
@@ -625,3 +550,69 @@ function getNestedFieldset(
   expect(nestedFieldset).toBeInTheDocument();
   return nestedFieldset!;
 }
+
+function getNestedAddButton(
+  type: 'required' | 'optional',
+  hasSubmittedOnce = false
+) {
+  const fieldset = getNestedFieldset(type, hasSubmittedOnce);
+  return within(fieldset).getByRole('button', { name: 'Προσθήκη' });
+}
+
+function clickNestedSaveButton() {
+  const saveBtn = screen.getAllByRole('button', { name: 'Αποθήκευση' })[1];
+  fireEvent.click(saveBtn);
+}
+
+async function addNestedItem(addButton: HTMLElement, value: string) {
+  fireEvent.click(addButton);
+  expect(screen.getAllByRole('dialog').length).toBe(2);
+  const input = screen.getByRole('textbox');
+  fireEvent.change(input, { target: { value } });
+  clickNestedSaveButton();
+  await waitFor(() => {
+    expect(screen.getAllByRole('dialog').length).toBe(1);
+  });
+}
+
+async function addNestedItems(
+  addButton: HTMLElement,
+  prefix: string,
+  count: number
+) {
+  for (let i = 1; i <= count; i++) {
+    await addNestedItem(addButton, `${prefix}-${i}`);
+  }
+}
+
+async function saveMainDialog() {
+  const saveBtn = screen.getByRole('button', { name: 'Αποθήκευση' });
+  fireEvent.click(saveBtn);
+  await waitFor(() => {
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+}
+
+async function addFieldsetItem(requiredValue: string) {
+  openMainDialog();
+  // After the first submission, there are duplicate fieldset labels in the DOM.
+  // Always pick the last matching fieldset (the one inside the open dialog).
+  const requiredFieldset = screen
+    .getAllByText(/"required" μέχρι 10/)
+    .at(-1)!
+    .closest('fieldset')!;
+  const nestedAddButton = within(requiredFieldset).getByRole('button', {
+    name: 'Προσθήκη',
+  });
+  await addNestedItem(nestedAddButton, requiredValue);
+  await saveMainDialog();
+}
+
+async function submitForm(submitHandler: ReturnType<typeof vi.fn>) {
+  const continueButton = screen.getByRole('button', { name: 'Συνέχεια' });
+  expect(continueButton).toBeInTheDocument();
+  fireEvent.click(continueButton);
+  await waitFor(() => {
+    expect(submitHandler).toHaveBeenCalledTimes(1);
+  });
+}

package/src/FieldArray/index.spec.tsx

@@ -351,5 +351,47 @@ describe('FieldArray', () => {
 
       expect(screen.getByText('Προσθήκη συνυπογράφοντα')).toHaveFocus();
     });
+
+    it('should show delete confirmation modal and delete item on confirm', async () => {
+      render(
+        <TestForm
+          fieldObject={{
+            ...fieldSpec,
+            extra: {
+              ...fieldSpec.extra,
+              deleteConfirmation: true,
+            },
+          }}
+        />
+      );
+
+      const addButton = await screen.findByText('Προσθήκη συνυπογράφοντα');
+      expect(addButton).toBeInTheDocument();
+      fireEvent.click(addButton);
+
+      const nameInput = screen.getByLabelText('Όνομα');
+      fireEvent.change(nameInput, {
+        target: { value: 'John' },
+      });
+      fireEvent.click(screen.getByText('Αποθήκευση'));
+
+      await waitFor(() =>
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      );
+      await waitFor(() => expect(screen.getByText('John')).toBeInTheDocument());
+
+      fireEvent.click(screen.getByText('Διαγραφή'));
+
+      await waitFor(() =>
+        expect(screen.getByRole('dialog')).toBeInTheDocument()
+      );
+      expect(screen.getByText('Επιβεβαίωση διαγραφής')).toBeInTheDocument();
+      fireEvent.click(screen.getAllByText('Διαγραφή')[1]);
+      await waitFor(() =>
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+      );
+
+      expect(screen.queryByText('John')).not.toBeInTheDocument();
+    });
   });
 });

package/src/FieldArray/index.test.tsx

@@ -1,40 +1,44 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
+import TestVariant from '@digigov/ui/utils/TestVariant';
 import { CardsWithError } from '@digigov/form/FieldArray/__stories__/CardsWithError';
 import { Default } from '@digigov/form/FieldArray/__stories__/Default';
 import { TableWithError } from '@digigov/form/FieldArray/__stories__/TableWithError';
 import { WithExactLength } from '@digigov/form/FieldArray/__stories__/WithExactLength';
 import { WithModal } from '@digigov/form/FieldArray/__stories__/WithModal';
+import { WithDeleteConfirmation } from '@digigov/form/FieldArray/__stories__/WithDeleteConfirmation';
 
 test('renders the All FieldArray variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="CardsWithError">
-      <CardsWithError />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="TableWithError">
-      <TableWithError />
-    </TestVariant>
-    <TestVariant title="WithExactLength">
-      <WithExactLength />
-    </TestVariant>
-    <TestVariant title="WithModal">
-      <WithModal />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="CardsWithError">
+        <CardsWithError />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="TableWithError">
+        <TableWithError />
+      </TestVariant>
+      <TestVariant title="WithExactLength">
+        <WithExactLength />
+      </TestVariant>
+      <TestVariant title="WithModal">
+        <WithModal />
+      </TestVariant>
+      <TestVariant title="WithDeleteConfirmation">
+        <WithDeleteConfirmation />
+      </TestVariant>
+    </div>
+  );
   await page.evaluate(() => document.fonts.ready);
 
   // Move the mouse to the top-left corner to avoid random hover issues
   await page.mouse.move(0, 0);
 
-
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/FieldArray/index.tsx

@@ -40,7 +40,6 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
 }) => {
   /** The ref of the add-button */
   const buttonRef = useRef<HTMLButtonElement | null>(null);
-
   // Register the button to be focusable
   useEffect(() => {
     let unregister: (name: string) => void = () => {};
@@ -90,6 +89,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           reset={reset}
           resetField={resetField}
           sortable={customField.extra.sortable}
+          deleteConfirmation={customField.extra?.deleteConfirmation}
           {...customField}
         />
       ) : (
@@ -102,6 +102,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           error={error}
           getValues={getValues}
           Field={Field}
+          deleteConfirmation={customField.extra?.deleteConfirmation}
           {...customField}
         />
       )}

package/src/lazy.ts

@@ -10,6 +10,7 @@ export default {
   'FieldBaseContainer': lazy(() => import('@digigov/form/Field/FieldBaseContainer').then((module) => ({ default: module['FieldBaseContainer'] }))),
   'FieldConditional': lazy(() => import('@digigov/form/Field/FieldConditional').then((module) => ({ default: module['FieldConditional'] }))),
   'BaseFieldArray': lazy(() => import('@digigov/form/FieldArray/BaseFieldArray').then((module) => ({ default: module['BaseFieldArray'] }))),
+  'DeleteConfirmationModal': lazy(() => import('@digigov/form/FieldArray/DeleteConfirmationModal').then((module) => ({ default: module['DeleteConfirmationModal'] }))),
   'FieldArray': lazy(() => import('@digigov/form/FieldArray').then((module) => ({ default: module['FieldArray'] }))),
   'FieldObject': lazy(() => import('@digigov/form/FieldObject').then((module) => ({ default: module['FieldObject'] }))),
   'FieldsetWithContext': lazy(() => import('@digigov/form/Fieldset/FieldsetWithContext').then((module) => ({ default: module['FieldsetWithContext'] }))),