@digigov/form 2.0.0-8de46296 → 2.0.0-96651090

package/Questions/Questions.js

@@ -0,0 +1,48 @@
+import react, { useEffect, useState } from "react";
+import { getNextStep } from "./getNextStep.js";
+import { QuestionsContext } from "./QuestionsContext.js";
+const isBrowser = 'undefined' != typeof window;
+const Questions = ({ name, steps, initialData = {}, onChange, onSubmit, onActiveStep, forceStepName, localDraft = false, children })=>{
+    const [currentStep, setCurrentStep] = useState({
+        name: ''
+    });
+    useEffect(()=>{
+        if (!forceStepName) setCurrentStep(steps[0]);
+    }, [
+        forceStepName,
+        steps
+    ]);
+    useEffect(()=>{
+        if (forceStepName !== currentStep.name) {
+            const forceStep = steps.find(({ name })=>name === forceStepName);
+            if (forceStep) setCurrentStep(forceStep);
+        }
+    }, [
+        forceStepName
+    ]);
+    const localData = isBrowser && localDraft && window.localStorage.getItem(`questions-${name}`);
+    const [data, setData] = useState(localData && JSON.parse(localData) || initialData);
+    const submitStep = (stepName, stepData)=>{
+        data[stepName] = stepData;
+        if (localDraft) {
+            if (isBrowser) window.localStorage.setItem(`questions-${name}`, JSON.stringify(data));
+        }
+        if (onChange) onChange(data);
+        setData(data);
+        const nextStep = getNextStep(currentStep, steps, data);
+        if (nextStep) {
+            if (onActiveStep) onActiveStep(nextStep);
+            setCurrentStep(nextStep);
+        } else onSubmit(data);
+    };
+    return /*#__PURE__*/ react.createElement(QuestionsContext.Provider, {
+        value: {
+            steps,
+            currentStep,
+            submitStep,
+            data,
+            onActiveStep
+        }
+    }, children);
+};
+export { Questions };

package/Questions/QuestionsContext.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
-import { QuestionsContextInterface } from '@digigov/form/Questions/types';
+import type { QuestionsContextInterface } from './types.js';
 export declare const QuestionsContext: import("react").Context<QuestionsContextInterface>;

package/Questions/QuestionsContext.js

@@ -0,0 +1,10 @@
+import { createContext } from "react";
+const defaultStep = {
+    name: ''
+};
+const QuestionsContext = /*#__PURE__*/ createContext({
+    currentStep: defaultStep,
+    steps: [],
+    submitStep: ()=>null
+});
+export { QuestionsContext };

package/Questions/Step/ReviewStep.js

@@ -0,0 +1,32 @@
+import react, { useContext } from "react";
+import { QuestionsContext } from "../QuestionsContext.js";
+import { StepContext } from "./StepContext.js";
+import { StepTitleBase } from "./StepTitle.js";
+import { SummaryList, SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from "@digigov/ui/content/SummaryList/index.js";
+import { Button } from "@digigov/ui/form/Button/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import Heading from "@digigov/ui/typography/Heading/index.js";
+const ReviewStep_ReviewStep = ()=>{
+    const { t } = useTranslation();
+    const { submitStep, title } = useContext(StepContext);
+    const { data, steps, onActiveStep } = useContext(QuestionsContext);
+    const filledSteps = steps.filter((step)=>!!data[step.name]);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(StepTitleBase, {
+        title: title || 'Review answers'
+    }), filledSteps.map((step)=>/*#__PURE__*/ react.createElement("div", {
+            key: step.name
+        }, /*#__PURE__*/ react.createElement(Heading, {
+            size: 'md'
+        }, step.title), /*#__PURE__*/ react.createElement(SummaryList, null, Object.keys(data[step.name]).map((dataKey)=>/*#__PURE__*/ react.createElement(SummaryListItem, {
+                key: dataKey
+            }, /*#__PURE__*/ react.createElement(SummaryListItemKey, null, step.fields.find(({ key })=>key === dataKey).label.primary), /*#__PURE__*/ react.createElement(SummaryListItemValue, null, data[step.name][dataKey]), /*#__PURE__*/ react.createElement(SummaryListItemAction, null, /*#__PURE__*/ react.createElement("a", {
+                style: {
+                    cursor: 'pointer'
+                },
+                onClick: ()=>onActiveStep && onActiveStep(step)
+            }, t('button.edit')))))))), /*#__PURE__*/ react.createElement(Button, {
+        onClick: ()=>submitStep && submitStep()
+    }, t('button.submit')));
+};
+const ReviewStep = ReviewStep_ReviewStep;
+export { ReviewStep_ReviewStep as ReviewStep, ReviewStep as default };

package/Questions/Step/Step.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { StepInterface } from './types.js';
 /**
  * The Step component accepts Step data as props
  * uses composable components to provide a wholesome UX

package/Questions/Step/Step.js

@@ -0,0 +1,39 @@
+import react, { useContext, useState } from "react";
+import { QuestionsContext } from "../QuestionsContext.js";
+import { StepArrayReview } from "./StepArrayReview.js";
+import { StepContext } from "./StepContext.js";
+const Step_Step = (props)=>{
+    const { currentStep, submitStep, data } = useContext(QuestionsContext);
+    const [stepData, setStepData] = useState([]);
+    const [reviewActive, setReviewActive] = useState(false);
+    const handleArraySubmit = (_name, data)=>{
+        setStepData([
+            ...stepData,
+            data
+        ]);
+        setReviewActive(true);
+    };
+    const handleArrayDeleteItem = (deleteIndex)=>{
+        const nextStepData = stepData.filter((_item, stepIndex)=>stepIndex !== deleteIndex);
+        setStepData(nextStepData);
+        if (0 === nextStepData.length) setReviewActive(false);
+    };
+    const handleArrayReviewStep = (data)=>{
+        if ('yes' === data.addMore) setReviewActive(false);
+        else if ('no' === data.addMore) submitStep(currentStep.name, stepData);
+    };
+    if (!currentStep || props.name !== currentStep.name) return null;
+    return /*#__PURE__*/ react.createElement(StepContext.Provider, {
+        value: {
+            ...currentStep,
+            submitStep: 'array' === currentStep.type ? handleArraySubmit : submitStep,
+            initial: data[props.name]
+        }
+    }, reviewActive ? /*#__PURE__*/ react.createElement(StepArrayReview, {
+        array: stepData,
+        handleSubmit: handleArrayReviewStep,
+        handleDelete: handleArrayDeleteItem
+    }) : props.children);
+};
+const Step = Step_Step;
+export { Step_Step as Step, Step as default };

package/Questions/Step/StepArrayReview.d.ts

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

package/Questions/Step/StepArrayReview.js

@@ -0,0 +1,35 @@
+import react, { useContext } from "react";
+import { Field } from "../../Field/index.js";
+import { Fieldset } from "../../Fieldset/index.js";
+import FormBuilder from "../../FormBuilder/index.js";
+import Label from "../../inputs/Label/index.js";
+import { QuestionsContext } from "../QuestionsContext.js";
+import { getAddMoreFields } from "./getAddMoreFields.js";
+import PageTitleContainer, { PageTitleHeading } from "@digigov/ui/app/PageTitleContainer/index.js";
+import { SummaryList, SummaryListItem, SummaryListItemAction, SummaryListItemKey, SummaryListItemValue } from "@digigov/ui/content/SummaryList/index.js";
+import Button from "@digigov/ui/form/Button/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+const StepArrayReview_StepArrayReview = (props)=>{
+    const { t } = useTranslation();
+    const { currentStep } = useContext(QuestionsContext);
+    const fields = getAddMoreFields(currentStep);
+    const primaryField = currentStep.fields.find((field)=>field.key === currentStep.review?.primaryFieldKey) || {};
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(PageTitleContainer, null, /*#__PURE__*/ react.createElement(PageTitleHeading, null, currentStep.review?.title && t(currentStep.review?.title))), /*#__PURE__*/ react.createElement(SummaryList, null, props.array.map((item, idx)=>/*#__PURE__*/ react.createElement(SummaryListItem, {
+            key: idx
+        }, /*#__PURE__*/ react.createElement(SummaryListItemKey, null, t(primaryField.label.primary)), /*#__PURE__*/ react.createElement(SummaryListItemValue, null, item[primaryField.key]), /*#__PURE__*/ react.createElement(SummaryListItemAction, {
+            onClick: ()=>props.handleDelete(idx)
+        }, t('button.delete'))))), /*#__PURE__*/ react.createElement(FormBuilder, {
+        key: "addmore",
+        fields: fields,
+        onSubmit: props.handleSubmit
+    }, /*#__PURE__*/ react.createElement(Fieldset, null, /*#__PURE__*/ react.createElement(Label, {
+        label: currentStep.review?.addMore.title
+    }), fields.map((field)=>/*#__PURE__*/ react.createElement(Field, {
+            key: field.key,
+            name: field.key
+        }))), /*#__PURE__*/ react.createElement(Button, {
+        type: "submit"
+    }, t('button.submit'))));
+};
+const StepArrayReview = StepArrayReview_StepArrayReview;
+export { StepArrayReview_StepArrayReview as StepArrayReview, StepArrayReview as default };

package/Questions/Step/StepContext.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { StepInterface } from '@digigov/form/Questions/Step/types';
+import type { StepInterface } from './types.js';
 export declare const StepContext: import("react").Context<StepInterface>;
 export default StepContext;

package/Questions/Step/StepContext.js

@@ -0,0 +1,28 @@
+import { createContext } from "react";
+const StepContext = /*#__PURE__*/ createContext({
+    name: '',
+    fields: [],
+    initial: [],
+    errorLabels: [],
+    submitStep: '',
+    review: {
+        title: '',
+        primaryFieldKey: '',
+        addMore: {
+            title: {
+                primary: ''
+            },
+            answers: {
+                positive: {
+                    primary: 'Yes'
+                },
+                negative: {
+                    primary: 'No'
+                }
+            }
+        }
+    },
+    type: 'object'
+});
+const Step_StepContext = StepContext;
+export { StepContext, Step_StepContext as default };

package/Questions/Step/StepDescription.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ParagraphProps } from '@digigov/ui/typography/Paragraph';
+import type { ParagraphProps } from '@digigov/ui/typography/Paragraph';
 export interface StepDescriptionInterface extends ParagraphProps {
     description?: string;
 }

package/Questions/Step/StepDescription.js

@@ -0,0 +1,18 @@
+import react, { useContext } from "react";
+import { StepContext } from "./StepContext.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import Paragraph from "@digigov/ui/typography/Paragraph/index.js";
+const StepDescriptionBase = ({ children, description, ...props })=>{
+    const { t } = useTranslation();
+    return /*#__PURE__*/ react.createElement(Paragraph, props, children || description && t(description));
+};
+const StepDescription = (props)=>{
+    const { description: descriptionContext } = useContext(StepContext);
+    const description = props.description || descriptionContext;
+    return /*#__PURE__*/ react.createElement(StepDescriptionBase, {
+        description: description,
+        ...props
+    }, props.children);
+};
+const Step_StepDescription = StepDescription;
+export { StepDescription, StepDescriptionBase, Step_StepDescription as default };

package/Questions/Step/StepForm.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { FieldProps } from '@digigov/form/Field/types';
-import { FormBuilderProps } from '@digigov/form/types';
+import type { FieldProps } from '../../Field/types.js';
+import type { FormBuilderProps } from '../../types.js';
 export interface StepFormProps {
     submitButton: boolean;
     children: React.ReactNode;

package/Questions/Step/StepForm.js

@@ -0,0 +1,29 @@
+import react, { useContext } from "react";
+import Field from "../../Field/index.js";
+import Fieldset from "../../Fieldset/index.js";
+import FormBuilder from "../../FormBuilder/index.js";
+import { StepContext } from "./StepContext.js";
+import Button from "@digigov/ui/form/Button/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+const StepForm_StepForm = ({ children, submitButton, ...props })=>{
+    const { t } = useTranslation();
+    const { name, submitStep, ...rest } = useContext(StepContext);
+    const fields = rest.fields.length ? rest.fields : props.fields;
+    const initial = rest.initial ? rest.initial : props.initial;
+    return /*#__PURE__*/ react.createElement(FormBuilder, {
+        initial: initial,
+        fields: fields,
+        onSubmit: (data)=>{
+            submitStep(name, data);
+        }
+    }, children ? /*#__PURE__*/ react.createElement(react.Fragment, null, children, submitButton && /*#__PURE__*/ react.createElement(Button, {
+        type: "submit"
+    }, t('button.continue'))) : /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Fieldset, null, fields.map((field)=>/*#__PURE__*/ react.createElement(Field, {
+            key: field.key,
+            name: field.key
+        }))), /*#__PURE__*/ react.createElement(Button, {
+        type: "submit"
+    }, t('button.continue'))));
+};
+const StepForm = StepForm_StepForm;
+export { StepForm_StepForm as StepForm, StepForm as default };

package/Questions/Step/StepQuote.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import { ParagraphProps } from '@digigov/ui/typography/Paragraph';
+import type { ParagraphProps } from '@digigov/ui/typography/Paragraph';
 export declare const StepQuote: React.FC<ParagraphProps>;
 export default StepQuote;

package/Questions/Step/StepQuote.js

@@ -0,0 +1,5 @@
+import react from "react";
+import Paragraph from "@digigov/ui/typography/Paragraph/index.js";
+const StepQuote = ({ children, ...props })=>/*#__PURE__*/ react.createElement(Paragraph, props, children);
+const Step_StepQuote = StepQuote;
+export { StepQuote, Step_StepQuote as default };

package/Questions/Step/StepTitle.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
-import { HeadingProps } from '@digigov/react-core/Heading';
+import type { HeadingProps } from '@digigov/ui/typography/Heading';
 export interface StepTitleInterface {
     title?: string;
     backButton?: string;
     caption?: string;
     step?: string;
+    children?: React.ReactNode;
 }
 export declare const StepTitleHeading: React.FC<HeadingProps>;
 export declare const StepTitleBase: React.FC<StepTitleInterface>;

package/Questions/Step/StepTitle.js

@@ -0,0 +1,25 @@
+import react, { useContext } from "react";
+import { StepContext } from "./StepContext.js";
+import { PageTitleCaption, PageTitleContainer } from "@digigov/ui/app/PageTitleContainer/index.js";
+import { useTranslation } from "@digigov/ui/i18n/index.js";
+import { BackLink } from "@digigov/ui/navigation/BackLink/index.js";
+import { Heading } from "@digigov/ui/typography/Heading/index.js";
+import { HeadingCaption } from "@digigov/ui/typography/HeadingCaption/index.js";
+const StepTitleHeading = (props)=>/*#__PURE__*/ react.createElement(Heading, null, props.children);
+const StepTitleBase = ({ caption, step, title, backButton, children })=>{
+    const { t } = useTranslation();
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(BackLink, null, backButton || t('button.back')), /*#__PURE__*/ react.createElement(PageTitleContainer, null, children || /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(HeadingCaption, {
+        size: "xl"
+    }, caption && t(caption)), step && /*#__PURE__*/ react.createElement(PageTitleCaption, null, step), /*#__PURE__*/ react.createElement(StepTitleHeading, null, title && t(title)))));
+};
+const StepTitle_StepTitle = (props)=>{
+    const { caption, title, step, backButton } = useContext(StepContext);
+    return /*#__PURE__*/ react.createElement(StepTitleBase, {
+        backButton: backButton,
+        caption: caption,
+        step: step,
+        title: title
+    }, props.children);
+};
+const StepTitle = StepTitle_StepTitle;
+export { StepTitle_StepTitle as StepTitle, StepTitleBase, StepTitleHeading, StepTitle as default };

package/Questions/Step/getAddMoreFields.d.ts

@@ -1,3 +1,3 @@
-import { StepInterface } from '@digigov/form/Questions/Step/types';
-import { FieldSpec } from '@digigov/form/types';
+import type { StepInterface } from './types.js';
+import type { FieldSpec } from '../../types.js';
 export declare const getAddMoreFields: (currentStep: StepInterface) => FieldSpec[];

package/Questions/Step/getAddMoreFields.js

@@ -0,0 +1,24 @@
+const getAddMoreFields = (currentStep)=>[
+        {
+            key: 'addMore',
+            type: 'choice:single',
+            required: true,
+            extra: {
+                options: [
+                    {
+                        label: currentStep.review?.addMore.answers.positive || {
+                            primary: 'Yes'
+                        },
+                        value: 'yes'
+                    },
+                    {
+                        label: currentStep.review?.addMore.answers.negative || {
+                            primary: 'No'
+                        },
+                        value: 'no'
+                    }
+                ]
+            }
+        }
+    ];
+export { getAddMoreFields };

package/Questions/Step/index.d.ts

@@ -1,13 +1,12 @@
-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/';
-export * from '@digigov/form/Questions/Step/types';
-import Step from '@digigov/form/Questions/Step/Step';
+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';
+import Step from './Step.js';
 export default Step;

package/Questions/Step/index.js

@@ -1,13 +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/';
-export * from '@digigov/form/Questions/Step/types';
-import Step from '@digigov/form/Questions/Step/Step';
-export default Step;
+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 {
@@ -24,6 +24,7 @@ export interface StepInterface {
     submitStep?: any;
     review?: StepReviewInterface;
     type?: StepType;
+    children?: React.ReactNode;
 }
 export interface StepArrayReviewInterface {
     array: Record<string, any>[];

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,3 +1,4 @@
-import { Questions } from '@digigov/form/Questions/Questions';
-export default Questions;
-export * from '@digigov/form/Questions/Step';
+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[];
@@ -9,6 +9,7 @@ export interface QuestionsInterface {
     initialData?: any;
     localDraft?: boolean;
     errorLabels?: Record<string, string>;
+    children?: React.ReactNode;
 }
 export interface QuestionsContextInterface {
     currentStep: 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>;