@arquimedes.co/eureka-forms 3.0.57-new-steps → 3.0.57

package/dist/FormSteps/StepFunctions.test.js

@@ -1,9 +1,8 @@
-import * as Steps from '../@Types/FormStep';
 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 () {
@@ -412,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({
@@ -497,13 +527,6 @@ describe('StepFunctions', function () {
             const defaultValue = calcDefaultValue(step);
             expect(defaultValue).toBe(null);
         });
-        test('Location step type', async () => {
-            const step = {
-                type: FormStepTypes.LOCATION,
-            };
-            const defaultValue = calcDefaultValue(step);
-            expect(defaultValue).toBe(null);
-        });
         test('Mapper, FileUpload, CBRFormStep types', async () => {
             const step1 = {
                 type: FormStepTypes.MAPPER,
@@ -535,52 +558,6 @@ describe('StepFunctions', function () {
             const defaultValue = calcDefaultValue(step);
             expect(defaultValue).toBeUndefined();
         });
-        test('Number step type without defaultValue', async () => {
-            const step1 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.INTEGER,
-            };
-            const step2 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.DECIMAL,
-            };
-            const step3 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.PERCENTAGE,
-            };
-            const step4 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.MONEY,
-            };
-            const step5 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.MEASURE,
-            };
-            const step6 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.UNIT_PRICE,
-            };
-            expect(calcDefaultValue(step1)).toBe('');
-            expect(calcDefaultValue(step2)).toBe('');
-            expect(calcDefaultValue(step3)).toBe('');
-            expect(calcDefaultValue(step4)).toBe(null);
-            expect(calcDefaultValue(step5)).toBe(null);
-            expect(calcDefaultValue(step6)).toBe(null);
-        });
-        test('Number step type with defaultValue', async () => {
-            const step1 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.INTEGER,
-                defaultValue: 42,
-            };
-            const step2 = {
-                type: FormStepTypes.NUMBER,
-                numberType: Steps.NumberStepType.MONEY,
-                defaultValue: { value: 100, currency: 'USD' },
-            };
-            expect(calcDefaultValue(step1)).toBe(42);
-            expect(calcDefaultValue(step2)).toEqual({ value: 100, currency: 'USD' });
-        });
     });
     describe('iterateNestedSteps', function () {
         test('should iterate over nested steps', async () => {

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/Shared/ErkDatePicker/ErkDatePicker.js

@@ -2,9 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { format as dateFnsFormat, isValid } from 'date-fns';
 import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
-import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, PickerDay as MuiPickerDay, renderTimeViewClock, } from '@mui/x-date-pickers';
+import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
+import { PickerDay as MuiPickerDay } from '@mui/x-date-pickers/PickerDay';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
+import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
 const StyledDateTimePicker = styled(MuiDateTimePicker, {
     shouldForwardProp: (propName) => propName !== 'size',
 })(({ disabled, readOnly, size }) => ({
@@ -126,10 +128,10 @@ const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '0.9rem',
     lineHeight: 'normal',
-    '&.Erk-MuiPickersDay-today': {
+    '&.Erk-MuiPickerDay-today': {
         backgroundColor: theme.palette.primary.main + '33',
     },
-    '&.Erk-MuiPickersDay-dayOutsideMonth': {
+    '&.Erk-MuiPickerDay-dayOutsideMonth': {
         color: 'rgb(0,0,0,0.4)',
         '&.Mui-selected': {
             color: theme.palette.primary.contrastText,
@@ -169,7 +171,7 @@ function CustomDatePicker({ error, required, disabled, readOnly, helperText, siz
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 orientation: _orientation, ...others }) {
     if (pickTime) {
-        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, label: label, disabled: disabled, readOnly: readOnly, showDaysOutsideCurrentMonth: true, slotProps: {
+        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, orientation: "portrait", ...others, label: label, disabled: disabled, readOnly: readOnly, showDaysOutsideCurrentMonth: true, slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },
@@ -229,7 +231,7 @@ orientation: _orientation, ...others }) {
             } }));
     }
     else {
-        return (_jsx(StyledDatePicker, { ...others, label: label, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
+        return (_jsx(StyledDatePicker, { ...others, label: label, size: size, reduceAnimations: true, orientation: "portrait", readOnly: readOnly, disabled: disabled, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-import { PickersShortcutsItem } from '@mui/x-date-pickers';
-import { MobileDateRangePickerProps as MuiDateRangePickerProps, DateRange } from '@mui/x-date-pickers-pro';
+import { MobileDateRangePickerProps as MuiDateRangePickerProps } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+import { DateRange } from '@mui/x-date-pickers-pro';
+import { PickersShortcutsItem } from '@mui/x-date-pickers/PickersShortcuts';
 import { ErkTextFieldProps } from '../ErkTextField/ErkTextField';
 interface ErkDateRangePickerProps extends Omit<MuiDateRangePickerProps, 'ref' | 'onChange' | 'value' | 'slotProps'>, Pick<ErkTextFieldProps, 'error' | 'required' | 'helperText' | 'size'> {
     onChange?: (dateRange: DateRange<Date>) => void;

package/dist/Shared/ErkDateRangePicker/ErkDateRangePicker.js

@@ -2,7 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
 import { DatePickerToolbar as MuiDatePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
-import { MobileDateRangePicker as MuiDateRangePicker, DateRangePickerDay as MuiDateRangePickerDay, } from '@mui/x-date-pickers-pro';
+import { MobileDateRangePicker as MuiDateRangePicker, } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro';
 import { format, isValid } from 'date-fns';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
@@ -70,10 +71,10 @@ const StyledDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
     fontWeight: 500,
     fontSize: '0.9rem',
     lineHeight: 'normal',
-    '&.Erk-MuiPickersDay-today:not(.Erk-MuiDateRangePickerDay-rangeIntervalDayHighlight)': {
+    '&.Erk-MuiDateRangePickerDay-today:not(.Erk-MuiDateRangePickerDay-rangeIntervalDayHighlight)': {
         backgroundColor: theme.palette.primary.main + '33',
     },
-    '&.Erk-MuiPickersDay-dayOutsideMonth': {
+    '&.Erk-MuiDateRangePickerDay-dayOutsideMonth': {
         color: 'rgb(0,0,0,0.4)',
         '&.Mui-selected': {
             color: theme.palette.primary.contrastText,
@@ -83,7 +84,7 @@ const StyledDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
         backgroundColor: theme.palette.primary.main + '1a',
     },
 }));
-const CustomRangePickerField = React.forwardRef(function CustomRangePickerField({ error, required, helperText, size = 'small', labelMargin = 5, fullWidth = true, inputRef, }, ref) {
+const CustomRangePickerField = React.forwardRef(function CustomRangePickerField({ error, required, helperText, size = 'small', labelMargin = 5, fullWidth = true, inputRef }, ref) {
     const { value, fieldFormat, setOpen, disabled, readOnly, label } = usePickerContext();
     const { displayValue, isInvalid } = useMemo(() => {
         const [startDate, endDate] = value ?? [null, null];

package/dist/Utils/CBRFunctions.js

@@ -1,17 +1,19 @@
 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, form.steps, formValues);
+                    handleAddIncident(incident, incidentStep, steps, formValues);
                 }
             }
         }
     }
-    return form;
+    return { ...form, steps };
 };
 const handleAddIncident = (incident, step, steps, formValues) => {
     const spaceStep = {

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

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

package/dist/Utils/CBRFunctions.test.js

@@ -0,0 +1,123 @@
+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();
+    });
+});

package/dist/Utils/MaterialProviders.js

@@ -42,6 +42,12 @@ function MaterialProviders({ children, formStyle = InternalFormStyle }) {
                     primary: formStyle.textColor,
                     secondary: formStyle.descriptionTextColor,
                 },
+                // Paper follows the form surface so menus, pickers and dialogs match a non-white form
+                // (the admin's dark scheme in particular) instead of MUI's default white.
+                background: {
+                    default: formStyle.standAloneBackgroundColor,
+                    paper: formStyle.backgroundColor,
+                },
             },
         }, DatePickersEs //Potencialmente cambiar esto dependiendo de la empresa?
         ), children: _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, adapterLocale: getLocale(), children: children }) }));

package/dist/constants/FormStepTypes.d.ts

@@ -21,11 +21,7 @@ export declare enum FormStepTypes {
     COLLAPSIBLE = "COLLAPSIBLE",
     MAPPER = "MAPPER",
     ENTITYVALUEPICKER = "ENTITYVALUEPICKER",
-    API_SELECTOR = "API_SELECTOR",
-    LOCATION = "LOCATION",
-    NUMBER = "NUMBER",
-    AVAILABILITY = "AVAILABILITY",
-    BOOKING = "BOOKING"
+    API_SELECTOR = "API_SELECTOR"
 }
 export declare enum OptionTypes {
     DEFAULT = "DEFAULT",

package/dist/constants/FormStepTypes.js

@@ -25,10 +25,6 @@ export var FormStepTypes;
     FormStepTypes["MAPPER"] = "MAPPER";
     FormStepTypes["ENTITYVALUEPICKER"] = "ENTITYVALUEPICKER";
     FormStepTypes["API_SELECTOR"] = "API_SELECTOR";
-    FormStepTypes["LOCATION"] = "LOCATION";
-    FormStepTypes["NUMBER"] = "NUMBER";
-    FormStepTypes["AVAILABILITY"] = "AVAILABILITY";
-    FormStepTypes["BOOKING"] = "BOOKING";
 })(FormStepTypes || (FormStepTypes = {}));
 export var OptionTypes;
 (function (OptionTypes) {

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/dist/index.lib.d.ts

@@ -1,8 +1,6 @@
 import EurekaForm, { AppProps as EurekaFormProps } from './App/App';
 import { StepProps } from './FormSteps/Step';
 import * as StepFunctions from './FormSteps/StepFunctions';
-import ErkBookingPicker, { ErkBookingPickerProps } from './Shared/ErkBookingPicker/ErkBookingPicker';
-import ErkAvailabilityPicker, { ErkAvailabilityPickerProps } from './Shared/ErkAvailabilityPicker/ErkAvailabilityPicker';
-export type { StepProps, EurekaFormProps, ErkBookingPickerProps, ErkAvailabilityPickerProps };
-export { EurekaForm, StepFunctions, ErkBookingPicker, ErkAvailabilityPicker };
+export type { StepProps, EurekaFormProps };
+export { EurekaForm, StepFunctions };
 export default EurekaForm;

package/dist/index.lib.js

@@ -1,6 +1,4 @@
 import EurekaForm from './App/App';
 import * as StepFunctions from './FormSteps/StepFunctions';
-import ErkBookingPicker from './Shared/ErkBookingPicker/ErkBookingPicker';
-import ErkAvailabilityPicker from './Shared/ErkAvailabilityPicker/ErkAvailabilityPicker';
-export { EurekaForm, StepFunctions, ErkBookingPicker, ErkAvailabilityPicker };
+export { EurekaForm, StepFunctions };
 export default EurekaForm;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.57-new-steps",
+  "version": "3.0.57",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",
@@ -16,7 +16,6 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@base-ui/react": "^1.6.0",
     "@reduxjs/toolkit": "2.11.2",
     "axios": "1.16.0",
     "date-fns": "4.1.0",
@@ -51,10 +50,10 @@
     "@eslint/eslintrc": "3.3.3",
     "@eslint/js": "9.39.1",
     "@faker-js/faker": "10.1.0",
-    "@mui/material": "^9.0.1",
-    "@mui/x-data-grid-pro": "^9.3.0",
-    "@mui/x-date-pickers": "^9.3.0",
-    "@mui/x-date-pickers-pro": "^9.3.0",
+    "@mui/material": "^9.2.0",
+    "@mui/x-data-grid-pro": "^9.10.1",
+    "@mui/x-date-pickers": "^9.10.1",
+    "@mui/x-date-pickers-pro": "^9.10.1",
     "@storybook/addon-docs": "^10.4.0",
     "@storybook/addon-onboarding": "^10.4.0",
     "@storybook/addon-themes": "^10.4.0",
@@ -98,8 +97,8 @@
   "peerDependencies": {
     "@emotion/react": "11.x.x",
     "@emotion/styled": "11.x.x",
-    "@mui/material": "^9.0.1",
-    "@mui/x-date-pickers": "^9.3.0",
+    "@mui/material": "^9.2.0",
+    "@mui/x-date-pickers": "^9.10.1",
     "react": "18 || 19",
     "react-dom": "18 || 19"
   },

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

@@ -1,48 +0,0 @@
-/**
- * @deprecated Renombrado a CalendarFormStep.
- * Este archivo existe solo para compatibilidad retroactiva.
- * Usar `CalendarFormStep.ts` directamente.
- */
-export type { AvailabilityStep } from './CalendarFormStep';
-export type { CalendarValue as AvailabilityValue } from './CalendarFormStep';
-export { CalendarEventCategory as AvailabilityEventCategory } from './CalendarFormStep';
-export { CalendarDefaultView } from './CalendarFormStep';
-export type { CalendarEventTemplate } from './CalendarFormStep';
-export type { CalendarEvent } from './CalendarFormStep';
-export declare enum AvailabilityMode {
-    WEEKLY = "WEEKLY",
-    SPECIFIC_DATES = "SPECIFIC_DATES",
-    COMBINED = "COMBINED"
-}
-export declare enum AvailabilityDayOfWeek {
-    MONDAY = 1,
-    TUESDAY = 2,
-    WEDNESDAY = 3,
-    THURSDAY = 4,
-    FRIDAY = 5,
-    SATURDAY = 6,
-    SUNDAY = 7
-}
-export interface AvailabilitySlot {
-    start: string;
-    end: string;
-}
-export interface AvailabilityDay {
-    day: AvailabilityDayOfWeek;
-    slots: AvailabilitySlot[];
-    recurrence?: string;
-}
-export interface AvailabilitySpecificDate {
-    date: string;
-    slots: AvailabilitySlot[];
-}
-export interface AvailabilityExclusion {
-    date?: string;
-    dateRange?: {
-        start: string;
-        end: string;
-    };
-    dayOfWeek?: AvailabilityDayOfWeek;
-    slots?: AvailabilitySlot[];
-    reason?: string;
-}