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

package/Questions/Step/index.js

@@ -1,16 +1,13 @@
-export * from "@digigov/form/Questions/Step/ReviewStep";
-export * from "@digigov/form/Questions/Step/Step";
-export * from "@digigov/form/Questions/Step/StepArrayReview";
-export * from "@digigov/form/Questions/Step/StepContext";
-export * from "@digigov/form/Questions/Step/StepDescription";
-export * from "@digigov/form/Questions/Step/StepForm";
-export * from "@digigov/form/Questions/Step/StepQuote";
-export * from "@digigov/form/Questions/Step/StepTitle";
-export * from "@digigov/form/Questions/Step/getAddMoreFields";
-export * from "@digigov/form/Questions/Step/types";
-import Step from "@digigov/form/Questions/Step/Step";
-var Step_default = Step;
-export {
-  Step_default as default
-};
-//# sourceMappingURL=index.js.map
+import Step from "./Step.js";
+export * from "./ReviewStep.js";
+export * from "./Step.js";
+export * from "./StepArrayReview.js";
+export * from "./StepContext.js";
+export * from "./StepDescription.js";
+export * from "./StepForm.js";
+export * from "./StepQuote.js";
+export * from "./StepTitle.js";
+export * from "./getAddMoreFields.js";
+export * from "./types.js";
+const Questions_Step = Step;
+export { Questions_Step as default };

package/Questions/Step/types.d.ts

@@ -1,4 +1,4 @@
-import { LabelProps } from '@digigov/form/inputs/Label';
+import type { LabelProps } from '../../inputs/Label/index.js';
 export type StepType = 'object' | 'array';
 export type StepReviewAnswersType = 'positive' | 'negative';
 export interface StepAddMoreInterface {

package/Questions/getNextStep.d.ts

@@ -1,2 +1,2 @@
-import { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { StepInterface } from './Step/types.js';
 export declare function getNextStep(currentStep: any, steps: any[], data: any): StepInterface | null;

package/Questions/getNextStep.js

@@ -0,0 +1,13 @@
+function getNextStep(currentStep, steps, data) {
+    if (currentStep.nextStep) {
+        const nextStepName = currentStep.nextStep(data);
+        if (nextStepName) return steps.find((step)=>step.name === nextStepName);
+    }
+    const currentStepIndex = steps.findIndex((step)=>step.name === currentStep.name);
+    const nextStep = steps.slice(currentStepIndex + 1).find((step)=>{
+        if (step.show) return step.show(data);
+        return true;
+    });
+    return nextStep;
+}
+export { getNextStep };

package/Questions/index.d.ts

@@ -1,3 +1,3 @@
-import { Questions } from '@digigov/form/Questions/Questions';
+import { Questions } from './Questions.js';
 export default Questions;
-export * from '@digigov/form/Questions/Step';
+export * from './Step/index.js';

package/Questions/index.js

@@ -1,7 +1,4 @@
-import { Questions } from "@digigov/form/Questions/Questions";
-var Questions_default = Questions;
-export * from "@digigov/form/Questions/Step";
-export {
-  Questions_default as default
-};
-//# sourceMappingURL=index.js.map
+import { Questions } from "./Questions.js";
+export * from "./Step/index.js";
+const src_Questions = Questions;
+export { src_Questions as default };

package/Questions/types.d.ts

@@ -1,4 +1,4 @@
-import { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { StepInterface } from './Step/types.js';
 export interface QuestionsInterface {
     name: string;
     steps: StepInterface[];

package/hooks/useFieldFocusManager.d.ts

@@ -0,0 +1,25 @@
+import type { Control, FieldValues, UseFormReturn } from 'react-hook-form';
+export interface UseFieldFocusManagerProps<T extends FieldValues> {
+    enabled?: boolean;
+    control: Control<T>;
+    subscribe: UseFormReturn['subscribe'];
+    setFocus: UseFormReturn['setFocus'];
+}
+/**
+ * Custom hook to manage focus on form fields.
+ *
+ * It collects all focusable elements from the form fields and sorts them according to their position in the DOM.
+ */
+export declare function useFieldFocusManager<T extends FieldValues>({ enabled, control, subscribe, setFocus, }: UseFieldFocusManagerProps<T>): {
+    /**
+     * Registers a custom focusable element with the given field name.
+     *
+     * Returns a callback function to unregister the element by field name.
+     *
+     * @param fieldName - The name of the field to associate with the element.
+     * @param element - The HTML element to register as focusable.
+     */
+    registerCustomFocusableElement: (fieldName: string, element: HTMLElement) => () => void;
+    focusOnError: (errors: Record<string, any>) => void;
+};
+export default useFieldFocusManager;

package/hooks/useFieldFocusManager.js

@@ -0,0 +1,83 @@
+import { useCallback, useEffect, useRef } from "react";
+import { extractFieldEntries, mapElementsToFields, sortElementsByPosition } from "./utils.js";
+function useFieldFocusManager_useFieldFocusManager({ enabled = true, control, subscribe, setFocus }) {
+    const customFocusableElements = useRef(new Map());
+    const focusableElements = useRef(new Map());
+    useEffect(()=>{
+        if (!enabled) {
+            customFocusableElements.current.clear();
+            focusableElements.current.clear();
+            return;
+        }
+    }, [
+        enabled
+    ]);
+    const updateFocusableElements = useCallback(()=>{
+        focusableElements.current.clear();
+        const formElements = extractFieldEntries(control._fields);
+        const customFieldRefs = mapElementsToFields(customFocusableElements.current);
+        const customElements = extractFieldEntries(customFieldRefs);
+        const combinedElements = new Map(formElements);
+        customElements.forEach((element, fieldName)=>{
+            combinedElements.set(fieldName, element);
+        });
+        focusableElements.current = sortElementsByPosition(combinedElements);
+    }, [
+        control._fields
+    ]);
+    const registerCustomFocusableElement = useCallback((fieldName, element)=>{
+        if (fieldName && element) {
+            customFocusableElements.current.set(fieldName, element);
+            updateFocusableElements();
+        }
+        return function() {
+            customFocusableElements.current.delete(fieldName);
+            updateFocusableElements();
+        };
+    }, [
+        updateFocusableElements
+    ]);
+    useEffect(()=>{
+        if (!enabled || !subscribe) return;
+        const callback = subscribe({
+            formState: {
+                errors: true
+            },
+            callback: ()=>{
+                setTimeout(updateFocusableElements, 0);
+            }
+        });
+        updateFocusableElements();
+        return ()=>callback();
+    }, [
+        enabled,
+        updateFocusableElements,
+        subscribe
+    ]);
+    const focusOnError = useCallback((errors)=>{
+        if (!enabled) return;
+        if (!errors || 0 === Object.keys(errors).length) return;
+        for (const [fieldName, element] of Array.from(focusableElements.current))if (hasFieldError(errors, fieldName)) {
+            if (element && 'function' == typeof element.focus) return void element.focus();
+            else if (element && element.name) return void setFocus(fieldName);
+        }
+    }, [
+        enabled,
+        setFocus
+    ]);
+    return {
+        registerCustomFocusableElement,
+        focusOnError
+    };
+}
+function hasFieldError(errors, fieldName) {
+    if (!errors || 'object' != typeof errors) return false;
+    if (errors[fieldName]) return true;
+    const keys = fieldName.split(/[.[\]]+/).filter(Boolean);
+    let current = errors;
+    for (const key of keys)if (!current || 'object' != typeof current) return false;
+    else current = current[key];
+    return !!current;
+}
+const useFieldFocusManager = useFieldFocusManager_useFieldFocusManager;
+export { useFieldFocusManager as default, useFieldFocusManager_useFieldFocusManager as useFieldFocusManager };

package/hooks/utils.d.ts

@@ -0,0 +1,18 @@
+import type { Field, FieldRefs, Ref } from 'react-hook-form';
+/**
+ * Recursively extracts field entries from nested form field structure.
+ * Handles both regular nested objects and array-like structures.
+ */
+export declare function extractFieldEntries(fields: FieldRefs, prefix?: string): Map<string, Ref>;
+/**
+ * Sorts a map of HTML elements by their position in the DOM.
+ * Elements appearing earlier in the document order come first.
+ */
+export declare function sortElementsByPosition(elements: Map<string, Ref>): Map<string, Ref>;
+/**
+ * Maps a collection of HTML elements to a FieldRefs structure.
+ *
+ * It's not a direct conversion, but rather a way to create a simple FieldRefs
+ * structure that can be used with React Hook Form.
+ */
+export declare function mapElementsToFields(elements: Map<string, HTMLElement>): Record<string, Field>;

package/hooks/utils.js

@@ -0,0 +1,60 @@
+function extractFieldEntries(fields, prefix = '') {
+    const elementMap = new Map();
+    const fieldEntries = Object.entries(fields);
+    if (0 === fieldEntries.length) return elementMap;
+    Object.entries(fields).forEach(([fieldName, field])=>{
+        if (!field) return;
+        const fullFieldName = prefix ? `${prefix}.${fieldName}` : fieldName;
+        if (isField(field)) {
+            const element = field._f.ref;
+            if (element) elementMap.set(fullFieldName, element);
+        } else if (isFieldRefs(field)) {
+            const keys = Object.keys(field);
+            const numericKeys = keys.filter((key)=>/^\d+$/.test(key));
+            const hasNumericKeys = numericKeys.length > 0;
+            if (hasNumericKeys) numericKeys.forEach((index)=>{
+                const arrayItem = field[index];
+                if (arrayItem && isFieldRefs(arrayItem)) {
+                    const nestedEntries = extractFieldEntries(arrayItem, `${fullFieldName}.${index}`);
+                    nestedEntries.forEach((element, fieldName)=>{
+                        elementMap.set(fieldName, element);
+                    });
+                }
+            });
+            else {
+                const nestedEntries = extractFieldEntries(field, fullFieldName);
+                nestedEntries.forEach((element, fieldName)=>{
+                    elementMap.set(fieldName, element);
+                });
+            }
+        }
+    });
+    return elementMap;
+}
+const isField = (fieldRef)=>Boolean(fieldRef && 'object' == typeof fieldRef && '_f' in fieldRef && fieldRef._f && 'ref' in fieldRef._f);
+const isFieldRefs = (fieldRef)=>Boolean(fieldRef && 'object' == typeof fieldRef && !isField(fieldRef));
+function sortElementsByPosition(elements) {
+    const sortedEntries = Array.from(elements.entries()).sort(([, a], [, b])=>{
+        if (isActualHTMLElement(a) && isActualHTMLElement(b)) {
+            const aPosition = a.compareDocumentPosition(b);
+            if (aPosition & Node.DOCUMENT_POSITION_FOLLOWING) return -1;
+            if (aPosition & Node.DOCUMENT_POSITION_PRECEDING) return 1;
+        }
+        return 0;
+    });
+    return new Map(sortedEntries);
+}
+const isActualHTMLElement = (ref)=>ref instanceof HTMLElement && 'function' == typeof ref.focus;
+function mapElementsToFields(elements) {
+    const fields = {};
+    elements.forEach((element, fieldName)=>{
+        fields[fieldName] = {
+            _f: {
+                ref: element,
+                name: fieldName
+            }
+        };
+    });
+    return fields;
+}
+export { extractFieldEntries, mapElementsToFields, sortElementsByPosition };

package/index.d.ts

@@ -1,6 +1,6 @@
-export { default as Field } from '@digigov/form/Field';
-export { default as Fieldset } from '@digigov/form/Fieldset';
-export * from '@digigov/form/inputs/Label';
-import FormBuilder from '@digigov/form/FormBuilder';
-export * from '@digigov/form/types';
+export { default as Field } from './Field/index.js';
+export { default as Fieldset } from './Fieldset/index.js';
+export * from './inputs/Label/index.js';
+import FormBuilder from './FormBuilder/index.js';
+export * from './types.js';
 export default FormBuilder;

package/index.js

@@ -1,17 +1,12 @@
-/** @license Digigov v2.0.0-13876dba
+/** @license Digigov v2.0.0-16fbe090
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { default as default2 } from "@digigov/form/Field";
-import { default as default3 } from "@digigov/form/Fieldset";
-export * from "@digigov/form/inputs/Label";
-import FormBuilder from "@digigov/form/FormBuilder";
-export * from "@digigov/form/types";
-var src_default = FormBuilder;
-export {
-  default2 as Field,
-  default3 as Fieldset,
-  src_default as default
-};
-//# sourceMappingURL=index.js.map
+import Field from "./Field/index.js";
+import Fieldset from "./Fieldset/index.js";
+import FormBuilder from "./FormBuilder/index.js";
+export * from "./inputs/Label/index.js";
+export * from "./types.js";
+const src = FormBuilder;
+export { Field, Fieldset, src as default };

package/inputs/AutoCompleteInput/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
-import { AutoCompleteProps as UIAutoCompleteProps } from '@digigov/ui/form/AutoComplete';
+import type { ControlledFieldProps } from '../../Field/types.js';
+import type { FieldOptionProps } from '../Label/index.js';
+import type { AutoCompleteProps as UIAutoCompleteProps } from '@digigov/ui/form/AutoComplete';
 export interface AutoCompleteInputExtra extends Omit<UIAutoCompleteProps, 'source' | 'id' | 'templates' | 'defaultValue' | 'onConfirm' | 'dropdownArrow'> {
     options: FieldOptionProps[];
 }

package/inputs/AutoCompleteInput/index.js

@@ -1,67 +1,43 @@
-import React, { useCallback } from "react";
-import {
-  AutoComplete
-} from "@digigov/ui/form/AutoComplete";
-import { Hint } from "@digigov/ui/typography/Hint";
-import { Base } from "@digigov/ui/utils/Base";
-const AutoCompleteInput = ({
-  name,
-  type,
-  extra: { options },
-  onChange,
-  value,
-  ...props
-}) => {
-  const suggest = useCallback(
-    function suggest2(query, syncResults) {
-      syncResults(
-        query ? options.filter(function(option) {
-          return `${option.value} ${option.label?.primary || ""} ${option.label?.secondary || ""}`.toLowerCase().indexOf(query.toLowerCase()) !== -1;
-        }) : options
-      );
-    },
-    [options]
-  );
-  return /* @__PURE__ */ React.createElement(
-    AutoComplete,
-    {
-      multiple: type === "choice:multiple" ? true : false,
-      source: suggest,
-      onConfirm: (value2) => {
-        if (Array.isArray(value2)) {
-          const selectedValues = value2.map((item) => item.value);
-          if (selectedValues.length > 0) onChange(selectedValues);
-          else onChange(void 0);
-        } else {
-          onChange(value2.value);
-        }
-      },
-      templates: {
-        suggestion({ label, value: value2 }) {
-          return /* @__PURE__ */ React.createElement(Base, { as: "div" }, label && label.primary && label.primary || value2, label && label.secondary && /* @__PURE__ */ React.createElement(Hint, null, label.secondary));
+import react, { useCallback } from "react";
+import { AutoComplete } from "@digigov/ui/form/AutoComplete/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+import { Base } from "@digigov/ui/utils/Base/index.js";
+const AutoCompleteInput_AutoCompleteInput = ({ name, type, extra: { options }, onChange, value, ...props })=>{
+    const suggest = useCallback(function(query, syncResults) {
+        syncResults(query ? options.filter(function(option) {
+            return -1 !== `${option.value} ${option.label?.primary || ''} ${option.label?.secondary || ''}`.toLowerCase().indexOf(query.toLowerCase());
+        }) : options);
+    }, [
+        options
+    ]);
+    return /*#__PURE__*/ react.createElement(AutoComplete, {
+        multiple: 'choice:multiple' === type,
+        source: suggest,
+        onConfirm: (value)=>{
+            if (Array.isArray(value)) {
+                const selectedValues = value.map((item)=>item.value);
+                selectedValues.length > 0 ? onChange(selectedValues) : onChange(void 0);
+            } else onChange(value.value);
+        },
+        templates: {
+            suggestion ({ label, value }) {
+                return /*#__PURE__*/ react.createElement(Base, {
+                    as: "div"
+                }, label && label.primary && label.primary || value, label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, label.secondary));
+            },
+            inputValue: (option)=>{
+                if (!option) return '';
+                return option.label.primary || option.value;
+            }
         },
-        inputValue: (option) => {
-          if (!option) {
-            return "";
-          }
-          return option.label.primary || option.value;
-        }
-      },
-      ...{
         ...props,
         reset: void 0,
         required: void 0,
-        Field: void 0
-      },
-      name,
-      id: `${name}-id`,
-      defaultValue: value
-    }
-  );
-};
-var AutoCompleteInput_default = AutoCompleteInput;
-export {
-  AutoCompleteInput,
-  AutoCompleteInput_default as default
+        Field: void 0,
+        name: name,
+        id: `${name}-id`,
+        defaultValue: value
+    });
 };
-//# sourceMappingURL=index.js.map
+const AutoCompleteInput = AutoCompleteInput_AutoCompleteInput;
+export { AutoCompleteInput_AutoCompleteInput as AutoCompleteInput, AutoCompleteInput as default };

package/inputs/Checkboxes/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ControlledFieldProps } from '@digigov/form/Field/types';
-import { FieldOptionProps } from '@digigov/form/inputs/Label';
+import type { UseFormReturn } from 'react-hook-form';
+import type { ControlledFieldProps } from '../../Field/types.js';
+import type { FieldOptionProps } from '../Label/index.js';
 export interface CheckboxesProps extends Omit<ControlledFieldProps, 'extra' | 'value'> {
     value?: string[];
     extra: {
@@ -8,6 +9,7 @@ export interface CheckboxesProps extends Omit<ControlledFieldProps, 'extra' | 'v
         options: FieldOptionProps[];
     };
     fieldComponent: React.FC<Omit<ControlledFieldProps, 'value' | 'onChange'>>;
+    resetField: UseFormReturn['resetField'];
 }
-export declare const Checkboxes: React.FC<CheckboxesProps>;
+export declare const Checkboxes: React.ForwardRefExoticComponent<CheckboxesProps & React.RefAttributes<HTMLInputElement>>;
 export default Checkboxes;

package/inputs/Checkboxes/index.js

@@ -1,78 +1,50 @@
-import React, { useState } from "react";
-import {
-  Checkbox,
-  CheckboxItem,
-  CheckboxConditional
-} from "@digigov/ui/form/Checkbox";
-import { useTranslation } from "@digigov/ui/i18n";
-import { Hint } from "@digigov/ui/typography/Hint";
-const Checkboxes = ({
-  name,
-  onChange,
-  value,
-  extra: { options, className },
-  disabled,
-  Field,
-  ...props
-}) => {
-  if (!value) value = [];
-  const handleChange = (optionValue, idx, show) => (evt) => {
-    let newValue;
-    if (evt.currentTarget.checked) {
-      newValue = value.concat([optionValue]);
-    } else {
-      newValue = value.filter((val) => val !== optionValue);
-    }
-    if (show && show.length > 0) {
-      setChecked(
-        (items) => items.map((item, index) => index === idx ? !item : item)
-      );
-    }
-    if (newValue.length === 0) newValue = void 0;
-    onChange(newValue);
-  };
-  const { t } = useTranslation();
-  const [checked, setChecked] = useState(
-    Array(options.length).fill(false)
-  );
-  return /* @__PURE__ */ React.createElement(Checkbox, { className }, options.map(
-    ({
-      label,
-      value: v,
-      show,
-      disabled: optionDisabled,
-      selected,
-      ...option
-    }, index) => /* @__PURE__ */ React.createElement(React.Fragment, { key: index }, /* @__PURE__ */ React.createElement(
-      CheckboxItem,
-      {
-        key: `${name}.${index}`,
-        name: `${name}.${v}`,
-        id: `${name}.${v}`,
-        value: v,
-        disabled: disabled || optionDisabled,
-        checked: value?.includes(v),
-        onChange: handleChange(v, index, show),
-        ...option,
-        ...{
-          ...props,
-          reset: void 0,
-          defaultValue: void 0,
-          onBlur: void 0,
-          required: void 0,
-          Field: void 0,
-          "aria-describedby": void 0,
-          type: "checkbox"
-        }
-      },
-      label && label.primary && t(label.primary) || value,
-      label && label.secondary && /* @__PURE__ */ React.createElement(Hint, null, t(label.secondary))
-    ), !!checked[index] && show && Field && /* @__PURE__ */ React.createElement(CheckboxConditional, null, show.map((fieldName) => /* @__PURE__ */ React.createElement(Field, { name: fieldName, key: fieldName }))), selected && selected())
-  ));
-};
-var Checkboxes_default = Checkboxes;
-export {
-  Checkboxes,
-  Checkboxes_default as default
-};
-//# sourceMappingURL=index.js.map
+import react, { useState } from "react";
+import { omit } from "../../utils.js";
+import { Checkbox, CheckboxConditional, CheckboxItem } from "@digigov/ui/form/Checkbox/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { Hint } from "@digigov/ui/typography/Hint/index.js";
+const Checkboxes = /*#__PURE__*/ react.forwardRef(({ name, onChange, value, extra: { options, className }, disabled, Field, ...props }, ref)=>{
+    if (!value) value = [];
+    const handleChange = (optionValue, idx, show)=>(evt)=>{
+            let newValue = [];
+            newValue = evt.currentTarget.checked ? value.concat([
+                optionValue
+            ]) : value.filter((val)=>val !== optionValue);
+            if (show && show.length > 0) setChecked((items)=>items.map((item, index)=>index === idx ? !item : item));
+            if (0 === newValue.length) newValue = void 0;
+            onChange(newValue);
+        };
+    const { t } = useTranslation();
+    const [checked, setChecked] = useState(Array(options.length).fill(false));
+    return /*#__PURE__*/ react.createElement(Checkbox, {
+        className: className
+    }, options.map(({ label, value: v, show, disabled: optionDisabled, selected, ...option }, index)=>/*#__PURE__*/ react.createElement(react.Fragment, {
+            key: index
+        }, /*#__PURE__*/ react.createElement(CheckboxItem, {
+            ref: 0 === index ? ref : void 0,
+            key: `${name}.${index}`,
+            name: `${name}.${v}`,
+            id: `${name}.${v}`,
+            value: v,
+            disabled: disabled || optionDisabled,
+            checked: value?.includes(v),
+            onChange: handleChange(v, index, show),
+            ...option,
+            ...omit(props, [
+                'resetField'
+            ]),
+            reset: void 0,
+            defaultValue: void 0,
+            error: void 0,
+            onBlur: void 0,
+            required: void 0,
+            'aria-describedby': void 0,
+            type: 'checkbox'
+        }, label && label.primary && t(label.primary) || value, label && label.secondary && /*#__PURE__*/ react.createElement(Hint, null, t(label.secondary))), !!checked[index] && show && Field && /*#__PURE__*/ react.createElement(CheckboxConditional, null, show.map((fieldName)=>/*#__PURE__*/ react.createElement(Field, {
+                name: fieldName,
+                key: fieldName
+            }))), selected && selected())));
+});
+Checkboxes.displayName = 'Checkboxes';
+const inputs_Checkboxes = Checkboxes;
+export { Checkboxes, inputs_Checkboxes as default };

package/inputs/DateInput/index.d.ts

@@ -1,13 +1,10 @@
 import React from 'react';
-import { UncontrolledFieldProps } from '@digigov/form/Field/types';
+import type { UncontrolledFieldProps } from '../../Field/types.js';
 export interface DateInputProps extends Omit<UncontrolledFieldProps, 'extra'> {
     extra?: {
         max?: string;
         min?: string;
     };
 }
-export declare const DateInput: ({ name, ...props }: {
-    [x: string]: any;
-    name: any;
-}) => React.JSX.Element;
+export declare const DateInput: React.ForwardRefExoticComponent<Omit<Record<string, any>, "ref"> & React.RefAttributes<HTMLInputElement>>;
 export default DateInput;