@digigov/form 2.0.0-76ec20a0 → 2.0.0-7d765d3c

package/Field/utils/resolveField.d.ts

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

package/Field/utils/resolveField.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/Field/utils/resolveField.ts"],
+  "sourcesContent": ["import type {\n  FieldProps,\n  FieldSpec,\n  ResolvedField,\n} from '@digigov/form/Field/types';\nimport {\n  ALTERNATIVE_COMPONENTS,\n  FIELD_COMPONENTS,\n  type FieldComponentRegistry,\n} from '@digigov/form/inputs/registry';\n\nexport function resolveField(\n  children: FieldProps['children'],\n  field: FieldSpec,\n  customComponentRegistry?: FieldComponentRegistry\n): ResolvedField {\n  const fieldComponentRegistry = {\n    ...FIELD_COMPONENTS,\n    ...(customComponentRegistry ?? {}),\n  };\n\n  const resolvedField = { ...field };\n\n  if (children) {\n    resolvedField.component = children;\n    resolvedField.controlled = true;\n  } else if (typeof field.component === 'function') {\n    // leave as is\n  } else if (!field.component && !field.type) {\n    resolvedField.component = fieldComponentRegistry.string.component;\n    resolvedField.controlled =\n      fieldComponentRegistry.string?.controlled || false;\n  } else if (\n    typeof field?.extra?.component === 'string' &&\n    ALTERNATIVE_COMPONENTS[field.extra.component]\n  ) {\n    resolvedField.controlled =\n      ALTERNATIVE_COMPONENTS[field.extra.component]?.controlled || false;\n    resolvedField.component =\n      ALTERNATIVE_COMPONENTS[field.extra.component].component;\n    resolvedField.wrapper =\n      ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;\n  } else if (\n    !field.component &&\n    field.type &&\n    fieldComponentRegistry[field.type]\n  ) {\n    resolvedField.component = fieldComponentRegistry[field.type].component;\n    resolvedField.wrapper = fieldComponentRegistry[field.type].wrapper;\n    resolvedField.controlled =\n      fieldComponentRegistry[field.type]?.controlled || false;\n  } else {\n    resolvedField.component = fieldComponentRegistry.string.component;\n    resolvedField.controlled =\n      fieldComponentRegistry.string?.controlled || false;\n  }\n  return resolvedField as ResolvedField;\n}\n"],
+  "mappings": "AAKA;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEA,SAAS,aACd,UACA,OACA,yBACe;AACf,QAAM,yBAAyB;AAAA,IAC7B,GAAG;AAAA,IACH,GAAI,2BAA2B,CAAC;AAAA,EAClC;AAEA,QAAM,gBAAgB,EAAE,GAAG,MAAM;AAEjC,MAAI,UAAU;AACZ,kBAAc,YAAY;AAC1B,kBAAc,aAAa;AAAA,EAC7B,WAAW,OAAO,MAAM,cAAc,YAAY;AAAA,EAElD,WAAW,CAAC,MAAM,aAAa,CAAC,MAAM,MAAM;AAC1C,kBAAc,YAAY,uBAAuB,OAAO;AACxD,kBAAc,aACZ,uBAAuB,QAAQ,cAAc;AAAA,EACjD,WACE,OAAO,OAAO,OAAO,cAAc,YACnC,uBAAuB,MAAM,MAAM,SAAS,GAC5C;AACA,kBAAc,aACZ,uBAAuB,MAAM,MAAM,SAAS,GAAG,cAAc;AAC/D,kBAAc,YACZ,uBAAuB,MAAM,MAAM,SAAS,EAAE;AAChD,kBAAc,UACZ,uBAAuB,MAAM,MAAM,SAAS,EAAE;AAAA,EAClD,WACE,CAAC,MAAM,aACP,MAAM,QACN,uBAAuB,MAAM,IAAI,GACjC;AACA,kBAAc,YAAY,uBAAuB,MAAM,IAAI,EAAE;AAC7D,kBAAc,UAAU,uBAAuB,MAAM,IAAI,EAAE;AAC3D,kBAAc,aACZ,uBAAuB,MAAM,IAAI,GAAG,cAAc;AAAA,EACtD,OAAO;AACL,kBAAc,YAAY,uBAAuB,OAAO;AACxD,kBAAc,aACZ,uBAAuB,QAAQ,cAAc;AAAA,EACjD;AACA,SAAO;AACT;",
+  "names": []
+}

package/Field/utils/useField/index.js

@@ -6,6 +6,7 @@ const useField = (name, customField) => {
     control,
     register,
     reset,
+    resetField,
     trigger,
     clearErrors,
     errors,
@@ -16,7 +17,8 @@ const useField = (name, customField) => {
     setValue,
     getValues,
     unregister,
-    formState
+    formState,
+    registerFieldFocus
   } = useContext(FormContext);
   if (!registerField) {
     throw new Error(`
@@ -25,11 +27,16 @@ const useField = (name, customField) => {
     `);
   }
   let error = errors[name];
-  const nameIndexRegex = name.match(/^(.*?)\.(\d+)$/);
+  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]
@@ -39,6 +46,7 @@ const useField = (name, customField) => {
     control,
     register,
     reset,
+    resetField,
     trigger,
     watch,
     componentRegistry,
@@ -48,7 +56,8 @@ const useField = (name, customField) => {
     getValues,
     unregister,
     formState,
-    error
+    error,
+    registerFieldFocus
   };
 };
 export {

package/Field/utils/useField.d.ts

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

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  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;",
+  "sourcesContent": ["import { useContext, useMemo } from 'react';\nimport type { 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    registerFieldFocus,\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    registerFieldFocus,\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,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,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/FieldArray/BaseFieldArray/index.js

@@ -0,0 +1,76 @@
+import React from "react";
+import { useFieldArray } from "react-hook-form";
+import { FieldObject } from "@digigov/form/FieldObject";
+import { FieldsetLabel, Fieldset } from "@digigov/form/Fieldset";
+import { Card } from "@digigov/ui/content/Card";
+import { Button } from "@digigov/ui/form/Button";
+const BaseFieldArray = 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,
+          register,
+          control,
+          ...customField.extra?.of,
+          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,
+        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.displayName = "BaseFieldArray";
+var BaseFieldArray_default = BaseFieldArray;
+export {
+  BaseFieldArray,
+  BaseFieldArray_default as default
+};
+//# sourceMappingURL=BaseFieldArray.js.map

package/FieldArray/BaseFieldArray/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/FieldArray/BaseFieldArray/index.js"
+}

package/FieldArray/BaseFieldArray.d.ts

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/FieldArray/BaseFieldArray.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { useFieldArray } from 'react-hook-form';\nimport type { FieldArrayProps } from '@digigov/form/FieldArray';\nimport { FieldObject } from '@digigov/form/FieldObject';\nimport { FieldsetLabel, Fieldset } from '@digigov/form/Fieldset';\nimport { Card } from '@digigov/ui/content/Card';\nimport { Button } from '@digigov/ui/form/Button';\n\ntype BaseFieldArrayProps = Omit<\n  FieldArrayProps,\n  | 'registerFieldFocus'\n  | 'trigger'\n  | 'clearErrors'\n  | 'setValue'\n  | 'reset'\n  | 'resetField'\n>;\nexport const BaseFieldArray = React.forwardRef<\n  HTMLButtonElement,\n  BaseFieldArrayProps\n>(\n  (\n    {\n      name,\n      register,\n      control,\n      formState,\n      error,\n      getValues,\n      Field,\n      ...customField\n    },\n    ref\n  ) => {\n    const { append, remove } = useFieldArray({\n      control,\n      name,\n    });\n    const fields = getValues(name) || [];\n\n    return (\n      <>\n        {fields.map((field, index) => (\n          <Card\n            variant={customField.extra?.border ? 'border' : 'divider'}\n            key={field.id || index}\n          >\n            <Fieldset>\n              <FieldsetLabel>\n                {`${customField.extra?.label.object.title}${!customField.extra?.noIndex ? ' ' + String(index + 1) : ''}`}\n              </FieldsetLabel>\n              <FieldObject\n                name={`${name}.${index}`}\n                error={Array.isArray(error) && error[index]}\n                formState={formState}\n                register={register}\n                control={control}\n                {...customField.extra?.of}\n                Field={Field}\n              />\n              <Button\n                name={`${name}-object-remove`}\n                variant={customField.extra?.label.object?.deleteButtonVariant}\n                type=\"button\"\n                color=\"warning\"\n                onClick={() => remove(index)}\n                disabled={!customField?.editable}\n              >\n                {customField.extra?.label.object?.delete}\n              </Button>\n            </Fieldset>\n          </Card>\n        ))}\n        {customField.editable && (\n          <Button\n            ref={ref}\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              append({});\n            }}\n            disabled={!customField?.editable}\n          >\n            {customField.extra?.label.object?.add}\n          </Button>\n        )}\n      </>\n    );\n  }\n);\n\nBaseFieldArray.displayName = 'BaseFieldArray';\n\nexport default BaseFieldArray;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,qBAAqB;AAE9B,SAAS,mBAAmB;AAC5B,SAAS,eAAe,gBAAgB;AACxC,SAAS,YAAY;AACrB,SAAS,cAAc;AAWhB,MAAM,iBAAiB,MAAM;AAAA,EAIlC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,EAAE,QAAQ,OAAO,IAAI,cAAc;AAAA,MACvC;AAAA,MACA;AAAA,IACF,CAAC;AACD,UAAM,SAAS,UAAU,IAAI,KAAK,CAAC;AAEnC,WACE,0DACG,OAAO,IAAI,CAAC,OAAO,UAClB;AAAA,MAAC;AAAA;AAAA,QACC,SAAS,YAAY,OAAO,SAAS,WAAW;AAAA,QAChD,KAAK,MAAM,MAAM;AAAA;AAAA,MAEjB,oCAAC,gBACC,oCAAC,qBACE,GAAG,YAAY,OAAO,MAAM,OAAO,KAAK,GAAG,CAAC,YAAY,OAAO,UAAU,MAAM,OAAO,QAAQ,CAAC,IAAI,EAAE,EACxG,GACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,GAAG,IAAI,IAAI,KAAK;AAAA,UACtB,OAAO,MAAM,QAAQ,KAAK,KAAK,MAAM,KAAK;AAAA,UAC1C;AAAA,UACA;AAAA,UACA;AAAA,UACC,GAAG,YAAY,OAAO;AAAA,UACvB;AAAA;AAAA,MACF,GACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAM,GAAG,IAAI;AAAA,UACb,SAAS,YAAY,OAAO,MAAM,QAAQ;AAAA,UAC1C,MAAK;AAAA,UACL,OAAM;AAAA,UACN,SAAS,MAAM,OAAO,KAAK;AAAA,UAC3B,UAAU,CAAC,aAAa;AAAA;AAAA,QAEvB,YAAY,OAAO,MAAM,QAAQ;AAAA,MACpC,CACF;AAAA,IACF,CACD,GACA,YAAY,YACX;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,MAAM,GAAG,IAAI;AAAA,QACb,OAAM;AAAA,QACN,SAAS,YAAY,OAAO,MAAM,QAAQ;AAAA,QAC1C,SAAS,CAAC,OAAO;AACf,aAAG,eAAe;AAClB,iBAAO,CAAC,CAAC;AAAA,QACX;AAAA,QACA,UAAU,CAAC,aAAa;AAAA;AAAA,MAEvB,YAAY,OAAO,MAAM,QAAQ;AAAA,IACpC,CAEJ;AAAA,EAEJ;AACF;AAEA,eAAe,cAAc;AAE7B,IAAO,yBAAQ;",
+  "names": []
+}

package/FieldArray/FormDialog/ArrayItemDisplay/index.js

@@ -0,0 +1,97 @@
+import React from "react";
+import { TableDataCell, 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";
+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"
+    )))
+  )));
+};
+export {
+  ArrayItemDisplay
+};
+//# sourceMappingURL=ArrayItemDisplay.js.map

package/FieldArray/FormDialog/ArrayItemDisplay/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/FieldArray/FormDialog/ArrayItemDisplay/index.js"
+}

package/FieldArray/FormDialog/ArrayItemDisplay.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { 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;
+}
+export declare const ArrayItemDisplay: ({ name, data, edit, remove, disabledEdit, disabledDelete, disabled, sortable, index, isFirst, isLast, move, valueDisplay, border, wordBreak, stackProps, }: ArrayItemDisplayProps) => React.JSX.Element | null;

package/FieldArray/FormDialog/ArrayItemDisplay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/FieldArray/FormDialog/ArrayItemDisplay.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport type { UseFieldArrayMove } from 'react-hook-form';\nimport { TableDataCell, TableRow } from '@digigov/ui/content';\nimport { Button } from '@digigov/ui/form/Button';\nimport type { StackProps } from '@digigov/ui/layouts';\nimport { Grid, Stack } from '@digigov/ui/layouts';\nimport Heading from '@digigov/ui/typography/Heading';\n\nexport interface ArrayItemDisplayProps {\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  sortable: boolean;\n  index: number;\n  isFirst: boolean;\n  isLast: boolean;\n  move: UseFieldArrayMove;\n  valueDisplay?: (value) => React.ReactNode;\n  border: boolean;\n  wordBreak?: 'break-all' | 'none';\n  stackProps?: StackProps;\n}\n\nexport const ArrayItemDisplay = ({\n  name,\n  data,\n  edit,\n  remove,\n  disabledEdit,\n  disabledDelete,\n  disabled,\n  sortable,\n  index,\n  isFirst,\n  isLast,\n  move,\n  valueDisplay,\n  border = true,\n  wordBreak = 'break-all',\n  stackProps = {\n    spacing: 4,\n    alignItems: 'flex-end',\n    justifyContent: 'flex-end',\n    direction: 'column',\n  },\n}: ArrayItemDisplayProps) => {\n  if (data === undefined || data === null) {\n    return null;\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 | Record<string, any>)[] =\n    typeof data === 'string' ? [data] : Object.values(data || {});\n  const borderVariant = border === false || sortable ? 'none' : 'border';\n  return (\n    <>\n      <TableRow>\n        {values?.map?.((value, valueIndex) => {\n          return (\n            <TableDataCell\n              key={valueIndex}\n              variant={borderVariant}\n              wordBreak={wordBreak}\n              pb={sortable ? 0 : undefined}\n              pt={sortable ? 4 : undefined}\n            >\n              {sortable && valueIndex === 0 && (\n                <Heading size=\"sm\" className=\"mb-2\">\n                  \u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE #{index + 1}\n                </Heading>\n              )}\n              {(value as Record<string, any>)?.name ||\n                (Array.isArray(value)\n                  ? value.join('\\n')\n                  : valueDisplay\n                    ? valueDisplay(value)\n                    : value) ||\n                ''}\n            </TableDataCell>\n          );\n        })}\n        {disabled === true ||\n        (disabledEdit === true && disabledDelete === true) ? null : (\n          <TableDataCell variant={borderVariant}>\n            <Stack {...stackProps}>\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\n                  variant=\"link\"\n                  type=\"button\"\n                  onClick={() => remove(name)}\n                >\n                  \u0394\u03B9\u03B1\u03B3\u03C1\u03B1\u03C6\u03AE\n                </Button>\n              )}\n            </Stack>\n          </TableDataCell>\n        )}\n      </TableRow>\n      {sortable && (\n        <TableRow>\n          <TableDataCell\n            variant={isLast ? 'none' : 'border'}\n            colSpan={\n              disabled === true ||\n              (disabledEdit === true && disabledDelete === true)\n                ? values.length\n                : values.length + 1\n            }\n          >\n            {sortable && !disabled && !(isFirst && isLast) && (\n              <Grid xs={12} mt={2}>\n                \u039C\u03B5\u03C4\u03B1\u03BA\u03AF\u03BD\u03B7\u03C3\u03B7{' '}\n                {!isFirst && (\n                  <>\n                    \u03C0\u03C1\u03BF\u03C2 \u03C4\u03B1{' '}\n                    <Button\n                      type=\"button\"\n                      variant=\"link\"\n                      onClick={() => move(index, index - 1)}\n                    >\n                      \u03C0\u03AC\u03BD\u03C9\n                    </Button>\n                  </>\n                )}\n                {!isFirst && !isLast && ' \u03AE '}\n                {!isLast && (\n                  <>\n                    \u03C0\u03C1\u03BF\u03C2 \u03C4\u03B1{' '}\n                    <Button\n                      type=\"button\"\n                      variant=\"link\"\n                      onClick={() => move(index, index + 1)}\n                    >\n                      \u03BA\u03AC\u03C4\u03C9\n                    </Button>\n                  </>\n                )}\n              </Grid>\n            )}\n          </TableDataCell>\n        </TableRow>\n      )}\n    </>\n  );\n};\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,eAAe,gBAAgB;AACxC,SAAS,cAAc;AAEvB,SAAS,MAAM,aAAa;AAC5B,OAAO,aAAa;AAqBb,MAAM,mBAAmB,CAAC;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,aAAa;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,WAAW;AAAA,EACb;AACF,MAA6B;AAC3B,MAAI,SAAS,UAAa,SAAS,MAAM;AACvC,WAAO;AAAA,EACT;AACA,MACE,OAAO,KAAK,IAAI,EAAE,WAAW,KAC5B,OAAO,KAAK,IAAI,EAAE,WAAW,KAAK,KAAK,IACxC;AACA,WAAO;AAAA,EACT;AACA,SAAO,KAAK;AACZ,QAAM,SACJ,OAAO,SAAS,WAAW,CAAC,IAAI,IAAI,OAAO,OAAO,QAAQ,CAAC,CAAC;AAC9D,QAAM,gBAAgB,WAAW,SAAS,WAAW,SAAS;AAC9D,SACE,0DACE,oCAAC,gBACE,QAAQ,MAAM,CAAC,OAAO,eAAe;AACpC,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAS;AAAA,QACT;AAAA,QACA,IAAI,WAAW,IAAI;AAAA,QACnB,IAAI,WAAW,IAAI;AAAA;AAAA,MAElB,YAAY,eAAe,KAC1B,oCAAC,WAAQ,MAAK,MAAK,WAAU,UAAO,gDACxB,QAAQ,CACpB;AAAA,MAEA,OAA+B,SAC9B,MAAM,QAAQ,KAAK,IAChB,MAAM,KAAK,IAAI,IACf,eACE,aAAa,KAAK,IAClB,UACN;AAAA,IACJ;AAAA,EAEJ,CAAC,GACA,aAAa,QACb,iBAAiB,QAAQ,mBAAmB,OAAQ,OACnD,oCAAC,iBAAc,SAAS,iBACtB,oCAAC,SAAO,GAAG,cACR,iBAAiB,QAChB;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAAS,MAAM;AACb,aAAK,IAAI;AAAA,MACX;AAAA;AAAA,IACD;AAAA,EAED,GAED,mBAAmB,QAClB;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR,MAAK;AAAA,MACL,SAAS,MAAM,OAAO,IAAI;AAAA;AAAA,IAC3B;AAAA,EAED,CAEJ,CACF,CAEJ,GACC,YACC,oCAAC,gBACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,SAAS,SAAS;AAAA,MAC3B,SACE,aAAa,QACZ,iBAAiB,QAAQ,mBAAmB,OACzC,OAAO,SACP,OAAO,SAAS;AAAA;AAAA,IAGrB,YAAY,CAAC,YAAY,EAAE,WAAW,WACrC,oCAAC,QAAK,IAAI,IAAI,IAAI,KAAG,gEACR,KACV,CAAC,WACA,0DAAE,yCACQ,KACR;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS,MAAM,KAAK,OAAO,QAAQ,CAAC;AAAA;AAAA,MACrC;AAAA,IAED,CACF,GAED,CAAC,WAAW,CAAC,UAAU,YACvB,CAAC,UACA,0DAAE,yCACQ,KACR;AAAA,MAAC;AAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,SAAS,MAAM,KAAK,OAAO,QAAQ,CAAC;AAAA;AAAA,MACrC;AAAA,IAED,CACF,CAEJ;AAAA,EAEJ,CACF,CAEJ;AAEJ;",
+  "names": []
+}

package/FieldArray/FormDialog/ArrayItemHeader/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import { TableHead, TableHeadCell, TableRow } from "@digigov/ui/content";
+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")));
+};
+export {
+  ArrayItemHeader
+};
+//# sourceMappingURL=ArrayItemHeader.js.map

package/FieldArray/FormDialog/ArrayItemHeader/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../../cjs/FieldArray/FormDialog/ArrayItemHeader/index.js"
+}

package/FieldArray/FormDialog/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/ArrayItemHeader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/FieldArray/FormDialog/ArrayItemHeader.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { TableHead, TableHeadCell, TableRow } from '@digigov/ui/content';\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"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,WAAW,eAAe,gBAAgB;AAE5C,MAAM,kBAAkB,CAAC,EAAE,QAAQ,SAAS,MAAM;AACvD,SACE,oCAAC,iBACC,oCAAC,gBACE,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,WAAO,oCAAC,iBAAc,KAAK,SAAQ,KAAM;AAAA,EAC3C,CAAC,GACA,CAAC,YAAY,oCAAC,qBAAc,wDAAS,CACxC,CACF;AAEJ;",
+  "names": []
+}

package/FieldArray/FormDialog/ArrayItemModal/index.js

@@ -0,0 +1,158 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useForm } from "react-hook-form";
+import { FieldObject } from "@digigov/form/FieldObject";
+import { Fieldset } from "@digigov/form/Fieldset";
+import { FormContext, useFormContext } from "@digigov/form/FormContext";
+import { yupResolver } from "@digigov/form/utils";
+import { useValidationSchema } from "@digigov/form/validators";
+import {
+  Modal,
+  ModalAction,
+  ModalContent,
+  ModalHeading
+} from "@digigov/ui/app/Modal";
+import { Button } from "@digigov/ui/form/Button";
+import { Hint } from "@digigov/ui/typography/Hint";
+const ArrayItemModal = React.forwardRef(function ArrayItemModal2({
+  type,
+  title,
+  hint,
+  defaultValue,
+  editOrAppend,
+  cancel,
+  addTitle,
+  editLabel,
+  editProps,
+  appendLabel,
+  appendProps,
+  cancelLabel,
+  cancelProps,
+  ofField,
+  error,
+  Field,
+  currentIndex,
+  ...modalProps
+}, ref) {
+  const parentCtx = useFormContext();
+  const schema = useValidationSchema(
+    ofField.type === "object" && ofField.extra.fields ? Object.values(ofField.extra.fields) : [ofField]
+  );
+  const resolver = useMemo(() => {
+    if (!schema) return;
+    return yupResolver(schema);
+  }, [schema]);
+  const form = useForm({
+    resolver,
+    mode: "onSubmit",
+    reValidateMode: "onSubmit",
+    shouldFocusError: true,
+    criteriaMode: "all",
+    shouldUnregister: true
+  });
+  const { setValue, reset } = form;
+  useEffect(() => {
+    if (!defaultValue) {
+      reset(void 0, {
+        keepDefaultValues: false,
+        keepValues: false
+      });
+      return;
+    }
+    Object.entries(defaultValue).forEach(([key, value]) => {
+      setValue(key, value);
+    });
+  }, [defaultValue, reset, setValue, modalProps.open]);
+  const onSubmit = useCallback(
+    (data) => {
+      editOrAppend(data);
+    },
+    [editOrAppend]
+  );
+  const handleSubmitWithoutPropagation = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    return form.handleSubmit(onSubmit)(e);
+  };
+  const formRef = useRef(null);
+  const ctx = {
+    ...parentCtx,
+    // fieldsMap: {},
+    // fieldsetsMap: {},
+    control: form.control,
+    register: form.register,
+    watch: form.watch,
+    resetField: form.resetField,
+    registerField: () => {
+    },
+    // If we use parent registerField, validation breaks
+    registerFieldFocus: () => {
+      return () => {
+      };
+    },
+    errors: form.formState.errors,
+    formState: form.formState,
+    reset: form.reset,
+    trigger: form.trigger,
+    getFieldState: form.getFieldState,
+    setValue: form.setValue,
+    clearErrors: form.clearErrors,
+    getValues: form.getValues,
+    getValuesFromParentForm: parentCtx.getValues,
+    unregister: form.unregister,
+    setError: form.setError,
+    formRef,
+    submit: form.handleSubmit(onSubmit)
+  };
+  const disabled = false;
+  return /* @__PURE__ */ React.createElement(ModalPortal, { ...modalProps, ref, "aria-labelledby": "modal-label" }, /* @__PURE__ */ React.createElement(FormContext.Provider, { value: ctx }, /* @__PURE__ */ React.createElement("form", { onSubmit: handleSubmitWithoutPropagation, ref: formRef }, /* @__PURE__ */ React.createElement(ModalHeading, { id: "modal-label" }, title ? title : 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), /* @__PURE__ */ React.createElement(Fieldset, null, ofField?.type === "object" ? /* @__PURE__ */ React.createElement(
+    FieldObject,
+    {
+      ...ofField,
+      defaultValue: defaultValue || void 0,
+      error: error && error[currentIndex],
+      formState: form.formState,
+      register: form.register,
+      control: form.control,
+      name: void 0,
+      Field
+    }
+  ) : /* @__PURE__ */ React.createElement(Field, { error: error && error[currentIndex], ...ofField }))), /* @__PURE__ */ React.createElement(ModalAction, null, type === "edit" ? /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "secondary",
+      ...editProps,
+      type: "submit",
+      disabled
+    },
+    editLabel || "\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7"
+  ) : /* @__PURE__ */ React.createElement(
+    Button,
+    {
+      color: "primary",
+      ...appendProps,
+      type: "submit",
+      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 ModalPortal = (props) => {
+  return createPortal(/* @__PURE__ */ React.createElement(Modal, { ...props }), document.body);
+};
+export {
+  ArrayItemModal
+};
+//# sourceMappingURL=ArrayItemModal.js.map

package/{inputs/Input/inputsInputScenarios → FieldArray/FormDialog/ArrayItemModal}/package.json

@@ -2,5 +2,5 @@
   "sideEffects": false,
   "module": "./index.js",
   "types": "./index.d.ts",
-  "main": "../../../cjs/inputs/Input/inputsInputScenarios/index.js"
+  "main": "../../../cjs/FieldArray/FormDialog/ArrayItemModal/index.js"
 }

package/FieldArray/FormDialog/ArrayItemModal.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { ErrorOption } from 'react-hook-form';
+import type { FieldProps, FormData } from '@digigov/form/Field/types';
+import type { ModalProps } from '@digigov/ui/app/Modal';
+export interface ArrayItemModalProps 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;
+    arrayItemName: string;
+    defaultValue?: any;
+    Field: React.FC<FieldProps>;
+    error?: ErrorOption;
+    currentIndex: number;
+}
+export declare const ArrayItemModal: React.ForwardRefExoticComponent<Omit<ArrayItemModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/FieldArray/FormDialog/ArrayItemModal.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/FieldArray/FormDialog/ArrayItemModal.tsx"],
+  "sourcesContent": ["import React, { useCallback, useEffect, useMemo, useRef } from 'react';\nimport { createPortal } from 'react-dom';\nimport type { ErrorOption, UseFormProps } from 'react-hook-form';\nimport { useForm } from 'react-hook-form';\nimport type { FieldProps, FormData } from '@digigov/form/Field/types';\nimport { FieldObject } from '@digigov/form/FieldObject';\nimport { Fieldset } from '@digigov/form/Fieldset';\nimport { FormContext, useFormContext } from '@digigov/form/FormContext';\nimport { yupResolver } from '@digigov/form/utils';\nimport { useValidationSchema } from '@digigov/form/validators';\nimport type { ModalProps } from '@digigov/ui/app/Modal';\nimport {\n  Modal,\n  ModalAction,\n  ModalContent,\n  ModalHeading,\n} from '@digigov/ui/app/Modal';\nimport { Button } from '@digigov/ui/form/Button';\nimport { Hint } from '@digigov/ui/typography/Hint';\n\nexport interface ArrayItemModalProps extends Omit<ModalProps, 'children'> {\n  type: 'append' | 'edit';\n  name: string;\n  title?: string;\n  hint?: string;\n  editOrAppend: (data: FormData) => void;\n  cancel: () => void;\n  addTitle?: string;\n  editLabel?: string;\n  editProps?: any;\n  appendLabel?: string;\n  appendProps?: any;\n  cancelLabel?: string;\n  cancelProps?: any;\n  ofField?: any;\n  arrayItemName: string;\n  defaultValue?: any;\n  Field: React.FC<FieldProps>;\n  error?: ErrorOption;\n  currentIndex: number;\n}\n\nexport const ArrayItemModal = React.forwardRef<\n  HTMLDivElement,\n  ArrayItemModalProps\n>(function ArrayItemModal(\n  {\n    type,\n    title,\n    hint,\n    defaultValue,\n    editOrAppend,\n    cancel,\n    addTitle,\n    editLabel,\n    editProps,\n    appendLabel,\n    appendProps,\n    cancelLabel,\n    cancelProps,\n    ofField,\n    error,\n    Field,\n    currentIndex,\n    ...modalProps\n  },\n  ref\n) {\n  const parentCtx = useFormContext();\n  const schema = useValidationSchema(\n    ofField.type === 'object' && ofField.extra.fields\n      ? Object.values(ofField.extra.fields)\n      : [ofField]\n  );\n\n  const resolver: UseFormProps['resolver'] = useMemo(() => {\n    if (!schema) return;\n\n    return yupResolver(schema);\n  }, [schema]);\n\n  const form = useForm({\n    resolver,\n    mode: 'onSubmit',\n    reValidateMode: 'onSubmit',\n    shouldFocusError: true,\n    criteriaMode: 'all',\n    shouldUnregister: true,\n  });\n\n  const { setValue, reset } = form;\n\n  // Set the default values of the form when the component mounts\n  useEffect(() => {\n    if (!defaultValue) {\n      reset(undefined, {\n        keepDefaultValues: false,\n        keepValues: false,\n      });\n      return;\n    }\n\n    Object.entries(defaultValue).forEach(([key, value]) => {\n      setValue(key, value);\n    });\n    // modalProps.open is used to reset the form when the modal opens\n  }, [defaultValue, reset, setValue, modalProps.open]);\n\n  const onSubmit = useCallback(\n    (data: FormData): void => {\n      editOrAppend(data);\n    },\n    [editOrAppend]\n  );\n\n  const handleSubmitWithoutPropagation = (e: any) => {\n    e.preventDefault();\n    e.stopPropagation();\n    return form.handleSubmit(onSubmit)(e);\n  };\n\n  const formRef = useRef(null);\n\n  const ctx = {\n    ...parentCtx,\n    // fieldsMap: {},\n    // fieldsetsMap: {},\n    control: form.control,\n    register: form.register,\n    watch: form.watch,\n    resetField: form.resetField,\n    registerField: () => {}, // If we use parent registerField, validation breaks\n    registerFieldFocus: () => {\n      return () => {};\n    },\n    errors: form.formState.errors,\n    formState: form.formState,\n    reset: form.reset,\n    trigger: form.trigger,\n    getFieldState: form.getFieldState,\n    setValue: form.setValue,\n    clearErrors: form.clearErrors,\n    getValues: form.getValues,\n    getValuesFromParentForm: parentCtx.getValues,\n    unregister: form.unregister,\n    setError: form.setError,\n    formRef,\n    submit: form.handleSubmit(onSubmit),\n  };\n\n  const disabled = false;\n  // const disabled = value === undefined || value === null || value === '';\n  return (\n    <ModalPortal {...modalProps} ref={ref} aria-labelledby=\"modal-label\">\n      <FormContext.Provider value={ctx}>\n        <form onSubmit={handleSubmitWithoutPropagation} ref={formRef}>\n          <ModalHeading id=\"modal-label\">\n            {title\n              ? title\n              : type === 'edit'\n                ? '\u0395\u03C0\u03B5\u03BE\u03B5\u03C1\u03B3\u03B1\u03C3\u03AF\u03B1'\n                : addTitle || '\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7'}\n          </ModalHeading>\n          <ModalContent>\n            {hint && <Hint>{hint}</Hint>}\n            <Fieldset>\n              {ofField?.type === 'object' ? (\n                <FieldObject\n                  {...ofField}\n                  defaultValue={defaultValue || undefined}\n                  error={error && error[currentIndex]}\n                  formState={form.formState}\n                  register={form.register}\n                  control={form.control}\n                  name={undefined}\n                  Field={Field}\n                />\n              ) : (\n                <Field error={error && error[currentIndex]} {...ofField} />\n              )}\n            </Fieldset>\n          </ModalContent>\n          <ModalAction>\n            {type === 'edit' ? (\n              <Button\n                color=\"secondary\"\n                {...editProps}\n                type=\"submit\"\n                disabled={disabled}\n              >\n                {editLabel || '\u0391\u03C0\u03BF\u03B8\u03AE\u03BA\u03B5\u03C5\u03C3\u03B7'}\n              </Button>\n            ) : (\n              <Button\n                color=\"primary\"\n                {...appendProps}\n                type=\"submit\"\n                disabled={disabled}\n              >\n                {appendLabel || '\u03A0\u03C1\u03BF\u03C3\u03B8\u03AE\u03BA\u03B7'}\n              </Button>\n            )}\n            <Button\n              variant=\"link\"\n              type=\"button\"\n              {...cancelProps}\n              onClick={(e) => {\n                e.preventDefault();\n                cancel();\n              }}\n            >\n              {cancelLabel || '\u0391\u03BA\u03CD\u03C1\u03C9\u03C3\u03B7'}\n            </Button>\n          </ModalAction>\n        </form>\n      </FormContext.Provider>\n    </ModalPortal>\n  );\n});\n\nconst ModalPortal = (props: any) => {\n  return createPortal(<Modal {...props} />, document.body);\n};\n"],
+  "mappings": "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",
+  "names": ["ArrayItemModal"]
+}

package/FieldArray/FormDialog/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
+import type { FieldProps } from '@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'];
+    resetField?: UseFormReturn['resetField'];
+    sortable: boolean;
+    Field: React.FC<FieldProps>;
+}
+export declare const FormDialog: React.ForwardRefExoticComponent<FormDialogProps & React.RefAttributes<HTMLButtonElement>>;
+export default FormDialog;