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

package/dist/FormSteps/EntityValueStep/MaterialEntityValuePickerStep/MaterialEntityValuePickerStep.js

@@ -5,7 +5,7 @@ import SmartSelect from '../../SmartSelectStep/MaterialSmartSelectStep/MaterialS
 import widgetInstance from '../../../Utils/AxiosWidget';
 import FormContext, { IdFormContext } from '../../../Contexts/FormContext';
 import StepFillerContainer from '../../Utils/@StepFiller/StepFiller';
-import { isStepHiddenByCondition, recursivelyCalcConditionSteps, selectDependencies } from '../../StepHooks';
+import { recursivelyCalcConditionSteps, selectDependencies } from '../../StepHooks';
 import { useApiSubscribe, useAppSelector } from '../../../hooks';
 import MaterialEntityValueDialog from './MaterialEntityValueDialog/MaterialEntityValueDialog';
 import InputIcon from '../../../Shared/InputIcon/InputIcon';
@@ -13,8 +13,6 @@ import { evaluateCondition } from '../../StepFunctions';
 import StepComponent from '../../Step';
 import ErkValueTypes from '../../../constants/ErkValueTypes';
 import { IntegrationsApi } from '../../../Services/IntegrationService';
-import { entityValueDependencyValue } from '../entityValueDependencyValue';
-import { entityValuePickerWatchedSteps } from '../entityValuePickerWatchedSteps';
 function EntityValuePickerStep({ step, editable }) {
     const form = useContext(FormContext);
     const subscribe = useApiSubscribe();
@@ -27,23 +25,8 @@ function EntityValuePickerStep({ step, editable }) {
         }))) ?? []);
     }, [subscribe, idForm]);
     const getOptions = useCallback(async (step, dependencyStore, ids) => {
-        return await getEntityValueOptions(step, dependencyStore, ids, fetchFilterIntegration, form);
-    }, [fetchFilterIntegration, form]);
-    // The visibility of a filter's step decides whether that filter applies, so the steps its condition
-    // reads must trigger a refetch too — see `isStepHiddenByCondition`.
-    const getOptionalDependencies = useCallback((picker) => {
-        const watched = entityValuePickerWatchedSteps(picker);
-        for (const idWatched of [...watched]) {
-            for (const idCondition of recursivelyCalcConditionSteps(form.steps[idWatched]?.condition)) {
-                if (idCondition === picker.id || watched.includes(idCondition))
-                    continue;
-                if (picker.dependencies?.includes(idCondition))
-                    continue;
-                watched.push(idCondition);
-            }
-        }
-        return watched;
-    }, [form]);
+        return await getEntityValueOptions(step, dependencyStore, ids, fetchFilterIntegration);
+    }, [fetchFilterIntegration]);
     const [dialogs, setDialogs] = useState();
     const dialogsIdStepDeps = useMemo(() => {
         const ids = [];
@@ -128,7 +111,7 @@ function EntityValuePickerStep({ step, editable }) {
                     } }) })] }));
 }
 export default EntityValuePickerStep;
-const getEntityValueOptions = async (step, dependencyStore, { idOrganization, idCurrentAgent, }, fetchFilterIntegration, form) => {
+const getEntityValueOptions = async (step, dependencyStore, { idOrganization, idCurrentAgent, }, fetchFilterIntegration) => {
     if (!idOrganization)
         return null;
     let urlPath = '';
@@ -190,12 +173,14 @@ const getEntityValueOptions = async (step, dependencyStore, { idOrganization, id
                 break;
             }
             case EntityValueDataTypes.STEP: {
-                const currentValue = entityValueDependencyValue(dependencyStore[filter.idStep]);
-                if (currentValue !== undefined) {
-                    params.set(filter.idProperty, currentValue);
+                const currentValue = dependencyStore[filter.idStep]?.value;
+                if (currentValue) {
+                    if (typeof currentValue === 'string')
+                        params.set(filter.idProperty, currentValue);
+                    else
+                        params.set(filter.idProperty, currentValue._id ?? currentValue.id);
                 }
-                else if (filter.required && !isStepHiddenByCondition(filter.idStep, form, dependencyStore)) {
-                    // A required filter blocks only while its step can still be answered.
+                else if (filter.required) {
                     return null;
                 }
                 break;
@@ -216,3 +201,18 @@ const getEntityValueOptions = async (step, dependencyStore, { idOrganization, id
     });
     return response.data.filter((option) => step.options[option._id]?.type !== EntityValueOptionTypes.HIDE);
 };
+const getOptionalDependencies = (step) => {
+    const optional = [];
+    for (const filter of step.filters) {
+        switch (filter.type) {
+            case EntityValueDataTypes.STEP: {
+                if (filter.idStep && !filter.required && !step.dependencies?.includes(filter.idStep))
+                    optional.push(filter.idStep);
+                break;
+            }
+            default:
+                break;
+        }
+    }
+    return optional;
+};

package/dist/FormSteps/Step.js

@@ -24,10 +24,6 @@ import CustomContext from '../Contexts/CustomContext';
 import { selectOriginalValue, useCondition } from './StepHooks';
 import TimePickerStep from './TimePickerStep/TimePickerStep';
 import PhoneInputStep from './PhoneInputStep/PhoneInputStep';
-import LocationStepComponent from './LocationStep/LocationStep';
-import NumberStepComponent from './NumberStep/NumberStep';
-import BookingStepComponent from './BookingStep/BookingStep';
-import AvailabilityStepComponent from './AvailabilityStep/AvailabilityStep';
 function StepComponent({ step, ...props }) {
     const { postview, partial } = useAppSelector((state) => state.global);
     const { customSteps, customClientInfoStep } = useContext(CustomContext);
@@ -79,18 +75,6 @@ function StepComponent({ step, ...props }) {
         case FormStepTypes.DATEPICKER: {
             return _jsx(DatePickerStep, { ...props, step: step, editable: editable });
         }
-        case FormStepTypes.LOCATION: {
-            return _jsx(LocationStepComponent, { ...props, step: step, editable: editable });
-        }
-        case FormStepTypes.NUMBER: {
-            return _jsx(NumberStepComponent, { ...props, step: step, editable: editable });
-        }
-        case FormStepTypes.BOOKING: {
-            return _jsx(BookingStepComponent, { ...props, step: step, editable: editable });
-        }
-        case FormStepTypes.AVAILABILITY: {
-            return _jsx(AvailabilityStepComponent, { ...props, step: step, editable: editable });
-        }
         case FormStepTypes.DATEPICKER_RANGE: {
             return _jsx(DatePickerRangeStep, { ...props, step: step, editable: editable });
         }

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;
         }
@@ -178,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,4 +1,3 @@
-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';
@@ -528,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,
@@ -566,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/StepHooks.d.ts

@@ -34,13 +34,6 @@ export interface StepDependency {
     handleStepDep: (value: any) => void;
 }
 export declare const useStepDependency: (step: GBaseStep, defaultValue?: any) => StepDependency;
-/**
- * Whether `idStep` is currently kept off the form by its own visibility condition. A step that is not
- * shown cannot be answered, so nothing may wait for it: a required entity filter pointing at it does
- * not apply, and it never reads as a missing dependency. When the condition cannot be decided yet (a
- * step it reads is not in the store) the step counts as shown, keeping the conservative behaviour.
- */
-export declare const isStepHiddenByCondition: (idStep: string, form: Form, dependencies: DependencyStore) => boolean;
 export declare const selectStepDependencies: ((state: RootState, _step: GBaseStep, form: Form) => {
     invalids: string[];
     emptyDep: boolean;
@@ -74,20 +67,6 @@ export declare const selectStepDependencies: ((state: RootState, _step: GBaseSte
     memoize: typeof import("reselect").weakMapMemoize;
     argsMemoize: typeof import("reselect").weakMapMemoize;
 };
-/**
- * The steps `idStep` depends on, transitively: every dependency's own dependencies come before it,
- * and every id is answered exactly once. `idStep` itself is never listed — a step is not a
- * dependency of itself, even when a draft points it back at itself.
- *
- * A saved form is a DAG: the backend recomputes and validates `step.dependencies` on save. The
- * editor's live preview renders unsaved drafts though, where a filter or a path hop can still point
- * at the step that holds it, or close a cycle with another step. The walk must therefore terminate
- * on any graph, cyclic included: a step is marked visited before it is walked and is never walked
- * or listed twice, so every edge is followed at most once.
- *
- * Exported for the unit test; it is internal to this module and not part of the package's surface.
- */
-export declare const calcDeepDependencies: (idStep: string, form: Form) => string[];
 export interface UseFormStepOptions<ValueType> {
     defaultValue: ValueType;
     /** If true, will not trigger onChange until the user has finished typing */

package/dist/FormSteps/StepHooks.js

@@ -8,7 +8,6 @@ import { useController } from 'react-hook-form';
 import ConditionTypes from '../constants/ConditionTypes';
 import FormStepTypes, { ApiSelectorOptionTypes, ClassifierOptionTypes, EntityValueOptionTypes, } from '../constants/FormStepTypes';
 import { SizeChangeContext } from './Utils/@StepFiller/StepFillerContext';
-import { entityValuePickerBlockingSteps } from './EntityValueStep/entityValuePickerWatchedSteps';
 const selectIsDependency = createSelector([
     (state) => state.site.dependencies,
     (_state, step) => step,
@@ -48,20 +47,6 @@ export const useStepDependency = (step, defaultValue) => {
         originalValue: originalValue ?? defaultValue ?? calcDefaultValue(step),
     };
 };
-/**
- * Whether `idStep` is currently kept off the form by its own visibility condition. A step that is not
- * shown cannot be answered, so nothing may wait for it: a required entity filter pointing at it does
- * not apply, and it never reads as a missing dependency. When the condition cannot be decided yet (a
- * step it reads is not in the store) the step counts as shown, keeping the conservative behaviour.
- */
-export const isStepHiddenByCondition = (idStep, form, dependencies) => {
-    const target = form.steps[idStep];
-    if (!target?.condition)
-        return false;
-    if (recursivelyCalcConditionSteps(target.condition).some((id) => dependencies[id] === undefined))
-        return false;
-    return !evaluateCondition(target.condition, dependencies);
-};
 export const selectStepDependencies = createSelector([
     (state) => state.site.dependencies,
     (_state, step) => step,
@@ -71,8 +56,6 @@ export const selectStepDependencies = createSelector([
     let emptyDep = false;
     /** Show deep error changes even if not in dependencies */
     for (const idDep of calcDeepDependencies(step.id, form)) {
-        if (isStepHiddenByCondition(idDep, form, dependencies))
-            continue;
         const dependency = dependencies[idDep];
         if (dependency?.value === null && form.steps[idDep]) {
             invalids.push(idDep);
@@ -82,45 +65,15 @@ export const selectStepDependencies = createSelector([
     }
     return { invalids, emptyDep };
 });
-/**
- * The steps `idStep` depends on, transitively: every dependency's own dependencies come before it,
- * and every id is answered exactly once. `idStep` itself is never listed — a step is not a
- * dependency of itself, even when a draft points it back at itself.
- *
- * A saved form is a DAG: the backend recomputes and validates `step.dependencies` on save. The
- * editor's live preview renders unsaved drafts though, where a filter or a path hop can still point
- * at the step that holds it, or close a cycle with another step. The walk must therefore terminate
- * on any graph, cyclic included: a step is marked visited before it is walked and is never walked
- * or listed twice, so every edge is followed at most once.
- *
- * Exported for the unit test; it is internal to this module and not part of the package's surface.
- */
-export const calcDeepDependencies = (idStep, form) => {
-    const deps = [];
-    /** `idStep` starts out visited so a cycle back to it stops there and never lists it. */
-    const visited = new Set([idStep]);
-    const walk = (id) => {
-        const step = form.steps[id];
-        if (!step)
-            return;
-        /**
-         * An entity picker also gives up (its options resolve to null) while a path hop or a
-         * required STEP filter holds no value. Those are in `step.dependencies` once the form has
-         * been saved, but not in an unsaved draft, so they are added here to read as a missing
-         * dependency instead of as a failed load.
-         */
-        const idDeps = step.type === FormStepTypes.ENTITYVALUEPICKER
-            ? [...(step.dependencies ?? []), ...entityValuePickerBlockingSteps(step)]
-            : step.dependencies;
-        for (const dep of idDeps ?? []) {
-            if (visited.has(dep))
-                continue;
-            visited.add(dep);
-            walk(dep);
-            deps.push(dep);
+const calcDeepDependencies = (idStep, form, deps = []) => {
+    const step = form.steps[idStep];
+    if (step?.dependencies) {
+        for (const dep of step.dependencies) {
+            if (!deps.includes(dep)) {
+                deps.push(...calcDeepDependencies(dep, form, deps), dep);
+            }
         }
-    };
-    walk(idStep);
+    }
     return deps;
 };
 export const useFormStep = (step, { rules, debounce, sizeChange, defaultValue }) => {

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -1,10 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
-import { format as dateFnsFormat, isValid } from 'date-fns';
+import { 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, usePickerAdapter, } 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 }) => ({
@@ -138,18 +140,24 @@ const StyledDay = styled(MuiPickerDay)(({ theme }) => ({
 }));
 function CustomPickerField({ error, required, helperText, size = 'small', labelMargin = 5, inputRef, fullWidth = true, }) {
     const { value, fieldFormat, setOpen, disabled, readOnly, label } = usePickerContext();
+    // Format through the adapter so the LocalizationProvider locale applies (a bare date-fns
+    // `format` always used en-US, so Spanish users saw MM/dd/yyyy).
+    const adapter = usePickerAdapter();
     const { displayValue, isInvalid } = useMemo(() => {
         if (!value)
             return { displayValue: '', isInvalid: false };
         if (!isValid(value))
             return { displayValue: '', isInvalid: true };
         try {
-            return { displayValue: dateFnsFormat(value, fieldFormat ?? 'P'), isInvalid: false };
+            return {
+                displayValue: adapter.formatByString(value, fieldFormat ?? adapter.formats.keyboardDate),
+                isInvalid: false,
+            };
         }
         catch {
             return { displayValue: '', isInvalid: true };
         }
-    }, [value, fieldFormat]);
+    }, [value, fieldFormat, adapter]);
     const handleClick = () => {
         if (!disabled && !readOnly) {
             setOpen((prev) => !prev);

package/dist/Shared/ErkDatePicker/ErkDatePicker.locale.test.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import ErkDatePicker from './ErkDatePicker';
+import ErkDateRangePicker from '../ErkDateRangePicker/ErkDateRangePicker';
+/**
+ * The field text used to be built with a bare date-fns `format`, which ignores the
+ * LocalizationProvider locale and always printed en-US dates (MM/dd/yyyy).
+ */
+const setLanguages = (languages) => {
+    vi.spyOn(navigator, 'languages', 'get').mockReturnValue(languages);
+};
+const date = new Date(2026, 2, 9, 14, 5); // 9 de marzo de 2026, 14:05
+describe('date pickers follow the browser locale', () => {
+    afterEach(() => vi.restoreAllMocks());
+    it('shows dd/MM/yyyy for a Spanish browser', () => {
+        setLanguages(['es-CO', 'es']);
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { label: "Fecha", value: date, onChange: vi.fn() }) }));
+        expect(document.querySelector('input')?.value).toBe('09/03/2026');
+    });
+    it('shows MM/dd/yyyy for a US browser', () => {
+        setLanguages(['en-US', 'en']);
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { label: "Fecha", value: date, onChange: vi.fn() }) }));
+        expect(document.querySelector('input')?.value).toBe('03/09/2026');
+    });
+    it('shows a localized date-time for a Spanish browser', () => {
+        setLanguages(['es']);
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDatePicker, { pickTime: true, label: "Fecha y hora", value: date, onChange: vi.fn() }) }));
+        expect(document.querySelector('input')?.value).toMatch(/^09\/03\/2026 02:05 (p\. ?m\.|PM)$/i);
+    });
+    it('shows a dd/MM/yyyy range for a Spanish browser', () => {
+        setLanguages(['es-MX']);
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkDateRangePicker, { label: "Rango", value: [date, new Date(2026, 2, 20)], onChange: vi.fn() }) }));
+        expect(document.querySelector('input')?.value).toBe('09/03/2026 – 20/03/2026');
+    });
+});

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

@@ -1,9 +1,10 @@
 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 { format, isValid } from 'date-fns';
+import { DatePickerToolbar as MuiDatePickerToolbar, usePickerContext, usePickerAdapter, } from '@mui/x-date-pickers';
+import { MobileDateRangePicker as MuiDateRangePicker, } from '@mui/x-date-pickers-pro/MobileDateRangePicker';
+import { DateRangePickerDay as MuiDateRangePickerDay } from '@mui/x-date-pickers-pro';
+import { isValid } from 'date-fns';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
 const StyledDateRangePicker = styled(MuiDateRangePicker, {
@@ -85,6 +86,9 @@ const StyledDay = styled(MuiDateRangePickerDay)(({ theme }) => ({
 }));
 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();
+    // Format through the adapter so the LocalizationProvider locale applies (a bare date-fns
+    // `format` always used en-US, so Spanish users saw MM/dd/yyyy).
+    const adapter = usePickerAdapter();
     const { displayValue, isInvalid } = useMemo(() => {
         const [startDate, endDate] = value ?? [null, null];
         if (!startDate)
@@ -94,15 +98,15 @@ const CustomRangePickerField = React.forwardRef(function CustomRangePickerField(
         if (endDate && !isValid(endDate))
             return { displayValue: '', isInvalid: true };
         try {
-            const fmt = fieldFormat ?? 'P';
-            const start = format(startDate, fmt);
-            const end = endDate ? format(endDate, fmt) : '';
+            const fmt = fieldFormat ?? adapter.formats.keyboardDate;
+            const start = adapter.formatByString(startDate, fmt);
+            const end = endDate ? adapter.formatByString(endDate, fmt) : '';
             return { displayValue: end ? `${start} – ${end}` : start, isInvalid: false };
         }
         catch {
             return { displayValue: '', isInvalid: true };
         }
-    }, [value, fieldFormat]);
+    }, [value, fieldFormat, adapter]);
     const handleClick = () => {
         if (!disabled && !readOnly) {
             setOpen((prev) => !prev);
@@ -118,10 +122,10 @@ const CustomRangePickerField = React.forwardRef(function CustomRangePickerField(
             },
         } }));
 });
-const formatDate = (date, showYear) => {
+const formatDate = (adapter, date, showYear) => {
     if (!date || !isValid(date))
         return '';
-    return format(date, showYear ? 'PP' : 'dd MMM');
+    return adapter.formatByString(date, showYear ? adapter.formats.fullDate : 'dd MMM');
 };
 function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = 'small', labelMargin = 5, value, onChange, inputRef, shortcuts, label, required, ...others }) {
     // MUI X v9 no longer forwards `required` to the field-slot label when the field is a Material
@@ -129,6 +133,7 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
     // The picker's `label` does propagate to the field via the picker context, so bake the marker
     // into the label to keep the required indicator visible.
     const displayLabel = required && typeof label === 'string' ? `${label} *` : label;
+    const adapter = usePickerAdapter();
     const [startDate, endDate] = value ?? [null, null];
     const hasCompleteRange = Boolean(startDate) && Boolean(endDate);
     const showYear = startDate &&
@@ -136,8 +141,8 @@ function CustomDatePickerRange({ error, disabled, readOnly, helperText, size = '
         isValid(startDate) &&
         isValid(endDate) &&
         startDate.getFullYear() !== endDate.getFullYear();
-    const formattedStartDate = formatDate(startDate, Boolean(showYear));
-    const formattedEndDate = formatDate(endDate, Boolean(showYear));
+    const formattedStartDate = formatDate(adapter, startDate, Boolean(showYear));
+    const formattedEndDate = formatDate(adapter, endDate, Boolean(showYear));
     const toolbarText = hasCompleteRange ? `${formattedStartDate} – ${formattedEndDate}` : '– –';
     return (_jsx(StyledDateRangePicker, { ...others, label: displayLabel, value: value, onChange: onChange, size: size, disabled: disabled, readOnly: readOnly, reduceAnimations: true, showDaysOutsideCurrentMonth: true, slots: {
             field: CustomRangePickerField,

package/dist/Shared/ErkSelect/ErkSelect.js

@@ -109,7 +109,15 @@ function CustomSelect({ label, error, value, loading, onChange, children, requir
                                 setOpen((open) => !open);
                         }
                     }, children: _jsx(IconComponent, { size: size === 'small' ? 22 : 26 }) })) : undefined, onFocus: (e) => {
-                    if (!e.relatedTarget?.closest('.Erk-MuiPaper-root')) {
+                    // Open only when focus arrives by keyboard from another control. A focus with no
+                    // relatedTarget is either a mouse press (MUI's own mousedown already opens the menu)
+                    // or the focus trap handing focus back after the menu closed; opening on that one
+                    // reopened the menu right after a backdrop click and kept it stuck open.
+                    const from = e.relatedTarget;
+                    const cameFromAnotherControl = from !== null &&
+                        from.closest('.Erk-MuiPaper-root') === null &&
+                        !e.currentTarget.parentElement?.contains(from);
+                    if (cameFromAnotherControl) {
                         setOpen(true);
                     }
                     others.onFocus?.(e);

package/dist/Shared/ErkSelect/ErkSelect.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import '../../Utils/MuiClassnameSetup';

package/dist/Shared/ErkSelect/ErkSelect.test.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import '../../Utils/MuiClassnameSetup';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import ErkSelect from './ErkSelect';
+import ErkMenuItem from '../ErkMenuItem';
+function renderSelect() {
+    render(_jsxs(MaterialProviders, { formStyle: InternalFormStyle, children: [_jsx("input", { "data-testid": "before" }), _jsxs(ErkSelect, { label: "Opci\u00F3n", onChange: vi.fn(), children: [_jsx(ErkMenuItem, { value: "a", children: "A" }), _jsx(ErkMenuItem, { value: "b", children: "B" })] })] }));
+}
+// The inline (disablePortal) menu marks the rest of the tree aria-hidden while open, so the
+// combobox is read from the raw DOM; the paper also stays mounted through its exit transition,
+// so the open state comes from aria-expanded rather than from the listbox being present.
+const combobox = () => document.querySelector('[role=combobox]');
+const isOpen = () => combobox().getAttribute('aria-expanded') === 'true';
+const openSelect = () => {
+    fireEvent.mouseDown(combobox());
+};
+const flush = () => act(() => new Promise((resolve) => setTimeout(resolve, 50)));
+describe('ErkSelect open/close', () => {
+    it('opens on mouse down', () => {
+        renderSelect();
+        openSelect();
+        expect(isOpen()).toBe(true);
+    });
+    it('stays closed after clicking the backdrop (does not reopen on focus restore)', async () => {
+        renderSelect();
+        openSelect();
+        const backdrop = document.querySelector('.Erk-MuiBackdrop-root');
+        fireEvent.click(backdrop);
+        await flush();
+        // The focus trap gives focus back to the combobox with no relatedTarget (the mouse left focus on body).
+        fireEvent.focus(combobox(), { relatedTarget: null });
+        await flush();
+        expect(isOpen()).toBe(false);
+    });
+    it('stays closed after picking an option', async () => {
+        renderSelect();
+        openSelect();
+        fireEvent.click(document.querySelector('[role=option][data-value=b]'));
+        await flush();
+        expect(isOpen()).toBe(false);
+    });
+    it('opens when reached by keyboard from another field', () => {
+        renderSelect();
+        const before = screen.getByTestId('before');
+        before.focus();
+        fireEvent.focus(combobox(), { relatedTarget: before });
+        expect(isOpen()).toBe(true);
+    });
+});

package/dist/Shared/ErkTimePicker/ErkTimePicker.js

@@ -62,7 +62,14 @@ function CustomSelect({ value, onChange, label, error, required, pickDays, helpe
                                 if (!readOnly && !disabled)
                                     setOpen(!open);
                             }, children: _jsx(ClockIcon, { size: size === 'small' ? 22 : 26 }) }), onFocus: (e) => {
-                            if (!e.relatedTarget?.closest('.Erk-MuiPaper-root') && !readOnly && !disabled) {
+                            // Same rule as ErkSelect: open only when focus arrives from another control. A focus
+                            // with no relatedTarget is the hidden menu handing focus back on close, and opening on
+                            // it reopened the popper right after every click away.
+                            const from = e.relatedTarget;
+                            const cameFromAnotherControl = from !== null &&
+                                from.closest('.Erk-MuiPaper-root') === null &&
+                                !e.currentTarget.parentElement?.contains(from);
+                            if (cameFromAnotherControl && !readOnly && !disabled) {
                                 setOpen(true);
                             }
                         }, onOpen: () => {

package/dist/Shared/ErkTimePicker/ErkTimePicker.test.d.ts

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom';
+import '../../Utils/MuiClassnameSetup';

package/dist/Shared/ErkTimePicker/ErkTimePicker.test.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, fireEvent, act } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+import '@testing-library/jest-dom';
+import '../../Utils/MuiClassnameSetup';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import ErkTimePicker from './ErkTimePicker';
+const combobox = () => document.querySelector('[role=combobox]');
+const isOpen = () => combobox().getAttribute('aria-expanded') === 'true';
+const flush = () => act(() => new Promise((resolve) => setTimeout(resolve, 50)));
+describe('ErkTimePicker open/close', () => {
+    it('closes on click away and stays closed when focus returns to the trigger', async () => {
+        render(_jsxs(MaterialProviders, { formStyle: InternalFormStyle, children: [_jsx("button", { "data-testid": "outside", children: "fuera" }), _jsx(ErkTimePicker, { label: "Tiempo", pickHours: true, pickMinutes: true, onChange: vi.fn() })] }));
+        fireEvent.mouseDown(combobox());
+        await flush();
+        expect(isOpen()).toBe(true);
+        fireEvent.mouseDown(document.querySelector('[data-testid=outside]'));
+        await flush();
+        fireEvent.focus(combobox(), { relatedTarget: null });
+        await flush();
+        expect(isOpen()).toBe(false);
+    });
+});