@proyecto-viviana/solidaria 0.2.8 → 0.4.0

package/src/tooltip/createTooltip.ts

@@ -6,24 +6,20 @@
  * Port of @react-aria/tooltip useTooltip.
  */
 
-import { type JSX } from 'solid-js';
-import { type TooltipTriggerState } from '@proyecto-viviana/solid-stately';
-import { createHover } from '../interactions/createHover';
-import { filterDOMProps, mergeProps } from '../utils';
-
-// ============================================
-// TYPES
-// ============================================
+import { type JSX } from "solid-js";
+import { type TooltipTriggerState } from "@proyecto-viviana/solid-stately";
+import { createHover } from "../interactions/createHover";
+import { filterDOMProps, mergeProps } from "../utils";
 
 export interface TooltipProps {
   /** Whether the tooltip is disabled. */
   isDisabled?: boolean;
   /** Custom aria-label for the tooltip. */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** ID of an element that labels the tooltip. */
-  'aria-labelledby'?: string;
+  "aria-labelledby"?: string;
   /** ID of an element that describes the tooltip. */
-  'aria-describedby'?: string;
+  "aria-describedby"?: string;
 }
 
 export interface TooltipAria {
@@ -31,10 +27,6 @@ export interface TooltipAria {
   tooltipProps: JSX.HTMLAttributes<HTMLElement>;
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the accessibility implementation for a Tooltip component.
  *
@@ -58,10 +50,7 @@ export interface TooltipAria {
  * }
  * ```
  */
-export function createTooltip(
-  props: TooltipProps = {},
-  state?: TooltipTriggerState
-): TooltipAria {
+export function createTooltip(props: TooltipProps = {}, state?: TooltipTriggerState): TooltipAria {
   const domProps = filterDOMProps(props, { labelable: true });
 
   const { hoverProps } = createHover({
@@ -70,10 +59,8 @@ export function createTooltip(
   });
 
   return {
-    tooltipProps: mergeProps<JSX.HTMLAttributes<HTMLElement>>(
-      domProps,
-      hoverProps,
-      { role: 'tooltip' }
-    ),
+    tooltipProps: mergeProps<JSX.HTMLAttributes<HTMLElement>>(domProps, hoverProps, {
+      role: "tooltip",
+    }),
   };
 }

package/src/tooltip/createTooltipTrigger.ts

@@ -7,66 +7,71 @@
  * Port of @react-aria/tooltip useTooltipTrigger.
  */
 
-import { type JSX, createEffect, onCleanup } from 'solid-js';
-import { type TooltipTriggerState } from '@proyecto-viviana/solid-stately';
-import { createHover } from '../interactions/createHover';
-import { createFocusable } from '../interactions/createFocusable';
-import { createId } from '../ssr';
-
-// ============================================
-// TYPES
-// ============================================
+import { type JSX, createEffect, onCleanup } from "solid-js";
+import { type TooltipTriggerState } from "@proyecto-viviana/solid-stately";
+import { createHover } from "../interactions/createHover";
+import { createFocusable } from "../interactions/createFocusable";
+import { createId } from "../ssr";
 
 export interface TooltipTriggerProps {
   /** Whether the tooltip should be disabled. */
   isDisabled?: boolean;
   /**
    * The trigger mechanism for the tooltip.
-   * @default 'focus'
+   * @default 'hover'
    */
-  trigger?: 'focus';
+  trigger?: "focus" | "hover";
   /**
    * Whether the tooltip should close when the trigger is pressed.
    * @default true
    */
   shouldCloseOnPress?: boolean;
+  /**
+   * ID of the tooltip element.
+   * @internal Used by component wrappers to merge explicit tooltip ids with trigger aria-describedby.
+   */
+  tooltipId?: string;
 }
 
 export interface TooltipTriggerAria {
   /** Props to spread on the trigger element. */
   triggerProps: JSX.HTMLAttributes<HTMLElement>;
   /** Props to spread on the tooltip element (id for accessibility). */
-  tooltipProps: { id: string };
+  tooltipProps: { readonly id: string };
 }
 
-// ============================================
-// GLOBAL STATE
-// ============================================
-
-type Modality = 'keyboard' | 'pointer' | 'virtual';
+type Modality = "keyboard" | "pointer" | "virtual";
 let currentModality: Modality | null = null;
 
 // Track interaction modality (pointer vs keyboard)
-if (typeof document !== 'undefined') {
-  document.addEventListener('keydown', () => {
-    currentModality = 'keyboard';
-  }, true);
-  document.addEventListener('pointerdown', () => {
-    currentModality = 'pointer';
-  }, true);
-  document.addEventListener('pointermove', () => {
-    currentModality = 'pointer';
-  }, true);
+if (typeof document !== "undefined") {
+  document.addEventListener(
+    "keydown",
+    () => {
+      currentModality = "keyboard";
+    },
+    true,
+  );
+  document.addEventListener(
+    "pointerdown",
+    () => {
+      currentModality = "pointer";
+    },
+    true,
+  );
+  document.addEventListener(
+    "pointermove",
+    () => {
+      currentModality = "pointer";
+    },
+    true,
+  );
 }
 
 function isFocusVisible(): boolean {
-  return currentModality === 'keyboard';
+  return currentModality === "keyboard";
 }
 
-// ============================================
-// IMPLEMENTATION
-// ============================================
-
 /**
  * Provides the behavior and accessibility implementation for a tooltip trigger.
  *
@@ -100,20 +105,21 @@ function isFocusVisible(): boolean {
 export function createTooltipTrigger(
   props: TooltipTriggerProps,
   state: TooltipTriggerState,
-  ref: () => HTMLElement | null | undefined
+  ref: () => HTMLElement | null | undefined,
 ): TooltipTriggerAria {
   const isDisabled = () => props.isDisabled ?? false;
-  const trigger = () => props.trigger;
+  const trigger = () => props.trigger ?? "hover";
   const shouldCloseOnPress = () => props.shouldCloseOnPress ?? true;
 
-  const tooltipId = createId();
+  const generatedTooltipId = createId();
+  const tooltipId = () => props.tooltipId ?? generatedTooltipId;
 
   // Track hover and focus state
   let isHovered = false;
   let isFocused = false;
 
   const handleShow = () => {
-    if (isHovered || isFocused) {
+    if (!isDisabled() && (isHovered || isFocused)) {
       state.open(isFocused);
     }
   };
@@ -131,21 +137,21 @@ export function createTooltipTrigger(
     const onKeyDown = (e: KeyboardEvent) => {
       const element = ref();
       if (element) {
-        if (e.key === 'Escape') {
+        if (e.key === "Escape") {
           e.stopPropagation();
           state.close(true);
         }
       }
     };
 
-    document.addEventListener('keydown', onKeyDown, true);
+    document.addEventListener("keydown", onKeyDown, true);
     onCleanup(() => {
-      document.removeEventListener('keydown', onKeyDown, true);
+      document.removeEventListener("keydown", onKeyDown, true);
     });
   });
 
   const onHoverStart = () => {
-    if (trigger() === 'focus') {
+    if (isDisabled() || trigger() === "focus") {
       return;
     }
     // Hover events (onPointerEnter) only fire from pointer interactions,
@@ -155,7 +161,7 @@ export function createTooltipTrigger(
   };
 
   const onHoverEnd = () => {
-    if (trigger() === 'focus') {
+    if (isDisabled() || trigger() === "focus") {
       return;
     }
     isFocused = false;
@@ -164,7 +170,7 @@ export function createTooltipTrigger(
   };
 
   const closeOnPress = () => {
-    if (!shouldCloseOnPress()) {
+    if (isDisabled() || !shouldCloseOnPress()) {
       return;
     }
     isFocused = false;
@@ -173,13 +179,17 @@ export function createTooltipTrigger(
   };
 
   const onKeyDownPress = (event: KeyboardEvent) => {
-    if (event.key !== 'Enter' && event.key !== ' ' && event.key !== 'Spacebar') {
+    if (event.key !== "Enter" && event.key !== " " && event.key !== "Spacebar") {
       return;
     }
     closeOnPress();
   };
 
   const onFocus = () => {
+    if (isDisabled()) {
+      return;
+    }
+
     const visible = isFocusVisible();
     if (visible) {
       isFocused = true;
@@ -193,14 +203,14 @@ export function createTooltipTrigger(
     handleHide(true);
   };
 
-  const { hoverProps } = createHover({
+  const { hoverProps } = createHover(() => ({
     isDisabled: isDisabled(),
     onHoverStart,
     onHoverEnd,
-  });
+  }));
 
   const { focusableProps } = createFocusable({
-    isDisabled: isDisabled(),
+    isDisabled,
     onFocus,
     onBlur,
   });
@@ -208,8 +218,8 @@ export function createTooltipTrigger(
   const triggerProps = {
     ...focusableProps,
     ...hoverProps,
-    get 'aria-describedby'() {
-      return state.isOpen() ? tooltipId : undefined;
+    get "aria-describedby"() {
+      return !isDisabled() && state.isOpen() ? tooltipId() : undefined;
     },
     onPointerDown: closeOnPress,
     onKeyDown: onKeyDownPress,
@@ -220,7 +230,9 @@ export function createTooltipTrigger(
   return {
     triggerProps: triggerProps as JSX.HTMLAttributes<HTMLElement>,
     tooltipProps: {
-      id: tooltipId,
+      get id() {
+        return tooltipId();
+      },
     },
   };
 }

package/src/tooltip/index.ts

@@ -1,6 +1,6 @@
-export { createTooltip, type TooltipProps, type TooltipAria } from './createTooltip';
+export { createTooltip, type TooltipProps, type TooltipAria } from "./createTooltip";
 export {
   createTooltipTrigger,
   type TooltipTriggerProps,
   type TooltipTriggerAria,
-} from './createTooltipTrigger';
+} from "./createTooltipTrigger";

package/src/tree/createTree.ts

@@ -3,11 +3,13 @@
  * Based on @react-aria/tree/useTree.
  */
 
-import { createMemo, type Accessor } from 'solid-js';
-import type { JSX } from 'solid-js';
-import { createId } from '@proyecto-viviana/solid-stately';
-import type { TreeState, TreeCollection, Key } from '@proyecto-viviana/solid-stately';
-import type { AriaTreeProps, TreeAria } from './types';
+import { createEffect, createMemo, type Accessor } from "solid-js";
+import type { JSX } from "solid-js";
+import { createId } from "@proyecto-viviana/solid-stately";
+import type { TreeState, TreeCollection, Key } from "@proyecto-viviana/solid-stately";
+import type { AriaTreeProps, TreeAria } from "./types";
+import { scrollIntoViewport } from "../utils";
+import { getInteractionModality } from "../interactions/createInteractionModality";
 
 /**
  * Metadata stored for a tree instance.
@@ -15,6 +17,10 @@ import type { AriaTreeProps, TreeAria } from './types';
 interface TreeData {
   /** The generated ID for the tree. */
   treeId: string;
+  /** How keyboard navigation behaves within row children. */
+  keyboardNavigationBehavior: "arrow" | "tab";
+  /** Text direction for row-child arrow navigation and tree expansion keys. */
+  direction: "ltr" | "rtl";
   /** Actions registered for the tree. */
   actions: {
     onAction?: (key: Key) => void;
@@ -30,18 +36,50 @@ const treeDataMap = new WeakMap<object, TreeData>();
  * Gets the tree data for a given state.
  */
 export function getTreeData<T extends object, C extends TreeCollection<T>>(
-  state: TreeState<T, C>
+  state: TreeState<T, C>,
 ): TreeData | undefined {
   return treeDataMap.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 TreeCollection<T>>(
+  state: TreeState<T, C>,
+  key: Key,
+): boolean {
+  return state.isDisabled(key) && state.disabledBehavior === "all";
+}
+
+/**
+ * Walks from `startKey` via `step` until reaching a key that is navigable (not
+ * disabled for navigation), mirroring React Aria's
+ * `ListKeyboardDelegate.findNextNonDisabled`. `getFirstKey`/`getLastKey` and the
+ * next/previous lookups all funnel through this so arrow keys, Home and End land
+ * on enabled rows only.
+ */
+function findNextNavigableKey<T extends object, C extends TreeCollection<T>>(
+  state: TreeState<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 tree.
  */
 export function createTree<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
   props: Accessor<AriaTreeProps>,
   state: Accessor<TreeState<T, C>>,
-  _ref: Accessor<HTMLDivElement | null>
+  ref: Accessor<HTMLDivElement | null>,
 ): TreeAria {
   // Generate a unique ID for the tree
   const treeId = props().id ?? createId();
@@ -49,6 +87,12 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
   // Store tree data for child components
   const treeData: TreeData = {
     treeId,
+    get keyboardNavigationBehavior() {
+      return props().keyboardNavigationBehavior ?? "arrow";
+    },
+    get direction() {
+      return props().direction ?? "ltr";
+    },
     actions: {
       get onAction() {
         return props().onAction;
@@ -65,46 +109,42 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     const p = props();
     const collection = s.collection;
     const focusedKey = s.focusedKey;
-    const direction = p.direction ?? 'ltr';
+    const direction = p.direction ?? "ltr";
     // In RTL, ArrowLeft expands and ArrowRight collapses (opposite of LTR)
-    const expandKey = direction === 'rtl' ? 'ArrowLeft' : 'ArrowRight';
-    const collapseKey = direction === 'rtl' ? 'ArrowRight' : 'ArrowLeft';
+    const expandKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+    const collapseKey = direction === "rtl" ? "ArrowRight" : "ArrowLeft";
 
     if (p.isDisabled) return;
 
     switch (e.key) {
-      case 'ArrowDown': {
+      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': {
+      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': {
+      case "ArrowRight":
+      case "ArrowLeft": {
         e.preventDefault();
         if (focusedKey != null) {
           const node = collection.getItem(focusedKey);
@@ -131,54 +171,47 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
         }
         break;
       }
-      case 'Home': {
+      case "Home": {
         e.preventDefault();
-        const firstKey = collection.getFirstKey();
+        const firstKey = findNextNavigableKey(s, collection.getFirstKey(), (k) =>
+          collection.getKeyAfter(k),
+        );
         if (firstKey != null) {
           s.setFocusedKey(firstKey);
         }
         break;
       }
-      case 'End': {
+      case "End": {
         e.preventDefault();
-        const lastKey = collection.getLastKey();
+        const lastKey = findNextNavigableKey(s, collection.getLastKey(), (k) =>
+          collection.getKeyBefore(k),
+        );
         if (lastKey != null) {
           s.setFocusedKey(lastKey);
         }
         break;
       }
-      case 'a':
-      case 'A': {
-        if ((e.ctrlKey || e.metaKey) && s.selectionMode === 'multiple') {
+      case "a":
+      case "A": {
+        if ((e.ctrlKey || e.metaKey) && s.selectionMode === "multiple") {
           e.preventDefault();
           s.selectAll();
         }
         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;
-      }
-      case 'Escape': {
-        if (s.selectionMode !== 'none') {
+      // Space (selection) and Enter (action) are intentionally absent here.
+      // Upstream's useSelectableCollection leaves activation to useSelectableItem.
+      // The focus effect below moves DOM focus onto the focused row, so the row's
+      // own createSelectableItem handlers receive those keys without duplicating
+      // work in the bubbling tree handler.
+      case "Escape": {
+        if (s.selectionMode !== "none") {
           e.preventDefault();
           s.clearSelection();
         }
         break;
       }
-      case '*': {
+      case "*": {
         // Expand all siblings at current level
         e.preventDefault();
         if (focusedKey != null) {
@@ -191,9 +224,7 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
               siblings = [...collection.getChildren(parentKey)].map((n) => n.key);
             } else {
               // Root level siblings
-              siblings = collection.rows
-                .filter((n) => n.level === 0)
-                .map((n) => n.key);
+              siblings = collection.rows.filter((n) => n.level === 0).map((n) => n.key);
             }
             // Expand all expandable siblings
             for (const siblingKey of siblings) {
@@ -213,9 +244,11 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     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);
       }
@@ -227,18 +260,41 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
     s.setFocused(false);
   };
 
+  createEffect(() => {
+    const s = state();
+    const key = s.focusedKey;
+    const el = ref();
+    if (!el || key == null) {
+      return;
+    }
+
+    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();
+
+      if (getInteractionModality() !== "pointer") {
+        scrollIntoViewport(target, { containingElement: el });
+      }
+    }
+  });
+
   const treeProps = createMemo(() => {
     const p = props();
     const s = state();
 
     const baseProps: Record<string, unknown> = {
-      role: 'treegrid',
+      role: "treegrid",
       id: treeId,
-      'aria-label': p['aria-label'],
-      'aria-labelledby': p['aria-labelledby'],
-      'aria-describedby': p['aria-describedby'],
-      'aria-multiselectable': s.selectionMode === 'multiple' ? true : undefined,
-      'aria-disabled': p.isDisabled || undefined,
+      "aria-label": p["aria-label"],
+      "aria-labelledby": p["aria-labelledby"],
+      "aria-describedby": p["aria-describedby"],
+      "aria-multiselectable": s.selectionMode === "multiple" ? true : undefined,
+      "aria-disabled": p.isDisabled || undefined,
       tabIndex: p.isDisabled ? undefined : 0,
       onKeyDown,
       onFocus,
@@ -247,7 +303,7 @@ export function createTree<T extends object, C extends TreeCollection<T> = TreeC
 
     // Add row count for virtualized trees
     if (p.isVirtualized) {
-      baseProps['aria-rowcount'] = s.collection.rowCount;
+      baseProps["aria-rowcount"] = s.collection.rowCount;
     }
 
     return baseProps as JSX.HTMLAttributes<HTMLDivElement>;