@proyecto-viviana/solidaria-components 0.3.2 → 0.4.1

package/src/Breadcrumbs.tsx

@@ -196,7 +196,20 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
         setStaticItemCount,
       }}
     >
-      <nav
+      {/*
+        Faithful to react-aria-components Breadcrumbs: the accessible name (navProps'
+        aria-label) sits directly on the <ol> (role="list"), with NO wrapping <nav>
+        landmark (react-spectrum/packages/react-aria-components/src/Breadcrumbs.tsx
+        renders `<dom.ol {...mergeProps(DOMProps, navProps)} style={props.style}>`).
+        The <ol> carries ONLY the consumer's class/style — no hard-coded inline
+        layout reset. An inline reset would beat the styled layer's class (inline
+        wins over class), which is exactly what broke S2 parity: the solid-spectrum
+        `wrapperStyles` class supplies display:flex / list-style:none / padding:0 /
+        marginStart and deliberately leaves align-items at its `normal` default, so
+        a hard-coded inline `align-items:center` + `margin:0` clobbered the
+        wrapper's margin and diverged from S2 (whose <ol> has neither).
+      */}
+      <ol
         {...navProps}
         {...domProps()}
         ref={(element) => assignRef(local.ref, element)}
@@ -204,39 +217,29 @@ export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
         style={renderProps.style()}
         data-disabled={isDisabled() || undefined}
       >
-        <ol
-          style={{
-            display: "flex",
-            "align-items": "center",
-            "list-style": "none",
-            margin: 0,
-            padding: 0,
-          }}
+        <Show
+          when={hasCollectionItems()}
+          fallback={
+            <StaticBreadcrumbItems>{local.children as JSX.Element}</StaticBreadcrumbItems>
+          }
         >
-          <Show
-            when={hasCollectionItems()}
-            fallback={
-              <StaticBreadcrumbItems>{local.children as JSX.Element}</StaticBreadcrumbItems>
-            }
-          >
-            <For each={items()}>
-              {(item, index) => {
-                const itemKey = getItemKey(item, index());
-                const isLast = () => index() === items().length - 1;
-                const renderItem = local.children as ((item: T) => JSX.Element) | undefined;
-
-                return (
-                  <li style={{ display: "flex", "align-items": "center" }}>
-                    <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>
-                      {renderItem?.(item)}
-                    </BreadcrumbItemContext.Provider>
-                  </li>
-                );
-              }}
-            </For>
-          </Show>
-        </ol>
-      </nav>
+          <For each={items()}>
+            {(item, index) => {
+              const itemKey = getItemKey(item, index());
+              const isLast = () => index() === items().length - 1;
+              const renderItem = local.children as ((item: T) => JSX.Element) | undefined;
+
+              return (
+                <li style={{ display: "flex", "align-items": "center" }}>
+                  <BreadcrumbItemContext.Provider value={{ itemKey, isLast }}>
+                    {renderItem?.(item)}
+                  </BreadcrumbItemContext.Provider>
+                </li>
+              );
+            }}
+          </For>
+        </Show>
+      </ol>
     </BreadcrumbsContext.Provider>
   );
 }
@@ -277,6 +280,18 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       staticIndex === context.staticItemCount() - 1);
   const itemKey = () => itemContext?.itemKey ?? ariaProps.id ?? null;
 
+  // Mirror react-aria-components' Link: render an <a> only when there is an
+  // href on an enabled, non-current item; otherwise fall back to a <span
+  // role="link"> (via createLink). A styled layer may force the element type
+  // (S2 renders the current item as a plain <div>), which takes precedence.
+  const elementType = () =>
+    ariaProps.elementType ?? (ariaProps.href && !isDisabled() && !isCurrent() ? "a" : "span");
+  // The current breadcrumb is the current page and is non-interactive: S2
+  // renders it as a plain element with no link role. createLink only omits
+  // role="link" for an <a>, so treat the current item as an "a" purely for the
+  // role decision while still rendering the resolved element type above.
+  const linkElementType = () => (isCurrent() ? "a" : elementType());
+
   const handlePress = (e: PressEvent) => {
     ariaProps.onPress?.(e);
     const key = itemKey();
@@ -285,7 +300,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     }
   };
 
-  const { itemProps, isPressed } = createBreadcrumbItem({
+  const itemAria = createBreadcrumbItem({
     get id() {
       return ariaProps.id;
     },
@@ -305,7 +320,7 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       return ariaProps.rel;
     },
     get elementType() {
-      return ariaProps.elementType;
+      return linkElementType();
     },
     get onPress() {
       return handlePress;
@@ -354,20 +369,23 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
     },
   });
 
+  const isPressed = itemAria.isPressed;
   const { isFocused, isFocusVisible, focusProps } = createFocusRing();
   const { isHovered, hoverProps } = createHover({
     get isDisabled() {
       return isDisabled();
     },
   });
+  // Read itemAria.itemProps fresh inside the memo (do NOT destructure it above):
+  // the reactive getter re-runs createBreadcrumbItem → createLink each time this
+  // memo re-evaluates, so role/tabIndex track elementType once isCurrent settles.
   const mergedItemProps = createMemo(() =>
     mergeProps(
-      itemProps as Record<string, unknown>,
+      itemAria.itemProps as Record<string, unknown>,
       focusProps as Record<string, unknown>,
       hoverProps as Record<string, unknown>,
     ),
   );
-  const elementType = () => ariaProps.elementType ?? "a";
 
   const renderValues = createMemo<BreadcrumbItemRenderProps>(() => ({
     isCurrent: isCurrent(),
@@ -380,7 +398,9 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-BreadcrumbItem",
@@ -399,7 +419,6 @@ export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
       component={elementType()}
       {...mergedItemProps()}
       ref={(element: HTMLElement) => assignRef(local.ref, element)}
-      href={isCurrent() ? undefined : (mergedItemProps() as { href?: string }).href}
       aria-current={isCurrent() ? (ariaProps["aria-current"] ?? "page") : undefined}
       aria-disabled={isDisabled() || isCurrent() || undefined}
       class={renderProps.class()}

package/src/Button.tsx

@@ -36,6 +36,12 @@ import {
 import { DialogTriggerContext, PopoverTriggerContext } from "./contexts";
 import { ProgressBarContext } from "./ProgressBar";
 
+// Events preserved when `isPending` is true (for tooltips and other overlays),
+// mirroring RAC Button's `PRESERVED_EVENT_PATTERN`. Every other `on*` handler
+// is stripped so a pending-but-focusable button cannot be activated.
+const pendingPreservedEventPattern =
+  /Focus|Blur|Hover|Pointer(Enter|Leave|Over|Out)|Mouse(Enter|Leave|Over|Out)/;
+
 type RefLike<T> = ((el: T) => void) | { current?: T | null } | undefined;
 
 function assignRef<T>(ref: RefLike<T>, el: T): void {
@@ -294,8 +300,17 @@ export function Button(props: ButtonProps): JSX.Element {
       get onClick() {
         return resolvePending() ? undefined : ariaProps.onClick;
       },
+      // Mirror React Aria's RAC `Button`: `useButton` is called with the base
+      // `isDisabled` WITHOUT `isPending`, so a pending-focusable button stays a
+      // non-disabled native `<button>` — keeping `useFocusable`'s always-on
+      // `tabIndex={0}` (the Safari focus workaround) and no native `disabled`
+      // attribute. The pending "disabled" semantics are layered ON TOP:
+      // `aria-disabled="true"` below and `disablePendingInteractions` stripping
+      // the press handlers post-hoc (RAC's `useDisableInteractions`). Folding
+      // `isPending` in here instead would make the focusable hook drop
+      // `tabIndex`, diverging from upstream's pending button (D4).
       get isDisabled() {
-        return resolveDisabled() || resolvePending();
+        return resolveDisabled();
       },
     }),
   );
@@ -447,7 +462,12 @@ export function Button(props: ButtonProps): JSX.Element {
 
     const next = { ...props };
     for (const key of Object.keys(next)) {
-      if (key.startsWith("on") && !key.includes("Focus") && !key.includes("Blur")) {
+      // Mirror RAC's `useDisableInteractions`: when pending, strip every event
+      // handler except the ones overlays/tooltips still need — focus/blur,
+      // hover, and pointer/mouse enter-leave-over-out. Press handlers
+      // (click/pointerdown/keydown/…) are removed so the focusable button
+      // cannot be activated while pending.
+      if (key.startsWith("on") && !pendingPreservedEventPattern.test(key)) {
         next[key] = undefined;
       }
     }

package/src/Calendar.tsx

@@ -30,6 +30,7 @@ import {
   createCalendarState,
   type CalendarState,
   type CalendarStateProps,
+  type CalendarSelectionMode,
   type CalendarDate,
   type DateValue,
   endOfMonth,
@@ -69,10 +70,13 @@ export interface CalendarRenderProps {
   isInvalid: boolean;
 }
 
-export interface CalendarProps<T extends DateValue = DateValue>
+export interface CalendarProps<
+  T extends DateValue = DateValue,
+  M extends CalendarSelectionMode = "single",
+>
   extends
     Omit<AriaCalendarProps, "id" | "isDisabled" | "isReadOnly">,
-    Omit<CalendarStateProps<T>, "locale">,
+    Omit<CalendarStateProps<T, M>, "locale">,
     SlotProps {
   /** The children of the component. */
   children?: JSX.Element;
@@ -207,7 +211,10 @@ export function useCalendarContext(): CalendarState<DateValue> {
  * </Calendar>
  * ```
  */
-export function Calendar<T extends DateValue = CalendarDate>(props: CalendarProps<T>): JSX.Element {
+export function Calendar<
+  T extends DateValue = CalendarDate,
+  M extends CalendarSelectionMode = "single",
+>(props: CalendarProps<T, M>): JSX.Element {
   const inheritedState = useContext(CalendarContext);
 
   // Use hydration-safe pattern for client-only rendering
@@ -227,9 +234,10 @@ export function Calendar<T extends DateValue = CalendarDate>(props: CalendarProp
   );
 }
 
-function CalendarWithState<T extends DateValue = CalendarDate>(
-  props: CalendarProps<T> & { state: CalendarState<DateValue> },
-): JSX.Element {
+function CalendarWithState<
+  T extends DateValue = CalendarDate,
+  M extends CalendarSelectionMode = "single",
+>(props: CalendarProps<T, M> & { state: CalendarState<DateValue> }): JSX.Element {
   const [local, stateProps, rest] = splitProps(
     props,
     ["children", "class", "style", "slot", "state", "ref"],
@@ -237,6 +245,7 @@ function CalendarWithState<T extends DateValue = CalendarDate>(
       "value",
       "defaultValue",
       "onChange",
+      "selectionMode",
       "minValue",
       "maxValue",
       "isDisabled",
@@ -296,6 +305,17 @@ function CalendarWithState<T extends DateValue = CalendarDate>(
         <h2>{String(calendarAria.calendarProps["aria-label"] ?? "")}</h2>
       </VisuallyHidden>
       {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 Calendar. */}
+      <VisuallyHidden>
+        <button
+          aria-label={String(calendarAria.nextButtonProps["aria-label"] ?? "")}
+          disabled={Boolean(calendarAria.nextButtonProps.disabled)}
+          onClick={() => state().focusNextPage()}
+          tabIndex={-1}
+        />
+      </VisuallyHidden>
     </div>
   );
 }
@@ -303,7 +323,10 @@ function CalendarWithState<T extends DateValue = CalendarDate>(
 /**
  * Internal Calendar component that renders after client mount.
  */
-function CalendarInner<T extends DateValue = CalendarDate>(props: CalendarProps<T>): JSX.Element {
+function CalendarInner<
+  T extends DateValue = CalendarDate,
+  M extends CalendarSelectionMode = "single",
+>(props: CalendarProps<T, M>): JSX.Element {
   const [local, stateProps, rest] = splitProps(
     props,
     ["children", "class", "style", "slot", "ref"],
@@ -311,6 +334,7 @@ function CalendarInner<T extends DateValue = CalendarDate>(props: CalendarProps<
       "value",
       "defaultValue",
       "onChange",
+      "selectionMode",
       "minValue",
       "maxValue",
       "isDisabled",
@@ -333,7 +357,7 @@ function CalendarInner<T extends DateValue = CalendarDate>(props: CalendarProps<
   );
 
   // Create calendar state
-  const state = createCalendarState(stateProps);
+  const state = createCalendarState<T, M>(stateProps);
 
   // Create calendar ARIA props
   const calendarAria = createCalendar(
@@ -374,6 +398,18 @@ function CalendarInner<T extends DateValue = CalendarDate>(props: CalendarProps<
           <h2>{String(calendarAria.calendarProps["aria-label"] ?? "")}</h2>
         </VisuallyHidden>
         {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
+         * Calendar. */}
+        <VisuallyHidden>
+          <button
+            aria-label={String(calendarAria.nextButtonProps["aria-label"] ?? "")}
+            disabled={Boolean(calendarAria.nextButtonProps.disabled)}
+            onClick={() => state.focusNextPage()}
+            tabIndex={-1}
+          />
+        </VisuallyHidden>
       </div>
     </CalendarContext.Provider>
   );
@@ -398,7 +434,9 @@ export function CalendarHeading(props: CalendarHeadingProps): JSX.Element {
   }));
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-CalendarHeading",
@@ -440,12 +478,18 @@ export function CalendarButton(props: CalendarButtonProps): JSX.Element {
     return calendarAria.nextButtonProps;
   });
 
+  const isDisabled = () => props.isDisabled || state.isDisabled();
+
   return (
     <button
       {...buttonProps()}
       class={props.class ?? "solidaria-CalendarButton"}
       style={props.style}
-      disabled={props.isDisabled || state.isDisabled()}
+      disabled={isDisabled()}
+      // Mirror useFocusable: always set an explicit tabIndex on an enabled
+      // focusable button (0), and drop it entirely when disabled — so the
+      // nav buttons appear in the roving tab order exactly as upstream does.
+      tabindex={isDisabled() ? undefined : 0}
     >
       {props.children}
     </button>
@@ -625,7 +669,9 @@ export function CalendarCell(props: CalendarCellProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-CalendarCell",

package/src/CalendarPicker.tsx

@@ -0,0 +1,73 @@
+/**
+ * CalendarMonthPicker / CalendarYearPicker components for solidaria-components
+ *
+ * Headless month/year "jump-to" pickers shared by Calendar and RangeCalendar.
+ * Each reads whichever calendar state context is present and renders through a
+ * child function, mirroring the single context-agnostic components upstream.
+ * Port of react-aria-components/src/Calendar.tsx (CalendarMonthPicker /
+ * CalendarYearPicker).
+ */
+
+import { type JSX, useContext } from "solid-js";
+
+import {
+  createCalendarMonthPicker,
+  createCalendarYearPicker,
+  type CalendarMonthPickerProps as AriaCalendarMonthPickerProps,
+  type CalendarMonthPickerAria,
+  type CalendarYearPickerProps as AriaCalendarYearPickerProps,
+  type CalendarYearPickerAria,
+} from "@proyecto-viviana/solidaria";
+
+import { CalendarContext } from "./Calendar";
+import { RangeCalendarContext } from "./RangeCalendar";
+
+export type {
+  CalendarMonthPickerAria,
+  CalendarMonthPickerItem,
+  CalendarYearPickerAria,
+  CalendarYearPickerItem,
+  CalendarYearPickerFormatOptions,
+} from "@proyecto-viviana/solidaria";
+
+export interface CalendarMonthPickerProps extends AriaCalendarMonthPickerProps {
+  /** A function that renders the month picker from its accessible props. */
+  children: (renderProps: CalendarMonthPickerAria) => JSX.Element;
+}
+
+/**
+ * A CalendarMonthPicker renders the list of months in the focused year so the
+ * user can jump the calendar's focus to a different month. It works within both
+ * a Calendar and a RangeCalendar.
+ */
+export function CalendarMonthPicker(props: CalendarMonthPickerProps): JSX.Element {
+  const calendarState = useContext(CalendarContext);
+  const rangeCalendarState = useContext(RangeCalendarContext);
+  const state = calendarState ?? rangeCalendarState;
+  if (!state) {
+    throw new Error("CalendarMonthPicker must be used within a Calendar or RangeCalendar");
+  }
+  const aria = createCalendarMonthPicker(props, state);
+  return props.children(aria);
+}
+
+export interface CalendarYearPickerProps extends AriaCalendarYearPickerProps {
+  /** A function that renders the year picker from its accessible props. */
+  children: (renderProps: CalendarYearPickerAria) => JSX.Element;
+}
+
+/**
+ * A CalendarYearPicker renders a sliding window of years so the user can jump
+ * the calendar's focus to a different year. It works within both a Calendar and
+ * a RangeCalendar.
+ */
+export function CalendarYearPicker(props: CalendarYearPickerProps): JSX.Element {
+  const calendarState = useContext(CalendarContext);
+  const rangeCalendarState = useContext(RangeCalendarContext);
+  const state = calendarState ?? rangeCalendarState;
+  if (!state) {
+    throw new Error("CalendarYearPicker must be used within a Calendar or RangeCalendar");
+  }
+  const aria = createCalendarYearPicker(props, state);
+  return props.children(aria);
+}