@proyecto-viviana/solidaria 0.1.3 → 0.2.0

package/src/tree/createTree.ts

@@ -1,246 +0,0 @@
-/**
- * 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

@@ -1,233 +0,0 @@
-/**
- * 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

@@ -1,68 +0,0 @@
-/**
- * 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

@@ -1,16 +0,0 @@
-/**
- * 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

@@ -1,87 +0,0 @@
-/**
- * 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>;
-}