@proyecto-viviana/solidaria-components 0.5.1 → 0.7.0-rc.1

package/src/RangeCalendar.tsx

@@ -1,30 +1,37 @@
+/*
+ * 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";
+import type { DateDuration } from "@internationalized/date";
 import {
   createRangeCalendarState,
   type RangeCalendarState,
@@ -35,6 +42,7 @@ import {
   endOfMonth,
   isSameMonth,
 } from "@proyecto-viviana/solid-stately";
+import { calendarHeadingTitle, type CalendarHeadingFormatOptions } from "./calendarHeadingTitle";
 import {
   type RenderChildren,
   type ClassNameOrFunction,
@@ -42,9 +50,11 @@ import {
   type SlotProps,
   useRenderProps,
   dataAttr,
-  useIsHydrated,
+  coerceDomRecord,
 } from "./utils";
+import { TextContext } from "./Text";
 import { VisuallyHidden } from "./VisuallyHidden";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
 
@@ -118,6 +128,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. */
@@ -126,6 +138,8 @@ export interface RangeCalendarCellRenderProps {
   isInvalid: boolean;
   /** Whether the cell is outside the visible month. */
   isOutsideMonth: boolean;
+  /** Whether the cell is outside the visible range. */
+  isOutsideVisibleRange: boolean;
   /** Whether the cell represents today. */
   isToday: boolean;
   /** Whether the cell is pressed. */
@@ -203,25 +217,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 +260,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 +281,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())}
@@ -297,22 +299,32 @@ function RangeCalendarWithState<T extends DateValue = CalendarDate>(
           <VisuallyHidden>
             <h2>{String(calendarAria.calendarProps["aria-label"] ?? "")}</h2>
           </VisuallyHidden>
-          {props.children}
+          <TextContext
+            value={{
+              slots: {
+                get errorMessage() {
+                  return calendarAria.errorMessageProps;
+                },
+              },
+            }}
+          >
+            {props.children}
+          </TextContext>
           {/* 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>
   );
 }
 
@@ -344,14 +356,20 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
       "selectionAlignment",
       "isDateDisabled",
       "validationState",
+      "isInvalid",
       "allowsNonContiguousRanges",
       "firstDayOfWeek",
     ],
   );
 
   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 +388,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())}
@@ -385,22 +406,32 @@ function RangeCalendarInner<T extends DateValue = CalendarDate>(
           <VisuallyHidden>
             <h2>{String(calendarAria.calendarProps["aria-label"] ?? "")}</h2>
           </VisuallyHidden>
-          {props.children}
+          <TextContext
+            value={{
+              slots: {
+                get errorMessage() {
+                  return calendarAria.errorMessageProps;
+                },
+              },
+            }}
+          >
+            {props.children}
+          </TextContext>
           {/* 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>
   );
 }
 
@@ -409,6 +440,10 @@ export interface RangeCalendarHeadingProps extends SlotProps {
   class?: string;
   /** The inline style for the element. */
   style?: JSX.CSSProperties;
+  /** Duration added to the start of the visible range. */
+  offset?: DateDuration;
+  /** Overrides the default long month and numeric year. */
+  format?: CalendarHeadingFormatOptions;
 }
 
 /**
@@ -416,6 +451,15 @@ export interface RangeCalendarHeadingProps extends SlotProps {
  */
 export function RangeCalendarHeading(props: RangeCalendarHeadingProps): JSX.Element {
   const state = useRangeCalendarContext();
+  const headingTitle = createMemo(() =>
+    calendarHeadingTitle(
+      state.visibleRange().start,
+      props.offset,
+      props.format,
+      state.locale(),
+      state.timeZone,
+    ),
+  );
 
   return (
     <h2
@@ -423,7 +467,7 @@ export function RangeCalendarHeading(props: RangeCalendarHeadingProps): JSX.Elem
       style={props.style}
       aria-live="polite"
     >
-      {state.title()}
+      {headingTitle()}
     </h2>
   );
 }
@@ -449,18 +493,21 @@ export function RangeCalendarButton(props: RangeCalendarButtonProps): JSX.Elemen
   const calendarAria = createRangeCalendar({}, state);
 
   const buttonProps = createMemo(() => {
-    if (props.slot === "previous") {
-      return calendarAria.prevButtonProps;
-    }
-    return calendarAria.nextButtonProps;
+    const source =
+      props.slot === "previous" ? calendarAria.prevButtonProps : calendarAria.nextButtonProps;
+    const { onFocusChange, ...domProps } = source;
+    return {
+      domProps,
+      onFocusChange: onFocusChange as ((focused: boolean) => void) | undefined,
+    };
   });
   const isDisabled = createMemo(
-    () => props.isDisabled || Boolean(buttonProps().disabled) || state.isDisabled(),
+    () => props.isDisabled || Boolean(buttonProps().domProps.disabled) || state.isDisabled(),
   );
 
   return (
     <button
-      {...buttonProps()}
+      {...buttonProps().domProps}
       class={props.class ?? "solidaria-RangeCalendarButton"}
       style={props.style}
       disabled={isDisabled()}
@@ -469,6 +516,8 @@ export function RangeCalendarButton(props: RangeCalendarButtonProps): JSX.Elemen
       // when disabled — so the prev/next buttons appear in the roving tab order
       // exactly as the S2 oracle does.
       tabindex={isDisabled() ? undefined : 0}
+      onFocus={() => buttonProps().onFocusChange?.(true)}
+      onBlur={() => buttonProps().onFocusChange?.(false)}
     >
       {props.children}
     </button>
@@ -524,14 +573,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 +596,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 +610,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,10 +660,12 @@ 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,
     isOutsideMonth: cellAria.isOutsideMonth,
+    isOutsideVisibleRange: cellAria.isOutsideVisibleRange,
     isToday: cellAria.isToday,
     isPressed: cellAria.isPressed,
     isHovered: isHovered(),
@@ -645,30 +696,32 @@ export function RangeCalendarCell(props: RangeCalendarCellProps): JSX.Element {
     renderValues,
   );
 
-  // Determine children content - avoid Show for SSR hydration compatibility
-  const getChildren = () => {
-    if (typeof props.children === "function") {
-      return renderProps.renderChildren();
-    }
-    return cellAria.formattedDate;
-  };
+  // 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 = () => renderProps.renderChildrenStable() ?? 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)}
         data-outside-month={dataAttr(cellAria.isOutsideMonth)}
+        data-outside-visible-range={dataAttr(cellAria.isOutsideVisibleRange)}
         data-today={dataAttr(cellAria.isToday)}
         data-pressed={dataAttr(cellAria.isPressed)}
         data-hovered={dataAttr(isHovered())}