@xsolla/xui-calendar 0.226.0 → 0.228.0

package/web/index.mjs

@@ -1,5 +1,5 @@
 // src/Calendar.tsx
-import { forwardRef, useCallback as useCallback3, useEffect, useState as useState2 } from "react";
+import { forwardRef, useCallback as useCallback3, useEffect as useEffect2, useState as useState2 } from "react";
 
 // ../../foundation/primitives-web/src/Box.tsx
 import React2 from "react";
@@ -336,9 +336,12 @@ var Text = ({
   );
 };
 
+// ../../foundation/primitives-web/src/index.tsx
+var isWeb = true;
+
 // src/Calendar.tsx
 import { useResolvedTheme as useResolvedTheme3 } from "@xsolla/xui-core";
-import { addMonths, subDays, subMonths, startOfDay as startOfDay2 } from "date-fns";
+import { addMonths as addMonths2, subDays, subMonths, startOfDay as startOfDay2 } from "date-fns";
 
 // src/CalendarHeader.tsx
 import { useCallback, useMemo } from "react";
@@ -490,10 +493,17 @@ var CalendarHeader = ({
 };
 
 // src/CalendarGrid.tsx
-import { useMemo as useMemo2, useCallback as useCallback2, useState } from "react";
+import {
+  useMemo as useMemo2,
+  useCallback as useCallback2,
+  useEffect,
+  useRef,
+  useState
+} from "react";
 import { useResolvedTheme } from "@xsolla/xui-core";
 import {
   addDays,
+  addMonths,
   eachDayOfInterval,
   endOfDay,
   endOfMonth,
@@ -513,6 +523,7 @@ import * as locales2 from "date-fns/locale";
 import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var DAY_CELL_WIDTH = 40;
 var GRID_WIDTH = DAY_CELL_WIDTH * 7;
+var dayKeyOf = (date) => format2(date, "yyyy-MM-dd");
 var CalendarGrid = ({
   currentMonth,
   locale = "enUS",
@@ -525,6 +536,7 @@ var CalendarGrid = ({
   selectedDate,
   selectingRange,
   onDayPress,
+  onMonthChange,
   testID,
   themeMode,
   themeProductContext
@@ -573,33 +585,122 @@ var CalendarGrid = ({
     },
     [selectsRange, startDate, endDate, selectingRange]
   );
-  return /* @__PURE__ */ jsxs2(Box, { testID, children: [
+  const [focusedDate, setFocusedDate] = useState(null);
+  const dayRefs = useRef(/* @__PURE__ */ new Map());
+  const shouldMoveFocus = useRef(false);
+  const tabStopDate = useMemo2(() => {
+    if (focusedDate && isSameMonth(focusedDate, currentMonth)) {
+      return focusedDate;
+    }
+    const preferred = selectsRange ? startDate : selectedDate;
+    if (preferred && isSameMonth(preferred, currentMonth)) return preferred;
+    const today = /* @__PURE__ */ new Date();
+    if (isSameMonth(today, currentMonth)) return today;
+    return monthStart;
+  }, [
+    focusedDate,
+    currentMonth,
+    selectsRange,
+    startDate,
+    selectedDate,
+    monthStart
+  ]);
+  const tabStopKey = dayKeyOf(tabStopDate);
+  useEffect(() => {
+    if (!shouldMoveFocus.current) return;
+    shouldMoveFocus.current = false;
+    dayRefs.current.get(tabStopKey)?.focus();
+  }, [tabStopKey, currentMonth]);
+  const moveFocus = useCallback2(
+    (target) => {
+      if (!isSameMonth(target, currentMonth)) {
+        if (!onMonthChange) return;
+        onMonthChange(startOfMonth(target));
+      }
+      shouldMoveFocus.current = true;
+      setFocusedDate(target);
+    },
+    [currentMonth, onMonthChange]
+  );
+  const handleDayKeyDown = useCallback2(
+    (event, day) => {
+      let target = null;
+      switch (event.key) {
+        case "ArrowLeft":
+          target = addDays(day, -1);
+          break;
+        case "ArrowRight":
+          target = addDays(day, 1);
+          break;
+        case "ArrowUp":
+          target = addDays(day, -7);
+          break;
+        case "ArrowDown":
+          target = addDays(day, 7);
+          break;
+        case "Home":
+          target = startOfWeek(day, { weekStartsOn });
+          break;
+        case "End":
+          target = endOfWeek(day, { weekStartsOn });
+          break;
+        case "PageUp":
+          target = addMonths(day, -1);
+          break;
+        case "PageDown":
+          target = addMonths(day, 1);
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          if (!isDateDisabled(day)) onDayPress?.(day);
+          return;
+        default:
+          return;
+      }
+      event.preventDefault();
+      moveFocus(target);
+    },
+    [isDateDisabled, moveFocus, onDayPress, weekStartsOn]
+  );
+  return /* @__PURE__ */ jsxs2(Box, { testID, role: "grid", children: [
     /* @__PURE__ */ jsx4(
       Box,
       {
+        role: "row",
         flexDirection: "row",
         justifyContent: "flex-start",
         width: GRID_WIDTH,
         marginBottom: 8,
-        children: weekDays.map((day, i) => /* @__PURE__ */ jsx4(Box, { width: DAY_CELL_WIDTH, alignItems: "center", children: /* @__PURE__ */ jsx4(
-          Text,
+        children: weekDays.map((day, i) => /* @__PURE__ */ jsx4(
+          Box,
           {
-            fontSize: 12,
-            fontWeight: "600",
-            color: theme.colors.content.tertiary,
-            children: day.toUpperCase()
-          }
-        ) }, i))
+            role: "columnheader",
+            width: DAY_CELL_WIDTH,
+            alignItems: "center",
+            children: /* @__PURE__ */ jsx4(
+              Text,
+              {
+                fontSize: 12,
+                fontWeight: "600",
+                color: theme.colors.content.tertiary,
+                children: day.toUpperCase()
+              }
+            )
+          },
+          i
+        ))
       }
     ),
     /* @__PURE__ */ jsx4(Box, { gap: 2, children: weeks.map((week, i) => /* @__PURE__ */ jsx4(
       Box,
       {
+        role: "row",
         flexDirection: "row",
         justifyContent: "flex-start",
         width: GRID_WIDTH,
         children: week.map((day, j) => {
-          const dayKey = format2(day, "yyyy-MM-dd");
+          const dayKey = dayKeyOf(day);
           const isOutsideMonth = !isSameMonth(day, currentMonth);
           const isSelected = !selectsRange && selectedDate && isSameDay(day, selectedDate) || selectsRange && startDate && endDate && isSameDay(day, startDate) && isSameDay(day, endDate);
           const isRangeStart = selectsRange && startDate && isSameDay(day, startDate);
@@ -609,6 +710,7 @@ var CalendarGrid = ({
           const disabled = isDateDisabled(day);
           const isHoverable = !disabled && !isOutsideMonth && !isSelected && !isRangeStart && !isRangeEnd;
           const isHovered = isHoverable && hoveredKey === dayKey;
+          const isTabStop = !isOutsideMonth && dayKey === tabStopKey;
           let bgColor = "transparent";
           let textColor = theme.colors.content.primary;
           if (isSelected || isRangeStart || isRangeEnd || inRange) {
@@ -620,9 +722,23 @@ var CalendarGrid = ({
           } else if (isOutsideMonth || disabled) {
             textColor = theme.colors.control.text.disable;
           }
+          const keyboardProps = isWeb && !isOutsideMonth ? {
+            ref: (node) => {
+              if (node) dayRefs.current.set(dayKey, node);
+              else dayRefs.current.delete(dayKey);
+            },
+            tabIndex: isTabStop ? 0 : -1,
+            onKeyDown: (event) => handleDayKeyDown(event, day)
+          } : {};
           return /* @__PURE__ */ jsx4(
             Box,
             {
+              ...keyboardProps,
+              role: "gridcell",
+              "aria-label": isOutsideMonth ? void 0 : format2(day, "EEEE, d MMMM yyyy", { locale: localeObj }),
+              "aria-selected": isOutsideMonth ? void 0 : Boolean(isSelected || isRangeStart || isRangeEnd),
+              "aria-disabled": disabled || isOutsideMonth || void 0,
+              "aria-current": today ? "date" : void 0,
               width: DAY_CELL_WIDTH,
               height: 32,
               alignItems: "center",
@@ -633,7 +749,11 @@ var CalendarGrid = ({
               borderBottomRightRadius: isSelected || isRangeEnd ? 4 : 0,
               backgroundColor: bgColor,
               cursor: disabled || isOutsideMonth ? "default" : "pointer",
-              onPress: () => !disabled && !isOutsideMonth && onDayPress?.(day),
+              onPress: () => {
+                if (disabled || isOutsideMonth) return;
+                setFocusedDate(day);
+                onDayPress?.(day);
+              },
               onMouseEnter: () => isHoverable && setHoveredKey(dayKey),
               onMouseLeave: () => setHoveredKey(
                 (current) => current === dayKey ? null : current
@@ -760,7 +880,7 @@ var Calendar = forwardRef(
     const [selectedEndDate, setSelectedEndDate] = useState2(endDate);
     const [locSelectedDate, setLocSelectedDate] = useState2(selectedDate);
     const [selectingRange, setSelectingRange] = useState2(null);
-    useEffect(() => {
+    useEffect2(() => {
       setSelectedStartDate(startDate);
       setSelectedEndDate(endDate);
       setLocSelectedDate(selectedDate);
@@ -801,7 +921,7 @@ var Calendar = forwardRef(
       []
     );
     const increaseMonth = useCallback3(
-      () => setCurrentMonth((prev) => addMonths(prev, 1)),
+      () => setCurrentMonth((prev) => addMonths2(prev, 1)),
       []
     );
     const changeMonth = useCallback3(
@@ -901,6 +1021,7 @@ var Calendar = forwardRef(
               selectedDate: locSelectedDate,
               selectingRange,
               onDayPress: handleChange,
+              onMonthChange: setCurrentMonth,
               themeMode,
               themeProductContext
             }
@@ -915,10 +1036,10 @@ var Calendar = forwardRef(
 Calendar.displayName = "Calendar";
 
 // src/DualCalendar.tsx
-import { forwardRef as forwardRef2, useCallback as useCallback4, useEffect as useEffect2, useState as useState3 } from "react";
+import { forwardRef as forwardRef2, useCallback as useCallback4, useEffect as useEffect3, useState as useState3 } from "react";
 import { useResolvedTheme as useResolvedTheme4 } from "@xsolla/xui-core";
 import {
-  addMonths as addMonths2,
+  addMonths as addMonths3,
   isSameMonth as isSameMonth2,
   subDays as subDays2,
   subMonths as subMonths2,
@@ -951,21 +1072,21 @@ var DualCalendar = forwardRef2(
       month || initialMonth || startDate || /* @__PURE__ */ new Date()
     );
     const [rightMonth, setRightMonth] = useState3(
-      () => addMonths2(month || initialMonth || startDate || /* @__PURE__ */ new Date(), 1)
+      () => addMonths3(month || initialMonth || startDate || /* @__PURE__ */ new Date(), 1)
     );
     const [selectedStartDate, setSelectedStartDate] = useState3(startDate);
     const [selectedEndDate, setSelectedEndDate] = useState3(endDate);
     const [selectingRange, setSelectingRange] = useState3(null);
     const showFrom = useCallback4((date) => {
       setLeftMonth(date);
-      setRightMonth(addMonths2(date, 1));
+      setRightMonth(addMonths3(date, 1));
     }, []);
-    useEffect2(() => {
+    useEffect3(() => {
       setSelectedStartDate(startDate);
       setSelectedEndDate(endDate);
     }, [startDate, endDate]);
     const monthKey = month ? month.getFullYear() * 12 + month.getMonth() : null;
-    useEffect2(() => {
+    useEffect3(() => {
       if (!month) return;
       if (isSameMonth2(month, leftMonth) || isSameMonth2(month, rightMonth)) {
         return;
@@ -1028,7 +1149,7 @@ var DualCalendar = forwardRef2(
       []
     );
     const increaseLeftMonth = useCallback4(
-      () => setLeftMonth((prev) => addMonths2(prev, 1)),
+      () => setLeftMonth((prev) => addMonths3(prev, 1)),
       []
     );
     const changeLeftMonth = useCallback4(
@@ -1044,7 +1165,7 @@ var DualCalendar = forwardRef2(
       []
     );
     const increaseRightMonth = useCallback4(
-      () => setRightMonth((prev) => addMonths2(prev, 1)),
+      () => setRightMonth((prev) => addMonths3(prev, 1)),
       []
     );
     const changeRightMonth = useCallback4(