@ssa-ui-kit/core 3.19.0 → 3.19.1

package/dist/components/DatePicker/styles.d.ts

@@ -62,6 +62,7 @@ export declare const DaysViewCell: import("@emotion/styled").StyledComponent<{
     isCalendarDateNow: boolean;
     isCalendarDateSelected: boolean;
     isHighlighted: boolean;
+    isOutOfMonth?: boolean;
     rangeEdge?: RangeEdge;
 }, {}, {}>;
 export declare const YearsViewCell: import("@emotion/styled").StyledComponent<{

package/dist/index.js

@@ -23916,8 +23916,12 @@ const DaysViewCell = /*#__PURE__*/base_default()(Wrapper_Wrapper,  true ? {
   isCalendarDateNow
 }) => isCalendarDateNow ? `1px solid ${theme.colors.grey}` : 'none', ";color:", ({
   theme,
-  isCalendarDateSelected
-}) => isCalendarDateSelected ? theme.colors.white : theme.colors.greyDarker, ";background:", ({
+  isCalendarDateSelected,
+  isOutOfMonth
+}) => {
+  if (isCalendarDateSelected) return theme.colors.white;
+  return isOutOfMonth ? theme.colors.grey : theme.colors.greyDarker;
+}, ";background:", ({
   theme,
   isCalendarDateSelected
 }) => isCalendarDateSelected && theme.palette.primary.main, ";cursor:pointer;user-select:none;&[aria-disabled='true']{color:", ({
@@ -24656,11 +24660,20 @@ const DaysView = () => {
     const {
       target
     } = event;
-    const selectedDay = Number(target.innerHTML);
+    const selectedDay = target.getAttribute('data-day');
     const isEnabled = target.getAttribute('aria-disabled') === 'false';
-    if (isEnabled) {
+    if (isEnabled && selectedDay) {
+      // The clicked cell may belong to the previous/next month (leading or
+      // trailing padding), so its year/month/day must come from data-day
+      // rather than being applied to the currently displayed month —
+      // otherwise e.g. clicking "30 Jul" while viewing August would
+      // silently resolve to 30 Aug. Any time-of-day already chosen via the
+      // time panel is preserved from calendarViewDateTime.
+      const parsedDay = external_luxon_namespaceObject.DateTime.fromFormat(selectedDay, 'D');
       const newDate = calendarViewDateTime?.set({
-        day: selectedDay
+        year: parsedDay.year,
+        month: parsedDay.month,
+        day: parsedDay.day
       });
       setCalendarViewDateTime(newDate);
       setDateTime(newDate);
@@ -24707,28 +24720,31 @@ const DaysView = () => {
         if (isHighlightEnabled && lastChangedDate && otherDateDT && dateTime) {
           isHighlightDate = highlightDates.mode === 'dateTo' ? otherDateDT < currentDT && currentDT < dateTime : dateTime < currentDT && currentDT < otherDateDT;
         }
+
+        // Leading/trailing days from adjacent months are only muted, not
+        // disabled — they're real, selectable dates.
         let isAriaDisabled = false;
         if (dateMinDT && dateMaxDT) {
-          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
-        } else {
-          if (dateMinDT) {
-            isAriaDisabled = currentDT < dateMinDT || !isCalendarMonth;
-          }
-          if (dateMaxDT) {
-            isAriaDisabled = currentDT > dateMaxDT || !isCalendarMonth;
-          }
+          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT;
+        } else if (dateMinDT) {
+          isAriaDisabled = currentDT < dateMinDT;
+        } else if (dateMaxDT) {
+          isAriaDisabled = currentDT > dateMaxDT;
         }
+        const isRangeActive = isHighlightEnabled && !!otherDateDT && !!dateTime;
         const rangeEdge = getRangeEdge({
           isFirstSelected: isCalendarFirstDateSelected,
           isSecondSelected: isCalendarSecondDateSelected,
-          isRangeActive: isHighlightEnabled && !!otherDateDT && !!dateTime,
+          isRangeActive,
           mode: highlightDates?.mode
         });
         return (0,jsx_runtime_namespaceObject.jsx)(DaysViewCell, {
           "aria-disabled": isAriaDisabled,
           "aria-label": ariaLabel,
+          "data-day": calendarDate,
           isCalendarDateNow: isCalendarDateNow,
           isCalendarDateSelected: isCalendarDateSelected,
+          isOutOfMonth: !isCalendarMonth,
           rangeEdge: rangeEdge,
           isHighlighted: isHighlightDate,
           children: calendarDay
@@ -26041,18 +26057,21 @@ const DaysView_DaysView = () => {
     getDateSelectionState,
     isRangeActive
   } = useRangeSelection({
-    createNewDate: selectedDay => currentCalendarViewDT.set({
-      day: Number(selectedDay)
-    }),
+    // The clicked cell may belong to the previous/next month (leading or
+    // trailing padding), so its date must be parsed from data-day rather
+    // than reconstructed from the day-of-month + currently displayed
+    // month — otherwise e.g. clicking "30 Jul" while viewing August would
+    // silently resolve to 30 Aug.
+    createNewDate: selectedDay => external_luxon_namespaceObject.DateTime.fromFormat(String(selectedDay), 'D'),
     getComparisonFormat: () => 'D'
   });
   const handleDaySelect = event => {
     const {
       target
     } = event;
-    const selectedDay = target.innerHTML;
+    const selectedDay = target.getAttribute('data-day');
     const isEnabled = target.getAttribute('aria-disabled') === 'false';
-    if (isEnabled) {
+    if (isEnabled && selectedDay) {
       handleRangeSelect(selectedDay);
     }
   };
@@ -26087,16 +26106,17 @@ const DaysView_DaysView = () => {
           isCalendarSecondDateSelected,
           isCalendarDateSelected
         } = getDateSelectionState(currentDT);
+
+        // Leading/trailing days from adjacent months are only muted, not
+        // disabled — they're real, selectable dates (e.g. picking 30/31
+        // Jul as the range end while the calendar is showing August).
         let isAriaDisabled = false;
         if (dateMinDT && dateMaxDT) {
-          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT || !isCalendarMonth;
-        } else {
-          if (dateMinDT) {
-            isAriaDisabled = currentDT < dateMinDT || !isCalendarMonth;
-          }
-          if (dateMaxDT) {
-            isAriaDisabled = currentDT > dateMaxDT || !isCalendarMonth;
-          }
+          isAriaDisabled = currentDT < dateMinDT || currentDT > dateMaxDT;
+        } else if (dateMinDT) {
+          isAriaDisabled = currentDT < dateMinDT;
+        } else if (dateMaxDT) {
+          isAriaDisabled = currentDT > dateMaxDT;
         }
         const classNames = getClassNames(currentDT, {
           isCalendarFirstDateSelected,
@@ -26108,6 +26128,7 @@ const DaysView_DaysView = () => {
           "data-day": calendarDate,
           isCalendarDateNow: isCalendarDateNow,
           isCalendarDateSelected: isCalendarDateSelected,
+          isOutOfMonth: !isCalendarMonth,
           rangeEdge: getRangeEdge({
             isFirstSelected: isCalendarFirstDateSelected,
             isSecondSelected: isCalendarSecondDateSelected,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssa-ui-kit/core",
-  "version": "3.19.0",
+  "version": "3.19.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
@@ -39,8 +39,8 @@
     "luxon": "3.5.0",
     "plotly.js": "3.0.0",
     "react-plotly.js": "2.6.0",
-    "@ssa-ui-kit/hooks": "^3.19.0",
-    "@ssa-ui-kit/utils": "^3.19.0"
+    "@ssa-ui-kit/hooks": "^3.19.1",
+    "@ssa-ui-kit/utils": "^3.19.1"
   },
   "devDependencies": {
     "@emotion/css": "11.13.5",