@beweco/aurora-ui 0.6.49 → 0.6.50

package/dist/index.cjs.js

@@ -6965,13 +6965,13 @@ var DayMonthPicker = function (_a) {
         }
         onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: null });
     };
-    var handleSingleChange = function (date) {
+    var handleSingleChange = React.useCallback(function (date) {
         onChange({
             type: "dayMonth",
             dayMonth: date,
             dayMonthRange: null,
         });
-    };
+    }, [onChange]);
     var handleRangeChange = function (range) {
         onChange({
             type: "dayMonthRange",
@@ -6983,34 +6983,50 @@ var DayMonthPicker = function (_a) {
     var pickerValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonth" ? value.dayMonth : null;
     var rangeValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonthRange" ? value.dayMonthRange : null;
     var containerRef = React.useRef(null);
-    // HeroUI DatePicker's onFocus uses React Aria's useFocusWithin internally, which only
-    // fires when focus ENTERS the component from outside — NOT when focus moves between
-    // internal segments (e.g., day → year). We attach a native focusin listener instead,
-    // which fires for every focus event inside the container, including segment-to-segment.
-    // When the sr-only year segment receives focus after the user types month+day,
-    // we dispatch keydown events to fill the year so that DatePicker's onChange can fire.
+    // When the user types day+month manually, React Aria auto-moves focus to the sr-only
+    // year segment. We detect this via native focusin (which fires for every segment-to-segment
+    // focus move, unlike React Aria's onFocus). Instead of dispatching synthetic KeyboardEvents
+    // (fragile — depends on React Aria's internal "ready" state), we read aria-valuenow from
+    // the day/month segments after a microtask tick (so React has flushed segment renders) and
+    // call handleSingleChange directly with a CalendarDate using the current year.
     React.useEffect(function () {
         var container = containerRef.current;
         if (!container)
             return;
         var handleFocusIn = function (e) {
-            var _a, _b;
             var target = e.target;
             if ((target === null || target === void 0 ? void 0 : target.getAttribute("data-type")) !== "year")
                 return;
-            // Skip if the year segment already has a numeric value (controlled picker)
-            var yearText = (_b = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
-            if (/^\d+$/.test(yearText))
-                return;
-            var year = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()).year.toString();
-            for (var _i = 0, year_1 = year; _i < year_1.length; _i++) {
-                var char = year_1[_i];
-                target.dispatchEvent(new KeyboardEvent("keydown", { key: char, bubbles: true, cancelable: true }));
-            }
+            if (target.getAttribute("aria-valuenow"))
+                return; // year already set, controlled picker
+            // Defer one tick so React finishes rendering the segment values from the last keydown
+            setTimeout(function () {
+                var dayEl = container.querySelector('[data-type="day"]');
+                var monthEl = container.querySelector('[data-type="month"]');
+                var yearEl = container.querySelector('[data-type="year"]');
+                var dayVal = dayEl === null || dayEl === void 0 ? void 0 : dayEl.getAttribute("aria-valuenow");
+                var monthVal = monthEl === null || monthEl === void 0 ? void 0 : monthEl.getAttribute("aria-valuenow");
+                // If year is now set (user typed it or calendar selection), don't override
+                if (yearEl === null || yearEl === void 0 ? void 0 : yearEl.getAttribute("aria-valuenow"))
+                    return;
+                if (!dayVal || !monthVal)
+                    return;
+                var day = parseInt(dayVal, 10);
+                var month = parseInt(monthVal, 10);
+                var year = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()).year;
+                if (isNaN(day) || isNaN(month))
+                    return;
+                try {
+                    handleSingleChange(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(year, month, day));
+                }
+                catch (_a) {
+                    // CalendarDate throws for invalid combos (e.g. Feb 30), ignore
+                }
+            }, 0);
         };
         container.addEventListener("focusin", handleFocusIn);
         return function () { return container.removeEventListener("focusin", handleFocusIn); };
-    }, []);
+    }, [handleSingleChange]);
     return (jsxRuntime.jsxs("div", { ref: containerRef, className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxRuntime.jsxs(react.RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsxRuntime.jsx(react.Radio, { value: "single", children: t.dayMonthSingleOption }), jsxRuntime.jsx(react.Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (pickerValue ? (jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-c")) : (jsxRuntime.jsx(DatePicker, { placeholderValue: currentYearDate, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-u"))) : (rangeValue ? (jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-c")) : (jsxRuntime.jsx(DateRangePicker, { placeholderValue: currentYearDate, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsxRuntime.jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-u")))] }));
 };
 
@@ -7490,14 +7506,21 @@ var NumberFilter = function (_a) {
 var DrawerFilters = function (_a) {
     var isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, config = _a.config, onApplyFilters = _a.onApplyFilters, onClearFilters = _a.onClearFilters, onCancel = _a.onCancel, className = _a.className, translations = _a.translations, initialValues = _a.initialValues;
     var _b = React.useState(initialValues !== null && initialValues !== void 0 ? initialValues : {}), filterValues = _b[0], setFilterValues = _b[1];
-    // Sync internal state when the drawer opens or when initialValues changes (e.g., external clear).
-    // useState only captures the initial value on first mount, so we need this effect to
-    // re-sync whenever the drawer opens with potentially updated external filter state.
+    // Tracks the last confirmed (applied) state. When the drawer reopens we restore this
+    // so the user sees what was last applied — not just the raw initialValues (which the
+    // parent can't easily reconstruct from the processed-string output of onApplyFilters).
+    var confirmedValuesRef = React.useRef(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+    // Sync when the parent changes initialValues externally (e.g., full reset from outside).
+    React.useEffect(function () {
+        confirmedValuesRef.current = initialValues !== null && initialValues !== void 0 ? initialValues : {};
+        setFilterValues(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+    }, [initialValues]);
+    // Restore last confirmed state each time the drawer opens.
     React.useEffect(function () {
         if (isOpen) {
-            setFilterValues(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+            setFilterValues(confirmedValuesRef.current);
         }
-    }, [isOpen, initialValues]);
+    }, [isOpen]);
     // Handle changes in individual filters
     var handleFilterChange = React.useCallback(function (filterKey, value) {
         setFilterValues(function (prev) {
@@ -7517,14 +7540,16 @@ var DrawerFilters = function (_a) {
             onOpenChange(false);
         }
     }, [onOpenChange]);
-    // Cancel and close drawer
+    // Cancel and close drawer — revert in-progress changes to last confirmed state
     var handleCancel = React.useCallback(function () {
+        setFilterValues(confirmedValuesRef.current);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onOpenChange(false);
     }, [onCancel, onOpenChange]);
     // Apply filters and process values
     var handleApplyFilters = React.useCallback(function () {
         var _a, _b;
+        confirmedValuesRef.current = filterValues;
         var processedFilters = {};
         var _loop_1 = function (key, value) {
             if (value === undefined || value === null) {

package/dist/index.esm.js

@@ -6966,13 +6966,13 @@ var DayMonthPicker = function (_a) {
         }
         onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: null });
     };
-    var handleSingleChange = function (date) {
+    var handleSingleChange = useCallback(function (date) {
         onChange({
             type: "dayMonth",
             dayMonth: date,
             dayMonthRange: null,
         });
-    };
+    }, [onChange]);
     var handleRangeChange = function (range) {
         onChange({
             type: "dayMonthRange",
@@ -6984,34 +6984,50 @@ var DayMonthPicker = function (_a) {
     var pickerValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonth" ? value.dayMonth : null;
     var rangeValue = (value === null || value === void 0 ? void 0 : value.type) === "dayMonthRange" ? value.dayMonthRange : null;
     var containerRef = useRef(null);
-    // HeroUI DatePicker's onFocus uses React Aria's useFocusWithin internally, which only
-    // fires when focus ENTERS the component from outside — NOT when focus moves between
-    // internal segments (e.g., day → year). We attach a native focusin listener instead,
-    // which fires for every focus event inside the container, including segment-to-segment.
-    // When the sr-only year segment receives focus after the user types month+day,
-    // we dispatch keydown events to fill the year so that DatePicker's onChange can fire.
+    // When the user types day+month manually, React Aria auto-moves focus to the sr-only
+    // year segment. We detect this via native focusin (which fires for every segment-to-segment
+    // focus move, unlike React Aria's onFocus). Instead of dispatching synthetic KeyboardEvents
+    // (fragile — depends on React Aria's internal "ready" state), we read aria-valuenow from
+    // the day/month segments after a microtask tick (so React has flushed segment renders) and
+    // call handleSingleChange directly with a CalendarDate using the current year.
     useEffect(function () {
         var container = containerRef.current;
         if (!container)
             return;
         var handleFocusIn = function (e) {
-            var _a, _b;
             var target = e.target;
             if ((target === null || target === void 0 ? void 0 : target.getAttribute("data-type")) !== "year")
                 return;
-            // Skip if the year segment already has a numeric value (controlled picker)
-            var yearText = (_b = (_a = target.textContent) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : "";
-            if (/^\d+$/.test(yearText))
-                return;
-            var year = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()).year.toString();
-            for (var _i = 0, year_1 = year; _i < year_1.length; _i++) {
-                var char = year_1[_i];
-                target.dispatchEvent(new KeyboardEvent("keydown", { key: char, bubbles: true, cancelable: true }));
-            }
+            if (target.getAttribute("aria-valuenow"))
+                return; // year already set, controlled picker
+            // Defer one tick so React finishes rendering the segment values from the last keydown
+            setTimeout(function () {
+                var dayEl = container.querySelector('[data-type="day"]');
+                var monthEl = container.querySelector('[data-type="month"]');
+                var yearEl = container.querySelector('[data-type="year"]');
+                var dayVal = dayEl === null || dayEl === void 0 ? void 0 : dayEl.getAttribute("aria-valuenow");
+                var monthVal = monthEl === null || monthEl === void 0 ? void 0 : monthEl.getAttribute("aria-valuenow");
+                // If year is now set (user typed it or calendar selection), don't override
+                if (yearEl === null || yearEl === void 0 ? void 0 : yearEl.getAttribute("aria-valuenow"))
+                    return;
+                if (!dayVal || !monthVal)
+                    return;
+                var day = parseInt(dayVal, 10);
+                var month = parseInt(monthVal, 10);
+                var year = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()).year;
+                if (isNaN(day) || isNaN(month))
+                    return;
+                try {
+                    handleSingleChange(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(year, month, day));
+                }
+                catch (_a) {
+                    // CalendarDate throws for invalid combos (e.g. Feb 30), ignore
+                }
+            }, 0);
         };
         container.addEventListener("focusin", handleFocusIn);
         return function () { return container.removeEventListener("focusin", handleFocusIn); };
-    }, []);
+    }, [handleSingleChange]);
     return (jsxs("div", { ref: containerRef, className: "w-full flex flex-wrap xs:gap-5 justify-between items-center", children: [jsxs(RadioGroup, { color: "primary", orientation: "horizontal", size: "sm", value: mode, onValueChange: handleModeChange, children: [jsx(Radio, { value: "single", children: t.dayMonthSingleOption }), jsx(Radio, { value: "range", children: t.dayMonthRangeOption })] }), mode === "single" ? (pickerValue ? (jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-c")) : (jsx(DatePicker, { placeholderValue: currentYearDate, onChange: handleSingleChange, "aria-label": t.dayMonthAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-40 ".concat(NO_YEAR_CLASS) }, "dmp-u"))) : (rangeValue ? (jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-c")) : (jsx(DateRangePicker, { placeholderValue: currentYearDate, onChange: handleRangeChange, "aria-label": t.dayMonthRangeAriaLabel, endContent: jsx(IconComponent, { icon: "solar:calendar-outline" }), className: "w-full md:w-auto md:max-w-xs ".concat(NO_YEAR_CLASS) }, "dmpr-u")))] }));
 };
 
@@ -7491,14 +7507,21 @@ var NumberFilter = function (_a) {
 var DrawerFilters = function (_a) {
     var isOpen = _a.isOpen, onOpenChange = _a.onOpenChange, config = _a.config, onApplyFilters = _a.onApplyFilters, onClearFilters = _a.onClearFilters, onCancel = _a.onCancel, className = _a.className, translations = _a.translations, initialValues = _a.initialValues;
     var _b = useState(initialValues !== null && initialValues !== void 0 ? initialValues : {}), filterValues = _b[0], setFilterValues = _b[1];
-    // Sync internal state when the drawer opens or when initialValues changes (e.g., external clear).
-    // useState only captures the initial value on first mount, so we need this effect to
-    // re-sync whenever the drawer opens with potentially updated external filter state.
+    // Tracks the last confirmed (applied) state. When the drawer reopens we restore this
+    // so the user sees what was last applied — not just the raw initialValues (which the
+    // parent can't easily reconstruct from the processed-string output of onApplyFilters).
+    var confirmedValuesRef = useRef(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+    // Sync when the parent changes initialValues externally (e.g., full reset from outside).
+    useEffect(function () {
+        confirmedValuesRef.current = initialValues !== null && initialValues !== void 0 ? initialValues : {};
+        setFilterValues(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+    }, [initialValues]);
+    // Restore last confirmed state each time the drawer opens.
     useEffect(function () {
         if (isOpen) {
-            setFilterValues(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+            setFilterValues(confirmedValuesRef.current);
         }
-    }, [isOpen, initialValues]);
+    }, [isOpen]);
     // Handle changes in individual filters
     var handleFilterChange = useCallback(function (filterKey, value) {
         setFilterValues(function (prev) {
@@ -7518,14 +7541,16 @@ var DrawerFilters = function (_a) {
             onOpenChange(false);
         }
     }, [onOpenChange]);
-    // Cancel and close drawer
+    // Cancel and close drawer — revert in-progress changes to last confirmed state
     var handleCancel = useCallback(function () {
+        setFilterValues(confirmedValuesRef.current);
         onCancel === null || onCancel === void 0 ? void 0 : onCancel();
         onOpenChange(false);
     }, [onCancel, onOpenChange]);
     // Apply filters and process values
     var handleApplyFilters = useCallback(function () {
         var _a, _b;
+        confirmedValuesRef.current = filterValues;
         var processedFilters = {};
         var _loop_1 = function (key, value) {
             if (value === undefined || value === null) {

package/dist/types/components/drawer-filters/DrawerFilters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DrawerFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/DrawerFilters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAEX,kBAAkB,EAOlB,MAAM,uBAAuB,CAAC;AAK/B;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA6MtD,CAAC"}
+{"version":3,"file":"DrawerFilters.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/DrawerFilters.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAEX,kBAAkB,EAOlB,MAAM,uBAAuB,CAAC;AAK/B;;;;;;;;;GASG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAuNtD,CAAC"}

package/dist/types/components/drawer-filters/_internal/DayMonthPicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DayMonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/DayMonthPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAKxE,UAAU,mBAAmB;IAC5B,IAAI,EAAE,UAAU,GAAG,eAAe,CAAC;IACnC,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC5C;AAED,UAAU,mBAAmB;IAC5B,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,yBAAyB,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA2IxD,CAAC"}
+{"version":3,"file":"DayMonthPicker.d.ts","sourceRoot":"","sources":["../../../../../src/components/drawer-filters/_internal/DayMonthPicker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC;AAKxE,UAAU,mBAAmB;IAC5B,IAAI,EAAE,UAAU,GAAG,eAAe,CAAC;IACnC,QAAQ,EAAE,SAAS,GAAG,IAAI,CAAC;IAC3B,aAAa,EAAE,UAAU,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;CAC5C;AAED,UAAU,mBAAmB;IAC5B,KAAK,CAAC,EAAE,mBAAmB,GAAG,IAAI,CAAC;IACnC,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,IAAI,CAAC;IAC/C,YAAY,CAAC,EAAE,yBAAyB,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0JxD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@beweco/aurora-ui",
-	"version": "0.6.49",
+	"version": "0.6.50",
 	"description": "Bewe Aurora UI Component Library",
 	"main": "./dist/index.cjs.js",
 	"module": "./dist/index.esm.js",