@digigov/form 2.0.0-555d1027 → 2.0.0-5e7a6790

package/registry/index.js

@@ -10,7 +10,7 @@ import * as _digigov_form_Field_FieldBaseContainer from "@digigov/form/Field/Fie
 import * as _digigov_form_Field_FieldConditional from "@digigov/form/Field/FieldConditional";
 import * as _digigov_form_Field from "@digigov/form/Field";
 import * as _digigov_form_Field_types from "@digigov/form/Field/types";
-import * as _digigov_form_FieldArray_FormDialog from "@digigov/form/FieldArray/FormDialog";
+import * as _digigov_form_FieldArray_BaseFieldArray from "@digigov/form/FieldArray/BaseFieldArray";
 import * as _digigov_form_FieldArray from "@digigov/form/FieldArray";
 import * as _digigov_form_FieldObject from "@digigov/form/FieldObject";
 import * as _digigov_form_Fieldset_FieldsetWithContext from "@digigov/form/Fieldset/FieldsetWithContext";
@@ -25,15 +25,17 @@ import * as _digigov_form_Questions_QuestionsContext from "@digigov/form/Questio
 import * as _digigov_form_Questions_getNextStep from "@digigov/form/Questions/getNextStep";
 import * as _digigov_form_Questions from "@digigov/form/Questions";
 import * as _digigov_form_Questions_types from "@digigov/form/Questions/types";
+import * as _digigov_form_hooks_useFieldFocusManager from "@digigov/form/hooks/useFieldFocusManager";
+import * as _digigov_form_hooks_utils from "@digigov/form/hooks/utils";
 import * as _digigov_form_inputs from "@digigov/form/inputs";
-import * as _digigov_form_inputs_inputsScenarios from "@digigov/form/inputs/inputsScenarios";
-import * as _digigov_form_locales_el from "@digigov/form/locales/el";
+import * as _digigov_form_inputs_registry from "@digigov/form/inputs/registry";
 import * as _digigov_form_validators from "@digigov/form/validators";
 import * as _digigov_form_validators_types from "@digigov/form/validators/types";
-import * as _digigov_form_Field_utils_calculateField from "@digigov/form/Field/utils/calculateField";
 import * as _digigov_form_Field_utils_evaluateFieldWithConditions from "@digigov/form/Field/utils/evaluateFieldWithConditions";
-import * as _digigov_form_Field_utils from "@digigov/form/Field/utils";
+import * as _digigov_form_Field_utils_resolveField from "@digigov/form/Field/utils/resolveField";
 import * as _digigov_form_Field_utils_useField from "@digigov/form/Field/utils/useField";
+import * as _digigov_form_FieldArray_FormDialog_ArrayEditModal from "@digigov/form/FieldArray/FormDialog/ArrayEditModal";
+import * as _digigov_form_FieldArray_FormDialog from "@digigov/form/FieldArray/FormDialog";
 import * as _digigov_form_Questions_Step_ReviewStep from "@digigov/form/Questions/Step/ReviewStep";
 import * as _digigov_form_Questions_Step_Step from "@digigov/form/Questions/Step/Step";
 import * as _digigov_form_Questions_Step_StepArrayReview from "@digigov/form/Questions/Step/StepArrayReview";
@@ -45,8 +47,8 @@ import * as _digigov_form_Questions_Step_StepTitle from "@digigov/form/Questions
 import * as _digigov_form_Questions_Step_getAddMoreFields from "@digigov/form/Questions/Step/getAddMoreFields";
 import * as _digigov_form_Questions_Step from "@digigov/form/Questions/Step";
 import * as _digigov_form_Questions_Step_types from "@digigov/form/Questions/Step/types";
-import * as _digigov_form_inputs_AutoCompleteInput from "@digigov/form/inputs/AutoCompleteInput";
 import * as _digigov_form_inputs_Checkboxes from "@digigov/form/inputs/Checkboxes";
+import * as _digigov_form_inputs_AutoCompleteInput from "@digigov/form/inputs/AutoCompleteInput";
 import * as _digigov_form_inputs_DateInput from "@digigov/form/inputs/DateInput";
 import * as _digigov_form_inputs_DateTimeInput from "@digigov/form/inputs/DateTimeInput";
 import * as _digigov_form_inputs_FileInput from "@digigov/form/inputs/FileInput";
@@ -71,6 +73,9 @@ import * as _digigov_form_validators_utils_phone from "@digigov/form/validators/
 import * as _digigov_form_validators_utils_postal_code from "@digigov/form/validators/utils/postal_code";
 import * as _digigov_form_validators_utils_text_limit from "@digigov/form/validators/utils/text_limit";
 import * as _digigov_form_validators_utils_uuid4 from "@digigov/form/validators/utils/uuid4";
+import * as _digigov_form_FieldArray_FormDialog_ArrayDisplay_ArrayItemDisplay from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay";
+import * as _digigov_form_FieldArray_FormDialog_ArrayDisplay_ArrayItemHeader from "@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader";
+import * as _digigov_form_FieldArray_FormDialog_ArrayDisplay from "@digigov/form/FieldArray/FormDialog/ArrayDisplay";
 function lazyImport(pkgImport) {
   return new Proxy(
     {},
@@ -101,7 +106,7 @@ export default {
   '@digigov/form/Field/FieldConditional': lazyImport(_digigov_form_Field_FieldConditional),
   '@digigov/form/Field': lazyImport(_digigov_form_Field),
   '@digigov/form/Field/types': lazyImport(_digigov_form_Field_types),
-  '@digigov/form/FieldArray/FormDialog': lazyImport(_digigov_form_FieldArray_FormDialog),
+  '@digigov/form/FieldArray/BaseFieldArray': lazyImport(_digigov_form_FieldArray_BaseFieldArray),
   '@digigov/form/FieldArray': lazyImport(_digigov_form_FieldArray),
   '@digigov/form/FieldObject': lazyImport(_digigov_form_FieldObject),
   '@digigov/form/Fieldset/FieldsetWithContext': lazyImport(_digigov_form_Fieldset_FieldsetWithContext),
@@ -116,15 +121,17 @@ export default {
   '@digigov/form/Questions/getNextStep': lazyImport(_digigov_form_Questions_getNextStep),
   '@digigov/form/Questions': lazyImport(_digigov_form_Questions),
   '@digigov/form/Questions/types': lazyImport(_digigov_form_Questions_types),
+  '@digigov/form/hooks/useFieldFocusManager': lazyImport(_digigov_form_hooks_useFieldFocusManager),
+  '@digigov/form/hooks/utils': lazyImport(_digigov_form_hooks_utils),
   '@digigov/form/inputs': lazyImport(_digigov_form_inputs),
-  '@digigov/form/inputs/inputsScenarios': lazyImport(_digigov_form_inputs_inputsScenarios),
-  '@digigov/form/locales/el': lazyImport(_digigov_form_locales_el),
+  '@digigov/form/inputs/registry': lazyImport(_digigov_form_inputs_registry),
   '@digigov/form/validators': lazyImport(_digigov_form_validators),
   '@digigov/form/validators/types': lazyImport(_digigov_form_validators_types),
-  '@digigov/form/Field/utils/calculateField': lazyImport(_digigov_form_Field_utils_calculateField),
   '@digigov/form/Field/utils/evaluateFieldWithConditions': lazyImport(_digigov_form_Field_utils_evaluateFieldWithConditions),
-  '@digigov/form/Field/utils': lazyImport(_digigov_form_Field_utils),
+  '@digigov/form/Field/utils/resolveField': lazyImport(_digigov_form_Field_utils_resolveField),
   '@digigov/form/Field/utils/useField': lazyImport(_digigov_form_Field_utils_useField),
+  '@digigov/form/FieldArray/FormDialog/ArrayEditModal': lazyImport(_digigov_form_FieldArray_FormDialog_ArrayEditModal),
+  '@digigov/form/FieldArray/FormDialog': lazyImport(_digigov_form_FieldArray_FormDialog),
   '@digigov/form/Questions/Step/ReviewStep': lazyImport(_digigov_form_Questions_Step_ReviewStep),
   '@digigov/form/Questions/Step/Step': lazyImport(_digigov_form_Questions_Step_Step),
   '@digigov/form/Questions/Step/StepArrayReview': lazyImport(_digigov_form_Questions_Step_StepArrayReview),
@@ -136,8 +143,8 @@ export default {
   '@digigov/form/Questions/Step/getAddMoreFields': lazyImport(_digigov_form_Questions_Step_getAddMoreFields),
   '@digigov/form/Questions/Step': lazyImport(_digigov_form_Questions_Step),
   '@digigov/form/Questions/Step/types': lazyImport(_digigov_form_Questions_Step_types),
-  '@digigov/form/inputs/AutoCompleteInput': lazyImport(_digigov_form_inputs_AutoCompleteInput),
   '@digigov/form/inputs/Checkboxes': lazyImport(_digigov_form_inputs_Checkboxes),
+  '@digigov/form/inputs/AutoCompleteInput': lazyImport(_digigov_form_inputs_AutoCompleteInput),
   '@digigov/form/inputs/DateInput': lazyImport(_digigov_form_inputs_DateInput),
   '@digigov/form/inputs/DateTimeInput': lazyImport(_digigov_form_inputs_DateTimeInput),
   '@digigov/form/inputs/FileInput': lazyImport(_digigov_form_inputs_FileInput),
@@ -161,5 +168,8 @@ export default {
   '@digigov/form/validators/utils/phone': lazyImport(_digigov_form_validators_utils_phone),
   '@digigov/form/validators/utils/postal_code': lazyImport(_digigov_form_validators_utils_postal_code),
   '@digigov/form/validators/utils/text_limit': lazyImport(_digigov_form_validators_utils_text_limit),
-  '@digigov/form/validators/utils/uuid4': lazyImport(_digigov_form_validators_utils_uuid4)
+  '@digigov/form/validators/utils/uuid4': lazyImport(_digigov_form_validators_utils_uuid4),
+  '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemDisplay': lazyImport(_digigov_form_FieldArray_FormDialog_ArrayDisplay_ArrayItemDisplay),
+  '@digigov/form/FieldArray/FormDialog/ArrayDisplay/ArrayItemHeader': lazyImport(_digigov_form_FieldArray_FormDialog_ArrayDisplay_ArrayItemHeader),
+  '@digigov/form/FieldArray/FormDialog/ArrayDisplay': lazyImport(_digigov_form_FieldArray_FormDialog_ArrayDisplay)
 };

package/src/Field/ErrorGroup.tsx

@@ -1,13 +1,13 @@
 import React, { createContext, useEffect, useState } from 'react';
-import { ErrorOption } from 'react-hook-form';
-import { FieldLabelProps } from '@digigov/form/Field/types';
+import type { ErrorOption } from 'react-hook-form';
+import type { FieldLabelProps } from '@digigov/form/Field/types';
 import { List, ListItem } from '@digigov/ui/content/List';
 import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
 import { useTranslation } from '@digigov/ui/i18n';
 import { Link } from '@digigov/ui/navigation/Link';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { Base } from '@digigov/ui/utils/Base';
-import { Breakpoints } from '@digigov/ui/utils/hooks/useScreen';
+import type { Breakpoints } from '@digigov/ui/utils/hooks/useScreen';
 interface ErrorGroupContextType {
   setError: (
     name?: string,

package/src/Field/FieldBase.tsx

@@ -2,7 +2,7 @@ import React, { useContext, useEffect } from 'react';
 import { Controller } from 'react-hook-form';
 import { ErrorGroupContext } from '@digigov/form/Field/ErrorGroup';
 import FieldBaseContainer from '@digigov/form/Field/FieldBaseContainer';
-import { FieldBaseProps } from '@digigov/form/Field/types';
+import type { FieldBaseProps } from '@digigov/form/Field/types';
 
 export const FieldBase: React.FC<FieldBaseProps> = ({
   required,
@@ -54,7 +54,6 @@ export const FieldBase: React.FC<FieldBaseProps> = ({
               <Component
                 {...field}
                 control={control}
-                ref={undefined}
                 defaultValue={defaultValue ?? field.value}
                 extra={extra}
                 error={!!error}

package/src/Field/FieldBaseContainer.tsx

@@ -1,5 +1,6 @@
+import type { ComponentRef } from 'react';
 import React from 'react';
-import { FieldContainerProps } from '@digigov/form/Field/types';
+import type { FieldContainerProps } from '@digigov/form/Field/types';
 import Label from '@digigov/form/inputs/Label';
 import { ErrorMessage } from '@digigov/react-core/ErrorMessage';
 import FieldContainer from '@digigov/react-core/FieldContainer';
@@ -9,63 +10,72 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const FieldBaseContainer: React.FC<FieldContainerProps> = ({
-  name,
-  register,
-  wrapper,
-  label,
-  children,
-  error,
-  hasError,
-  layout,
-  controlled,
-  labelSize = 'sm',
-}) => {
-  const { t } = useTranslation();
-  const errorMessage = error?.message.key
-    ? error.message.key
-    : error?.message || '';
-  const errorContext = error?.message.context || {};
-  if (wrapper === 'fieldset') {
-    return (
-      <FieldContainer error={hasError} {...layout}>
-        <Fieldset
-          className="outline-none"
-          {...(controlled && {
-            tabIndex: -1,
-            ...(register(name || '') as any),
-          })}
-        >
-          <FieldsetLegend size={labelSize}>
-            {label && label.primary}
-          </FieldsetLegend>
-          {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
-          {error && (
-            <ErrorMessage id={`${name}-error`}>
-              {t(errorMessage, errorContext)}
-            </ErrorMessage>
-          )}
-          {children}
-          {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
-        </Fieldset>
-      </FieldContainer>
-    );
-  } else {
-    return (
-      <FieldContainer error={hasError} {...layout}>
-        <LabelContainer>
-          {label && <Label label={label} />}
-          {error && (
-            <ErrorMessage id={`${name}-error`}>
-              {t(errorMessage, errorContext)}
-            </ErrorMessage>
-          )}
-          {children}
-          {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
-        </LabelContainer>
-      </FieldContainer>
-    );
+export const FieldBaseContainer = React.forwardRef<
+  ComponentRef<typeof Fieldset>,
+  FieldContainerProps
+>(
+  (
+    {
+      name,
+      wrapper,
+      label,
+      children,
+      error,
+      hasError,
+      layout,
+      controlled,
+      labelSize = 'sm',
+    },
+    ref
+  ) => {
+    const { t } = useTranslation();
+    const errorMessage = error?.message.key
+      ? error.message.key
+      : error?.message || '';
+    const errorContext = error?.message.context || {};
+    if (wrapper === 'fieldset') {
+      return (
+        <FieldContainer error={hasError} {...layout}>
+          <Fieldset
+            ref={ref}
+            className="outline-none"
+            {...(controlled && {
+              tabIndex: -1,
+            })}
+          >
+            <FieldsetLegend size={labelSize}>
+              {label && label.primary}
+            </FieldsetLegend>
+            {label && label.secondary && <Hint>{t(label.secondary)}</Hint>}
+            {error && (
+              <ErrorMessage id={`${name}-error`}>
+                {t(errorMessage, errorContext)}
+              </ErrorMessage>
+            )}
+            {children}
+            {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
+          </Fieldset>
+        </FieldContainer>
+      );
+    } else {
+      return (
+        <FieldContainer error={hasError} {...layout}>
+          <LabelContainer>
+            {label && <Label label={label} />}
+            {error && (
+              <ErrorMessage id={`${name}-error`}>
+                {t(errorMessage, errorContext)}
+              </ErrorMessage>
+            )}
+            {children}
+            {label && label.hint && <Hint size="sm">{label.hint}</Hint>}
+          </LabelContainer>
+        </FieldContainer>
+      );
+    }
   }
-};
+);
+
+FieldBaseContainer.displayName = 'FieldBaseContainer';
 
 export default FieldBaseContainer;

package/src/Field/FieldConditional.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useWatch } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
-import {
+import type {
   ChildFieldMemoProps,
   FieldConditionalProps,
 } from '@digigov/form/Field/types';

package/src/Field/index.tsx

@@ -1,16 +1,8 @@
 import React, { useMemo } from 'react';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
 import FieldConditional from '@digigov/form/Field/FieldConditional';
-import {
-  FieldWithCondition,
-  CalculatedField,
-  FieldProps,
-} from '@digigov/form/Field/types';
-import {
-  FIELD_COMPONENTS,
-  ALTERNATIVE_COMPONENTS,
-} from '@digigov/form/Field/utils';
-import { calculateField } from '@digigov/form/Field/utils/calculateField';
+import type { FieldWithCondition, FieldProps } from '@digigov/form/Field/types';
+import { resolveField } from '@digigov/form/Field/utils/resolveField';
 import { useField } from '@digigov/form/Field/utils/useField';
 import FieldArray from '@digigov/form/FieldArray';
 import Multiplicity from '@digigov/form/MultiplicityField';
@@ -33,35 +25,27 @@ export const Field: React.FC<FieldProps> = ({
     unregister,
     trigger,
     clearErrors,
+    registerFieldFocus,
   } = useField(name, customField?.type ? customField : null);
-  const calculatedField: CalculatedField = useMemo(
-    () =>
-      calculateField(
-        children,
-        field,
-        {
-          ...FIELD_COMPONENTS,
-          ...componentRegistry,
-        },
-        ALTERNATIVE_COMPONENTS
-      ),
+  const resolvedField = useMemo(
+    () => resolveField(children, field, componentRegistry),
     [field]
   );
-  if (calculatedField.condition) {
+  if (resolvedField.condition) {
     return (
       <FieldConditional
         control={control}
         reset={reset}
         resetField={resetField}
         register={register}
-        field={calculatedField as FieldWithCondition}
+        field={resolvedField as FieldWithCondition}
         error={error}
         Field={Field}
       />
     );
   }
-  if (calculatedField.type === 'array' && !calculatedField.multiplicity) {
-    calculatedField.name = name;
+  if (resolvedField.type === 'array' && !resolvedField.multiplicity) {
+    resolvedField.name = name;
     return (
       <FieldArray
         control={control}
@@ -77,15 +61,13 @@ export const Field: React.FC<FieldProps> = ({
         Field={Field}
         reset={reset}
         resetField={resetField}
-        {...calculatedField}
+        registerFieldFocus={registerFieldFocus}
+        {...resolvedField}
       />
     );
   }
-  if (
-    calculatedField.type === 'array' &&
-    calculatedField.multiplicity === true
-  ) {
-    calculatedField.name = name;
+  if (resolvedField.type === 'array' && resolvedField.multiplicity === true) {
+    resolvedField.name = name;
     return (
       <Multiplicity
         control={control}
@@ -99,7 +81,7 @@ export const Field: React.FC<FieldProps> = ({
         unregister={unregister}
         resetField={resetField}
         Field={Field}
-        {...calculatedField}
+        {...resolvedField}
       />
     );
   }
@@ -110,7 +92,7 @@ export const Field: React.FC<FieldProps> = ({
   const customError = error ? error : formState?.errors[name];
   return (
     <FieldBase
-      {...calculatedField}
+      {...resolvedField}
       editable={editable}
       name={name}
       control={control}

package/src/Field/types.tsx

@@ -1,8 +1,10 @@
-import React from 'react';
-import { ErrorOption, UseFormReturn, UseFormProps } from 'react-hook-form';
-import { ValidatorSchema } from '@digigov/form/validators/types';
-import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
-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;
@@ -73,7 +75,7 @@ export interface ChildFieldMemoProps extends FieldConditionalProps {
 }
 export type FormData = UseFormProps['defaultValues'];
 
-export interface FieldWithCondition extends Omit<CalculatedField, 'condition'> {
+export interface FieldWithCondition extends Omit<ResolvedField, 'condition'> {
   condition: Record<string, FieldCondition>;
 }
 
@@ -107,10 +109,6 @@ export interface FieldContainerProps {
   labelSize?: FieldsetLegendProps['size'];
 }
 
-export type FieldComponentRegistry = Record<string, FieldComponentItem>;
-
-export type OmittedFieldSpec = Omit<FieldSpec, 'component'>;
-
 export type UnknownValue = never | never[];
 
 export interface ControlledFieldProps {
@@ -137,7 +135,7 @@ export interface UncontrolledFieldProps {
   Field: React.FC<FieldProps>;
 }
 
-export interface CalculatedField extends OmittedFieldSpec {
+export interface ResolvedField extends Omit<FieldSpec, 'component'> {
   name: string;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   component: any;
@@ -147,7 +145,7 @@ export interface CalculatedField extends OmittedFieldSpec {
   multiplicity?: boolean;
 }
 
-export interface FieldBaseProps extends CalculatedField {
+export interface FieldBaseProps extends ResolvedField {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
@@ -175,5 +173,6 @@ export interface UseFieldProps {
   trigger: UseFormReturn['trigger'];
   clearErrors: UseFormReturn['clearErrors'];
   error?: ErrorOption;
+  registerFieldFocus: registerFieldFocus;
   componentRegistry?: FieldComponentRegistry;
 }

package/src/Field/utils/evaluateFieldWithConditions.ts

@@ -1,9 +1,12 @@
-import { FieldWithCondition, CalculatedField } from '@digigov/form/Field/types';
+import type {
+  FieldWithCondition,
+  ResolvedField,
+} from '@digigov/form/Field/types';
 
 export function evaluateFieldWithConditions(
   field: FieldWithCondition,
   variables: FormData
-): CalculatedField {
+): ResolvedField {
   const newField = { ...field };
   if (variables) {
     for (const key in variables) {

package/src/Field/utils/resolveField.ts

@@ -0,0 +1,58 @@
+import type {
+  FieldProps,
+  FieldSpec,
+  ResolvedField,
+} from '@digigov/form/Field/types';
+import {
+  ALTERNATIVE_COMPONENTS,
+  FIELD_COMPONENTS,
+  type FieldComponentRegistry,
+} from '@digigov/form/inputs/registry';
+
+export function resolveField(
+  children: FieldProps['children'],
+  field: FieldSpec,
+  customComponentRegistry?: FieldComponentRegistry
+): ResolvedField {
+  const fieldComponentRegistry = {
+    ...FIELD_COMPONENTS,
+    ...(customComponentRegistry ?? {}),
+  };
+
+  const resolvedField = { ...field };
+
+  if (children) {
+    resolvedField.component = children;
+    resolvedField.controlled = true;
+  } else if (typeof field.component === 'function') {
+    // leave as is
+  } 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 as ResolvedField;
+}

package/src/Field/utils/useField.ts

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'react';
-import { FieldSpec, UseFieldProps } from '@digigov/form/Field/types';
+import type { FieldSpec, UseFieldProps } from '@digigov/form/Field/types';
 import { FormContext } from '@digigov/form/FormContext';
 
 export const useField = (
@@ -23,6 +23,7 @@ export const useField = (
     getValues,
     unregister,
     formState,
+    registerFieldFocus,
   } = useContext(FormContext);
   if (!registerField) {
     throw new Error(`
@@ -62,5 +63,6 @@ export const useField = (
     unregister,
     formState,
     error,
+    registerFieldFocus,
   };
 };

package/src/FieldArray/BaseFieldArray.tsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import { useFieldArray } from 'react-hook-form';
+import type { FieldArrayProps } from '@digigov/form/FieldArray';
+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';
+
+type BaseFieldArrayProps = Omit<
+  FieldArrayProps,
+  | 'registerFieldFocus'
+  | 'trigger'
+  | 'clearErrors'
+  | 'setValue'
+  | 'reset'
+  | 'resetField'
+>;
+export const BaseFieldArray = React.forwardRef<
+  HTMLButtonElement,
+  BaseFieldArrayProps
+>(
+  (
+    {
+      name,
+      register,
+      control,
+      formState,
+      error,
+      getValues,
+      Field,
+      ...customField
+    },
+    ref
+  ) => {
+    const { append, remove } = useFieldArray({
+      control,
+      name,
+    });
+    const fields = getValues(name) || [];
+
+    return (
+      <>
+        {fields.map((field, index) => (
+          <Card
+            variant={customField.extra?.border ? 'border' : 'divider'}
+            key={field.id || index}
+          >
+            <Fieldset>
+              <FieldsetLabel>
+                {`${customField.extra?.label.object.title}${!customField.extra?.noIndex ? ' ' + String(index + 1) : ''}`}
+              </FieldsetLabel>
+              <FieldObject
+                name={`${name}.${index}`}
+                error={Array.isArray(error) && error[index]}
+                formState={formState}
+                register={register}
+                control={control}
+                {...customField.extra?.of}
+                Field={Field}
+              />
+              <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}
+              </Button>
+            </Fieldset>
+          </Card>
+        ))}
+        {customField.editable && (
+          <Button
+            ref={ref}
+            type="button"
+            name={`${name}-add-object`}
+            color="secondary"
+            variant={customField.extra?.label.object?.addButtonVariant}
+            onClick={(ev) => {
+              ev.preventDefault();
+              append({});
+            }}
+            disabled={!customField?.editable}
+          >
+            {customField.extra?.label.object?.add}
+          </Button>
+        )}
+      </>
+    );
+  }
+);
+
+BaseFieldArray.displayName = 'BaseFieldArray';
+
+export default BaseFieldArray;

package/src/FieldArray/FormDialog/ArrayDisplay/ArrayDisplay.stories.js

@@ -0,0 +1,11 @@
+import ArrayDisplay from '@digigov/form/FieldArray/FormDialog/ArrayDisplay';
+
+export default {
+  title: 'Digigov Form/FieldArray/FormDialog/ArrayDisplay',
+  component: ArrayDisplay,
+  displayName: 'ArrayDisplay',
+};
+
+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';