@proyecto-viviana/solidaria-components 0.2.4 → 0.2.9

package/src/RangeCalendar.tsx

@@ -13,6 +13,7 @@ import {
   splitProps,
   useContext,
   For,
+  Index,
   Show,
 } from 'solid-js';
 import {
@@ -29,6 +30,8 @@ import {
   type CalendarDate,
   type DateValue,
   type RangeValue,
+  endOfMonth,
+  isSameMonth,
 } from '@proyecto-viviana/solid-stately';
 import {
   type RenderChildren,
@@ -79,6 +82,8 @@ export interface RangeCalendarGridProps extends Omit<AriaCalendarGridProps, 'sta
   class?: ClassNameOrFunction<RangeCalendarGridRenderProps>;
   /** The inline style for the element. */
   style?: StyleOrFunction<RangeCalendarGridRenderProps>;
+  /** Number of months to offset from the start. */
+  offset?: { months?: number };
 }
 
 export interface RangeCalendarCellRenderProps {
@@ -120,6 +125,8 @@ export interface RangeCalendarCellProps extends SlotProps {
 // ============================================
 
 export const RangeCalendarContext = createContext<RangeCalendarState<DateValue> | null>(null);
+export const RangeCalendarStateContext = createContext<RangeCalendarState<DateValue> | null>(null);
+const RangeCalendarGridMonthContext = createContext<CalendarDate | null>(null);
 
 export function useRangeCalendarContext(): RangeCalendarState<DateValue> {
   const context = useContext(RangeCalendarContext);
@@ -220,18 +227,20 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
   );
 
   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}
+          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>
   );
 }
 
@@ -316,10 +325,17 @@ export function RangeCalendarButton(props: RangeCalendarButtonProps): JSX.Elemen
 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],
@@ -341,48 +357,55 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
     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="solidaria-RangeCalendarHeaderCell">
+                  {day}
+                </th>
+              )}
+            </For>
+          </tr>
+        </thead>
+        <tbody>
+          <Index each={allDates()}>
+            {(weekDates) => (
+              <tr>
+                <Index each={weekDates()}>
+                  {(date) => (
+                    <Show when={date()} fallback={<td />}>
+                      {props.children?.(date()!)}
+                    </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>
   );
 }
 
@@ -395,11 +418,18 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
  */
 export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
   const state = useRangeCalendarContext();
+  const currentMonthStart = useContext(RangeCalendarGridMonthContext);
   const [cellRef, setCellRef] = createSignal<HTMLDivElement | null>(null);
+  const isOutsideMonth = createMemo(
+    () => currentMonthStart != null && !isSameMonth(currentMonthStart, props.date)
+  );
 
   // Create cell ARIA props
   const cellAria = createRangeCalendarCell(
-    { date: props.date },
+    () => ({
+      date: props.date,
+      isOutsideMonth: isOutsideMonth(),
+    }),
     state,
     cellRef
   );
@@ -438,23 +468,25 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
   };
 
   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}>
+      <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>
   );
 }
 

package/src/RouterProvider.tsx

@@ -0,0 +1,240 @@
+/**
+ * RouterProvider for solidaria-components
+ *
+ * A context provider for client-side router integration.
+ * SolidJS apps typically use TanStack Router or SolidRouter directly;
+ * this provides API compatibility with React Aria's RouterProvider.
+ */
+
+import { type JSX, createContext, useContext } from 'solid-js';
+
+// ============================================
+// TYPES
+// ============================================
+
+export interface RouterClickModifiers {
+  metaKey?: boolean;
+  ctrlKey?: boolean;
+  altKey?: boolean;
+  shiftKey?: boolean;
+}
+
+export interface RouterContextValue {
+  /** Whether the router is a native browser router (no client-side navigation). */
+  isNative: boolean;
+  /** Navigate to a given href. */
+  navigate: (href: string, routerOptions?: RouterOptions) => void;
+  /** Open a link target with router-aware navigation behavior. */
+  open: (
+    target: Element,
+    modifiers: RouterClickModifiers,
+    href: string,
+    routerOptions?: RouterOptions
+  ) => void;
+  /** Transform an href for the router. */
+  useHref: (href: string) => string;
+}
+
+export interface RouterOptions {
+  /** Whether to replace the current history entry. */
+  replace?: boolean;
+  /** Additional router-specific options. */
+  [key: string]: unknown;
+}
+
+export interface RouterProviderProps {
+  /** A function that performs client-side navigation. */
+  navigate: (href: string, routerOptions?: RouterOptions) => void;
+  /** An optional function that transforms hrefs. */
+  useHref?: (href: string) => string;
+  /** Children to render. */
+  children: JSX.Element;
+}
+
+// ============================================
+// CONTEXT
+// ============================================
+
+const defaultRouter: RouterContextValue = {
+  isNative: true,
+  navigate: () => {},
+  open: (target, modifiers) => {
+    openSyntheticLink(target, modifiers);
+  },
+  useHref: (href: string) => href,
+};
+
+export const RouterContext = createContext<RouterContextValue>(defaultRouter);
+
+// ============================================
+// HELPERS
+// ============================================
+
+export interface LinkDOMProps {
+  href?: string;
+  target?: string;
+  rel?: string;
+  download?: string | boolean;
+  ping?: string;
+  referrerPolicy?:
+    | ''
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url';
+}
+
+export function shouldClientNavigate(link: HTMLAnchorElement, modifiers: RouterClickModifiers): boolean {
+  const target = link.getAttribute('target');
+  const sameOrigin = typeof location === 'undefined' ? true : link.origin === location.origin;
+  return (
+    (!target || target === '_self') &&
+    sameOrigin &&
+    !link.hasAttribute('download') &&
+    !modifiers.metaKey &&
+    !modifiers.ctrlKey &&
+    !modifiers.altKey &&
+    !modifiers.shiftKey
+  );
+}
+
+export function openLink(target: HTMLAnchorElement, modifiers: RouterClickModifiers): void {
+  const event = new MouseEvent('click', {
+    metaKey: modifiers.metaKey,
+    ctrlKey: modifiers.ctrlKey,
+    altKey: modifiers.altKey,
+    shiftKey: modifiers.shiftKey,
+    detail: 1,
+    bubbles: true,
+    cancelable: true,
+  });
+  target.dispatchEvent(event);
+}
+
+function getSyntheticLink(target: Element, open: (link: HTMLAnchorElement) => void): void {
+  if (target instanceof HTMLAnchorElement) {
+    open(target);
+    return;
+  }
+
+  const href = target.getAttribute('data-href');
+  if (!href) {
+    return;
+  }
+
+  const link = document.createElement('a');
+  link.href = href;
+
+  const targetValue = target.getAttribute('data-target');
+  if (targetValue) link.target = targetValue;
+
+  const rel = target.getAttribute('data-rel');
+  if (rel) link.rel = rel;
+
+  const download = target.getAttribute('data-download');
+  if (download) link.download = download;
+
+  const ping = target.getAttribute('data-ping');
+  if (ping) link.ping = ping;
+
+  const referrerPolicy = target.getAttribute('data-referrer-policy');
+  if (referrerPolicy) {
+    link.referrerPolicy = referrerPolicy;
+  }
+
+  target.appendChild(link);
+  open(link);
+  target.removeChild(link);
+}
+
+function openSyntheticLink(target: Element, modifiers: RouterClickModifiers): void {
+  getSyntheticLink(target, (link) => openLink(link, modifiers));
+}
+
+export function useLinkProps(props?: LinkDOMProps): LinkDOMProps {
+  const router = useRouter();
+  const href = props?.href ?? '';
+  return {
+    href: props?.href ? router.useHref(href) : undefined,
+    target: props?.target,
+    rel: props?.rel,
+    download: props?.download,
+    ping: props?.ping,
+    referrerPolicy: props?.referrerPolicy,
+  };
+}
+
+export function handleLinkClick(
+  event: MouseEvent,
+  router: RouterContextValue,
+  href: string | undefined,
+  routerOptions?: RouterOptions
+): void {
+  if (
+    !router.isNative &&
+    event.currentTarget instanceof HTMLAnchorElement &&
+    event.currentTarget.href &&
+    !event.defaultPrevented &&
+    href &&
+    shouldClientNavigate(event.currentTarget, event)
+  ) {
+    event.preventDefault();
+    router.open(event.currentTarget, event, href, routerOptions);
+  }
+}
+
+// ============================================
+// COMPONENT
+// ============================================
+
+/**
+ * A RouterProvider accepts a `navigate` function from a client-side router,
+ * and provides it to all nested solidaria links to enable client-side navigation.
+ *
+ * @example
+ * ```tsx
+ * import { useNavigate } from '@solidjs/router';
+ *
+ * function App() {
+ *   const navigate = useNavigate();
+ *   return (
+ *     <RouterProvider navigate={navigate}>
+ *       <Link href="/about">About</Link>
+ *     </RouterProvider>
+ *   );
+ * }
+ * ```
+ */
+export function RouterProvider(props: RouterProviderProps): JSX.Element {
+  const ctx: RouterContextValue = {
+    isNative: false,
+    navigate: props.navigate,
+    open: (target, modifiers, href, routerOptions) => {
+      getSyntheticLink(target, (link) => {
+        if (shouldClientNavigate(link, modifiers)) {
+          props.navigate(href, routerOptions);
+        } else {
+          openLink(link, modifiers);
+        }
+      });
+    },
+    useHref: props.useHref ?? ((href: string) => href),
+  };
+
+  return (
+    <RouterContext.Provider value={ctx}>
+      {props.children}
+    </RouterContext.Provider>
+  );
+}
+
+/**
+ * Returns the current router context value.
+ */
+export function useRouter(): RouterContextValue {
+  return useContext(RouterContext);
+}