@digigov/form 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/Field/types.d.ts

@@ -1,7 +1,10 @@
-import React from 'react';
-import { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
-import { ValidatorSchema } from '@digigov/form/validators/types';
-import { GridProps } from '@digigov/ui/layouts/Grid';
+import type React from 'react';
+import type { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
+import type { FieldComponentRegistry } from '@digigov/form/inputs/registry';
+import type { registerFieldFocus } from '@digigov/form/types';
+import type { ValidatorSchema } from '@digigov/form/validators/types';
+import type { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import type { GridProps } from '@digigov/ui/layouts/Grid';
 export interface FieldLabelProps {
     primary?: string;
     secondary?: string;
@@ -9,9 +12,11 @@ export interface FieldLabelProps {
 }
 export interface FieldSpec {
     key: string;
-    type?: 'int' | 'string' | 'text' | 'boolean' | 'email' | 'uuid4' | 'choice:multiple' | 'choice:single' | 'mobile_phone' | 'date' | 'datetime' | 'otp' | 'afm' | 'iban' | 'file' | 'image' | 'postal_code' | 'phone_number' | 'array' | 'object';
+    type?: 'int' | 'string' | 'text' | 'boolean' | 'email' | 'uuid4' | 'choice:multiple' | 'choice:single' | 'mobile_phone' | 'date' | 'datetime' | 'otp' | 'afm' | 'amka' | 'iban' | 'file' | 'image' | 'postal_code' | 'phone_number' | 'array' | 'object';
+    trim?: boolean;
     component?: any;
     autoComplete?: string;
+    placeholder?: string;
     maxLength?: number;
     condition?: Record<string, FieldCondition>;
     controlled?: boolean;
@@ -38,7 +43,7 @@ export interface ChildFieldMemoProps extends FieldConditionalProps {
     dependencies: FormData;
 }
 export type FormData = UseFormProps['defaultValues'];
-export interface FieldWithCondition extends Omit<CalculatedField, 'condition'> {
+export interface FieldWithCondition extends Omit<ResolvedField, 'condition'> {
     condition: Record<string, FieldCondition>;
 }
 export interface FieldConditionalProps {
@@ -46,6 +51,7 @@ export interface FieldConditionalProps {
     control: UseFormReturn['control'];
     register: UseFormReturn['register'];
     reset: UseFormReturn['reset'];
+    resetField?: UseFormReturn['resetField'];
     error?: ErrorOption;
     Field: React.FC<FieldProps>;
 }
@@ -56,14 +62,16 @@ export interface FieldComponentItem {
 }
 export interface FieldContainerProps {
     name?: FieldSpec['key'];
+    register: FieldBaseProps['register'];
     layout?: FieldSpec['layout'];
     label?: FieldSpec['label'];
     error?: ErrorOption | Record<string, any>;
+    hasError?: boolean;
     children?: React.ReactNode;
+    controlled?: boolean;
     wrapper?: FieldSpec['wrapper'];
+    labelSize?: FieldsetLegendProps['size'];
 }
-export type FieldComponentRegistry = Record<string, FieldComponentItem>;
-export type OmittedFieldSpec = Omit<FieldSpec, 'component'>;
 export type UnknownValue = never | never[];
 export interface ControlledFieldProps {
     type?: string;
@@ -75,7 +83,7 @@ export interface ControlledFieldProps {
     error?: boolean;
     name?: string;
     disabled?: boolean;
-    Field: React.FC<FieldProps>;
+    Field?: React.FC<FieldProps>;
 }
 export interface UncontrolledFieldProps {
     name: string;
@@ -87,7 +95,7 @@ export interface UncontrolledFieldProps {
     disabled?: boolean;
     Field: React.FC<FieldProps>;
 }
-export interface CalculatedField extends OmittedFieldSpec {
+export interface ResolvedField extends Omit<FieldSpec, 'component'> {
     name: string;
     component: any;
     defaultValue?: never;
@@ -95,11 +103,12 @@ export interface CalculatedField extends OmittedFieldSpec {
     wrapper?: FieldComponentItem['wrapper'];
     multiplicity?: boolean;
 }
-export interface FieldBaseProps extends CalculatedField {
+export interface FieldBaseProps extends ResolvedField {
     control: UseFormReturn['control'];
     register: UseFormReturn['register'];
     reset: UseFormReturn['reset'];
-    Field: React.FC<FieldProps>;
+    resetField?: UseFormReturn['resetField'];
+    Field?: React.FC<FieldProps>;
 }
 export interface FieldProps extends FieldSpec {
     name: string;
@@ -110,6 +119,7 @@ export interface UseFieldProps {
     control: FieldBaseProps['control'];
     register: FieldBaseProps['register'];
     reset: FieldBaseProps['reset'];
+    resetField: FieldBaseProps['resetField'];
     watch: UseFormReturn['watch'];
     formState: UseFormReturn['formState'];
     getFieldState: UseFormReturn['getFieldState'];
@@ -119,5 +129,6 @@ export interface UseFieldProps {
     trigger: UseFormReturn['trigger'];
     clearErrors: UseFormReturn['clearErrors'];
     error?: ErrorOption;
+    registerFieldFocus: registerFieldFocus;
     componentRegistry?: FieldComponentRegistry;
 }

package/Field/utils/evaluateFieldWithConditions.d.ts

@@ -1,2 +1,2 @@
-import { FieldWithCondition, CalculatedField } from '@digigov/form/Field/types';
-export declare function evaluateFieldWithConditions(field: FieldWithCondition, variables: FormData): CalculatedField;
+import type { FieldWithCondition, ResolvedField } from '@digigov/form/Field/types';
+export declare function evaluateFieldWithConditions(field: FieldWithCondition, variables: FormData): ResolvedField;

package/Field/utils/evaluateFieldWithConditions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/Field/utils/evaluateFieldWithConditions.ts"],
-  "sourcesContent": ["import { FieldWithCondition, CalculatedField } from '@digigov/form/Field/types';\n\nexport function evaluateFieldWithConditions(\n  field: FieldWithCondition,\n  variables: FormData\n): CalculatedField {\n  const newField = { ...field };\n  if (variables) {\n    for (const key in variables) {\n      if (field.condition[key] && field.condition[key].is) {\n        const is = field.condition[key].is;\n        if (\n          is === variables[key] ||\n          (Array.isArray(variables[key]) && variables[key].includes(is))\n        ) {\n          const then = field.condition[key].then || {};\n          for (const attr in then) {\n            newField[attr] = then[attr];\n          }\n        }\n      } else if (field.condition[key]) {\n        const otherwise = field.condition[key].else || {};\n        for (const attr in otherwise) {\n          newField[attr] = otherwise[attr];\n        }\n      }\n    }\n  }\n  return newField;\n}\n"],
-  "mappings": "AAEO,SAAS,4BACd,OACA,WACiB;AACjB,QAAM,WAAW,EAAE,GAAG,MAAM;AAC5B,MAAI,WAAW;AACb,eAAW,OAAO,WAAW;AAC3B,UAAI,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,EAAE,IAAI;AACnD,cAAM,KAAK,MAAM,UAAU,GAAG,EAAE;AAChC,YACE,OAAO,UAAU,GAAG,KACnB,MAAM,QAAQ,UAAU,GAAG,CAAC,KAAK,UAAU,GAAG,EAAE,SAAS,EAAE,GAC5D;AACA,gBAAM,OAAO,MAAM,UAAU,GAAG,EAAE,QAAQ,CAAC;AAC3C,qBAAW,QAAQ,MAAM;AACvB,qBAAS,IAAI,IAAI,KAAK,IAAI;AAAA,UAC5B;AAAA,QACF;AAAA,MACF,WAAW,MAAM,UAAU,GAAG,GAAG;AAC/B,cAAM,YAAY,MAAM,UAAU,GAAG,EAAE,QAAQ,CAAC;AAChD,mBAAW,QAAQ,WAAW;AAC5B,mBAAS,IAAI,IAAI,UAAU,IAAI;AAAA,QACjC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
+  "sourcesContent": ["import type {\n  FieldWithCondition,\n  ResolvedField,\n} from '@digigov/form/Field/types';\n\nexport function evaluateFieldWithConditions(\n  field: FieldWithCondition,\n  variables: FormData\n): ResolvedField {\n  const newField = { ...field };\n  if (variables) {\n    for (const key in variables) {\n      if (field.condition[key] && field.condition[key].is) {\n        const is = field.condition[key].is;\n        if (\n          is === variables[key] ||\n          (Array.isArray(variables[key]) && variables[key].includes(is))\n        ) {\n          const then = field.condition[key].then || {};\n          for (const attr in then) {\n            newField[attr] = then[attr];\n          }\n        }\n      } else if (field.condition[key]) {\n        const otherwise = field.condition[key].else || {};\n        for (const attr in otherwise) {\n          newField[attr] = otherwise[attr];\n        }\n      }\n    }\n  }\n  return newField;\n}\n"],
+  "mappings": "AAKO,SAAS,4BACd,OACA,WACe;AACf,QAAM,WAAW,EAAE,GAAG,MAAM;AAC5B,MAAI,WAAW;AACb,eAAW,OAAO,WAAW;AAC3B,UAAI,MAAM,UAAU,GAAG,KAAK,MAAM,UAAU,GAAG,EAAE,IAAI;AACnD,cAAM,KAAK,MAAM,UAAU,GAAG,EAAE;AAChC,YACE,OAAO,UAAU,GAAG,KACnB,MAAM,QAAQ,UAAU,GAAG,CAAC,KAAK,UAAU,GAAG,EAAE,SAAS,EAAE,GAC5D;AACA,gBAAM,OAAO,MAAM,UAAU,GAAG,EAAE,QAAQ,CAAC;AAC3C,qBAAW,QAAQ,MAAM;AACvB,qBAAS,IAAI,IAAI,KAAK,IAAI;AAAA,UAC5B;AAAA,QACF;AAAA,MACF,WAAW,MAAM,UAAU,GAAG,GAAG;AAC/B,cAAM,YAAY,MAAM,UAAU,GAAG,EAAE,QAAQ,CAAC;AAChD,mBAAW,QAAQ,WAAW;AAC5B,mBAAS,IAAI,IAAI,UAAU,IAAI;AAAA,QACjC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,SAAO;AACT;",
   "names": []
 }

package/Field/utils/resolveField/index.js

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

package/Field/utils/{calculateField → resolveField}/package.json

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

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/FieldArray.stories.d.ts

@@ -5,5 +5,7 @@ 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";
+export { CardsWithError } from "@digigov/form/FieldArray/__stories__/CardsWithError";
 import FieldArray from '@digigov/form/FieldArray';

package/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay/index.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { ArrayItemHeader } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader";
+import { Table, TableBody, TableContainer } from "@digigov/ui/content";
+const ArrayContainerDisplay = ({
+  fieldArrayValues,
+  ofField,
+  customField,
+  children
+}) => {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, customField?.extra?.layout === "card" ? children : /* @__PURE__ */ React.createElement(TableContainer, { ...customField.extra?.tableContainer }, /* @__PURE__ */ React.createElement(Table, { verticalAlign: customField.extra?.verticalAlign }, !customField.extra?.noHeader && ofField?.extra && fieldArrayValues?.length > 0 && /* @__PURE__ */ React.createElement(
+    ArrayItemHeader,
+    {
+      labels: ofField.type === "object" ? ofField.extra.fields.map(({ label }) => label.primary) : [ofField.label.primary],
+      disabled: customField?.editable === false
+    }
+  ), /* @__PURE__ */ React.createElement(TableBody, null, children))));
+};
+var ArrayContainerDisplay_default = ArrayContainerDisplay;
+export {
+  ArrayContainerDisplay,
+  ArrayContainerDisplay_default as default
+};
+//# sourceMappingURL=ArrayContainerDisplay.js.map

package/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay/package.json

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

package/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface ArrayContainerDisplayProps {
+    fieldArrayValues: any[];
+    ofField: any;
+    customField: any;
+    children: React.ReactNode;
+}
+export declare const ArrayContainerDisplay: ({ fieldArrayValues, ofField, customField, children, }: ArrayContainerDisplayProps) => React.JSX.Element;
+export default ArrayContainerDisplay;

package/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/FieldArray/FormDialog/ArrayDisplay/ArrayContainerDisplay.tsx"],
+  "sourcesContent": ["import React from 'react';\nimport { ArrayItemHeader } from '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader';\nimport { Table, TableBody, TableContainer } from '@digigov/ui/content';\n\nexport interface ArrayContainerDisplayProps {\n  fieldArrayValues: any[];\n  ofField: any;\n  customField: any;\n  children: React.ReactNode;\n}\n\nexport const ArrayContainerDisplay = ({\n  fieldArrayValues,\n  ofField,\n  customField,\n  children,\n}: ArrayContainerDisplayProps) => {\n  return (\n    <>\n      {customField?.extra?.layout === 'card' ? (\n        children\n      ) : (\n        <TableContainer {...customField.extra?.tableContainer}>\n          <Table verticalAlign={customField.extra?.verticalAlign}>\n            {!customField.extra?.noHeader &&\n              ofField?.extra &&\n              fieldArrayValues?.length > 0 && (\n                <ArrayItemHeader\n                  labels={\n                    ofField.type === 'object'\n                      ? ofField.extra.fields.map(({ label }) => label.primary)\n                      : [ofField.label.primary]\n                  }\n                  disabled={customField?.editable === false}\n                />\n              )}\n            <TableBody>{children}</TableBody>\n          </Table>\n        </TableContainer>\n      )}\n    </>\n  );\n};\n\nexport default ArrayContainerDisplay;\n"],
+  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,uBAAuB;AAChC,SAAS,OAAO,WAAW,sBAAsB;AAS1C,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAkC;AAChC,SACE,0DACG,aAAa,OAAO,WAAW,SAC9B,WAEA,oCAAC,kBAAgB,GAAG,YAAY,OAAO,kBACrC,oCAAC,SAAM,eAAe,YAAY,OAAO,iBACtC,CAAC,YAAY,OAAO,YACnB,SAAS,SACT,kBAAkB,SAAS,KACzB;AAAA,IAAC;AAAA;AAAA,MACC,QACE,QAAQ,SAAS,WACb,QAAQ,MAAM,OAAO,IAAI,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,IACrD,CAAC,QAAQ,MAAM,OAAO;AAAA,MAE5B,UAAU,aAAa,aAAa;AAAA;AAAA,EACtC,GAEJ,oCAAC,iBAAW,QAAS,CACvB,CACF,CAEJ;AAEJ;AAEA,IAAO,gCAAQ;",
+  "names": []
+}

package/FieldArray/FormDialog/ArrayDisplay/ArrayDisplay.stories.d.ts

@@ -0,0 +1,13 @@
+declare namespace _default {
+    export let title: string;
+    export { ArrayDisplay as component };
+    export let displayName: string;
+}
+export default _default;
+export { Default } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Default";
+export { Sortable } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Sortable";
+export { ReadOnly } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnly";
+export { Cards } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/Cards";
+export { SortableCards } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/SortableCards";
+export { ReadOnlyCards } from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/__stories__/ReadOnlyCards";
+import ArrayDisplay from '@digigov/form/FieldArray/FormDialog/ArrayDisplay';

package/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay/index.js

@@ -0,0 +1,184 @@
+import React from "react";
+import { ErrorMessage } from "@digigov/ui";
+import {
+  Card,
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  TableDataCell,
+  TableRow
+} from "@digigov/ui/content";
+import { Button, ButtonGroup } from "@digigov/ui/form/Button";
+import { Grid, SectionBreak, Stack } from "@digigov/ui/layouts";
+import Heading from "@digigov/ui/typography/Heading";
+import { NormalText } from "@digigov/ui/typography/NormalText";
+const ArrayItemDisplay = ({
+  name,
+  data,
+  edit,
+  remove,
+  disabledEdit,
+  disabledDelete,
+  disabled,
+  sortable,
+  index,
+  isFirst,
+  isLast,
+  move,
+  valueDisplay,
+  border = true,
+  wordBreak = "break-all",
+  stackProps = {
+    spacing: 4,
+    alignItems: "flex-end",
+    justifyContent: "flex-end",
+    direction: "column"
+  },
+  customField,
+  ofField,
+  fieldArrayValues,
+  error
+}) => {
+  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";
+  const hasItemButtons = !disabled && (!disabledEdit || !disabledDelete);
+  const fieldLabel = ofField?.type === "object" ? ofField?.extra?.fields.reduce(
+    (acc, { key, label }) => ({
+      ...acc,
+      [key]: label.primary
+    }),
+    {}
+  ) : ofField?.label?.primary;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, customField?.extra?.layout === "card" ? /* @__PURE__ */ React.createElement(
+    Card,
+    {
+      borderColor: "light",
+      variant: "border",
+      dense: true,
+      ...customField?.extra.cardContainer
+    },
+    sortable && /* @__PURE__ */ React.createElement(Heading, { size: "sm" }, "\u0395\u03C0\u03B9\u03BB\u03BF\u03B3\u03AE #", index + 1),
+    /* @__PURE__ */ React.createElement(SummaryList, { mb: 0, noLastBorder: !hasItemButtons, error: !!error }, error && Object.keys(error).length > 0 && Object.entries(error).map(([fieldKey, fieldError]) => /* @__PURE__ */ React.createElement(ErrorMessage, { key: fieldKey, id: `${name}-error` }, `${ofField?.type === "object" && ofField?.extra?.fields ? `${fieldLabel[fieldKey] || fieldKey}: ` : ""}`, fieldError.message)), values?.map?.((value, valueIndex) => {
+      const key = ofField?.type === "object" ? ofField?.extra?.fields?.[valueIndex]?.key : ofField?.key;
+      const label = ofField?.type === "object" ? fieldLabel[key] : fieldLabel;
+      const shouldShowKey = !customField?.extra?.noHeader && ofField?.extra && fieldArrayValues?.length > 0;
+      return /* @__PURE__ */ React.createElement(SummaryListItem, { key: valueIndex }, shouldShowKey && /* @__PURE__ */ React.createElement(
+        SummaryListItemKey,
+        {
+          error: !!error && Object.keys(error)?.includes(key)
+        },
+        label
+      ), /* @__PURE__ */ React.createElement(
+        SummaryListItemValue,
+        {
+          error: !shouldShowKey && !!error && Object.keys(error)?.includes(key)
+        },
+        value?.name || (Array.isArray(value) ? value.join("\n") : valueDisplay ? valueDisplay(value) : value) || ""
+      ));
+    })),
+    disabled === true || disabledEdit === true && disabledDelete === true ? null : /* @__PURE__ */ React.createElement(ButtonGroup, { mb: 0, ...customField?.extra?.cardButtonGroup }, 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(React.Fragment, null, /* @__PURE__ */ React.createElement(SectionBreak, null), sortable && !disabled && !(isFirst && isLast) && /* @__PURE__ */ React.createElement(NormalText, { mb: 0 }, "\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"
+    ))))
+  ) : /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(TableRow, null, values?.map?.((value, valueIndex) => {
+    const fieldKey = ofField?.type === "object" ? ofField?.extra?.fields?.[valueIndex]?.key : ofField?.key;
+    return /* @__PURE__ */ React.createElement(
+      TableDataCell,
+      {
+        key: valueIndex,
+        variant: borderVariant,
+        wordBreak,
+        pb: sortable ? 0 : void 0,
+        pt: sortable ? 4 : void 0,
+        highlight: !!error && Object.keys(error)?.includes(fieldKey) ? "error" : void 0
+      },
+      sortable && valueIndex === 0 && /* @__PURE__ */ React.createElement(Heading, { size: "sm", 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