@digigov/form 2.0.0-36b707c1 → 2.0.0-385c7994

package/FormBuilder/index.js

@@ -1,158 +1,239 @@
-import React, { useCallback, useContext, useRef } from "react";
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useForm } from "react-hook-form";
-import Field from "@digigov/form/Field";
-import { CONTROLLED_FIELD_COMPONENTS } from "@digigov/form/Field/utils";
-import Fieldset from "@digigov/form/Fieldset";
-import { FormContext } from "@digigov/form/FormContext";
-import { yupResolver } from "@digigov/form/utils";
-import { useValidationSchema } from "@digigov/form/validators";
-import { Form } from "@digigov/react-core/Form";
-import { Button } from "@digigov/ui/form/Button";
-const FormBase = React.forwardRef(function FormBase2({
-  onSubmit,
-  children,
-  registerField,
-  fieldsMap,
-  fieldsetsMap,
-  resolver,
-  mode,
-  initial,
-  reValidateMode,
-  shouldFocusError,
-  criteriaMode,
-  componentRegistry,
-  grid,
-  ...props
-}, ref) {
-  const form = useForm({
-    resolver,
-    mode,
-    defaultValues: initial,
-    reValidateMode,
-    shouldFocusError,
-    criteriaMode
-  });
-  const handleSubmit = useCallback(
-    (data) => {
-      onSubmit && onSubmit(data);
-    },
-    [onSubmit]
-  );
-  const submit = form.handleSubmit(handleSubmit);
-  const ctx = {
-    fieldsMap,
-    fieldsetsMap,
-    control: form.control,
-    register: form.register,
-    watch: form.watch,
-    resetField: form.resetField,
-    registerField,
-    errors: form.formState.errors,
-    formState: form.formState,
-    reset: form.reset,
-    trigger: form.trigger,
-    getFieldState: form.getFieldState,
-    setValue: form.setValue,
-    clearErrors: form.clearErrors,
-    getValues: form.getValues,
-    unregister: form.unregister,
-    componentRegistry,
-    setError: form.setError,
-    formRef: ref,
-    submit
-  };
-  return /* @__PURE__ */ React.createElement(FormContext.Provider, { value: ctx }, /* @__PURE__ */ React.createElement(Form, { grid, onSubmit: submit, ref, ...props }, children));
+import { Field } from "../Field/index.js";
+import { ErrorGroup } from "../Field/ErrorGroup.js";
+import { FieldsetWithContext } from "../Fieldset/FieldsetWithContext.js";
+import { FormContext, useFormContext } from "../FormContext.js";
+import useFieldFocusManager from "../hooks/useFieldFocusManager.js";
+import { CONTROLLED_FIELD_COMPONENTS } from "../inputs/registry.js";
+import { yupResolver } from "../utils.js";
+import { useValidationSchema } from "../validators/index.js";
+import { Button } from "@digigov/ui/form/Button/index.js";
+import { Form } from "@digigov/ui/form/Form/index.js";
+import { useScreenSize } from "@digigov/ui/utils/hooks/useScreen.js";
+const FormBuilder_FormBase = /*#__PURE__*/ react.forwardRef(function({ onSubmit, children, registerField, fieldsMap, fieldsetsMap, resolver, initial, mode, reValidateMode, shouldFocusError, criteriaMode, componentRegistry, grid, errors, ...props }, ref) {
+    const form = useForm({
+        resolver,
+        mode,
+        defaultValues: initial,
+        reValidateMode,
+        shouldFocusError: false,
+        criteriaMode
+    });
+    const handleSubmit = useCallback((data)=>{
+        if (onSubmit) onSubmit(data);
+    }, [
+        onSubmit
+    ]);
+    const { setError } = form;
+    useEffect(()=>{
+        if (errors) for(const fieldName in errors)setError(fieldName, errors[fieldName]);
+    }, [
+        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,
+        control: form.control,
+        register: form.register,
+        watch: form.watch,
+        resetField: form.resetField,
+        registerField: registerField,
+        registerFieldFocus,
+        errors: form.formState.errors,
+        formState: form.formState,
+        reset: form.reset,
+        trigger: form.trigger,
+        getFieldState: form.getFieldState,
+        setValue: form.setValue,
+        clearErrors: form.clearErrors,
+        getValues: form.getValues,
+        unregister: form.unregister,
+        componentRegistry,
+        setError: form.setError,
+        formRef: ref,
+        submit
+    };
+    return /*#__PURE__*/ react.createElement(FormContext.Provider, {
+        value: ctx
+    }, /*#__PURE__*/ react.createElement(Form, {
+        grid: grid,
+        onSubmit: submit,
+        ref: ref,
+        ...props
+    }, children));
 });
-const useFormContext = () => {
-  return useContext(FormContext);
+const useFormValues = ()=>{
+    const ctx = useFormContext();
+    return ctx.getValues();
 };
-const useFormValues = () => {
-  const ctx = useFormContext();
-  return ctx.getValues();
-};
-const FormBuilder = React.forwardRef(function FormBuilder2({
-  fields = [],
-  fieldsets,
-  initial = {},
-  onSubmit,
-  children,
-  reValidateMode = "onSubmit",
-  mode = "onSubmit",
-  shouldFocusError = true,
-  criteriaMode = "all",
-  auto = false,
-  validatorRegistry,
-  componentRegistry,
-  grid = false,
-  ...props
-}, ref) {
-  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) => /* @__PURE__ */ React.createElement(Fieldset, { key: fieldset.key }));
-      } else if (fields) {
-        fieldChildren = fields.map((field) => /* @__PURE__ */ React.createElement(Field, { key: field.key, name: field.key }));
-      }
-    }
-  }
-  return /* @__PURE__ */ React.createElement(
-    FormBase,
-    {
-      resolver,
-      fieldsetsMap,
-      fieldsMap,
-      registerField,
-      initial,
-      reValidateMode,
-      mode,
-      shouldFocusError,
-      criteriaMode,
-      onSubmit,
-      componentRegistry,
-      ref,
-      grid,
-      ...props
-    },
-    fieldChildren,
-    auto && /* @__PURE__ */ React.createElement(Button, { type: "submit" }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"),
-    children
-  );
+const FormBuilder_FormBuilder = /*#__PURE__*/ react.forwardRef(function({ 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 = 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)=>/*#__PURE__*/ react.createElement(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 /*#__PURE__*/ react.createElement(ErrorGroup, {
+                    key: index,
+                    screenSize: screenSize,
+                    fieldOrder: item.map((field)=>field.key)
+                }, item.map((f)=>/*#__PURE__*/ react.createElement(Field, {
+                        key: f.key,
+                        name: f.key
+                    })));
+                return /*#__PURE__*/ react.createElement(Field, {
+                    key: item.key,
+                    name: item.key
+                });
+            });
+        }
+    }, [
+        auto,
+        fieldsets,
+        schema,
+        screenSize,
+        transformedFields
+    ]);
+    return /*#__PURE__*/ react.createElement(FormBuilder_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 && /*#__PURE__*/ react.createElement(Button, {
+        type: "submit"
+    }, "Συνέχεια"), children);
 });
-const ControlledFormBuilder = (props) => {
-  return /* @__PURE__ */ React.createElement(FormBuilder, { ...props, componentRegistry: CONTROLLED_FIELD_COMPONENTS });
-};
-var FormBuilder_default = FormBuilder;
-export {
-  ControlledFormBuilder,
-  FormBase,
-  FormBuilder_default as default,
-  useFormContext,
-  useFormValues
+const DEFAULT_LAYOUT = {
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    xl: 12
 };
-//# sourceMappingURL=index.js.map
+const BREAKPOINTS = [
+    'xs',
+    'sm',
+    'md',
+    'lg',
+    'xl'
+];
+function groupFieldsByLayout(fields) {
+    return BREAKPOINTS.reduce((sizes, size)=>{
+        sizes[size] = fields.reduce((acc, item)=>{
+            const layoutValue = item.layout?.[size] || 12;
+            if (0 === layoutValue) return [
+                ...acc,
+                item
+            ];
+            const lastElement = acc[acc.length - 1];
+            const currentSum = Array.isArray(lastElement) ? lastElement.reduce((sum, i)=>sum + (i.layout?.[size] || 0), 0) : 0;
+            if (!Array.isArray(lastElement) || currentSum + layoutValue > 12) return 12 === layoutValue ? [
+                ...acc,
+                item
+            ] : [
+                ...acc,
+                [
+                    item
+                ]
+            ];
+            return [
+                ...acc.slice(0, -1),
+                [
+                    ...lastElement,
+                    item
+                ]
+            ];
+        }, []).map((item)=>{
+            if (Array.isArray(item) && 1 === item.length) return item[0];
+            return item;
+        });
+        return sizes;
+    }, {});
+}
+const ControlledFormBuilder = (props)=>/*#__PURE__*/ react.createElement(FormBuilder_FormBuilder, {
+        ...props,
+        componentRegistry: CONTROLLED_FIELD_COMPONENTS
+    });
+const src_FormBuilder = FormBuilder_FormBuilder;
+export { ControlledFormBuilder, FormBuilder_FormBase as FormBase, src_FormBuilder as default, useFormContext, useFormValues };

package/FormContext.d.ts

@@ -1,3 +1,4 @@
-import React from 'react';
-import { FormContextProps } from '@digigov/form/types';
+import type React from 'react';
+import type { FormContextProps } from './types.js';
 export declare const FormContext: React.Context<FormContextProps>;
+export declare const useFormContext: () => FormContextProps;

package/FormContext.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const FormContext = /*#__PURE__*/ createContext({
+    fieldsMap: {},
+    fieldsetsMap: {}
+});
+const useFormContext = ()=>useContext(FormContext);
+export { FormContext, useFormContext };

package/MultiplicityField/add-objects.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { ErrorOption, FieldArrayWithId, UseFieldArrayReturn } from 'react-hook-form';
-import type { MultiplicityProps, StashedObject } from '@digigov/form/MultiplicityField/types';
+import type { ErrorOption, FieldArrayWithId, UseFieldArrayReturn } from 'react-hook-form';
+import type { MultiplicityProps, StashedObject } from './types.js';
 export interface AddObjectsProps extends Omit<MultiplicityProps, 'key' | 'component'> {
     fields: FieldArrayWithId[];
     error?: ErrorOption;

package/MultiplicityField/add-objects.js

@@ -0,0 +1,107 @@
+import react, { useEffect, useMemo } from "react";
+import { useWatch } from "react-hook-form";
+import { FieldBase } from "../Field/FieldBase.js";
+import { resolveField } from "../Field/utils/resolveField.js";
+import { useField } from "../Field/utils/useField.js";
+import { FieldObject } from "../FieldObject/index.js";
+import { Fieldset } from "../Fieldset/index.js";
+import { Button } from "@digigov/ui/form/Button/index.js";
+import { RadioConditional } from "@digigov/ui/form/RadioContainer/index.js";
+const AddObjects = ({ name, fields, formState, extra, append, remove, trigger, clearErrors, children, setValue, stashedObjects, getValues, resetField, onStash, error, Field })=>{
+    const currentIndex = fields.length > 0 ? fields.length - 1 : fields.length;
+    const currentName = `${name}.${currentIndex}`;
+    const radioField = {
+        key: 'needs-more',
+        type: 'choice:single',
+        label: {
+            primary: extra?.label.question.title
+        },
+        required: true,
+        validators: [
+            {
+                name: 'is-locked',
+                message: 'form.error.needs-more',
+                test: (data)=>'no' === data
+            }
+        ],
+        extra: {
+            options: [
+                {
+                    label: {
+                        primary: extra?.label.question.yes
+                    },
+                    id: `radio-input-${name}-yes`,
+                    value: 'yes',
+                    selected: function() {
+                        return /*#__PURE__*/ react.createElement(RadioConditional, {
+                            hidden: 'yes' !== needsMore || extra?.max && extra?.max - stashedObjects.length === 0
+                        }, 'yes' === needsMore && fields.length > 0 && /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(FieldObject, {
+                            name: currentName,
+                            error: error && error[currentIndex],
+                            register: register,
+                            formState: formState,
+                            control: control,
+                            ...extra?.of,
+                            label: extra?.label.question.objectLabel || extra?.of.label
+                        }), /*#__PURE__*/ react.createElement(Button, {
+                            color: "secondary",
+                            name: `${currentName}-add-object`,
+                            onClick: async (e)=>{
+                                e.preventDefault();
+                                const nestedFields = extra?.of.extra.fields.map((f)=>`${currentName}.${f.key}`);
+                                const result = await trigger(nestedFields);
+                                if (result) {
+                                    setValue('needs-more', '');
+                                    onStash(getValues(currentName));
+                                }
+                            }
+                        }, extra?.label.object.add)));
+                    }
+                },
+                {
+                    label: {
+                        primary: extra?.label.question.no
+                    },
+                    id: `radio-input-${name}-no`,
+                    value: 'no'
+                }
+            ]
+        }
+    };
+    const { field, control, register, reset, error: needsMoreError } = useField(radioField.key, radioField?.type ? radioField : null);
+    const resolvedField = useMemo(()=>resolveField(children, field), [
+        field
+    ]);
+    const needsMore = useWatch({
+        name: field.key,
+        control
+    });
+    useEffect(()=>{
+        if ('yes' === needsMore) append({
+            afm: '',
+            firstName: '',
+            lastName: ''
+        });
+        if ('no' === needsMore && stashedObjects.length < fields.length) remove(currentIndex);
+        if ('' === needsMore) clearErrors('needs-more');
+    }, [
+        needsMore
+    ]);
+    resolvedField.label = resolvedField.label || {};
+    if (extra?.length) resolvedField.label.secondary = `Έχετε προσθέσει ${stashedObjects.length} εγγραφές και σας απομένουν ακόμα ${extra.length - stashedObjects.length} εγγραφές.`;
+    else if (extra?.min && extra?.max) resolvedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${extra?.min - stashedObjects.length} και το μέγιστο ${extra?.max} εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
+    else if (extra?.min) resolvedField.label.secondary = `Το πεδίο πρέπει να έχει ακόμα ${extra?.min - stashedObjects.length} εγγραφές. Προσθέστε μια ακόμα επιλέγοντας την απάντηση «Ναι» στην επόμενη ερώτηση.`;
+    else if (extra?.max) resolvedField.label.secondary = ` Έχετε προσθέσει ${stashedObjects.length} εγγραφές και σας απομένουν ${extra.max - stashedObjects.length} επιπλέον εγγραφές.`;
+    return /*#__PURE__*/ react.createElement(Fieldset, null, /*#__PURE__*/ react.createElement(FieldBase, {
+        ...resolvedField,
+        name: resolvedField.key,
+        control: control,
+        register: register,
+        reset: reset,
+        resetField: resetField,
+        Field: Field,
+        error: extra?.max - stashedObjects.length === 0 || extra?.length - stashedObjects.length === 0 ? error : needsMoreError
+    }));
+};
+const add_objects = AddObjects;
+export { AddObjects, add_objects as default };

package/MultiplicityField/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { MultiplicityProps } from '@digigov/form/MultiplicityField/types';
+import type { UseFormReturn } from 'react-hook-form';
+import type { MultiplicityProps } from './types.js';
 export declare const Multiplicity: React.FC<MultiplicityProps>;
 export default Multiplicity;
 export interface ListObjectProps {