@proyecto-viviana/solidaria 0.3.0 → 0.4.0

package/src/tree/createTreeItem.ts

@@ -3,12 +3,21 @@
  * Based on @react-aria/tree/useTreeItem.
  */
 
-import { createMemo, createSignal, type Accessor } from "solid-js";
+import { createMemo, type Accessor } from "solid-js";
 import type { JSX } from "solid-js";
 import { createId } from "@proyecto-viviana/solid-stately";
-import type { TreeState, TreeCollection } from "@proyecto-viviana/solid-stately";
+import type {
+  Collection,
+  Key,
+  Selection,
+  TreeState,
+  TreeCollection,
+} from "@proyecto-viviana/solid-stately";
 import type { AriaTreeItemProps, TreeItemAria } from "./types";
 import { getTreeData } from "./createTree";
+import { createSelectableItem, type SelectableItemState } from "../selection/createSelectableItem";
+import { mergeCollectionRowInteractionProps } from "../selection/createCollectionRowInteraction";
+import { mergeProps } from "../utils/mergeProps";
 
 /**
  * Creates accessibility props for a tree item.
@@ -16,28 +25,20 @@ import { getTreeData } from "./createTree";
 export function createTreeItem<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
   props: Accessor<AriaTreeItemProps<T>>,
   state: Accessor<TreeState<T, C>>,
-  _ref: Accessor<HTMLElement | null>,
+  ref: Accessor<HTMLElement | null>,
 ): TreeItemAria {
-  const [isPressed, setIsPressed] = createSignal(false);
-  const rowId = createId();
+  const fallbackRowId = createId();
   const expandButtonId = createId();
 
-  const isSelected = createMemo(() => {
-    const s = state();
-    const p = props();
-    return s.isSelected(p.node.key);
+  const rowId = createMemo(() => {
+    const treeData = getTreeData(state());
+    return treeData ? `${treeData.treeId}-row-${String(props().node.key)}` : fallbackRowId;
   });
 
-  const isDisabled = createMemo(() => {
-    const s = state();
-    const p = props();
-    return p.isDisabled === true || s.isDisabled(p.node.key);
-  });
-
-  const isFocused = createMemo(() => {
+  const isSelected = createMemo(() => {
     const s = state();
     const p = props();
-    return s.focusedKey === p.node.key;
+    return s.isSelected(p.node.key);
   });
 
   const isExpanded = createMemo(() => {
@@ -56,97 +57,77 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
     return p.node.level;
   });
 
-  // Handle click/press for selection and actions
-  const onClick = (e: MouseEvent) => {
-    const s = state();
-    const p = props();
-
-    if (isDisabled()) return;
-
-    // Get tree metadata for actions
-    const treeData = getTreeData(s);
-    const onAction = treeData?.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();
-      }
-    }
+  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 tree metadata for actions
+  const selectableItem = createSelectableItem<T>(
+    () => {
+      const s = state();
+      const p = props();
       const treeData = getTreeData(s);
-      const onAction = treeData?.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 = () => {
-    setIsPressed(true);
-  };
-
-  const onPointerUp = () => {
-    setIsPressed(false);
-  };
+      const treeAction = treeData?.actions.onAction;
+      const shouldToggleOnAction =
+        !treeAction && !p.onAction && s.selectionMode === "none" && isExpandable();
+
+      return {
+        key: p.node.key,
+        id: rowId(),
+        isVirtualized: p.isVirtualized,
+        isDisabled: p.isDisabled,
+        onAction:
+          treeAction || p.onAction || shouldToggleOnAction
+            ? () => {
+                p.onAction?.();
+                treeAction?.(p.node.key);
+                if (shouldToggleOnAction) {
+                  s.toggleKey(p.node.key);
+                }
+              }
+            : undefined,
+      };
+    },
+    selectableState,
+    ref,
+  );
 
   // Compute sibling position (aria-posinset/aria-setsize)
   const siblingInfo = createMemo(() => {
@@ -175,7 +156,6 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
   });
 
   const rowProps = createMemo(() => {
-    const s = state();
     const p = props();
     const node = p.node;
     const { posinset, setsize } = siblingInfo();
@@ -185,20 +165,13 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
 
     const baseProps: Record<string, unknown> = {
       role: "row",
-      id: rowId,
       "aria-label": textValue || undefined,
-      "aria-selected": s.selectionMode !== "none" ? isSelected() : undefined,
-      "aria-disabled": isDisabled() || undefined,
+      "aria-selected": selectableState.canSelectItem?.(node.key) ? isSelected() : undefined,
+      "aria-disabled": selectableItem.isDisabled() || undefined,
       "aria-expanded": isExpandable() ? isExpanded() : undefined,
       "aria-level": node.level + 1, // 1-based for ARIA
       "aria-posinset": posinset,
       "aria-setsize": setsize,
-      tabIndex: isFocused() ? 0 : -1,
-      onClick,
-      onKeyDown,
-      onFocus,
-      onPointerDown,
-      onPointerUp,
     };
 
     // Add aria-rowindex for virtualized trees
@@ -206,12 +179,23 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
       baseProps["aria-rowindex"] = node.rowIndex + 1; // 1-based
     }
 
-    return baseProps as JSX.HTMLAttributes<HTMLDivElement>;
+    const treeData = getTreeData(state());
+    const mergedProps = mergeProps<JSX.HTMLAttributes<HTMLDivElement>>(
+      selectableItem.itemProps,
+      baseProps,
+    );
+
+    return mergeCollectionRowInteractionProps(mergedProps, {
+      ref,
+      keyboardNavigationBehavior: () => treeData?.keyboardNavigationBehavior ?? "arrow",
+      direction: () => treeData?.direction ?? "ltr",
+    });
   });
 
   const gridCellProps = createMemo(() => {
     return {
       role: "gridcell",
+      "aria-colindex": 1,
     } as JSX.HTMLAttributes<HTMLDivElement>;
   });
 
@@ -221,7 +205,7 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
     const s = state();
     const p = props();
 
-    if (isDisabled()) return;
+    if (selectableItem.isDisabled()) return;
 
     s.toggleKey(p.node.key);
   };
@@ -237,7 +221,8 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
       type: "button",
       id: expandButtonId,
       "aria-label": isExpanded() ? "Collapse" : "Expand",
-      "aria-labelledby": isExpandable() ? `${expandButtonId} ${rowId}` : undefined,
+      "aria-labelledby": isExpandable() ? `${expandButtonId} ${rowId()}` : undefined,
+      "data-react-aria-prevent-focus": true,
       onClick: onExpandClick,
       onPointerDown: stopPointerPropagation,
       onPointerUp: stopPointerPropagation,
@@ -264,10 +249,10 @@ export function createTreeItem<T extends object, C extends TreeCollection<T> = T
       return isSelected();
     },
     get isDisabled() {
-      return isDisabled();
+      return selectableItem.isDisabled();
     },
     get isPressed() {
-      return isPressed();
+      return selectableItem.isPressed();
     },
     get isExpanded() {
       return isExpanded();

package/src/tree/types.ts

@@ -22,6 +22,16 @@ export interface AriaTreeProps {
   isVirtualized?: boolean;
   /** Handler called when an item action is triggered. */
   onAction?: (key: Key) => void;
+  /**
+   * How keyboard navigation should behave within rows.
+   *
+   * `"arrow"` treats the tree 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 tree navigation.
+   *
+   * @default "arrow"
+   */
+  keyboardNavigationBehavior?: "arrow" | "tab";
   /** Whether the tree is disabled. */
   isDisabled?: boolean;
   /** The writing direction for the tree. Determines expand/collapse key mapping. */

package/src/utils/animation.ts

@@ -0,0 +1,151 @@
+/**
+ * Enter/exit animation primitives for Solidaria.
+ *
+ * A faithful SolidJS port of `react-aria`'s `useEnterAnimation` /
+ * `useExitAnimation` (react-aria/src/utils/animation.ts). These drive the
+ * `data-entering` / `data-exiting` render-prop flags that overlay styles key
+ * their motion tokens off of (opacity/translate transitions on Modal, Popover,
+ * Tooltip, …). Without them a styled overlay ships the tokens but never flips
+ * the state that triggers the transition, so it appears/disappears instantly.
+ *
+ * Two mechanisms are covered, exactly as upstream:
+ *   1. CSS `@keyframes` — the `animation` property is present while entering and
+ *      removed when the animation finishes.
+ *   2. CSS transitions — the initial styles apply while entering and are removed
+ *      immediately, so the transition plays. Premature transitions triggered
+ *      before the ready state (e.g. a popover positioned after mount) are
+ *      cancelled so only the intended enter transition runs.
+ *
+ * SolidJS notes:
+ * - Refs are passed as accessors (`() => element`) rather than React ref
+ *   objects, so a signal-backed ref re-runs the effect when the element mounts.
+ * - `isReady` gates the enter animation. In React the caller unmounts the
+ *   overlay while closed, so the hook re-initializes per open; a Solid component
+ *   often stays mounted with its overlay behind a `<Show>`, so pass
+ *   `isReady={isOpen}` to defer the enter until the element actually mounts.
+ * - `createEffect` replaces `useLayoutEffect`; effects never run during SSR, so
+ *   the `CSSTransition` reference is only touched on the client.
+ */
+
+import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js";
+
+/** A reactive accessor for the animated element (null until mounted). */
+export type ElementAccessor = () => Element | null | undefined;
+
+/**
+ * Runs `onEnd` once the element's animations settle while `isActive` is true.
+ * Mirrors the private `useAnimation` helper in react-aria's animation utils.
+ */
+function createAnimation(
+  ref: ElementAccessor,
+  isActive: Accessor<boolean>,
+  onEnd: () => void,
+): void {
+  createEffect(() => {
+    if (!isActive()) return;
+    const element = ref();
+    if (!element) return;
+
+    if (!("getAnimations" in element)) {
+      // JSDOM and other environments without the Web Animations API.
+      onEnd();
+      return;
+    }
+
+    const animations = element.getAnimations();
+    if (animations.length === 0) {
+      onEnd();
+      return;
+    }
+
+    let canceled = false;
+    Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+      if (!canceled) onEnd();
+    });
+
+    onCleanup(() => {
+      canceled = true;
+    });
+  });
+}
+
+/**
+ * Tracks whether an element is playing its enter animation.
+ *
+ * Returns an accessor that is `true` while the element should carry
+ * `data-entering` (its initial, pre-transition styles), then flips to `false`
+ * once the animation is set up — which removes the initial styles and lets the
+ * CSS transition play.
+ *
+ * @param ref - Accessor for the animated element.
+ * @param isReady - Whether the element is ready to animate in. Defaults to
+ *   `true`. Pass an `isOpen` accessor when the component stays mounted while the
+ *   overlay is hidden, so the enter state does not resolve before the element
+ *   mounts.
+ */
+export function createEnterAnimation(
+  ref: ElementAccessor,
+  isReady: Accessor<boolean> = () => true,
+): Accessor<boolean> {
+  const [isEntering, setIsEntering] = createSignal(true);
+  const isAnimationReady = () => isEntering() && isReady();
+
+  // Cancel any transitions triggered before the ready state (case 2 above), so
+  // only the intended enter transition — the one that starts when the initial
+  // styles are removed — runs.
+  createEffect(() => {
+    if (!isAnimationReady()) return;
+    const element = ref();
+    if (!element || !("getAnimations" in element)) return;
+    for (const animation of element.getAnimations()) {
+      if (animation instanceof CSSTransition) {
+        animation.cancel();
+      }
+    }
+  });
+
+  createAnimation(ref, isAnimationReady, () => setIsEntering(false));
+
+  return isAnimationReady;
+}
+
+/**
+ * Tracks whether an element is playing its exit animation.
+ *
+ * Keeps the caller informed so the element can stay mounted (`isOpen ||
+ * isExiting`) until its exit transition finishes. Implements the same
+ * `'closed' | 'open' | 'exiting'` state machine as react-aria's
+ * `useExitAnimation`, including interruption: reopening mid-exit returns to the
+ * open state.
+ *
+ * @param ref - Accessor for the animated element.
+ * @param isOpen - Whether the element is currently open.
+ */
+export function createExitAnimation(
+  ref: ElementAccessor,
+  isOpen: Accessor<boolean>,
+): Accessor<boolean> {
+  const [exitState, setExitState] = createSignal<"closed" | "open" | "exiting">(
+    isOpen() ? "open" : "closed",
+  );
+
+  createEffect(() => {
+    const open = isOpen();
+    setExitState((current) => {
+      // Open element requested to close: begin exiting.
+      if (current === "open" && !open) return "exiting";
+      // Closed or mid-exit element requested to open: the animation was
+      // interrupted (or it is a fresh open), so return to the open state.
+      if ((current === "closed" || current === "exiting") && open) return "open";
+      return current;
+    });
+  });
+
+  const isExiting = () => exitState() === "exiting";
+
+  createAnimation(ref, isExiting, () => {
+    setExitState((state) => (state === "exiting" ? "closed" : state));
+  });
+
+  return isExiting;
+}