@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/src/gridlist/createGridListItem.ts

@@ -3,11 +3,20 @@
  * Based on @react-aria/gridlist/useGridListItem.
  */
 
-import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createMemo, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
-import type { GridState, GridCollection } from "@proyecto-viviana/solid-stately";
+import type {
+  Collection,
+  GridState,
+  GridCollection,
+  Key,
+  Selection,
+} from "@proyecto-viviana/solid-stately";
 import type { AriaGridListItemProps, GridListItemAria } from "./types";
 import { getGridListData } from "./createGridList";
+import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
+import { mergeCollectionRowInteractionProps } from "../selection/createCollectionRowInteraction";
+import { mergeProps } from "../utils/mergeProps";
 
 /**
  * Creates accessibility props for a grid list item.
@@ -18,159 +27,80 @@ export function createGridListItem<
 >(
   props: Accessor<AriaGridListItemProps>,
   state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLElement | null>,
+  ref: Accessor<HTMLElement | null>,
 ): GridListItemAria {
-  const [isPressed, setIsPressed] = createSignal(false);
-  let isPointerPressed = false;
-  let ignoreNextClick = false;
-
   const isSelected = createMemo(() => {
     const s = state();
     const p = props();
     return s.isSelected(p.node.key);
   });
 
-  const isDisabled = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isDisabled(p.node.key);
-  });
-
-  const isFocused = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.focusedKey === p.node.key;
-  });
-
-  const handleActivation = (e: MouseEvent | PointerEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    // Get grid list metadata for actions
-    const gridListData = getGridListData(s);
-    const onAction = gridListData?.actions.onAction;
-
-    // Handle selection
-    if (s.selectionMode !== "none") {
-      if (e.shiftKey && s.selectionMode === "multiple") {
-        s.extendSelection(p.node.key);
-      } else if (p.selectionBehavior === "toggle" || e.ctrlKey || e.metaKey) {
-        s.toggleSelection(p.node.key);
-      } else {
-        // Replace selection or toggle if already selected
-        if (isSelected() && s.selectedKeys !== "all") {
-          const selectedKeys = s.selectedKeys as Set<unknown>;
-          if (selectedKeys.size === 1) {
-            // Single selection, trigger action
-            if (onAction) {
-              onAction(p.node.key);
-            }
-            if (p.onAction) {
-              p.onAction();
-            }
-          } else {
-            s.replaceSelection(p.node.key);
-          }
-        } else {
-          s.replaceSelection(p.node.key);
-        }
-      }
-    } else {
-      // No selection mode, just trigger action
-      if (onAction) {
-        onAction(p.node.key);
-      }
-      if (p.onAction) {
-        p.onAction();
-      }
-    }
-  };
-
-  // Handle click/press for selection and actions.
-  const onClick = (e: MouseEvent) => {
-    if (ignoreNextClick) {
-      ignoreNextClick = false;
-      return;
-    }
-
-    handleActivation(e);
+  const selectableState: SelectableItemState<T> = {
+    collection: () => state().collection as unknown as Collection<T>,
+    isFocused: () => state().isFocused,
+    setFocused: (focused: boolean) => state().setFocused(focused),
+    focusedKey: () => state().focusedKey,
+    childFocusStrategy: () => state().childFocusStrategy,
+    setFocusedKey: (key: Key | null, strategy) => state().setFocusedKey(key, strategy),
+    selectionMode: () => state().selectionMode,
+    selectionBehavior: () => props().selectionBehavior ?? state().selectionBehavior,
+    disallowEmptySelection: () => state().disallowEmptySelection,
+    selectedKeys: () => state().selectedKeys as Selection,
+    disabledKeys: () => state().disabledKeys,
+    disabledBehavior: () => state().disabledBehavior,
+    isEmpty: () => {
+      const keys = state().selectedKeys;
+      return keys !== "all" && keys.size === 0;
+    },
+    isSelectAll: () => state().selectedKeys === "all",
+    isSelected: (key: Key) => state().isSelected(key),
+    isDisabled: (key: Key) => {
+      const s = state();
+      const item = s.collection.getItem(key);
+      return (
+        s.disabledBehavior === "all" &&
+        s.isDisabled(key) &&
+        item?.props?.disabledBehavior !== "selection"
+      );
+    },
+    canSelectItem: (key: Key) => {
+      const s = state();
+      return s.selectionMode !== "none" && !s.isDisabled(key);
+    },
+    setSelectionBehavior: (behavior) => state().setSelectionBehavior(behavior),
+    toggleSelection: (key: Key) => state().toggleSelection(key),
+    replaceSelection: (key: Key) => state().replaceSelection(key),
+    setSelectedKeys: (keys: Iterable<Key>) => state().setSelectedKeys(keys),
+    selectAll: () => state().selectAll(),
+    clearSelection: () => state().clearSelection(),
+    toggleSelectAll: () => state().toggleSelectAll(),
+    extendSelection: (toKey: Key, _collection: Collection<T>) => state().extendSelection(toKey),
   };
 
-  const onKeyDown = (e: KeyboardEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    if (e.key === "Enter") {
-      // Get grid list metadata for actions
+  const selectableItem = createSelectableItem<T>(
+    () => {
+      const s = state();
+      const p = props();
       const gridListData = getGridListData(s);
       const onAction = gridListData?.actions.onAction;
 
-      if (onAction || p.onAction) {
-        e.preventDefault();
-
-        if (onAction) {
-          onAction(p.node.key);
-        }
-
-        if (p.onAction) {
-          p.onAction();
-        }
-      }
-    } else if (e.key === " " || e.key === "Space" || e.key === "Spacebar") {
-      // Space toggles selection
-      if (s.selectionMode !== "none") {
-        e.preventDefault();
-        s.toggleSelection(p.node.key);
-      }
-    }
-  };
-
-  const onFocus = () => {
-    const s = state();
-    const p = props();
-    s.setFocusedKey(p.node.key);
-  };
-
-  const onPointerDown = () => {
-    if (isDisabled()) return;
-    isPointerPressed = true;
-    setIsPressed(true);
-  };
-
-  const onPointerUp = (e: PointerEvent) => {
-    const wasPointerPressed = isPointerPressed;
-    isPointerPressed = false;
-    setIsPressed(false);
-
-    if (!wasPointerPressed || isDisabled()) return;
-
-    const currentTarget = e.currentTarget;
-    const target = e.target;
-    if (
-      currentTarget instanceof HTMLElement &&
-      target instanceof Node &&
-      !currentTarget.contains(target)
-    ) {
-      return;
-    }
-
-    ignoreNextClick = true;
-    handleActivation(e);
-  };
-
-  const onPointerCancel = () => {
-    isPointerPressed = false;
-    setIsPressed(false);
-  };
-
-  const onPointerLeave = () => {
-    isPointerPressed = false;
-    setIsPressed(false);
-  };
+      return {
+        key: p.node.key,
+        id: `${gridListData?.gridListId ?? "gridlist"}-row-${String(p.node.key)}`,
+        isVirtualized: p.isVirtualized,
+        shouldSelectOnPressUp: gridListData?.shouldSelectOnPressUp ?? false,
+        onAction:
+          onAction || p.onAction
+            ? () => {
+                p.onAction?.();
+                onAction?.(p.node.key);
+              }
+            : undefined,
+      };
+    },
+    selectableState,
+    ref,
+  );
 
   const rowProps = createMemo(() => {
     const s = state();
@@ -180,15 +110,7 @@ export function createGridListItem<
     const baseProps: Record<string, unknown> = {
       role: "row",
       "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
-      "aria-disabled": isDisabled() || undefined,
-      tabIndex: isFocused() ? 0 : -1,
-      onClick,
-      onKeyDown,
-      onFocus,
-      onPointerDown,
-      onPointerUp,
-      onPointerCancel,
-      onPointerLeave,
+      "aria-disabled": selectableItem.isDisabled() || undefined,
     };
 
     // Add aria-rowindex for virtualized lists
@@ -196,7 +118,17 @@ export function createGridListItem<
       baseProps["aria-rowindex"] = node.rowIndex + 1; // 1-based
     }
 
-    return baseProps as JSX.HTMLAttributes<HTMLElement>;
+    const gridListData = getGridListData(s);
+    const mergedProps = mergeProps<JSX.HTMLAttributes<HTMLElement>>(
+      selectableItem.itemProps,
+      baseProps,
+    );
+
+    return mergeCollectionRowInteractionProps(mergedProps, {
+      ref,
+      keyboardNavigationBehavior: () => gridListData?.keyboardNavigationBehavior ?? "arrow",
+      direction: () => gridListData?.direction ?? "ltr",
+    });
   });
 
   const gridCellProps = createMemo(() => {
@@ -216,10 +148,10 @@ export function createGridListItem<
       return isSelected();
     },
     get isDisabled() {
-      return isDisabled();
+      return selectableItem.isDisabled();
     },
     get isPressed() {
-      return isPressed();
+      return selectableItem.isPressed();
     },
   };
 }

package/src/gridlist/createGridListSection.ts

@@ -0,0 +1,54 @@
+/**
+ * createGridListSection - Provides accessibility for a grid list section.
+ * Based on @react-aria/gridlist/useGridListSection.
+ */
+
+import { createMemo } from "solid-js";
+import { createId, createSlotId } from "../ssr";
+import { createLabels } from "../label/createLabels";
+import type { AriaGridListSectionProps, GridListSectionAria } from "./types";
+
+/**
+ * Creates accessibility props for a grid list section.
+ *
+ * Mirrors upstream `useGridListSection`: a section is a `role="rowgroup"`
+ * wrapper whose optional header renders as `role="row"` › `role="rowheader"`.
+ * The `aria-labelledby` of the wrapper points at the header's id via a slot id
+ * that resolves to `undefined` when no header is rendered.
+ */
+export function createGridListSection(props: AriaGridListSectionProps): GridListSectionAria {
+  const headingId = createSlotId();
+  // Stable id for the rowgroup so `createLabels` does not regenerate one each
+  // time the slot id resolves (it short-circuits on a provided id).
+  const rowGroupId = createId();
+
+  const labelProps = createMemo(() =>
+    createLabels({
+      id: rowGroupId,
+      "aria-label": props["aria-label"],
+      "aria-labelledby": headingId(),
+    }),
+  );
+
+  return {
+    rowProps: { role: "row" },
+    rowHeaderProps: {
+      get id() {
+        return headingId();
+      },
+      role: "rowheader",
+    },
+    rowGroupProps: {
+      role: "rowgroup",
+      get id() {
+        return labelProps().id;
+      },
+      get "aria-label"() {
+        return labelProps()["aria-label"];
+      },
+      get "aria-labelledby"() {
+        return labelProps()["aria-labelledby"];
+      },
+    },
+  };
+}

package/src/gridlist/index.ts

@@ -5,6 +5,7 @@
 export { createGridList, getGridListData } from "./createGridList";
 export { createGridListItem } from "./createGridListItem";
 export { createGridListSelectionCheckbox } from "./createGridListSelectionCheckbox";
+export { createGridListSection } from "./createGridListSection";
 
 export type {
   AriaGridListProps,
@@ -13,4 +14,6 @@ export type {
   GridListItemAria,
   AriaGridListSelectionCheckboxProps,
   GridListSelectionCheckboxAria,
+  AriaGridListSectionProps,
+  GridListSectionAria,
 } from "./types";

package/src/gridlist/types.ts

@@ -26,8 +26,30 @@ export interface AriaGridListProps {
   shouldSelectOnPressUp?: boolean;
   /** How selection should behave when pressing an item. */
   selectionBehavior?: "replace" | "toggle";
+  /**
+   * How keyboard navigation should behave within rows.
+   *
+   * `"arrow"` treats the collection as a single tab stop and uses arrow keys to
+   * move through row children. `"tab"` lets tabbable row children participate in
+   * normal tab order and stops child key events before collection navigation.
+   *
+   * @default "arrow"
+   */
+  keyboardNavigationBehavior?: "arrow" | "tab";
   /** Whether the grid list is disabled. */
   isDisabled?: boolean;
+  /**
+   * The primary orientation of the items. In a horizontal stack the inline
+   * (left/right) axis becomes the primary keyboard-navigation axis.
+   * @default "vertical"
+   */
+  orientation?: "horizontal" | "vertical";
+  /**
+   * The text direction, used to flip the inline navigation axis in a horizontal
+   * orientation.
+   * @default "ltr"
+   */
+  direction?: "ltr" | "rtl";
 }
 
 /**
@@ -83,3 +105,28 @@ export interface GridListSelectionCheckboxAria {
   /** Props to spread on the checkbox input element. */
   checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
 }
+
+/**
+ * Props for the createGridListSection hook.
+ */
+export interface AriaGridListSectionProps {
+  /** ARIA label for the section, when it has no visible header. */
+  "aria-label"?: string;
+}
+
+/**
+ * Return value from createGridListSection.
+ */
+export interface GridListSectionAria {
+  /** Props to spread on the section header's outer (row) element. */
+  rowProps: { role: "row" };
+  /** Props to spread on the section header's inner (rowheader) element. */
+  rowHeaderProps: { id: string | undefined; role: "rowheader" };
+  /** Props to spread on the section's wrapper (rowgroup) element. */
+  rowGroupProps: {
+    role: "rowgroup";
+    id?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+  };
+}

package/src/index.ts

@@ -124,6 +124,7 @@ export {
   // Basic utilities
   createIsSSR,
   createId,
+  createSlotId,
   canUseDOM,
   // SSR Provider
   SSRProvider,
@@ -371,6 +372,15 @@ export {
   createCalendar,
   type AriaCalendarProps,
   type CalendarAria,
+  createCalendarMonthPicker,
+  type CalendarMonthPickerProps,
+  type CalendarMonthPickerItem,
+  type CalendarMonthPickerAria,
+  createCalendarYearPicker,
+  type CalendarYearPickerProps,
+  type CalendarYearPickerFormatOptions,
+  type CalendarYearPickerItem,
+  type CalendarYearPickerAria,
   createCalendarGrid,
   type AriaCalendarGridProps,
   type CalendarGridAria,
@@ -456,6 +466,7 @@ export {
   createGridList,
   createGridListItem,
   createGridListSelectionCheckbox,
+  createGridListSection,
   getGridListData,
   type AriaGridListProps,
   type GridListAria,
@@ -463,6 +474,8 @@ export {
   type GridListItemAria,
   type AriaGridListSelectionCheckboxProps,
   type GridListSelectionCheckboxAria,
+  type AriaGridListSectionProps,
+  type GridListSectionAria,
 } from "./gridlist";
 
 export {
@@ -614,7 +627,34 @@ export {
 } from "./steplist";
 
 export { createTypeSelect, type TypeSelectOptions, type TypeSelectAria } from "./selection";
+export { createScrollIntoViewOnFocus, type ScrollIntoViewOnFocusOptions } from "./selection";
+export {
+  createSelectableItem,
+  ITEM_ACTION_EVENT,
+  type CreateSelectableItemOptions,
+  type SelectableItemAria,
+  type LinkBehavior,
+} from "./selection";
+export {
+  createSelectableCollection,
+  createSelectableList,
+  ListKeyboardDelegate,
+  DOMLayoutDelegate,
+  getItemElement,
+  isNonContiguousSelectionModifier,
+  FOCUS_EVENT,
+  CLEAR_FOCUS_EVENT,
+  type CreateSelectableCollectionOptions,
+  type SelectableCollectionAria,
+  type CreateSelectableListOptions,
+  type SelectableListAria,
+  type ListKeyboardDelegateOptions,
+  type LayoutDelegate,
+  type Rect,
+  type Size,
+} from "./selection";
 
 export { mergeProps, filterDOMProps, focusSafely, type FilterDOMPropsOptions } from "./utils";
 export { access, isAccessor, type MaybeAccessor, type MaybeAccessorValue } from "./utils";
 export { createDescription, type DescriptionProps } from "./utils";
+export { createEnterAnimation, createExitAnimation, type ElementAccessor } from "./utils";

package/src/interactions/PressEvent.ts

@@ -18,6 +18,11 @@ export interface PressEventSource {
   altKey?: boolean;
   clientX?: number;
   clientY?: number;
+  /**
+   * The key that triggered the event, present on keyboard interactions
+   * (the native `KeyboardEvent` is passed through unchanged).
+   */
+  key?: string;
 }
 
 export interface IPressEvent {
@@ -39,6 +44,11 @@ export interface IPressEvent {
   x: number;
   /** Y position of the press relative to the target element. */
   y: number;
+  /**
+   * The key that triggered the press event, if it was triggered by a keyboard
+   * interaction. Useful for differentiating between Space and Enter key presses.
+   */
+  key?: string;
   /**
    * By default, press events stop propagation to parent elements.
    * Call continuePropagation() to allow the event to bubble up.
@@ -60,6 +70,7 @@ export class PressEvent implements IPressEvent {
   altKey: boolean;
   x: number;
   y: number;
+  key?: string;
 
   #shouldStopPropagation = true;
 
@@ -79,6 +90,9 @@ export class PressEvent implements IPressEvent {
     this.ctrlKey = originalEvent?.ctrlKey ?? false;
     this.metaKey = originalEvent?.metaKey ?? false;
     this.altKey = originalEvent?.altKey ?? false;
+    // Present only for keyboard interactions (the native KeyboardEvent carries
+    // `key`); pointer events leave this undefined, matching upstream.
+    this.key = originalEvent?.key;
 
     // Calculate position relative to target
     this.x = 0;

package/src/interactions/createInteractionModality.ts

@@ -40,7 +40,7 @@ const changeHandlers = new Set<Handler>();
 
 export let hasSetupGlobalListeners: Map<
   Window,
-  { focus: typeof window.HTMLElement.prototype.focus; canOverride: boolean }
+  { focus: typeof window.HTMLElement.prototype.focus }
 > = new Map();
 let hasEventBeforeFocus = false;
 let hasBlurredWindowRecently = false;
@@ -145,16 +145,21 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
 
   const documentObject = getOwnerDocument(element);
 
+  // Programmatic focus() calls shouldn't affect the current input modality, so we
+  // patch HTMLElement.prototype.focus to record that an event preceded the focus.
+  // Use Reflect.defineProperty (not assignment) so this works even when `focus` is
+  // currently a getter-only accessor — e.g. when a test library's setup() has
+  // instrumented it. Plain assignment throws in that case; Reflect.defineProperty
+  // returns false rather than throwing (and succeeds on the configurable prototype).
   const originalFocus = windowObject.HTMLElement.prototype.focus;
-  let canOverride = true;
-  try {
-    windowObject.HTMLElement.prototype.focus = function () {
+  Reflect.defineProperty(windowObject.HTMLElement.prototype, "focus", {
+    configurable: true,
+    writable: true,
+    value: function () {
       hasEventBeforeFocus = true;
       originalFocus.apply(this, arguments as unknown as [options?: FocusOptions | undefined]);
-    };
-  } catch {
-    canOverride = false;
-  }
+    },
+  });
 
   documentObject.addEventListener("keydown", handleKeyboardEvent, true);
   documentObject.addEventListener("keyup", handleKeyboardEvent, true);
@@ -181,7 +186,7 @@ function setupGlobalFocusEvents(element?: HTMLElement | null) {
     { once: true },
   );
 
-  hasSetupGlobalListeners.set(windowObject, { focus: originalFocus, canOverride });
+  hasSetupGlobalListeners.set(windowObject, { focus: originalFocus });
 }
 
 function tearDownWindowFocusTracking(element?: HTMLElement | null, loadListener?: () => void) {
@@ -201,9 +206,13 @@ function tearDownWindowFocusTracking(element?: HTMLElement | null, loadListener?
   }
 
   const entry = hasSetupGlobalListeners.get(windowObject)!;
-  if (entry.canOverride) {
-    windowObject.HTMLElement.prototype.focus = entry.focus;
-  }
+  // Mirror the setup path: defineProperty (not assignment) restores the original
+  // focus even if it had been replaced with a getter-only accessor.
+  Reflect.defineProperty(windowObject.HTMLElement.prototype, "focus", {
+    configurable: true,
+    writable: true,
+    value: entry.focus,
+  });
 
   documentObject.removeEventListener("keydown", handleKeyboardEvent, true);
   documentObject.removeEventListener("keyup", handleKeyboardEvent, true);

package/src/interactions/createKeyboard.ts

@@ -46,10 +46,20 @@ function createEventHandler<T extends globalThis.KeyboardEvent>(
   return (e: T) => {
     let shouldStopPropagation = true;
 
+    // A nested createEventHandler may already have installed continuePropagation
+    // on this event; capture it so continuing here continues on the wrapper too.
+    const parentContinuePropagation = (e as { continuePropagation?: () => void })
+      .continuePropagation;
+
     // Create a wrapped event with continuePropagation
     const event = Object.assign(e, {
       continuePropagation() {
         shouldStopPropagation = false;
+        // Nested createEventHandler might have set continuePropagation, so we
+        // should continue propagation on the wrappers too.
+        if (typeof parentContinuePropagation === "function") {
+          parentContinuePropagation.call(e);
+        }
       },
     }) as KeyboardEvent;