@digigov/form 2.0.0-e7d30530 → 2.0.0-eaf330f5

package/src/FieldArray/index.tsx

@@ -1,5 +1,10 @@
-import React, { useEffect, useRef } from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import React from 'react';
+import {
+  Controller,
+  ErrorOption,
+  useFieldArray,
+  UseFormReturn,
+} from 'react-hook-form';
 import { FieldBaseContainer } from '@digigov/form/Field/FieldBaseContainer';
 import { FieldProps } from '@digigov/form/Field/types';
 import { FormDialog } from '@digigov/form/FieldArray/FormDialog';
@@ -18,7 +23,7 @@ export interface FieldArrayProps extends FieldProps {
   getValues: UseFormReturn['getValues'];
   setValue: UseFormReturn['setValue'];
   reset: UseFormReturn['reset'];
-  resetField?: UseFormReturn['resetField'];
+  resetField: UseFormReturn['resetField'];
   Field: React.FC<FieldProps>;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
@@ -42,117 +47,104 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
     control,
     name,
   });
-  const fields = getValues(name) || [];
-
-  /** The ref of the FieldBaseContainer. */
-  const containerRef = useRef<HTMLFieldSetElement | null>(null);
-
-  const { errors } = formState;
-
-  // Focus the fieldset when there are errors related to this field array
-  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]);
 
+  const fields = getValues(name) || [];
   return (
-    <FieldBaseContainer
-      label={label}
-      layout={layout}
-      register={register}
-      ref={containerRef}
-      error={error?.message && error ? error : undefined}
-      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
-      wrapper="fieldset"
+    <Controller
+      render={({ field }) => {
+        return (
+          <FieldBaseContainer
+            label={label}
+            layout={layout}
+            register={register}
+            error={error?.message && error ? error : undefined}
+            hasError={
+              formState.isSubmitted && !formState.isSubmitting && !!error
+            }
+            wrapper="fieldset"
+            name={name}
+            labelSize={customField.extra?.labelSize}
+          >
+            <div tabIndex={-1} ref={field.ref} />
+
+            {customField.extra?.variant === 'dialog' ? (
+              <FormDialog
+                name={name}
+                trigger={trigger}
+                register={register}
+                clearErrors={clearErrors}
+                control={control}
+                formState={formState}
+                error={error}
+                getValues={getValues}
+                setValue={setValue}
+                layout={layout}
+                label={label}
+                Field={Field}
+                reset={reset}
+                resetField={resetField}
+                sortable={customField.extra.sortable}
+                {...customField}
+              />
+            ) : (
+              <>
+                {fields.map((field, index) => (
+                  <Card
+                    variant={customField.extra?.border ? 'border' : 'divider'}
+                    key={field.id}
+                  >
+                    <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>
+                )}
+              </>
+            )}
+          </FieldBaseContainer>
+        );
+      }}
+      control={control}
       name={name}
-      labelSize={customField.extra?.labelSize}
-      controlled={true}
-    >
-      {customField.extra?.variant === 'dialog' ? (
-        <FormDialog
-          name={name}
-          trigger={trigger}
-          register={register}
-          clearErrors={clearErrors}
-          control={control}
-          formState={formState}
-          error={error}
-          getValues={getValues}
-          setValue={setValue}
-          layout={layout}
-          label={label}
-          Field={Field}
-          reset={reset}
-          resetField={resetField}
-          sortable={customField.extra.sortable}
-          {...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>
-          )}
-        </>
-      )}
-    </FieldBaseContainer>
+    />
   );
 };
 

package/src/FormBuilder/FormBuilder.stories.js

@@ -1,10 +1,7 @@
 import FormBuilder from '@digigov/form/FormBuilder';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/FormBuilder',
   component: FormBuilder,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'FormBuilder',
 };
 export { Default } from '@digigov/form/FormBuilder/__stories__/Default';

package/src/FormBuilder/__stories__/AutoErrorGrouping.tsx

@@ -49,7 +49,7 @@ const FIELDS: FieldSpec[] = [
   },
 ];
 
-export const AutoErrorGrouping = (_: any) => (
+export const AutoErrorGrouping = () => (
   <FormBuilder
     grid={true}
     auto={true}

package/src/FormBuilder/__stories__/Default.tsx

@@ -6,7 +6,7 @@ const initialValues = {
   'business-title': null,
 };
 
-export const Default = (_: any) => (
+export const Default = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/FormBuilder/__stories__/ErrorGrouping.tsx

@@ -3,7 +3,7 @@ import FormBuilder, { Field } from '@digigov/form';
 import { ErrorGroup } from '@digigov/form/Field/ErrorGroup';
 import { Button } from '@digigov/ui/form/Button';
 
-export const ErrorGrouping = (_: any) => (
+export const ErrorGrouping = () => (
   <FormBuilder
     grid={true}
     onSubmit={(data) => {

package/src/FormBuilder/index.tsx

@@ -1,10 +1,10 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useRef } from 'react';
 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 { FormContext } from '@digigov/form/FormContext';
 import { FormBaseProps, FormData, FormBuilderProps } from '@digigov/form/types';
 import { yupResolver } from '@digigov/form/utils';
 import { useValidationSchema } from '@digigov/form/validators';
@@ -44,6 +44,7 @@ const FormBase = React.forwardRef(function FormBase(
   const handleSubmit = useCallback(
     (data: FormData): void => {
       if (onSubmit) {
+        form.reset(data);
         onSubmit(data);
       }
     },
@@ -52,7 +53,7 @@ const FormBase = React.forwardRef(function FormBase(
   useEffect(() => {
     if (errors) {
       for (const fieldName in errors) {
-        form.setError(fieldName, errors[fieldName]);
+        form.setError(fieldName, errors[fieldName], { shouldFocus: true });
       }
     }
   }, [errors]);
@@ -126,6 +127,9 @@ const groupFieldsByLayout = (fields) => {
     return sizes;
   }, {});
 };
+const useFormContext = () => {
+  return useContext(FormContext);
+};
 const useFormValues = () => {
   const ctx = useFormContext();
   return ctx.getValues();

package/src/FormBuilder/scenarios.test.tsx

@@ -1564,7 +1564,7 @@ const inputsInputScenarios = [
       },
       {
         fieldKey: 'email',
-        value: 'example@mail.',
+        value: '23232',
       },
       {
         fieldKey: 'location',

package/src/FormContext.tsx

@@ -1,11 +1,7 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext } from 'react';
 import { FormContextProps } from '@digigov/form/types';
 
 export const FormContext: React.Context<FormContextProps> = createContext({
   fieldsMap: {},
   fieldsetsMap: {},
 } as FormContextProps);
-
-export const useFormContext = () => {
-  return useContext(FormContext);
-};

package/src/MultiplicityField/MultiplicityField.stories.js

@@ -1,10 +1,7 @@
 import MultiplicityField from '@digigov/form/MultiplicityField';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/MultiplicityField',
   component: MultiplicityField,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'MultiplicityField',
 };
 export { Default } from '@digigov/form/MultiplicityField/__stories__/Default';

package/src/MultiplicityField/__stories__/Default.tsx

@@ -85,7 +85,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const Default = (_: any) => (
+export const Default = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/PreviewDisplay.tsx

@@ -61,7 +61,7 @@ const fields = [
   },
 ];
 
-export const PreviewDisplay = (_: any) => (
+export const PreviewDisplay = () => (
   <Layout>
     <Header>
       <HeaderContent>

package/src/MultiplicityField/__stories__/WithExactLength.tsx

@@ -84,7 +84,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithExactLength = (_: any) => (
+export const WithExactLength = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMaxLength.tsx

@@ -87,7 +87,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMaxLength = (_: any) => (
+export const WithMaxLength = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMinAndMaxLength.tsx

@@ -88,7 +88,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMinAndMaxLength = (_: any) => (
+export const WithMinAndMaxLength = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/__stories__/WithMinLength.tsx

@@ -87,7 +87,7 @@ const fields = [
   },
 ] as FieldSpec[];
 
-export const WithMinLength = (_: any) => (
+export const WithMinLength = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/MultiplicityField/add-objects.tsx

@@ -47,7 +47,6 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
   setValue,
   stashedObjects,
   getValues,
-  resetField,
   onStash,
   error,
   Field,
@@ -134,6 +133,7 @@ export const AddObjects: React.FC<AddObjectsProps> = ({
     control,
     register,
     reset,
+    resetField,
     error: needsMoreError,
   } = useField(radioField.key, radioField?.type ? radioField : null);
 

package/src/MultiplicityField/index.tsx

@@ -31,7 +31,6 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
   setValue,
   getValues,
   unregister,
-  resetField,
   Field,
 }) => {
   const { fields, append, remove } = useFieldArray({
@@ -53,6 +52,7 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
     <FieldBaseContainer
       label={label}
       layout={layout}
+      register={register}
       error={
         formState.isSubmitted && !formState.isSubmitting && error?.message
           ? error
@@ -61,7 +61,6 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
       hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
       wrapper="fieldset"
       name={name}
-      register={register}
     >
       {stashedObjects.length > 0 ? (
         <div>
@@ -100,7 +99,6 @@ export const Multiplicity: React.FC<MultiplicityProps> = ({
         getValues={getValues}
         unregister={unregister}
         trigger={trigger}
-        resetField={resetField}
         clearErrors={clearErrors}
         Field={Field}
       />

package/src/MultiplicityField/types.ts

@@ -12,7 +12,6 @@ export interface MultiplicityProps
   setValue: UseFormReturn['setValue'];
   getValues: UseFormReturn['getValues'];
   unregister: UseFormReturn['unregister'];
-  resetField?: UseFormReturn['resetField'];
   error?: ErrorOption;
   extra?: Record<string, any>;
   label?: FieldSpec['label'];

package/src/Questions/Questions.stories.js

@@ -1,10 +1,7 @@
 import Questions from '@digigov/form/Questions';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/Questions',
   component: Questions,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'Questions',
 };
 export { Default } from '@digigov/form/Questions/__stories__/Default';

package/src/Questions/__stories__/Default.tsx

@@ -75,7 +75,7 @@ const steps = [
   },
 ];
 
-export function Default(_: any) {
+export function Default() {
   return (
     <BasicLayout>
       <Top>

package/src/inputs/AutoCompleteInput/AutoComplete.stories.js

@@ -1,10 +1,7 @@
 import AutoComplete from '@digigov/form/inputs/AutoCompleteInput';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/AutoCompleteInput',
   component: AutoComplete,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'AutoCompleteInput',
 };
 export { Default } from '@digigov/form/inputs/AutoCompleteInput/__stories__/Default';

package/src/inputs/AutoCompleteInput/__stories__/Default.tsx

@@ -29,7 +29,7 @@ const fields: FieldSpec[] = [
 
 const initialValues = {};
 
-export const Default = (_: any) => (
+export const Default = () => (
   <FormBuilder
     fields={fields}
     onSubmit={(data) => {

package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx

@@ -29,7 +29,7 @@ const fields: FieldSpec[] = [
 
 const initialValues = {};
 
-export const Multiple = (_: any) => (
+export const Multiple = () => (
   <FormBuilder
     fields={fields}
     onSubmit={(data) => {

package/src/inputs/Checkboxes/Checkboxes.stories.js

@@ -1,10 +1,7 @@
 import Checkboxes from '@digigov/form/inputs/Checkboxes';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/Checkboxes',
   component: Checkboxes,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'Checkboxes',
 };
 export { Default } from '@digigov/form/inputs/Checkboxes/__stories__/Default';

package/src/inputs/Checkboxes/__stories__/Conditional.tsx

@@ -84,7 +84,7 @@ const fields: FieldSpec[] = [
   },
 ];
 
-export const Conditional = (_: any) => (
+export const Conditional = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Checkboxes/__stories__/Default.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const Default = (_: any) => (
+export const Default = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Checkboxes/__stories__/WithDivider.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import FormBuilder, { Field } from '@digigov/form';
 import { Button } from '@digigov/ui/form/Button';
 
-export const WithDivider = (_: any) => (
+export const WithDivider = () => (
   <FormBuilder
     onSubmit={(data) => {
       console.log(data);

package/src/inputs/Checkboxes/index.tsx

@@ -32,10 +32,14 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
   const handleChange =
     (optionValue, idx, show) =>
     (evt): void => {
-      let newValue: any = [];
+      let newValue;
       if (evt.currentTarget.checked) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.concat([optionValue]);
       } else {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
         newValue = value.filter((val) => val !== optionValue);
       }
       if (show && show.length > 0) {
@@ -44,9 +48,6 @@ export const Checkboxes: React.FC<CheckboxesProps> = ({
         );
       }
 
-      // reset value to undefined instead of an empty array
-      // so the error state mechanism can throw validation errors
-      if (newValue.length === 0) newValue = undefined;
       onChange(newValue);
     };
   const { t } = useTranslation();

package/src/inputs/DateInput/DateInput.stories.js

@@ -1,14 +1,7 @@
 import DateInput from '@digigov/form/inputs/DateInput';
-import doc from './doc.mdx?raw';
 export default {
   title: 'Digigov Form/inputs/DateInput',
   component: DateInput,
-  tags: ['autodocs'],
-  markdown: doc,
   displayName: 'DateInput',
 };
 export { Default } from '@digigov/form/inputs/DateInput/__stories__/Default';
-export { WithDefaultValue } from '@digigov/form/inputs/DateInput/__stories__/WithDefaultValue';
-export { WithWrongDefaultValue } from '@digigov/form/inputs/DateInput/__stories__/WithWrongDefaultValue';
-export { WithInitialValue } from '@digigov/form/inputs/DateInput/__stories__/WithInitialValue';
-export { WithWrongInitialValue } from '@digigov/form/inputs/DateInput/__stories__/WithWrongInitialValue';

package/src/inputs/DateInput/__stories__/Default.tsx

@@ -14,7 +14,7 @@ const fields = [
   } as const,
 ];
 
-export const Default = (_: any) => (
+export const Default = () => (
   <FormBuilder onSubmit={() => console.log('kati')}>
     {fields.map(({ key, ...field }) => {
       return <Field {...field} name={key} key={key} />;

package/src/inputs/DateInput/index.test.tsx

@@ -2,10 +2,6 @@ import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
 import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/form/inputs/DateInput/__stories__/Default';
-import { WithDefaultValue } from '@digigov/form/inputs/DateInput/__stories__/WithDefaultValue';
-import { WithInitialValue } from '@digigov/form/inputs/DateInput/__stories__/WithInitialValue';
-import { WithWrongDefaultValue } from '@digigov/form/inputs/DateInput/__stories__/WithWrongDefaultValue';
-import { WithWrongInitialValue } from '@digigov/form/inputs/DateInput/__stories__/WithWrongInitialValue';
 
 test('renders the All DateInput variants', async ({ mount, page }) => {
   await mount(
@@ -14,18 +10,6 @@ test('renders the All DateInput variants', async ({ mount, page }) => {
     <TestVariant title="Default">
       <Default />
     </TestVariant>
-    <TestVariant title="WithDefaultValue">
-      <WithDefaultValue />
-    </TestVariant>
-    <TestVariant title="WithInitialValue">
-      <WithInitialValue />
-    </TestVariant>
-    <TestVariant title="WithWrongDefaultValue">
-      <WithWrongDefaultValue />
-    </TestVariant>
-    <TestVariant title="WithWrongInitialValue">
-      <WithWrongInitialValue />
-    </TestVariant>
   </div>
   )
   await page.evaluate(() => document.fonts.ready);