@arquimedes.co/eureka-forms 3.0.60-test → 3.0.61

package/dist/App/App.stories.d.ts

@@ -28,3 +28,13 @@ export declare const ParseadoConValores: Story;
 export declare const PreParseado: Story;
 /** Final view (postview): what the user submitted, rendered read-only. */
 export declare const Postview: Story;
+/**
+ * Every checkbox variant in one form: sizes 1–4, required, description, list mode, long
+ * labels, nested `steps` / `uncheckedSteps`, and a checkbox inside a collapsible. Resize the
+ * preview below ~900px to see the collapsed label mode (100% width, 2-line clamp, "ver más").
+ * Inside the collapsible, close/reopen it and then check the checkbox to reproduce the clipped
+ * nested steps.
+ */
+export declare const Checkboxes: Story;
+/** Same checkboxes form in postview, read-only. */
+export declare const CheckboxesPostview: Story;

package/dist/App/App.stories.js

@@ -296,3 +296,192 @@ export const Postview = {
         editable: false,
     },
 };
+// ---------------------------------------------------------------------------------------------
+// Checkboxes: a full form exercising every checkbox variant side by side (sizes, required,
+// description, list mode, long label, nested steps, uncheckedSteps and a checkbox inside a
+// collapsible). Resize the preview to see the collapsed (100% width, 2-line clamp) label mode.
+// ---------------------------------------------------------------------------------------------
+const cbTextInput = (id, label, size = 2) => ({
+    id,
+    type: 'TEXTINPUT',
+    label,
+    description: '',
+    required: false,
+    size,
+    isSubject: false,
+});
+const checkboxesForm = {
+    steps: {
+        'CHECKBOX-size-1': {
+            id: 'CHECKBOX-size-1',
+            type: 'CHECKBOX',
+            label: 'Tamaño 1',
+            description: null,
+            required: false,
+            size: 1,
+        },
+        'CHECKBOX-size-2': {
+            id: 'CHECKBOX-size-2',
+            type: 'CHECKBOX',
+            label: 'Tamaño 2 con descripción',
+            description: 'Texto de ayuda debajo del checkbox.',
+            required: false,
+            size: 2,
+        },
+        'CHECKBOX-size-1-required': {
+            id: 'CHECKBOX-size-1-required',
+            type: 'CHECKBOX',
+            label: 'Obligatorio',
+            description: null,
+            required: true,
+            size: 1,
+        },
+        'CHECKBOX-size-3': {
+            id: 'CHECKBOX-size-3',
+            type: 'CHECKBOX',
+            label: 'Tamaño 3 con un label bastante largo que en escritorio se corta con puntos suspensivos',
+            description: null,
+            required: false,
+            size: 3,
+        },
+        'CHECKBOX-size-1-checked': {
+            id: 'CHECKBOX-size-1-checked',
+            type: 'CHECKBOX',
+            label: 'Marcado',
+            description: null,
+            required: false,
+            size: 1,
+            defaultValue: true,
+        },
+        'CHECKBOX-size-4': {
+            id: 'CHECKBOX-size-4',
+            type: 'CHECKBOX',
+            label: 'Tamaño 4 (ancho completo): confirmo que la información suministrada es veraz, que he leído la ' +
+                'política de tratamiento de datos personales y autorizo el uso de mis datos para los fines ' +
+                'descritos en el presente formulario',
+            description: null,
+            required: true,
+            size: 4,
+        },
+        'CHECKBOX-list': {
+            id: 'CHECKBOX-list',
+            type: 'CHECKBOX',
+            label: 'Modo lista (isList): el checkbox va antes del label y sin dos puntos',
+            description: null,
+            required: false,
+            size: 4,
+            isList: true,
+        },
+        'CHECKBOX-nested': {
+            id: 'CHECKBOX-nested',
+            type: 'CHECKBOX',
+            label: '¿Desea agregar una dirección de envío distinta?',
+            description: 'Al marcarlo aparecen los campos de la dirección.',
+            required: false,
+            size: 4,
+            steps: ['TEXTINPUT-shipping-address', 'TEXTINPUT-shipping-city'],
+        },
+        'TEXTINPUT-shipping-address': cbTextInput('TEXTINPUT-shipping-address', 'Dirección de envío', 2),
+        'TEXTINPUT-shipping-city': cbTextInput('TEXTINPUT-shipping-city', 'Ciudad', 2),
+        'CHECKBOX-unchecked-steps': {
+            id: 'CHECKBOX-unchecked-steps',
+            type: 'CHECKBOX',
+            label: 'Usar los datos de contacto registrados',
+            description: 'Al desmarcarlo aparecen los campos de contacto (uncheckedSteps).',
+            required: false,
+            size: 4,
+            defaultValue: true,
+            uncheckedSteps: ['TEXTINPUT-contact-phone', 'TEXTINPUT-contact-email'],
+        },
+        'TEXTINPUT-contact-phone': cbTextInput('TEXTINPUT-contact-phone', 'Teléfono', 2),
+        'TEXTINPUT-contact-email': cbTextInput('TEXTINPUT-contact-email', 'Correo', 2),
+        'COLLAPSIBLE-checkbox': {
+            id: 'COLLAPSIBLE-checkbox',
+            type: 'COLLAPSIBLE',
+            label: 'Colapsable con checkbox anidado',
+            defaultValue: true,
+            steps: ['CHECKBOX-in-collapsible'],
+        },
+        'CHECKBOX-in-collapsible': {
+            id: 'CHECKBOX-in-collapsible',
+            type: 'CHECKBOX',
+            label: '¿Desea agregar información adicional?',
+            description: null,
+            required: false,
+            size: 4,
+            steps: ['TEXTINPUT-extra-1', 'TEXTINPUT-extra-2'],
+        },
+        'TEXTINPUT-extra-1': cbTextInput('TEXTINPUT-extra-1', 'Información adicional 1', 2),
+        'TEXTINPUT-extra-2': cbTextInput('TEXTINPUT-extra-2', 'Información adicional 2', 2),
+    },
+    size: { blockNum: 4, blockSize: 210, spacingSize: 20 },
+    rootSteps: [
+        'CHECKBOX-size-1',
+        'CHECKBOX-size-2',
+        'CHECKBOX-size-1-required',
+        'CHECKBOX-size-3',
+        'CHECKBOX-size-1-checked',
+        'CHECKBOX-size-4',
+        'CHECKBOX-list',
+        'CHECKBOX-nested',
+        'CHECKBOX-unchecked-steps',
+        'COLLAPSIBLE-checkbox',
+    ],
+    label: 'Enviar',
+    firstSection: 'FIRST',
+    sections: {
+        FIRST: {
+            id: 'FIRST',
+            steps: [
+                'CHECKBOX-size-1',
+                'CHECKBOX-size-2',
+                'CHECKBOX-size-1-required',
+                'CHECKBOX-size-3',
+                'CHECKBOX-size-1-checked',
+                'CHECKBOX-size-4',
+                'CHECKBOX-list',
+                'CHECKBOX-nested',
+                'CHECKBOX-unchecked-steps',
+                'COLLAPSIBLE-checkbox',
+            ],
+            name: '',
+            nextSection: null,
+        },
+    },
+};
+/**
+ * Every checkbox variant in one form: sizes 1–4, required, description, list mode, long
+ * labels, nested `steps` / `uncheckedSteps`, and a checkbox inside a collapsible. Resize the
+ * preview below ~900px to see the collapsed label mode (100% width, 2-line clamp, "ver más").
+ * Inside the collapsible, close/reopen it and then check the checkbox to reproduce the clipped
+ * nested steps.
+ */
+export const Checkboxes = {
+    args: {
+        formData: checkboxesForm,
+    },
+};
+/** Same checkboxes form in postview, read-only. */
+export const CheckboxesPostview = {
+    args: {
+        formData: checkboxesForm,
+        valuesData: {
+            'CHECKBOX-size-1': true,
+            'CHECKBOX-size-2': false,
+            'CHECKBOX-size-1-required': true,
+            'CHECKBOX-size-3': true,
+            'CHECKBOX-size-1-checked': true,
+            'CHECKBOX-size-4': true,
+            'CHECKBOX-list': true,
+            'CHECKBOX-nested': true,
+            'TEXTINPUT-shipping-address': 'Calle 123 # 45-67',
+            'TEXTINPUT-shipping-city': 'Bogotá',
+            'CHECKBOX-unchecked-steps': true,
+            'COLLAPSIBLE-checkbox': true,
+            'CHECKBOX-in-collapsible': false,
+        },
+        postview: true,
+        internal: true,
+        editable: false,
+    },
+};

package/dist/Form/Form.js

@@ -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/FormSteps/CheckBoxStep/CheckBoxStep.mobileLabel.test.js

@@ -48,7 +48,7 @@ function makeStore(currentBreakPoint) {
                     ...defaultRootState,
                     widthStats: {
                         currentBreakPoint,
-                        isMobile: currentBreakPoint <= checkBoxStep.size,
+                        isMobile: currentBreakPoint <= 1,
                         isResponsive: true,
                     },
                 },
@@ -57,9 +57,9 @@ function makeStore(currentBreakPoint) {
         middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
     });
 }
-function Harness({ currentBreakPoint }) {
+function Harness({ currentBreakPoint, step = checkBoxStep, }) {
     const methods = useForm({ mode: 'onTouched' });
-    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(currentBreakPoint), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: form, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: checkBoxStep, editable: true }) }) }) }) }) }) }));
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: makeStore(currentBreakPoint), context: StoreContext, children: _jsx(IdFormContext.Provider, { value: STORY_FORM_ID, children: _jsx(FormContext.Provider, { value: { ...form, steps: { ...form.steps, [step.id]: step } }, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: step, editable: true }) }) }) }) }) }) }));
 }
 function getLabelDiv() {
     // the leaf div holding only the label text (the wrapping column also matches by textContent)
@@ -85,22 +85,30 @@ afterEach(() => {
     delete HTMLElement.prototype.scrollHeight;
     delete HTMLElement.prototype.clientHeight;
 });
-describe('CheckBoxStep label on collapsed (mobile) breakpoints', () => {
+describe('CheckBoxStep long labels', () => {
     it('wraps the label (2-line clamp) instead of single-line truncating it when the step collapses to 100% width', () => {
         // breakpoint 1 <= size 2 → MaterialInputContainer renders the step at width: 100%
         render(_jsx(Harness, { currentBreakPoint: 1 }));
         const label = getLabelDiv();
         expect(label.className).toBe(styles.clampLbl);
-        expect(label.className).not.toBe(styles.overflowLbl);
-        // the fixed desktop pixel maxWidth must not constrain the collapsed label
+        // no fixed desktop pixel maxWidth constrains the label
         expect(label.style.maxWidth).toBe('');
     });
-    it('keeps the single-line ellipsis label on desktop widths (control)', () => {
+    it('also clamps (with "ver más") when the step keeps a fixed width on a phone where 2 columns fit', () => {
+        // regression: a size-1 checkbox at breakpoint 2 used to render a single-line ellipsis with
+        // no way to read the full label
+        mockLabelOverflow();
+        render(_jsx(Harness, { currentBreakPoint: 2, step: { ...checkBoxStep, size: 1 } }));
+        const label = getLabelDiv();
+        expect(label.className).toBe(styles.clampLbl);
+        expect(label.style.maxWidth).toBe('');
+        expect(screen.getByRole('button', { name: 'ver más' })).toBeInTheDocument();
+    });
+    it('clamps on desktop widths too, without a toggle while the label fits', () => {
         // breakpoint 4 > size 2 → the step keeps its fixed desktop width
         render(_jsx(Harness, { currentBreakPoint: 4 }));
         const label = getLabelDiv();
-        expect(label.className).toBe(styles.overflowLbl);
-        expect(label.style.maxWidth).not.toBe('');
+        expect(label.className).toBe(styles.clampLbl);
         expect(screen.queryByRole('button', { name: 'ver más' })).not.toBeInTheDocument();
     });
     it('shows no "ver más" toggle when the label fits in the clamp', () => {

package/dist/FormSteps/CheckBoxStep/MaterialCheckBoxStep/MaterialCheckBoxStep.js

@@ -8,7 +8,6 @@ import { useAppSelector, selectWidthStats } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 function CheckBoxStep({ step, editable }) {
     const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: step.defaultValue ?? false,
@@ -20,15 +19,15 @@ function CheckBoxStep({ step, editable }) {
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const widthStats = useAppSelector(selectWidthStats);
-    const span = resolveStepSpan(step, widthStats, form.size);
-    // when the breakpoint collapses the step to width: 100% (see MaterialInputContainer),
-    // the fixed desktop pixel width no longer matches the real available space
-    const collapsed = widthStats.currentBreakPoint <= span;
+    // The label is clamped to 2 lines with a "ver más" toggle at every width. A single-line
+    // ellipsis was used while the step kept its fixed desktop pixel width, but that left long
+    // labels unreadable wherever the step is narrow (e.g. a size-1 checkbox on a phone where 2
+    // columns fit).
     const labelRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
     const [clamped, setClamped] = useState(false);
     useLayoutEffect(() => {
-        if (!collapsed || expanded)
+        if (expanded)
             return;
         const measure = () => {
             const label = labelRef.current;
@@ -38,7 +37,7 @@ function CheckBoxStep({ step, editable }) {
         measure();
         window.addEventListener('resize', measure);
         return () => window.removeEventListener('resize', measure);
-    }, [collapsed, expanded, step.label]);
+    }, [expanded, step.label, widthStats.currentBreakPoint]);
     const renderNested = () => {
         const steps = value ? step.steps : step.uncheckedSteps;
         return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
@@ -48,18 +47,12 @@ function CheckBoxStep({ step, editable }) {
     };
     const renderLabel = (colon = false) => {
         const label = `${step.label}${step.required ? ' *' : ''}${colon ? ':' : ''}`;
-        if (!collapsed) {
-            return (_jsx("div", { className: span === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
-                    maxWidth: calcStepWidth(span, form.size) - 45,
-                }, children: label }));
-        }
         return (_jsxs("div", { className: styles.labelColumn, children: [_jsx("div", { ref: labelRef, className: expanded ? styles.expandedLbl : styles.clampLbl, children: label }), (clamped || expanded) && (_jsx("button", { type: "button", className: styles.toggleLbl, style: { color: formStyle.primaryColor }, onClick: (event) => {
                         event.stopPropagation();
                         setExpanded(!expanded);
                     }, children: expanded ? 'ver menos' : 'ver más' }))] }));
     };
     return (_jsxs(StepFillerContainer, { step: step, children: [_jsx(MaterialInputContainer, { step: step, editable: editable, maxHeight: step.size < 4, children: _jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.labelCheckBoxContainer, style: {
-                                height: span < 4 && !collapsed ? 31 : undefined,
                                 minHeight: 31,
                                 alignItems: step.isList ? 'start' : 'center',
                             }, children: [step.label && !step.isList && renderLabel(true), _jsx(ErkCheckBox, { ...field, padding: "0px", inputRef: ref, error: !!error, checked: value, onChange: onChange, "data-testid": step.id, readOnly: !editable || postview }), step.label && step.isList && renderLabel()] }), (step.description ?? !!error) && (_jsx("div", { className: styles.descriptionPar, style: {

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

@@ -3,17 +3,6 @@
     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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.60-test",
+  "version": "3.0.61",
   "scripts": {
     "watch": "node node_modules/@typescript/native/bin/tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",