@proyecto-viviana/solidaria 0.2.2 → 0.2.4

package/src/tree/createTree.ts

@@ -0,0 +1,246 @@
+/**
+ * createTree - Provides accessibility for a tree component.
+ * 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';
+
+/**
+ * Metadata stored for a tree instance.
+ */
+interface TreeData {
+  /** The generated ID for the tree. */
+  treeId: string;
+  /** Actions registered for the tree. */
+  actions: {
+    onAction?: (key: Key) => void;
+  };
+}
+
+/**
+ * WeakMap to store tree data for child components to access.
+ */
+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>
+): TreeData | undefined {
+  return treeDataMap.get(state);
+}
+
+/**
+ * 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>
+): TreeAria {
+  // Generate a unique ID for the tree
+  const treeId = props().id ?? createId();
+
+  // Store tree data for child components
+  const treeData: TreeData = {
+    treeId,
+    actions: {
+      get onAction() {
+        return props().onAction;
+      },
+    },
+  };
+
+  // Store in WeakMap using the state as key
+  treeDataMap.set(state(), treeData);
+
+  // Handle keyboard navigation
+  const onKeyDown = (e: KeyboardEvent) => {
+    const s = state();
+    const p = props();
+    const collection = s.collection;
+    const focusedKey = s.focusedKey;
+
+    if (p.isDisabled) return;
+
+    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);
+          }
+        }
+        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);
+          }
+        }
+        break;
+      }
+      case 'ArrowRight': {
+        e.preventDefault();
+        if (focusedKey != null) {
+          const node = collection.getItem(focusedKey);
+          if (node?.isExpandable) {
+            if (!s.isExpanded(focusedKey)) {
+              // Expand the node
+              s.expandKey(focusedKey);
+            } else {
+              // Move to first child
+              const children = [...collection.getChildren(focusedKey)];
+              if (children.length > 0) {
+                s.setFocusedKey(children[0].key);
+              }
+            }
+          }
+        }
+        break;
+      }
+      case 'ArrowLeft': {
+        e.preventDefault();
+        if (focusedKey != null) {
+          const node = collection.getItem(focusedKey);
+          if (node?.isExpandable && s.isExpanded(focusedKey)) {
+            // Collapse the node
+            s.collapseKey(focusedKey);
+          } else if (node?.parentKey != null) {
+            // Move to parent
+            s.setFocusedKey(node.parentKey);
+          }
+        }
+        break;
+      }
+      case 'Home': {
+        e.preventDefault();
+        const firstKey = collection.getFirstKey();
+        if (firstKey != null) {
+          s.setFocusedKey(firstKey);
+        }
+        break;
+      }
+      case 'End': {
+        e.preventDefault();
+        const lastKey = collection.getLastKey();
+        if (lastKey != null) {
+          s.setFocusedKey(lastKey);
+        }
+        break;
+      }
+      case 'a':
+      case 'A': {
+        if ((e.ctrlKey || e.metaKey) && s.selectionMode === 'multiple') {
+          e.preventDefault();
+          s.selectAll();
+        }
+        break;
+      }
+      case 'Escape': {
+        if (s.selectionMode !== 'none') {
+          e.preventDefault();
+          s.clearSelection();
+        }
+        break;
+      }
+      case '*': {
+        // Expand all siblings at current level
+        e.preventDefault();
+        if (focusedKey != null) {
+          const node = collection.getItem(focusedKey);
+          if (node) {
+            // Find all siblings at the same level
+            const parentKey = node.parentKey;
+            let siblings: Key[];
+            if (parentKey != null) {
+              siblings = [...collection.getChildren(parentKey)].map((n) => n.key);
+            } else {
+              // Root level siblings
+              siblings = collection.rows
+                .filter((n) => n.level === 0)
+                .map((n) => n.key);
+            }
+            // Expand all expandable siblings
+            for (const siblingKey of siblings) {
+              const sibling = collection.getItem(siblingKey);
+              if (sibling?.isExpandable && !s.isExpanded(siblingKey)) {
+                s.expandKey(siblingKey);
+              }
+            }
+          }
+        }
+        break;
+      }
+    }
+  };
+
+  const onFocus = () => {
+    const s = state();
+    s.setFocused(true);
+
+    // If nothing is focused, focus the first item
+    if (s.focusedKey == null) {
+      const firstKey = s.collection.getFirstKey();
+      if (firstKey != null) {
+        s.setFocusedKey(firstKey);
+      }
+    }
+  };
+
+  const onBlur = () => {
+    const s = state();
+    s.setFocused(false);
+  };
+
+  const treeProps = createMemo(() => {
+    const p = props();
+    const s = state();
+
+    const baseProps: Record<string, unknown> = {
+      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,
+      tabIndex: p.isDisabled ? undefined : 0,
+      onKeyDown,
+      onFocus,
+      onBlur,
+    };
+
+    // Add row count for virtualized trees
+    if (p.isVirtualized) {
+      baseProps['aria-rowcount'] = s.collection.rowCount;
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLDivElement>;
+  });
+
+  return {
+    get treeProps() {
+      return treeProps();
+    },
+  };
+}

package/src/tree/createTreeItem.ts

@@ -0,0 +1,233 @@
+/**
+ * createTreeItem - Provides accessibility for a tree item.
+ * Based on @react-aria/tree/useTreeItem.
+ */
+
+import { createMemo, createSignal, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import type { TreeState, TreeCollection } from '@proyecto-viviana/solid-stately';
+import type { AriaTreeItemProps, TreeItemAria } from './types';
+import { getTreeData } from './createTree';
+
+/**
+ * Creates accessibility props for a tree item.
+ */
+export function createTreeItem<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
+  props: Accessor<AriaTreeItemProps<T>>,
+  state: Accessor<TreeState<T, C>>,
+  _ref: Accessor<HTMLDivElement | null>
+): TreeItemAria {
+  const [isPressed, setIsPressed] = createSignal(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 isExpanded = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isExpanded(p.node.key);
+  });
+
+  const isExpandable = createMemo(() => {
+    const p = props();
+    return p.node.isExpandable ?? false;
+  });
+
+  const level = createMemo(() => {
+    const p = props();
+    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 (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 onKeyDown = (e: KeyboardEvent) => {
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    if (e.key === 'Enter') {
+      // Get tree metadata for actions
+      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 === ' ') {
+      // 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 rowProps = createMemo(() => {
+    const s = state();
+    const p = props();
+    const node = p.node;
+
+    const baseProps: Record<string, unknown> = {
+      role: 'row',
+      'aria-selected': s.selectionMode !== 'none' ? isSelected() : undefined,
+      'aria-disabled': isDisabled() || undefined,
+      'aria-expanded': isExpandable() ? isExpanded() : undefined,
+      'aria-level': node.level + 1, // 1-based for ARIA
+      tabIndex: isFocused() ? 0 : -1,
+      onClick,
+      onKeyDown,
+      onFocus,
+      onPointerDown,
+      onPointerUp,
+    };
+
+    // Add aria-rowindex for virtualized trees
+    if (p.isVirtualized && node.rowIndex != null) {
+      baseProps['aria-rowindex'] = node.rowIndex + 1; // 1-based
+    }
+
+    return baseProps as JSX.HTMLAttributes<HTMLDivElement>;
+  });
+
+  const gridCellProps = createMemo(() => {
+    return {
+      role: 'gridcell',
+    } as JSX.HTMLAttributes<HTMLDivElement>;
+  });
+
+  // Expand button handler
+  const onExpandClick = (e: MouseEvent) => {
+    e.stopPropagation(); // Don't trigger row click
+    const s = state();
+    const p = props();
+
+    if (isDisabled()) return;
+
+    s.toggleKey(p.node.key);
+  };
+
+  const expandButtonProps = createMemo(() => {
+    const baseProps: Record<string, unknown> = {
+      type: 'button',
+      'aria-label': isExpanded() ? 'Collapse' : 'Expand',
+      onClick: onExpandClick,
+      tabIndex: -1, // Not in tab order, use arrow keys
+      'aria-hidden': !isExpandable() ? true : undefined,
+    };
+
+    return baseProps as JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  });
+
+  return {
+    get rowProps() {
+      return rowProps();
+    },
+    get gridCellProps() {
+      return gridCellProps();
+    },
+    get expandButtonProps() {
+      return expandButtonProps();
+    },
+    get isSelected() {
+      return isSelected();
+    },
+    get isDisabled() {
+      return isDisabled();
+    },
+    get isPressed() {
+      return isPressed();
+    },
+    get isExpanded() {
+      return isExpanded();
+    },
+    get isExpandable() {
+      return isExpandable();
+    },
+    get level() {
+      return level();
+    },
+  };
+}

package/src/tree/createTreeSelectionCheckbox.ts

@@ -0,0 +1,68 @@
+/**
+ * createTreeSelectionCheckbox - Provides accessibility for a tree item's selection checkbox.
+ * Based on @react-aria/gridlist/useGridListSelectionCheckbox.
+ */
+
+import { createMemo, type Accessor } from 'solid-js';
+import type { JSX } from 'solid-js';
+import type { TreeState, TreeCollection } from '@proyecto-viviana/solid-stately';
+import type { AriaTreeSelectionCheckboxProps, TreeSelectionCheckboxAria } from './types';
+
+/**
+ * Creates accessibility props for a tree selection checkbox.
+ */
+export function createTreeSelectionCheckbox<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
+  props: Accessor<AriaTreeSelectionCheckboxProps>,
+  state: Accessor<TreeState<T, C>>
+): TreeSelectionCheckboxAria {
+  const isSelected = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isSelected(p.key);
+  });
+
+  const isDisabled = createMemo(() => {
+    const s = state();
+    const p = props();
+    return s.isDisabled(p.key);
+  });
+
+  const onChange = (e: Event) => {
+    const s = state();
+    const p = props();
+    const target = e.target as HTMLInputElement;
+
+    if (isDisabled()) return;
+
+    if (target.checked) {
+      s.toggleSelection(p.key);
+    } else {
+      s.toggleSelection(p.key);
+    }
+  };
+
+  const onClick = (e: MouseEvent) => {
+    // Stop propagation to prevent row click from also firing
+    e.stopPropagation();
+  };
+
+  const checkboxProps = createMemo(() => {
+    const baseProps: Record<string, unknown> = {
+      type: 'checkbox',
+      'aria-label': 'Select',
+      checked: isSelected(),
+      disabled: isDisabled(),
+      onChange,
+      onClick,
+      tabIndex: -1, // Use arrow keys to navigate, not tab
+    };
+
+    return baseProps as JSX.InputHTMLAttributes<HTMLInputElement>;
+  });
+
+  return {
+    get checkboxProps() {
+      return checkboxProps();
+    },
+  };
+}

package/src/tree/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Tree ARIA layer exports.
+ */
+
+export { createTree, getTreeData } from './createTree';
+export { createTreeItem } from './createTreeItem';
+export { createTreeSelectionCheckbox } from './createTreeSelectionCheckbox';
+
+export type {
+  AriaTreeProps,
+  TreeAria,
+  AriaTreeItemProps,
+  TreeItemAria,
+  AriaTreeSelectionCheckboxProps,
+  TreeSelectionCheckboxAria,
+} from './types';

package/src/tree/types.ts

@@ -0,0 +1,87 @@
+/**
+ * Tree ARIA types.
+ * Based on @react-aria/tree.
+ */
+
+import type { JSX } from 'solid-js';
+import type { Key, TreeNode } from '@proyecto-viviana/solid-stately';
+
+/**
+ * Props for createTree.
+ */
+export interface AriaTreeProps {
+  /** The unique id for the tree. */
+  id?: string;
+  /** Label for accessibility. */
+  'aria-label'?: string;
+  /** ID of an element that labels the tree. */
+  'aria-labelledby'?: string;
+  /** ID of an element that describes the tree. */
+  'aria-describedby'?: string;
+  /** Whether the tree is virtualized. */
+  isVirtualized?: boolean;
+  /** Handler called when an item action is triggered. */
+  onAction?: (key: Key) => void;
+  /** Whether the tree is disabled. */
+  isDisabled?: boolean;
+}
+
+/**
+ * Return value for createTree.
+ */
+export interface TreeAria {
+  /** Props for the tree container (role="treegrid"). */
+  treeProps: JSX.HTMLAttributes<HTMLDivElement>;
+}
+
+/**
+ * Props for createTreeItem.
+ */
+export interface AriaTreeItemProps<T = unknown> {
+  /** The tree node this item represents. */
+  node: TreeNode<T>;
+  /** Whether the item is rendered in a virtualized list. */
+  isVirtualized?: boolean;
+  /** Handler called when this item's action is triggered. */
+  onAction?: () => void;
+}
+
+/**
+ * Return value for createTreeItem.
+ */
+export interface TreeItemAria {
+  /** Props for the row element. */
+  rowProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the grid cell content wrapper. */
+  gridCellProps: JSX.HTMLAttributes<HTMLDivElement>;
+  /** Props for the expand button (if the item is expandable). */
+  expandButtonProps: JSX.ButtonHTMLAttributes<HTMLButtonElement>;
+  /** Whether the item is selected. */
+  isSelected: boolean;
+  /** Whether the item is disabled. */
+  isDisabled: boolean;
+  /** Whether the item is being pressed. */
+  isPressed: boolean;
+  /** Whether the item is expanded. */
+  isExpanded: boolean;
+  /** Whether the item is expandable (has children). */
+  isExpandable: boolean;
+  /** The nesting level of the item (0 for root). */
+  level: number;
+}
+
+/**
+ * Props for createTreeSelectionCheckbox.
+ */
+export interface AriaTreeSelectionCheckboxProps {
+  /** The key of the tree item this checkbox belongs to. */
+  key: Key;
+}
+
+/**
+ * Return value for createTreeSelectionCheckbox.
+ */
+export interface TreeSelectionCheckboxAria {
+  /** Props for the checkbox input element. */
+  checkboxProps: JSX.InputHTMLAttributes<HTMLInputElement>;
+}