@arquimedes.co/eureka-forms 3.0.60 → 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/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",
+  "version": "3.0.61",
   "scripts": {
     "watch": "node node_modules/@typescript/native/bin/tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",