@proyecto-viviana/solidaria 0.2.5 → 0.3.0

package/src/calendar/createRangeCalendarCell.ts

@@ -5,20 +5,22 @@
  * Based on @react-aria/calendar useCalendarCell (with range support)
  */
 
-import { createSignal, createMemo } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils/reactivity';
-import type { RangeCalendarState, CalendarDate, DateValue } from '@proyecto-viviana/solid-stately';
-import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from '@internationalized/date';
-
-// ============================================
-// TYPES
-// ============================================
+import { createSignal, createMemo, createEffect } from "solid-js";
+import { access, type MaybeAccessor } from "../utils/reactivity";
+import { focusSafely } from "../utils/focus";
+import { createDescription } from "../utils/createDescription";
+import type { RangeCalendarState, CalendarDate, DateValue } from "@proyecto-viviana/solid-stately";
+import { isToday as isTodayUtil, DateFormatter, getLocalTimeZone } from "@internationalized/date";
+import { getCalendarHookData, getEraFormat } from "./utils";
+import { formatCalendarLabel, formatCalendarPrompt } from "./intl";
 
 export interface AriaRangeCalendarCellProps {
   /** The date represented by the cell. */
   date: DateValue;
   /** Whether the cell is disabled. */
   isDisabled?: boolean;
+  /** Whether the date is outside the current month grid. */
+  isOutsideMonth?: boolean;
 }
 
 export interface RangeCalendarCellAria {
@@ -38,6 +40,8 @@ export interface RangeCalendarCellAria {
   isDisabled: boolean;
   /** Whether the cell is unavailable (e.g., booked date). */
   isUnavailable: boolean;
+  /** Whether the cell is part of an invalid selection. */
+  isInvalid: boolean;
   /** Whether the cell is outside the visible month. */
   isOutsideMonth: boolean;
   /** Whether the cell represents today. */
@@ -48,17 +52,13 @@ export interface RangeCalendarCellAria {
   formattedDate: string;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a range calendar cell.
  */
 export function createRangeCalendarCell<T extends RangeCalendarState>(
   props: MaybeAccessor<AriaRangeCalendarCellProps>,
   state: T,
-  _ref?: () => HTMLElement | null
+  ref?: () => HTMLElement | null,
 ): RangeCalendarCellAria {
   const getProps = () => access(props);
   const [isPressed, setIsPressed] = createSignal(false);
@@ -72,29 +72,57 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
   const isSelectionStart = createMemo(() => state.isSelectionStart(date()));
   const isSelectionEnd = createMemo(() => state.isSelectionEnd(date()));
   const isFocused = createMemo(() => state.isCellFocused(date()));
+  const isInvalid = createMemo(() => {
+    const range = state.highlightedRange();
+    const d = date();
+    return (
+      state.isValueInvalid() &&
+      !state.anchorDate() &&
+      !!range &&
+      d.compare(range.start) >= 0 &&
+      d.compare(range.end) <= 0
+    );
+  });
   const isDisabled = createMemo(() => {
     return getProps().isDisabled || state.isCellDisabled(date());
   });
   const isUnavailable = createMemo(() => state.isCellUnavailable(date()));
-  const isOutsideMonth = createMemo(() => state.isOutsideVisibleRange(date()));
+  const isSelectable = createMemo(() => !isDisabled() && !isUnavailable());
+  const isOutsideMonth = createMemo(() => {
+    return getProps().isOutsideMonth ?? state.isOutsideVisibleRange(date());
+  });
   const isToday = createMemo(() => isTodayUtil(date(), timeZone));
+  const rangeSelectionPrompt = createMemo(() => {
+    if (!isFocused() || state.isReadOnly() || !isSelectable()) {
+      return undefined;
+    }
+
+    return formatCalendarPrompt(
+      state.locale(),
+      state.anchorDate() ? "finishRangeSelectionPrompt" : "startRangeSelectionPrompt",
+    );
+  });
+  const descriptionProps = createDescription(rangeSelectionPrompt);
 
   // Format the date for display
   const formattedDate = createMemo(() => {
     return date().day.toString();
   });
 
-  // Handle click
-  const handleClick = () => {
-    if (!isDisabled() && !isUnavailable()) {
+  // Handle pointer down - selection on pointerdown avoids losing selection when
+  // hover/focus updates re-render cells before click fires.
+  const handlePointerDown = (e: PointerEvent) => {
+    if (isSelectable()) {
+      setIsPressed(true);
       state.selectDate(date());
+      e.preventDefault();
     }
   };
 
-  // Handle pointer events for pressed state
-  const handlePointerDown = () => {
-    if (!isDisabled() && !isUnavailable()) {
-      setIsPressed(true);
+  // Handle click for keyboard activation (Enter/Space).
+  const handleClick = () => {
+    if (isSelectable()) {
+      state.selectDate(date());
     }
   };
 
@@ -104,42 +132,89 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
 
   // Handle hover during range selection
   const handlePointerEnter = () => {
-    if (state.isDragging() && !isDisabled() && !isUnavailable()) {
+    if (state.isDragging() && isSelectable()) {
       state.setFocusedDate(date());
     }
   };
 
+  // Keep DOM focus synchronized with focused date updates.
+  // Use focusSafely (preventScroll) to match @react-aria/calendar — bare focus()
+  // causes the browser to auto-scroll the page when bringing the cell into view,
+  // which is wrong inside a popover.
+  createEffect(() => {
+    const element = ref?.();
+    if (element && isFocused()) {
+      focusSafely(element);
+    }
+  });
+
   // Cell props (for the td element)
   const cellProps = createMemo(() => ({
-    role: 'gridcell',
-    'aria-disabled': isDisabled() || undefined,
-    'aria-selected': isSelected() || undefined,
+    role: "gridcell",
+    "aria-disabled": isDisabled() || isUnavailable() || undefined,
+    "aria-selected": isSelected() || undefined,
+    "aria-invalid": isInvalid() || undefined,
   }));
 
   // Button props (for the interactive element inside)
   const buttonProps = createMemo(() => {
     const d = date();
-    const formatter = new DateFormatter('en-US', {
-      weekday: 'long',
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
-    });
+    const formatter = new DateFormatter(state.locale(), {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+      era: getEraFormat(d),
+      calendar: d.calendar.identifier,
+      timeZone,
+    } as Intl.DateTimeFormatOptions);
+    const hookData = getCalendarHookData(state);
+    let label = "";
+
+    if (
+      hookData?.selectedDateDescription &&
+      !state.anchorDate() &&
+      state.value() &&
+      (state.isSelectionStart(d) || state.isSelectionEnd(d))
+    ) {
+      label = `${hookData.selectedDateDescription}, `;
+    }
+
+    label += formatter.format(d.toDate(timeZone));
+    if (isToday()) {
+      label = formatCalendarLabel(
+        state.locale(),
+        isSelected() ? "todayDateSelected" : "todayDate",
+        { date: label },
+      );
+    } else if (isSelected()) {
+      label = formatCalendarLabel(state.locale(), "dateSelected", { date: label });
+    }
+
+    const errorMessageId = hookData?.errorMessageId;
+    const describedByIds = [
+      isInvalid() ? errorMessageId : undefined,
+      descriptionProps["aria-describedby"],
+    ].filter(Boolean);
 
     return {
-      role: 'button',
+      role: "button",
       tabIndex: isFocused() ? 0 : -1,
-      'aria-label': formatter.format(d.toDate(timeZone)),
-      'aria-disabled': isDisabled() || undefined,
-      'aria-pressed': isPressed() || undefined,
-      disabled: isDisabled(),
+      "aria-label": label,
+      "aria-disabled": isDisabled() || isUnavailable() || undefined,
+      "aria-invalid": isInvalid() || undefined,
+      "aria-describedby": describedByIds.length ? describedByIds.join(" ") : undefined,
+      "aria-pressed": isPressed() || undefined,
+      disabled: isDisabled() || isUnavailable(),
       onClick: handleClick,
       onPointerDown: handlePointerDown,
       onPointerUp: handlePointerUp,
       onPointerLeave: handlePointerUp,
       onPointerEnter: handlePointerEnter,
       onFocus: () => {
-        state.setFocusedDate(d);
+        if (!state.isCellFocused(d)) {
+          state.setFocusedDate(d);
+        }
         state.setFocused(true);
       },
     };
@@ -170,6 +245,9 @@ export function createRangeCalendarCell<T extends RangeCalendarState>(
     get isUnavailable() {
       return isUnavailable();
     },
+    get isInvalid() {
+      return isInvalid();
+    },
     get isOutsideMonth() {
       return isOutsideMonth();
     },

package/src/calendar/index.ts

@@ -1,34 +1,30 @@
 // Calendar
-export {
-  createCalendar,
-  type AriaCalendarProps,
-  type CalendarAria,
-} from './createCalendar';
+export { createCalendar, type AriaCalendarProps, type CalendarAria } from "./createCalendar";
 
 // Calendar Grid
 export {
   createCalendarGrid,
   type AriaCalendarGridProps,
   type CalendarGridAria,
-} from './createCalendarGrid';
+} from "./createCalendarGrid";
 
 // Calendar Cell
 export {
   createCalendarCell,
   type AriaCalendarCellProps,
   type CalendarCellAria,
-} from './createCalendarCell';
+} from "./createCalendarCell";
 
 // Range Calendar
 export {
   createRangeCalendar,
   type AriaRangeCalendarProps,
   type RangeCalendarAria,
-} from './createRangeCalendar';
+} from "./createRangeCalendar";
 
 // Range Calendar Cell
 export {
   createRangeCalendarCell,
   type AriaRangeCalendarCellProps,
   type RangeCalendarCellAria,
-} from './createRangeCalendarCell';
+} from "./createRangeCalendarCell";

package/src/calendar/intl/index.ts

@@ -0,0 +1,210 @@
+import {
+  LocalizedStringDictionary,
+  LocalizedStringFormatter,
+  type LocalizedStrings,
+} from "@internationalized/string";
+
+type CalendarPromptKey = "startRangeSelectionPrompt" | "finishRangeSelectionPrompt";
+type CalendarLabelKey =
+  | "dateRange"
+  | "dateSelected"
+  | "maximumDate"
+  | "minimumDate"
+  | "selectedDateDescription"
+  | "selectedRangeDescription"
+  | "todayDate"
+  | "todayDateSelected";
+type CalendarLabelVariables = {
+  date?: string;
+  dateRange?: string;
+  startDate?: string;
+  endDate?: string;
+};
+type CalendarLabelMessage = string | ((args: CalendarLabelVariables | undefined) => string);
+
+const calendarPromptStrings: LocalizedStrings<CalendarPromptKey, string> = {
+  "ar-AE": {
+    startRangeSelectionPrompt: "انقر لبدء عملية تحديد نطاق التاريخ",
+    finishRangeSelectionPrompt: "انقر لإنهاء عملية تحديد نطاق التاريخ",
+  },
+  "bg-BG": {
+    startRangeSelectionPrompt: "Натиснете, за да пристъпите към избора на времеви интервал",
+    finishRangeSelectionPrompt: "Натиснете, за да довършите избора на времеви интервал",
+  },
+  "cs-CZ": {
+    startRangeSelectionPrompt: "Kliknutím zahájíte výběr rozsahu dat",
+    finishRangeSelectionPrompt: "Kliknutím dokončíte výběr rozsahu dat",
+  },
+  "da-DK": {
+    startRangeSelectionPrompt: "Klik for at starte valg af datoområde",
+    finishRangeSelectionPrompt: "Klik for at fuldføre valg af datoområde",
+  },
+  "de-DE": {
+    startRangeSelectionPrompt: "Klicken, um die Auswahl des Datumsbereichs zu beginnen",
+    finishRangeSelectionPrompt: "Klicken, um die Auswahl des Datumsbereichs zu beenden",
+  },
+  "el-GR": {
+    startRangeSelectionPrompt: "Κάντε κλικ για να ξεκινήσετε την επιλογή εύρους ημερομηνιών",
+    finishRangeSelectionPrompt: "Κάντε κλικ για να ολοκληρώσετε την επιλογή εύρους ημερομηνιών",
+  },
+  "en-US": {
+    startRangeSelectionPrompt: "Click to start selecting date range",
+    finishRangeSelectionPrompt: "Click to finish selecting date range",
+  },
+  "es-ES": {
+    startRangeSelectionPrompt: "Haga clic para comenzar a seleccionar un rango de fechas",
+    finishRangeSelectionPrompt: "Haga clic para terminar de seleccionar rango de fechas",
+  },
+  "et-EE": {
+    startRangeSelectionPrompt: "Klõpsake kuupäevavahemiku valimiseks",
+    finishRangeSelectionPrompt: "Klõpsake kuupäevavahemiku valimise lõpetamiseks",
+  },
+  "fi-FI": {
+    startRangeSelectionPrompt: "Aloita päivämääräalueen valinta napsauttamalla tätä.",
+    finishRangeSelectionPrompt: "Lopeta päivämääräalueen valinta napsauttamalla tätä.",
+  },
+  "fr-FR": {
+    startRangeSelectionPrompt: "Cliquer pour commencer à sélectionner la plage de dates",
+    finishRangeSelectionPrompt: "Cliquer pour finir de sélectionner la plage de dates",
+  },
+  "he-IL": {
+    startRangeSelectionPrompt: "לחץ כדי להתחיל בבחירת טווח התאריכים",
+    finishRangeSelectionPrompt: "חץ כדי לסיים את בחירת טווח התאריכים",
+  },
+  "hr-HR": {
+    startRangeSelectionPrompt: "Kliknite da započnete raspon odabranih datuma",
+    finishRangeSelectionPrompt: "Kliknite da dovršite raspon odabranih datuma",
+  },
+  "hu-HU": {
+    startRangeSelectionPrompt: "Kattintson a dátumtartomány kijelölésének indításához",
+    finishRangeSelectionPrompt: "Kattintson a dátumtartomány kijelölésének befejezéséhez",
+  },
+  "it-IT": {
+    startRangeSelectionPrompt: "Fai clic per selezionare l’intervallo di date",
+    finishRangeSelectionPrompt: "Fai clic per completare la selezione dell’intervallo di date",
+  },
+  "ja-JP": {
+    startRangeSelectionPrompt: "クリックして日付範囲の選択を開始",
+    finishRangeSelectionPrompt: "クリックして日付範囲の選択を終了",
+  },
+  "ko-KR": {
+    startRangeSelectionPrompt: "날짜 범위 선택을 시작하려면 클릭하십시오.",
+    finishRangeSelectionPrompt: "날짜 범위 선택을 완료하려면 클릭하십시오.",
+  },
+  "lt-LT": {
+    startRangeSelectionPrompt: "Spustelėkite, kad pradėtumėte pasirinkti datų intervalą",
+    finishRangeSelectionPrompt: "Spustelėkite, kad baigtumėte pasirinkti datų intervalą",
+  },
+  "lv-LV": {
+    startRangeSelectionPrompt: "Noklikšķiniet, lai sāktu datumu diapazona atlasi",
+    finishRangeSelectionPrompt: "Noklikšķiniet, lai pabeigtu datumu diapazona atlasi",
+  },
+  "nb-NO": {
+    startRangeSelectionPrompt: "Klikk for å starte valg av datoområde",
+    finishRangeSelectionPrompt: "Klikk for å fullføre valg av datoområde",
+  },
+  "nl-NL": {
+    startRangeSelectionPrompt: "Klik om het datumbereik te selecteren",
+    finishRangeSelectionPrompt: "Klik om de selectie van het datumbereik te voltooien",
+  },
+  "pl-PL": {
+    startRangeSelectionPrompt: "Kliknij, aby rozpocząć wybór zakresu dat",
+    finishRangeSelectionPrompt: "Kliknij, aby zakończyć wybór zakresu dat",
+  },
+  "pt-BR": {
+    startRangeSelectionPrompt: "Clique para iniciar a seleção do intervalo de datas",
+    finishRangeSelectionPrompt: "Clique para concluir a seleção do intervalo de datas",
+  },
+  "pt-PT": {
+    startRangeSelectionPrompt: "Clique para começar a selecionar o intervalo de datas",
+    finishRangeSelectionPrompt: "Clique para terminar de selecionar o intervalo de datas",
+  },
+  "ro-RO": {
+    startRangeSelectionPrompt: "Apăsaţi pentru a începe selecţia razei pentru dată",
+    finishRangeSelectionPrompt: "Apăsaţi pentru a finaliza selecţia razei pentru dată",
+  },
+  "ru-RU": {
+    startRangeSelectionPrompt: "Щелкните, чтобы начать выбор диапазона дат",
+    finishRangeSelectionPrompt: "Щелкните, чтобы завершить выбор диапазона дат",
+  },
+  "sk-SK": {
+    startRangeSelectionPrompt: "Kliknutím spustíte výber rozsahu dátumov",
+    finishRangeSelectionPrompt: "Kliknutím dokončíte výber rozsahu dátumov",
+  },
+  "sl-SI": {
+    startRangeSelectionPrompt: "Kliknite za začetek izbire datumskega obsega",
+    finishRangeSelectionPrompt: "Kliknite za dokončanje izbire datumskega obsega",
+  },
+  "sr-SP": {
+    startRangeSelectionPrompt: "Kliknite da započnete opseg izabranih datuma",
+    finishRangeSelectionPrompt: "Kliknite da dovršite opseg izabranih datuma",
+  },
+  "sv-SE": {
+    startRangeSelectionPrompt: "Klicka för att välja datumintervall",
+    finishRangeSelectionPrompt: "Klicka för att avsluta val av datumintervall",
+  },
+  "tr-TR": {
+    startRangeSelectionPrompt: "Tarih aralığı seçimini başlatmak için tıklayın",
+    finishRangeSelectionPrompt: "Tarih aralığı seçimini tamamlamak için tıklayın",
+  },
+  "uk-UA": {
+    startRangeSelectionPrompt: "Натисніть, щоб почати вибір діапазону дат",
+    finishRangeSelectionPrompt: "Натисніть, щоб завершити вибір діапазону дат",
+  },
+  "zh-CN": {
+    startRangeSelectionPrompt: "单击以开始选择日期范围",
+    finishRangeSelectionPrompt: "单击以完成选择日期范围",
+  },
+  "zh-TW": {
+    startRangeSelectionPrompt: "按一下以開始選取日期範圍",
+    finishRangeSelectionPrompt: "按一下以完成選取日期範圍",
+  },
+};
+
+const calendarPromptDictionary = new LocalizedStringDictionary(calendarPromptStrings);
+
+const calendarLabelStrings: LocalizedStrings<CalendarLabelKey, CalendarLabelMessage> = {
+  "en-US": {
+    dateRange: (args) => `${args?.startDate} to ${args?.endDate}`,
+    dateSelected: (args) => `${args?.date} selected`,
+    maximumDate: "Last available date",
+    minimumDate: "First available date",
+    selectedDateDescription: (args) => `Selected Date: ${args?.date}`,
+    selectedRangeDescription: (args) => `Selected Range: ${args?.dateRange}`,
+    todayDate: (args) => `Today, ${args?.date}`,
+    todayDateSelected: (args) => `Today, ${args?.date} selected`,
+  },
+  "fr-FR": {
+    dateRange: (args) => `${args?.startDate} à ${args?.endDate}`,
+    dateSelected: (args) => `${args?.date} sélectionné`,
+    maximumDate: "Dernière date disponible",
+    minimumDate: "Première date disponible",
+    selectedDateDescription: (args) => `Date sélectionnée : ${args?.date}`,
+    selectedRangeDescription: (args) => `Plage sélectionnée : ${args?.dateRange}`,
+    todayDate: (args) => `Aujourd'hui, ${args?.date}`,
+    todayDateSelected: (args) => `Aujourd’hui, ${args?.date} sélectionné`,
+  },
+  "ar-AE": {
+    dateRange: (args) => `${args?.startDate} إلى ${args?.endDate}`,
+    dateSelected: (args) => `${args?.date} المحدد`,
+    maximumDate: "آخر تاريخ متاح",
+    minimumDate: "أول تاريخ متاح",
+    selectedDateDescription: (args) => `تاريخ محدد: ${args?.date}`,
+    selectedRangeDescription: (args) => `المدى الزمني المحدد: ${args?.dateRange}`,
+    todayDate: (args) => `اليوم، ${args?.date}`,
+    todayDateSelected: (args) => `اليوم، ${args?.date} محدد`,
+  },
+};
+const calendarLabelDictionary = new LocalizedStringDictionary(calendarLabelStrings);
+
+export function formatCalendarPrompt(locale: string, key: CalendarPromptKey): string {
+  return new LocalizedStringFormatter(locale, calendarPromptDictionary).format(key);
+}
+
+export function formatCalendarLabel(
+  locale: string,
+  key: CalendarLabelKey,
+  variables?: CalendarLabelVariables,
+): string {
+  return new LocalizedStringFormatter(locale, calendarLabelDictionary).format(key, variables);
+}