@digigov/form 2.0.0-13876dba → 2.0.0-16fbe090

package/src/FieldArray/index.tsx

@@ -1,13 +1,10 @@
-import React from 'react';
-import { ErrorOption, useFieldArray, UseFormReturn } from 'react-hook-form';
+import React, { useEffect, useRef } from 'react';
+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 { Hint } from '@digigov/ui/typography/Hint';
+import type { registerFieldFocus } from '@digigov/form/types';
 
 export interface FieldArrayProps extends FieldProps {
   control: UseFormReturn['control'];
@@ -19,7 +16,9 @@ export interface FieldArrayProps extends FieldProps {
   getValues: UseFormReturn['getValues'];
   setValue: UseFormReturn['setValue'];
   reset: UseFormReturn['reset'];
+  resetField?: UseFormReturn['resetField'];
   Field: React.FC<FieldProps>;
+  registerFieldFocus: registerFieldFocus;
 }
 export const FieldArray: React.FC<FieldArrayProps> = ({
   name,
@@ -33,38 +32,49 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
   setValue,
   layout,
   reset,
+  resetField,
   label,
   Field,
+  registerFieldFocus,
   ...customField
 }) => {
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name,
-  });
+  /** The ref of the add-button */
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  // Register the button to be focusable
+  useEffect(() => {
+    let unregister: (name: string) => void = () => {};
+    if (buttonRef.current) {
+      unregister = registerFieldFocus(name, buttonRef.current);
+    }
+
+    return () => {
+      unregister(name);
+    };
+  }, [name, registerFieldFocus]);
+
+  // Clear container error when there are no item errors
+  const hasItemErrors: boolean =
+    !!error && Object.keys(error).some((key) => /^\d+$/.test(key));
+  useEffect(() => {
+    if (!hasItemErrors) clearErrors(name);
+  }, [clearErrors, hasItemErrors, name]);
 
   return (
     <FieldBaseContainer
       label={label}
       layout={layout}
-      error={
-        formState.isSubmitted &&
-        !formState.isSubmitting &&
-        error?.message &&
-        error
-          ? error
-          : undefined
-      }
-      hasError={formState.isSubmitted && !formState.isSubmitting && !!error}
+      register={register}
+      error={error?.message ? error : undefined}
+      hasError={!!error}
       wrapper="fieldset"
       name={name}
+      labelSize={customField.extra?.labelSize}
+      controlled={true}
     >
-      {fields.length === 0 && (
-        <Hint {...customField.extra?.label.object?.nothing_added_props}>
-          {customField.extra?.label.object?.nothing_added}
-        </Hint>
-      )}
       {customField.extra?.variant === 'dialog' ? (
         <FormDialog
+          ref={buttonRef}
           name={name}
           trigger={trigger}
           register={register}
@@ -78,56 +88,22 @@ export const FieldArray: React.FC<FieldArrayProps> = ({
           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>
-          ))}
-          <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 { 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 { 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';
 
@@ -16,9 +12,10 @@ export interface FieldObjectProps extends Omit<FieldProps, 'key'> {
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  resetField: UseFormReturn['resetField'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
-  defaultValue?: undefined;
+  defaultValue?: any;
   Field: React.FC<FieldProps>;
 }
 
@@ -29,6 +26,7 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
   control,
   register,
   reset,
+  resetField,
   formState,
   error,
   defaultValue,
@@ -48,15 +46,16 @@ 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}
+          resetField={resetField}
           field={field}
           error={error && error[field.key]}
           formState={formState}
-          defaultValue={defaultValue}
+          defaultValue={defaultValue?.[field.key] || undefined}
           Field={Field}
         />
       ))}
@@ -65,15 +64,16 @@ export const FieldObject: React.FC<FieldObjectProps> = ({
 };
 
 export interface FieldObjectItemProps {
+  key: string;
   name: string;
   field: FieldSpec;
   control: UseFormReturn['control'];
   register: UseFormReturn['register'];
   reset: UseFormReturn['reset'];
+  resetField: UseFormReturn['resetField'];
   formState: UseFormReturn['formState'];
   error?: ErrorOption;
   children?: React.ReactNode;
-  // defaultValue?: FormData | undefined;
   defaultValue?: undefined;
   Field: React.FC<FieldProps>;
 }
@@ -86,28 +86,33 @@ const FieldObjectItem: React.FC<FieldObjectItemProps> = ({
   control,
   formState,
   reset,
+  resetField,
   register,
   defaultValue,
   Field,
 }) => {
-  const calculatedField: CalculatedField = useMemo(
-    () =>
-      calculateField(children, field, FIELD_COMPONENTS, ALTERNATIVE_COMPONENTS),
-    [field]
-  );
-  const customError = error ? error : formState?.errors[name];
-  return (
-    <FieldBase
-      {...calculatedField}
-      name={name}
-      Field={Field}
-      control={control}
-      reset={reset}
-      register={register}
-      error={customError}
-      defaultValue={defaultValue}
-    />
-  );
+  const resolvedField = useMemo(() => resolveField(children, field), [field]);
+  if (Field) {
+    if (!field.type) {
+      field.type = 'string';
+    }
+    return <Field {...field} name={name} />;
+  } else {
+    const customError = error ? error : formState?.errors[name];
+    return (
+      <FieldBase
+        {...resolvedField}
+        name={name}
+        Field={Field}
+        control={control}
+        reset={reset}
+        resetField={resetField}
+        register={register}
+        error={customError}
+        defaultValue={defaultValue}
+      />
+    );
+  }
 };
 
 export default FieldObject;

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