@digigov/form 2.0.0-16da9467 → 2.0.0-16fbe090

package/src/FieldArray/index.tsx

@@ -1,12 +1,10 @@
 import React, { useEffect, useRef } from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
-import { FieldProps } from '@digigov/form/Field/types';
+import type { FieldProps } from '@digigov/form/Field/types';
+import BaseFieldArray from '@digigov/form/FieldArray/BaseFieldArray';
 import { FormDialog } from '@digigov/form/FieldArray/FormDialog';
-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';
+import type { registerFieldFocus } from '@digigov/form/types';
 
 export interface FieldArrayProps extends FieldProps {
   control: UseFormReturn['control'];
@@ -20,6 +18,7 @@ export interface FieldArrayProps extends FieldProps {
   reset: UseFormReturn['reset'];
   resetField?: UseFormReturn['resetField'];
   Field: React.FC<FieldProps>;
+  registerFieldFocus: registerFieldFocus;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
@@ -36,47 +35,38 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   resetField,
   label,
   Field,
+  registerFieldFocus,
   ...customField
 }) => {
-  const { append, remove } = useFieldArray({
-    control,
-    name,
-  });
-  const fields = getValues(name) || [];
+  /** The ref of the add-button */
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
 
-  /** The ref of the FieldBaseContainer. */
-  const containerRef = useRef<HTMLFieldSetElement | null>(null);
+  // Register the button to be focusable
+  useEffect(() => {
+    let unregister: (name: string) => void = () => {};
+    if (buttonRef.current) {
+      unregister = registerFieldFocus(name, buttonRef.current);
+    }
 
-  const { errors } = formState;
+    return () => {
+      unregister(name);
+    };
+  }, [name, registerFieldFocus]);
 
-  // Focus the fieldset when there are errors related to this field array
+  // Clear container error when there are no item errors
+  const hasItemErrors: boolean =
+    !!error && Object.keys(error).some((key) => /^\d+$/.test(key));
   useEffect(() => {
-    if (!containerRef.current) return;
-    const fieldErrors = Object.keys(errors);
-    // no errors
-    if (!fieldErrors.length) return;
-
-    if (
-      // Check if there are errors related to the current field array
-      fieldErrors.some((key) => {
-        const fieldArrayName = key.split('.')[0];
-        return fieldArrayName === name;
-      })
-    ) {
-      if (containerRef.current && errors[name]) {
-        containerRef.current.focus();
-      }
-    }
-  }, [errors, name]);
+    if (!hasItemErrors) clearErrors(name);
+  }, [clearErrors, hasItemErrors, name]);
 
   return (
     <FieldBaseContainer
       label={label}
       layout={layout}
       register={register}
-      ref={containerRef}
-      error={error?.message && error ? error : undefined}
-      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
+      error={error?.message ? error : undefined}
+      hasError={!!error}
       wrapper="fieldset"
       name={name}
       labelSize={customField.extra?.labelSize}
@@ -84,6 +74,7 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
     >
       {customField.extra?.variant === 'dialog' ? (
         <FormDialog
+          ref={buttonRef}
           name={name}
           trigger={trigger}
           register={register}
@@ -102,55 +93,17 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           {...customField}
         />
       ) : (
-        <>
-          {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 && 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
-              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
+          ref={buttonRef}
+          name={name}
+          register={register}
+          control={control}
+          formState={formState}
+          error={error}
+          getValues={getValues}
+          Field={Field}
+          {...customField}
+        />
       )}
     </FieldBaseContainer>
   );

package/src/FieldObject/index.tsx

@@ -1,14 +1,10 @@
 import React, { useMemo } from 'react';
-import { ErrorOption, UseFormReturn } from 'react-hook-form';
+import type { ErrorOption, UseFormReturn } from 'react-hook-form';
 import { FieldBase } from '@digigov/form/Field/FieldBase';
-import { FieldProps, CalculatedField } 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 { FieldProps } from '@digigov/form/Field/types';
+import { resolveField } from '@digigov/form/Field/utils/resolveField';
 import { Fieldset, FieldsetCaption } from '@digigov/form/Fieldset';
-import { FieldSpec } from '@digigov/form/types';
+import type { FieldSpec } from '@digigov/form/types';
 import { FieldsetLegend } from '@digigov/ui/form/FieldContainer';
 import { useTranslation } from '@digigov/ui/i18n';
 
@@ -19,7 +15,7 @@ export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   resetField: UseFormReturn['resetField'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
-  defaultValue?: undefined;
+  defaultValue?: any;
   Field: React.FC<FieldProps>;
 }
 
@@ -50,8 +46,8 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
       )}
       {extra?.fields.map((field) => (
         <FieldObjectItem
-          key={`${name}${field.key ? `.${field.key}` : ''}`}
-          name={`${name}${field.key ? `.${field.key}` : ''}`}
+          key={`${name ? name + '.' : ''}${field.key ? `${field.key}` : ''}`}
+          name={`${name ? name + '.' : ''}${field.key ? `${field.key}` : ''}`}
           control={control}
           register={register}
           reset={reset}
@@ -95,11 +91,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   defaultValue,
   Field,
 }) => {
-  const calculatedField: CalculatedField = useMemo(
-    () =>
-      calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
-    [field]
-  );
+  const resolvedField = useMemo(() => resolveField(children, field), [field]);
   if (Field) {
     if (!field.type) {
       field.type = 'string';
@@ -109,7 +101,7 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
     const customError = error ? error : formState?.errors[name];
     return (
       <FieldBase
-        {...calculatedField}
+        {...resolvedField}
         name={name}
         Field={Field}
         control={control}

package/src/Fieldset/FieldsetWithContext.tsx

@@ -7,7 +7,7 @@ import {
   FieldsetBody,
 } from '@digigov/form/Fieldset/';
 import { FormContext } from '@digigov/form/FormContext';
-import { FieldsetSpec } from '@digigov/form/types';
+import type { FieldsetSpec } from '@digigov/form/types';
 import { useTranslation } from '@digigov/ui/i18n';
 
 export const FieldsetWithContext: React.FC<{ name: string }> = ({ name }) => {

package/src/Fieldset/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {
+import type {
   FieldsetLabelProps,
   FieldsetCaptionProps,
   FieldsetBodyProps,

package/src/Fieldset/types.tsx

@@ -1,5 +1,5 @@
-import { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
-import { HintProps } from '@digigov/ui/typography/Hint';
+import type { FieldsetLegendProps } from '@digigov/ui/form/FieldContainer';
+import type { HintProps } from '@digigov/ui/typography/Hint';
 
 export interface FieldsetLabelProps extends FieldsetLegendProps {}
 export interface FieldsetCaptionProps extends HintProps {}

package/src/FormBuilder/doc.mdx

@@ -10,7 +10,7 @@ sidebar_label: FormBuilder
 
 `stepForm` component:
 
-<code src="@digigov/form/FormBuilder/__stories__/Default.tsx" />
+<code src="@digigov/form/src/FormBuilder/__stories__/Default.tsx" />
 
 ### Importing and using FormBuilder Component
 

package/src/FormBuilder/index.tsx

@@ -1,11 +1,17 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import type { UseFormProps } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { Field } from '@digigov/form/Field';
 import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
-import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/Field/utils';
 import { FieldsetWithContext } from '@digigov/form/Fieldset/FieldsetWithContext';
 import { FormContext, useFormContext } from '@digigov/form/FormContext';
-import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
+import useFieldFocusManager from '@digigov/form/hooks/useFieldFocusManager';
+import { CONTROLLED_FIELD_COMPONENTS } from '@digigov/form/inputs/registry';
+import type {
+  FormBaseProps,
+  FormData,
+  FormBuilderProps,
+} from '@digigov/form/types';
 import { yupResolver } from '@digigov/form/utils';
 import { useValidationSchema } from '@digigov/form/validators';
 import { Button } from '@digigov/ui/form/Button';
@@ -20,10 +26,10 @@ const FormBase = React.forwardRef(function FormBase(
     fieldsMap,
     fieldsetsMap,
     resolver,
-    mode,
     initial,
+    mode,
     reValidateMode,
-    shouldFocusError = true,
+    shouldFocusError,
     criteriaMode,
     componentRegistry,
     grid,
@@ -37,7 +43,7 @@ const FormBase = React.forwardRef(function FormBase(
     mode,
     defaultValues: initial,
     reValidateMode,
-    shouldFocusError,
+    shouldFocusError: false, // we handle focusing manually
     criteriaMode,
   });
 
@@ -49,14 +55,26 @@ const FormBase = React.forwardRef(function FormBase(
     },
     [onSubmit]
   );
+
+  const { setError } = form;
+
   useEffect(() => {
     if (errors) {
       for (const fieldName in errors) {
-        form.setError(fieldName, errors[fieldName]);
+        setError(fieldName, errors[fieldName]);
       }
     }
-  }, [errors]);
-  const submit = form.handleSubmit(handleSubmit);
+  }, [errors, setError]);
+
+  const { registerCustomFocusableElement: registerFieldFocus, focusOnError } =
+    useFieldFocusManager({
+      control: form.control,
+      subscribe: form.subscribe,
+      enabled: shouldFocusError,
+      setFocus: form.setFocus,
+    });
+
+  const submit = form.handleSubmit(handleSubmit, focusOnError);
   const ctx = {
     fieldsMap,
     fieldsetsMap,
@@ -65,6 +83,7 @@ const FormBase = React.forwardRef(function FormBase(
     watch: form.watch,
     resetField: form.resetField,
     registerField: registerField,
+    registerFieldFocus,
     errors: form.formState.errors,
     formState: form.formState,
     reset: form.reset,
@@ -89,6 +108,166 @@ const FormBase = React.forwardRef(function FormBase(
   );
 });
 
+const useFormValues = () => {
+  const ctx = useFormContext();
+  return ctx.getValues();
+};
+
+const FormBuilder = React.forwardRef<HTMLFormElement, FormBuilderProps>(
+  function FormBuilder(
+    {
+      fields = [],
+      fieldsets,
+      initial = {},
+      onSubmit,
+      children,
+      reValidateMode = 'onChange',
+      mode = 'onSubmit',
+      shouldFocusError = true,
+      criteriaMode = 'all',
+      auto = false,
+      validatorRegistry,
+      componentRegistry,
+      grid = false,
+      ...props
+    },
+    ref
+  ) {
+    const { screenSize } = useScreenSize();
+
+    const transformedFields = useMemo(
+      () =>
+        fields.map((field) => {
+          const layout = field.layout;
+          if (!layout) {
+            return {
+              ...field,
+              layout: DEFAULT_LAYOUT,
+            };
+          }
+          return {
+            ...field,
+            layout: BREAKPOINTS.reduce(
+              (expandedLayout, breakpoint, breakpointIndex) => {
+                if (field?.layout?.[breakpoint]) {
+                  expandedLayout[breakpoint] = field?.layout[breakpoint];
+                } else if (expandedLayout[BREAKPOINTS[breakpointIndex - 1]]) {
+                  expandedLayout[breakpoint] =
+                    expandedLayout[BREAKPOINTS[breakpointIndex - 1]];
+                } else {
+                  expandedLayout[breakpoint] = 12;
+                }
+                return expandedLayout;
+              },
+              {}
+            ),
+          };
+        }),
+      [fields]
+    );
+
+    const fieldsState = useRef(transformedFields);
+    const setFieldsState = useCallback((newFields) => {
+      fieldsState.current = newFields;
+    }, []);
+
+    const registerField = useCallback(
+      (field) => {
+        const fieldIndex = fieldsState.current.findIndex(
+          (f) => f.key === field.key
+        );
+        if (fieldIndex > -1) {
+          fieldsState.current[fieldIndex] = field;
+        } else {
+          fieldsState.current.push(field);
+        }
+        setFieldsState(fieldsState.current);
+      },
+      [setFieldsState]
+    );
+
+    const schema = useValidationSchema(fieldsState, validatorRegistry);
+
+    const resolver: UseFormProps['resolver'] = useMemo(() => {
+      if (!schema) return;
+
+      return yupResolver(schema);
+    }, [schema]);
+
+    const fieldsMap = useMemo(() => {
+      if (!schema || !transformedFields) return {};
+
+      return transformedFields.reduce(
+        (map, field) => ({ ...map, [field.key]: field }),
+        {}
+      );
+    }, [schema, transformedFields]);
+    const fieldsetsMap = useMemo(() => {
+      if (!schema || !fieldsets) return;
+
+      return fieldsets.reduce(
+        (map, fieldset) => ({ ...map, [fieldset.key]: fieldset }),
+        {}
+      );
+    }, [fieldsets, schema]);
+
+    const fieldChildren = useMemo(() => {
+      if (!schema || !auto) return;
+
+      if (fieldsets) {
+        return fieldsets.map((fieldset) => (
+          <FieldsetWithContext key={fieldset.key} name={fieldset.key} />
+        ));
+      }
+
+      if (transformedFields) {
+        const fieldsByLayouts = groupFieldsByLayout(transformedFields);
+        const fieldsByLayoutSize = fieldsByLayouts[screenSize];
+        return fieldsByLayoutSize.map((item, index) => {
+          if (Array.isArray(item)) {
+            return (
+              <ErrorGroup
+                key={index}
+                screenSize={screenSize}
+                fieldOrder={item.map((field) => field.key)}
+              >
+                {item.map((f) => {
+                  return <Field key={f.key} name={f.key} />;
+                })}
+              </ErrorGroup>
+            );
+          } else {
+            return <Field key={item.key} name={item.key} />;
+          }
+        });
+      }
+    }, [auto, fieldsets, schema, screenSize, transformedFields]);
+
+    return (
+      <FormBase
+        resolver={resolver}
+        fieldsetsMap={fieldsetsMap}
+        fieldsMap={fieldsMap}
+        registerField={registerField}
+        initial={initial}
+        reValidateMode={reValidateMode}
+        mode={mode}
+        shouldFocusError={shouldFocusError}
+        criteriaMode={criteriaMode}
+        onSubmit={onSubmit}
+        componentRegistry={componentRegistry}
+        ref={ref}
+        grid={grid}
+        {...props}
+      >
+        {fieldChildren}
+        {auto && <Button type="submit">Συνέχεια</Button>}
+        {children}
+      </FormBase>
+    );
+  }
+);
+
 const DEFAULT_LAYOUT = {
   xs: 12,
   sm: 12,
@@ -99,7 +278,7 @@ const DEFAULT_LAYOUT = {
 
 const BREAKPOINTS = ['xs', 'sm', 'md', 'lg', 'xl'];
 
-const groupFieldsByLayout = (fields) => {
+function groupFieldsByLayout(fields) {
   return BREAKPOINTS.reduce((sizes, size) => {
     sizes[size] = fields
       .reduce((acc, item) => {
@@ -125,141 +304,8 @@ const groupFieldsByLayout = (fields) => {
       });
     return sizes;
   }, {});
-};
-const useFormValues = () => {
-  const ctx = useFormContext();
-  return ctx.getValues();
-};
-const FormBuilder = React.forwardRef(function FormBuilder(
-  {
-    fields = [],
-    fieldsets,
-    initial = {},
-    onSubmit,
-    children,
-    reValidateMode = 'onSubmit',
-    mode = 'onSubmit',
-    shouldFocusError = true,
-    criteriaMode = 'all',
-    auto = false,
-    validatorRegistry,
-    componentRegistry,
-    grid = false,
-    ...props
-  }: FormBuilderProps,
-  ref: React.Ref<HTMLFormElement>
-): React.ReactElement {
-  const { screenSize } = useScreenSize();
-  fields = fields.map((field) => {
-    const layout = field.layout;
-    if (!layout) {
-      return {
-        ...field,
-        layout: DEFAULT_LAYOUT,
-      };
-    }
-    return {
-      ...field,
-      layout: BREAKPOINTS.reduce(
-        (expandedLayout, breakpoint, breakpointIndex) => {
-          if (field?.layout?.[breakpoint]) {
-            expandedLayout[breakpoint] = field?.layout[breakpoint];
-          } else if (expandedLayout[BREAKPOINTS[breakpointIndex - 1]]) {
-            expandedLayout[breakpoint] =
-              expandedLayout[BREAKPOINTS[breakpointIndex - 1]];
-          } else {
-            expandedLayout[breakpoint] = 12;
-          }
-          return expandedLayout;
-        },
-        {}
-      ),
-    };
-  });
+}
 
-  const fieldsState = useRef(fields);
-  const setFieldsState = useCallback((newFields) => {
-    fieldsState.current = newFields;
-  }, []);
-  const schema = useValidationSchema(fieldsState, validatorRegistry);
-  const registerField = useCallback((field) => {
-    const fieldIndex = fieldsState.current.findIndex(
-      (f) => f.key === field.key
-    );
-    if (fieldIndex > -1) {
-      fieldsState.current[fieldIndex] = field;
-    } else {
-      fieldsState.current.push(field);
-    }
-    setFieldsState(fieldsState.current);
-  }, []);
-  let resolver;
-  let fieldsMap;
-  let fieldsetsMap;
-  let fieldChildren;
-  if (schema) {
-    resolver = yupResolver(schema);
-    fieldsMap = fields
-      ? fields.reduce((map, field) => ({ ...map, [field.key]: field }), {})
-      : {};
-    fieldsetsMap =
-      fieldsets &&
-      fieldsets.reduce(
-        (map, fieldset) => ({ ...map, [fieldset.key]: fieldset }),
-        {}
-      );
-
-    if (auto) {
-      if (fieldsets) {
-        fieldChildren = fieldsets.map((fieldset) => (
-          <FieldsetWithContext key={fieldset.key} name={fieldset.key} />
-        ));
-      } else if (fields) {
-        const fieldsByLayouts = groupFieldsByLayout(fields);
-        const fieldsByLayoutSize = fieldsByLayouts[screenSize];
-        fieldChildren = fieldsByLayoutSize.map((item, index) => {
-          if (Array.isArray(item)) {
-            return (
-              <ErrorGroup
-                key={index}
-                screenSize={screenSize}
-                fieldOrder={item.map((field) => field.key)}
-              >
-                {item.map((f) => {
-                  return <Field key={f.key} name={f.key} />;
-                })}
-              </ErrorGroup>
-            );
-          } else {
-            return <Field key={item.key} name={item.key} />;
-          }
-        });
-      }
-    }
-  }
-  return (
-    <FormBase
-      resolver={resolver}
-      fieldsetsMap={fieldsetsMap}
-      fieldsMap={fieldsMap}
-      registerField={registerField}
-      initial={initial}
-      reValidateMode={reValidateMode}
-      mode={mode}
-      shouldFocusError={shouldFocusError}
-      criteriaMode={criteriaMode}
-      onSubmit={onSubmit}
-      componentRegistry={componentRegistry}
-      ref={ref}
-      grid={grid}
-      {...props}
-    >
-      {fieldChildren}
-      {auto && <Button type="submit">Συνέχεια</Button>}
-      {children}
-    </FormBase>
-  );
-});
 export const ControlledFormBuilder = (props) => {
   return (
     <FormBuilder {...props} componentRegistry={CONTROLLED_FIELD_COMPONENTS} />