@digigov/form 2.0.0-rc.7 → 2.0.2

package/Field/types.d.ts

@@ -1,11 +1,51 @@
-import React from 'react';
-import { ErrorOption, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form/types';
-import { FieldCondition, FormData } from '@digigov/form/types';
+import type React from 'react';
+import type { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
+import type { FieldComponentRegistry } from '../inputs/registry.js';
+import type { registerFieldFocus } from '../types.js';
+import type { ValidatorSchema } from '../validators/types.js';
+import type { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import type { GridProps } from '@digigov/ui/layouts/Grid';
+export interface FieldLabelProps {
+    primary?: string;
+    secondary?: string;
+    hint?: string;
+}
+export interface FieldSpec {
+    key: string;
+    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';
+    trim?: boolean;
+    component?: any;
+    autoComplete?: string;
+    placeholder?: string;
+    maxLength?: number;
+    condition?: Record<string, FieldCondition>;
+    controlled?: boolean;
+    label?: FieldLabelProps;
+    extra?: Record<string, any>;
+    editable?: boolean;
+    variant?: 'inline' | 'dialog';
+    required?: boolean;
+    enabled?: boolean;
+    disabled?: boolean;
+    layout?: Record<string, GridProps['xs'] | GridProps['sm'] | GridProps['md'] | GridProps['lg'] | GridProps['xl']>;
+    validators?: ValidatorSchema[];
+    wrapper?: 'label' | 'fieldset';
+    maxWidth?: string;
+    maxHeight?: string;
+    width?: string;
+    min?: number;
+    max?: number;
+}
+export interface FieldCondition {
+    is: string | string[] | number | number[] | boolean | boolean[];
+    then?: Partial<FieldSpec>;
+    else?: Partial<FieldSpec>;
+}
 export interface ChildFieldMemoProps extends FieldConditionalProps {
     dependencies: FormData;
 }
-export interface FieldWithCondition extends Omit<CalculatedField, 'condition'> {
+export type FormData = UseFormProps['defaultValues'];
+export interface FieldWithCondition extends Omit<ResolvedField, 'condition'> {
     condition: Record<string, FieldCondition>;
 }
 export interface FieldConditionalProps {
@@ -13,23 +53,27 @@ export interface FieldConditionalProps {
     control: UseFormReturn['control'];
     register: UseFormReturn['register'];
     reset: UseFormReturn['reset'];
+    resetField?: UseFormReturn['resetField'];
     error?: ErrorOption;
+    Field: React.FC<FieldProps>;
 }
-export type FieldComponentItem = {
+export interface FieldComponentItem {
     component: any;
     controlled?: boolean;
     wrapper?: FieldSpec['wrapper'];
-};
+}
 export interface FieldContainerProps {
     name?: FieldSpec['key'];
+    register: FieldBaseProps['register'];
     layout?: FieldSpec['layout'];
     label?: FieldSpec['label'];
     error?: ErrorOption | Record<string, any>;
+    hasError?: boolean;
     children?: React.ReactNode;
+    controlled?: boolean;
     wrapper?: FieldSpec['wrapper'];
+    labelSize?: FieldsetLegendProps['size'];
 }
-export type FieldComponentRegistry = Record<string, FieldComponentItem>;
-export type OmittedFieldSpec = Omit<FieldSpec, 'component'>;
 export type UnknownValue = never | never[];
 export interface ControlledFieldProps {
     type?: string;
@@ -41,6 +85,7 @@ export interface ControlledFieldProps {
     error?: boolean;
     name?: string;
     disabled?: boolean;
+    Field?: React.FC<FieldProps>;
 }
 export interface UncontrolledFieldProps {
     name: string;
@@ -50,8 +95,9 @@ export interface UncontrolledFieldProps {
     extra?: Record<string, never>;
     type?: string;
     disabled?: boolean;
+    Field: React.FC<FieldProps>;
 }
-export interface CalculatedField extends OmittedFieldSpec {
+export interface ResolvedField extends Omit<FieldSpec, 'component'> {
     name: string;
     component: any;
     defaultValue?: never;
@@ -59,10 +105,12 @@ export interface CalculatedField extends OmittedFieldSpec {
     wrapper?: FieldComponentItem['wrapper'];
     multiplicity?: boolean;
 }
-export interface FieldBaseProps extends CalculatedField {
+export interface FieldBaseProps extends ResolvedField {
     control: UseFormReturn['control'];
     register: UseFormReturn['register'];
     reset: UseFormReturn['reset'];
+    resetField?: UseFormReturn['resetField'];
+    Field?: React.FC<FieldProps>;
 }
 export interface FieldProps extends FieldSpec {
     name: string;
@@ -73,6 +121,7 @@ export interface UseFieldProps {
     control: FieldBaseProps['control'];
     register: FieldBaseProps['register'];
     reset: FieldBaseProps['reset'];
+    resetField: FieldBaseProps['resetField'];
     watch: UseFormReturn['watch'];
     formState: UseFormReturn['formState'];
     getFieldState: UseFormReturn['getFieldState'];
@@ -82,5 +131,6 @@ export interface UseFieldProps {
     trigger: UseFormReturn['trigger'];
     clearErrors: UseFormReturn['clearErrors'];
     error?: ErrorOption;
+    registerFieldFocus: registerFieldFocus;
     componentRegistry?: FieldComponentRegistry;
 }

package/Field/utils/evaluateFieldWithConditions.d.ts

@@ -0,0 +1,2 @@
+import type { FieldWithCondition, ResolvedField } from '../types.js';
+export declare function evaluateFieldWithConditions(field: FieldWithCondition, variables: FormData): ResolvedField;

package/Field/utils/evaluateFieldWithConditions.js

@@ -0,0 +1,19 @@
+function evaluateFieldWithConditions(field, variables) {
+    const newField = {
+        ...field
+    };
+    if (variables) {
+        for(const key in variables)if (field.condition[key] && field.condition[key].is) {
+            const is = field.condition[key].is;
+            if (is === variables[key] || Array.isArray(variables[key]) && variables[key].includes(is)) {
+                const then = field.condition[key].then || {};
+                for(const attr in then)newField[attr] = then[attr];
+            }
+        } else if (field.condition[key]) {
+            const otherwise = field.condition[key].else || {};
+            for(const attr in otherwise)newField[attr] = otherwise[attr];
+        }
+    }
+    return newField;
+}
+export { evaluateFieldWithConditions };

package/Field/utils/resolveField.d.ts

@@ -0,0 +1,3 @@
+import type { FieldProps, FieldSpec, ResolvedField } from '../types.js';
+import { type FieldComponentRegistry } from '../../inputs/registry.js';
+export declare function resolveField(children: FieldProps['children'], field: FieldSpec, customComponentRegistry?: FieldComponentRegistry): ResolvedField;

package/Field/utils/resolveField.js

@@ -0,0 +1,32 @@
+import { ALTERNATIVE_COMPONENTS, FIELD_COMPONENTS } from "../../inputs/registry.js";
+function resolveField(children, field, customComponentRegistry) {
+    const fieldComponentRegistry = {
+        ...FIELD_COMPONENTS,
+        ...customComponentRegistry ?? {}
+    };
+    const resolvedField = {
+        ...field
+    };
+    if (children) {
+        resolvedField.component = children;
+        resolvedField.controlled = true;
+    } else if ('function' == typeof field.component) ;
+    else if (field.component || field.type) if ('string' == typeof field?.extra?.component && ALTERNATIVE_COMPONENTS[field.extra.component]) {
+        resolvedField.controlled = ALTERNATIVE_COMPONENTS[field.extra.component]?.controlled || false;
+        resolvedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
+        resolvedField.wrapper = ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
+    } else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
+        resolvedField.component = fieldComponentRegistry[field.type].component;
+        resolvedField.wrapper = fieldComponentRegistry[field.type].wrapper;
+        resolvedField.controlled = fieldComponentRegistry[field.type]?.controlled || false;
+    } else {
+        resolvedField.component = fieldComponentRegistry.string.component;
+        resolvedField.controlled = fieldComponentRegistry.string?.controlled || false;
+    }
+    else {
+        resolvedField.component = fieldComponentRegistry.string.component;
+        resolvedField.controlled = fieldComponentRegistry.string?.controlled || false;
+    }
+    return resolvedField;
+}
+export { resolveField };

package/Field/utils/useField.d.ts

@@ -0,0 +1,2 @@
+import type { FieldSpec, UseFieldProps } from '../types.js';
+export declare const useField: (name: string, customField: FieldSpec | null) => UseFieldProps;

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>>;