@arquimedes.co/eureka-forms 3.0.55 → 3.0.56-test

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

@@ -9,6 +9,13 @@ export interface GBaseStep {
     clientInfoType?: string;
     dependencies?: string[];
     condition?: Condition;
+    /**
+     * Per-screen column-span overrides (tablet/mobile) written by the form editor. Desktop's
+     * source of truth stays the step's legacy `size`, and a missing entry falls back to the span
+     * derived from it (see `resolveStepSpan` in FormSteps/StepFunctions), so a form with no
+     * explicit overrides renders exactly like the legacy shape.
+     */
+    sizes?: Partial<Record<'tablet' | 'mobile', 1 | 2 | 3 | 4>>;
 }
 export interface GTitle extends GBaseStep {
     title: string;

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

@@ -0,0 +1,123 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { Provider } from 'react-redux';
+import { useForm, FormProvider } 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 { IdFormContext } from '../../Contexts/FormContext';
+import FormContext from '../../Contexts/FormContext';
+import SectionContext from '../../Contexts/SectionContext';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import CheckBoxStep from './CheckBoxStep';
+import styles from './MaterialCheckBoxStep/MaterialCheckBoxStep.module.css';
+const STORY_FORM_ID = 'STORY_FORM';
+const LONG_LABEL = 'Cumplimiento de lo ofrecido frente a lo entregado en su vivienda';
+const checkBoxStep = {
+    id: 'checkbox-step',
+    idSection: 'SECTION_1',
+    stepPath: ['checkbox-step'],
+    type: FormStepTypes.CHECKBOX,
+    label: LONG_LABEL,
+    description: null,
+    required: false,
+    size: 2,
+};
+const form = {
+    firstSection: 'SECTION_1',
+    sections: {
+        SECTION_1: { id: 'SECTION_1', name: 'Sección 1', steps: [], nextSection: null },
+    },
+    steps: { 'checkbox-step': { ...checkBoxStep } },
+    confirmationMessage: { blocks: [], entityMap: {} },
+    showLink: false,
+    size: { blockSize: 200, blockNum: 4, spacingSize: 10 },
+};
+function makeStore(currentBreakPoint) {
+    return configureStore({
+        reducer: { forms: EurekaFormsReducer, [RootApi.reducerPath]: RootApi.reducer },
+        preloadedState: {
+            forms: {
+                [STORY_FORM_ID]: {
+                    ...defaultRootState,
+                    widthStats: {
+                        currentBreakPoint,
+                        isMobile: currentBreakPoint <= checkBoxStep.size,
+                        isResponsive: true,
+                    },
+                },
+            },
+        },
+        middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(RootApi.middleware),
+    });
+}
+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, 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 2-line-clamped overflow (jsdom has no layout). */
+function mockLabelOverflow() {
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+        configurable: true,
+        get() {
+            return 100;
+        },
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+        configurable: true,
+        get() {
+            return 48;
+        },
+    });
+}
+afterEach(() => {
+    // remove the overflow mocks so other tests see jsdom defaults again
+    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', () => {
+        // 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
+        expect(label.style.maxWidth).toBe('');
+    });
+    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.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', () => {
+        // jsdom defaults: scrollHeight === clientHeight === 0 → nothing is clipped
+        render(_jsx(Harness, { currentBreakPoint: 1 }));
+        expect(screen.queryByRole('button', { name: 'ver más' })).not.toBeInTheDocument();
+    });
+    it('offers "ver más" when the clamp clips the label, and expands/collapses on click', async () => {
+        mockLabelOverflow();
+        render(_jsx(Harness, { currentBreakPoint: 1 }));
+        const toggle = await screen.findByRole('button', { name: 'ver más' });
+        await userEvent.click(toggle);
+        expect(getLabelDiv().className).toBe(styles.expandedLbl);
+        const collapseToggle = screen.getByRole('button', { name: 'ver menos' });
+        await userEvent.click(collapseToggle);
+        expect(getLabelDiv().className).toBe(styles.clampLbl);
+    });
+});

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

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './MaterialCheckBoxStep.module.css';
 import ErkCheckBox from '../../../Shared/ErkCheckbox/ErkCheckBox';
-import React, { useContext } from 'react';
+import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import StepComponent from '../../Step';
 import FormContext from '../../../Contexts/FormContext';
-import { useAppSelector } from '../../../hooks';
+import { useAppSelector, selectWidthStats } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
 import MaterialInputContainer from '../../Utils/MaterialInputContainer/MaterialInputContainer';
-import { calcStepWidth } from '../../StepFunctions';
+import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 function CheckBoxStep({ step, editable }) {
     const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: step.defaultValue ?? false,
@@ -19,6 +19,26 @@ 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;
+    const labelRef = useRef(null);
+    const [expanded, setExpanded] = useState(false);
+    const [clamped, setClamped] = useState(false);
+    useLayoutEffect(() => {
+        if (!collapsed || expanded)
+            return;
+        const measure = () => {
+            const label = labelRef.current;
+            if (label)
+                setClamped(label.scrollHeight > label.clientHeight);
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        return () => window.removeEventListener('resize', measure);
+    }, [collapsed, expanded, step.label]);
     const renderNested = () => {
         const steps = value ? step.steps : step.uncheckedSteps;
         return (_jsx(React.Fragment, { children: steps?.map((idStep) => {
@@ -27,12 +47,19 @@ function CheckBoxStep({ step, editable }) {
             }) }));
     };
     const renderLabel = (colon = false) => {
-        return (_jsxs("div", { className: step.size === 4 ? styles.checkboxLbl : styles.overflowLbl, style: {
-                maxWidth: calcStepWidth(step.size, form.size) - 45,
-            }, children: [step.label, step.required ? ' *' : '', colon ? ':' : ''] }));
+        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: step.size < 4 ? 31 : undefined,
+                                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

@@ -14,6 +14,36 @@
     overflow: hidden;
     text-overflow: ellipsis;
 }
+.labelColumn {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 1 auto;
+    min-width: 0;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+.clampLbl,
+.expandedLbl {
+    font-size: 18px;
+}
+.clampLbl {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    overflow: hidden;
+}
+.toggleLbl {
+    background: none;
+    border: none;
+    padding: 0;
+    margin-top: 2px;
+    font-size: 13px;
+    font-weight: 700;
+    font-family: inherit;
+    cursor: pointer;
+}
 .labelCheckBoxContainer {
     display: flex;
     align-items: center;

package/dist/FormSteps/PhoneInputStep/MaterialTextInputStep/MaterialPhoneInputStep.js

@@ -1,16 +1,17 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import styles from './MaterialPhoneInputStep.module.css';
-import { calcStepWidth } from '../../StepFunctions';
+import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 import { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { selectWidthStats, useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 import ErkPhoneInput from '../../../Shared/ErkPhoneInput/EkrPhoneInput';
 import { isEmptyPhoneNumber, isValidPhoneNumber } from '../../../Utils/PhoneFunctions';
 function PhoneInputStep({ step, editable, defaultValue = step.defaultValue }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const widthStats = useAppSelector(selectWidthStats);
     const postview = useAppSelector((state) => state.global.postview);
     const form = useContext(FormContext);
+    const span = resolveStepSpan(step, widthStats, form.size);
     const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: defaultValue ?? '',
         debounce: true,
@@ -26,7 +27,7 @@ function PhoneInputStep({ step, editable, defaultValue = step.defaultValue }) {
         },
     });
     return (_jsx("div", { className: styles.container, style: {
-            width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
+            width: widthStats.currentBreakPoint <= span ? '100%' : calcStepWidth(span, form.size),
             minHeight: step.description || (!postview && editable) ? '55px' : '43px',
         }, children: _jsx(ErkPhoneInput, { ...field, value: value, inputRef: ref, error: !!error, labelMargin: 0, label: step.label, onChange: onChange, "data-testid": step.id, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description }) }));
 }

package/dist/FormSteps/StepFunctions.d.ts

@@ -3,11 +3,25 @@ import { ApiSelector, CheckBox, ClassifierSelector, EntityValuePicker, FormSelec
 import { AYFFormStep } from '../@Types/AYFFormStep';
 import { CBRFormStep } from '../@Types/CBRFormStep';
 import { Condition } from '../@Types/Condition';
-import { DependencyStore } from '../Form/Form';
+import { DependencyStore, WidthStats } from '../Form/Form';
+import { GBaseStep } from '../@Types/GenericFormSteps';
 import { Entity } from '../@Types/Entity';
 export type FillerSteps = FormSelector | ClassifierSelector | EntityValuePicker | ApiSelector | CheckBox;
 export declare function calcFillerSize(step: FillerSteps, steps: Record<string, FormStep>, values: Record<string, unknown>, size: FormSize): number;
 export declare const calcStepWidth: (stepSize: 1 | 2 | 3 | 4, size: FormSize) => number;
+/** Column span of a step inside the form grid (the grid itself has at most 4 columns). */
+export type FormSpan = 1 | 2 | 3 | 4;
+/** Steps that occupy form-grid columns; content-only steps (e.g. titles) may omit `size`. */
+interface SpannedStep {
+    size?: FormSpan;
+    sizes?: GBaseStep['sizes'];
+}
+/**
+ * Effective column span of a step at the current width: its explicit `sizes` override for the
+ * screen when present (clamped to that screen's columns), the derived legacy default otherwise.
+ * Desktop never reads `sizes` — its source of truth stays the legacy `size` field.
+ */
+export declare function resolveStepSpan(step: SpannedStep, widthStats: Pick<WidthStats, 'currentBreakPoint' | 'isMobile'>, formSize: FormSize): FormSpan;
 export declare const calcDefaultValue: (step: FormStep | CBRFormStep) => any;
 export declare const iterateNestedSteps: (idStep: string, steps: Record<string, FormStep>, iteration: (step: FormStep, path: string[]) => void, path?: string[]) => void;
 /**
@@ -25,3 +39,4 @@ export declare const evaluateCondition: (condition: Condition, dependencies: Dep
     } & Record<string, any>;
 }) => boolean;
 export declare function getRelativeDate(nDays?: number, nHours?: number, nMinutes?: number, subtract?: boolean, date?: Date): Date;
+export {};

package/dist/FormSteps/StepFunctions.js

@@ -97,6 +97,64 @@ function recursivelyCheckOpenSize(idStep, steps, values) {
 export const calcStepWidth = (stepSize, size) => {
     return size.blockSize * stepSize + size.spacingSize * (stepSize - 1);
 };
+const clampSpan = (span, columns) => Math.max(1, Math.min(span, columns));
+/**
+ * Columns the form grid has on each screen — the editor's model, mirrored so both sides agree on
+ * what fits: desktop uses the form's configured `blockNum`, tablet caps it at 2, and mobile is the
+ * single column this renderer has always collapsed to.
+ */
+function columnsForBreakpoint(formSize, breakpoint) {
+    switch (breakpoint) {
+        case 'desktop':
+            return formSize.blockNum;
+        case 'tablet':
+            return clampSpan(formSize.blockNum, 2);
+        case 'mobile':
+            return 1;
+    }
+}
+/**
+ * Span a step gets on a screen when it has no explicit override — the legacy model translated to
+ * the responsive one: desktop keeps the step's `size` (falling back to full width, as steps
+ * without one have always rendered), and the other screens shrink that span to fit their column
+ * count.
+ */
+function deriveDefaultSpan(step, breakpoint, formSize) {
+    const desktopSpan = clampSpan(step.size ?? formSize.blockNum, formSize.blockNum);
+    if (breakpoint === 'desktop')
+        return desktopSpan;
+    return clampSpan(desktopSpan, columnsForBreakpoint(formSize, breakpoint));
+}
+/**
+ * Maps the renderer's width model onto the editor's. The editor lays out exactly three screens,
+ * while `currentBreakPoint` counts how many columns currently fit, so the two need a bridge:
+ * `isMobile` is the editor's mobile screen, and because the editor's tablet layout is a 2-column
+ * grid (see `columnsForBreakpoint`) its overrides apply only once at most 2 columns fit.
+ * Reduced-but-wider states (e.g. 3 columns of a 4-column form) keep the desktop spans — the
+ * editor has no screen for them, and this keeps forms without overrides rendering exactly as
+ * they always have.
+ */
+function breakpointForWidthStats(widthStats, formSize) {
+    if (widthStats.isMobile)
+        return 'mobile';
+    if (widthStats.currentBreakPoint < formSize.blockNum && widthStats.currentBreakPoint <= 2)
+        return 'tablet';
+    return 'desktop';
+}
+/**
+ * Effective column span of a step at the current width: its explicit `sizes` override for the
+ * screen when present (clamped to that screen's columns), the derived legacy default otherwise.
+ * Desktop never reads `sizes` — its source of truth stays the legacy `size` field.
+ */
+export function resolveStepSpan(step, widthStats, formSize) {
+    const breakpoint = breakpointForWidthStats(widthStats, formSize);
+    if (breakpoint !== 'desktop') {
+        const override = step.sizes?.[breakpoint];
+        if (override !== undefined)
+            return clampSpan(override, columnsForBreakpoint(formSize, breakpoint));
+    }
+    return deriveDefaultSpan(step, breakpoint, formSize);
+}
 export const calcDefaultValue = (step) => {
     switch (step.type) {
         case FormStepTypes.CHECKBOX:

package/dist/FormSteps/StepFunctions.test.js

@@ -2,7 +2,7 @@ import AYFFormStepTypes from '../constants/AYFFormStepTypes';
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueOptionTypes, OptionTypes, } from '../constants/FormStepTypes';
 import { describe, expect, test, vi } from 'vitest';
-import { calcDefaultValue, calcFillerSize, calcStepWidth, calcSubSteps, iterateNestedSteps } from './StepFunctions';
+import { calcDefaultValue, calcFillerSize, calcStepWidth, calcSubSteps, iterateNestedSteps, resolveStepSpan, } from './StepFunctions';
 import { stringToDraft } from '../Utils/DraftFunctions';
 describe('StepFunctions', function () {
     describe('calcFillerSize', function () {
@@ -411,6 +411,37 @@ describe('StepFunctions', function () {
             expect(size).toBe(440);
         });
     });
+    describe('resolveStepSpan', function () {
+        const fourColumns = { blockNum: 4, blockSize: 210, spacingSize: 20 };
+        const desktop = { currentBreakPoint: 4, isMobile: false };
+        const threeColumns = { currentBreakPoint: 3, isMobile: false };
+        const tablet = { currentBreakPoint: 2, isMobile: false };
+        const mobile = { currentBreakPoint: 1, isMobile: true };
+        test('Legacy step derives every screen from the scalar size', async () => {
+            const step = { size: 3 };
+            expect(resolveStepSpan(step, desktop, fourColumns)).toBe(3);
+            expect(resolveStepSpan(step, tablet, fourColumns)).toBe(2);
+            expect(resolveStepSpan(step, mobile, fourColumns)).toBe(1);
+        });
+        test('Step without size falls back to full width', async () => {
+            expect(resolveStepSpan({}, desktop, fourColumns)).toBe(4);
+            expect(resolveStepSpan({}, tablet, fourColumns)).toBe(2);
+        });
+        test('Tablet override applies once at most 2 columns fit', async () => {
+            const step = { size: 2, sizes: { tablet: 1 } };
+            expect(resolveStepSpan(step, tablet, fourColumns)).toBe(1);
+            expect(resolveStepSpan(step, desktop, fourColumns)).toBe(2);
+        });
+        test('Reduced-but-wider states keep the desktop span', async () => {
+            const step = { size: 3, sizes: { tablet: 1 } };
+            expect(resolveStepSpan(step, threeColumns, fourColumns)).toBe(3);
+        });
+        test('Overrides are clamped to the columns of their screen', async () => {
+            const step = { size: 1, sizes: { tablet: 4, mobile: 3 } };
+            expect(resolveStepSpan(step, tablet, fourColumns)).toBe(2);
+            expect(resolveStepSpan(step, mobile, fourColumns)).toBe(1);
+        });
+    });
     describe('calcDefaultValue', function () {
         test('CheckBox', async () => {
             const defaultValue = calcDefaultValue({

package/dist/FormSteps/TextInputStep/MaterialTextInputStep/MaterialTextInputStep.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import ErkTextField from '../../../Shared/ErkTextField/ErkTextField';
 import styles from './MaterialTextInputStep.module.css';
-import { calcStepWidth } from '../../StepFunctions';
+import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 import { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { selectWidthStats, useAppSelector } from '../../../hooks';
 import { useFormStep } from '../../StepHooks';
 function TextInputStep({ step, editable, maxLength, IconComponent, defaultValue = step.defaultValue, validation = step.validation, }) {
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const widthStats = useAppSelector(selectWidthStats);
     const { postview } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
+    const span = resolveStepSpan(step, widthStats, form.size);
     const { ref, value, onChange, error, field } = useFormStep(step, {
         defaultValue: defaultValue ?? '',
         debounce: true,
@@ -27,7 +28,7 @@ function TextInputStep({ step, editable, maxLength, IconComponent, defaultValue
         },
     });
     return (_jsx("div", { className: styles.container, style: {
-            width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
+            width: widthStats.currentBreakPoint <= span ? '100%' : calcStepWidth(span, form.size),
             minHeight: step.description || (!postview && editable && (step.required || validation)) ? '55px' : '43px',
         }, children: _jsx(ErkTextField, { ...field, value: value, inputRef: ref, labelMargin: 0, error: !!error, label: step.label, onChange: onChange, maxLength: maxLength, "data-testid": step.id, required: step.required, readOnly: !editable || postview, helperText: error?.message ?? step.description, IconComponent: step.showIcon ? IconComponent : undefined }) }));
 }

package/dist/FormSteps/TitleStep/MaterialTitleStep/MaterialTitleStep.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { calcStepWidth } from '../../StepFunctions';
+import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 import styles from './MaterialTitleStep.module.css';
 import { useAppSelector } from '../../../hooks';
 import FormContext from '../../../Contexts/FormContext';
@@ -16,7 +16,7 @@ function TitleStep({ step }) {
     const { formStyle } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const widthStats = useAppSelector((state) => state.widthStats);
-    const size = step.size ?? form.size.blockNum;
+    const span = resolveStepSpan(step, widthStats, form.size);
     const title = useMemo(() => calcBaseDraft(value?.title ?? step.title), //Usa por defecto lo que venga en el value, pero no escucha cambios
     [step.title, value?.title]);
     const sourceTitle = useMemo(() => calcBaseDraft(step.title), [step.title]);
@@ -36,9 +36,9 @@ function TitleStep({ step }) {
     const path = useMemo(() => [...step.stepPath, step.id].join('.'), [step.stepPath, step.id]);
     return (_jsxs("div", { className: styles.container, style: {
             color: formStyle.textColor,
-            width: widthStats.currentBreakPoint <= size ? '100%' : calcStepWidth(size, form.size),
+            width: widthStats.currentBreakPoint <= span ? '100%' : calcStepWidth(span, form.size),
         }, children: [_jsx("div", { className: styles.titleLbl, style: {
-                    textAlign: widthStats.isMobile && widthStats.currentBreakPoint <= size ? 'center' : 'start',
+                    textAlign: widthStats.isMobile && widthStats.currentBreakPoint <= span ? 'center' : 'start',
                 }, children: _jsx(SmartDraftRenderer, { draft: title, sourceDraft: sourceTitle, dependencies: values, property: `${path}.title`, onChange: (title) => onChange({ ...value, title }) }) }), _jsx("div", { className: styles.descriptionPar, children: _jsx(SmartDraftRenderer, { draft: description, sourceDraft: sourceDescription, dependencies: values, margin: title ? '10px 0px' : '0px 0px 5px 0px', property: `${path}.description`, onChange: (description) => onChange({ ...value, description }) }) })] }));
 }
 export default TitleStep;

package/dist/FormSteps/Utils/@StepFiller/StepFiller.js

@@ -1,23 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useContext, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
-import { calcFillerSize } from '../../StepFunctions';
+import { calcFillerSize, resolveStepSpan } from '../../StepFunctions';
 import FormContext from '../../../Contexts/FormContext';
 import styles from './StepFiller.module.css';
-import { selectBreakPoint, useAppSelector } from '../../../hooks';
+import { selectWidthStats, useAppSelector } from '../../../hooks';
 import { SizeChangeContext } from './StepFillerContext';
 function StepFiller({ step, children }) {
     const { getValues } = useFormContext();
     const form = useContext(FormContext);
     const [fillerSize, setFillerSize] = useState(calcFillerSize(step, form.steps, getValues(), form.size));
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const widthStats = useAppSelector(selectWidthStats);
+    const span = resolveStepSpan(step, widthStats, form.size);
     const handleSizeChange = useCallback(() => {
         setFillerSize(calcFillerSize(step, form.steps, getValues(), form.size));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     if (step.maxSize && step.maxSize < form.size.blockNum) {
         return (_jsxs("div", { className: styles.firstLvlContainer, style: {
-                width: currentBreakPoint <= step.size ? '100%' : 'fit-content',
+                width: widthStats.currentBreakPoint <= span ? '100%' : 'fit-content',
             }, children: [_jsx(SizeChangeContext.Provider, { value: handleSizeChange, children: children }), fillerSize > 0 && (_jsx("div", { className: styles.smallSeparator, style: {
                         width: fillerSize,
                     } }))] }));

package/dist/FormSteps/Utils/MaterialInputContainer/MaterialInputContainer.js

@@ -1,15 +1,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useContext } from 'react';
 import FormContext from '../../../Contexts/FormContext';
-import { useAppSelector, selectBreakPoint } from '../../../hooks';
-import { calcStepWidth } from '../../StepFunctions';
+import { useAppSelector, selectWidthStats } from '../../../hooks';
+import { calcStepWidth, resolveStepSpan } from '../../StepFunctions';
 import styles from './MaterialInputContainer.module.css';
 function MaterialInputContainer({ step, editable, children, onClick, maxHeight = true, }) {
     const form = useContext(FormContext);
-    const currentBreakPoint = useAppSelector(selectBreakPoint);
+    const widthStats = useAppSelector(selectWidthStats);
     const postview = useAppSelector((state) => state.global.postview);
+    const span = resolveStepSpan(step, widthStats, form.size);
     return (_jsx("div", { className: styles.container, style: {
-            width: currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size),
+            width: widthStats.currentBreakPoint <= span ? '100%' : calcStepWidth(span, form.size),
             minHeight: maxHeight
                 ? step.description || (!postview && editable && step.required)
                     ? '55px'

package/dist/Utils/CBRFunctions.js

@@ -1,19 +1,17 @@
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 export const calcCbrForm = (form, formValues) => {
-    /** Callers pass the form straight out of `createNextState`, whose result Immer deep-freezes. */
-    const steps = { ...form.steps };
     for (const step of Object.values(form.steps)) {
         if (step.type === CBRFormStepTypes.CBR_INCIDENCIAS) {
             const incidentStep = step;
             const incValue = formValues[incidentStep.id ?? ''];
             if (incValue) {
                 for (const incident of incValue) {
-                    handleAddIncident(incident, incidentStep, steps, formValues);
+                    handleAddIncident(incident, incidentStep, form.steps, formValues);
                 }
             }
         }
     }
-    return { ...form, steps };
+    return form;
 };
 const handleAddIncident = (incident, step, steps, formValues) => {
     const spaceStep = {

package/dist/hooks.d.ts

@@ -5,4 +5,5 @@ import { QueryActionCreatorResult, QueryDefinition, ResultTypeFrom } from '@redu
 export declare const useAppDispatch: () => AppDispatch;
 export declare const useAppSelector: TypedUseSelectorHook<RootState>;
 export declare const selectBreakPoint: (state: RootState) => number;
+export declare const selectWidthStats: (state: RootState) => RootState["widthStats"];
 export declare function useApiSubscribe(): <D extends QueryDefinition<any, any, any, any>>(subscription: ThunkAction<QueryActionCreatorResult<D>, any, any, any>) => Promise<ResultTypeFrom<D> | undefined>;

package/dist/hooks.js

@@ -20,6 +20,7 @@ export const useAppSelector = (selector, options) => {
     return useSelector((state) => selector(state.forms[idForm] ?? defaultRootState), options);
 };
 export const selectBreakPoint = (state) => state.widthStats.currentBreakPoint;
+export const selectWidthStats = (state) => state.widthStats;
 export function useApiSubscribe() {
     const dispatch = useAppDispatch();
     const subscriptions = useRef([]);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version": "3.0.55",
+  "version":"3.0.56-test",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",

package/dist/App/App.cbr.test.js

@@ -1,78 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen, waitFor } from '@testing-library/react';
-import { describe, expect, it } from 'vitest';
-import '@testing-library/jest-dom';
-import App from './App';
-import CBRFormStepTypes from '../constants/CBRFormStepTypes';
-const INCIDENT = {
-    idSpaceStep: 'CBR_TIPO_ESPACIO-PYDqn',
-    idElementStep: 'CBR_LOCATIVAS-fp6xL',
-    idCommentStep: 'CBR_COMENTARIO-sQjpP',
-    num: 1,
-};
-const ID_SUB_ELEMENT_STEP = 'CBR_LOCATIVAS-G4S0r';
-/** Shaped after a real posventa ticket: incidents are stored flat, keyed by generated step ids. */
-const POSVENTA_VALUES = {
-    CBR_INCIDENCIAS: [INCIDENT],
-    [INCIDENT.idSpaceStep]: { id: '35365', label: 'Zona de Oficios' },
-    [INCIDENT.idCommentStep]: 'GRAN HUMEDAD!!!',
-    [INCIDENT.idElementStep]: { id: '06', label: 'CIELOS', subStep: ID_SUB_ELEMENT_STEP },
-    [ID_SUB_ELEMENT_STEP]: { id: '0601', label: 'Cielo Falso' },
-};
-const POSVENTA_FORM = {
-    name: 'Formulario PosVenta',
-    firstSection: 'FIRST',
-    sections: {
-        FIRST: { id: 'FIRST', name: '', nextSection: null, steps: ['CBR_INCIDENCIAS'] },
-    },
-    steps: {
-        CBR_INCIDENCIAS: {
-            id: 'CBR_INCIDENCIAS',
-            type: CBRFormStepTypes.CBR_INCIDENCIAS,
-            label: 'Incidencias',
-            description: null,
-            addBtnLabel: 'Agregar Incidencia',
-            required: true,
-            unitLabel: 'Incidencia',
-            dependencies: ['CBR_PROYECTO'],
-            spaceStep: {
-                label: 'Espacio',
-                description: null,
-                size: 1,
-                required: true,
-                showIcon: true,
-                searchable: true,
-            },
-            commentStep: { label: 'Comentario', description: null, size: 1, required: true },
-            elementStep: {
-                label: 'Elemento',
-                description: null,
-                size: 1,
-                required: true,
-                showIcon: true,
-                searchable: true,
-                subStep: {
-                    label: 'Elemento Hijo',
-                    description: null,
-                    size: 1,
-                    required: true,
-                    showIcon: true,
-                    searchable: true,
-                },
-            },
-        },
-    },
-    size: { blockNum: 4, blockSize: 210, spacingSize: 20 },
-};
-describe('CBR posventa postview', () => {
-    it('renders the submitted incidents read-only', async () => {
-        const { container } = render(_jsx(App, { formData: POSVENTA_FORM, valuesData: POSVENTA_VALUES, idOrganization: 'melendez', postview: true, internal: true, isWidget: true, editable: false }));
-        await waitFor(() => {
-            expect(container.textContent).toContain('Incidencia 1');
-        });
-        expect(container.textContent).toContain('GRAN HUMEDAD!!!');
-        expect(screen.getByDisplayValue('Zona de Oficios')).toBeInTheDocument();
-        expect(screen.getByDisplayValue('CIELOS')).toBeInTheDocument();
-        expect(screen.getByDisplayValue('Cielo Falso')).toBeInTheDocument();
-    });
-});

package/dist/Utils/CBRFunctions.test.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/Utils/CBRFunctions.test.js

@@ -1,123 +0,0 @@
-import { createNextState } from '@reduxjs/toolkit';
-import { describe, expect, test } from 'vitest';
-import CBRFormStepTypes from '../constants/CBRFormStepTypes';
-import { calcCbrForm } from './CBRFunctions';
-const INCIDENT = {
-    idSpaceStep: 'CBR_TIPO_ESPACIO-space1',
-    idElementStep: 'CBR_LOCATIVAS-element1',
-    idCommentStep: 'CBR_COMENTARIO-comment1',
-    num: 1,
-};
-/** Second element level, reached through the element value's `subStep` pointer. */
-const ID_SUB_ELEMENT_STEP = 'CBR_LOCATIVAS-subElement1';
-const FORM_VALUES = {
-    CBR_INCIDENCIAS: [INCIDENT],
-    [INCIDENT.idSpaceStep]: { id: '35362', label: 'Sala' },
-    [INCIDENT.idCommentStep]: 'GRAN HUMEDAD',
-    [INCIDENT.idElementStep]: {
-        id: '06',
-        label: 'CIELOS',
-        subStep: ID_SUB_ELEMENT_STEP,
-    },
-    [ID_SUB_ELEMENT_STEP]: { id: '0601', label: 'Cielo Falso' },
-};
-function buildForm() {
-    return {
-        name: 'Formulario PosVenta',
-        firstSection: 'FIRST',
-        sections: {
-            FIRST: {
-                id: 'FIRST',
-                name: '',
-                nextSection: null,
-                steps: ['CBR_INCIDENCIAS'],
-            },
-        },
-        steps: {
-            CBR_INCIDENCIAS: {
-                id: 'CBR_INCIDENCIAS',
-                type: CBRFormStepTypes.CBR_INCIDENCIAS,
-                label: 'Incidencias',
-                description: null,
-                addBtnLabel: 'Agregar',
-                required: true,
-                unitLabel: 'Incidencia',
-                dependencies: ['CBR_PROYECTO'],
-                spaceStep: {
-                    label: 'Espacio',
-                    description: null,
-                    size: 1,
-                    required: true,
-                    showIcon: true,
-                    searchable: true,
-                },
-                commentStep: {
-                    label: 'Comentario',
-                    description: null,
-                    size: 1,
-                    required: true,
-                },
-                elementStep: {
-                    label: 'Elemento',
-                    description: null,
-                    size: 1,
-                    required: true,
-                    showIcon: true,
-                    searchable: true,
-                    subStep: {
-                        label: 'Elemento Hijo',
-                        description: null,
-                        size: 1,
-                        required: true,
-                        showIcon: true,
-                        searchable: true,
-                    },
-                },
-            },
-        },
-        size: { blockNum: 4, blockSize: 210, spacingSize: 20 },
-    };
-}
-describe('calcCbrForm', function () {
-    test('expands every incident into its own space, comment and element steps', () => {
-        const result = calcCbrForm(buildForm(), FORM_VALUES);
-        expect(result.steps[INCIDENT.idSpaceStep]).toMatchObject({
-            id: INCIDENT.idSpaceStep,
-            type: CBRFormStepTypes.CBR_TIPO_ESPACIO,
-        });
-        expect(result.steps[INCIDENT.idCommentStep]).toMatchObject({
-            id: INCIDENT.idCommentStep,
-            type: CBRFormStepTypes.CBR_COMENTARIO,
-        });
-        expect(result.steps[INCIDENT.idElementStep]).toMatchObject({
-            id: INCIDENT.idElementStep,
-            type: CBRFormStepTypes.CBR_LOCATIVAS,
-            subStep: ID_SUB_ELEMENT_STEP,
-        });
-        expect(result.steps[ID_SUB_ELEMENT_STEP]).toMatchObject({
-            id: ID_SUB_ELEMENT_STEP,
-            type: CBRFormStepTypes.CBR_LOCATIVAS,
-        });
-    });
-    test('leaves the form it was given untouched', () => {
-        const form = buildForm();
-        calcCbrForm(form, FORM_VALUES);
-        expect(Object.keys(form.steps)).toEqual(['CBR_INCIDENCIAS']);
-    });
-    /**
-     * The caller hands the form straight out of `createNextState`, whose result Immer deep-freezes, so
-     * expanding the incidents by writing into that same `steps` object throws and leaves the form stuck
-     * loading forever.
-     */
-    test('expands a form frozen by createNextState', () => {
-        const frozenForm = createNextState(buildForm(), (draft) => {
-            draft.steps.CBR_INCIDENCIAS.idSection = 'FIRST';
-        });
-        expect(Object.isFrozen(frozenForm.steps)).toBe(true);
-        const result = calcCbrForm(frozenForm, FORM_VALUES);
-        expect(result.steps[INCIDENT.idSpaceStep]).toBeDefined();
-        expect(result.steps[INCIDENT.idCommentStep]).toBeDefined();
-        expect(result.steps[INCIDENT.idElementStep]).toBeDefined();
-        expect(result.steps[ID_SUB_ELEMENT_STEP]).toBeDefined();
-    });
-});