@arquimedes.co/eureka-forms 3.0.59 → 3.0.60

package/dist/App/App.module.css

@@ -1,34 +1,34 @@
-.curtain {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    max-width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: white;
-    z-index: 5000;
-}
-
-#widget:eureka {
-    min-height: inherit;
-}
-.container {
-    width: 100%;
-    position: relative;
-}
-
-.widgetContainer {
-    position: relative;
-    max-width: 100%;
-    height: 100%;
-    min-height: inherit;
-}
-
-.container *,
-.container *::after,
-.container *::before {
-    -webkit-box-sizing: content-box;
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-}
+.curtain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    max-width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    z-index: 5000;
+}
+
+#widget:eureka {
+    min-height: inherit;
+}
+.container {
+    width: 100%;
+    position: relative;
+}
+
+.widgetContainer {
+    position: relative;
+    max-width: 100%;
+    height: 100%;
+    min-height: inherit;
+}
+
+.container *,
+.container *::after,
+.container *::before {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}

package/dist/App/AppFunctions.d.ts

@@ -20,4 +20,4 @@ export declare const mapOriginalValue: (orgInfo: {
     idOrganization?: string;
     countryCode?: CountryCode;
 }, step: FormStep, value: any, values: ValuesStore, form?: Readonly<Form>, path?: string) => Promise<any>;
-export declare const calcInitialSections: (form: Form) => Pick<SiteState, "previousSections" | "idCurrentSection" | "nextSections">;
+export declare const calcInitialSections: (form: Form) => Pick<SiteState, 'previousSections' | 'idCurrentSection' | 'nextSections'>;

package/dist/App/AppHooks.d.ts

@@ -1,10 +1,10 @@
 import { Form, Organization } from '../@Types';
 import { AppProps } from './App';
 import { Branding } from '../@Types/Branding';
-export declare const useSetupApp: (isEmbedded: boolean, props: Omit<AppProps, "isWidget">) => {
+export declare const useSetupApp: (isEmbedded: boolean, props: Omit<AppProps, 'isWidget'>) => {
     form: Form | undefined | null;
     organization: Organization | undefined | null;
     branding: Branding | undefined;
     reload: () => void;
 };
-export declare const useLogRocket: (organization: Organization | null | undefined, form: Form | null | undefined, { apiKey, internal, postview, preview }: Pick<AppProps, "apiKey" | "internal" | "postview" | "preview">) => void;
+export declare const useLogRocket: (organization: Organization | null | undefined, form: Form | null | undefined, { apiKey, internal, postview, preview }: Pick<AppProps, 'apiKey' | 'internal' | 'postview' | 'preview'>) => void;

package/dist/Form/ConfirmationDialog/ConfirmationDialog.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './ConfirmationDialog.module.css';
 import { Dialog } from '@mui/material';
 import { useAppSelector } from '../../hooks';

package/dist/Form/Form.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import Navbar from '../Shared/Navbar/Navbar';
 import styles from './Form.module.css';
@@ -6,7 +6,7 @@ import InternalFormStyle from '../constants/InternalFormStyle';
 import ColumnForm from './FormTypes/ColumnForm/ColumnForm';
 import StepperForm from './FormTypes/StepperForm/StepperForm';
 import { FormStyleTypes, FormTypes } from '../constants/FormStepTypes';
-import { calcValue } from './FormFunctions';
+import { calcValue, resolveCaptchaToken } from './FormFunctions';
 import { FormProvider, useForm } from 'react-hook-form';
 import widgetInstance from '../Utils/AxiosWidget';
 import axiosInstance from '../Utils/AxiosAPI';
@@ -38,15 +38,16 @@ function FormComponent({ form, apiKey, reload, isWidget, branding, setSubmit, sc
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [idFocusStep]);
     const onSubmit = useCallback(async (values) => {
-        let token = null;
-        if (form.hasCaptcha && !internal && !customSubmit) {
-            token = recaptchaRef.current?.getValue();
-            token ?? (token = await recaptchaRef?.current.executeAsync());
-        }
         const ApiKey = internal ? form.apiKey : apiKey;
         if (!ApiKey && !customSubmit && !customSubmitBtns)
             return;
         try {
+            // Resolved inside the try so a captcha that cannot mint a token surfaces through the same
+            // error path as any other submit failure, rather than rejecting out of the handler and
+            // leaving the submitter with no feedback at all.
+            const token = form.hasCaptcha && !internal && !customSubmit
+                ? await resolveCaptchaToken(recaptchaRef.current)
+                : null;
             const state = await dispatch(getAppState({ idForm })).unwrap();
             const newValues = {
                 ...state.site.values.global,

package/dist/Form/FormFunctions.d.ts

@@ -4,6 +4,23 @@ import { CustomStep } from '../FormSteps/CustomStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
 import { MapperElement } from '../@Types/MapperElement';
 import { ValuesStore } from '../States/SiteSlice';
+/** The reCAPTCHA widget surface a submission needs: the response it holds, and the challenge that mints one. */
+export interface CaptchaWidget {
+    getValue(): string | null;
+    executeAsync(): Promise<string | null>;
+}
+/**
+ * Resolve the reCAPTCHA response to send with a submission, running the invisible challenge when the widget
+ * is not holding one yet.
+ *
+ * An unsolved invisible widget answers `getValue()` with an EMPTY STRING rather than null, so emptiness —
+ * not nullishness — is what decides whether the challenge still has to run. A submission that skips the
+ * challenge carries no token, and the API rejects every captcha-protected public form with a 403.
+ *
+ * Yields null when no widget is mounted, leaving the caller to submit tokenless rather than throwing out of
+ * the submit handler.
+ */
+export declare function resolveCaptchaToken(captcha: CaptchaWidget | null | undefined): Promise<string | null>;
 /**
  * Function that cals the value of a step to output on submit
  */

package/dist/Form/FormFunctions.js

@@ -3,6 +3,28 @@ import FormStepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes'
 import { calcStepDeps } from '../FormSteps/StepHooks';
 import { calcRecursiveData } from '../Utils/FormStepFunctions';
 import { isValidPhoneNumber } from '../Utils/PhoneFunctions';
+/**
+ * Resolve the reCAPTCHA response to send with a submission, running the invisible challenge when the widget
+ * is not holding one yet.
+ *
+ * An unsolved invisible widget answers `getValue()` with an EMPTY STRING rather than null, so emptiness —
+ * not nullishness — is what decides whether the challenge still has to run. A submission that skips the
+ * challenge carries no token, and the API rejects every captcha-protected public form with a 403.
+ *
+ * Yields null when no widget is mounted, leaving the caller to submit tokenless rather than throwing out of
+ * the submit handler.
+ */
+export async function resolveCaptchaToken(captcha) {
+    if (!captcha)
+        return null;
+    const held = captcha.getValue();
+    if (held)
+        return held;
+    const solved = await captcha.executeAsync();
+    if (solved)
+        return solved;
+    return null;
+}
 /**
  * Function that cals the value of a step to output on submit
  */

package/dist/Form/FormFunctions.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/require-await */
 import { ContentState, EditorState } from 'draft-js';
 import FormStepTypes, { EntityValueDataTypes } from '../constants/FormStepTypes';
-import { calcDependencies, calcValue } from './FormFunctions';
+import { calcDependencies, calcValue, resolveCaptchaToken } from './FormFunctions';
 import { stringToDraft } from '../Utils/DraftFunctions';
 import { describe, expect, test } from 'vitest';
 describe('FormFunctions', function () {
@@ -455,4 +455,31 @@ describe('FormFunctions', function () {
             expect(dependencyStore.idStep.dependents.length).toBe(1);
         });
     });
+    describe('resolveCaptchaToken', function () {
+        test('Uses the token the widget already holds without re-running the challenge', async () => {
+            let executed = false;
+            const token = await resolveCaptchaToken({
+                getValue: () => 'already-solved',
+                executeAsync: async () => {
+                    executed = true;
+                    return 'freshly-solved';
+                },
+            });
+            expect(token).toBe('already-solved');
+            expect(executed).toBe(false);
+        });
+        test('Runs the challenge when the invisible widget reports an empty response', async () => {
+            // An unsolved invisible captcha answers `getValue()` with '' — not null — so emptiness is what
+            // must decide whether the challenge still has to run. Treating only nullish as unsolved leaves
+            // the submission tokenless and the API answers 403.
+            const token = await resolveCaptchaToken({
+                getValue: () => '',
+                executeAsync: async () => 'freshly-solved',
+            });
+            expect(token).toBe('freshly-solved');
+        });
+        test('Yields no token when the widget is not mounted', async () => {
+            expect(await resolveCaptchaToken(null)).toBeNull();
+        });
+    });
 });

package/dist/Form/FormTypes/ColumnForm/ColumnForm.module.css

@@ -1,19 +1,19 @@
-.container {
-    width: fit-content;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 100%;
-    position: relative;
-}
-.curtain {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: 2;
-}
-.submitBtnContainer {
-    margin-top: 10px;
-    width: 200px;
-    max-width: calc(100% - 40px);
-}
+.container {
+    width: fit-content;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    max-width: 100%;
+    position: relative;
+}
+.curtain {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+.submitBtnContainer {
+    margin-top: 10px;
+    width: 200px;
+    max-width: calc(100% - 40px);
+}

package/dist/Form/Section/MaterialSection/MaterialSection.js

@@ -14,15 +14,11 @@ function MaterialSection({ idSection }) {
     if (!section)
         return _jsx(_Fragment, {});
     return (_jsx("div", { className: styles.container, style: {
-            width: (form.size.blockSize + form.size.spacingSize) *
-                form.size.blockNum,
-            justifyContent: sendLabel !== undefined &&
-                currentBreakPoint < form.size.blockNum
-                ? 'center'
-                : 'normal',
+            width: (form.size.blockSize + form.size.spacingSize) * form.size.blockNum,
+            justifyContent: sendLabel !== undefined && currentBreakPoint < form.size.blockNum ? 'center' : 'normal',
         }, children: section.steps?.map((idStep) => {
             const step = form.steps[idStep];
-            return (_jsx(StepComponent, { editable: editable, step: step }, idStep));
+            return _jsx(StepComponent, { editable: editable, step: step }, idStep);
         }) }));
 }
 export default MaterialSection;

package/dist/Form/Section/MaterialSection/MaterialSection.module.css

@@ -1,6 +1,6 @@
-.container {
-    display: flex;
-    flex-flow: row wrap;
-    height: fit-content;
-    max-width: 100%;
-}
+.container {
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+}

package/dist/Form/Section/Section.js

@@ -13,6 +13,6 @@ function SectionComponent(props) {
             }
         }
     };
-    return (_jsx(SectionContext.Provider, { value: props.idSection, children: renderSectionType() }));
+    return _jsx(SectionContext.Provider, { value: props.idSection, children: renderSectionType() });
 }
 export default SectionComponent;

package/dist/Form/Terms/Terms.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useContext, useEffect, useState } from 'react';
 import styles from './Terms.module.css';
 import TermComponent from './Term/Term';

package/dist/FormSteps/ApiSelectorStep/MaterialApiSelectorStep/MaterialApiSelectorStep.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo } from 'react';
 import FormStepTypes, { ApiSelectorOptionTypes, ApiSelectorParamTypes } from '../../../constants/FormStepTypes';
 import StepComponent from '../../Step';

package/dist/FormSteps/CheckBoxStep/CheckBoxStep.mobileLabel.test.js

@@ -63,9 +63,7 @@ function Harness({ currentBreakPoint }) {
 }
 function getLabelDiv() {
     // the leaf div holding only the label text (the wrapping column also matches by textContent)
-    return screen.getByText((_, element) => element?.tagName === 'DIV' &&
-        element.children.length === 0 &&
-        element.textContent === `${LONG_LABEL}:`);
+    return screen.getByText((_, element) => element?.tagName === 'DIV' && element.children.length === 0 && element.textContent === `${LONG_LABEL}:`);
 }
 /** Makes every element report a 2-line-clamped overflow (jsdom has no layout). */
 function mockLabelOverflow() {

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.module.css

@@ -1,63 +1,63 @@
-.container {
-    display: flex;
-    flex-direction: column;
-    max-width: 100%;
-}
-.checkboxLbl,
-.overflowLbl {
-    font-size: 18px;
-    margin-right: 10px;
-    margin-left: 10px;
-}
-.overflowLbl {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.labelColumn {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    flex: 1 1 auto;
-    min-width: 0;
-    margin-right: 10px;
-    margin-left: 10px;
-}
-.clampLbl,
-.expandedLbl {
-    font-size: 18px;
-}
-.clampLbl {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-    overflow: hidden;
-}
-.toggleLbl {
-    background: none;
-    border: none;
-    padding: 0;
-    margin-top: 2px;
-    font-size: 13px;
-    font-weight: 700;
-    font-family: inherit;
-    cursor: pointer;
-}
-.labelCheckBoxContainer {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    align-items: center;
-}
-
-.descriptionPar {
-    font-size: 0.75rem;
-    margin-left: 14px;
-    margin-top: 4px;
-    font-weight: 400;
-    line-height: 1.66;
-    max-width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
+.container {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+}
+.checkboxLbl,
+.overflowLbl {
+    font-size: 18px;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+.overflowLbl {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.labelColumn {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+.clampLbl,
+.expandedLbl {
+    font-size: 18px;
+}
+.clampLbl {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+}
+.toggleLbl {
+    background: none;
+    border: none;
+    padding: 0;
+    margin-top: 2px;
+    font-size: 13px;
+    font-weight: 700;
+    font-family: inherit;
+    cursor: pointer;
+}
+.labelCheckBoxContainer {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    align-items: center;
+}
+
+.descriptionPar {
+    font-size: 0.75rem;
+    margin-left: 14px;
+    margin-top: 4px;
+    font-weight: 400;
+    line-height: 1.66;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}

package/dist/FormSteps/CollapsibleStep/MaterialTitleStep/MaterialCollapsibleStep.module.css

@@ -1,68 +1,68 @@
-.container {
-    display: flex;
-    flex-direction: row;
-    width: 900px;
-    max-width: 100%;
-    margin-top: 5px;
-    margin-bottom: 10px;
-}
-
-.collapsibleLabel {
-    margin-left: 10px;
-    font-size: 20px;
-    font-weight: 600;
-    cursor: default;
-    text-align: start;
-    cursor: pointer;
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none; /* Safari */
-    -khtml-user-select: none; /* Konqueror HTML */
-    -moz-user-select: none; /* Old versions of Firefox */
-    -ms-user-select: none; /* Internet Explorer/Edge */
-    -o-user-select: none;
-    user-select: none; /* Non-prefixed version, currently */
-}
-
-.content {
-    width: 100%;
-    overflow: hidden;
-    transition: height ease 0.9s;
-}
-
-.contentContainer {
-    margin-left: auto;
-    margin-right: auto;
-    display: flex;
-    flex-flow: row wrap;
-    height: fit-content;
-    max-width: 100%;
-    width: 100%;
-    overflow-x: hidden;
-    overflow-y: hidden;
-}
-.expand {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-left: 2px;
-}
-.expandIcon {
-    height: 24px;
-    width: 24px;
-    font-size: 24px;
-    cursor: pointer;
-}
-
-.separator {
-    height: 1px;
-    width: calc(100% - 20px);
-    margin-left: 10px;
-    margin-bottom: 10px;
-    border-radius: 20px;
-}
-
-@media print {
-    .content {
-        height: auto !important;
-    }
-}
+.container {
+    display: flex;
+    flex-direction: row;
+    width: 900px;
+    max-width: 100%;
+    margin-top: 5px;
+    margin-bottom: 10px;
+}
+
+.collapsibleLabel {
+    margin-left: 10px;
+    font-size: 20px;
+    font-weight: 600;
+    cursor: default;
+    text-align: start;
+    cursor: pointer;
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    -o-user-select: none;
+    user-select: none; /* Non-prefixed version, currently */
+}
+
+.content {
+    width: 100%;
+    overflow: hidden;
+    transition: height ease 0.9s;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+.expand {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 2px;
+}
+.expandIcon {
+    height: 24px;
+    width: 24px;
+    font-size: 24px;
+    cursor: pointer;
+}
+
+.separator {
+    height: 1px;
+    width: calc(100% - 20px);
+    margin-left: 10px;
+    margin-bottom: 10px;
+    border-radius: 20px;
+}
+
+@media print {
+    .content {
+        height: auto !important;
+    }
+}

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useContext, useMemo, useState } from 'react';
 import FormStepTypes, { EntityValueDataTypes, EntityValueOptionTypes } from '../../../constants/FormStepTypes';
 import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialSmartSelectStep';

package/dist/FormSteps/FileUploadStep/MaterialFileUploadStep/MaterialFileUploadStep.js

@@ -138,9 +138,7 @@ function FileUploadStep({ step, editable }) {
         }
         return '';
     };
-    return (_jsxs("div", { className: styles.container +
-            (error || !!fieldError ? ' Erk-error' : '') +
-            (dragging ? ' ' + styles.dragging : ''), style: {
+    return (_jsxs("div", { className: styles.container + (error || !!fieldError ? ' Erk-error' : '') + (dragging ? ' ' + styles.dragging : ''), style: {
             minHeight: editable === false || postview ? undefined : '100px',
         }, "data-testid": step.id, onDragOver: (e) => {
             if (!editable || postview)

package/dist/FormSteps/MapperStep/MaterialMapperStep/Element/PagedMapperElement/PagedMapperElement.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useCallback, useContext, useMemo } from 'react';
 import styles from './PagedMapperElement.module.css';
 import FormContext from '../../../../../Contexts/FormContext';