@arquimedes.co/eureka-forms 3.0.67 → 3.0.68

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -1,8 +1,8 @@
 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, PickerDay as MuiPickerDay, renderTimeViewClock, } from '@mui/x-date-pickers';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
 const StyledDateTimePicker = styled(MuiDateTimePicker, {
@@ -138,18 +138,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.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

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.js

@@ -1,9 +1,9 @@
 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 { DatePickerToolbar as MuiDatePickerToolbar, usePickerContext, usePickerAdapter, } 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 { isValid } from 'date-fns';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
 const StyledDateRangePicker = styled(MuiDateRangePicker, {
@@ -85,6 +85,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 +97,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 +121,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 +132,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 +140,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);
+    });
+});

package/dist/Utils/LocaleUtils.d.ts

@@ -1,2 +1,3 @@
 import { Locale } from 'date-fns';
+/** date-fns locale for the browser language: exact tag first, then its base language (es-CO → es), else Spanish. */
 export declare const getLocale: () => Locale;

package/dist/Utils/LocaleUtils.js

@@ -1,12 +1,19 @@
 import { enUS } from 'date-fns/locale/en-US';
+import { enGB } from 'date-fns/locale/en-GB';
 import { es } from 'date-fns/locale/es';
 const localeMap = {
     en: enUS,
     'en-US': enUS,
+    'en-GB': enGB,
     es,
 };
+const browserLanguage = () => navigator.languages?.length
+    ? navigator.languages[0]
+    : (navigator.userLanguage ?? navigator.language ?? navigator.browserLanguage);
+/** date-fns locale for the browser language: exact tag first, then its base language (es-CO → es), else Spanish. */
 export const getLocale = () => {
-    return (localeMap[navigator.languages?.length
-        ? navigator.languages[0]
-        : (navigator.userLanguage ?? navigator.language ?? navigator.browserLanguage)] ?? localeMap.es);
+    const language = browserLanguage();
+    if (!language)
+        return es;
+    return localeMap[language] ?? localeMap[language.split('-')[0]] ?? es;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version": "3.0.67",
+  "version": "3.0.68",
   "scripts": {
     "watch": "node node_modules/@typescript/native/bin/tsc --noEmit --watch --project tsconfig.app.json",
     "start": "vite",