@proyecto-viviana/solid-stately 0.0.6 → 0.1.1

package/src/tree/TreeCollection.ts

@@ -0,0 +1,175 @@
+/**
+ * TreeCollection implementation.
+ * Based on @react-stately/tree/TreeCollection.
+ *
+ * A flattened view of tree nodes that respects expanded state.
+ * Only visible nodes (root + expanded children) are included in iteration.
+ */
+
+import type { Key } from '../collections/types';
+import type { TreeCollection as ITreeCollection, TreeNode, TreeItemData } from './types';
+
+/**
+ * Creates a TreeCollection from hierarchical data.
+ * The collection is flattened based on expanded keys.
+ */
+export class TreeCollection<T> implements ITreeCollection<T> {
+  private keyMap: Map<Key, TreeNode<T>> = new Map();
+  private visibleKeys: Key[] = [];
+  private _rows: TreeNode<T>[] = [];
+
+  constructor(
+    items: TreeItemData<T>[],
+    expandedKeys: Set<Key>
+  ) {
+    this.buildCollection(items, expandedKeys);
+  }
+
+  private buildCollection(items: TreeItemData<T>[], expandedKeys: Set<Key>): void {
+    let globalIndex = 0;
+
+    const visit = (
+      item: TreeItemData<T>,
+      level: number,
+      parentKey: Key | null,
+      indexInParent: number
+    ): TreeNode<T> => {
+      const hasChildren = item.children && item.children.length > 0;
+      const isExpanded = hasChildren && expandedKeys.has(item.key);
+
+      // Build child nodes first (even if not visible, for the map)
+      const childNodes: TreeNode<T>[] = [];
+      if (hasChildren && item.children) {
+        for (let i = 0; i < item.children.length; i++) {
+          const childNode = visit(item.children[i], level + 1, item.key, i);
+          childNodes.push(childNode);
+        }
+      }
+
+      const node: TreeNode<T> = {
+        type: 'item',
+        key: item.key,
+        value: item.value,
+        textValue: item.textValue || String(item.key),
+        level,
+        index: indexInParent,
+        parentKey,
+        hasChildNodes: hasChildren || false,
+        childNodes,
+        isDisabled: item.isDisabled,
+        isExpandable: hasChildren,
+        isExpanded,
+      };
+
+      // Always add to keyMap (for getItem lookups)
+      this.keyMap.set(item.key, node);
+
+      return node;
+    };
+
+    // First pass: build all nodes
+    const rootNodes: TreeNode<T>[] = [];
+    for (let i = 0; i < items.length; i++) {
+      const node = visit(items[i], 0, null, i);
+      rootNodes.push(node);
+    }
+
+    // Second pass: build visible rows list
+    const addVisibleNodes = (nodes: TreeNode<T>[]): void => {
+      for (const node of nodes) {
+        // Update the row index for visible nodes
+        node.rowIndex = globalIndex++;
+        this._rows.push(node);
+        this.visibleKeys.push(node.key);
+
+        // Add children if expanded
+        if (node.isExpanded && node.childNodes.length > 0) {
+          addVisibleNodes(node.childNodes);
+        }
+      }
+    };
+
+    addVisibleNodes(rootNodes);
+  }
+
+  // Collection properties
+
+  get size(): number {
+    return this.visibleKeys.length;
+  }
+
+  get rows(): TreeNode<T>[] {
+    return this._rows;
+  }
+
+  get rowCount(): number {
+    return this._rows.length;
+  }
+
+  // Collection methods
+
+  getKeys(): Iterable<Key> {
+    return this.visibleKeys;
+  }
+
+  getItem(key: Key): TreeNode<T> | null {
+    return this.keyMap.get(key) ?? null;
+  }
+
+  at(index: number): TreeNode<T> | null {
+    if (index < 0 || index >= this._rows.length) {
+      return null;
+    }
+    return this._rows[index];
+  }
+
+  getKeyBefore(key: Key): Key | null {
+    const index = this.visibleKeys.indexOf(key);
+    if (index <= 0) return null;
+    return this.visibleKeys[index - 1];
+  }
+
+  getKeyAfter(key: Key): Key | null {
+    const index = this.visibleKeys.indexOf(key);
+    if (index < 0 || index >= this.visibleKeys.length - 1) return null;
+    return this.visibleKeys[index + 1];
+  }
+
+  getFirstKey(): Key | null {
+    return this.visibleKeys[0] ?? null;
+  }
+
+  getLastKey(): Key | null {
+    return this.visibleKeys[this.visibleKeys.length - 1] ?? null;
+  }
+
+  getChildren(key: Key): Iterable<TreeNode<T>> {
+    const node = this.keyMap.get(key);
+    return node?.childNodes ?? [];
+  }
+
+  getTextValue(key: Key): string {
+    const node = this.keyMap.get(key);
+    return node?.textValue ?? '';
+  }
+
+  getParentKey(key: Key): Key | null {
+    const node = this.keyMap.get(key);
+    return node?.parentKey ?? null;
+  }
+
+  [Symbol.iterator](): Iterator<TreeNode<T>> {
+    return this._rows[Symbol.iterator]();
+  }
+}
+
+/**
+ * Factory function to create a TreeCollection.
+ * Useful for the collectionFactory pattern in TreeStateOptions.
+ */
+export function createTreeCollection<T>(
+  items: TreeItemData<T>[],
+  expandedKeys: Set<Key>
+): TreeCollection<T> {
+  return new TreeCollection(items, expandedKeys);
+}

package/src/tree/createTreeState.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Tree state management for Tree components.
+ * Based on @react-stately/tree/useTreeState.
+ *
+ * Manages expansion state, selection, and focus for hierarchical tree data.
+ */
+import { type Accessor } from 'solid-js';
+import type { TreeState, TreeStateOptions, TreeCollection } from './types';
+/**
+ * Creates state management for a tree component.
+ * Handles expansion, selection, focus management, and keyboard navigation state.
+ */
+export declare function createTreeState<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(options: Accessor<TreeStateOptions<T, C>>): TreeState<T, C>;
+//# sourceMappingURL=createTreeState.d.ts.map

package/src/tree/createTreeState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"createTreeState.d.ts","sourceRoot":"","sources":["createTreeState.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAA8C,KAAK,QAAQ,EAAE,MAAM,UAAU,CAAC;AACrF,OAAO,KAAK,EACV,SAAS,EACT,gBAAgB,EAChB,cAAc,EAEf,MAAM,SAAS,CAAC;AAGjB;;;GAGG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAAE,CAAC,SAAS,cAAc,CAAC,CAAC,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,EAC/F,OAAO,EAAE,QAAQ,CAAC,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GACxC,SAAS,CAAC,CAAC,EAAE,CAAC,CAAC,CAiWjB"}

package/src/tree/createTreeState.ts

@@ -0,0 +1,392 @@
+/**
+ * Tree state management for Tree components.
+ * Based on @react-stately/tree/useTreeState.
+ *
+ * Manages expansion state, selection, and focus for hierarchical tree data.
+ */
+
+import { createSignal, createEffect, createMemo, on, type Accessor } from 'solid-js';
+import type {
+  TreeState,
+  TreeStateOptions,
+  TreeCollection,
+  TreeNode,
+} from './types';
+import type { Key, FocusStrategy } from '../collections/types';
+
+/**
+ * Creates state management for a tree component.
+ * Handles expansion, selection, focus management, and keyboard navigation state.
+ */
+export function createTreeState<T extends object, C extends TreeCollection<T> = TreeCollection<T>>(
+  options: Accessor<TreeStateOptions<T, C>>
+): TreeState<T, C> {
+  const getOptions = () => options();
+
+  // Disabled keys as a Set
+  const disabledKeys = createMemo(() => {
+    const keys = getOptions().disabledKeys;
+    return keys ? new Set(keys) : new Set<Key>();
+  });
+
+  // Expansion state (uncontrolled)
+  const [internalExpandedKeys, setInternalExpandedKeys] = createSignal<Set<Key>>(
+    getInitialExpandedKeys(getOptions().defaultExpandedKeys)
+  );
+
+  // Computed expanded keys (controlled or uncontrolled)
+  const expandedKeys = createMemo(() => {
+    const opts = getOptions();
+    if (opts.expandedKeys !== undefined) {
+      return new Set(opts.expandedKeys);
+    }
+    return internalExpandedKeys();
+  });
+
+  // Collection - rebuilt when expanded keys change
+  const collection = createMemo(() => {
+    const opts = getOptions();
+    return opts.collectionFactory(expandedKeys());
+  });
+
+  // Focus state
+  const [isFocused, setIsFocused] = createSignal(false);
+  const [focusedKey, setFocusedKeyInternal] = createSignal<Key | null>(null);
+  const [childFocusStrategy, setChildFocusStrategy] = createSignal<FocusStrategy | null>(null);
+  const [isKeyboardNavigationDisabled, setKeyboardNavigationDisabled] = createSignal(false);
+
+  // Selection state
+  const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<'all' | Set<Key>>(
+    getInitialSelection(getOptions().defaultSelectedKeys)
+  );
+  const [anchorKey, setAnchorKey] = createSignal<Key | null>(null);
+
+  // Computed selection
+  const selectedKeys = createMemo(() => {
+    const opts = getOptions();
+    if (opts.selectedKeys !== undefined) {
+      return normalizeSelection(opts.selectedKeys);
+    }
+    return internalSelectedKeys();
+  });
+
+  const selectionMode = createMemo(() => getOptions().selectionMode ?? 'none');
+  const selectionBehavior = createMemo(() => getOptions().selectionBehavior ?? 'toggle');
+  const disallowEmptySelection = createMemo(() => getOptions().disallowEmptySelection ?? false);
+  const disabledBehavior = createMemo(() => getOptions().disabledBehavior ?? 'all');
+
+  // Set focused key
+  const setFocusedKey = (key: Key | null, strategy: FocusStrategy = 'first') => {
+    setFocusedKeyInternal(key);
+    setChildFocusStrategy(strategy);
+  };
+
+  // Reset focused key if the item is removed from visible collection
+  let cachedCollection: C | null = null;
+
+  createEffect(
+    on(collection, (coll) => {
+      const currentFocusedKey = focusedKey();
+
+      if (currentFocusedKey != null && cachedCollection) {
+        // Check if the focused item is still visible
+        const visibleKeys = [...coll.getKeys()];
+        if (!visibleKeys.includes(currentFocusedKey)) {
+          // The focused item was collapsed or removed, find a new one to focus
+          // Try to find the parent and focus it
+          const node = cachedCollection.getItem(currentFocusedKey);
+          if (node?.parentKey != null) {
+            const parent = coll.getItem(node.parentKey);
+            if (parent && visibleKeys.includes(parent.key)) {
+              setFocusedKeyInternal(parent.key);
+              cachedCollection = coll;
+              return;
+            }
+          }
+
+          // Otherwise, find the nearest visible sibling or previous item
+          const rows = coll.rows;
+          if (rows.length > 0) {
+            // Find the closest item to where the focused item was
+            const cachedNode = cachedCollection.getItem(currentFocusedKey);
+            if (cachedNode?.rowIndex !== undefined) {
+              const newIndex = Math.min(cachedNode.rowIndex, rows.length - 1);
+              const newNode = rows[newIndex];
+              if (newNode && !disabledKeys().has(newNode.key)) {
+                setFocusedKeyInternal(newNode.key);
+                cachedCollection = coll;
+                return;
+              }
+            }
+            // Fall back to first non-disabled item
+            for (const row of rows) {
+              if (!disabledKeys().has(row.key)) {
+                setFocusedKeyInternal(row.key);
+                break;
+              }
+            }
+          } else {
+            setFocusedKeyInternal(null);
+          }
+        }
+      }
+
+      cachedCollection = coll;
+    })
+  );
+
+  // Selection methods
+  const isSelected = (key: Key): boolean => {
+    const keys = selectedKeys();
+    if (keys === 'all') return true;
+    return keys.has(key);
+  };
+
+  const isDisabled = (key: Key): boolean => {
+    return disabledKeys().has(key);
+  };
+
+  const isExpanded = (key: Key): boolean => {
+    return expandedKeys().has(key);
+  };
+
+  const updateSelection = (newSelection: 'all' | Set<Key>) => {
+    const opts = getOptions();
+
+    // Controlled mode
+    if (opts.selectedKeys !== undefined) {
+      opts.onSelectionChange?.(newSelection);
+      return;
+    }
+
+    // Uncontrolled mode
+    const current = internalSelectedKeys();
+    const isDifferent =
+      current === 'all' ||
+      newSelection === 'all' ||
+      current.size !== (newSelection as Set<Key>).size ||
+      ![...current].every((k) => (newSelection as Set<Key>).has(k));
+
+    if (isDifferent) {
+      setInternalSelectedKeys(newSelection);
+      opts.onSelectionChange?.(newSelection);
+    }
+  };
+
+  const toggleSelection = (key: Key) => {
+    if (isDisabled(key) && disabledBehavior() === 'all') return;
+    if (selectionMode() === 'none') return;
+
+    const current = selectedKeys();
+
+    if (selectionMode() === 'single') {
+      if (isSelected(key) && !disallowEmptySelection()) {
+        updateSelection(new Set());
+      } else {
+        updateSelection(new Set([key]));
+      }
+      return;
+    }
+
+    // Multiple selection
+    if (current === 'all') {
+      // Can't toggle when all selected without knowing all keys
+      return;
+    }
+
+    const newSelection = new Set(current);
+    if (newSelection.has(key)) {
+      if (newSelection.size > 1 || !disallowEmptySelection()) {
+        newSelection.delete(key);
+      }
+    } else {
+      newSelection.add(key);
+    }
+
+    updateSelection(newSelection);
+    setAnchorKey(key);
+  };
+
+  const replaceSelection = (key: Key) => {
+    if (isDisabled(key) && disabledBehavior() === 'all') return;
+    if (selectionMode() === 'none') return;
+
+    updateSelection(new Set([key]));
+    setAnchorKey(key);
+  };
+
+  const extendSelection = (toKey: Key) => {
+    if (isDisabled(toKey) && disabledBehavior() === 'all') return;
+    if (selectionMode() !== 'multiple') {
+      replaceSelection(toKey);
+      return;
+    }
+
+    const anchor = anchorKey();
+    if (!anchor) {
+      replaceSelection(toKey);
+      return;
+    }
+
+    const coll = collection();
+    const rows = coll.rows.filter((r) => r.type === 'item');
+    const keys = rows.map((r) => r.key);
+    const anchorIndex = keys.indexOf(anchor);
+    const toIndex = keys.indexOf(toKey);
+
+    if (anchorIndex === -1 || toIndex === -1) {
+      replaceSelection(toKey);
+      return;
+    }
+
+    const start = Math.min(anchorIndex, toIndex);
+    const end = Math.max(anchorIndex, toIndex);
+    const rangeKeys = keys.slice(start, end + 1).filter((k) => !isDisabled(k));
+
+    updateSelection(new Set(rangeKeys));
+  };
+
+  const selectAll = () => {
+    if (selectionMode() !== 'multiple') return;
+    updateSelection('all');
+  };
+
+  const clearSelection = () => {
+    if (disallowEmptySelection()) return;
+    updateSelection(new Set());
+  };
+
+  const toggleSelectAll = () => {
+    if (selectionMode() !== 'multiple') return;
+
+    if (selectedKeys() === 'all') {
+      clearSelection();
+    } else {
+      selectAll();
+    }
+  };
+
+  // Expansion methods
+  const updateExpandedKeys = (newKeys: Set<Key>) => {
+    const opts = getOptions();
+
+    // Controlled mode
+    if (opts.expandedKeys !== undefined) {
+      opts.onExpandedChange?.(newKeys);
+      return;
+    }
+
+    // Uncontrolled mode
+    setInternalExpandedKeys(newKeys);
+    opts.onExpandedChange?.(newKeys);
+  };
+
+  const toggleKey = (key: Key) => {
+    const node = collection().getItem(key);
+    if (!node || !node.isExpandable) return;
+    if (isDisabled(key) && disabledBehavior() === 'all') return;
+
+    const current = expandedKeys();
+    const newKeys = new Set(current);
+
+    if (newKeys.has(key)) {
+      newKeys.delete(key);
+    } else {
+      newKeys.add(key);
+    }
+
+    updateExpandedKeys(newKeys);
+  };
+
+  const expandKey = (key: Key) => {
+    const node = collection().getItem(key);
+    if (!node || !node.isExpandable) return;
+    if (isDisabled(key) && disabledBehavior() === 'all') return;
+
+    const current = expandedKeys();
+    if (current.has(key)) return;
+
+    const newKeys = new Set(current);
+    newKeys.add(key);
+    updateExpandedKeys(newKeys);
+  };
+
+  const collapseKey = (key: Key) => {
+    const node = collection().getItem(key);
+    if (!node || !node.isExpandable) return;
+    if (isDisabled(key) && disabledBehavior() === 'all') return;
+
+    const current = expandedKeys();
+    if (!current.has(key)) return;
+
+    const newKeys = new Set(current);
+    newKeys.delete(key);
+    updateExpandedKeys(newKeys);
+  };
+
+  const setExpandedKeys = (keys: Set<Key>) => {
+    updateExpandedKeys(keys);
+  };
+
+  return {
+    get collection() {
+      return collection();
+    },
+    get disabledKeys() {
+      return disabledKeys();
+    },
+    get expandedKeys() {
+      return expandedKeys();
+    },
+    get isKeyboardNavigationDisabled() {
+      return isKeyboardNavigationDisabled();
+    },
+    get focusedKey() {
+      return focusedKey();
+    },
+    get childFocusStrategy() {
+      return childFocusStrategy();
+    },
+    get isFocused() {
+      return isFocused();
+    },
+    get selectionMode() {
+      return selectionMode();
+    },
+    get selectedKeys() {
+      return selectedKeys();
+    },
+    isSelected,
+    isDisabled,
+    isExpanded,
+    setFocusedKey,
+    setFocused: setIsFocused,
+    toggleSelection,
+    replaceSelection,
+    extendSelection,
+    selectAll,
+    clearSelection,
+    toggleSelectAll,
+    toggleKey,
+    expandKey,
+    collapseKey,
+    setExpandedKeys,
+    setKeyboardNavigationDisabled,
+  };
+}
+
+// Helper functions
+function getInitialSelection(defaultKeys?: 'all' | Iterable<Key>): 'all' | Set<Key> {
+  if (defaultKeys === undefined) return new Set();
+  return normalizeSelection(defaultKeys);
+}
+
+function normalizeSelection(keys: 'all' | Iterable<Key>): 'all' | Set<Key> {
+  if (keys === 'all') return 'all';
+  return new Set(keys);
+}
+
+function getInitialExpandedKeys(defaultKeys?: Iterable<Key>): Set<Key> {
+  if (defaultKeys === undefined) return new Set();
+  return new Set(defaultKeys);
+}

package/src/tree/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Tree state management exports.
+ */
+export { createTreeState } from './createTreeState';
+export { TreeCollection, createTreeCollection } from './TreeCollection';
+export type { TreeState, TreeStateOptions, TreeCollection as TreeCollectionInterface, TreeNode, TreeItemData, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/src/tree/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AACxE,YAAY,EACV,SAAS,EACT,gBAAgB,EAChB,cAAc,IAAI,uBAAuB,EACzC,QAAQ,EACR,YAAY,GACb,MAAM,SAAS,CAAC"}

package/src/tree/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Tree state management exports.
+ */
+
+export { createTreeState } from './createTreeState';
+export { TreeCollection, createTreeCollection } from './TreeCollection';
+export type {
+  TreeState,
+  TreeStateOptions,
+  TreeCollection as TreeCollectionInterface,
+  TreeNode,
+  TreeItemData,
+} from './types';