@digigov/form 2.0.0-264e5fff → 2.0.0-290ada95

package/Field/ErrorGroup.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ErrorOption } from 'react-hook-form';
-import type { FieldLabelProps } from '@digigov/form/Field/types';
+import type { FieldLabelProps } from './types.js';
 import type { Breakpoints } from '@digigov/ui/utils/hooks/useScreen';
-interface ErrorGroupContextType {
+export interface ErrorGroupContextType {
     setError: (name?: string, label?: FieldLabelProps, error?: ErrorOption) => void;
 }
 export declare const ErrorGroupContext: React.Context<ErrorGroupContextType | null>;

package/Field/ErrorGroup.js

@@ -0,0 +1,53 @@
+import react, { createContext, useEffect, useState } from "react";
+import { List, ListItem } from "@digigov/ui/content/List/index.js";
+import { ErrorSummary } from "@digigov/ui/feedback/ErrorSummary/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Link } from "@digigov/ui/navigation/Link/index.js";
+import { Heading } from "@digigov/ui/typography/Heading/index.js";
+import { Base } from "@digigov/ui/utils/Base/index.js";
+const ErrorGroupContext = /*#__PURE__*/ createContext(null);
+const ErrorGroup = ({ children, screenSize, fieldOrder })=>{
+    const [errors, setErrors] = useState({});
+    const { t } = useTranslation();
+    const setError = (name, label, error)=>{
+        if (errors[name] !== error && errors[name]?.message !== error?.message) if (error?.message) setErrors({
+            ...errors,
+            [name]: {
+                ...error,
+                label: label.primary
+            }
+        });
+        else {
+            const updatedErrors = {
+                ...errors
+            };
+            delete updatedErrors[name];
+            setErrors(updatedErrors);
+        }
+    };
+    useEffect(()=>{
+        setErrors({});
+    }, [
+        screenSize
+    ]);
+    return /*#__PURE__*/ react.createElement(ErrorGroupContext.Provider, {
+        value: {
+            setError
+        }
+    }, 0 !== Object.keys(errors).length && /*#__PURE__*/ react.createElement(ErrorSummary, {
+        variant: "error-group"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        size: "sm"
+    }, "Τα παρακάτω πεδία της φόρμας ειναι λάθος.", ' '), /*#__PURE__*/ react.createElement(List, {
+        listStyle: "bullet"
+    }, (fieldOrder || Object.keys(errors).reverse()).filter((fieldName)=>errors[fieldName]).map((fieldName, index)=>/*#__PURE__*/ react.createElement(ListItem, {
+            key: index,
+            id: `${fieldName}-error`
+        }, /*#__PURE__*/ react.createElement(Base, {
+            as: "b"
+        }, t(errors[fieldName]?.label), ":"), ' ', /*#__PURE__*/ react.createElement(Link, {
+            href: `#${fieldName}`
+        }, t(errors[fieldName]?.message)))))), children);
+};
+const Field_ErrorGroup = ErrorGroup;
+export { ErrorGroup, ErrorGroupContext, Field_ErrorGroup as default };

package/Field/FieldBase.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import type { FieldBaseProps } from '@digigov/form/Field/types';
+import type { FieldBaseProps } from './types.js';
 export declare const FieldBase: React.FC<FieldBaseProps>;

package/Field/FieldBase.js

@@ -0,0 +1,77 @@
+import react, { useContext, useEffect } from "react";
+import { Controller } from "react-hook-form";
+import { ErrorGroupContext } from "./ErrorGroup.js";
+import FieldBaseContainer from "./FieldBaseContainer.js";
+const FieldBase = ({ required, name, component: Component, wrapper, control, type, controlled = false, enabled = true, editable, defaultValue, label, extra = {}, layout, error, trim, register, ...componentProps })=>{
+    const errorGroupContext = useContext(ErrorGroupContext);
+    useEffect(()=>{
+        if (errorGroupContext) errorGroupContext.setError(name, label, error);
+    }, [
+        error,
+        name,
+        errorGroupContext?.setError
+    ]);
+    if (!enabled) return null;
+    if (controlled) return /*#__PURE__*/ react.createElement(FieldBaseContainer, {
+        label: label,
+        layout: layout,
+        register: register,
+        error: errorGroupContext ? void 0 : error,
+        hasError: !!error,
+        wrapper: wrapper,
+        name: name,
+        controlled: controlled
+    }, /*#__PURE__*/ react.createElement(Controller, {
+        control: control,
+        name: name,
+        render: ({ field })=>/*#__PURE__*/ react.createElement(Component, {
+                ...field,
+                control: control,
+                defaultValue: defaultValue ?? field.value,
+                extra: extra,
+                error: !!error,
+                type: type,
+                "aria-required": !!required,
+                "aria-describedby": error && `${name}-error`,
+                required: required,
+                disabled: false === editable,
+                trim: trim,
+                ...componentProps
+            })
+    }));
+    return /*#__PURE__*/ react.createElement(FieldBaseContainer, {
+        label: label,
+        layout: layout,
+        register: register,
+        error: errorGroupContext ? void 0 : error,
+        hasError: !!error,
+        wrapper: wrapper,
+        name: name
+    }, Component?.render ? /*#__PURE__*/ react.createElement(Component, {
+        ...register(name),
+        control: control,
+        error: !!error,
+        extra: extra,
+        type: type,
+        "aria-required": !!required,
+        "aria-describedby": error && `${name}-error`,
+        required: required,
+        disabled: false === editable,
+        defaultValue: defaultValue,
+        ...componentProps
+    }) : /*#__PURE__*/ react.createElement(Component, {
+        ...register(name),
+        register: register,
+        control: control,
+        error: !!error,
+        extra: extra,
+        type: type,
+        defaultValue: defaultValue,
+        "aria-required": !!required,
+        "aria-describedby": error && `${name}-error`,
+        required: required,
+        disabled: false === editable,
+        ...componentProps
+    }));
+};
+export { FieldBase };

package/Field/FieldBaseContainer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { FieldContainerProps } from '@digigov/form/Field/types';
+import type { FieldContainerProps } from './types.js';
 export declare const FieldBaseContainer: React.ForwardRefExoticComponent<FieldContainerProps & React.RefAttributes<HTMLFieldSetElement>>;
 export default FieldBaseContainer;

package/Field/FieldBaseContainer.js

@@ -0,0 +1,43 @@
+import react from "react";
+import Label from "../inputs/Label/index.js";
+import { ErrorMessage } from "@digigov/react-core/ErrorMessage/index.js";
+import FieldContainer from "@digigov/react-core/FieldContainer/index.js";
+import Fieldset from "@digigov/react-core/Fieldset/index.js";
+import FieldsetLegend from "@digigov/react-core/FieldsetLegend/index.js";
+import LabelContainer from "@digigov/react-core/LabelContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+const FieldBaseContainer_FieldBaseContainer = /*#__PURE__*/ react.forwardRef(({ name, wrapper, label, children, error, hasError, layout, controlled, labelSize = 'sm' }, ref)=>{
+    const { t } = useTranslation();
+    const errorMessage = error?.message.key ? error.message.key : error?.message || '';
+    const errorContext = error?.message.context || {};
+    if ('fieldset' === wrapper) return /*#__PURE__*/ react.createElement(FieldContainer, {
+        error: hasError,
+        ...layout
+    }, /*#__PURE__*/ react.createElement(Fieldset, {
+        ref: ref,
+        className: "outline-none",
+        ...controlled && {
+            tabIndex: -1
+        }
+    }, /*#__PURE__*/ react.createElement(FieldsetLegend, {
+        size: labelSize
+    }, label && label.primary), label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary)), error && /*#__PURE__*/ react.createElement(ErrorMessage, {
+        id: `${name}-error`
+    }, t(errorMessage, errorContext)), children, label && label.hint && /*#__PURE__*/ react.createElement(Hint, {
+        size: "sm"
+    }, label.hint)));
+    return /*#__PURE__*/ react.createElement(FieldContainer, {
+        error: hasError,
+        ...layout
+    }, /*#__PURE__*/ react.createElement(LabelContainer, null, label && /*#__PURE__*/ react.createElement(Label, {
+        label: label
+    }), error && /*#__PURE__*/ react.createElement(ErrorMessage, {
+        id: `${name}-error`
+    }, t(errorMessage, errorContext)), children, label && label.hint && /*#__PURE__*/ react.createElement(Hint, {
+        size: "sm"
+    }, label.hint)));
+});
+FieldBaseContainer_FieldBaseContainer.displayName = 'FieldBaseContainer';
+const FieldBaseContainer = FieldBaseContainer_FieldBaseContainer;
+export { FieldBaseContainer_FieldBaseContainer as FieldBaseContainer, FieldBaseContainer as default };

package/Field/FieldConditional.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { FieldConditionalProps } from '@digigov/form/Field/types';
+import type { FieldConditionalProps } from './types.js';
 export declare const FieldConditional: React.FC<FieldConditionalProps>;
 export default FieldConditional;

package/Field/FieldConditional.js

@@ -0,0 +1,45 @@
+import react from "react";
+import { useWatch } from "react-hook-form";
+import { FieldBase } from "./FieldBase.js";
+import { evaluateFieldWithConditions } from "./utils/evaluateFieldWithConditions.js";
+const ChildFieldMemo = /*#__PURE__*/ react.memo(function({ dependencies, field, control, reset, resetField, register, error, Field }) {
+    const newField = evaluateFieldWithConditions(field, dependencies);
+    return /*#__PURE__*/ react.createElement(FieldBase, {
+        ...newField,
+        Field: Field,
+        name: newField.key,
+        reset: reset,
+        resetField: resetField,
+        control: control,
+        register: register,
+        error: error
+    });
+}, (prev, next)=>{
+    if (!prev || !prev.dependencies) return false;
+    if (prev.error !== next.error) return false;
+    for(const dep in next.dependencies)if (next.dependencies[dep] !== prev.dependencies[dep]) return false;
+    return true;
+});
+const FieldConditional_FieldConditional = ({ control, field, register, reset, resetField, error, Field })=>{
+    const dependencyKeys = Object.keys(field.condition);
+    const dependencyValues = useWatch({
+        name: dependencyKeys,
+        control
+    });
+    const variables = dependencyKeys.reduce((data, fieldKey, index)=>({
+            ...data,
+            [fieldKey]: dependencyValues[index]
+        }), {});
+    return /*#__PURE__*/ react.createElement(ChildFieldMemo, {
+        dependencies: variables,
+        field: field,
+        control: control,
+        register: register,
+        reset: reset,
+        resetField: resetField,
+        error: error,
+        Field: Field
+    });
+};
+const FieldConditional = FieldConditional_FieldConditional;
+export { FieldConditional_FieldConditional as FieldConditional, FieldConditional as default };

package/Field/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { FieldProps } from '@digigov/form/Field/types';
+import type { FieldProps } from './types.js';
 export declare const Field: React.FC<FieldProps>;
 export default Field;

package/Field/index.js

@@ -1,110 +1,72 @@
-import React, { useMemo } from "react";
-import { FieldBase } from "@digigov/form/Field/FieldBase";
-import FieldConditional from "@digigov/form/Field/FieldConditional";
-import { resolveField } from "@digigov/form/Field/utils/resolveField";
-import { useField } from "@digigov/form/Field/utils/useField";
-import FieldArray from "@digigov/form/FieldArray";
-import Multiplicity from "@digigov/form/MultiplicityField";
-const Field = ({
-  name,
-  children,
-  ...customField
-}) => {
-  const {
-    field,
-    control,
-    register,
-    reset,
-    resetField,
-    error,
-    componentRegistry,
-    formState,
-    setValue,
-    getValues,
-    unregister,
-    trigger,
-    clearErrors,
-    registerFieldFocus
-  } = useField(name, customField?.type ? customField : null);
-  const resolvedField = useMemo(
-    () => resolveField(children, field, componentRegistry),
-    [field]
-  );
-  if (resolvedField.condition) {
-    return /* @__PURE__ */ React.createElement(
-      FieldConditional,
-      {
-        control,
-        reset,
-        resetField,
-        register,
+import react, { useMemo } from "react";
+import { FieldBase } from "./FieldBase.js";
+import FieldConditional from "./FieldConditional.js";
+import { resolveField } from "./utils/resolveField.js";
+import { useField } from "./utils/useField.js";
+import FieldArray from "../FieldArray/index.js";
+import MultiplicityField from "../MultiplicityField/index.js";
+const Field_Field = ({ name, children, ...customField })=>{
+    const { field, control, register, reset, resetField, error, componentRegistry, formState, setValue, getValues, unregister, trigger, clearErrors, registerFieldFocus } = useField(name, customField?.type ? customField : null);
+    const resolvedField = useMemo(()=>resolveField(children, field, componentRegistry), [
+        field
+    ]);
+    if (resolvedField.condition) return /*#__PURE__*/ react.createElement(FieldConditional, {
+        control: control,
+        reset: reset,
+        resetField: resetField,
+        register: register,
         field: resolvedField,
-        error,
-        Field
-      }
-    );
-  }
-  if (resolvedField.type === "array" && !resolvedField.multiplicity) {
-    resolvedField.name = name;
-    return /* @__PURE__ */ React.createElement(
-      FieldArray,
-      {
-        control,
-        trigger,
-        register,
-        clearErrors,
-        error,
-        getValues,
-        setValue,
-        formState,
-        Field,
-        reset,
-        resetField,
-        registerFieldFocus,
-        ...resolvedField
-      }
-    );
-  }
-  if (resolvedField.type === "array" && resolvedField.multiplicity === true) {
-    resolvedField.name = name;
-    return /* @__PURE__ */ React.createElement(
-      Multiplicity,
-      {
-        control,
-        register,
-        trigger,
-        clearErrors,
-        error,
-        formState,
-        setValue,
-        getValues,
-        unregister,
-        resetField,
-        Field,
-        ...resolvedField
-      }
-    );
-  }
-  const editable = customField.editable === false || customField.disabled === true ? false : true;
-  const customError = error ? error : formState?.errors[name];
-  return /* @__PURE__ */ React.createElement(
-    FieldBase,
-    {
-      ...resolvedField,
-      editable,
-      name,
-      control,
-      register,
-      reset,
-      error: customError,
-      resetField,
-      Field
+        error: error,
+        Field: Field_Field
+    });
+    if ('array' === resolvedField.type && !resolvedField.multiplicity) {
+        resolvedField.name = name;
+        return /*#__PURE__*/ react.createElement(FieldArray, {
+            control: control,
+            trigger: trigger,
+            register: register,
+            clearErrors: clearErrors,
+            error: error,
+            getValues: getValues,
+            setValue: setValue,
+            formState: formState,
+            Field: Field_Field,
+            reset: reset,
+            resetField: resetField,
+            registerFieldFocus: registerFieldFocus,
+            ...resolvedField
+        });
     }
-  );
-};
-var Field_default = Field;
-export {
-  Field,
-  Field_default as default
+    if ('array' === resolvedField.type && true === resolvedField.multiplicity) {
+        resolvedField.name = name;
+        return /*#__PURE__*/ react.createElement(MultiplicityField, {
+            control: control,
+            register: register,
+            trigger: trigger,
+            clearErrors: clearErrors,
+            error: error,
+            formState: formState,
+            setValue: setValue,
+            getValues: getValues,
+            unregister: unregister,
+            resetField: resetField,
+            Field: Field_Field,
+            ...resolvedField
+        });
+    }
+    const editable = false !== customField.editable && true !== customField.disabled;
+    const customError = error ? error : formState?.errors[name];
+    return /*#__PURE__*/ react.createElement(FieldBase, {
+        ...resolvedField,
+        editable: editable,
+        name: name,
+        control: control,
+        register: register,
+        reset: reset,
+        error: customError,
+        resetField: resetField,
+        Field: Field_Field
+    });
 };
-//# sourceMappingURL=index.js.map
+const Field = Field_Field;
+export { Field_Field as Field, Field as default };

package/Field/types.d.ts

@@ -1,8 +1,8 @@
 import type React from 'react';
 import type { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
-import type { FieldComponentRegistry } from '@digigov/form/inputs/registry';
-import type { registerFieldFocus } from '@digigov/form/types';
-import type { ValidatorSchema } from '@digigov/form/validators/types';
+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 {

package/Field/utils/evaluateFieldWithConditions.d.ts

@@ -1,2 +1,2 @@
-import type { FieldWithCondition, ResolvedField } from '@digigov/form/Field/types';
+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

@@ -1,3 +1,3 @@
-import type { FieldProps, FieldSpec, ResolvedField } from '@digigov/form/Field/types';
-import { type FieldComponentRegistry } from '@digigov/form/inputs/registry';
+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

@@ -1,2 +1,2 @@
-import type { FieldSpec, UseFieldProps } from '@digigov/form/Field/types';
+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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { FieldArrayProps } from '@digigov/form/FieldArray';
+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.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 };