@digigov/form 1.2.0-dcbd7ded → 2.0.0-07ee8440

package/Field/utils/useField/index.js

@@ -0,0 +1,57 @@
+import { useContext, useMemo } from "react";
+import { FormContext } from "@digigov/form/FormContext";
+const useField = (name, customField) => {
+  const {
+    fieldsMap,
+    control,
+    register,
+    reset,
+    trigger,
+    clearErrors,
+    errors,
+    registerField,
+    watch,
+    componentRegistry,
+    getFieldState,
+    setValue,
+    getValues,
+    unregister,
+    formState
+  } = 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)];
+  }
+  useMemo(
+    () => customField?.type && registerField({ ...customField, key: name }),
+    [customField, name, registerField]
+  );
+  return {
+    field: customField || fieldsMap[name],
+    control,
+    register,
+    reset,
+    trigger,
+    watch,
+    componentRegistry,
+    getFieldState,
+    setValue,
+    clearErrors,
+    getValues,
+    unregister,
+    formState,
+    error
+  };
+};
+export {
+  useField
+};
+//# sourceMappingURL=useField.js.map

package/{FormBuilder/FormBuilder → Field/utils/useField}/package.json

@@ -2,5 +2,5 @@
   "sideEffects": false,
   "module": "./index.js",
   "types": "./index.d.ts",
-  "main": "../../cjs/FormBuilder/FormBuilder/index.js"
+  "main": "../../../cjs/Field/utils/useField/index.js"
 }

package/Field/utils/useField.d.ts

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

package/Field/utils/useField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/Field/utils/useField.ts"],
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport { FieldSpec, UseFieldProps } from '@digigov/form/Field/types';\nimport { FormContext } from '@digigov/form/FormContext';\n\nexport const useField = (\n  name: string,\n  customField: FieldSpec | null\n): UseFieldProps => {\n  const {\n    fieldsMap,\n    control,\n    register,\n    reset,\n    trigger,\n    clearErrors,\n    errors,\n    registerField,\n    watch,\n    componentRegistry,\n    getFieldState,\n    setValue,\n    getValues,\n    unregister,\n    formState,\n  } = useContext(FormContext);\n  if (!registerField) {\n    throw new Error(`\n      You can't use the Field component without wrapping it in FormBuilder.\n      https://devs.pages.grnet.gr/digigov/digigov-sdk/sdk-docs/forms/create-simple-form/\n    `);\n  }\n  let error = errors[name];\n  const nameIndexRegex = name.match(/^(.*?)\\.(\\d+)$/);\n  if (nameIndexRegex) {\n    const [, fieldArrayName, indexStr] = nameIndexRegex;\n    error = errors[fieldArrayName]?.[Number(indexStr)];\n  }\n  useMemo(\n    () => customField?.type && registerField({ ...customField, key: name }),\n    [customField, name, registerField]\n  );\n  return {\n    field: customField || fieldsMap[name],\n    control,\n    register,\n    reset,\n    trigger,\n    watch,\n    componentRegistry,\n    getFieldState,\n    setValue,\n    clearErrors,\n    getValues,\n    unregister,\n    formState,\n    error,\n  };\n};\n"],
+  "mappings": "AAAA,SAAS,YAAY,eAAe;AAEpC,SAAS,mBAAmB;AAErB,MAAM,WAAW,CACtB,MACA,gBACkB;AAClB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,WAAW,WAAW;AAC1B,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM;AAAA;AAAA;AAAA,KAGf;AAAA,EACH;AACA,MAAI,QAAQ,OAAO,IAAI;AACvB,QAAM,iBAAiB,KAAK,MAAM,gBAAgB;AAClD,MAAI,gBAAgB;AAClB,UAAM,CAAC,EAAE,gBAAgB,QAAQ,IAAI;AACrC,YAAQ,OAAO,cAAc,IAAI,OAAO,QAAQ,CAAC;AAAA,EACnD;AACA;AAAA,IACE,MAAM,aAAa,QAAQ,cAAc,EAAE,GAAG,aAAa,KAAK,KAAK,CAAC;AAAA,IACtE,CAAC,aAAa,MAAM,aAAa;AAAA,EACnC;AACA,SAAO;AAAA,IACL,OAAO,eAAe,UAAU,IAAI;AAAA,IACpC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "names": []
+}

package/FieldArray/FieldArray.stories.d.ts

@@ -4,6 +4,7 @@ declare namespace _default {
     export let displayName: string;
 }
 export default _default;
-export * from "@digigov/form/FieldArray/__stories__/Default";
-export * from "@digigov/form/FieldArray/__stories__/WithExactLength";
+export { Default } from "@digigov/form/FieldArray/__stories__/Default";
+export { WithModal } from "@digigov/form/FieldArray/__stories__/WithModal";
+export { WithExactLength } from "@digigov/form/FieldArray/__stories__/WithExactLength";
 import FieldArray from '@digigov/form/FieldArray';

package/FieldArray/FormDialog/index.js

@@ -0,0 +1,279 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useFieldArray } from "react-hook-form";
+import { FieldObject } from "@digigov/form/FieldObject";
+import { Fieldset } from "@digigov/form/Fieldset";
+import {
+  Modal,
+  ModalAction,
+  ModalContent,
+  ModalHeading,
+  useModal
+} from "@digigov/ui/app/Modal";
+import {
+  Table,
+  TableBody,
+  TableContainer,
+  TableDataCell,
+  TableHead,
+  TableHeadCell,
+  TableRow
+} from "@digigov/ui/content";
+import { Button, ButtonGroup } from "@digigov/ui/form/Button";
+import { Hint } from "@digigov/ui/typography/Hint";
+const FormDialog = ({
+  name,
+  trigger,
+  register,
+  control,
+  formState,
+  error,
+  getValues,
+  Field,
+  reset,
+  ...customField
+}) => {
+  const [isAppending, setIsAppending] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const { fields, append, remove, update } = useFieldArray({
+    control,
+    name
+  });
+  const { open, close, registerModal } = useModal();
+  const currentLength = fields.length > 0 ? fields.length - 1 : fields.length;
+  const currentName = isAppending ? `${name}.${currentLength}` : `${name}.${currentIndex}`;
+  useEffect(() => {
+    if (isAppending) {
+      setCurrentIndex(currentLength);
+      open(`modal-${name}`);
+    }
+  }, [isAppending]);
+  const valuesRef = useRef(null);
+  if (!error) {
+    const values2 = getValues(currentName);
+    if (typeof values2 === "object") {
+      valuesRef.current = { ...values2 };
+    } else {
+      valuesRef.current = values2;
+    }
+  }
+  const values = getValues(name);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    ArrayItemModal,
+    {
+      title: customField.extra?.label.object.title && `${customField.extra?.label.object.title} ${currentLength + 1}`,
+      hint: customField.label?.secondary,
+      name,
+      editOrAppend: async () => {
+        const hasNoErrors = await trigger(
+          customField.extra?.of.extra ? customField.extra?.of.extra.fields.map(
+            ({ key }) => `${currentName}.${key}`
+          ) : currentName
+        );
+        if (hasNoErrors) {
+          const newValues = getValues(currentName);
+          if (isAppending) {
+            setIsAppending(false);
+          }
+          if (customField?.extra?.of?.extra) {
+            update(currentIndex, newValues);
+          } else {
+            update(currentIndex, newValues);
+          }
+          close();
+        }
+      },
+      cancel: () => {
+        if (isAppending) {
+          setIsAppending(false);
+          remove(currentIndex);
+          close();
+          return;
+        }
+        update(currentIndex, valuesRef.current);
+        reset(void 0, {
+          keepTouched: true,
+          keepDefaultValues: true,
+          keepIsValid: true,
+          keepIsSubmitted: true,
+          keepValues: true
+        });
+        close();
+      },
+      type: isAppending ? "append" : "edit",
+      appendLabel: customField.extra?.label.object.append.label,
+      appendProps: customField.extra?.label.object.append.props,
+      editLabel: customField.extra?.label.object.edit.label,
+      editProps: customField.extra?.label.object.edit.props,
+      cancelLabel: customField.extra?.label.object.cancel.label,
+      cancelProps: customField.extra?.label.object.cancel.props,
+      ...registerModal(`modal-${name}`)
+    },
+    /* @__PURE__ */ React.createElement(Fieldset, null, customField.extra?.of?.type === "object" ? /* @__PURE__ */ React.createElement(
+      FieldObject,
+      {
+        defaultValue: getValues(currentName) || void 0,
+        name: currentName,
+        error: error && error[currentIndex],
+        formState,
+        register,
+        control,
+        ...customField.extra?.of,
+        Field
+      }
+    ) : /* @__PURE__ */ React.createElement(
+      Field,
+      {
+        name: currentName,
+        ...customField.extra?.of,
+        error: error && error[currentIndex],
+        key: currentName
+      }
+    ))
+  ), /* @__PURE__ */ React.createElement(TableContainer, null, /* @__PURE__ */ React.createElement(Table, null, !customField.extra?.noHeader && customField.extra?.of?.extra && /* @__PURE__ */ React.createElement(
+    ArrayItemHeader,
+    {
+      labels: customField.extra?.of.extra.fields.map(
+        ({ label }) => label.primary
+      ),
+      disabled: customField.extra?.editable === false
+    }
+  ), /* @__PURE__ */ React.createElement(TableBody, null, values?.map((field, index) => {
+    return /* @__PURE__ */ React.createElement(
+      ArrayItemDisplay,
+      {
+        key: index,
+        name: `${name}.${index}`,
+        data: field,
+        edit: () => {
+          setCurrentIndex(index);
+          open(`modal-${name}`);
+        },
+        remove: () => {
+          remove(index);
+        },
+        disabledEdit: customField.extra?.noEdit ?? false,
+        disabledDelete: customField.extra?.noDelete ?? false,
+        disabled: customField.extra?.editable ?? false
+      }
+    );
+  })))), /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: customField.extra?.label.object?.addButtonVariant === "link" ? "px-2 py-2 bg-gray-200 border-t border-b border-gray-400" : ""
+    },
+    /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        name: `${name}-add-object`,
+        color: "secondary",
+        variant: customField.extra?.label.object?.addButtonVariant,
+        onClick: (ev) => {
+          ev.preventDefault();
+          if (customField.extra?.of?.extra) {
+            append({});
+          } else {
+            append("");
+          }
+          setCurrentIndex(currentLength + 1);
+          setIsAppending(true);
+        },
+        disabled: !customField?.editable
+      },
+      customField.extra?.label.object?.add
+    )
+  ));
+};
+const ArrayItemModal = ({
+  type,
+  name,
+  title,
+  hint,
+  editOrAppend,
+  cancel,
+  editLabel,
+  editProps,
+  appendLabel,
+  appendProps,
+  cancelLabel,
+  cancelProps,
+  children,
+  ...props
+}) => {
+  return /* @__PURE__ */ React.createElement(Modal, { ...props, "aria-labelledby": "modal-label" }, /* @__PURE__ */ React.createElement(ModalHeading, { id: "modal-label" }, title ? title : type === "edit" ? "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1" : "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7"), /* @__PURE__ */ React.createElement(ModalContent, null, hint && /* @__PURE__ */ React.createElement(Hint, null, hint), children), /* @__PURE__ */ React.createElement(ModalAction, null, type === "edit" ? /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "secondary",
+      ...editProps,
+      onClick: async (e) => {
+        e.preventDefault();
+        editOrAppend(name);
+      }
+    },
+    editLabel || "\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7"
+  ) : /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "primary",
+      ...appendProps,
+      onClick: async (e) => {
+        e.preventDefault();
+        editOrAppend(name);
+      }
+    },
+    appendLabel || "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7"
+  ), /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "link",
+      ...cancelProps,
+      onClick: (e) => {
+        e.preventDefault();
+        cancel(name);
+      }
+    },
+    cancelLabel || "\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7"
+  )));
+};
+const ArrayItemHeader = ({ labels, disabled }) => {
+  return /* @__PURE__ */ React.createElement(TableHead, null, /* @__PURE__ */ React.createElement(TableRow, null, labels.map((label, index) => {
+    return /* @__PURE__ */ React.createElement(TableHeadCell, { key: index }, label);
+  }), !disabled && /* @__PURE__ */ React.createElement(TableHeadCell, null, "\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2")));
+};
+const ArrayItemDisplay = ({
+  name,
+  data,
+  edit,
+  remove,
+  disabledEdit,
+  disabledDelete,
+  disabled
+}) => {
+  if (Object.keys(data).length === 0 || Object.keys(data).length === 1 && data.id) {
+    return null;
+  }
+  delete data.id;
+  const values = typeof data === "string" ? [data] : Object.values(data);
+  return /* @__PURE__ */ React.createElement(TableRow, null, values.map((value, index) => {
+    return /* @__PURE__ */ React.createElement(TableDataCell, { key: index }, value || "");
+  }), disabled === true || disabledEdit === true && disabledDelete === true ? null : /* @__PURE__ */ React.createElement(TableDataCell, null, /* @__PURE__ */ React.createElement(ButtonGroup, null, disabledEdit !== true && /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      variant: "link",
+      type: "button",
+      onClick: () => {
+        edit(name);
+      }
+    },
+    "\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1"
+  ), disabledDelete !== true && /* @__PURE__ */ React.createElement(Button, { variant: "link", type: "button", onClick: () => remove(name) }, "\u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE"))));
+};
+var FormDialog_default = FormDialog;
+export {
+  ArrayItemDisplay,
+  ArrayItemHeader,
+  ArrayItemModal,
+  FormDialog,
+  FormDialog_default as default
+};
+//# sourceMappingURL=FormDialog.js.map

package/{validators/validators.spec → FieldArray/FormDialog}/package.json

@@ -2,5 +2,5 @@
   "sideEffects": false,
   "module": "./index.js",
   "types": "./index.d.ts",
-  "main": "../../cjs/validators/validators.spec/index.js"
+  "main": "../../cjs/FieldArray/FormDialog/index.js"
 }

package/FieldArray/FormDialog.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import { FieldProps } from '@digigov/form/Field/types';
+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'];
+    Field: React.FC<FieldProps>;
+}
+export interface DialogProps {
+    name: string;
+    heading: string;
+    actions: React.ReactNode;
+    children: React.ReactNode;
+    registerModal: (any: any) => {};
+}
+export declare const FormDialog: React.FC<FormDialogProps>;
+export declare const ArrayItemModal: ({ type, name, title, hint, editOrAppend, cancel, editLabel, editProps, appendLabel, appendProps, cancelLabel, cancelProps, children, ...props }: {
+    type: "append" | "edit";
+    name: string;
+    title?: string;
+    hint?: string;
+    editOrAppend: (name: string) => void;
+    cancel: (name: string) => void;
+    editLabel?: string;
+    editProps?: any;
+    appendLabel?: string;
+    appendProps?: any;
+    cancelLabel?: string;
+    cancelProps?: any;
+    children: React.ReactNode;
+    [key: string]: any;
+}) => React.JSX.Element;
+export declare const ArrayItemHeader: ({ labels, disabled }: {
+    labels: any;
+    disabled: any;
+}) => React.JSX.Element;
+export declare const ArrayItemDisplay: ({ name, data, edit, remove, disabledEdit, disabledDelete, disabled, }: {
+    data: any;
+    name: string;
+    edit: (name: string) => void;
+    remove: (name: string) => void;
+    disabledEdit?: boolean;
+    disabledDelete?: boolean;
+    disabled?: boolean;
+}) => React.JSX.Element | null;
+export default FormDialog;

package/FieldArray/FormDialog.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/FieldArray/FormDialog.tsx"],
+  "sourcesContent": ["import React, { useEffect, useRef, useState } from 'react';\nimport { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';\nimport { FieldProps } from '@digigov/form/Field/types';\nimport { FieldObject } from '@digigov/form/FieldObject';\nimport { Fieldset } from '@digigov/form/Fieldset';\nimport {\n  Modal,\n  ModalAction,\n  ModalContent,\n  ModalHeading,\n  useModal,\n} from '@digigov/ui/app/Modal';\nimport {\n  Table,\n  TableBody,\n  TableContainer,\n  TableDataCell,\n  TableHead,\n  TableHeadCell,\n  TableRow,\n} from '@digigov/ui/content';\nimport { Button, ButtonGroup } from '@digigov/ui/form/Button';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport interface FormDialogProps extends FieldProps {\n  control: UseFormReturn['control'];\n  trigger: UseFormReturn['trigger'];\n  register: UseFormReturn['register'];\n  clearErrors: UseFormReturn['clearErrors'];\n  formState: UseFormReturn['formState'];\n  error?: ErrorOption;\n  getValues: UseFormReturn['getValues'];\n  setValue: UseFormReturn['setValue'];\n  reset: UseFormReturn['reset'];\n  Field: React.FC<FieldProps>;\n}\n\nexport interface DialogProps {\n  name: string;\n  heading: string;\n  actions: React.ReactNode;\n  children: React.ReactNode;\n  registerModal: (any) => {};\n}\n\nexport const FormDialog: React.FC<FormDialogProps> = ({\n  name,\n  trigger,\n  register,\n  control,\n  formState,\n  error,\n  getValues,\n  Field,\n  reset,\n  ...customField\n}) => {\n  const [isAppending, setIsAppending] = useState(false);\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const { fields, append, remove, update } = useFieldArray({\n    control,\n    name,\n  });\n  const { open, close, registerModal } = useModal();\n  const currentLength = fields.length > 0 ? fields.length - 1 : fields.length;\n  const currentName = isAppending\n    ? `${name}.${currentLength}`\n    : `${name}.${currentIndex}`;\n  useEffect(() => {\n    if (isAppending) {\n      setCurrentIndex(currentLength);\n      open(`modal-${name}`);\n    }\n  }, [isAppending]);\n\n  const valuesRef = useRef(null);\n  if (!error) {\n    const values = getValues(currentName);\n    if (typeof values === 'object') {\n      valuesRef.current = { ...values };\n    } else {\n      valuesRef.current = values;\n    }\n  }\n  const values = getValues(name);\n  return (\n    <>\n      <ArrayItemModal\n        title={\n          customField.extra?.label.object.title &&\n          `${customField.extra?.label.object.title} ${currentLength + 1}`\n        }\n        hint={customField.label?.secondary}\n        name={name}\n        editOrAppend={async () => {\n          const hasNoErrors = await trigger(\n            customField.extra?.of.extra\n              ? customField.extra?.of.extra.fields.map(\n                  ({ key }) => `${currentName}.${key}`\n                )\n              : currentName\n          );\n          if (hasNoErrors) {\n            const newValues = getValues(currentName);\n            if (isAppending) {\n              setIsAppending(false);\n            }\n            if (customField?.extra?.of?.extra) {\n              update(currentIndex, newValues);\n            } else {\n              update(currentIndex, newValues);\n            }\n            close();\n          }\n        }}\n        cancel={() => {\n          if (isAppending) {\n            setIsAppending(false);\n            remove(currentIndex);\n            close();\n            return;\n          }\n          update(currentIndex, valuesRef.current);\n          reset(undefined, {\n            keepTouched: true,\n            keepDefaultValues: true,\n            keepIsValid: true,\n            keepIsSubmitted: true,\n            keepValues: true,\n          });\n          close();\n        }}\n        type={isAppending ? 'append' : 'edit'}\n        appendLabel={customField.extra?.label.object.append.label}\n        appendProps={customField.extra?.label.object.append.props}\n        editLabel={customField.extra?.label.object.edit.label}\n        editProps={customField.extra?.label.object.edit.props}\n        cancelLabel={customField.extra?.label.object.cancel.label}\n        cancelProps={customField.extra?.label.object.cancel.props}\n        {...registerModal(`modal-${name}`)}\n      >\n        <Fieldset>\n          {customField.extra?.of?.type === 'object' ? (\n            <FieldObject\n              defaultValue={getValues(currentName) || undefined}\n              name={currentName}\n              error={error && error[currentIndex]}\n              formState={formState}\n              register={register}\n              control={control}\n              {...customField.extra?.of}\n              Field={Field}\n            />\n          ) : (\n            <Field\n              name={currentName}\n              {...customField.extra?.of}\n              error={error && error[currentIndex]}\n              key={currentName}\n            />\n          )}\n        </Fieldset>\n      </ArrayItemModal>\n      <TableContainer>\n        <Table>\n          {!customField.extra?.noHeader && customField.extra?.of?.extra && (\n            <ArrayItemHeader\n              labels={customField.extra?.of.extra.fields.map(\n                ({ label }) => label.primary\n              )}\n              disabled={customField.extra?.editable === false}\n            />\n          )}\n          <TableBody>\n            {values?.map((field, index) => {\n              return (\n                <ArrayItemDisplay\n                  key={index}\n                  name={`${name}.${index}`}\n                  data={field}\n                  edit={() => {\n                    setCurrentIndex(index);\n                    open(`modal-${name}`);\n                  }}\n                  remove={() => {\n                    remove(index);\n                  }}\n                  disabledEdit={customField.extra?.noEdit ?? false}\n                  disabledDelete={customField.extra?.noDelete ?? false}\n                  disabled={customField.extra?.editable ?? false}\n                />\n              );\n            })}\n          </TableBody>\n        </Table>\n      </TableContainer>\n      <div\n        className={\n          customField.extra?.label.object?.addButtonVariant === 'link'\n            ? 'px-2 py-2 bg-gray-200 border-t border-b border-gray-400'\n            : ''\n        }\n      >\n        <Button\n          type=\"button\"\n          name={`${name}-add-object`}\n          color=\"secondary\"\n          variant={customField.extra?.label.object?.addButtonVariant}\n          onClick={(ev) => {\n            ev.preventDefault();\n            if (customField.extra?.of?.extra) {\n              append({});\n            } else {\n              append('');\n            }\n            setCurrentIndex(currentLength + 1);\n            setIsAppending(true);\n          }}\n          disabled={!customField?.editable}\n        >\n          {customField.extra?.label.object?.add}\n        </Button>\n      </div>\n    </>\n  );\n};\n\nexport const ArrayItemModal = ({\n  type,\n  name,\n  title,\n  hint,\n  editOrAppend,\n  cancel,\n  editLabel,\n  editProps,\n  appendLabel,\n  appendProps,\n  cancelLabel,\n  cancelProps,\n  children,\n  ...props\n}: {\n  type: 'append' | 'edit';\n  name: string;\n  title?: string;\n  hint?: string;\n  editOrAppend: (name: string) => void;\n  cancel: (name: string) => void;\n  editLabel?: string;\n  editProps?: any;\n  appendLabel?: string;\n  appendProps?: any;\n  cancelLabel?: string;\n  cancelProps?: any;\n  children: React.ReactNode;\n  [key: string]: any;\n}) => {\n  return (\n    <Modal {...props} aria-labelledby=\"modal-label\">\n      <ModalHeading id=\"modal-label\">\n        {title ? title : type === 'edit' ? '\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1' : '\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7'}\n      </ModalHeading>\n      <ModalContent>\n        {hint && <Hint>{hint}</Hint>}\n        {children}\n      </ModalContent>\n      <ModalAction>\n        {type === 'edit' ? (\n          <Button\n            color=\"secondary\"\n            {...editProps}\n            onClick={async (e) => {\n              e.preventDefault();\n              editOrAppend(name);\n            }}\n          >\n            {editLabel || '\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7'}\n          </Button>\n        ) : (\n          <Button\n            color=\"primary\"\n            {...appendProps}\n            onClick={async (e) => {\n              e.preventDefault();\n              editOrAppend(name);\n            }}\n          >\n            {appendLabel || '\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7'}\n          </Button>\n        )}\n        <Button\n          variant=\"link\"\n          {...cancelProps}\n          onClick={(e) => {\n            e.preventDefault();\n            cancel(name);\n          }}\n        >\n          {cancelLabel || '\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7'}\n        </Button>\n      </ModalAction>\n    </Modal>\n  );\n};\n\nexport const ArrayItemHeader = ({ labels, disabled }) => {\n  return (\n    <TableHead>\n      <TableRow>\n        {labels.map((label, index) => {\n          return <TableHeadCell key={index}>{label}</TableHeadCell>;\n        })}\n        {!disabled && <TableHeadCell>\u0395\u03BD\u03AD\u03C1\u03B3\u03B5\u03B9\u03B5\u03C2</TableHeadCell>}\n      </TableRow>\n    </TableHead>\n  );\n};\n\nexport const ArrayItemDisplay = ({\n  name,\n  data,\n  edit,\n  remove,\n  disabledEdit,\n  disabledDelete,\n  disabled,\n}: {\n  data: any;\n  name: string;\n  edit: (name: string) => void;\n  remove: (name: string) => void;\n  disabledEdit?: boolean;\n  disabledDelete?: boolean;\n  disabled?: boolean;\n}) => {\n  if (\n    Object.keys(data).length === 0 ||\n    (Object.keys(data).length === 1 && data.id)\n  ) {\n    return null;\n  }\n  delete data.id;\n  const values: string[] =\n    typeof data === 'string' ? [data] : Object.values(data);\n  return (\n    <TableRow>\n      {values.map((value, index) => {\n        return <TableDataCell key={index}>{value || ''}</TableDataCell>;\n      })}\n      {disabled === true ||\n      (disabledEdit === true && disabledDelete === true) ? null : (\n        <TableDataCell>\n          <ButtonGroup>\n            {disabledEdit !== true && (\n              <Button\n                variant=\"link\"\n                type=\"button\"\n                onClick={() => {\n                  edit(name);\n                }}\n              >\n                \u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1\n              </Button>\n            )}\n            {disabledDelete !== true && (\n              <Button variant=\"link\" type=\"button\" onClick={() => remove(name)}>\n                \u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE\n              </Button>\n            )}\n          </ButtonGroup>\n        </TableDataCell>\n      )}\n    </TableRow>\n  );\n};\n\nexport default FormDialog;\n"],
+  "mappings": "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",
+  "names": ["values"]
+}

package/FieldArray/__stories__/Default.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const Default: () => JSX.Element;
+import React from 'react';
+export declare const Default: () => React.JSX.Element;

package/FieldArray/__stories__/WithExactLength.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const WithExactLength: () => JSX.Element;
+import React from 'react';
+export declare const WithExactLength: () => React.JSX.Element;

package/FieldArray/__stories__/WithModal.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const WithModal: () => React.JSX.Element;

package/FieldArray/index.d.ts

@@ -3,9 +3,15 @@ import { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldProps } from '@digigov/form/Field/types';
 export interface FieldArrayProps 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'];
+    Field: React.FC<FieldProps>;
 }
 export declare const FieldArray: React.FC<FieldArrayProps>;
 export default FieldArray;