@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/src/focus/FocusScope.tsx

@@ -15,7 +15,7 @@ import {
   onMount,
 } from "solid-js";
 import { isServer } from "solid-js/web";
-import { getOwnerDocument, isFocusable } from "../utils";
+import { getOwnerDocument, isFocusable, isTabbable } from "../utils";
 import { focusSafely } from "../utils/focus";
 
 export interface FocusScopeProps {
@@ -73,23 +73,6 @@ export function useFocusManager(): FocusManager | undefined {
   return useContext(FocusScopeContext)?.focusManager;
 }
 
-/**
- * Checks if an element is tabbable (focusable via Tab key).
- */
-function isTabbable(element: Element): boolean {
-  if (!isFocusable(element)) {
-    return false;
-  }
-
-  // Check tabIndex
-  const tabIndex = element.getAttribute("tabindex");
-  if (tabIndex != null) {
-    return parseInt(tabIndex, 10) >= 0;
-  }
-
-  return true;
-}
-
 /**
  * Gets all focusable elements within a scope.
  */
@@ -135,6 +118,99 @@ function getActiveElement(doc: Document): Element | null {
   return activeElement;
 }
 
+/**
+ * A scope is identified by its (stable) scope-elements accessor; `null` is the
+ * tree root. Mirrors @react-aria/focus's `ScopeRef`.
+ */
+type ScopeRef = Accessor<Element[]> | null;
+
+interface FocusScopeTreeNode {
+  scopeRef: ScopeRef;
+  parent: FocusScopeTreeNode | null;
+  children: Set<FocusScopeTreeNode>;
+}
+
+/**
+ * A registry of the live FocusScopes and their parent/child relationships,
+ * mirroring @react-aria/focus's `focusScopeTree`. The DOM tree alone can't
+ * express scope nesting because a child scope (e.g. a menu opened from inside a
+ * modal popover) is rendered in a portal, outside its parent scope's subtree.
+ * The tree records that nesting so containment can recognize a portaled
+ * descendant scope as "inside".
+ */
+class FocusScopeTree {
+  root: FocusScopeTreeNode;
+  private fastMap = new Map<ScopeRef, FocusScopeTreeNode>();
+
+  constructor() {
+    this.root = { scopeRef: null, parent: null, children: new Set() };
+    this.fastMap.set(null, this.root);
+  }
+
+  getTreeNode(scopeRef: ScopeRef): FocusScopeTreeNode | undefined {
+    return this.fastMap.get(scopeRef);
+  }
+
+  addTreeNode(scopeRef: ScopeRef, parent: ScopeRef): void {
+    const parentNode = this.fastMap.get(parent) ?? this.root;
+    const node: FocusScopeTreeNode = { scopeRef, parent: parentNode, children: new Set() };
+    parentNode.children.add(node);
+    this.fastMap.set(scopeRef, node);
+  }
+
+  removeTreeNode(scopeRef: ScopeRef): void {
+    // never remove the root
+    if (scopeRef === null) return;
+    const node = this.fastMap.get(scopeRef);
+    if (!node) return;
+    const parentNode = node.parent;
+    if (parentNode) {
+      parentNode.children.delete(node);
+      // Re-parent any children so a mid-tree unmount doesn't orphan descendants.
+      for (const child of node.children) {
+        child.parent = parentNode;
+        parentNode.children.add(child);
+      }
+    }
+    this.fastMap.delete(scopeRef);
+  }
+
+  // Pre-order depth-first; skips the null-scoped root, like upstream.
+  *traverse(node: FocusScopeTreeNode = this.root): Generator<FocusScopeTreeNode> {
+    if (node.scopeRef != null) {
+      yield node;
+    }
+    for (const child of node.children) {
+      yield* this.traverse(child);
+    }
+  }
+}
+
+const focusScopeTree = new FocusScopeTree();
+
+/**
+ * Whether the element is inside `scope` or any of its descendant scopes.
+ *
+ * `isElementInScope`'s `node.contains` already covers descendant scopes that
+ * are DOM children, but not those rendered in a portal. Walking the scope
+ * subtree closes that gap so focus moving into a portaled child scope still
+ * counts as "inside". Mirrors @react-aria/focus's `isElementInChildScope`.
+ */
+function isElementInChildScope(element: Element, scope: ScopeRef = null): boolean {
+  // Always allow focus to move into a top-layer element (e.g. toasts).
+  if (element instanceof Element && element.closest("[data-react-aria-top-layer]")) {
+    return true;
+  }
+
+  for (const node of focusScopeTree.traverse(focusScopeTree.getTreeNode(scope))) {
+    if (node.scopeRef && isElementInScope(element, node.scopeRef())) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
 /**
  * A FocusScope manages focus for its descendants. It supports containing focus inside
  * the scope, restoring focus to the previously focused element on unmount, and auto
@@ -151,6 +227,11 @@ export const FocusScope: ParentComponent<FocusScopeProps> = (props) => {
   let endRef: HTMLSpanElement | undefined;
   const [scopeElements, setScopeElements] = createSignal<Element[]>([]);
 
+  // The nearest enclosing FocusScope (through context, which Solid propagates
+  // across portals) is this scope's parent in the focus-scope tree. Read it
+  // before we shadow the context with our own provider below.
+  const parentScopeRef = useContext(FocusScopeContext)?.scopeRef ?? null;
+
   // Store the element that was focused when the scope mounted
   let nodeToRestore: Element | null = null;
 
@@ -272,6 +353,16 @@ export const FocusScope: ParentComponent<FocusScopeProps> = (props) => {
     setScopeElements(nodes);
   });
 
+  // Register this scope in the focus-scope tree so containment can recognize a
+  // portaled descendant scope as "inside" it. The scope-elements accessor is a
+  // stable identity, so it works as the tree key even before it's populated.
+  onMount(() => {
+    focusScopeTree.addTreeNode(scopeElements, parentScopeRef);
+  });
+  onCleanup(() => {
+    focusScopeTree.removeTreeNode(scopeElements);
+  });
+
   // Save the currently focused element for restoration (must happen before autoFocus/contain effects run).
   onMount(() => {
     if (!props.restoreFocus) return;
@@ -354,6 +445,12 @@ export const FocusScope: ParentComponent<FocusScopeProps> = (props) => {
 
       if (isElementInScope(target, scope)) {
         focusedNode = target;
+      } else if (isElementInChildScope(target, scopeElements)) {
+        // Focus moved into a descendant scope — e.g. a menu opened from inside
+        // this modal popover, rendered in a portal outside this scope's DOM
+        // subtree. Track it but don't pull focus back, which would tear the
+        // nested overlay down.
+        focusedNode = target;
       } else if (focusedNode) {
         // Focus escaped the scope, bring it back
         focusSafely(focusedNode as HTMLElement);
@@ -363,12 +460,49 @@ export const FocusScope: ParentComponent<FocusScopeProps> = (props) => {
       }
     };
 
+    let restoreRaf: number | null = null;
+
+    const onFocusOut = (e: FocusEvent) => {
+      const target = e.target as Element;
+      if (!isElementInScope(target, scopeElements())) return;
+
+      // Focus left an element inside the scope. Wait a frame (like upstream's
+      // onBlur) so a synchronous refocus elsewhere can settle; if focus ended
+      // up outside every scope (e.g. blur() to body), pull it back.
+      const win = doc.defaultView ?? window;
+      if (restoreRaf != null) win.cancelAnimationFrame(restoreRaf);
+      restoreRaf = win.requestAnimationFrame(() => {
+        restoreRaf = null;
+        const scope = scopeElements();
+        const activeElement = getActiveElement(doc);
+        if (
+          activeElement &&
+          (isElementInScope(activeElement, scope) ||
+            isElementInChildScope(activeElement, scopeElements))
+        ) {
+          return;
+        }
+
+        if (doc.body.contains(target)) {
+          focusedNode = target;
+          focusSafely(target as HTMLElement);
+        } else {
+          focusManager.focusFirst();
+        }
+      });
+    };
+
     doc.addEventListener("keydown", onKeyDown, true);
     doc.addEventListener("focusin", onFocusIn, true);
+    doc.addEventListener("focusout", onFocusOut, true);
 
     onCleanup(() => {
       doc.removeEventListener("keydown", onKeyDown, true);
       doc.removeEventListener("focusin", onFocusIn, true);
+      doc.removeEventListener("focusout", onFocusOut, true);
+      if (restoreRaf != null) {
+        (doc.defaultView ?? window).cancelAnimationFrame(restoreRaf);
+      }
     });
   });
 

package/src/form/createFormValidation.ts

@@ -108,7 +108,14 @@ export function createFormValidation(
   // Set custom validity on the native input
   createEffect(() => {
     const input = ref();
-    if (validationBehavior() === "native" && input && !input.disabled) {
+    // `'setCustomValidity' in input` guards refs that aren't true form elements
+    // (e.g. a custom element), matching upstream useFormValidation.
+    if (
+      validationBehavior() === "native" &&
+      input &&
+      "setCustomValidity" in input &&
+      !input.disabled
+    ) {
       const realtimeValidation = state.realtimeValidation();
       const errorMessage = realtimeValidation.isInvalid
         ? realtimeValidation.validationErrors.join(" ") || "Invalid value."

package/src/gridlist/createGridList.ts

@@ -3,11 +3,13 @@
  * Based on @react-aria/gridlist/useGridList.
  */
 
-import { createMemo, type Accessor } from "solid-js";
+import { createMemo, createEffect, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
 import { createId } from "@proyecto-viviana/solid-stately";
 import type { GridState, GridCollection, Key } from "@proyecto-viviana/solid-stately";
 import type { AriaGridListProps, GridListAria } from "./types";
+import { scrollIntoViewport } from "../utils";
+import { getInteractionModality } from "../interactions/createInteractionModality";
 
 /**
  * Metadata stored for a grid list instance.
@@ -17,6 +19,12 @@ interface GridListData {
   gridListId: string;
   /** How selection should behave when pressing an item. */
   selectionBehavior: "replace" | "toggle";
+  /** Whether row selection should occur on press up. */
+  shouldSelectOnPressUp: boolean;
+  /** How keyboard navigation behaves within row children. */
+  keyboardNavigationBehavior: "arrow" | "tab";
+  /** Text direction for row-child arrow navigation. */
+  direction: "ltr" | "rtl";
   /** Actions registered for the grid list. */
   actions: {
     onAction?: (key: Key) => void;
@@ -37,13 +45,45 @@ export function getGridListData<T extends object, C extends GridCollection<T>>(
   return gridListDataMap.get(state);
 }
 
+/**
+ * Whether a key should be skipped during keyboard navigation. Disabled keys only
+ * block navigation under `disabledBehavior: "all"` (the default); under
+ * `"selection"` they remain focusable (selection is still blocked elsewhere).
+ * Mirrors `ListKeyboardDelegate.isDisabled` in React Aria.
+ */
+function isNavigationDisabled<T extends object, C extends GridCollection<T>>(
+  state: GridState<T, C>,
+  key: Key,
+): boolean {
+  return state.isDisabled(key) && state.disabledBehavior === "all";
+}
+
+/**
+ * Walks from `startKey` via `step` until reaching a navigable (not
+ * navigation-disabled) key, mirroring React Aria's
+ * `ListKeyboardDelegate.findNextNonDisabled`. The next/previous lookups and the
+ * `getFirstKey`/`getLastKey` boundaries all funnel through this so arrow keys,
+ * Home and End land on enabled rows only.
+ */
+function findNextNavigableKey<T extends object, C extends GridCollection<T>>(
+  state: GridState<T, C>,
+  startKey: Key | null,
+  step: (key: Key) => Key | null,
+): Key | null {
+  let key = startKey;
+  while (key != null && isNavigationDisabled(state, key)) {
+    key = step(key);
+  }
+  return key;
+}
+
 /**
  * Creates accessibility props for a grid list.
  */
 export function createGridList<T extends object, C extends GridCollection<T> = GridCollection<T>>(
   props: Accessor<AriaGridListProps>,
   state: Accessor<GridState<T, C>>,
-  _ref: Accessor<HTMLElement | null>,
+  ref: Accessor<HTMLElement | null>,
 ): GridListAria {
   // Generate a unique ID for the grid list
   const gridListId = props().id ?? createId();
@@ -54,6 +94,15 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     get selectionBehavior() {
       return props().selectionBehavior ?? "replace";
     },
+    get shouldSelectOnPressUp() {
+      return props().shouldSelectOnPressUp ?? false;
+    },
+    get keyboardNavigationBehavior() {
+      return props().keyboardNavigationBehavior ?? "arrow";
+    },
+    get direction() {
+      return props().direction ?? "ltr";
+    },
     actions: {
       get onAction() {
         return props().onAction;
@@ -76,37 +125,58 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     switch (e.key) {
       case "ArrowDown": {
         e.preventDefault();
-        if (focusedKey != null) {
-          const nextKey = collection.getKeyAfter(focusedKey);
-          if (nextKey != null) {
-            s.setFocusedKey(nextKey);
-          }
-        } else {
-          const firstKey = collection.getFirstKey();
-          if (firstKey != null) {
-            s.setFocusedKey(firstKey);
-          }
+        const nextKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, collection.getKeyAfter(focusedKey), (k) =>
+                collection.getKeyAfter(k),
+              )
+            : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+        if (nextKey != null) {
+          s.setFocusedKey(nextKey);
         }
         break;
       }
       case "ArrowUp": {
         e.preventDefault();
-        if (focusedKey != null) {
-          const prevKey = collection.getKeyBefore(focusedKey);
-          if (prevKey != null) {
-            s.setFocusedKey(prevKey);
-          }
-        } else {
-          const lastKey = collection.getLastKey();
-          if (lastKey != null) {
-            s.setFocusedKey(lastKey);
-          }
+        const prevKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, collection.getKeyBefore(focusedKey), (k) =>
+                collection.getKeyBefore(k),
+              )
+            : findNextNavigableKey(s, collection.getLastKey(), (k) => collection.getKeyBefore(k));
+        if (prevKey != null) {
+          s.setFocusedKey(prevKey);
+        }
+        break;
+      }
+      case "ArrowRight":
+      case "ArrowLeft": {
+        // Horizontal orientation promotes the inline axis to the primary
+        // navigation axis. Upstream's ListKeyboardDelegate strips
+        // getKeyLeftOf/getKeyRightOf for a vertical stack, so Left/Right stay
+        // no-ops there; in a horizontal stack they move prev/next, flipped
+        // under RTL (Right=next, Left=prev in LTR).
+        if (p.orientation !== "horizontal") break;
+        e.preventDefault();
+        const isRtl = p.direction === "rtl";
+        const forward = e.key === "ArrowRight" ? !isRtl : isRtl;
+        const step = forward
+          ? (k: Key) => collection.getKeyAfter(k)
+          : (k: Key) => collection.getKeyBefore(k);
+        const nextKey =
+          focusedKey != null
+            ? findNextNavigableKey(s, step(focusedKey), step)
+            : findNextNavigableKey(s, collection.getFirstKey(), (k) => collection.getKeyAfter(k));
+        if (nextKey != null) {
+          s.setFocusedKey(nextKey);
         }
         break;
       }
       case "Home": {
         e.preventDefault();
-        const firstKey = collection.getFirstKey();
+        const firstKey = findNextNavigableKey(s, collection.getFirstKey(), (k) =>
+          collection.getKeyAfter(k),
+        );
         if (firstKey != null) {
           s.setFocusedKey(firstKey);
         }
@@ -114,7 +184,9 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
       }
       case "End": {
         e.preventDefault();
-        const lastKey = collection.getLastKey();
+        const lastKey = findNextNavigableKey(s, collection.getLastKey(), (k) =>
+          collection.getKeyBefore(k),
+        );
         if (lastKey != null) {
           s.setFocusedKey(lastKey);
         }
@@ -128,22 +200,13 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
         }
         break;
       }
-      case " ":
-      case "Space":
-      case "Spacebar": {
-        if (focusedKey != null && s.selectionMode !== "none" && !s.isDisabled(focusedKey)) {
-          e.preventDefault();
-          s.toggleSelection(focusedKey);
-        }
-        break;
-      }
-      case "Enter": {
-        if (focusedKey != null && !s.isDisabled(focusedKey)) {
-          e.preventDefault();
-          p.onAction?.(focusedKey);
-        }
-        break;
-      }
+      // Space (toggle selection) and Enter (onAction) are intentionally absent
+      // here. Upstream's useSelectableCollection has no Space/Enter case — the
+      // focused item owns both, via useSelectableItem. We follow browser focus
+      // onto the focused row (the effect below), so the row's own handlers in
+      // createGridListItem fire. Handling them here too would double-toggle a
+      // focused row, because Solid delegates keydown and bubbles the row event
+      // up to this grid handler.
       case "Escape": {
         if (s.selectionMode !== "none") {
           e.preventDefault();
@@ -158,9 +221,11 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     const s = state();
     s.setFocused(true);
 
-    // If nothing is focused, focus the first item
+    // If nothing is focused, focus the first navigable item
     if (s.focusedKey == null) {
-      const firstKey = s.collection.getFirstKey();
+      const firstKey = findNextNavigableKey(s, s.collection.getFirstKey(), (k) =>
+        s.collection.getKeyAfter(k),
+      );
       if (firstKey != null) {
         s.setFocusedKey(firstKey);
       }
@@ -172,6 +237,44 @@ export function createGridList<T extends object, C extends GridCollection<T> = G
     s.setFocused(false);
   };
 
+  // Mirror React Aria's useSelectableCollection: once the roving tabindex for the
+  // focused key has been committed to the DOM, move browser focus onto that row
+  // from a post-commit effect, looking it up by its stable data-key rather than by
+  // transient tabindex. Selection and activation live on the row
+  // (createGridListItem) to match upstream, so keyboard nav has to carry focus
+  // there for the row's Space/Enter handlers to act on.
+  createEffect(() => {
+    const s = state();
+    const key = s.focusedKey;
+    const el = ref();
+    if (!el || key == null) {
+      return;
+    }
+
+    // Only manage focus while it already lives inside the grid — i.e. the user is
+    // navigating with the keyboard. Gate on the physical position of browser focus
+    // rather than the grid's logical isFocused signal: focus can land directly on a
+    // row (a pointer click) without ever firing the grid's own focus handler, and
+    // the contains() check keeps us from yanking focus back from elsewhere on the
+    // page when the focused key changes from a background interaction.
+    const active = document.activeElement;
+    if (!active || (active !== el && !el.contains(active))) {
+      return;
+    }
+
+    const target = el.querySelector<HTMLElement>(`[data-key="${key}"]`);
+    if (target && target !== active) {
+      target.focus();
+
+      // Reveal the newly focused row when navigating with the keyboard, mirroring
+      // useSelectableCollection. Pointer-driven focus changes should not shift the
+      // scroll position under the user's finger.
+      if (getInteractionModality() !== "pointer") {
+        scrollIntoViewport(target, { containingElement: el });
+      }
+    }
+  });
+
   const gridProps = createMemo(() => {
     const p = props();
     const s = state();