@beweco/aurora-ui 0.6.45 → 0.6.47

package/dist/index.cjs.js

@@ -6948,7 +6948,7 @@ var DrawerFiltersHeader = function (_a) {
     return (jsxRuntime.jsxs("div", { className: "px-6 pt-10", children: [jsxRuntime.jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsxRuntime.jsx(P, { className: "text-default-500", children: description })] }));
 };
 
-var NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
+var NO_YEAR_CLASS = "[&_[data-type='year']]:sr-only [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
 var DayMonthPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, translations = _a.translations;
     var t = __assign({ dayMonthAriaLabel: "Seleccionar mes y día", dayMonthRangeAriaLabel: "Seleccionar rango de mes y día", dayMonthSingleOption: "Día específico", dayMonthRangeOption: "Rango de fechas" }, translations);
@@ -6982,7 +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;
-    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, "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")))] }));
+    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 }));
+            }
+        };
+        container.addEventListener("focusin", handleFocusIn);
+        return function () { return container.removeEventListener("focusin", handleFocusIn); };
+    }, []);
+    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")))] }));
 };
 
 /**
@@ -7461,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

@@ -6949,7 +6949,7 @@ var DrawerFiltersHeader = function (_a) {
     return (jsxs("div", { className: "px-6 pt-10", children: [jsx(H2, { className: "text-xl font-semibold text-foreground mb-2", children: title }), jsx(P, { className: "text-default-500", children: description })] }));
 };
 
-var NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
+var NO_YEAR_CLASS = "[&_[data-type='year']]:sr-only [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
 var DayMonthPicker = function (_a) {
     var value = _a.value, onChange = _a.onChange, translations = _a.translations;
     var t = __assign({ dayMonthAriaLabel: "Seleccionar mes y día", dayMonthRangeAriaLabel: "Seleccionar rango de mes y día", dayMonthSingleOption: "Día específico", dayMonthRangeOption: "Rango de fechas" }, translations);
@@ -6983,7 +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;
-    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, "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")))] }));
+    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 }));
+            }
+        };
+        container.addEventListener("focusin", handleFocusIn);
+        return function () { return container.removeEventListener("focusin", handleFocusIn); };
+    }, []);
+    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")))] }));
 };
 
 /**
@@ -7462,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,CA2GxD,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/dist/types/components/drawer-filters/index.d.ts

@@ -1,3 +1,3 @@
 export { DrawerFilters } from "./DrawerFilters";
-export type { DrawerFiltersProps, DrawerFiltersConfig, DrawerFiltersTranslations, FilterData, FilterType, FilterValues, SelectFilterData, MultiSelectFilterData, RangeFilterData, DateFilterData, DateFilterValue, } from "./DrawerFilters.types";
+export type { DrawerFiltersProps, DrawerFiltersConfig, DrawerFiltersTranslations, FilterData, FilterType, FilterValues, SelectFilterData, SelectFilterValue, MultiSelectFilterData, MultiSelectFilterValue, RangeFilterData, RangeFilterValue, DateFilterData, DateFilterValue, TextFilterValue, NumberFilterValue, } from "./DrawerFilters.types";
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,YAAY,EACX,kBAAkB,EAClB,mBAAmB,EACnB,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,eAAe,EACf,cAAc,EACd,eAAe,GACf,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/drawer-filters/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,YAAY,EACX,kBAAkB,EAClB,mBAAmB,EACnB,yBAAyB,EACzB,UAAU,EACV,UAAU,EACV,YAAY,EACZ,gBAAgB,EAChB,iBAAiB,EACjB,qBAAqB,EACrB,sBAAsB,EACtB,eAAe,EACf,gBAAgB,EAChB,cAAc,EACd,eAAe,EACf,eAAe,EACf,iBAAiB,GACjB,MAAM,uBAAuB,CAAC"}

package/package.json

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