@digigov/form 2.0.0-36b707c1 → 2.0.0-385c7994

package/Field/utils/useField.js

@@ -0,0 +1,47 @@
+import { useContext, useMemo } from "react";
+import { FormContext } from "../../FormContext.js";
+const useField = (name, customField)=>{
+    const { fieldsMap, control, register, reset, resetField, trigger, clearErrors, errors, registerField, watch, componentRegistry, getFieldState, setValue, getValues, unregister, formState, registerFieldFocus } = useContext(FormContext);
+    if (!registerField) throw new Error(`
+      You can't use the Field component without wrapping it in FormBuilder.
+      https://devs.pages.grnet.gr/digigov/digigov-sdk/sdk-docs/forms/create-simple-form/
+    `);
+    let error = errors[name];
+    const nameIndexRegex = name.match(/^\[*(.*?)\.(\d+)\]*$/);
+    if (nameIndexRegex) {
+        const [, fieldArrayName, indexStr] = nameIndexRegex;
+        error = errors[fieldArrayName]?.[Number(indexStr)];
+    }
+    const nestedNameIndexRegex = name.match(/^\[*(.*?)\.(\d+)\.(.*?)\]*$/);
+    if (nestedNameIndexRegex) {
+        const [, fieldArrayName, indexStr, fieldItemName] = nestedNameIndexRegex;
+        error = errors[fieldArrayName]?.[Number(indexStr)]?.[fieldItemName];
+    }
+    useMemo(()=>customField?.type && registerField({
+            ...customField,
+            key: name
+        }), [
+        customField,
+        name,
+        registerField
+    ]);
+    return {
+        field: customField || fieldsMap[name],
+        control,
+        register,
+        reset,
+        resetField,
+        trigger,
+        watch,
+        componentRegistry,
+        getFieldState,
+        setValue,
+        clearErrors,
+        getValues,
+        unregister,
+        formState,
+        error,
+        registerFieldFocus
+    };
+};
+export { useField };

package/FieldArray/BaseFieldArray.d.ts

@@ -0,0 +1,5 @@
+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 default BaseFieldArray;

package/FieldArray/BaseFieldArray.js

@@ -0,0 +1,46 @@
+import react from "react";
+import { useFieldArray } from "react-hook-form";
+import { FieldObject } from "../FieldObject/index.js";
+import { Fieldset, FieldsetLabel } from "../Fieldset/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 { append, remove } = useFieldArray({
+        control,
+        name
+    });
+    const fields = getValues(name) || [];
+    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
+        }, /*#__PURE__*/ react.createElement(Fieldset, null, /*#__PURE__*/ react.createElement(FieldsetLabel, null, `${customField.extra?.label.object.title}${!customField.extra?.noIndex ? ' ' + String(index + 1) : ''}`), /*#__PURE__*/ react.createElement(FieldObject, {
+            name: `${name}.${index}`,
+            error: Array.isArray(error) && error[index],
+            formState: formState,
+            register: register,
+            control: control,
+            ...customField.extra?.of,
+            Field: Field
+        }), /*#__PURE__*/ react.createElement(Button, {
+            name: `${name}-object-remove`,
+            variant: customField.extra?.label.object?.deleteButtonVariant,
+            type: "button",
+            color: "warning",
+            onClick: ()=>remove(index),
+            disabled: !customField?.editable
+        }, customField.extra?.label.object?.delete)))), customField.editable && /*#__PURE__*/ react.createElement(Button, {
+        ref: ref,
+        type: "button",
+        name: `${name}-add-object`,
+        color: "secondary",
+        variant: customField.extra?.label.object?.addButtonVariant,
+        onClick: (ev)=>{
+            ev.preventDefault();
+            append({});
+        },
+        disabled: !customField?.editable
+    }, customField.extra?.label.object?.add));
+});
+BaseFieldArray_BaseFieldArray.displayName = 'BaseFieldArray';
+const BaseFieldArray = BaseFieldArray_BaseFieldArray;
+export { BaseFieldArray_BaseFieldArray as BaseFieldArray, BaseFieldArray as default };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ArrayContainerDisplayProps {
+    fieldArrayValues: any[];
+    ofField: any;
+    customField: any;
+    children: React.ReactNode;
+}
+export declare const ArrayContainerDisplay: ({ fieldArrayValues, ofField, customField, children, }: ArrayContainerDisplayProps) => React.JSX.Element;
+export default ArrayContainerDisplay;

package/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay.js

@@ -0,0 +1,13 @@
+import react from "react";
+import { ArrayItemHeader } from "./ArrayItemHeader.js";
+import { Table, TableBody, TableContainer } from "@digigov/ui/content/index.js";
+const ArrayContainerDisplay = ({ fieldArrayValues, ofField, customField, children })=>/*#__PURE__*/ react.createElement(react.Fragment, null, customField?.extra?.layout === 'card' ? children : /*#__PURE__*/ react.createElement(TableContainer, customField.extra?.tableContainer, /*#__PURE__*/ react.createElement(Table, {
+        verticalAlign: customField.extra?.verticalAlign
+    }, !customField.extra?.noHeader && ofField?.extra && fieldArrayValues?.length > 0 && /*#__PURE__*/ react.createElement(ArrayItemHeader, {
+        labels: 'object' === ofField.type ? ofField.extra.fields.map(({ label })=>label.primary) : [
+            ofField.label.primary
+        ],
+        disabled: customField?.editable === false
+    }), /*#__PURE__*/ react.createElement(TableBody, null, children))));
+const ArrayDisplay_ArrayContainerDisplay = ArrayContainerDisplay;
+export { ArrayContainerDisplay, ArrayDisplay_ArrayContainerDisplay as default };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ErrorOption, UseFieldArrayMove } from 'react-hook-form';
+import type { StackProps } from '@digigov/ui/layouts';
+export interface ArrayItemDisplayProps {
+    data: any;
+    name: string;
+    edit: (name: string) => void;
+    remove: (name: string) => void;
+    disabledEdit?: boolean;
+    disabledDelete?: boolean;
+    disabled?: boolean;
+    sortable: boolean;
+    index: number;
+    isFirst: boolean;
+    isLast: boolean;
+    move: UseFieldArrayMove;
+    valueDisplay?: (value: any) => React.ReactNode;
+    border: boolean;
+    wordBreak?: 'break-all' | 'none';
+    stackProps?: StackProps;
+    customField: any;
+    ofField: any;
+    fieldArrayValues: any[];
+    error?: Record<string, ErrorOption> | undefined;
+}
+export declare const ArrayItemDisplay: ({ name, data, edit, remove, disabledEdit, disabledDelete, disabled, sortable, index, isFirst, isLast, move, valueDisplay, border, wordBreak, stackProps, customField, ofField, fieldArrayValues, error, }: ArrayItemDisplayProps) => React.JSX.Element | null;

package/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay.js

@@ -0,0 +1,134 @@
+import react from "react";
+import { omit } from "../../../utils.js";
+import { ErrorMessage } from "@digigov/ui/index.js";
+import { Card, SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, TableDataCell, TableRow } from "@digigov/ui/content/index.js";
+import { Button, ButtonGroup } from "@digigov/ui/form/Button/index.js";
+import { Grid, SectionBreak, Stack } from "@digigov/ui/layouts/index.js";
+import Heading from "@digigov/ui/typography/Heading/index.js";
+import { NormalText } from "@digigov/ui/typography/NormalText/index.js";
+const getFieldKey = (ofField, valueIndex)=>ofField?.type === 'object' ? ofField?.extra?.fields?.[valueIndex]?.key : ofField?.key;
+const getFieldValue = (value, valueIndex, ofField, valueDisplay)=>{
+    if (Array.isArray(value)) return value.join('\n');
+    if ('object' == typeof value) return value?.name;
+    if (valueDisplay) return valueDisplay(value);
+    const option = ofField?.extra?.fields?.[valueIndex]?.extra?.options?.find?.((option)=>option.value === value);
+    if (option) return option.label?.primary ?? value;
+    return value;
+};
+const ArrayItemDisplay = ({ name, data, edit, remove, disabledEdit, disabledDelete, disabled, sortable, index, isFirst, isLast, move, valueDisplay, border = true, wordBreak = 'break-all', stackProps = {
+    spacing: 4,
+    alignItems: 'flex-end',
+    justifyContent: 'flex-end',
+    direction: 'column'
+}, customField, ofField, fieldArrayValues, error })=>{
+    console.log('error', error);
+    if (null == data) return null;
+    if (0 === Object.keys(data).length || 1 === Object.keys(data).length && data.id) return null;
+    const values = 'string' == typeof data ? [
+        data
+    ] : Object.values(data ? omit(data, [
+        'id'
+    ]) : {});
+    const borderVariant = false === border || sortable ? 'none' : 'border';
+    const hasItemButtons = !disabled && (!disabledEdit || !disabledDelete);
+    const fieldLabel = ofField?.type === 'object' ? ofField?.extra?.fields.reduce((acc, { key, label })=>({
+            ...acc,
+            [key]: label.primary
+        }), {}) : ofField?.label?.primary;
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, customField?.extra?.layout === 'card' ? /*#__PURE__*/ react.createElement(Card, {
+        borderColor: "light",
+        variant: "border",
+        dense: true,
+        ...customField?.extra.cardContainer
+    }, sortable && /*#__PURE__*/ react.createElement(Heading, {
+        size: "sm"
+    }, "Επιλογή #", index + 1), /*#__PURE__*/ react.createElement(SummaryList, {
+        mb: 0,
+        noLastBorder: !hasItemButtons,
+        error: !!error
+    }, error && Object.keys(error).length > 0 && Object.entries(error).map(([fieldKey, fieldError])=>/*#__PURE__*/ react.createElement(ErrorMessage, {
+            key: fieldKey,
+            id: `${name}-error`
+        }, `${ofField?.type === 'object' && ofField?.extra?.fields ? `${fieldLabel[fieldKey] || fieldKey}: ` : ''}`, fieldError.message)), values?.map?.((value, valueIndex)=>{
+        const key = getFieldKey(ofField, valueIndex);
+        console.log('key', key);
+        const label = ofField?.type === 'object' ? fieldLabel[key] : fieldLabel;
+        console.log('label', label);
+        const fieldValue = getFieldValue(value, valueIndex, ofField, valueDisplay);
+        console.log('fieldValue', fieldValue);
+        const shouldShowKey = !customField?.extra?.noHeader && ofField?.extra && fieldArrayValues?.length > 0;
+        return /*#__PURE__*/ react.createElement(SummaryListItem, {
+            key: valueIndex
+        }, shouldShowKey && /*#__PURE__*/ react.createElement(SummaryListItemKey, {
+            error: !!error && Object.keys(error)?.includes(key)
+        }, label), /*#__PURE__*/ react.createElement(SummaryListItemValue, {
+            error: !shouldShowKey && !!error && Object.keys(error)?.includes(key)
+        }, fieldValue || ''));
+    })), true === disabled || true === disabledEdit && true === disabledDelete ? null : /*#__PURE__*/ react.createElement(ButtonGroup, {
+        mb: 0,
+        ...customField?.extra?.cardButtonGroup
+    }, true !== disabledEdit && /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        onClick: ()=>{
+            edit(name);
+        }
+    }, "Επεξεργασία"), true !== disabledDelete && /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        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, {
+        type: "button",
+        variant: "link",
+        onClick: ()=>move(index, index - 1)
+    }, "πάνω")), !isFirst && !isLast && ' ή ', !isLast && /*#__PURE__*/ react.createElement(react.Fragment, null, "προς τα", ' ', /*#__PURE__*/ react.createElement(Button, {
+        type: "button",
+        variant: "link",
+        onClick: ()=>move(index, index + 1)
+    }, "κάτω"))))) : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(TableRow, null, values?.map?.((value, valueIndex)=>{
+        const fieldKey = getFieldKey(ofField, valueIndex);
+        console.log('fieldKey', fieldKey);
+        const fieldValue = getFieldValue(value, valueIndex, ofField, valueDisplay);
+        console.log('fieldValue', fieldValue);
+        return /*#__PURE__*/ react.createElement(TableDataCell, {
+            key: valueIndex,
+            variant: borderVariant,
+            wordBreak: wordBreak,
+            pb: sortable ? 0 : void 0,
+            pt: sortable ? 4 : void 0,
+            highlight: !!error && Object.keys(error)?.includes(fieldKey) ? 'error' : void 0
+        }, sortable && 0 === valueIndex && /*#__PURE__*/ react.createElement(Heading, {
+            size: "sm",
+            mb: 2
+        }, "Επιλογή #", index + 1), fieldValue || '');
+    }), true === disabled || true === disabledEdit && true === disabledDelete ? null : /*#__PURE__*/ react.createElement(TableDataCell, {
+        variant: borderVariant
+    }, /*#__PURE__*/ react.createElement(Stack, stackProps, true !== disabledEdit && /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        onClick: ()=>{
+            edit(name);
+        }
+    }, "Επεξεργασία"), true !== disabledDelete && /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        onClick: ()=>remove(name)
+    }, "Διαγραφή")))), sortable && /*#__PURE__*/ react.createElement(TableRow, null, /*#__PURE__*/ react.createElement(TableDataCell, {
+        variant: isLast ? 'none' : 'border',
+        colSpan: true === disabled || true === disabledEdit && true === disabledDelete ? values.length : values.length + 1
+    }, sortable && !disabled && !(isFirst && isLast) && /*#__PURE__*/ react.createElement(Grid, {
+        xs: 12,
+        mt: 2
+    }, "Μετακίνηση", ' ', !isFirst && /*#__PURE__*/ react.createElement(react.Fragment, null, "προς τα", ' ', /*#__PURE__*/ react.createElement(Button, {
+        type: "button",
+        variant: "link",
+        onClick: ()=>move(index, index - 1)
+    }, "πάνω")), !isFirst && !isLast && ' ή ', !isLast && /*#__PURE__*/ react.createElement(react.Fragment, null, "προς τα", ' ', /*#__PURE__*/ react.createElement(Button, {
+        type: "button",
+        variant: "link",
+        onClick: ()=>move(index, index + 1)
+    }, "κάτω")))))));
+};
+export { ArrayItemDisplay };

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const ArrayItemHeader: ({ labels, disabled }: {
+    labels: any;
+    disabled: any;
+}) => React.JSX.Element;

package/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader.js

@@ -0,0 +1,6 @@
+import react from "react";
+import { TableHead, TableHeadCell, TableRow } from "@digigov/ui/content/index.js";
+const ArrayItemHeader = ({ labels, disabled })=>/*#__PURE__*/ react.createElement(TableHead, null, /*#__PURE__*/ react.createElement(TableRow, null, labels.map((label, index)=>/*#__PURE__*/ react.createElement(TableHeadCell, {
+            key: index
+        }, label)), !disabled && /*#__PURE__*/ react.createElement(TableHeadCell, null, "Ενέργειες")));
+export { ArrayItemHeader };

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { UseFieldArrayMove } from 'react-hook-form';
+export interface ArrayDisplayProps {
+    fieldArrayName: string;
+    fieldArrayValues: any[];
+    ofField: any;
+    customField: any;
+    onEdit: (index: number) => void;
+    onRemove: (index: number) => void;
+    move: UseFieldArrayMove;
+    sortable: boolean;
+    error?: any;
+}
+export declare const ArrayDisplay: ({ fieldArrayName, fieldArrayValues, ofField, customField, onEdit, onRemove, move, sortable, error, }: ArrayDisplayProps) => React.JSX.Element;
+export default ArrayDisplay;

package/FieldArray/FormDialog/ArrayDisplay/index.js

@@ -0,0 +1,32 @@
+import react from "react";
+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, {
+        fieldArrayValues: fieldArrayValues,
+        ofField: ofField,
+        customField: customField
+    }, fieldArrayValues?.map?.((field, index)=>/*#__PURE__*/ react.createElement(ArrayItemDisplay, {
+            error: error && error[index] ? error[index] : void 0,
+            key: index,
+            name: `${fieldArrayName}.${index}`,
+            index: index,
+            isFirst: 0 === index,
+            isLast: index === fieldArrayValues.length - 1,
+            data: field,
+            edit: ()=>onEdit(index),
+            stackProps: customField?.extra?.stackProps,
+            wordBreak: customField?.extra?.wordBreak,
+            valueDisplay: customField?.extra?.valueDisplay,
+            remove: ()=>onRemove(index),
+            border: customField.extra?.border,
+            move: move,
+            sortable: sortable,
+            disabledEdit: sortable ? true : customField.extra?.noEdit ?? false,
+            disabledDelete: customField.extra?.noDelete ?? false,
+            disabled: customField?.editable === false,
+            fieldArrayValues: fieldArrayValues,
+            ofField: ofField,
+            customField: customField
+        })));
+const FormDialog_ArrayDisplay = ArrayDisplay;
+export { ArrayDisplay, FormDialog_ArrayDisplay as default };

package/FieldArray/FormDialog/ArrayEditModal.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import type { ErrorOption } from 'react-hook-form';
+import type { FieldProps, FormData } from '../../Field/types.js';
+import type { ModalProps } from '@digigov/ui/app/Modal';
+export interface ArrayEditModalProps extends Omit<ModalProps, 'children'> {
+    type: 'append' | 'edit';
+    name: string;
+    title?: string;
+    hint?: string;
+    editOrAppend: (data: FormData) => void;
+    cancel: () => void;
+    addTitle?: string;
+    editLabel?: string;
+    editProps?: any;
+    appendLabel?: string;
+    appendProps?: any;
+    cancelLabel?: string;
+    cancelProps?: any;
+    ofField?: any;
+    defaultValue?: any;
+    Field: React.FC<FieldProps>;
+    error?: ErrorOption;
+}
+export declare const ArrayEditModal: React.ForwardRefExoticComponent<Omit<ArrayEditModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/FieldArray/FormDialog/ArrayEditModal.js

@@ -0,0 +1,138 @@
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useForm } from "react-hook-form";
+import { FieldObject } from "../../FieldObject/index.js";
+import { Fieldset } from "../../Fieldset/index.js";
+import { FormContext, useFormContext } from "../../FormContext.js";
+import { yupResolver } from "../../utils.js";
+import { useValidationSchema } from "../../validators/index.js";
+import { Modal, ModalAction, ModalContent, ModalHeading } 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 ArrayEditModal_ArrayEditModal = /*#__PURE__*/ react.forwardRef(function({ type, title, hint, defaultValue, editOrAppend, cancel, addTitle, editLabel, editProps, appendLabel, appendProps, cancelLabel, cancelProps, ofField, error: customErrors, Field, ...modalProps }, ref) {
+    const parentCtx = useFormContext();
+    const schema = useValidationSchema('object' === ofField.type && ofField.extra.fields ? Object.values(ofField.extra.fields) : [
+        ofField
+    ]);
+    const resolver = useMemo(()=>{
+        if (!schema) return;
+        return yupResolver(schema);
+    }, [
+        schema
+    ]);
+    const parentFormOptions = parentCtx.control._options;
+    const form = useForm({
+        resolver,
+        mode: parentFormOptions.mode,
+        reValidateMode: parentFormOptions.reValidateMode,
+        shouldFocusError: true,
+        criteriaMode: parentFormOptions.criteriaMode
+    });
+    const { reset, setValue, setError } = form;
+    useEffect(()=>{
+        if (modalProps.open) {
+            reset(void 0);
+            if ('edit' === type && customErrors) for (const [key, error] of Object.entries(customErrors))setError(key, 'string' == typeof error ? {
+                message: error
+            } : error);
+            if (defaultValue) Object.entries(defaultValue).forEach(([key, value])=>{
+                setValue(key, value);
+            });
+            if ('append' === type && ofField?.type === 'object' && ofField.extra?.fields) ofField.extra.fields.forEach((field)=>{
+                if (defaultValue && void 0 !== defaultValue[field.key]) return;
+                switch(field.type){
+                    case 'array':
+                        setValue(field.key, []);
+                        break;
+                    case 'object':
+                        setValue(field.key, {});
+                        break;
+                    default:
+                        setValue(field.key, '');
+                }
+            });
+        }
+    }, [
+        modalProps.open,
+        defaultValue,
+        reset,
+        setValue,
+        type,
+        ofField
+    ]);
+    const onSubmit = useCallback((data)=>{
+        editOrAppend(data);
+    }, [
+        editOrAppend
+    ]);
+    const handleSubmitWithoutPropagation = (e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        return form.handleSubmit(onSubmit)(e);
+    };
+    const formRef = useRef(null);
+    const ctx = {
+        ...parentCtx,
+        control: form.control,
+        register: form.register,
+        watch: form.watch,
+        resetField: form.resetField,
+        registerField: ()=>{},
+        registerFieldFocus: ()=>()=>{},
+        errors: form.formState.errors,
+        formState: form.formState,
+        reset: form.reset,
+        trigger: form.trigger,
+        getFieldState: form.getFieldState,
+        setValue: form.setValue,
+        clearErrors: form.clearErrors,
+        getValues: form.getValues,
+        getValuesFromParentForm: parentCtx.getValues,
+        unregister: form.unregister,
+        setError: form.setError,
+        formRef,
+        submit: form.handleSubmit(onSubmit)
+    };
+    return /*#__PURE__*/ react.createElement(ModalPortal, {
+        ...modalProps,
+        ref: ref,
+        "aria-labelledby": "modal-label"
+    }, /*#__PURE__*/ react.createElement(FormContext.Provider, {
+        value: ctx
+    }, /*#__PURE__*/ react.createElement("form", {
+        onSubmit: handleSubmitWithoutPropagation,
+        ref: formRef
+    }, /*#__PURE__*/ react.createElement(ModalHeading, {
+        id: "modal-label"
+    }, title ? title : 'edit' === type ? 'Επεξεργασία' : addTitle || 'Προσθήκη'), /*#__PURE__*/ react.createElement(ModalContent, null, hint && /*#__PURE__*/ react.createElement(Hint, null, hint), /*#__PURE__*/ react.createElement(Fieldset, null, ofField?.type === 'object' ? /*#__PURE__*/ react.createElement(FieldObject, {
+        ...ofField,
+        defaultValue: defaultValue || void 0,
+        formState: form.formState,
+        register: form.register,
+        control: form.control,
+        name: void 0,
+        Field: Field,
+        error: customErrors
+    }) : /*#__PURE__*/ react.createElement(Field, {
+        error: customErrors,
+        ...ofField
+    }))), /*#__PURE__*/ react.createElement(ModalAction, null, 'edit' === type ? /*#__PURE__*/ react.createElement(Button, {
+        color: "secondary",
+        ...editProps,
+        type: "submit"
+    }, editLabel || 'Αποθήκευση') : /*#__PURE__*/ react.createElement(Button, {
+        color: "primary",
+        ...appendProps,
+        type: "submit"
+    }, appendLabel || 'Προσθήκη'), /*#__PURE__*/ react.createElement(Button, {
+        variant: "link",
+        type: "button",
+        ...cancelProps,
+        onClick: (e)=>{
+            e.preventDefault();
+            cancel();
+        }
+    }, cancelLabel || 'Ακύρωση')))));
+});
+const ModalPortal = (props)=>/*#__PURE__*/ createPortal(/*#__PURE__*/ react.createElement(Modal, props), document.body);
+export { ArrayEditModal_ArrayEditModal as ArrayEditModal };

package/FieldArray/FormDialog/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
+import type { FieldProps } from '../../Field/types.js';
+export interface FormDialogProps extends FieldProps {
+    control: UseFormReturn['control'];
+    trigger: UseFormReturn['trigger'];
+    register: UseFormReturn['register'];
+    clearErrors: UseFormReturn['clearErrors'];
+    formState: UseFormReturn['formState'];
+    error?: ErrorOption;
+    getValues: UseFormReturn['getValues'];
+    setValue: UseFormReturn['setValue'];
+    reset: UseFormReturn['reset'];
+    resetField?: UseFormReturn['resetField'];
+    sortable: boolean;
+    Field: React.FC<FieldProps>;
+}
+export declare const FormDialog: React.ForwardRefExoticComponent<FormDialogProps & React.RefAttributes<HTMLButtonElement>>;
+export default FormDialog;