@proyecto-viviana/solidaria-components 0.5.0 → 0.7.0-rc.0

package/src/RangeCalendar.tsx

@@ -1,27 +1,33 @@
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria-components/src/Calendar.tsx
+
 /**
  * RangeCalendar component for solidaria-components
  *
  * Pre-wired headless range calendar component that combines aria hooks.
- * Port of react-aria-components/src/RangeCalendar.tsx
+ * Solid adaptation of the pinned RangeCalendar implementation.
  */
 
-import {
-  type JSX,
-  type Accessor,
-  createContext,
-  createMemo,
-  createSignal,
-  splitProps,
-  useContext,
-  For,
-  Index,
-  Show,
-} from "solid-js";
+import { createContext, createMemo, createSignal, useContext, For, Show } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   createRangeCalendar,
   createCalendarGrid,
   createRangeCalendarCell,
   createHover,
+  mergeProps,
   type AriaRangeCalendarProps,
   type AriaCalendarGridProps,
 } from "@proyecto-viviana/solidaria";
@@ -42,9 +48,10 @@ import {
   type SlotProps,
   useRenderProps,
   dataAttr,
-  useIsHydrated,
+  coerceDomRecord,
 } from "./utils";
 import { VisuallyHidden } from "./VisuallyHidden";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
 
@@ -118,6 +125,8 @@ export interface RangeCalendarCellRenderProps {
   isSelectionEnd: boolean;
   /** Whether the cell is focused. */
   isFocused: boolean;
+  /** Whether the cell should display a keyboard focus ring. */
+  isFocusVisible: boolean;
   /** Whether the cell is disabled. */
   isDisabled: boolean;
   /** Whether the cell is unavailable. */
@@ -203,25 +212,9 @@ export function RangeCalendar<T extends DateValue = CalendarDate>(
   // instance than the one this grid renders. Mirrors the single `Calendar`.
   const inheritedState = useContext(RangeCalendarContext);
 
-  // Use hydration-safe pattern for client-only rendering
-  const isHydrated = useIsHydrated();
-
   return (
-    <Show
-      when={isHydrated()}
-      fallback={
-        <div
-          class="solidaria-RangeCalendar solidaria-RangeCalendar--placeholder"
-          aria-hidden="true"
-        />
-      }
-    >
-      <Show when={inheritedState} fallback={<RangeCalendarInner {...props} />}>
-        <RangeCalendarWithState
-          state={inheritedState as RangeCalendarState<DateValue>}
-          {...props}
-        />
-      </Show>
+    <Show when={inheritedState} fallback={<RangeCalendarInner {...props} />}>
+      <RangeCalendarWithState state={inheritedState as RangeCalendarState<DateValue>} {...props} />
     </Show>
   );
 }
@@ -262,8 +255,9 @@ function RangeCalendarWithState<T extends DateValue = CalendarDate>(
   );
 
   const state = () => props.state;
+  const [calendarEl, setCalendarEl] = createSignal<HTMLDivElement | null>(null);
 
-  const calendarAria = createRangeCalendar(rest, state());
+  const calendarAria = createRangeCalendar(rest, state(), calendarEl);
 
   const renderValues = createMemo<RangeCalendarRenderProps>(() => ({
     isDisabled: state().isDisabled(),
@@ -282,11 +276,14 @@ function RangeCalendarWithState<T extends DateValue = CalendarDate>(
   );
 
   return (
-    <RangeCalendarStateContext.Provider value={state()}>
-      <RangeCalendarContext.Provider value={state()}>
+    <RangeCalendarStateContext value={state()}>
+      <RangeCalendarContext value={state()}>
         <div
           {...calendarAria.calendarProps}
-          ref={(el) => assignRef(local.ref, el)}
+          ref={(el) => {
+            setCalendarEl(el ?? null);
+            assignRef(local.ref, el);
+          }}
           class={renderProps.class()}
           style={renderProps.style()}
           data-disabled={dataAttr(state().isDisabled())}
@@ -300,19 +297,19 @@ function RangeCalendarWithState<T extends DateValue = CalendarDate>(
           {props.children}
           {/* For touch screen readers, a visually hidden next button after the
            * month grid so it's easy to navigate after reaching the end without
-           * going all the way back to the start. Mirrors react-aria-components
+           * going all the way back to the start. Matches the upstream component
            * Calendar (and the headless Calendar). */}
           <VisuallyHidden>
             <button
               aria-label={String(calendarAria.nextButtonProps["aria-label"] ?? "")}
               disabled={Boolean(calendarAria.nextButtonProps.disabled)}
               onClick={() => state().focusNextPage()}
-              tabIndex={-1}
+              tabindex={-1}
             />
           </VisuallyHidden>
         </div>
-      </RangeCalendarContext.Provider>
-    </RangeCalendarStateContext.Provider>
+      </RangeCalendarContext>
+    </RangeCalendarStateContext>
   );
 }
 
@@ -350,8 +347,13 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
   );
 
   const state = createRangeCalendarState(stateProps);
+  const [calendarEl, setCalendarEl] = createSignal<HTMLDivElement | null>(null);
 
-  const calendarAria = createRangeCalendar(rest, state as unknown as RangeCalendarState<DateValue>);
+  const calendarAria = createRangeCalendar(
+    rest,
+    state as unknown as RangeCalendarState<DateValue>,
+    calendarEl,
+  );
 
   const renderValues = createMemo<RangeCalendarRenderProps>(() => ({
     isDisabled: state.isDisabled(),
@@ -370,11 +372,14 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
   );
 
   return (
-    <RangeCalendarStateContext.Provider value={state as unknown as RangeCalendarState<DateValue>}>
-      <RangeCalendarContext.Provider value={state as unknown as RangeCalendarState<DateValue>}>
+    <RangeCalendarStateContext value={state as unknown as RangeCalendarState<DateValue>}>
+      <RangeCalendarContext value={state as unknown as RangeCalendarState<DateValue>}>
         <div
           {...calendarAria.calendarProps}
-          ref={(el) => assignRef(local.ref, el)}
+          ref={(el) => {
+            setCalendarEl(el ?? null);
+            assignRef(local.ref, el);
+          }}
           class={renderProps.class()}
           style={renderProps.style()}
           data-disabled={dataAttr(state.isDisabled())}
@@ -388,19 +393,19 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
           {props.children}
           {/* For touch screen readers, a visually hidden next button after the
            * month grid so it's easy to navigate after reaching the end without
-           * going all the way back to the start. Mirrors react-aria-components
+           * going all the way back to the start. Matches the upstream component
            * Calendar (and the headless Calendar). */}
           <VisuallyHidden>
             <button
               aria-label={String(calendarAria.nextButtonProps["aria-label"] ?? "")}
               disabled={Boolean(calendarAria.nextButtonProps.disabled)}
               onClick={() => state.focusNextPage()}
-              tabIndex={-1}
+              tabindex={-1}
             />
           </VisuallyHidden>
         </div>
-      </RangeCalendarContext.Provider>
-    </RangeCalendarStateContext.Provider>
+      </RangeCalendarContext>
+    </RangeCalendarStateContext>
   );
 }
 
@@ -524,14 +529,14 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
   });
 
   return (
-    <RangeCalendarGridMonthContext.Provider value={startDate}>
+    <RangeCalendarGridMonthContext value={startDate}>
       <table
         ref={setGridRef}
-        {...gridAria.gridProps}
+        {...coerceDomRecord(gridAria.gridProps as Record<string, unknown>)}
         class={renderProps.class()}
         style={renderProps.style()}
       >
-        <thead {...gridAria.headerProps}>
+        <thead {...coerceDomRecord(gridAria.headerProps as Record<string, unknown>)}>
           <tr>
             <For each={gridAria.weekDays}>
               {(day) => (
@@ -547,13 +552,13 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
           </tr>
         </thead>
         <tbody>
-          <Index each={allDates()}>
+          <For each={allDates()} keyed={false}>
             {(weekDates, weekIndex) => (
               <tr>
-                <Index each={weekDates()}>
+                <For each={weekDates()} keyed={false}>
                   {(date, dayIndex) => (
                     <Show when={date()} fallback={<td />}>
-                      <RangeCalendarGridCellPositionContext.Provider
+                      <RangeCalendarGridCellPositionContext
                         value={() => ({
                           weekIndex,
                           dayIndex,
@@ -561,16 +566,16 @@ export function RangeCalendarGrid(props: RangeCalendarGridProps): JSX.Element {
                         })}
                       >
                         {props.children?.(date()!)}
-                      </RangeCalendarGridCellPositionContext.Provider>
+                      </RangeCalendarGridCellPositionContext>
                     </Show>
                   )}
-                </Index>
+                </For>
               </tr>
             )}
-          </Index>
+          </For>
         </tbody>
       </table>
-    </RangeCalendarGridMonthContext.Provider>
+    </RangeCalendarGridMonthContext>
   );
 }
 
@@ -611,6 +616,7 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
     isSelectionStart: cellAria.isSelectionStart,
     isSelectionEnd: cellAria.isSelectionEnd,
     isFocused: cellAria.isFocused,
+    isFocusVisible: cellAria.isFocusVisible,
     isDisabled: cellAria.isDisabled,
     isUnavailable: cellAria.isUnavailable,
     isInvalid: cellAria.isInvalid,
@@ -645,26 +651,32 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
     renderValues,
   );
 
-  // Determine children content - avoid Show for SSR hydration compatibility
+  // Determine children content - avoid Show for SSR hydration compatibility.
+  // `renderChildrenStable` keeps the inner fill node across isFocusVisible flips
+  // so Chromium interpolates selected-default → isFocusVisible (D2 open-enter).
   const getChildren = () => {
     if (typeof props.children === "function") {
-      return renderProps.renderChildren();
+      return renderProps.renderChildrenStable();
     }
     return cellAria.formattedDate;
   };
 
   return (
-    <td {...cellAria.cellProps} class={cellRenderProps.class()} style={cellRenderProps.style()}>
+    <td
+      {...coerceDomRecord(cellAria.cellProps as Record<string, unknown>)}
+      class={cellRenderProps.class()}
+      style={cellRenderProps.style()}
+    >
       <div
         ref={setCellRef}
-        {...cellAria.buttonProps}
-        {...hoverProps}
+        {...mergeProps(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-focus-visible={dataAttr(cellAria.isFocusVisible)}
         data-disabled={dataAttr(cellAria.isDisabled)}
         data-unavailable={dataAttr(cellAria.isUnavailable)}
         data-invalid={dataAttr(cellAria.isInvalid)}

package/src/RouterProvider.tsx

@@ -1,12 +1,29 @@
+/*
+ * Copyright 2023 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/utils/openLink.tsx
+
 /**
  * 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.
+ * Based on packages/react-aria/src/utils/openLink.tsx.
  */
 
-import { type JSX, createContext, useContext } from "solid-js";
+import { createContext, useContext } from "solid-js";
+import { openLink } from "@proyecto-viviana/solidaria/utils";
+import type { JSX } from "@solidjs/web";
 
 export interface RouterClickModifiers {
   metaKey?: boolean;
@@ -93,18 +110,11 @@ export function shouldClientNavigate(
   );
 }
 
-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);
-}
+// One implementation only: `openLink` lives in `@proyecto-viviana/solidaria`,
+// where the press and selection hooks already call it and where its `isOpening`
+// latch is read. This module re-exports it because it is part of this package's
+// public surface, as upstream keeps both in `openLink.tsx`.
+export { openLink };
 
 function getSyntheticLink(target: Element, open: (link: HTMLAnchorElement) => void): void {
   if (target instanceof HTMLAnchorElement) {
@@ -212,7 +222,7 @@ export function RouterProvider(props: RouterProviderProps): JSX.Element {
     useHref: props.useHref ?? ((href: string) => href),
   };
 
-  return <RouterContext.Provider value={ctx}>{props.children}</RouterContext.Provider>;
+  return <RouterContext value={ctx}>{props.children}</RouterContext>;
 }
 
 /**