@digigov/form 2.0.0-rc.8 → 2.0.3

package/Fieldset/FieldsetWithContext.js

@@ -0,0 +1,27 @@
+import react, { useContext, useMemo } from "react";
+import Field from "../Field/index.js";
+import { Fieldset, FieldsetBody, FieldsetCaption, FieldsetLabel } from "./index.js";
+import { FormContext } from "../FormContext.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+const FieldsetWithContext = ({ name })=>{
+    const { label, body, fields } = useFieldset(name);
+    const { t } = useTranslation();
+    return useMemo(()=>/*#__PURE__*/ react.createElement(Fieldset, null, label?.primary && /*#__PURE__*/ react.createElement(FieldsetLabel, null, t(label.primary)), label?.secondary && /*#__PURE__*/ react.createElement(FieldsetCaption, null, t(label.secondary)), body && /*#__PURE__*/ react.createElement(FieldsetBody, null, body), fields.map((field)=>/*#__PURE__*/ react.createElement(Field, {
+                key: field,
+                name: field
+            }))), [
+        label?.primary,
+        label?.secondary,
+        body,
+        fields
+    ]);
+};
+const useFieldset = (name)=>{
+    const { fieldsetsMap } = useContext(FormContext);
+    if (fieldsetsMap && fieldsetsMap[name]) return useMemo(()=>fieldsetsMap[name], [
+        name
+    ]);
+    if (!fieldsetsMap) throw new Error("Fieldsets is not defined");
+    throw new Error(`No fieldset with name ${name} found`);
+};
+export { FieldsetWithContext };

package/Fieldset/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { FieldsetLabelProps, FieldsetCaptionProps, FieldsetBodyProps } from '@digigov/form/Fieldset/types';
-import Fieldset from '@digigov/react-core/Fieldset';
+import type { FieldsetLabelProps, FieldsetCaptionProps, FieldsetBodyProps } from './types.js';
+import { Fieldset } from '@digigov/react-core/Fieldset';
 export declare const FieldsetLabel: React.FC<FieldsetLabelProps>;
 export declare const FieldsetCaption: React.FC<FieldsetCaptionProps>;
 export declare const FieldsetBody: React.FC<FieldsetBodyProps>;

package/Fieldset/index.js

@@ -1,32 +1,18 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children"],
-  _excluded2 = ["children"];
-import React from 'react';
-import Fieldset from '@digigov/react-core/Fieldset';
-import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
-import Hint from '@digigov/react-core/Hint';
-import Grid from '@digigov/ui/layouts/Grid';
-import NormalText from '@digigov/ui/typography/NormalText';
-export var FieldsetLabel = function FieldsetLabel(_ref) {
-  var children = _ref.children,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(FieldsetLegend, _extends({
-    heading: true,
-    size: "xl"
-  }, props), children);
-};
-export var FieldsetCaption = function FieldsetCaption(_ref2) {
-  var children = _ref2.children,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  return /*#__PURE__*/React.createElement(Hint, props, children);
-};
-export var FieldsetBody = function FieldsetBody(_ref3) {
-  var children = _ref3.children;
-  return /*#__PURE__*/React.createElement(Grid, {
-    item: true,
-    xs: 12
-  }, /*#__PURE__*/React.createElement(NormalText, null, children));
-};
-export { Fieldset };
-export default Fieldset;
+import react from "react";
+import { Fieldset } from "@digigov/react-core/Fieldset/index.js";
+import { FieldsetLegend } from "@digigov/ui/form/FieldContainer/index.js";
+import { Grid } from "@digigov/ui/layouts/Grid/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+import { NormalText } from "@digigov/ui/typography/NormalText/index.js";
+const FieldsetLabel = ({ children, ...props })=>/*#__PURE__*/ react.createElement(FieldsetLegend, {
+        heading: true,
+        size: "xl",
+        ...props
+    }, children);
+const FieldsetCaption = ({ children, ...props })=>/*#__PURE__*/ react.createElement(Hint, props, children);
+const FieldsetBody = ({ children })=>/*#__PURE__*/ react.createElement(Grid, {
+        item: true,
+        xs: 12
+    }, /*#__PURE__*/ react.createElement(NormalText, null, children));
+const src_Fieldset = Fieldset;
+export { Fieldset, FieldsetBody, FieldsetCaption, FieldsetLabel, src_Fieldset as default };

package/Fieldset/types.d.ts

@@ -1,8 +1,9 @@
-import { FieldsetLegendProps } from '@digigov/react-core/FieldsetLegend';
-import { HintProps } from '@digigov/react-core/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 {
 }
 export interface FieldsetBodyProps {
+    children?: React.ReactNode;
 }

package/FormBuilder/index.d.ts

@@ -1,2 +1,9 @@
-import { FormBuilder } from '@digigov/form/FormBuilder/FormBuilder';
+import React from 'react';
+import { useFormContext } from '../FormContext.js';
+import type { FormBaseProps, FormBuilderProps } from '../types.js';
+declare const FormBase: React.ForwardRefExoticComponent<FormBaseProps & React.RefAttributes<HTMLFormElement>>;
+declare const useFormValues: () => import("react-hook-form").FieldValues;
+declare const FormBuilder: React.ForwardRefExoticComponent<FormBuilderProps & React.RefAttributes<HTMLFormElement>>;
+export declare const ControlledFormBuilder: (props: any) => React.JSX.Element;
 export default FormBuilder;
+export { useFormContext, useFormValues, FormBase };

package/FormBuilder/index.js

@@ -1,2 +1,239 @@
-import { FormBuilder } from '@digigov/form/FormBuilder/FormBuilder';
-export default FormBuilder;
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
+import { useForm } from "react-hook-form";
+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 useFormValues = ()=>{
+    const ctx = useFormContext();
+    return ctx.getValues();
+};
+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 DEFAULT_LAYOUT = {
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    xl: 12
+};
+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 { MultiplicityProps, StashedObject } from '@digigov/form/MultiplicityField';
+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;
@@ -8,6 +8,7 @@ export interface AddObjectsProps extends Omit<MultiplicityProps, 'key' | 'compon
     remove: UseFieldArrayReturn['remove'];
     stashedObjects: StashedObject[];
     onStash: (arg0: StashedObject) => void;
+    children?: React.ReactNode;
 }
 export declare const AddObjects: React.FC<AddObjectsProps>;
 export default AddObjects;

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,23 +1,6 @@
 import React from 'react';
-import { ErrorOption, UseFormReturn } from 'react-hook-form';
-import { FieldSpec } from '@digigov/form';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
-export interface MultiplicityProps extends Omit<ControlledFieldProps, 'value' | 'onChange' | 'error' | 'extra'> {
-    name: string;
-    control: UseFormReturn['control'];
-    register: UseFormReturn['register'];
-    trigger: UseFormReturn['trigger'];
-    clearErrors: UseFormReturn['clearErrors'];
-    formState: UseFormReturn['formState'];
-    setValue: UseFormReturn['setValue'];
-    getValues: UseFormReturn['getValues'];
-    unregister: UseFormReturn['unregister'];
-    error?: ErrorOption;
-    extra?: Record<string, any>;
-    label?: FieldSpec['label'];
-    layout?: FieldSpec['layout'];
-}
-export type StashedObject = Record<string, any>;
+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 {