@digigov/form 2.0.0-d57821ba → 2.0.0-e7d30530

package/Field/utils/index.js

@@ -1,11 +1,12 @@
 import AutoCompleteInput from "@digigov/form/inputs/AutoCompleteInput";
 import Checkboxes from "@digigov/form/inputs/Checkboxes";
 import DateInput from "@digigov/form/inputs/DateInput";
+import DateTimeInput from "@digigov/form/inputs/DateTimeInput";
 import FileInput from "@digigov/form/inputs/FileInput";
 import ImageInput from "@digigov/form/inputs/ImageInput";
 import Input from "@digigov/form/inputs/Input";
 import OtpInput from "@digigov/form/inputs/OtpInput";
-import Radio from "@digigov/form/inputs/Radio";
+import Radio, { ControlledRadioButtonsGroup } from "@digigov/form/inputs/Radio";
 import Select from "@digigov/form/inputs/Select";
 const FIELD_COMPONENTS = {
   text: {
@@ -17,16 +18,23 @@ const FIELD_COMPONENTS = {
   file: {
     wrapper: "fieldset",
     component: FileInput
+    // controlled: true,
   },
   image: {
     wrapper: "fieldset",
-    component: ImageInput
+    component: ImageInput,
+    controlled: true
   },
   date: {
     wrapper: "fieldset",
     controlled: true,
     component: DateInput
   },
+  datetime: {
+    wrapper: "fieldset",
+    controlled: true,
+    component: DateTimeInput
+  },
   otp: {
     wrapper: "fieldset",
     controlled: true,
@@ -54,8 +62,25 @@ const ALTERNATIVE_COMPONENTS = {
     wrapper: "fieldset"
   }
 };
+const CONTROLLED_FIELD_COMPONENTS = {
+  ...FIELD_COMPONENTS,
+  "choice:single": {
+    wrapper: "fieldset",
+    controlled: true,
+    component: ControlledRadioButtonsGroup
+  },
+  text: {
+    component: Input,
+    controlled: true
+  },
+  string: {
+    component: Input,
+    controlled: true
+  }
+};
 export {
   ALTERNATIVE_COMPONENTS,
+  CONTROLLED_FIELD_COMPONENTS,
   FIELD_COMPONENTS
 };
 //# sourceMappingURL=index.js.map

package/Field/utils/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Field/utils/index.ts"],
-  "sourcesContent": ["import { FieldComponentRegistry } from '@digigov/form/Field/types';\nimport AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';\nimport Checkboxes from '@digigov/form/inputs/Checkboxes';\nimport DateInput from '@digigov/form/inputs/DateInput';\nimport FileInput from '@digigov/form/inputs/FileInput';\nimport ImageInput from '@digigov/form/inputs/ImageInput';\nimport Input from '@digigov/form/inputs/Input';\nimport OtpInput from '@digigov/form/inputs/OtpInput';\nimport Radio from '@digigov/form/inputs/Radio';\nimport Select from '@digigov/form/inputs/Select';\n\nexport const FIELD_COMPONENTS: FieldComponentRegistry = {\n  text: {\n    component: Input,\n  },\n  string: {\n    component: Input,\n  },\n  file: {\n    wrapper: 'fieldset',\n    component: FileInput,\n  },\n  image: {\n    wrapper: 'fieldset',\n    component: ImageInput,\n  },\n  date: {\n    wrapper: 'fieldset',\n    controlled: true,\n    component: DateInput,\n  },\n  otp: {\n    wrapper: 'fieldset',\n    controlled: true,\n    component: OtpInput,\n  },\n  'choice:multiple': {\n    wrapper: 'fieldset',\n    controlled: true,\n    component: Checkboxes,\n  },\n  'choice:single': {\n    wrapper: 'fieldset',\n    controlled: false,\n    component: Radio,\n  },\n};\n\nexport const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {\n  Select: {\n    component: Select,\n    controlled: false,\n  },\n  AutoComplete: {\n    component: AutoCompleteInput,\n    controlled: true,\n    wrapper: 'fieldset',\n  },\n};\n"],
-  "mappings": "AACA,OAAO,uBAAuB;AAC9B,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB,OAAO,WAAW;AAClB,OAAO,YAAY;AAEZ,MAAM,mBAA2C;AAAA,EACtD,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,IACjB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AACF;AAEO,MAAM,yBAAiD;AAAA,EAC5D,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,cAAc;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACF;",
+  "sourcesContent": ["import { FieldComponentRegistry } from '@digigov/form/Field/types';\nimport AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';\nimport Checkboxes from '@digigov/form/inputs/Checkboxes';\nimport DateInput from '@digigov/form/inputs/DateInput';\nimport DateTimeInput from '@digigov/form/inputs/DateTimeInput';\nimport FileInput from '@digigov/form/inputs/FileInput';\nimport ImageInput from '@digigov/form/inputs/ImageInput';\nimport Input from '@digigov/form/inputs/Input';\nimport OtpInput from '@digigov/form/inputs/OtpInput';\nimport Radio, { ControlledRadioButtonsGroup } from '@digigov/form/inputs/Radio';\nimport Select from '@digigov/form/inputs/Select';\n\nexport const FIELD_COMPONENTS: FieldComponentRegistry = {\n  text: {\n    component: Input,\n  },\n  string: {\n    component: Input,\n  },\n  file: {\n    wrapper: 'fieldset',\n    component: FileInput,\n    // controlled: true,\n  },\n  image: {\n    wrapper: 'fieldset',\n    component: ImageInput,\n    controlled: true,\n  },\n  date: {\n    wrapper: 'fieldset',\n    controlled: true,\n    component: DateInput,\n  },\n  datetime: {\n    wrapper: 'fieldset',\n    controlled: true,\n    component: DateTimeInput,\n  },\n  otp: {\n    wrapper: 'fieldset',\n    controlled: true,\n    component: OtpInput,\n  },\n  'choice:multiple': {\n    wrapper: 'fieldset',\n    controlled: true,\n    component: Checkboxes,\n  },\n  'choice:single': {\n    wrapper: 'fieldset',\n    controlled: false,\n    component: Radio,\n  },\n};\n\nexport const ALTERNATIVE_COMPONENTS: FieldComponentRegistry = {\n  Select: {\n    component: Select,\n    controlled: false,\n  },\n  AutoComplete: {\n    component: AutoCompleteInput,\n    controlled: true,\n    wrapper: 'fieldset',\n  },\n};\n\nexport const CONTROLLED_FIELD_COMPONENTS: FieldComponentRegistry = {\n  ...FIELD_COMPONENTS,\n  'choice:single': {\n    wrapper: 'fieldset',\n    controlled: true,\n    component: ControlledRadioButtonsGroup,\n  },\n  text: {\n    component: Input,\n    controlled: true,\n  },\n  string: {\n    component: Input,\n    controlled: true,\n  },\n};\n"],
+  "mappings": "AACA,OAAO,uBAAuB;AAC9B,OAAO,gBAAgB;AACvB,OAAO,eAAe;AACtB,OAAO,mBAAmB;AAC1B,OAAO,eAAe;AACtB,OAAO,gBAAgB;AACvB,OAAO,WAAW;AAClB,OAAO,cAAc;AACrB,OAAO,SAAS,mCAAmC;AACnD,OAAO,YAAY;AAEZ,MAAM,mBAA2C;AAAA,EACtD,MAAM;AAAA,IACJ,WAAW;AAAA,EACb;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAW;AAAA;AAAA,EAEb;AAAA,EACA,OAAO;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,KAAK;AAAA,IACH,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,mBAAmB;AAAA,IACjB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AACF;AAEO,MAAM,yBAAiD;AAAA,EAC5D,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,cAAc;AAAA,IACZ,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,SAAS;AAAA,EACX;AACF;AAEO,MAAM,8BAAsD;AAAA,EACjE,GAAG;AAAA,EACH,iBAAiB;AAAA,IACf,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,WAAW;AAAA,EACb;AAAA,EACA,MAAM;AAAA,IACJ,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AACF;",
   "names": []
 }

package/Field/utils/useField/index.js

@@ -6,6 +6,7 @@ const useField = (name, customField) => {
     control,
     register,
     reset,
+    resetField,
     trigger,
     clearErrors,
     errors,
@@ -24,6 +25,17 @@ const useField = (name, customField) => {
       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]
@@ -33,6 +45,7 @@ const useField = (name, customField) => {
     control,
     register,
     reset,
+    resetField,
     trigger,
     watch,
     componentRegistry,
@@ -42,7 +55,7 @@ const useField = (name, customField) => {
     getValues,
     unregister,
     formState,
-    error: errors[name]
+    error
   };
 };
 export {

package/Field/utils/useField.js.map

@@ -1,7 +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\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\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: errors[name],\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;AAE1B,MAAI,CAAC,eAAe;AAClB,UAAM,IAAI,MAAM;AAAA;AAAA;AAAA,KAGf;AAAA,EACH;AAEA;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,OAAO,OAAO,IAAI;AAAA,EACpB;AACF;",
+  "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    resetField,\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\n  const nameIndexRegex = name.match(/^\\[*(.*?)\\.(\\d+)\\]*$/);\n  if (nameIndexRegex) {\n    const [, fieldArrayName, indexStr] = nameIndexRegex;\n    error = errors[fieldArrayName]?.[Number(indexStr)];\n  }\n  const nestedNameIndexRegex = name.match(/^\\[*(.*?)\\.(\\d+)\\.(.*?)\\]*$/);\n  if (nestedNameIndexRegex) {\n    const [, fieldArrayName, indexStr, fieldItemName] = nestedNameIndexRegex;\n    error = errors[fieldArrayName]?.[Number(indexStr)]?.[fieldItemName];\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    resetField,\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,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;AAEvB,QAAM,iBAAiB,KAAK,MAAM,sBAAsB;AACxD,MAAI,gBAAgB;AAClB,UAAM,CAAC,EAAE,gBAAgB,QAAQ,IAAI;AACrC,YAAQ,OAAO,cAAc,IAAI,OAAO,QAAQ,CAAC;AAAA,EACnD;AACA,QAAM,uBAAuB,KAAK,MAAM,6BAA6B;AACrE,MAAI,sBAAsB;AACxB,UAAM,CAAC,EAAE,gBAAgB,UAAU,aAAa,IAAI;AACpD,YAAQ,OAAO,cAAc,IAAI,OAAO,QAAQ,CAAC,IAAI,aAAa;AAAA,EACpE;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,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/FieldArray/FieldArray.stories.d.ts

@@ -5,5 +5,6 @@ declare namespace _default {
 }
 export default _default;
 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,397 @@
+import React, { useEffect, useRef, useState } from "react";
+import {
+  useFieldArray,
+  useWatch
+} 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 } from "@digigov/ui/form/Button";
+import { Grid, Stack } from "@digigov/ui/layouts";
+import Heading from "@digigov/ui/typography/Heading";
+import { Hint } from "@digigov/ui/typography/Hint";
+const FormDialog = React.forwardRef(
+  function FormDialog2({
+    name,
+    trigger,
+    register,
+    control,
+    formState,
+    error,
+    getValues,
+    Field,
+    reset,
+    sortable,
+    ...customField
+  }, ref) {
+    const [isAppending, setIsAppending] = useState(false);
+    const [currentIndex, setCurrentIndex] = useState(0);
+    const { fields, append, remove, update, move } = 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);
+    const ofField = {
+      ...customField.extra?.of,
+      name: currentName
+    };
+    const defaultValue = getValues(currentName) || ofField.defaultValue;
+    const noValuesCommitted = fields.length === 0 || fields.length === 1 && isAppending;
+    const titleNumber = customField.extra?.label.object.titleNumbering ? `${currentLength + 1}` : "";
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, noValuesCommitted && /* @__PURE__ */ React.createElement(Hint, { ...customField.extra?.label.object?.nothing_added_props }, customField.extra?.label.object?.nothing_added), /* @__PURE__ */ React.createElement(
+      ArrayItemModal,
+      {
+        title: customField.extra?.label.object.title && `${customField.extra?.label.object.title} ${titleNumber}`,
+        hint: customField.label?.secondary,
+        name,
+        defaultValue,
+        currentName,
+        editOrAppend: async () => {
+          const hasNoErrors = await trigger(
+            ofField.type === "object" ? ofField.extra.fields.map(({ key }) => `${currentName}.${key}`) : currentName
+          );
+          if (!hasNoErrors) {
+            update(currentIndex, valuesRef.current);
+          }
+          if (hasNoErrors) {
+            const newValues = getValues(currentName);
+            if (isAppending) {
+              setIsAppending(false);
+            }
+            if (newValues === "") {
+              remove(currentIndex);
+            } 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,
+        control,
+        ...registerModal(`modal-${name}`)
+      },
+      /* @__PURE__ */ React.createElement(Fieldset, null, ofField?.type === "object" ? /* @__PURE__ */ React.createElement(
+        FieldObject,
+        {
+          defaultValue: defaultValue || void 0,
+          error: error && error[currentIndex],
+          formState,
+          register,
+          control,
+          ...ofField,
+          key: currentName,
+          Field
+        }
+      ) : /* @__PURE__ */ React.createElement(
+        Field,
+        {
+          name: currentName,
+          ...ofField,
+          error: error && error[currentIndex],
+          key: currentName
+        }
+      ))
+    ), !noValuesCommitted && /* @__PURE__ */ React.createElement(TableContainer, { ...customField.extra?.tableContainer }, /* @__PURE__ */ React.createElement(
+      Table,
+      {
+        ref,
+        verticalAlign: customField.extra?.verticalAlign
+      },
+      !customField.extra?.noHeader && !noValuesCommitted && ofField?.extra && values?.length > 0 && /* @__PURE__ */ React.createElement(
+        ArrayItemHeader,
+        {
+          labels: ofField.type === "object" ? ofField.extra.fields.map(({ label }) => label.primary) : [ofField.label.primary],
+          disabled: customField?.editable === false
+        }
+      ),
+      /* @__PURE__ */ React.createElement(TableBody, null, !noValuesCommitted && values?.map?.((field, index) => {
+        return /* @__PURE__ */ React.createElement(
+          ArrayItemDisplay,
+          {
+            key: index,
+            name: `${name}.${index}`,
+            index,
+            isFirst: index === 0,
+            isLast: index === values.length - 1,
+            data: field,
+            edit: () => {
+              setCurrentIndex(index);
+              open(`modal-${name}`);
+            },
+            stackProps: customField?.extra?.stackProps,
+            wordBreak: customField?.extra?.wordBreak,
+            valueDisplay: customField?.extra?.valueDisplay,
+            remove: () => {
+              remove(index);
+            },
+            border: customField.extra?.border,
+            move,
+            sortable,
+            disabledEdit: sortable ? true : customField.extra?.noEdit ?? false,
+            disabledDelete: customField.extra?.noDelete ?? false,
+            disabled: customField?.editable === false
+          }
+        );
+      }))
+    )), customField.extra?.editVariant !== "display" && /* @__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?.type === "object") {
+              append({});
+            } else {
+              append("");
+            }
+            setCurrentIndex(currentLength + 1);
+            setIsAppending(true);
+          },
+          disabled: customField?.editable === false || customField.extra?.editVariant === "noinput" || fields.length >= (customField.extra?.max ?? Number.MAX_VALUE)
+        },
+        customField.extra?.label.object?.add
+      )
+    ));
+  }
+);
+const ArrayItemModal = React.forwardRef(function ArrayItemModal2({
+  type,
+  currentName,
+  title,
+  hint,
+  defaultValue,
+  editOrAppend,
+  cancel,
+  control,
+  addTitle,
+  editLabel,
+  editProps,
+  appendLabel,
+  appendProps,
+  cancelLabel,
+  cancelProps,
+  children,
+  ...props
+}, ref) {
+  const value = useWatch({
+    control,
+    name: currentName,
+    defaultValue
+  });
+  const disabled = value === void 0 || value === null || value === "";
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      ...props,
+      ref,
+      "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" : addTitle || "\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,
+        type: "button",
+        onClick: (e) => {
+          e.preventDefault();
+          editOrAppend();
+        },
+        disabled
+      },
+      editLabel || "\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7"
+    ) : /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        color: "primary",
+        ...appendProps,
+        type: "button",
+        onClick: (e) => {
+          e.preventDefault();
+          editOrAppend();
+        },
+        disabled
+      },
+      appendLabel || "\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7"
+    ), /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        variant: "link",
+        type: "button",
+        ...cancelProps,
+        onClick: (e) => {
+          e.preventDefault();
+          cancel();
+        }
+      },
+      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,
+  sortable,
+  index,
+  isFirst,
+  isLast,
+  move,
+  valueDisplay,
+  border = true,
+  wordBreak = "break-all",
+  stackProps = {
+    spacing: 4,
+    alignItems: "flex-end",
+    justifyContent: "flex-end",
+    direction: "column"
+  }
+}) => {
+  if (data === void 0 || data === null) {
+    return null;
+  }
+  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 || {});
+  const borderVariant = border === false || sortable ? "none" : "border";
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableRow, null, values?.map?.((value, valueIndex) => {
+    return /* @__PURE__ */ React.createElement(
+      TableDataCell,
+      {
+        key: valueIndex,
+        variant: borderVariant,
+        wordBreak,
+        pb: sortable ? 0 : void 0,
+        pt: sortable ? 4 : void 0
+      },
+      sortable && valueIndex === 0 && /* @__PURE__ */ React.createElement(Heading, { size: "sm", className: "mb-2" }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE #", index + 1),
+      value?.name || (Array.isArray(value) ? value.join("\n") : valueDisplay ? valueDisplay(value) : value) || ""
+    );
+  }), disabled === true || disabledEdit === true && disabledDelete === true ? null : /* @__PURE__ */ React.createElement(TableDataCell, { variant: borderVariant }, /* @__PURE__ */ React.createElement(Stack, { ...stackProps }, 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"
+  )))), sortable && /* @__PURE__ */ React.createElement(TableRow, null, /* @__PURE__ */ React.createElement(
+    TableDataCell,
+    {
+      variant: isLast ? "none" : "border",
+      colSpan: disabled === true || disabledEdit === true && disabledDelete === true ? values.length : values.length + 1
+    },
+    sortable && !disabled && !(isFirst && isLast) && /* @__PURE__ */ React.createElement(Grid, { xs: 12, mt: 2 }, "\u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7", " ", !isFirst && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u03C0\u03C1\u03BF\u03C2 \u03C4\u03B1", " ", /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        onClick: () => move(index, index - 1)
+      },
+      "\u03C0\u03AC\u03BD\u03C9"
+    )), !isFirst && !isLast && " \u03AE ", !isLast && /* @__PURE__ */ React.createElement(React.Fragment, null, "\u03C0\u03C1\u03BF\u03C2 \u03C4\u03B1", " ", /* @__PURE__ */ React.createElement(
+      Button,
+      {
+        type: "button",
+        variant: "link",
+        onClick: () => move(index, index + 1)
+      },
+      "\u03BA\u03AC\u03C4\u03C9"
+    )))
+  )));
+};
+var FormDialog_default = FormDialog;
+export {
+  ArrayItemDisplay,
+  ArrayItemHeader,
+  ArrayItemModal,
+  FormDialog,
+  FormDialog_default as default
+};
+//# sourceMappingURL=FormDialog.js.map

package/{Questions/Questions.stories → FieldArray/FormDialog}/package.json

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

package/FieldArray/FormDialog.d.ts

@@ -0,0 +1,66 @@
+import React from 'react';
+import { ErrorOption, UseFieldArrayMove, UseFormReturn } from 'react-hook-form';
+import { FieldProps } from '@digigov/form/Field/types';
+import { StackProps } from '@digigov/ui/layouts';
+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 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: React.ForwardRefExoticComponent<Omit<{
+    [key: string]: any;
+    type: "append" | "edit";
+    name: string;
+    title?: string;
+    hint?: string;
+    editOrAppend: () => void;
+    cancel: () => void;
+    addTitle?: string;
+    editLabel?: string;
+    editProps?: any;
+    appendLabel?: string;
+    appendProps?: any;
+    cancelLabel?: string;
+    cancelProps?: any;
+    children: React.ReactNode;
+}, "ref"> & React.RefAttributes<unknown>>;
+export declare const ArrayItemHeader: ({ labels, disabled }: {
+    labels: any;
+    disabled: any;
+}) => React.JSX.Element;
+export declare const ArrayItemDisplay: ({ name, data, edit, remove, disabledEdit, disabledDelete, disabled, sortable, index, isFirst, isLast, move, valueDisplay, border, wordBreak, stackProps, }: {
+    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;
+}) => React.JSX.Element | null;
+export default FormDialog;