@beweco/aurora-ui 0.6.46 → 0.6.47

package/dist/index.cjs.js

@@ -6982,22 +6982,36 @@ var DayMonthPicker = function (_a) {
     var currentYearDate = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
     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;
-    // When the year segment (sr-only, focusable) receives focus after the user
-    // types month and day, auto-type the current year so onChange can fire.
-    // Only attached to uncontrolled pickers (no committed value yet).
-    var autoFillYear = React.useCallback(function () {
-        var year = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()).year.toString();
-        setTimeout(function () {
-            var target = document.activeElement;
-            if ((target === null || target === void 0 ? void 0 : target.getAttribute("data-type")) === "year") {
-                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 }));
-                }
+    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.
+    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 }));
             }
-        }, 0);
+        };
+        container.addEventListener("focusin", handleFocusIn);
+        return function () { return container.removeEventListener("focusin", handleFocusIn); };
     }, []);
-    return (jsxRuntime.jsxs("div", { 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, onFocus: autoFillYear, "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, onFocus: autoFillYear, "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")))] }));
+    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")))] }));
 };
 
 /**
@@ -7476,6 +7490,14 @@ 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.
+    React.useEffect(function () {
+        if (isOpen) {
+            setFilterValues(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+        }
+    }, [isOpen, initialValues]);
     // Handle changes in individual filters
     var handleFilterChange = React.useCallback(function (filterKey, value) {
         setFilterValues(function (prev) {

package/dist/index.esm.js

@@ -6983,22 +6983,36 @@ var DayMonthPicker = function (_a) {
     var currentYearDate = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2());
     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;
-    // When the year segment (sr-only, focusable) receives focus after the user
-    // types month and day, auto-type the current year so onChange can fire.
-    // Only attached to uncontrolled pickers (no committed value yet).
-    var autoFillYear = useCallback(function () {
-        var year = $14e0f24ef4ac5c92$export$d0bdf45af03a6ea3($14e0f24ef4ac5c92$export$aa8b41735afcabd2()).year.toString();
-        setTimeout(function () {
-            var target = document.activeElement;
-            if ((target === null || target === void 0 ? void 0 : target.getAttribute("data-type")) === "year") {
-                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 }));
-                }
+    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.
+    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 }));
             }
-        }, 0);
+        };
+        container.addEventListener("focusin", handleFocusIn);
+        return function () { return container.removeEventListener("focusin", handleFocusIn); };
     }, []);
-    return (jsxs("div", { 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, onFocus: autoFillYear, "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, onFocus: autoFillYear, "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")))] }));
+    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")))] }));
 };
 
 /**
@@ -7477,6 +7491,14 @@ 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.
+    useEffect(function () {
+        if (isOpen) {
+            setFilterValues(initialValues !== null && initialValues !== void 0 ? initialValues : {});
+        }
+    }, [isOpen, initialValues]);
     // Handle changes in individual filters
     var handleFilterChange = useCallback(function (filterKey, value) {
         setFilterValues(function (prev) {

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,CAoMtD,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,CA6MtD,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,CA8HxD,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,CA2IxD,CAAC"}

package/package.json

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