@astryxdesign/core 0.1.2 → 0.1.3-canary.102854d

package/src/Calendar/Calendar.tsx

@@ -32,7 +32,6 @@ import {useGridFocus} from '../hooks';
 import {
   useCalendarDays,
   useCalendarConstraints,
-  useCalendarRovingTabindex,
   type CalendarDay,
 } from './hooks';
 import {
@@ -46,7 +45,6 @@ import {
   plainDateFromISO,
   plainDateToISO,
   plainDateToDate,
-  plainDateFromDate,
   plainDateToday,
   plainDateSetFirstOfMonth,
   plainDateAddMonths,
@@ -63,15 +61,28 @@ import {
   computeDayCellState,
   computeRangeRounding,
   computePreviewRounding,
+  computeDayNeighborContinuity,
   isEndpoint,
+  type DayNeighborContinuity,
 } from './dayCellUtils';
 
 // =============================================================================
 // Types
 // =============================================================================
 
-export type {ISODateString, DayOfWeek, DateRange} from '../utils/dateTypes';
-import type {ISODateString, DayOfWeek, DateRange} from '../utils/dateTypes';
+export type {
+  ISODateString,
+  DayOfWeek,
+  DayOfWeekName,
+  DateRange,
+} from '../utils/dateTypes';
+import type {
+  ISODateString,
+  DayOfWeek,
+  DayOfWeekName,
+  DateRange,
+} from '../utils/dateTypes';
+import {normalizeDayOfWeek} from '../utils/dateTypes';
 import {themeProps} from '../utils/themeProps';
 
 /** Imperative handle for Calendar handleRef */
@@ -134,10 +145,11 @@ interface CalendarBaseProps extends Omit<
   hasVariableRowCount?: boolean;
 
   /**
-   * First day of week.
+   * First day of week. Accepts a number (0 = Sunday … 6 = Saturday) or a
+   * three-letter day name ('sun'–'sat', case-insensitive) for readability.
    * Default: 0 (Sunday)
    */
-  weekStartsOn?: DayOfWeek;
+  weekStartsOn?: DayOfWeek | DayOfWeekName;
 }
 
 // ─── Mode-specific Props (discriminated union) ────────────────
@@ -200,13 +212,17 @@ export function Calendar({ref, ...props}: CalendarProps) {
     hasOutsideDays = true,
     hasWeekNumbers = false,
     hasVariableRowCount = false,
-    weekStartsOn = 0,
+    weekStartsOn: weekStartsOnProp = 0,
     xstyle,
     className,
     style,
     ...rest
   } = props;
 
+  // Normalize `weekStartsOn` (number or three-letter day name) to a numeric
+  // DayOfWeek so all downstream date math keeps working with an index.
+  const weekStartsOn = normalizeDayOfWeek(weekStartsOnProp);
+
   // Today's date (memoized)
   const today = useMemo(() => plainDateToday(), []);
 
@@ -539,33 +555,52 @@ function MonthGrid({
     return null;
   }, [mode, value]);
 
-  const {isTabbable} = useCalendarRovingTabindex({
-    days,
-    today,
-    year,
-    month: month.month,
-    isDateDisabled,
-    selectedDate: selectedDateForTabindex,
-  });
+  // Seed the initial roving tab stop for this month. useGridFocus owns the
+  // live tab stop (see `hasRovingTabIndex` below) — it honors an existing
+  // `tabindex="0"` and repairs/moves it thereafter — so this only decides
+  // which day button starts tabbable. Priority: selected date (if visible and
+  // enabled) > today (if visible and enabled) > first enabled in-month day.
+  const seedTabbableIso = useMemo((): ISODateString | null => {
+    if (selectedDateForTabindex) {
+      const isSelectedInMonth =
+        selectedDateForTabindex.year === year &&
+        selectedDateForTabindex.month === month.month;
+      if (isSelectedInMonth && !isDateDisabled(selectedDateForTabindex)) {
+        return plainDateToISO(selectedDateForTabindex);
+      }
+    }
+
+    const isTodayInMonth = today.year === year && today.month === month.month;
+    if (isTodayInMonth && !isDateDisabled(today)) {
+      return plainDateToISO(today);
+    }
+
+    for (const day of days) {
+      if (!day.isOutside && !isDateDisabled(day.date)) {
+        return day.iso;
+      }
+    }
 
-  // Helper to get the focused date from the currently focused element
+    return null;
+  }, [days, today, year, month.month, isDateDisabled, selectedDateForTabindex]);
+
+  // Helper to get the focused date from the currently focused element.
+  // Reads the machine-readable `data-date` (ISO) attribute rather than parsing
+  // the human-readable `aria-label` with `new Date()`, which is locale/format
+  // dependent and returns Invalid Date in non-English locales (e.g. fr-FR,
+  // ja-JP), silently swallowing month-boundary arrow navigation (complex-4).
   const getFocusedDate = useCallback((): ISODateString | null => {
     const activeElement = document.activeElement as HTMLElement | null;
     if (!activeElement) {
       return null;
     }
 
-    const ariaLabel = activeElement.getAttribute('aria-label');
-    if (!ariaLabel) {
-      return null;
-    }
-
-    const parsed = new Date(ariaLabel);
-    if (isNaN(parsed.getTime())) {
+    const iso = activeElement.getAttribute('data-date');
+    if (!iso) {
       return null;
     }
 
-    return plainDateToISO(plainDateFromDate(parsed));
+    return iso as ISODateString;
   }, []);
 
   // Handle navigation to previous month
@@ -605,16 +640,31 @@ function MonthGrid({
     }
   }, [getFocusedDate, onNavigateNext]);
 
-  // Grid focus navigation
-  const {gridRef, handleKeyDown: handleGridKeyDown} =
-    useGridFocus<HTMLDivElement>({
-      columns: 7,
-      cellSelector: 'button:not([disabled])',
-      onNavigateBefore: handleNavigatePrevious,
-      onNavigateAfter: handleNavigateNext,
-      onPageUp: handlePageUp,
-      onPageDown: handlePageDown,
-    });
+  // Grid focus navigation.
+  //
+  // The hook enumerates ALL grid cells (every `role="gridcell"`, including
+  // disabled days and empty placeholder cells) so the true 7-column geometry is
+  // preserved. `isCellFocusable` / `getFocusTarget` tell the hook which cells
+  // can take focus (those containing an enabled day button) and where to send
+  // focus (the day button inside the cell). Arrow keys move to the target
+  // row/column and, if that cell is disabled, continue in the same direction to
+  // the next enabled cell.
+  const {
+    gridRef,
+    handleKeyDown: handleGridKeyDown,
+    handleFocus: handleGridFocus,
+  } = useGridFocus<HTMLDivElement>({
+    columns: 7,
+    cellSelector: '[role="gridcell"]',
+    isCellFocusable: cell =>
+      cell.querySelector('button:not([disabled])') !== null,
+    getFocusTarget: cell => cell.querySelector<HTMLElement>('button'),
+    hasRovingTabIndex: true,
+    onNavigateBefore: handleNavigatePrevious,
+    onNavigateAfter: handleNavigateNext,
+    onPageUp: handlePageUp,
+    onPageDown: handlePageDown,
+  });
 
   // Handle pending focus after month navigation
   useEffect(() => {
@@ -627,11 +677,11 @@ function MonthGrid({
     );
 
     const targetPd = plainDateFromISO(pendingFocus);
-    const targetLabel = plainDateFormat(targetPd, DATE_FORMAT_WITH_WEEKDAY);
+    const targetIso = plainDateToISO(targetPd);
 
     let targetButton: HTMLElement | null = null;
     for (const button of buttons) {
-      if (button.getAttribute('aria-label') === targetLabel) {
+      if (button.getAttribute('data-date') === targetIso) {
         targetButton = button;
         break;
       }
@@ -688,40 +738,38 @@ function MonthGrid({
 
   return (
     <div {...stylex.props(monthGridStyles.monthGrid)}>
-      {/* Day names header */}
-      <div
-        {...stylex.props(
-          monthGridStyles.weekHeader,
-          hasWeekNumbers && monthGridStyles.weekHeaderWithNumbers,
-        )}>
-        {hasWeekNumbers && (
-          <div
-            {...stylex.props(
-              monthGridStyles.dayName,
-              monthGridStyles.weekNumberHeader,
-            )}
-          />
-        )}
-        {dayNames.map(name => (
-          <div
-            key={name}
-            role="columnheader"
-            {...stylex.props(monthGridStyles.dayName)}>
-            {name}
-          </div>
-        ))}
-      </div>
-
-      {/* Days grid */}
+      {/* Days grid (APG grid: header row of columnheaders + week rows) */}
       <div
         ref={gridRef}
         role="grid"
         aria-label={monthLabel}
         onKeyDown={handleGridKeyDown}
+        onFocus={handleGridFocus}
         {...stylex.props(
           monthGridStyles.daysGrid,
           hasWeekNumbers && monthGridStyles.daysGridWithNumbers,
         )}>
+        {/* Day names header row (columnheaders live inside the grid). Uses the
+            same display:contents row so its cells align to the grid columns. */}
+        <div role="row" {...stylex.props(monthGridStyles.weekRow)}>
+          {hasWeekNumbers && (
+            <div
+              {...stylex.props(
+                monthGridStyles.dayName,
+                monthGridStyles.weekNumberHeader,
+              )}
+            />
+          )}
+          {dayNames.map(name => (
+            <div
+              key={name}
+              role="columnheader"
+              {...stylex.props(monthGridStyles.dayName)}>
+              {name}
+            </div>
+          ))}
+        </div>
+
         {weeks.map(week => {
           const weekDate = week.find(d => !d.isOutside)?.date || week[0].date;
           const weekNum = plainDateGetWeekNumber(weekDate);
@@ -732,29 +780,48 @@ function MonthGrid({
               role="row"
               {...stylex.props(monthGridStyles.weekRow)}>
               {hasWeekNumbers && (
-                <div {...stylex.props(monthGridStyles.weekNumber)}>
+                <div
+                  role="rowheader"
+                  {...stylex.props(monthGridStyles.weekNumber)}>
                   {weekNum}
                 </div>
               )}
-              {week.map((day, dayIndex) => (
-                <DayCell
-                  key={day.iso}
-                  day={day}
-                  dayIndex={dayIndex}
-                  mode={mode}
-                  selectedDate={selectedDate}
-                  rangeStart={rangeStart}
-                  rangeEnd={rangeEnd}
-                  previewStart={previewStart}
-                  previewEnd={previewEnd}
-                  today={today}
-                  hasOutsideDays={hasOutsideDays}
-                  isDisabled={isDateDisabled(day.date)}
-                  isTabbable={isTabbable(day.iso)}
-                  onDayClick={onDayClick}
-                  onDayHover={onDayHover}
-                />
-              ))}
+              {week.map((day, dayIndex) => {
+                // Whether the previous/next day in this week row continues the
+                // highlighted run (range and preview). A disabled or
+                // adjacent-month neighbour breaks continuity, so this day gets
+                // an end cap on that side (#2715).
+                const neighbors = computeDayNeighborContinuity({
+                  week,
+                  dayIndex,
+                  mode,
+                  rangeStart,
+                  rangeEnd,
+                  previewStart,
+                  previewEnd,
+                  isDisabled: isDateDisabled,
+                });
+                return (
+                  <DayCell
+                    key={day.iso}
+                    day={day}
+                    dayIndex={dayIndex}
+                    mode={mode}
+                    selectedDate={selectedDate}
+                    rangeStart={rangeStart}
+                    rangeEnd={rangeEnd}
+                    previewStart={previewStart}
+                    previewEnd={previewEnd}
+                    today={today}
+                    hasOutsideDays={hasOutsideDays}
+                    isDisabled={isDateDisabled(day.date)}
+                    neighbors={neighbors}
+                    isTabbable={day.iso === seedTabbableIso}
+                    onDayClick={onDayClick}
+                    onDayHover={onDayHover}
+                  />
+                );
+              })}
             </div>
           );
         })}
@@ -779,6 +846,17 @@ interface DayCellProps {
   today: PlainDate;
   hasOutsideDays: boolean;
   isDisabled: boolean;
+  /**
+   * Whether the previous/next day in the same week continues the highlighted
+   * run (range and preview). When a neighbour is disabled or outside the month
+   * it breaks the run, so this day gets an end cap on that side (#2715).
+   */
+  neighbors: DayNeighborContinuity;
+  /**
+   * Whether this day seeds the initial roving tab stop. useGridFocus
+   * (`hasRovingTabIndex`) owns the live tab stop thereafter — it honors an
+   * existing `tabindex="0"` and repairs/moves it on navigation and focus.
+   */
   isTabbable: boolean;
   onDayClick: (date: PlainDate) => void;
   onDayHover: (date: PlainDate | null) => void;
@@ -796,6 +874,7 @@ function DayCell({
   today,
   hasOutsideDays,
   isDisabled,
+  neighbors,
   isTabbable: isTabbableDay,
   onDayClick,
   onDayHover,
@@ -803,7 +882,9 @@ function DayCell({
   const {date, isOutside, dayNumber} = day;
 
   if (isOutside && !hasOutsideDays) {
-    return <div {...stylex.props(dayCellStyles.cell)} />;
+    // Empty placeholder cell — still a gridcell so the grid geometry stays a
+    // clean 7-per-row set for keyboard navigation.
+    return <div role="gridcell" {...stylex.props(dayCellStyles.cell)} />;
   }
 
   const state = computeDayCellState({
@@ -821,11 +902,17 @@ function DayCell({
   });
 
   const endpoint = isEndpoint(state);
-  const rangeRounding = computeRangeRounding(state);
-  const previewRounding = computePreviewRounding(state);
+  const rangeRounding = computeRangeRounding(state, {
+    prevInRange: neighbors.prevInRange,
+    nextInRange: neighbors.nextInRange,
+  });
+  const previewRounding = computePreviewRounding(state, {
+    prevInPreview: neighbors.prevInPreview,
+    nextInPreview: neighbors.nextInPreview,
+  });
 
   return (
-    <div {...stylex.props(dayCellStyles.cell)}>
+    <div role="gridcell" {...stylex.props(dayCellStyles.cell)}>
       {/* Range background */}
       {state.isInRange && (
         <div
@@ -863,12 +950,12 @@ function DayCell({
       {/* Day button */}
       <button
         type="button"
-        role="gridcell"
         data-date={day.iso}
         aria-label={plainDateFormat(date, DATE_FORMAT_WITH_WEEKDAY)}
         aria-selected={state.isSelected || state.isInRange || undefined}
         aria-disabled={state.effectivelyDisabled || undefined}
         disabled={isDisabled}
+        // Initial roving tab-stop seed; useGridFocus owns it after mount.
         tabIndex={isTabbableDay ? 0 : -1}
         onClick={() => !state.effectivelyDisabled && onDayClick(date)}
         onMouseEnter={() => !state.effectivelyDisabled && onDayHover(date)}