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

package/dist/FormSteps/StepFunctions.js

@@ -1,4 +1,3 @@
-import { NumberStepType, } from '../@Types/FormStep';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueDataTypes, EntityValueOptionTypes, OptionTypes, } from '../constants/FormStepTypes';
 import CBRFormStepTypes from '../constants/CBRFormStepTypes';
 import AYFFormStepTypes from '../constants/AYFFormStepTypes';
@@ -88,8 +87,6 @@ function recursivelyCheckOpenSize(idStep, steps, values) {
             return size;
         }
         case FormStepTypes.DATEPICKER:
-        case FormStepTypes.LOCATION:
-        case FormStepTypes.NUMBER:
         case FormStepTypes.TEXTINPUT: {
             return step.size;
         }
@@ -100,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:
@@ -120,17 +175,6 @@ export const calcDefaultValue = (step) => {
                 return getRawText();
             else
                 return '';
-        case FormStepTypes.LOCATION:
-            return step.defaultValue ?? null;
-        case FormStepTypes.NUMBER: {
-            const numStep = step;
-            if (numStep.numberType === NumberStepType.MONEY ||
-                numStep.numberType === NumberStepType.MEASURE ||
-                numStep.numberType === NumberStepType.UNIT_PRICE) {
-                return numStep.defaultValue ?? null;
-            }
-            return numStep.defaultValue ?? '';
-        }
         case FormStepTypes.RATING:
         case FormStepTypes.DATEPICKER:
         case FormStepTypes.DATEPICKER_RANGE:

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,11 +128,11 @@ 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': {
-        color: 'rgb(0,0,0,0.4)',
+    '&.Erk-MuiPickerDay-dayOutsideMonth': {
+        color: theme.palette.text.disabled,
         '&.Mui-selected': {
             color: theme.palette.primary.contrastText,
         },
@@ -169,14 +171,14 @@ 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'],
                 },
                 layout: {
                     sx: {
                         //Pasar esto al componente de layout?
-                        backgroundColor: '#ffffff',
+                        backgroundColor: 'background.paper',
                         textTransform: 'capitalize',
                         '& .Erk-MuiDayCalendar-weekDayLabel': {
                             gridColumn: 1,
@@ -229,13 +231,13 @@ 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'],
                 },
                 layout: {
                     sx: {
-                        backgroundColor: '#ffffff',
+                        backgroundColor: 'background.paper',
                         textTransform: 'capitalize',
                         '& .Erk-MuiDayCalendar-weekDayLabel': {
                             cursor: 'default',

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,11 +71,11 @@ 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': {
-        color: 'rgb(0,0,0,0.4)',
+    '&.Erk-MuiDateRangePickerDay-dayOutsideMonth': {
+        color: theme.palette.text.disabled,
         '&.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];
@@ -151,7 +152,7 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
             shortcuts: shortcuts ? { items: shortcuts } : undefined,
             layout: {
                 sx: {
-                    backgroundColor: '#ffffff',
+                    backgroundColor: 'background.paper',
                     textTransform: 'capitalize',
                     '& .Erk-MuiDayCalendar-weekDayLabel': {
                         cursor: 'default',

package/dist/Shared/ErkTimePicker/ErkTimePicker.js

@@ -46,6 +46,7 @@ function CustomSelect({ value, onChange, label, error, required, pickDays, helpe
                         },
                     ], style: { zIndex: 1301 }, children: _jsxs("div", { className: styles.container, style: {
                             paddingTop: error && helperText ? '0px' : '30px',
+                            backgroundColor: palette.background.paper,
                         }, children: [error && helperText && (_jsx("div", { className: styles.errorMessage, style: {
                                     color: palette.error.main,
                                 }, children: helperText })), pickDays && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "D\u00EDas", type: "number", labelMargin: 0, value: (value?.days ?? minDays) + '', onChange: (event) => handleChange({ ...value, days: parseInt(event.target.value) }), slotProps: { htmlInput: { min: minDays, max: maxDays } } }) })), pickHours && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { label: "Horas", type: "number", labelMargin: 0, value: (value?.hours ?? minHours) + '', onChange: (event) => handleChange({ ...value, hours: parseInt(event.target.value) }), slotProps: { htmlInput: { min: minHours, max: maxHours } } }) })), pickMinutes && (_jsx("div", { className: styles.numberPickerContainer, children: _jsx(StyledTextField, { type: "number", label: "Minutos", labelMargin: 0, slotProps: { htmlInput: { min: minMinutes, max: maxMinutes } }, value: (value?.minutes ?? minMinutes) + '', onChange: (event) => handleChange({ ...value, minutes: parseInt(event.target.value) }) }) })), working === undefined && (_jsxs("div", { className: styles.workingContainer, children: ["H\u00E1biles:", _jsx(ErkToggle, { checked: !!value?.working, disabled: working !== undefined, onChange: (working) => {

package/dist/Shared/ErkTimePicker/ErkTimePicker.module.css

@@ -6,7 +6,6 @@
     border-radius: 10px;
     overflow: hidden;
     position: relative;
-    background-color: white;
     width: 130px;
     padding: 0px 35px 30px 30px;
     display: flex;

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

@@ -0,0 +1,11 @@
+import { FormStyle } from '../@Types/Form';
+/**
+ * Inline surface for "pill" containers (mapper elements, incidents) that sit on a step.
+ * The tint and border are mixed from the form's own colors so they work on any form style,
+ * including the admin's dark scheme, instead of a fixed light grey.
+ * On the default light style this resolves to roughly #f0f0f0 / #d6d6d6, the previous fixed values.
+ */
+export declare function pillSurfaceStyle(formStyle: FormStyle): {
+    backgroundColor: string;
+    borderColor: string;
+};

package/dist/Utils/SurfaceStyle.js

@@ -0,0 +1,14 @@
+/**
+ * Inline surface for "pill" containers (mapper elements, incidents) that sit on a step.
+ * The tint and border are mixed from the form's own colors so they work on any form style,
+ * including the admin's dark scheme, instead of a fixed light grey.
+ * On the default light style this resolves to roughly #f0f0f0 / #d6d6d6, the previous fixed values.
+ */
+export function pillSurfaceStyle(formStyle) {
+    const base = formStyle.stepBackgroundColor;
+    const text = formStyle.textColor;
+    return {
+        backgroundColor: `color-mix(in srgb, ${text} 7%, ${base})`,
+        borderColor: `color-mix(in srgb, ${text} 20%, ${base})`,
+    };
+}