@digigov/form 2.0.0-rc.8 → 2.0.2

package/CHANGELOG.md

@@ -1,11 +1,115 @@
 # Change Log - @digigov/form
 
-This log was last generated on Fri, 16 Feb 2024 09:57:32 GMT and should not be manually modified.
+This log was last generated on Wed, 21 Jan 2026 15:58:34 GMT and should not be manually modified.
+
+## 2.0.2
+Wed, 21 Jan 2026 15:58:34 GMT
+
+### Breaking changes
+
+- Rename govgr classes namespace to ds
+- Reorganize exports to resolve circular dependencies
+- Make lib "pure ESM"
+
+### Minor changes
+
+- Add missing attributes and implement scenarios testing
+- Add multiselect example at Autocomplete
+- Rename index.mdx files
+- Create Rate component, create rate validation
+- Added props to file input
+- Changes for dilosi integration
+- Change FieldArray logic and implement DateTimeInput & FormDialog
+- Upgrade react-hook-form from 7.33.1 to 7.56.1, @hookform/resolvers from 3.9.0 to 5.0.1 and react peer dependency version to include ^19.1.0 along with ^18.3.0. Fix multiplicity form state issue
+- Add ErrorGroup mechanism, for fields when layout < 12
+- Add image field support for stepwise
+- Add card layout in FieldArray
+- Add password in types map
+
+### Patches
+
+- Add maxSize prop to message in file validator
+- update react version
+- Add ref as undefined at FieldBase, add wrapper at autocomplete at utils.ts file 
+- Modify code in AutoComplete to work properly in form
+- Add noLastBorder prop in PreviewDisplay storybook example
+- Remove @digigov/babel-ts-to-proptypes
+- Αdd placeholder prop to field component
+- add lazy import of react components
+- Remove multiple prop from extra props add logic to AutocompleteInput
+- register enum name for array items
+- Remove Suspense, change labels, add results to AutoCompoleteInput stories
+- fix issues with deprecated defaultprops
+- minor fixes to remove warnings
+- Replaced phone validator with custom one
+- Update stories
+-  Add autoComplete attribute to FieldSpec props, add it to input examples
+- Add trim func to validator inputs, add it to DateInput component to trim white spaces add reset func to onSubmit to reset the trimming data before submit form
+- Fix error message in FieldObject used in Multiplicity fields
+- Fix file validation, remove unused validation errors, modify image stories
+- Update lazy.js file
+- Create date utils file, remove logic from validators
+- Replace all react-core component imports with ui component imports
+- Fix date and boolean yap validator for nullable and string values respectively
+- Refactor form component examples and docs
+- Fix error goup heading title
+- update test snapshots for Questions example
+- Show doc page in stories
+- Add margin bottom in Multiplicity header and hint
+- Add email to storybook update incorrect input value test, delete unnecessary input scenario file
+- Fix DateInput and DateTimeInput, add default and initial value example to storybook
+- Make email validation stricter
+- Fix an issue with checkboxes submitting empty values
+- Fix an issue with FieldArray focus & Multiplicity modifications
+- Fix issue when submitting file fields
+- Fix all combination error messages for date and datetime input, add range for day and month input fields 
+- Add date and datetime test scenarios
+- Isolate dialog field array by using nested form
+- Fix issue when submitting fieldarray with empty item
+- Fix form runtime warnings and errors
+- Fix display of custom errors in FieldArrays
+- Update lazy file
+- Replace imports with code in scenario test
+- Fix date validator
+- Update form components test snapshots
+- Remove named functions from components causin vite dev server to crash
+- Fix integer and number validation
+- Fix validations for date and datetime, fix scenarios errors
+- Fix circular dependency issues related to date inputs
+- Add trim prop to FieldSpec, fix validation trim errors
+- Export useOtp hook
+- Add register call in FieldBaseContainer
+- Fix multiplicity to display label value in type choice component
+- Make adjustments to be compatible in react-native
+- Update radio tests
+- Add support for React v18 & update stories
+- Export default Conditional, AutocompleInput stories examples, create form's .mdx files
+- Add disabled prop to Field components
+
+### Updates
+
+- Generate registry and lazy files
+- Update theme references in tailwind config
+- Update build scriptUpdate build script & remove unnecessary dependency
+- Fix build errors in stories
+- Generate lazy file
+- Update lazy files
+- update lazy file
+- Lint MultipleInput's file.
+- Fix linter errors
+- Remove registry files from src
+- Update button styling in FormDialog
+- Update playwright-related dependency versions
+- Remove scenarios testing related files
+- Update @types/node
+- Replace jest with vitest
 
 ## 1.1.2
 Fri, 16 Feb 2024 09:57:32 GMT
 
-_Version update only_
+### Updates
+
+- Upgrade ESLint & Prettier
 
 ## 1.1.1
 Mon, 29 Jan 2024 17:45:11 GMT
@@ -27,7 +131,9 @@ _Version update only_
 ## 1.0.1
 Tue, 19 Dec 2023 15:00:14 GMT
 
-_Version update only_
+### Updates
+
+- Upgrade @types/node to v18
 
 ## 1.0.0
 Fri, 15 Dec 2023 15:23:56 GMT
@@ -372,6 +478,10 @@ Wed, 30 Mar 2022 12:28:30 GMT
 
 - Add support for `characterWidth` and `cellWidth` props in `@digigov/form/Field`, these props will be used by the `@digigov/react-core/TextInput`
 
+### Updates
+
+- Fix linting issues
+
 ## 0.5.3
 Mon, 28 Feb 2022 15:04:49 GMT
 

package/Field/ErrorGroup.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { ErrorOption } from 'react-hook-form';
+import type { FieldLabelProps } from './types.js';
+import type { Breakpoints } from '@digigov/ui/utils/hooks/useScreen';
+export interface ErrorGroupContextType {
+    setError: (name?: string, label?: FieldLabelProps, error?: ErrorOption) => void;
+}
+export declare const ErrorGroupContext: React.Context<ErrorGroupContextType | null>;
+export interface ErrorGroupProps {
+    children: React.ReactNode;
+    screenSize?: Breakpoints | undefined;
+    fieldOrder?: any[];
+}
+export declare const ErrorGroup: React.FC<ErrorGroupProps>;
+export default ErrorGroup;

package/Field/ErrorGroup.js

@@ -0,0 +1,53 @@
+import react, { createContext, useEffect, useState } from "react";
+import { List, ListItem } from "@digigov/ui/content/List/index.js";
+import { ErrorSummary } from "@digigov/ui/feedback/ErrorSummary/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Link } from "@digigov/ui/navigation/Link/index.js";
+import { Heading } from "@digigov/ui/typography/Heading/index.js";
+import { Base } from "@digigov/ui/utils/Base/index.js";
+const ErrorGroupContext = /*#__PURE__*/ createContext(null);
+const ErrorGroup = ({ children, screenSize, fieldOrder })=>{
+    const [errors, setErrors] = useState({});
+    const { t } = useTranslation();
+    const setError = (name, label, error)=>{
+        if (errors[name] !== error && errors[name]?.message !== error?.message) if (error?.message) setErrors({
+            ...errors,
+            [name]: {
+                ...error,
+                label: label.primary
+            }
+        });
+        else {
+            const updatedErrors = {
+                ...errors
+            };
+            delete updatedErrors[name];
+            setErrors(updatedErrors);
+        }
+    };
+    useEffect(()=>{
+        setErrors({});
+    }, [
+        screenSize
+    ]);
+    return /*#__PURE__*/ react.createElement(ErrorGroupContext.Provider, {
+        value: {
+            setError
+        }
+    }, 0 !== Object.keys(errors).length && /*#__PURE__*/ react.createElement(ErrorSummary, {
+        variant: "error-group"
+    }, /*#__PURE__*/ react.createElement(Heading, {
+        size: "sm"
+    }, "Τα παρακάτω πεδία της φόρμας ειναι λάθος.", ' '), /*#__PURE__*/ react.createElement(List, {
+        listStyle: "bullet"
+    }, (fieldOrder || Object.keys(errors).reverse()).filter((fieldName)=>errors[fieldName]).map((fieldName, index)=>/*#__PURE__*/ react.createElement(ListItem, {
+            key: index,
+            id: `${fieldName}-error`
+        }, /*#__PURE__*/ react.createElement(Base, {
+            as: "b"
+        }, t(errors[fieldName]?.label), ":"), ' ', /*#__PURE__*/ react.createElement(Link, {
+            href: `#${fieldName}`
+        }, t(errors[fieldName]?.message)))))), children);
+};
+const Field_ErrorGroup = ErrorGroup;
+export { ErrorGroup, ErrorGroupContext, Field_ErrorGroup as default };

package/Field/FieldBase.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { FieldBaseProps } from '@digigov/form/Field/types';
+import type { FieldBaseProps } from './types.js';
 export declare const FieldBase: React.FC<FieldBaseProps>;

package/Field/FieldBase.js

@@ -0,0 +1,77 @@
+import react, { useContext, useEffect } from "react";
+import { Controller } from "react-hook-form";
+import { ErrorGroupContext } from "./ErrorGroup.js";
+import FieldBaseContainer from "./FieldBaseContainer.js";
+const FieldBase = ({ required, name, component: Component, wrapper, control, type, controlled = false, enabled = true, editable, defaultValue, label, extra = {}, layout, error, trim, register, ...componentProps })=>{
+    const errorGroupContext = useContext(ErrorGroupContext);
+    useEffect(()=>{
+        if (errorGroupContext) errorGroupContext.setError(name, label, error);
+    }, [
+        error,
+        name,
+        errorGroupContext?.setError
+    ]);
+    if (!enabled) return null;
+    if (controlled) return /*#__PURE__*/ react.createElement(FieldBaseContainer, {
+        label: label,
+        layout: layout,
+        register: register,
+        error: errorGroupContext ? void 0 : error,
+        hasError: !!error,
+        wrapper: wrapper,
+        name: name,
+        controlled: controlled
+    }, /*#__PURE__*/ react.createElement(Controller, {
+        control: control,
+        name: name,
+        render: ({ field })=>/*#__PURE__*/ react.createElement(Component, {
+                ...field,
+                control: control,
+                defaultValue: defaultValue ?? field.value,
+                extra: extra,
+                error: !!error,
+                type: type,
+                "aria-required": !!required,
+                "aria-describedby": error && `${name}-error`,
+                required: required,
+                disabled: false === editable,
+                trim: trim,
+                ...componentProps
+            })
+    }));
+    return /*#__PURE__*/ react.createElement(FieldBaseContainer, {
+        label: label,
+        layout: layout,
+        register: register,
+        error: errorGroupContext ? void 0 : error,
+        hasError: !!error,
+        wrapper: wrapper,
+        name: name
+    }, Component?.render ? /*#__PURE__*/ react.createElement(Component, {
+        ...register(name),
+        control: control,
+        error: !!error,
+        extra: extra,
+        type: type,
+        "aria-required": !!required,
+        "aria-describedby": error && `${name}-error`,
+        required: required,
+        disabled: false === editable,
+        defaultValue: defaultValue,
+        ...componentProps
+    }) : /*#__PURE__*/ react.createElement(Component, {
+        ...register(name),
+        register: register,
+        control: control,
+        error: !!error,
+        extra: extra,
+        type: type,
+        defaultValue: defaultValue,
+        "aria-required": !!required,
+        "aria-describedby": error && `${name}-error`,
+        required: required,
+        disabled: false === editable,
+        ...componentProps
+    }));
+};
+export { FieldBase };

package/Field/FieldBaseContainer.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FieldContainerProps } from '@digigov/form/Field/types';
-export declare const FieldBaseContainer: React.FC<FieldContainerProps>;
+import type { FieldContainerProps } from './types.js';
+export declare const FieldBaseContainer: React.ForwardRefExoticComponent<FieldContainerProps & React.RefAttributes<HTMLFieldSetElement>>;
 export default FieldBaseContainer;

package/Field/FieldBaseContainer.js

@@ -0,0 +1,43 @@
+import react from "react";
+import Label from "../inputs/Label/index.js";
+import { ErrorMessage } from "@digigov/react-core/ErrorMessage/index.js";
+import FieldContainer from "@digigov/react-core/FieldContainer/index.js";
+import Fieldset from "@digigov/react-core/Fieldset/index.js";
+import FieldsetLegend from "@digigov/react-core/FieldsetLegend/index.js";
+import LabelContainer from "@digigov/react-core/LabelContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+const FieldBaseContainer_FieldBaseContainer = /*#__PURE__*/ react.forwardRef(({ name, wrapper, label, children, error, hasError, layout, controlled, labelSize = 'sm' }, ref)=>{
+    const { t } = useTranslation();
+    const errorMessage = error?.message.key ? error.message.key : error?.message || '';
+    const errorContext = error?.message.context || {};
+    if ('fieldset' === wrapper) return /*#__PURE__*/ react.createElement(FieldContainer, {
+        error: hasError,
+        ...layout
+    }, /*#__PURE__*/ react.createElement(Fieldset, {
+        ref: ref,
+        className: "outline-none",
+        ...controlled && {
+            tabIndex: -1
+        }
+    }, /*#__PURE__*/ react.createElement(FieldsetLegend, {
+        size: labelSize
+    }, label && label.primary), label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary)), error && /*#__PURE__*/ react.createElement(ErrorMessage, {
+        id: `${name}-error`
+    }, t(errorMessage, errorContext)), children, label && label.hint && /*#__PURE__*/ react.createElement(Hint, {
+        size: "sm"
+    }, label.hint)));
+    return /*#__PURE__*/ react.createElement(FieldContainer, {
+        error: hasError,
+        ...layout
+    }, /*#__PURE__*/ react.createElement(LabelContainer, null, label && /*#__PURE__*/ react.createElement(Label, {
+        label: label
+    }), error && /*#__PURE__*/ react.createElement(ErrorMessage, {
+        id: `${name}-error`
+    }, t(errorMessage, errorContext)), children, label && label.hint && /*#__PURE__*/ react.createElement(Hint, {
+        size: "sm"
+    }, label.hint)));
+});
+FieldBaseContainer_FieldBaseContainer.displayName = 'FieldBaseContainer';
+const FieldBaseContainer = FieldBaseContainer_FieldBaseContainer;
+export { FieldBaseContainer_FieldBaseContainer as FieldBaseContainer, FieldBaseContainer as default };

package/Field/FieldConditional.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FieldConditionalProps } from '@digigov/form/Field/types';
+import type { FieldConditionalProps } from './types.js';
 export declare const FieldConditional: React.FC<FieldConditionalProps>;
 export default FieldConditional;

package/Field/FieldConditional.js

@@ -0,0 +1,45 @@
+import react from "react";
+import { useWatch } from "react-hook-form";
+import { FieldBase } from "./FieldBase.js";
+import { evaluateFieldWithConditions } from "./utils/evaluateFieldWithConditions.js";
+const ChildFieldMemo = /*#__PURE__*/ react.memo(function({ dependencies, field, control, reset, resetField, register, error, Field }) {
+    const newField = evaluateFieldWithConditions(field, dependencies);
+    return /*#__PURE__*/ react.createElement(FieldBase, {
+        ...newField,
+        Field: Field,
+        name: newField.key,
+        reset: reset,
+        resetField: resetField,
+        control: control,
+        register: register,
+        error: error
+    });
+}, (prev, next)=>{
+    if (!prev || !prev.dependencies) return false;
+    if (prev.error !== next.error) return false;
+    for(const dep in next.dependencies)if (next.dependencies[dep] !== prev.dependencies[dep]) return false;
+    return true;
+});
+const FieldConditional_FieldConditional = ({ control, field, register, reset, resetField, error, Field })=>{
+    const dependencyKeys = Object.keys(field.condition);
+    const dependencyValues = useWatch({
+        name: dependencyKeys,
+        control
+    });
+    const variables = dependencyKeys.reduce((data, fieldKey, index)=>({
+            ...data,
+            [fieldKey]: dependencyValues[index]
+        }), {});
+    return /*#__PURE__*/ react.createElement(ChildFieldMemo, {
+        dependencies: variables,
+        field: field,
+        control: control,
+        register: register,
+        reset: reset,
+        resetField: resetField,
+        error: error,
+        Field: Field
+    });
+};
+const FieldConditional = FieldConditional_FieldConditional;
+export { FieldConditional_FieldConditional as FieldConditional, FieldConditional as default };

package/Field/index.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { FieldProps } from '@digigov/form/Field/types';
+import type { FieldProps } from './types.js';
 export declare const Field: React.FC<FieldProps>;
 export default Field;

package/Field/index.js

@@ -1,70 +1,72 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["name", "children"];
-import React, { useMemo } from 'react';
-import { FieldBase } from '@digigov/form/Field/FieldBase';
-import FieldConditional from '@digigov/form/Field/FieldConditional';
-import { useField, calculateField } from '@digigov/form/Field/utils';
-import FieldArray from '@digigov/form/FieldArray';
-import Multiplicity from '@digigov/form/MultiplicityField';
-export var Field = function Field(_ref) {
-  var name = _ref.name,
-    children = _ref.children,
-    customField = _objectWithoutProperties(_ref, _excluded);
-  var _useField = useField(name, customField !== null && customField !== void 0 && customField.type ? customField : null),
-    field = _useField.field,
-    control = _useField.control,
-    register = _useField.register,
-    reset = _useField.reset,
-    error = _useField.error,
-    componentRegistry = _useField.componentRegistry,
-    formState = _useField.formState,
-    setValue = _useField.setValue,
-    getValues = _useField.getValues,
-    unregister = _useField.unregister,
-    trigger = _useField.trigger,
-    clearErrors = _useField.clearErrors;
-  var calculatedField = useMemo(function () {
-    return calculateField(children, field, componentRegistry);
-  }, [field]);
-  if (calculatedField.condition) {
-    return /*#__PURE__*/React.createElement(FieldConditional, {
-      control: control,
-      reset: reset,
-      register: register,
-      field: calculatedField,
-      error: error
+import react, { useMemo } from "react";
+import { FieldBase } from "./FieldBase.js";
+import FieldConditional from "./FieldConditional.js";
+import { resolveField } from "./utils/resolveField.js";
+import { useField } from "./utils/useField.js";
+import FieldArray from "../FieldArray/index.js";
+import MultiplicityField from "../MultiplicityField/index.js";
+const Field_Field = ({ name, children, ...customField })=>{
+    const { field, control, register, reset, resetField, error, componentRegistry, formState, setValue, getValues, unregister, trigger, clearErrors, registerFieldFocus } = useField(name, customField?.type ? customField : null);
+    const resolvedField = useMemo(()=>resolveField(children, field, componentRegistry), [
+        field
+    ]);
+    if (resolvedField.condition) return /*#__PURE__*/ react.createElement(FieldConditional, {
+        control: control,
+        reset: reset,
+        resetField: resetField,
+        register: register,
+        field: resolvedField,
+        error: error,
+        Field: Field_Field
+    });
+    if ('array' === resolvedField.type && !resolvedField.multiplicity) {
+        resolvedField.name = name;
+        return /*#__PURE__*/ react.createElement(FieldArray, {
+            control: control,
+            trigger: trigger,
+            register: register,
+            clearErrors: clearErrors,
+            error: error,
+            getValues: getValues,
+            setValue: setValue,
+            formState: formState,
+            Field: Field_Field,
+            reset: reset,
+            resetField: resetField,
+            registerFieldFocus: registerFieldFocus,
+            ...resolvedField
+        });
+    }
+    if ('array' === resolvedField.type && true === resolvedField.multiplicity) {
+        resolvedField.name = name;
+        return /*#__PURE__*/ react.createElement(MultiplicityField, {
+            control: control,
+            register: register,
+            trigger: trigger,
+            clearErrors: clearErrors,
+            error: error,
+            formState: formState,
+            setValue: setValue,
+            getValues: getValues,
+            unregister: unregister,
+            resetField: resetField,
+            Field: Field_Field,
+            ...resolvedField
+        });
+    }
+    const editable = false !== customField.editable && true !== customField.disabled;
+    const customError = error ? error : formState?.errors[name];
+    return /*#__PURE__*/ react.createElement(FieldBase, {
+        ...resolvedField,
+        editable: editable,
+        name: name,
+        control: control,
+        register: register,
+        reset: reset,
+        error: customError,
+        resetField: resetField,
+        Field: Field_Field
     });
-  }
-  if (calculatedField.type === 'array' && !calculatedField.multiplicity) {
-    calculatedField.name = name;
-    return /*#__PURE__*/React.createElement(FieldArray, _extends({
-      control: control,
-      register: register,
-      error: error,
-      formState: formState
-    }, calculatedField));
-  }
-  if (calculatedField.type === 'array' && calculatedField.multiplicity === true) {
-    calculatedField.name = name;
-    return /*#__PURE__*/React.createElement(Multiplicity, _extends({
-      control: control,
-      register: register,
-      trigger: trigger,
-      clearErrors: clearErrors,
-      error: error,
-      formState: formState,
-      setValue: setValue,
-      getValues: getValues,
-      unregister: unregister
-    }, calculatedField));
-  }
-  return /*#__PURE__*/React.createElement(FieldBase, _extends({}, calculatedField, {
-    name: name,
-    control: control,
-    register: register,
-    reset: reset,
-    error: error
-  }));
 };
-export default Field;
+const Field = Field_Field;
+export { Field_Field as Field, Field as default };