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

package/README

@@ -1,36 +1,4 @@
 # E2E
 Se prueban los 3 casos:
 Standalone, desplegando la app buildeada 
-Widget y Libreria con el TestApp, 
-
-# Desarrollo contra lambdas locales
-
-Por defecto `/api` va a la API desplegada del dominio que diga `VITE_REACT_APP_DOMAIN` en `.env`
-(`api.forms.eureka-test.click`). Con la variable `LOCAL_LAMBDAS` va al dev server de serverless, que
-corre las lambdas desde el código de tu máquina — sin desplegar nada.
-
-Primero levantá el dev server en el repo de serverless (`npm start` en `serverless/devserver`), y después:
-
-```bash
-LOCAL_LAMBDAS=1 npm start                              # la app en :3003
-LOCAL_LAMBDAS=1 npm run storybook                      # las stories en :6006
-```
-
-La organización sale del subdominio, igual que desplegada: entrá por `http://arquimedes.localhost:3003`
-y las lambdas atienden a esa org (los navegadores resuelven cualquier subdominio de `localhost` a
-127.0.0.1). Para Storybook, o si preferís entrar por `localhost` pelado, hay que decirla:
-
-```bash
-LOCAL_LAMBDAS=1 LOCAL_ORG=arquimedes npm run storybook
-```
-
-Ambos comandos anuncian a dónde apuntan al arrancar.
-
-Variables:
-
-| variable | para qué |
-| --- | --- |
-| `LOCAL_LAMBDAS=1` | usar las lambdas locales en vez de la API desplegada |
-| `LOCAL_ORG` | la organización, si no entrás por `<org>.localhost` |
-| `DEVSERVER_PORT` | puerto del dev server, si no es 3100 |
-| `FORMS_API_TARGET` | apuntar a otro lado (un túnel, otro stage) e ignorar todo lo anterior |
+Widget y Libreria con el TestApp, 

package/dist/@Types/FormStep.d.ts

@@ -5,13 +5,7 @@ import { EurekaDraft } from './Draft/Draft';
 import { ErkValue } from './ErkValue';
 import * as GSteps from './GenericFormSteps';
 import { Time } from './Time';
-import { LocationStep } from './LocationFormStep';
-import { NumberStep, NumberStepType } from './NumericFormSteps';
-import { BookingStep } from './BookingFormStep';
-import { CalendarStep } from './CalendarFormStep';
-export type { LocationStep, NumberStep, BookingStep, CalendarStep };
-export { NumberStepType };
-export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper | DatePickerRange | LocationStep | NumberStep | BookingStep | CalendarStep;
+export type FormStep = Title | TimePicker | Rating | CheckBox | TextArea | TextInput | DatePicker | FileUpload | Separator | FormSelector | ClassifierSelector | Collapsible | EntityValuePicker | ApiSelector | Mapper | DatePickerRange;
 export interface Title extends GSteps.GBaseStep {
     type: FormStepTypes.TITLE;
     title?: EurekaDraft;
@@ -238,3 +232,4 @@ export interface Mapper extends GSteps.GBaseStep {
     deletable?: boolean;
     max?: number;
 }
+export {};

package/dist/@Types/FormStep.js

@@ -1,2 +1 @@
-import { NumberStepType } from './NumericFormSteps';
-export { NumberStepType };
+export {};

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

@@ -28,13 +28,3 @@ 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, 1-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,192 +296,3 @@ 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, 1-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, 1-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/App/AppHooks.js

@@ -158,14 +158,6 @@ export const useSetupApp = (isEmbedded, props) => {
         idCurrentAgent,
         handleConfirmed,
     ]);
-    // The host may resolve the classifiers asynchronously (the admin fetches them while the form is
-    // already mounted). `loadData` only copies the prop it saw when it ran, so patch the form whenever a
-    // new dictionary arrives — without re-running the load, which would reset what the user typed.
-    useEffect(() => {
-        if (!classifiers || !form || form.classifiers === classifiers)
-            return;
-        setForm({ ...form, classifiers });
-    }, [classifiers, form]);
     const reload = useCallback(() => {
         if (!form)
             return;

package/dist/App/AppHooks.test.js

@@ -81,14 +81,6 @@ describe('AppHooks', function () {
             expect(result.current.organization).toBeNull();
             expect(result.current.branding).toBeUndefined();
         });
-        test('picks up classifiers that arrive after the first render', async () => {
-            const classifier = { _id: 'tipo', name: 'Tipo de solicitud', children: [] };
-            const { result, rerender } = renderHookWithProviders((props) => useSetupApp(false, { formData: BaseForm, internal: true, classifiers: props.classifiers }), { initialProps: { classifiers: {} } });
-            await waitFor(() => expect(result.current.form).toBeTruthy());
-            expect(result.current.form?.classifiers).toEqual({});
-            rerender({ classifiers: { tipo: classifier } });
-            await waitFor(() => expect(result.current.form?.classifiers?.tipo).toEqual(classifier));
-        });
         test('Apikey Default', async () => {
             mocks.get.mockImplementation((a) => {
                 if (a === '/organization') {

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, resolveCaptchaToken } from './FormFunctions';
+import { calcValue } from './FormFunctions';
 import { FormProvider, useForm } from 'react-hook-form';
 import widgetInstance from '../Utils/AxiosWidget';
 import axiosInstance from '../Utils/AxiosAPI';
@@ -38,16 +38,15 @@ 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,23 +4,6 @@ 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,28 +3,6 @@ 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, resolveCaptchaToken } from './FormFunctions';
+import { calcDependencies, calcValue } from './FormFunctions';
 import { stringToDraft } from '../Utils/DraftFunctions';
 import { describe, expect, test } from 'vitest';
 describe('FormFunctions', function () {
@@ -455,31 +455,4 @@ 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 <= 1,
+                        isMobile: currentBreakPoint <= checkBoxStep.size,
                         isResponsive: true,
                     },
                 },
@@ -57,15 +57,15 @@ function makeStore(currentBreakPoint) {
         middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
     });
 }
-function Harness({ currentBreakPoint, step = checkBoxStep, }) {
+function Harness({ currentBreakPoint }) {
     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, steps: { ...form.steps, [step.id]: step } }, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: step, 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, children: _jsx(SectionContext.Provider, { value: "SECTION_1", children: _jsx(FormProvider, { ...methods, children: _jsx(CheckBoxStep, { step: checkBoxStep, 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 1-line-clamped overflow (jsdom has no layout). */
+/** Makes every element report a 2-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 24;
+            return 48;
         },
     });
 }
@@ -85,30 +85,22 @@ afterEach(() => {
     delete HTMLElement.prototype.scrollHeight;
     delete HTMLElement.prototype.clientHeight;
 });
-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', () => {
+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', () => {
         // 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);
-        // no fixed desktop pixel maxWidth constrains the label
+        expect(label.className).not.toBe(styles.overflowLbl);
+        // the fixed desktop pixel maxWidth must not constrain the collapsed label
         expect(label.style.maxWidth).toBe('');
     });
-    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', () => {
+    it('keeps the single-line ellipsis label on desktop widths (control)', () => {
         // breakpoint 4 > size 2 → the step keeps its fixed desktop width
         render(_jsx(Harness, { currentBreakPoint: 4 }));
         const label = getLabelDiv();
-        expect(label.className).toBe(styles.clampLbl);
+        expect(label.className).toBe(styles.overflowLbl);
+        expect(label.style.maxWidth).not.toBe('');
         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,6 +8,7 @@ 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,
@@ -19,15 +20,15 @@ function CheckBoxStep({ step, editable }) {
     const { formStyle, postview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const widthStats = useAppSelector(selectWidthStats);
-    // 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 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;
     const labelRef = useRef(null);
     const [expanded, setExpanded] = useState(false);
     const [clamped, setClamped] = useState(false);
     useLayoutEffect(() => {
-        if (expanded)
+        if (!collapsed || expanded)
             return;
         const measure = () => {
             const label = labelRef.current;
@@ -37,7 +38,7 @@ function CheckBoxStep({ step, editable }) {
         measure();
         window.addEventListener('resize', measure);
         return () => window.removeEventListener('resize', measure);
-    }, [expanded, step.label, widthStats.currentBreakPoint]);
+    }, [collapsed, expanded, step.label]);
     const renderNested = () => {
         const steps = value ? step.steps : step.uncheckedSteps;
         return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
@@ -47,12 +48,18 @@ 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,6 +3,17 @@
     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;
@@ -19,8 +30,8 @@
 .clampLbl {
     display: -webkit-box;
     -webkit-box-orient: vertical;
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
     overflow: hidden;
 }
 .toggleLbl {

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

@@ -50,10 +50,8 @@ 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, classifier, form.classifiers]);
+    [dependenciesValues]);
     useEffect(() => {
         if (value && !options?.find((option) => option.value === value?.value)) {
             onChange('');