@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/data/createTreeData.ts

@@ -5,10 +5,10 @@
  * convenience methods to update the data over time.
  */
 
-import { createSignal } from 'solid-js';
+import { createSignal } from "solid-js";
 
 export type Key = string | number;
-export type Selection = 'all' | Set<Key>;
+export type Selection = "all" | Set<Key>;
 
 export interface TreeNode<T> {
   /** A unique key for the tree node. */
@@ -25,7 +25,7 @@ export interface TreeOptions<T> {
   /** Initial items in the tree. */
   initialItems?: T[];
   /** The keys for the initially selected items. */
-  initialSelectedKeys?: 'all' | Iterable<Key>;
+  initialSelectedKeys?: "all" | Iterable<Key>;
   /** A function that returns a unique key for an item object. */
   getKey?: (item: T) => Key;
   /** A function that returns the children of an item object. */
@@ -57,6 +57,10 @@ export interface TreeData<T> {
   removeSelectedItems(): void;
   /** Moves an item to a new parent. */
   move(key: Key, toParentKey: Key | null, index: number): void;
+  /** Moves items before a given key. */
+  moveBefore(key: Key, keys: Iterable<Key>): void;
+  /** Moves items after a given key. */
+  moveAfter(key: Key, keys: Iterable<Key>): void;
   /** Updates an item in the tree. */
   update(key: Key, newValue: T): void;
 }
@@ -71,11 +75,20 @@ interface TreeDataState<T> {
  * convenience methods to update the data over time.
  */
 export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
+  const defaultGetKey = (item: T): Key => {
+    const candidate = item as { id?: Key; key?: Key };
+    return candidate.id ?? candidate.key ?? String(item);
+  };
+  const defaultGetChildren = (item: T): T[] => {
+    const candidate = item as { children?: T[] };
+    return candidate.children ?? [];
+  };
+
   const {
     initialItems = [],
     initialSelectedKeys,
-    getKey = (item: any) => item.id ?? item.key,
-    getChildren = (item: any) => item.children ?? [],
+    getKey = defaultGetKey,
+    getChildren = defaultGetChildren,
   } = options;
 
   // Build initial tree
@@ -83,7 +96,7 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
 
   const [treeState, setTreeState] = createSignal<TreeDataState<T>>(initialTree);
   const [selectedKeys, setSelectedKeys] = createSignal<Selection>(
-    initialSelectedKeys === 'all' ? 'all' : new Set(initialSelectedKeys || [])
+    initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys || []),
   );
 
   function updateTree(
@@ -103,12 +116,17 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
         // Delete node
         deleteNode(node, newMap);
         if (node.parentKey != null) {
-          return updateTree(items, node.parentKey, parent => ({
-            ...parent,
-            children: parent.children!.filter(c => c.key !== key),
-          }), newMap);
+          return updateTree(
+            items,
+            node.parentKey,
+            (parent) => ({
+              ...parent,
+              children: parent.children!.filter((c) => c.key !== key),
+            }),
+            newMap,
+          );
         }
-        return { items: items.filter(i => i.key !== key), nodeMap: newMap };
+        return { items: items.filter((i) => i.key !== key), nodeMap: newMap };
       }
 
       newMap.set(key!, updated);
@@ -119,21 +137,30 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
       }
 
       if (node.parentKey != null) {
-        return updateTree(items, node.parentKey, parent => ({
-          ...parent,
-          children: parent.children!.map(c => c.key === key ? updated : c),
-        }), newMap);
+        return updateTree(
+          items,
+          node.parentKey,
+          (parent) => ({
+            ...parent,
+            children: parent.children!.map((c) => (c.key === key ? updated : c)),
+          }),
+          newMap,
+        );
       }
 
-      return { items: items.map(i => i.key === key ? updated : i), nodeMap: newMap };
+      return { items: items.map((i) => (i.key === key ? updated : i)), nodeMap: newMap };
     }
 
     return { items, nodeMap: newMap };
   }
 
   return {
-    get items() { return treeState().items; },
-    get selectedKeys() { return selectedKeys(); },
+    get items() {
+      return treeState().items;
+    },
+    get selectedKeys() {
+      return selectedKeys();
+    },
 
     setSelectedKeys(keys: Selection) {
       setSelectedKeys(keys);
@@ -144,10 +171,10 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
     },
 
     insert(parentKey: Key | null, index: number, ...values: T[]) {
-      setTreeState(state => {
+      setTreeState((state) => {
         const { items, nodeMap } = state;
         const newMap = new Map(nodeMap);
-        const newNodes = values.map(v => {
+        const newNodes = values.map((v) => {
           const tree = buildTree([v], newMap, parentKey, getKey, getChildren);
           return tree.items[0];
         });
@@ -159,30 +186,35 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
           };
         }
 
-        return updateTree(items, parentKey, parent => ({
-          ...parent,
-          children: [
-            ...(parent.children || []).slice(0, index),
-            ...newNodes,
-            ...(parent.children || []).slice(index),
-          ],
-        }), newMap);
+        return updateTree(
+          items,
+          parentKey,
+          (parent) => ({
+            ...parent,
+            children: [
+              ...(parent.children || []).slice(0, index),
+              ...newNodes,
+              ...(parent.children || []).slice(index),
+            ],
+          }),
+          newMap,
+        );
       });
     },
 
     insertBefore(key: Key, ...values: T[]) {
-      setTreeState(state => {
+      setTreeState((state) => {
         const { items, nodeMap } = state;
         const node = nodeMap.get(key);
         if (!node) return state;
 
         const parent = node.parentKey != null ? nodeMap.get(node.parentKey) : null;
         const siblings = parent?.children ?? items;
-        const index = siblings.findIndex(n => n.key === key);
+        const index = siblings.findIndex((n) => n.key === key);
         if (index === -1) return state;
 
         const newMap = new Map(nodeMap);
-        const newNodes = values.map(v => {
+        const newNodes = values.map((v) => {
           const tree = buildTree([v], newMap, node.parentKey, getKey, getChildren);
           return tree.items[0];
         });
@@ -194,30 +226,31 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
           };
         }
 
-        return updateTree(items, node.parentKey, p => ({
-          ...p,
-          children: [
-            ...p.children!.slice(0, index),
-            ...newNodes,
-            ...p.children!.slice(index),
-          ],
-        }), newMap);
+        return updateTree(
+          items,
+          node.parentKey,
+          (p) => ({
+            ...p,
+            children: [...p.children!.slice(0, index), ...newNodes, ...p.children!.slice(index)],
+          }),
+          newMap,
+        );
       });
     },
 
     insertAfter(key: Key, ...values: T[]) {
-      setTreeState(state => {
+      setTreeState((state) => {
         const { items, nodeMap } = state;
         const node = nodeMap.get(key);
         if (!node) return state;
 
         const parent = node.parentKey != null ? nodeMap.get(node.parentKey) : null;
         const siblings = parent?.children ?? items;
-        const index = siblings.findIndex(n => n.key === key);
+        const index = siblings.findIndex((n) => n.key === key);
         if (index === -1) return state;
 
         const newMap = new Map(nodeMap);
-        const newNodes = values.map(v => {
+        const newNodes = values.map((v) => {
           const tree = buildTree([v], newMap, node.parentKey, getKey, getChildren);
           return tree.items[0];
         });
@@ -229,22 +262,27 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
           };
         }
 
-        return updateTree(items, node.parentKey, p => ({
-          ...p,
-          children: [
-            ...p.children!.slice(0, index + 1),
-            ...newNodes,
-            ...p.children!.slice(index + 1),
-          ],
-        }), newMap);
+        return updateTree(
+          items,
+          node.parentKey,
+          (p) => ({
+            ...p,
+            children: [
+              ...p.children!.slice(0, index + 1),
+              ...newNodes,
+              ...p.children!.slice(index + 1),
+            ],
+          }),
+          newMap,
+        );
       });
     },
 
     append(parentKey: Key | null, ...values: T[]) {
-      setTreeState(state => {
+      setTreeState((state) => {
         const { items, nodeMap } = state;
         const newMap = new Map(nodeMap);
-        const newNodes = values.map(v => {
+        const newNodes = values.map((v) => {
           const tree = buildTree([v], newMap, parentKey, getKey, getChildren);
           return tree.items[0];
         });
@@ -253,18 +291,23 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
           return { items: [...items, ...newNodes], nodeMap: newMap };
         }
 
-        return updateTree(items, parentKey, parent => ({
-          ...parent,
-          children: [...(parent.children || []), ...newNodes],
-        }), newMap);
+        return updateTree(
+          items,
+          parentKey,
+          (parent) => ({
+            ...parent,
+            children: [...(parent.children || []), ...newNodes],
+          }),
+          newMap,
+        );
       });
     },
 
     prepend(parentKey: Key | null, ...values: T[]) {
-      setTreeState(state => {
+      setTreeState((state) => {
         const { items, nodeMap } = state;
         const newMap = new Map(nodeMap);
-        const newNodes = values.map(v => {
+        const newNodes = values.map((v) => {
           const tree = buildTree([v], newMap, parentKey, getKey, getChildren);
           return tree.items[0];
         });
@@ -273,15 +316,20 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
           return { items: [...newNodes, ...items], nodeMap: newMap };
         }
 
-        return updateTree(items, parentKey, parent => ({
-          ...parent,
-          children: [...newNodes, ...(parent.children || [])],
-        }), newMap);
+        return updateTree(
+          items,
+          parentKey,
+          (parent) => ({
+            ...parent,
+            children: [...newNodes, ...(parent.children || [])],
+          }),
+          newMap,
+        );
       });
     },
 
     remove(...keys: Key[]) {
-      setTreeState(state => {
+      setTreeState((state) => {
         let { items, nodeMap } = state;
         let newMap = new Map(nodeMap);
         let newItems = items;
@@ -295,8 +343,8 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
         return { items: newItems, nodeMap: newMap };
       });
 
-      setSelectedKeys(sel => {
-        if (sel === 'all') return sel;
+      setSelectedKeys((sel) => {
+        if (sel === "all") return sel;
         const newSel = new Set(sel);
         for (const key of keys) {
           newSel.delete(key);
@@ -307,14 +355,14 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
 
     removeSelectedItems() {
       const sel = selectedKeys();
-      if (sel === 'all') {
+      if (sel === "all") {
         setTreeState({ items: [], nodeMap: new Map() });
         setSelectedKeys(new Set<Key>());
         return;
       }
 
       const keysToRemove = [...sel];
-      setTreeState(state => {
+      setTreeState((state) => {
         let { items, nodeMap } = state;
         let newMap = new Map(nodeMap);
         let newItems = items;
@@ -329,11 +377,20 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
     },
 
     move(key: Key, toParentKey: Key | null, index: number) {
-      setTreeState(state => {
+      setTreeState((state) => {
         const { items, nodeMap } = state;
         const node = nodeMap.get(key);
         if (!node) return state;
 
+        // Cyclical move validation: prevent moving a node into its own subtree
+        if (toParentKey != null) {
+          let parent: TreeNode<T> | undefined = nodeMap.get(toParentKey);
+          while (parent) {
+            if (parent.key === key) return state;
+            parent = parent.parentKey != null ? nodeMap.get(parent.parentKey) : undefined;
+          }
+        }
+
         // Remove the node
         let newMap = new Map(nodeMap);
         const removeResult = updateTree(items, key, () => null, newMap);
@@ -351,33 +408,76 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
           };
         }
 
-        return updateTree(newItems, toParentKey, parent => ({
-          ...parent,
-          children: [
-            ...(parent.children || []).slice(0, index),
-            movedNode,
-            ...(parent.children || []).slice(index),
-          ],
-        }), newMap);
+        return updateTree(
+          newItems,
+          toParentKey,
+          (parent) => ({
+            ...parent,
+            children: [
+              ...(parent.children || []).slice(0, index),
+              movedNode,
+              ...(parent.children || []).slice(index),
+            ],
+          }),
+          newMap,
+        );
+      });
+    },
+
+    moveBefore(key: Key, keys: Iterable<Key>) {
+      setTreeState((state) => {
+        const { items, nodeMap } = state;
+        const node = nodeMap.get(key);
+        if (!node) return state;
+
+        const toParentKey = node.parentKey ?? null;
+        let parent: TreeNode<T> | null = null;
+        if (toParentKey != null) {
+          parent = nodeMap.get(toParentKey) ?? null;
+        }
+        const toIndex = parent?.children ? parent.children.indexOf(node) : items.indexOf(node);
+        return moveItems(state, keys, parent, toIndex, updateTree, addNode);
+      });
+    },
+
+    moveAfter(key: Key, keys: Iterable<Key>) {
+      setTreeState((state) => {
+        const { items, nodeMap } = state;
+        const node = nodeMap.get(key);
+        if (!node) return state;
+
+        const toParentKey = node.parentKey ?? null;
+        let parent: TreeNode<T> | null = null;
+        if (toParentKey != null) {
+          parent = nodeMap.get(toParentKey) ?? null;
+        }
+        let toIndex = parent?.children ? parent.children.indexOf(node) : items.indexOf(node);
+        toIndex++;
+        return moveItems(state, keys, parent, toIndex, updateTree, addNode);
       });
     },
 
     update(key: Key, newValue: T) {
-      setTreeState(state => {
+      setTreeState((state) => {
         const { items, nodeMap } = state;
         const newMap = new Map(nodeMap);
 
-        return updateTree(items, key, oldNode => {
-          const node: TreeNode<T> = {
-            key: oldNode.key,
-            parentKey: oldNode.parentKey,
-            value: newValue,
-            children: null,
-          };
-          const tree = buildTree(getChildren(newValue), newMap, node.key, getKey, getChildren);
-          node.children = tree.items;
-          return node;
-        }, newMap);
+        return updateTree(
+          items,
+          key,
+          (oldNode) => {
+            const node: TreeNode<T> = {
+              key: oldNode.key,
+              parentKey: oldNode.parentKey,
+              value: newValue,
+              children: null,
+            };
+            const tree = buildTree(getChildren(newValue), newMap, node.key, getKey, getChildren);
+            node.children = tree.items;
+            return node;
+          },
+          newMap,
+        );
       });
     },
   };
@@ -396,9 +496,10 @@ function buildTree<T>(
     const key = getKey(item);
     const children = getChildren(item);
 
-    const childTree = children.length > 0
-      ? buildTree(children, nodeMap, key, getKey, getChildren)
-      : { items: [], nodeMap };
+    const childTree =
+      children.length > 0
+        ? buildTree(children, nodeMap, key, getKey, getChildren)
+        : { items: [], nodeMap };
 
     const node: TreeNode<T> = {
       key,
@@ -431,3 +532,115 @@ function deleteNode<T>(node: TreeNode<T>, map: Map<Key, TreeNode<T>>): void {
     }
   }
 }
+
+function moveItems<T>(
+  state: TreeDataState<T>,
+  keys: Iterable<Key>,
+  toParent: TreeNode<T> | null,
+  toIndex: number,
+  updateTreeFn: (
+    items: TreeNode<T>[],
+    key: Key | null,
+    update: (node: TreeNode<T>) => TreeNode<T> | null,
+    originalMap: Map<Key, TreeNode<T>>,
+  ) => TreeDataState<T>,
+  addNodeFn: (node: TreeNode<T>, map: Map<Key, TreeNode<T>>) => void,
+): TreeDataState<T> {
+  const { items, nodeMap } = state;
+
+  // Cyclical move validation: prevent moving a node into its own subtree
+  const removeKeys = new Set(keys);
+  let ancestor: TreeNode<T> | null = toParent;
+  while (ancestor != null) {
+    if (removeKeys.has(ancestor.key)) {
+      throw new Error("Cannot move an item to be a child of itself.");
+    }
+    ancestor = ancestor.parentKey != null ? (nodeMap.get(ancestor.parentKey) ?? null) : null;
+  }
+
+  const originalToIndex = toIndex;
+  const keyArray = [...removeKeys];
+
+  // Depth-first traversal to determine in-order positions and remove items
+  const inOrderKeys = new Map<Key, number>();
+  const removedItems: TreeNode<T>[] = [];
+  let newItems = items;
+  let newMap = nodeMap;
+  let i = 0;
+
+  function traversal(
+    node: { children?: TreeNode<T>[] | null },
+    callbacks: {
+      inorder?: (child: TreeNode<T>) => void;
+      postorder?: (child: TreeNode<T>) => void;
+    },
+  ) {
+    callbacks.inorder?.(node as TreeNode<T>);
+    if (node.children) {
+      for (const child of node.children) {
+        traversal(child, callbacks);
+        callbacks.postorder?.(child);
+      }
+    }
+  }
+
+  traversal(
+    { children: items },
+    {
+      inorder(child) {
+        if (keyArray.includes(child.key)) {
+          inOrderKeys.set(child.key, i++);
+        }
+      },
+      postorder(child) {
+        if (keyArray.includes(child.key)) {
+          removedItems.push({ ...newMap.get(child.key)!, parentKey: toParent?.key ?? null });
+          const result = updateTreeFn(newItems, child.key, () => null, newMap);
+          newItems = result.items;
+          newMap = result.nodeMap;
+        }
+        // Decrement index if the removed child is in the target parent and before the target index
+        if (
+          (child.parentKey === toParent || child.parentKey === toParent?.key) &&
+          keyArray.includes(child.key) &&
+          (toParent?.children ? toParent.children.indexOf(child) : items.indexOf(child)) <
+            originalToIndex
+        ) {
+          toIndex--;
+        }
+      },
+    },
+  );
+
+  const inOrderItems = removedItems.sort((a, b) =>
+    inOrderKeys.get(a.key)! > inOrderKeys.get(b.key)! ? 1 : -1,
+  );
+
+  // If parentKey is null, insert into the root.
+  if (!toParent || toParent.key == null) {
+    inOrderItems.forEach((movedNode) => {
+      addNodeFn(movedNode, newMap);
+    });
+    return {
+      items: [...newItems.slice(0, toIndex), ...inOrderItems, ...newItems.slice(toIndex)],
+      nodeMap: newMap,
+    };
+  }
+
+  // Otherwise, update the parent node and its ancestors.
+  return updateTreeFn(
+    newItems,
+    toParent.key,
+    (parentNode) => ({
+      key: parentNode.key,
+      parentKey: parentNode.parentKey,
+      value: parentNode.value,
+      children: [
+        ...parentNode.children!.slice(0, toIndex),
+        ...inOrderItems,
+        ...parentNode.children!.slice(toIndex),
+      ],
+    }),
+    newMap,
+  );
+}

package/src/data/index.ts

@@ -4,14 +4,14 @@ export {
   type ListData,
   type Key as ListDataKey,
   type Selection as ListDataSelection,
-} from './createListData';
+} from "./createListData";
 
 export {
   createTreeData,
   type TreeOptions,
   type TreeData,
   type TreeNode as TreeDataNode,
-} from './createTreeData';
+} from "./createTreeData";
 
 export {
   createAsyncList,
@@ -22,4 +22,4 @@ export {
   type AsyncListStateUpdate,
   type SortDescriptor,
   type LoadingState,
-} from './createAsyncList';
+} from "./createAsyncList";

package/src/datepicker/index.ts

@@ -9,6 +9,7 @@ export {
   createDateFieldState,
   createTimeFieldState,
   createRangeCalendarState,
+  createDatePickerState,
   type DateFieldStateProps as DateFieldStateOptions,
   type DateFieldState,
   type DateSegment,
@@ -19,18 +20,13 @@ export {
   type TimeSegmentType,
   type RangeCalendarStateProps as DateRangePickerStateOptions,
   type RangeCalendarState as DateRangePickerState,
-} from '../calendar';
-
-export {
-  createOverlayTriggerState,
-  type OverlayTriggerProps as DatePickerStateOptions,
-  type OverlayTriggerState as DatePickerState,
-} from '../overlays';
+  type DatePickerState,
+  type DatePickerStateOptions,
+} from "../calendar";
 
 export {
   createDateFieldState as useDateFieldState,
   createTimeFieldState as useTimeFieldState,
   createRangeCalendarState as useDateRangePickerState,
-} from '../calendar';
-
-export { createOverlayTriggerState as useDatePickerState } from '../overlays';
+  createDatePickerState as useDatePickerState,
+} from "../calendar";