@proyecto-viviana/solidaria-components 0.2.5 → 0.3.0

package/src/RangeCalendar.tsx

@@ -7,21 +7,24 @@
 
 import {
   type JSX,
+  type Accessor,
   createContext,
   createMemo,
   createSignal,
   splitProps,
   useContext,
   For,
+  Index,
   Show,
-} from 'solid-js';
+} from "solid-js";
 import {
   createRangeCalendar,
   createCalendarGrid,
   createRangeCalendarCell,
+  createHover,
   type AriaRangeCalendarProps,
   type AriaCalendarGridProps,
-} from '@proyecto-viviana/solidaria';
+} from "@proyecto-viviana/solidaria";
 import {
   createRangeCalendarState,
   type RangeCalendarState,
@@ -29,7 +32,9 @@ import {
   type CalendarDate,
   type DateValue,
   type RangeValue,
-} from '@proyecto-viviana/solid-stately';
+  endOfMonth,
+  isSameMonth,
+} from "@proyecto-viviana/solid-stately";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -38,24 +43,38 @@ import {
   useRenderProps,
   dataAttr,
   useIsHydrated,
-} from './utils';
+} from "./utils";
+import { VisuallyHidden } from "./VisuallyHidden";
 
-// ============================================
-// TYPES
-// ============================================
+type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
+
+function assignRef<T>(ref: RefLike<T>, el: T): void {
+  if (!ref) {
+    return;
+  }
+
+  if (typeof ref === "function") {
+    ref(el);
+  } else {
+    ref.current = el;
+  }
+}
 
 export interface RangeCalendarRenderProps {
   /** Whether the calendar is disabled. */
   isDisabled: boolean;
   /** Whether the calendar is read-only. */
   isReadOnly: boolean;
+  /** Whether the current selection is invalid. */
+  isInvalid: boolean;
   /** Whether the user is currently selecting a range. */
   isDragging: boolean;
 }
 
 export interface RangeCalendarProps<T extends DateValue = DateValue>
-  extends Omit<AriaRangeCalendarProps, 'id' | 'isDisabled' | 'isReadOnly'>,
-    Omit<RangeCalendarStateProps<T>, 'locale'>,
+  extends
+    Omit<AriaRangeCalendarProps, "id" | "isDisabled" | "isReadOnly">,
+    Omit<RangeCalendarStateProps<T>, "locale">,
     SlotProps {
   /** The children of the component. */
   children?: JSX.Element;
@@ -65,6 +84,8 @@ export interface RangeCalendarProps<T extends DateValue = DateValue>
   style?: StyleOrFunction<RangeCalendarRenderProps>;
   /** The locale to use for formatting. */
   locale?: string;
+  /** Ref for the range calendar root element. */
+  ref?: RefLike<HTMLDivElement>;
 }
 
 export interface RangeCalendarGridRenderProps {
@@ -72,13 +93,20 @@ export interface RangeCalendarGridRenderProps {
   isDisabled: boolean;
 }
 
-export interface RangeCalendarGridProps extends Omit<AriaCalendarGridProps, 'startDate' | 'endDate'>, SlotProps {
+export interface RangeCalendarGridProps
+  extends Omit<AriaCalendarGridProps, "startDate" | "endDate">, SlotProps {
   /** The children of the component (render function receiving dates). */
   children?: (date: CalendarDate) => JSX.Element;
   /** The CSS className for the element. */
   class?: ClassNameOrFunction<RangeCalendarGridRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<RangeCalendarGridRenderProps>;
+  /** Class name for weekday header cells. */
+  headerCellClass?: string;
+  /** Inline style for weekday header cells. */
+  headerCellStyle?: JSX.CSSProperties;
+  /** Number of months to offset from the start. */
+  offset?: { months?: number };
 }
 
 export interface RangeCalendarCellRenderProps {
@@ -94,12 +122,24 @@ export interface RangeCalendarCellRenderProps {
   isDisabled: boolean;
   /** Whether the cell is unavailable. */
   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. */
   isToday: boolean;
   /** Whether the cell is pressed. */
   isPressed: boolean;
+  /** Whether the cell is hovered. */
+  isHovered: boolean;
+  /** Whether the cell is the first day slot in its row. */
+  isFirstChild: boolean;
+  /** Whether the cell is the last day slot in its row. */
+  isLastChild: boolean;
+  /** Whether the cell is in the first rendered week row. */
+  isFirstWeek: boolean;
+  /** Whether the cell is in the last rendered week row. */
+  isLastWeek: boolean;
   /** The formatted date string. */
   formattedDate: string;
 }
@@ -113,26 +153,29 @@ export interface RangeCalendarCellProps extends SlotProps {
   class?: ClassNameOrFunction<RangeCalendarCellRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<RangeCalendarCellRenderProps>;
+  /** Class name for the table cell wrapper. */
+  cellClass?: ClassNameOrFunction<RangeCalendarCellRenderProps>;
+  /** Inline style for the table cell wrapper. */
+  cellStyle?: StyleOrFunction<RangeCalendarCellRenderProps>;
 }
 
-// ============================================
-// CONTEXT
-// ============================================
-
 export const RangeCalendarContext = createContext<RangeCalendarState<DateValue> | null>(null);
+export const RangeCalendarStateContext = createContext<RangeCalendarState<DateValue> | null>(null);
+const RangeCalendarGridMonthContext = createContext<Accessor<CalendarDate> | null>(null);
+const RangeCalendarGridCellPositionContext = createContext<Accessor<{
+  weekIndex: number;
+  dayIndex: number;
+  lastWeekIndex: number;
+}> | null>(null);
 
 export function useRangeCalendarContext(): RangeCalendarState<DateValue> {
   const context = useContext(RangeCalendarContext);
   if (!context) {
-    throw new Error('RangeCalendar components must be used within a RangeCalendar');
+    throw new Error("RangeCalendar components must be used within a RangeCalendar");
   }
   return context;
 }
 
-// ============================================
-// RANGE CALENDAR COMPONENT
-// ============================================
-
 /**
  * A range calendar displays a grid of days and allows users to select a contiguous range of dates.
  *
@@ -151,7 +194,7 @@ export function useRangeCalendarContext(): RangeCalendarState<DateValue> {
  * ```
  */
 export function RangeCalendar<T extends DateValue = CalendarDate>(
-  props: RangeCalendarProps<T>
+  props: RangeCalendarProps<T>,
 ): JSX.Element {
   // Use hydration-safe pattern for client-only rendering
   const isHydrated = useIsHydrated();
@@ -159,7 +202,12 @@ export function RangeCalendar<T extends DateValue = CalendarDate>(
   return (
     <Show
       when={isHydrated()}
-      fallback={<div class="solidaria-RangeCalendar solidaria-RangeCalendar--placeholder" aria-hidden="true" />}
+      fallback={
+        <div
+          class="solidaria-RangeCalendar solidaria-RangeCalendar--placeholder"
+          aria-hidden="true"
+        />
+      }
     >
       <RangeCalendarInner {...props} />
     </Show>
@@ -170,75 +218,78 @@ export function RangeCalendar<T extends DateValue = CalendarDate>(
  * Internal RangeCalendar component that renders after client mount.
  */
 function RangeCalendarInner<T extends DateValue = CalendarDate>(
-  props: RangeCalendarProps<T>
+  props: RangeCalendarProps<T>,
 ): JSX.Element {
   const [local, stateProps, rest] = splitProps(
     props,
-    ['children', 'class', 'style', 'slot'],
+    ["children", "class", "style", "slot", "ref"],
     [
-      'value',
-      'defaultValue',
-      'onChange',
-      'minValue',
-      'maxValue',
-      'isDisabled',
-      'isReadOnly',
-      'focusedValue',
-      'defaultFocusedValue',
-      'onFocusChange',
-      'locale',
-      'isDateUnavailable',
-      'visibleMonths',
-      'isDateDisabled',
-      'validationState',
-      'allowsNonContiguousRanges',
-      'firstDayOfWeek',
-    ]
+      "value",
+      "defaultValue",
+      "onChange",
+      "minValue",
+      "maxValue",
+      "isDisabled",
+      "isReadOnly",
+      "focusedValue",
+      "defaultFocusedValue",
+      "onFocusChange",
+      "locale",
+      "createCalendar",
+      "isDateUnavailable",
+      "visibleMonths",
+      "pageBehavior",
+      "selectionAlignment",
+      "isDateDisabled",
+      "validationState",
+      "allowsNonContiguousRanges",
+      "firstDayOfWeek",
+    ],
   );
 
-  // Create range calendar state
   const state = createRangeCalendarState(stateProps);
 
-  // Create range calendar ARIA props
   const calendarAria = createRangeCalendar(rest, state as unknown as RangeCalendarState<DateValue>);
 
-  // Render props values
   const renderValues = createMemo<RangeCalendarRenderProps>(() => ({
     isDisabled: state.isDisabled(),
     isReadOnly: state.isReadOnly(),
+    isInvalid: state.isValueInvalid(),
     isDragging: state.isDragging(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: local.class,
       style: local.style,
-      defaultClassName: 'solidaria-RangeCalendar',
+      defaultClassName: "solidaria-RangeCalendar",
     },
-    renderValues
+    renderValues,
   );
 
   return (
-    <RangeCalendarContext.Provider value={state as unknown as RangeCalendarState<DateValue>}>
-      <div
-        {...calendarAria.calendarProps}
-        class={renderProps.class()}
-        style={renderProps.style()}
-        data-disabled={dataAttr(state.isDisabled())}
-        data-readonly={dataAttr(state.isReadOnly())}
-        data-dragging={dataAttr(state.isDragging())}
-      >
-        {props.children}
-      </div>
-    </RangeCalendarContext.Provider>
+    <RangeCalendarStateContext.Provider value={state as unknown as RangeCalendarState<DateValue>}>
+      <RangeCalendarContext.Provider value={state as unknown as RangeCalendarState<DateValue>}>
+        <div
+          {...calendarAria.calendarProps}
+          ref={(el) => assignRef(local.ref, el)}
+          class={renderProps.class()}
+          style={renderProps.style()}
+          data-disabled={dataAttr(state.isDisabled())}
+          data-readonly={dataAttr(state.isReadOnly())}
+          data-invalid={dataAttr(state.isValueInvalid())}
+          data-dragging={dataAttr(state.isDragging())}
+        >
+          <VisuallyHidden>
+            <h2>{String(calendarAria.calendarProps["aria-label"] ?? "")}</h2>
+          </VisuallyHidden>
+          {props.children}
+        </div>
+      </RangeCalendarContext.Provider>
+    </RangeCalendarStateContext.Provider>
   );
 }
 
-// ============================================
-// RANGE CALENDAR HEADING COMPONENT
-// ============================================
-
 export interface RangeCalendarHeadingProps extends SlotProps {
   /** The CSS className for the element. */
   class?: string;
@@ -254,7 +305,7 @@ export function RangeCalendarHeading(props: RangeCalendarHeadingProps): JSX.Elem
 
   return (
     <h2
-      class={props.class ?? 'solidaria-RangeCalendarHeading'}
+      class={props.class ?? "solidaria-RangeCalendarHeading"}
       style={props.style}
       aria-live="polite"
     >
@@ -263,13 +314,9 @@ export function RangeCalendarHeading(props: RangeCalendarHeadingProps): JSX.Elem
   );
 }
 
-// ============================================
-// RANGE CALENDAR BUTTON COMPONENT
-// ============================================
-
 export interface RangeCalendarButtonProps extends SlotProps {
   /** The slot for this button (previous or next). */
-  slot?: 'previous' | 'next';
+  slot?: "previous" | "next";
   /** The children of the component. */
   children?: JSX.Element;
   /** The CSS className for the element. */
@@ -288,123 +335,158 @@ export function RangeCalendarButton(props: RangeCalendarButtonProps): JSX.Elemen
   const calendarAria = createRangeCalendar({}, state);
 
   const buttonProps = createMemo(() => {
-    if (props.slot === 'previous') {
+    if (props.slot === "previous") {
       return calendarAria.prevButtonProps;
     }
     return calendarAria.nextButtonProps;
   });
+  const isDisabled = createMemo(
+    () => props.isDisabled || Boolean(buttonProps().disabled) || state.isDisabled(),
+  );
 
   return (
     <button
       {...buttonProps()}
-      class={props.class ?? 'solidaria-RangeCalendarButton'}
+      class={props.class ?? "solidaria-RangeCalendarButton"}
       style={props.style}
-      disabled={props.isDisabled || state.isDisabled()}
+      disabled={isDisabled()}
     >
       {props.children}
     </button>
   );
 }
 
-// ============================================
-// RANGE CALENDAR GRID COMPONENT
-// ============================================
-
 /**
  * Displays a grid of range calendar cells.
  */
 export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
   const state = useRangeCalendarContext();
   const [gridRef, setGridRef] = createSignal<HTMLTableElement | null>(null);
+  const startDate = createMemo(() => {
+    const offsetMonths = props.offset?.months ?? 0;
+    const baseStart = state.visibleRange().start;
+    return offsetMonths ? baseStart.add({ months: offsetMonths }) : baseStart;
+  });
 
-  // Create grid ARIA props
   const gridAria = createCalendarGrid(
     {
+      startDate: startDate(),
+      endDate: endOfMonth(startDate()),
       weekdayStyle: props.weekdayStyle,
     },
     state as unknown as Parameters<typeof createCalendarGrid>[1],
-    gridRef
+    gridRef,
   );
 
-  // Render props values
   const renderValues = createMemo<RangeCalendarGridRenderProps>(() => ({
     isDisabled: state.isDisabled(),
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-RangeCalendarGrid',
+      defaultClassName: "solidaria-RangeCalendarGrid",
     },
-    renderValues
+    renderValues,
   );
 
-  // Get weeks to render
-  const weeks = createMemo(() => {
-    const numWeeks = state.getWeeksInMonth();
-    return Array.from({ length: numWeeks }, (_, i) => i);
+  // Memoize all dates for the grid to avoid reactive loops in render paths.
+  const allDates = createMemo(() => {
+    const monthStart = startDate();
+    const numWeeks = state.getWeeksInMonth(monthStart);
+    const weekDates: (CalendarDate | null)[][] = [];
+
+    for (let weekIndex = 0; weekIndex < numWeeks; weekIndex++) {
+      weekDates.push(state.getDatesInWeek(weekIndex, monthStart));
+    }
+
+    return weekDates;
   });
 
   return (
-    <table
-      ref={setGridRef}
-      {...gridAria.gridProps}
-      class={renderProps.class()}
-      style={renderProps.style()}
-    >
-      <thead {...gridAria.headerProps}>
-        <tr>
-          <For each={gridAria.weekDays}>
-            {(day) => (
-              <th scope="col" class="solidaria-RangeCalendarHeaderCell">
-                {day}
-              </th>
+    <RangeCalendarGridMonthContext.Provider value={startDate}>
+      <table
+        ref={setGridRef}
+        {...gridAria.gridProps}
+        class={renderProps.class()}
+        style={renderProps.style()}
+      >
+        <thead {...gridAria.headerProps}>
+          <tr>
+            <For each={gridAria.weekDays}>
+              {(day) => (
+                <th
+                  scope="col"
+                  class={props.headerCellClass ?? "solidaria-RangeCalendarHeaderCell"}
+                  style={props.headerCellStyle}
+                >
+                  {day}
+                </th>
+              )}
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          <Index each={allDates()}>
+            {(weekDates, weekIndex) => (
+              <tr>
+                <Index each={weekDates()}>
+                  {(date, dayIndex) => (
+                    <Show when={date()} fallback={<td />}>
+                      <RangeCalendarGridCellPositionContext.Provider
+                        value={() => ({
+                          weekIndex,
+                          dayIndex,
+                          lastWeekIndex: allDates().length - 1,
+                        })}
+                      >
+                        {props.children?.(date()!)}
+                      </RangeCalendarGridCellPositionContext.Provider>
+                    </Show>
+                  )}
+                </Index>
+              </tr>
             )}
-          </For>
-        </tr>
-      </thead>
-      <tbody>
-        <For each={weeks()}>
-          {(weekIndex) => (
-            <tr>
-              <For each={state.getDatesInWeek(weekIndex)}>
-                {(date) => (
-                  <Show when={date}>
-                    <td>
-                      {props.children?.(date!)}
-                    </td>
-                  </Show>
-                )}
-              </For>
-            </tr>
-          )}
-        </For>
-      </tbody>
-    </table>
+          </Index>
+        </tbody>
+      </table>
+    </RangeCalendarGridMonthContext.Provider>
   );
 }
 
-// ============================================
-// RANGE CALENDAR CELL COMPONENT
-// ============================================
-
 /**
  * A cell in the range calendar grid representing a single day.
  */
 export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
   const state = useRangeCalendarContext();
+  const currentMonthStart = useContext(RangeCalendarGridMonthContext);
+  const cellPosition = useContext(RangeCalendarGridCellPositionContext);
   const [cellRef, setCellRef] = createSignal<HTMLDivElement | null>(null);
+  const isOutsideMonth = createMemo(
+    () => currentMonthStart != null && !isSameMonth(currentMonthStart(), props.date),
+  );
+  const position = createMemo(
+    () =>
+      cellPosition?.() ?? {
+        weekIndex: 0,
+        dayIndex: 0,
+        lastWeekIndex: 0,
+      },
+  );
 
-  // Create cell ARIA props
   const cellAria = createRangeCalendarCell(
-    { date: props.date },
+    () => ({
+      date: props.date,
+      isOutsideMonth: isOutsideMonth(),
+    }),
     state,
-    cellRef
+    cellRef,
   );
+  const { hoverProps, isHovered } = createHover(() => ({
+    isDisabled: cellAria.isDisabled || cellAria.isUnavailable,
+  }));
 
-  // Render props values
   const renderValues = createMemo<RangeCalendarCellRenderProps>(() => ({
     isSelected: cellAria.isSelected,
     isSelectionStart: cellAria.isSelectionStart,
@@ -412,51 +494,68 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
     isFocused: cellAria.isFocused,
     isDisabled: cellAria.isDisabled,
     isUnavailable: cellAria.isUnavailable,
+    isInvalid: cellAria.isInvalid,
     isOutsideMonth: cellAria.isOutsideMonth,
     isToday: cellAria.isToday,
     isPressed: cellAria.isPressed,
+    isHovered: isHovered(),
+    isFirstChild: position().dayIndex === 0,
+    isLastChild: position().dayIndex === 6,
+    isFirstWeek: position().weekIndex === 0,
+    isLastWeek: position().weekIndex === position().lastWeekIndex,
     formattedDate: cellAria.formattedDate,
   }));
 
-  // Resolve render props
   const renderProps = useRenderProps(
     {
       children: props.children,
       class: props.class,
       style: props.style,
-      defaultClassName: 'solidaria-RangeCalendarCell',
+      defaultClassName: "solidaria-RangeCalendarCell",
     },
-    renderValues
+    renderValues,
+  );
+  const cellRenderProps = useRenderProps(
+    {
+      class: props.cellClass,
+      style: props.cellStyle,
+      defaultClassName: "solidaria-RangeCalendarCellWrapper",
+    },
+    renderValues,
   );
 
   // Determine children content - avoid Show for SSR hydration compatibility
   const getChildren = () => {
-    if (typeof props.children === 'function') {
+    if (typeof props.children === "function") {
       return renderProps.renderChildren();
     }
     return cellAria.formattedDate;
   };
 
   return (
-    <div
-      ref={setCellRef}
-      {...cellAria.buttonProps}
-      class={renderProps.class()}
-      style={renderProps.style()}
-      data-selected={dataAttr(cellAria.isSelected)}
-      data-selection-start={dataAttr(cellAria.isSelectionStart)}
-      data-selection-end={dataAttr(cellAria.isSelectionEnd)}
-      data-focused={dataAttr(cellAria.isFocused)}
-      data-disabled={dataAttr(cellAria.isDisabled)}
-      data-unavailable={dataAttr(cellAria.isUnavailable)}
-      data-outside-month={dataAttr(cellAria.isOutsideMonth)}
-      data-today={dataAttr(cellAria.isToday)}
-      data-pressed={dataAttr(cellAria.isPressed)}
-    >
-      {getChildren()}
-    </div>
+    <td {...cellAria.cellProps} class={cellRenderProps.class()} style={cellRenderProps.style()}>
+      <div
+        ref={setCellRef}
+        {...cellAria.buttonProps}
+        {...hoverProps}
+        class={renderProps.class()}
+        style={renderProps.style()}
+        data-selected={dataAttr(cellAria.isSelected)}
+        data-selection-start={dataAttr(cellAria.isSelectionStart)}
+        data-selection-end={dataAttr(cellAria.isSelectionEnd)}
+        data-focused={dataAttr(cellAria.isFocused)}
+        data-disabled={dataAttr(cellAria.isDisabled)}
+        data-unavailable={dataAttr(cellAria.isUnavailable)}
+        data-invalid={dataAttr(cellAria.isInvalid)}
+        data-outside-month={dataAttr(cellAria.isOutsideMonth)}
+        data-today={dataAttr(cellAria.isToday)}
+        data-pressed={dataAttr(cellAria.isPressed)}
+        data-hovered={dataAttr(isHovered())}
+      >
+        {getChildren()}
+      </div>
+    </td>
   );
 }
 
-// Re-export types
 export type { RangeCalendarState, RangeValue };