@beweco/aurora-ui 0.6.55 → 0.6.57

package/dist/index.cjs.js

@@ -6766,6 +6766,33 @@ var DrawerFiltersHeader = function (_a) {
 };
 
 var NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
+// Year used to construct CalendarDate values. React Aria's onChange only fires when
+// ALL segments (including hidden year) are user-confirmed. Since users can't type year
+// (it's CSS-hidden), we read month+day directly from the DOM via data-placeholder
+// attributes when the picker loses focus, bypassing the year-confirmation requirement.
+var FILLER_YEAR = new Date().getFullYear();
+/**
+ * Reads month and day from segment DOM elements.
+ * Returns null if any segment is still in placeholder state (user hasn't typed it yet).
+ * React Aria marks unconfirmed segments with data-placeholder="true".
+ */
+function readConfirmedMonthDay(container, monthSelector, daySelector) {
+    if (monthSelector === void 0) { monthSelector = '[data-type="month"]'; }
+    if (daySelector === void 0) { daySelector = '[data-type="day"]'; }
+    var monthEl = container.querySelector(monthSelector);
+    var dayEl = container.querySelector(daySelector);
+    if (!monthEl || !dayEl)
+        return null;
+    if (monthEl.getAttribute("data-placeholder") === "true")
+        return null;
+    if (dayEl.getAttribute("data-placeholder") === "true")
+        return null;
+    var month = Number(monthEl.getAttribute("aria-valuenow"));
+    var day = Number(dayEl.getAttribute("aria-valuenow"));
+    if (month >= 1 && month <= 12 && day >= 1 && day <= 31)
+        return { month: month, day: day };
+    return null;
+}
 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);
@@ -6773,6 +6800,17 @@ var DayMonthPicker = function (_a) {
     React.useEffect(function () {
         setMode((value === null || value === void 0 ? void 0 : value.type) === "dayMonthRange" ? "range" : "single");
     }, [value === null || value === void 0 ? void 0 : value.type]);
+    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;
+    // Refs to DOM wrappers — used by the DOM-reading fallback for manual input.
+    var singleRef = React.useRef(null);
+    var rangeRef = React.useRef(null);
+    // Stable refs so focus-change callbacks always read current values without
+    // needing to be recreated on every render.
+    var pickerValueRef = React.useRef(pickerValue);
+    pickerValueRef.current = pickerValue;
+    var rangeValueRef = React.useRef(rangeValue);
+    rangeValueRef.current = rangeValue;
     var handleModeChange = function (newMode) {
         var nextMode = newMode === "range" ? "range" : "single";
         setMode(nextMode);
@@ -6783,22 +6821,50 @@ var DayMonthPicker = function (_a) {
         onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: null });
     };
     var handleSingleChange = function (date) {
-        onChange({
-            type: "dayMonth",
-            dayMonth: date,
-            dayMonthRange: null,
-        });
+        onChange({ type: "dayMonth", dayMonth: date, dayMonthRange: null });
     };
     var handleRangeChange = function (range) {
-        onChange({
-            type: "dayMonthRange",
-            dayMonth: null,
-            dayMonthRange: range,
-        });
+        onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: range });
     };
-    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" ? (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")) : (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"))] }));
+    // Called by React Aria when the DatePicker gains/loses focus.
+    // When value=null (placeholder mode) React Aria never fires onChange because the
+    // hidden year segment is never user-confirmed. On blur we read the confirmed
+    // month/day directly from the DOM as a workaround.
+    var handleSingleFocusChange = function (isFocused) {
+        if (isFocused || pickerValueRef.current)
+            return;
+        if (!singleRef.current)
+            return;
+        var result = readConfirmedMonthDay(singleRef.current);
+        if (result) {
+            handleSingleChange(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(FILLER_YEAR, result.month, result.day));
+        }
+    };
+    var handleRangeFocusChange = function (isFocused) {
+        if (isFocused || rangeValueRef.current)
+            return;
+        if (!rangeRef.current)
+            return;
+        var monthEls = rangeRef.current.querySelectorAll('[data-type="month"]');
+        var dayEls = rangeRef.current.querySelectorAll('[data-type="day"]');
+        if (monthEls.length < 2 || dayEls.length < 2)
+            return;
+        var allConfirmed = __spreadArray(__spreadArray([], monthEls, true), dayEls, true).every(function (el) { return el.getAttribute("data-placeholder") !== "true"; });
+        if (!allConfirmed)
+            return;
+        var startMonth = Number(monthEls[0].getAttribute("aria-valuenow"));
+        var startDay = Number(dayEls[0].getAttribute("aria-valuenow"));
+        var endMonth = Number(monthEls[1].getAttribute("aria-valuenow"));
+        var endDay = Number(dayEls[1].getAttribute("aria-valuenow"));
+        var valid = function (m, d) { return m >= 1 && m <= 12 && d >= 1 && d <= 31; };
+        if (valid(startMonth, startDay) && valid(endMonth, endDay)) {
+            handleRangeChange({
+                start: new $35ea8db9cb2ccb90$export$99faa760c7908e4f(FILLER_YEAR, startMonth, startDay),
+                end: new $35ea8db9cb2ccb90$export$99faa760c7908e4f(FILLER_YEAR, endMonth, endDay),
+            });
+        }
+    };
+    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" ? (jsxRuntime.jsx("div", { ref: singleRef, children: jsxRuntime.jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, onFocusChange: handleSingleFocusChange, "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") })) : (jsxRuntime.jsx("div", { ref: rangeRef, children: jsxRuntime.jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, onFocusChange: handleRangeFocusChange, "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") }))] }));
 };
 
 /**

package/dist/index.esm.js

@@ -6767,6 +6767,33 @@ var DrawerFiltersHeader = function (_a) {
 };
 
 var NO_YEAR_CLASS = "[&_[data-type='year']]:hidden [&_[data-type='literal']:has(+[data-type='year'])]:hidden";
+// Year used to construct CalendarDate values. React Aria's onChange only fires when
+// ALL segments (including hidden year) are user-confirmed. Since users can't type year
+// (it's CSS-hidden), we read month+day directly from the DOM via data-placeholder
+// attributes when the picker loses focus, bypassing the year-confirmation requirement.
+var FILLER_YEAR = new Date().getFullYear();
+/**
+ * Reads month and day from segment DOM elements.
+ * Returns null if any segment is still in placeholder state (user hasn't typed it yet).
+ * React Aria marks unconfirmed segments with data-placeholder="true".
+ */
+function readConfirmedMonthDay(container, monthSelector, daySelector) {
+    if (monthSelector === void 0) { monthSelector = '[data-type="month"]'; }
+    if (daySelector === void 0) { daySelector = '[data-type="day"]'; }
+    var monthEl = container.querySelector(monthSelector);
+    var dayEl = container.querySelector(daySelector);
+    if (!monthEl || !dayEl)
+        return null;
+    if (monthEl.getAttribute("data-placeholder") === "true")
+        return null;
+    if (dayEl.getAttribute("data-placeholder") === "true")
+        return null;
+    var month = Number(monthEl.getAttribute("aria-valuenow"));
+    var day = Number(dayEl.getAttribute("aria-valuenow"));
+    if (month >= 1 && month <= 12 && day >= 1 && day <= 31)
+        return { month: month, day: day };
+    return null;
+}
 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);
@@ -6774,6 +6801,17 @@ var DayMonthPicker = function (_a) {
     useEffect(function () {
         setMode((value === null || value === void 0 ? void 0 : value.type) === "dayMonthRange" ? "range" : "single");
     }, [value === null || value === void 0 ? void 0 : value.type]);
+    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;
+    // Refs to DOM wrappers — used by the DOM-reading fallback for manual input.
+    var singleRef = useRef(null);
+    var rangeRef = useRef(null);
+    // Stable refs so focus-change callbacks always read current values without
+    // needing to be recreated on every render.
+    var pickerValueRef = useRef(pickerValue);
+    pickerValueRef.current = pickerValue;
+    var rangeValueRef = useRef(rangeValue);
+    rangeValueRef.current = rangeValue;
     var handleModeChange = function (newMode) {
         var nextMode = newMode === "range" ? "range" : "single";
         setMode(nextMode);
@@ -6784,22 +6822,50 @@ var DayMonthPicker = function (_a) {
         onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: null });
     };
     var handleSingleChange = function (date) {
-        onChange({
-            type: "dayMonth",
-            dayMonth: date,
-            dayMonthRange: null,
-        });
+        onChange({ type: "dayMonth", dayMonth: date, dayMonthRange: null });
     };
     var handleRangeChange = function (range) {
-        onChange({
-            type: "dayMonthRange",
-            dayMonth: null,
-            dayMonthRange: range,
-        });
+        onChange({ type: "dayMonthRange", dayMonth: null, dayMonthRange: range });
     };
-    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" ? (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")) : (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"))] }));
+    // Called by React Aria when the DatePicker gains/loses focus.
+    // When value=null (placeholder mode) React Aria never fires onChange because the
+    // hidden year segment is never user-confirmed. On blur we read the confirmed
+    // month/day directly from the DOM as a workaround.
+    var handleSingleFocusChange = function (isFocused) {
+        if (isFocused || pickerValueRef.current)
+            return;
+        if (!singleRef.current)
+            return;
+        var result = readConfirmedMonthDay(singleRef.current);
+        if (result) {
+            handleSingleChange(new $35ea8db9cb2ccb90$export$99faa760c7908e4f(FILLER_YEAR, result.month, result.day));
+        }
+    };
+    var handleRangeFocusChange = function (isFocused) {
+        if (isFocused || rangeValueRef.current)
+            return;
+        if (!rangeRef.current)
+            return;
+        var monthEls = rangeRef.current.querySelectorAll('[data-type="month"]');
+        var dayEls = rangeRef.current.querySelectorAll('[data-type="day"]');
+        if (monthEls.length < 2 || dayEls.length < 2)
+            return;
+        var allConfirmed = __spreadArray(__spreadArray([], monthEls, true), dayEls, true).every(function (el) { return el.getAttribute("data-placeholder") !== "true"; });
+        if (!allConfirmed)
+            return;
+        var startMonth = Number(monthEls[0].getAttribute("aria-valuenow"));
+        var startDay = Number(dayEls[0].getAttribute("aria-valuenow"));
+        var endMonth = Number(monthEls[1].getAttribute("aria-valuenow"));
+        var endDay = Number(dayEls[1].getAttribute("aria-valuenow"));
+        var valid = function (m, d) { return m >= 1 && m <= 12 && d >= 1 && d <= 31; };
+        if (valid(startMonth, startDay) && valid(endMonth, endDay)) {
+            handleRangeChange({
+                start: new $35ea8db9cb2ccb90$export$99faa760c7908e4f(FILLER_YEAR, startMonth, startDay),
+                end: new $35ea8db9cb2ccb90$export$99faa760c7908e4f(FILLER_YEAR, endMonth, endDay),
+            });
+        }
+    };
+    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" ? (jsx("div", { ref: singleRef, children: jsx(DatePicker, { value: pickerValue, onChange: handleSingleChange, onFocusChange: handleSingleFocusChange, "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") })) : (jsx("div", { ref: rangeRef, children: jsx(DateRangePicker, { value: rangeValue, onChange: handleRangeChange, onFocusChange: handleRangeFocusChange, "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") }))] }));
 };
 
 /**

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":"AAGA,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,CAoFxD,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;AAgCxE,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,CAqIxD,CAAC"}

package/package.json

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