@digigov/form 2.0.0-264e5fff → 2.0.0-290ada95

package/FormBuilder/index.js

@@ -1,267 +1,239 @@
-import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import react, { useCallback, useEffect, useMemo, useRef } from "react";
 import { useForm } from "react-hook-form";
-import { Field } from "@digigov/form/Field";
-import { ErrorGroup } from "@digigov/form/Field/ErrorGroup";
-import { FieldsetWithContext } from "@digigov/form/Fieldset/FieldsetWithContext";
-import { FormContext, useFormContext } from "@digigov/form/FormContext";
-import useFieldFocusManager from "@digigov/form/hooks/useFieldFocusManager";
-import { CONTROLLED_FIELD_COMPONENTS } from "@digigov/form/inputs/registry";
-import { yupResolver } from "@digigov/form/utils";
-import { useValidationSchema } from "@digigov/form/validators";
-import { Button } from "@digigov/ui/form/Button";
-import { Form } from "@digigov/ui/form/Form";
-import { useScreenSize } from "@digigov/ui/utils/hooks/useScreen";
-const FormBase = React.forwardRef(function FormBase2({
-  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,
-    // we handle focusing manually
-    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,
-    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, 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 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 = "onChange",
-    mode = "onSubmit",
-    shouldFocusError = true,
-    criteriaMode = "all",
-    auto = false,
-    validatorRegistry,
-    componentRegistry,
-    grid = false,
-    ...props
-  }, ref) {
+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 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 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);
-        }
+    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]
-    );
+    }, [
+        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,
-                fieldOrder: item.map((field) => field.key)
-              },
-              item.map((f) => {
-                return /* @__PURE__ */ React.createElement(Field, { key: f.key, name: f.key });
-              })
-            );
-          } else {
-            return /* @__PURE__ */ React.createElement(Field, { key: item.key, name: item.key });
-          }
-        });
-      }
-    }, [auto, fieldsets, schema, screenSize, transformedFields]);
-    return /* @__PURE__ */ React.createElement(
-      FormBase,
-      {
-        resolver,
-        fieldsetsMap,
-        fieldsMap,
-        registerField,
-        initial,
-        reValidateMode,
-        mode,
-        shouldFocusError,
-        criteriaMode,
-        onSubmit,
-        componentRegistry,
-        ref,
-        grid,
+    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" }, "\u03A3\u03C5\u03BD\u03AD\u03C7\u03B5\u03B9\u03B1"),
-      children
-    );
-  }
-);
+    }, fieldChildren, auto && /*#__PURE__*/ react.createElement(Button, {
+        type: "submit"
+    }, "Συνέχεια"), children);
+});
 const DEFAULT_LAYOUT = {
-  xs: 12,
-  sm: 12,
-  md: 12,
-  lg: 12,
-  xl: 12
+    xs: 12,
+    sm: 12,
+    md: 12,
+    lg: 12,
+    xl: 12
 };
-const BREAKPOINTS = ["xs", "sm", "md", "lg", "xl"];
+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 (layoutValue === 0) {
-        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 layoutValue === 12 ? [...acc, item] : [...acc, [item]];
-      }
-      return [...acc.slice(0, -1), [...lastElement, item]];
-    }, []).map((item) => {
-      if (Array.isArray(item) && item.length === 1) {
-        return item[0];
-      }
-      return item;
-    });
-    return sizes;
-  }, {});
+    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) => {
-  return /* @__PURE__ */ React.createElement(FormBuilder, { ...props, componentRegistry: CONTROLLED_FIELD_COMPONENTS });
-};
-var FormBuilder_default = FormBuilder;
-export {
-  ControlledFormBuilder,
-  FormBase,
-  FormBuilder_default as default,
-  useFormContext,
-  useFormValues
-};
-//# sourceMappingURL=index.js.map
+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,4 +1,4 @@
 import type React from 'react';
-import type { FormContextProps } from '@digigov/form/types';
+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 type { ErrorOption, FieldArrayWithId, UseFieldArrayReturn } from 'react-hook-form';
-import type { MultiplicityProps, StashedObject } from '@digigov/form/MultiplicityField/types';
+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 type { UseFormReturn } from 'react-hook-form';
-import type { MultiplicityProps } from '@digigov/form/MultiplicityField/types';
+import type { MultiplicityProps } from './types.js';
 export declare const Multiplicity: React.FC<MultiplicityProps>;
 export default Multiplicity;
 export interface ListObjectProps {