@arquimedes.co/eureka-forms 3.0.68-test → 3.0.69

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/AvailabilityStep/AvailabilityStep.d.ts

@@ -0,0 +1,7 @@
+import { AvailabilityStep } from '../../@Types/CalendarFormStep';
+import { StepProps } from '../Step';
+export interface AvailabilityStepProps extends StepProps {
+    step: AvailabilityStep;
+}
+declare function AvailabilityStepComponent(props: AvailabilityStepProps): JSX.Element;
+export default AvailabilityStepComponent;

package/dist/FormSteps/AvailabilityStep/AvailabilityStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialAvailabilityStep from './MaterialAvailabilityStep/MaterialAvailabilityStep';
+import { useAppSelector } from '../../hooks';
+function AvailabilityStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialAvailabilityStep, { ...props });
+        }
+    }
+}
+export default AvailabilityStepComponent;

package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.d.ts

@@ -0,0 +1,8 @@
+import { AvailabilityStepProps } from '../AvailabilityStep';
+/**
+ * Conector del paso AVAILABILITY: pregunta de disponibilidad compacta
+ * (grid semanal día × hora). El calendario completo vive en el admin; el form
+ * solo captura ventanas disponibles que un paso BOOKING puede consumir.
+ */
+declare function MaterialAvailabilityStep({ step, editable }: AvailabilityStepProps): JSX.Element;
+export default MaterialAvailabilityStep;

package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkAvailabilityPicker from '../../../Shared/ErkAvailabilityPicker/ErkAvailabilityPicker';
+/**
+ * Conector del paso AVAILABILITY: pregunta de disponibilidad compacta
+ * (grid semanal día × hora). El calendario completo vive en el admin; el form
+ * solo captura ventanas disponibles que un paso BOOKING puede consumir.
+ */
+function MaterialAvailabilityStep({ step, editable }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const formCtx = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+    };
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: null,
+        rules: { required: step.required ? 'Marca tu disponibilidad' : undefined },
+    });
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkAvailabilityPicker, { value: value, onChange: onChange, label: step.label, description: step.description, minTime: step.minTime, maxTime: step.maxTime, showWeekends: step.showWeekends, timezone: step.timezone, readOnly: isReadOnly, error: error?.message }) }));
+}
+export default MaterialAvailabilityStep;

package/dist/FormSteps/BookingStep/BookingStep.d.ts

@@ -0,0 +1,17 @@
+import { BookingStep } from '../../@Types/BookingFormStep';
+import { BookingSlot } from '../../@Types/BookingFormStep';
+import { StepProps } from '../Step';
+export interface BookingStepProps extends StepProps {
+    step: BookingStep;
+    /**
+     * Callback to fetch available slots for a given person + date. A host that provides it replaces
+     * the form's public booking edge entirely (stories, previews). When omitted, the step reads its
+     * offer, days, slots and holds from that edge.
+     */
+    fetchSlots?: (params: {
+        personId?: string;
+        date: string;
+    }) => Promise<BookingSlot[]>;
+}
+declare function BookingStepComponent(props: BookingStepProps): JSX.Element;
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/BookingStep.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialBookingStep from './MaterialBookingStep/MaterialBookingStep';
+import { useAppSelector } from '../../hooks';
+function BookingStepComponent(props) {
+    const { formStyle } = useAppSelector((state) => state.global);
+    switch (formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialBookingStep, { ...props });
+        }
+    }
+}
+export default BookingStepComponent;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.d.ts

@@ -0,0 +1,14 @@
+import { BookingStepProps } from '../BookingStep';
+/**
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el theming del form
+ * con `ErkBookingPicker`, y habla con el borde público de agendamiento del formulario.
+ *
+ * Todo lo que el picker muestra sale de la oferta que publica el backend, no del paso guardado: las
+ * personas llegan como handles firmados (nunca ids de agente), los días son los que tienen cupo, y
+ * las horas se leen en la zona horaria de la organización. Confirmar en el picker bloquea el slot;
+ * enviar el formulario es lo que lo convierte en cita, y "Cambiar" lo devuelve a la oferta.
+ *
+ * Un host que pase `fetchSlots` sustituye al borde por completo (historias, previsualizaciones).
+ */
+declare function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }: BookingStepProps): JSX.Element;
+export default MaterialBookingStep;

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { PersonSelectionMode } from '../../../@Types/BookingFormStep';
+import { useFormStep } from '../../StepHooks';
+import FormContext from '../../../Contexts/FormContext';
+import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { calcStepWidth } from '../../StepFunctions';
+import ErkBookingPicker from '../../../Shared/ErkBookingPicker/ErkBookingPicker';
+import { bookingErrorMessage, fetchBookingOffer, fetchBookingSlots, holdBookingSlot, nonEmpty, releaseBookingSlot, toPickerSlot, } from '../../../Services/BookingService';
+/** Una reserva se renueva a mitad de su vida, y nunca más seguido que cada minuto. */
+const MIN_RENEW_MS = 60000;
+const DEFAULT_LOCK_MINUTES = 15;
+/**
+ * Conector del paso BOOKING: enlaza el estado del formulario (`useFormStep`) y el theming del form
+ * con `ErkBookingPicker`, y habla con el borde público de agendamiento del formulario.
+ *
+ * Todo lo que el picker muestra sale de la oferta que publica el backend, no del paso guardado: las
+ * personas llegan como handles firmados (nunca ids de agente), los días son los que tienen cupo, y
+ * las horas se leen en la zona horaria de la organización. Confirmar en el picker bloquea el slot;
+ * enviar el formulario es lo que lo convierte en cita, y "Cambiar" lo devuelve a la oferta.
+ *
+ * Un host que pase `fetchSlots` sustituye al borde por completo (historias, previsualizaciones).
+ */
+function MaterialBookingStep({ step, editable, fetchSlots: customFetchSlots }) {
+    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const { postview, formStyle, idOrganization, internal, apiKey: globalApiKey, } = useAppSelector((state) => state.global);
+    const formCtx = useContext(FormContext);
+    const isReadOnly = !editable || postview;
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+        '--booking-accent': formStyle.secondaryContrastColor,
+    };
+    const { ref, value, onChange, error } = useFormStep(step, {
+        defaultValue: null,
+        rules: { required: step.required ? 'Selecciona una cita' : undefined },
+    });
+    const apiKey = formCtx.apiKey ?? globalApiKey;
+    const route = useMemo(() => (apiKey ? { apiKey, idStep: step.id, idOrganization: idOrganization || undefined, internal } : undefined), [apiKey, step.id, idOrganization, internal]);
+    const usesEdge = !customFetchSlots && !isReadOnly && !!route;
+    const [offer, setOffer] = useState(undefined);
+    const [offerError, setOfferError] = useState(undefined);
+    useEffect(() => {
+        if (!usesEdge || !route)
+            return;
+        let cancelled = false;
+        fetchBookingOffer(route)
+            .then((loaded) => {
+            if (!cancelled)
+                setOffer(loaded);
+        })
+            .catch((e) => {
+            if (!cancelled)
+                setOfferError(bookingErrorMessage(e));
+        });
+        return () => {
+            cancelled = true;
+        };
+    }, [usesEdge, route]);
+    const persons = useMemo(() => offer?.persons?.map((person) => ({
+        id: person.token,
+        name: person.name,
+        role: person.role,
+        avatarUrl: person.avatarUrl,
+        description: person.description,
+    })), [offer]);
+    const fetchDays = useCallback(async ({ personId }) => {
+        if (!route || !offer)
+            return [];
+        // The offer already answered for "anybody"; one person's days are that person's offer.
+        return personId ? (await fetchBookingOffer(route, personId)).days : offer.days;
+    }, [route, offer]);
+    const fetchSlots = useCallback(async ({ personId, date }) => {
+        if (!route || !offer)
+            return [];
+        const slots = await fetchBookingSlots(route, date, personId);
+        return slots.map((slot) => toPickerSlot(slot, offer.timeZone));
+    }, [route, offer]);
+    const holdSlot = useCallback(async ({ slot, contact }) => {
+        if (!route)
+            throw new Error('No pudimos reservar ese horario.');
+        try {
+            return await holdBookingSlot(route, {
+                slot: slot.id,
+                contact: contact?.name ? { name: contact.name, email: nonEmpty(contact.email) } : undefined,
+            });
+        }
+        catch (e) {
+            throw new Error(bookingErrorMessage(e));
+        }
+    }, [route]);
+    // A held slot is somebody's calendar taken off the offer; giving it back the moment the requester
+    // changes their mind is what keeps "Cambiar" from costing the organization the slot for the whole lock.
+    const handleChange = useCallback((next) => {
+        if (next === null && usesEdge && route && value?.appointment && value.hold) {
+            void releaseBookingSlot(route, { appointment: value.appointment, hold: value.hold }).catch(() => undefined);
+        }
+        onChange(next);
+    }, [onChange, usesEdge, route, value]);
+    // The hold outlives a slow form by being renewed with its own token; a renewal that fails (the slot
+    // handle expired, the network went) is left alone — the lock simply lapses and the slot is offered again.
+    const renewal = useRef(undefined);
+    useEffect(() => {
+        clearInterval(renewal.current);
+        if (!usesEdge || !route || !value?.appointment || !value.hold || !value.slotId || value.status !== 'PENDING') {
+            return;
+        }
+        const lockMs = (step.temporaryLockMinutes ?? DEFAULT_LOCK_MINUTES) * 60000;
+        const { slotId, hold, contactName, contactEmail } = value;
+        renewal.current = setInterval(() => {
+            void holdBookingSlot(route, {
+                slot: slotId,
+                hold,
+                contact: contactName ? { name: contactName, email: nonEmpty(contactEmail) } : undefined,
+            }).catch(() => undefined);
+        }, Math.max(MIN_RENEW_MS, lockMs / 2));
+        return () => clearInterval(renewal.current);
+    }, [usesEdge, route, value, step.temporaryLockMinutes]);
+    // The server decides how people are presented: a step that resolves to one calendar offers no choice.
+    const personSelectionMode = usesEdge
+        ? (offer?.personSelection ?? PersonSelectionMode.NONE)
+        : step.personSelectionMode;
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkBookingPicker, { value: value, onChange: handleChange, label: step.label, description: step.description, durationMinutes: offer?.durationMinutes ?? step.durationMinutes, bufferMinutes: step.bufferMinutes, bookingMode: step.bookingMode, temporaryLockMinutes: step.temporaryLockMinutes, personSelectionMode: personSelectionMode, persons: usesEdge ? persons : step.persons, collectContact: step.collectContact, fetchSlots: usesEdge ? fetchSlots : customFetchSlots, fetchDays: usesEdge ? fetchDays : undefined, holdSlot: usesEdge ? holdSlot : undefined, disabled: usesEdge && !offer, readOnly: isReadOnly, error: error?.message ?? offerError }) }));
+}
+export default MaterialBookingStep;

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,15 +57,15 @@ 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)
     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). */
+/** Makes every element report a 1-line-clamped overflow (jsdom has no layout). */
 function mockLabelOverflow() {
     Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
         configurable: true,
@@ -76,7 +76,7 @@ function mockLabelOverflow() {
     Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
         configurable: true,
         get() {
-            return 48;
+            return 24;
         },
     });
 }
@@ -85,22 +85,30 @@ afterEach(() => {
     delete HTMLElement.prototype.scrollHeight;
     delete HTMLElement.prototype.clientHeight;
 });
-describe('CheckBoxStep label on collapsed (mobile) breakpoints', () => {
-    it('wraps the label (2-line clamp) instead of single-line truncating it when the step collapses to 100% width', () => {
+describe('CheckBoxStep long labels', () => {
+    it('clamps the label to 1 line with a toggle instead of a plain ellipsis 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 1 line with a "ver más" toggle at every width. A plain
+    // 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;
@@ -30,8 +19,8 @@
 .clampLbl {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
     overflow: hidden;
 }
 .toggleLbl {

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.lateClassifiers.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/FormSteps/ClassifierSelectorStep/ClassifierSelectorStep.lateClassifiers.test.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { FormProvider, useForm } from 'react-hook-form';
+import { configureStore } from '@reduxjs/toolkit';
+import { EurekaFormsReducer, defaultRootState } from '../../Utils/store';
+import { RootApi } from '../../Utils/_api';
+import FormStepTypes from '../../constants/FormStepTypes';
+import { StoreContext } from '../../Utils/StoreContext';
+import FormContext, { IdFormContext } from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import ClassifierSelectorStep from './ClassifierSelectorStep';
+const ID_FORM = 'LATE_CLASSIFIERS_FORM';
+const step = {
+    id: 'tipo-step',
+    idSection: 'SECTION_1',
+    stepPath: ['tipo-step'],
+    type: FormStepTypes.CLASSIFIER_SELECTOR,
+    idClassifier: 'tipo',
+    label: 'Tipo de solicitud',
+    description: '',
+    searchable: true,
+    options: {},
+    required: false,
+    size: 2,
+};
+/** The project's classifiers, as the host resolves them (asynchronously) and passes them to the form. */
+const classifiers = {
+    tipo: { _id: 'tipo', name: 'Tipo de solicitud', children: ['bug', 'mejora'] },
+    bug: { _id: 'bug', name: 'Error / Bug', children: [] },
+    mejora: { _id: 'mejora', name: 'Propuesta de mejora', children: [] },
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: ['tipo-step'], nextSection: null },
+    },
+    steps: { 'tipo-step': step },
+    confirmationMessage: { blocks: [], entityMap: {} },
+    showLink: false,
+    size: { blockSize: 200, blockNum: 4, spacingSize: 10 },
+};
+function makeStore() {
+    return configureStore({
+        reducer: { forms: EurekaFormsReducer, [RootApi.reducerPath]: RootApi.reducer },
+        preloadedState: { forms: { [ID_FORM]: { ...defaultRootState } } },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+function Harness({ store, formClassifiers, }) {
+    const methods = useForm({ mode: 'onTouched' });
+    return (_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(Provider, { store: store, context: StoreContext, children: _jsx(IdFormContext.Provider, { value: ID_FORM, children: _jsx(FormContext.Provider, { value: { ...form, classifiers: formClassifiers }, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(ClassifierSelectorStep, { step: step, editable: true }) }) }) }) }) }) }));
+}
+describe('ClassifierSelectorStep with classifiers that arrive after the first render', () => {
+    it('renders nothing while the classifiers are unknown, then the selector with its options', async () => {
+        const user = userEvent.setup();
+        const store = makeStore();
+        const { rerender } = render(_jsx(Harness, { store: store, formClassifiers: undefined }));
+        expect(screen.queryByRole('combobox')).not.toBeInTheDocument();
+        rerender(_jsx(Harness, { store: store, formClassifiers: classifiers }));
+        await user.click(await screen.findByRole('combobox'));
+        expect(await screen.findByRole('option', { name: 'Error / Bug' })).toBeInTheDocument();
+        expect(screen.getByRole('option', { name: 'Propuesta de mejora' })).toBeInTheDocument();
+    });
+});

package/dist/FormSteps/ClassifierSelectorStep/MaterialClassifierSelectorStep/MaterialClassifierSelectorStep.js

@@ -50,8 +50,10 @@ function ClassifierSelectorStep({ step, editable }) {
             };
         }) ?? []);
     }, 
+    // The classifiers dictionary can arrive after the first render (see useSetupApp), so the
+    // options must follow it, not only the dependency values.
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [dependenciesValues]);
+    [dependenciesValues, classifier, form.classifiers]);
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');