@proyecto-viviana/solid-stately 0.2.7 → 0.4.0

package/src/collections/createSelectionState.ts

@@ -3,8 +3,8 @@
  * Based on @react-stately/selection.
  */
 
-import { createSignal, createMemo, type Accessor } from 'solid-js';
-import { access, type MaybeAccessor } from '../utils';
+import { createSignal, createMemo, type Accessor } from "solid-js";
+import { access, type MaybeAccessor } from "../utils";
 import type {
   Collection,
   DisabledBehavior,
@@ -13,7 +13,7 @@ import type {
   Selection,
   SelectionBehavior,
   SelectionMode,
-} from './types';
+} from "./types";
 
 export interface SelectionStateProps {
   /** The selection mode. */
@@ -23,9 +23,9 @@ export interface SelectionStateProps {
   /** Whether empty selection is disallowed. */
   disallowEmptySelection?: boolean;
   /** Currently selected keys (controlled). */
-  selectedKeys?: 'all' | Iterable<Key>;
+  selectedKeys?: "all" | Iterable<Key>;
   /** Default selected keys (uncontrolled). */
-  defaultSelectedKeys?: 'all' | Iterable<Key>;
+  defaultSelectedKeys?: "all" | Iterable<Key>;
   /** Handler for selection changes. */
   onSelectionChange?: (keys: Selection) => void;
   /** Keys of disabled items. */
@@ -74,30 +74,47 @@ export interface SelectionState {
   /** Extend selection to a key (for shift-click). */
   extendSelection(toKey: Key, collection: Collection): void;
   /** Select a key based on interaction. */
-  select(key: Key, e?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean }, collection?: Collection): void;
+  select(key: Key, e?: SelectionPressEvent): void;
+}
+
+/**
+ * The press/pointer interaction consulted by {@link SelectionState.select}.
+ * Mirrors react-stately's `SelectionManager.select(e)`: only `pointerType` is
+ * read here (touch / virtual force toggle, since those devices have no modifier
+ * keys). Modifier keys (ctrl / meta / shift) are resolved one layer up in the
+ * aria-layer `onSelect` (solidaria `selectItem`), matching upstream's split
+ * between react-stately and react-aria. The modifier fields are accepted so a
+ * full press/pointer event is assignable, but they are not read here.
+ */
+export interface SelectionPressEvent {
+  pointerType?: "mouse" | "pen" | "touch" | "keyboard" | "virtual";
+  shiftKey?: boolean;
+  ctrlKey?: boolean;
+  metaKey?: boolean;
+  altKey?: boolean;
 }
 
 /**
  * Creates selection state for a collection.
  */
 export function createSelectionState(
-  props: MaybeAccessor<SelectionStateProps> = {}
+  props: MaybeAccessor<SelectionStateProps> = {},
 ): SelectionState {
   const getProps = () => access(props);
 
   // Selection behavior state
-  const [internalBehavior, setInternalBehavior] = createSignal<SelectionBehavior>('toggle');
+  const [internalBehavior, setInternalBehavior] = createSignal<SelectionBehavior>("toggle");
 
   // Internal selection state
   const [internalSelectedKeys, setInternalSelectedKeys] = createSignal<Selection>(
-    getInitialSelection(getProps().defaultSelectedKeys)
+    getInitialSelection(getProps().defaultSelectedKeys),
   );
 
   // Track anchor for range selection
   const [anchorKey, setAnchorKey] = createSignal<Key | null>(null);
 
   // Computed values
-  const selectionMode: Accessor<SelectionMode> = () => getProps().selectionMode ?? 'none';
+  const selectionMode: Accessor<SelectionMode> = () => getProps().selectionMode ?? "none";
 
   const selectionBehavior: Accessor<SelectionBehavior> = () => {
     return getProps().selectionBehavior ?? internalBehavior();
@@ -121,22 +138,22 @@ export function createSelectionState(
   });
 
   const disabledBehavior: Accessor<DisabledBehavior> = () => {
-    return getProps().disabledBehavior ?? 'all';
+    return getProps().disabledBehavior ?? "all";
   };
 
   const isEmpty: Accessor<boolean> = () => {
     const keys = selectedKeys();
-    return keys !== 'all' && keys.size === 0;
+    return keys !== "all" && keys.size === 0;
   };
 
   const isSelectAll: Accessor<boolean> = () => {
-    return selectedKeys() === 'all';
+    return selectedKeys() === "all";
   };
 
   // Methods
   const isSelected = (key: Key): boolean => {
     const keys = selectedKeys();
-    if (keys === 'all') return true;
+    if (keys === "all") return true;
     return keys.has(key);
   };
 
@@ -156,8 +173,8 @@ export function createSelectionState(
     // Uncontrolled mode
     const current = internalSelectedKeys();
     const isDifferent =
-      current === 'all' ||
-      newSelection === 'all' ||
+      current === "all" ||
+      newSelection === "all" ||
       current.size !== (newSelection as Set<Key>).size ||
       ![...current].every((k) => (newSelection as Set<Key>).has(k));
 
@@ -169,11 +186,11 @@ export function createSelectionState(
 
   const toggleSelection = (key: Key) => {
     if (isDisabled(key)) return;
-    if (selectionMode() === 'none') return;
+    if (selectionMode() === "none") return;
 
     const current = selectedKeys();
 
-    if (selectionMode() === 'single') {
+    if (selectionMode() === "single") {
       if (isSelected(key) && !disallowEmptySelection()) {
         updateSelection(new Set());
       } else {
@@ -183,7 +200,7 @@ export function createSelectionState(
     }
 
     // Multiple selection
-    if (current === 'all') {
+    if (current === "all") {
       // Can't toggle when all selected without collection
       return;
     }
@@ -203,7 +220,7 @@ export function createSelectionState(
 
   const replaceSelection = (key: Key) => {
     if (isDisabled(key)) return;
-    if (selectionMode() === 'none') return;
+    if (selectionMode() === "none") return;
 
     updateSelection(new Set([key]));
     setAnchorKey(key);
@@ -215,8 +232,8 @@ export function createSelectionState(
   };
 
   const selectAll = () => {
-    if (selectionMode() !== 'multiple') return;
-    updateSelection('all');
+    if (selectionMode() !== "multiple") return;
+    updateSelection("all");
   };
 
   const clearSelection = () => {
@@ -225,7 +242,7 @@ export function createSelectionState(
   };
 
   const toggleSelectAll = () => {
-    if (selectionMode() !== 'multiple') return;
+    if (selectionMode() !== "multiple") return;
 
     if (isSelectAll()) {
       clearSelection();
@@ -236,7 +253,7 @@ export function createSelectionState(
 
   const extendSelection = (toKey: Key, collection: Collection) => {
     if (isDisabled(toKey)) return;
-    if (selectionMode() !== 'multiple') {
+    if (selectionMode() !== "multiple") {
       replaceSelection(toKey);
       return;
     }
@@ -264,33 +281,30 @@ export function createSelectionState(
     updateSelection(new Set(rangeKeys));
   };
 
-  const select = (
-    key: Key,
-    e?: { shiftKey?: boolean; ctrlKey?: boolean; metaKey?: boolean },
-    collection?: Collection
-  ) => {
-    if (isDisabled(key)) return;
-    if (selectionMode() === 'none') return;
-
-    const mode = selectionMode();
-    const behavior = selectionBehavior();
-
-    if (mode === 'single') {
-      if (behavior === 'replace' || !isSelected(key)) {
+  const select = (key: Key, e?: SelectionPressEvent) => {
+    // Mirrors react-stately's SelectionManager.select: only pointerType +
+    // selectionBehavior are consulted here. Modifier-key handling (ctrl / meta
+    // ⇒ toggle, shift ⇒ extend) lives one layer up in solidaria's aria-layer
+    // `selectItem`, which is where the platform-aware isCtrlKeyPressed is
+    // available. The primitives self-guard disabled keys, so no guard is
+    // needed here (matching upstream).
+    if (selectionMode() === "none") return;
+
+    if (selectionMode() === "single") {
+      // Single mode ignores selectionBehavior. Re-selecting the current item
+      // deselects it when empty selection is allowed; otherwise it stays
+      // selected (replace).
+      if (isSelected(key) && !disallowEmptySelection()) {
+        toggleSelection(key);
+      } else {
         replaceSelection(key);
-      } else if (!disallowEmptySelection()) {
-        clearSelection();
       }
-      return;
-    }
-
-    // Multiple selection
-    if (e?.shiftKey && collection) {
-      extendSelection(key, collection);
-      return;
-    }
-
-    if (e?.ctrlKey || e?.metaKey || behavior === 'toggle') {
+    } else if (
+      selectionBehavior() === "toggle" ||
+      (e != null && (e.pointerType === "touch" || e.pointerType === "virtual"))
+    ) {
+      // touch / virtual (VoiceOver) have no modifier keys, so multi-select is
+      // only reachable by toggling.
       toggleSelection(key);
     } else {
       replaceSelection(key);
@@ -325,12 +339,12 @@ export function createSelectionState(
 }
 
 // Helper functions
-function getInitialSelection(defaultKeys?: 'all' | Iterable<Key>): Selection {
+function getInitialSelection(defaultKeys?: "all" | Iterable<Key>): Selection {
   if (defaultKeys === undefined) return new Set();
   return normalizeSelection(defaultKeys);
 }
 
-function normalizeSelection(keys: 'all' | Iterable<Key>): Selection {
-  if (keys === 'all') return 'all';
+function normalizeSelection(keys: "all" | Iterable<Key>): Selection {
+  if (keys === "all") return "all";
   return new Set(keys);
 }

package/src/collections/getChildNodes.ts

@@ -0,0 +1,98 @@
+/**
+ * Helpers for traversing collection nodes and comparing their document order.
+ *
+ * Based on @react-stately/collections.
+ */
+
+import type { Collection, CollectionNode } from "./types";
+
+export function getChildNodes<T>(
+  node: CollectionNode<T>,
+  collection: Collection<T>,
+): Iterable<CollectionNode<T>> {
+  // New API: call collection.getChildren with the node key.
+  if (typeof collection.getChildren === "function") {
+    return collection.getChildren(node.key);
+  }
+
+  // Old API: access childNodes directly.
+  return node.childNodes;
+}
+
+export function getFirstItem<T>(iterable: Iterable<T>): T | undefined {
+  return getNthItem(iterable, 0);
+}
+
+export function getNthItem<T>(iterable: Iterable<T>, index: number): T | undefined {
+  if (index < 0) {
+    return undefined;
+  }
+
+  let i = 0;
+  for (const item of iterable) {
+    if (i === index) {
+      return item;
+    }
+
+    i++;
+  }
+}
+
+export function getLastItem<T>(iterable: Iterable<T>): T | undefined {
+  let lastItem: T | undefined = undefined;
+  for (const value of iterable) {
+    lastItem = value;
+  }
+
+  return lastItem;
+}
+
+export function compareNodeOrder<T>(
+  collection: Collection<T>,
+  a: CollectionNode<T>,
+  b: CollectionNode<T>,
+): number {
+  // If the two nodes have the same parent, compare their indices.
+  if (a.parentKey === b.parentKey) {
+    return a.index - b.index;
+  }
+
+  // Otherwise, collect all of the ancestors from each node, and find the first one that doesn't match starting from the root.
+  // Include the base nodes in case we are comparing nodes of different levels so that we can compare the higher node to the lower level node's
+  // ancestor of the same level
+  const aAncestors = [...getAncestors(collection, a), a];
+  const bAncestors = [...getAncestors(collection, b), b];
+  const firstNonMatchingAncestor = aAncestors
+    .slice(0, bAncestors.length)
+    .findIndex((a, i) => a !== bAncestors[i]);
+  if (firstNonMatchingAncestor !== -1) {
+    // Compare the indices of two children within the common ancestor.
+    a = aAncestors[firstNonMatchingAncestor];
+    b = bAncestors[firstNonMatchingAncestor];
+    return a.index - b.index;
+  }
+
+  // If there isn't a non matching ancestor, we might be in a case where one of the nodes is the ancestor of the other.
+  if (aAncestors.findIndex((node) => node === b) >= 0) {
+    return 1;
+  } else if (bAncestors.findIndex((node) => node === a) >= 0) {
+    return -1;
+  }
+
+  // 🤷
+  return -1;
+}
+
+function getAncestors<T>(collection: Collection<T>, node: CollectionNode<T>): CollectionNode<T>[] {
+  const parents: CollectionNode<T>[] = [];
+
+  let currNode: CollectionNode<T> | null = node;
+  while (currNode?.parentKey != null) {
+    currNode = collection.getItem(currNode.parentKey);
+    if (currNode) {
+      parents.unshift(currNode);
+    }
+  }
+
+  return parents;
+}

package/src/collections/index.d.ts

@@ -1,6 +1,38 @@
-export type { Key, SelectionMode, SelectionBehavior, Selection, FocusStrategy, DisabledBehavior, CollectionNode, Collection, ItemProps, SectionProps, CollectionBase, SingleSelection, MultipleSelection, } from './types';
-export { ListCollection, createListCollection } from './ListCollection';
-export { createSelectionState, type SelectionStateProps, type SelectionState, } from './createSelectionState';
-export { createListState, createSingleSelectListState, type ListStateProps, type ListState, type SingleSelectListStateProps, type SingleSelectListState, } from './createListState';
-export { createMenuState, createMenuTriggerState, type MenuStateProps, type MenuState, type MenuTriggerStateProps, type MenuTriggerState, } from './createMenuState';
-//# sourceMappingURL=index.d.ts.map
+export type {
+  Key,
+  SelectionMode,
+  SelectionBehavior,
+  Selection,
+  FocusStrategy,
+  DisabledBehavior,
+  CollectionNode,
+  Collection,
+  ItemProps,
+  SectionProps,
+  CollectionBase,
+  SingleSelection,
+  MultipleSelection,
+} from "./types";
+export { ListCollection, createListCollection } from "./ListCollection";
+export {
+  createSelectionState,
+  type SelectionStateProps,
+  type SelectionState,
+} from "./createSelectionState";
+export {
+  createListState,
+  createSingleSelectListState,
+  type ListStateProps,
+  type ListState,
+  type SingleSelectListStateProps,
+  type SingleSelectListState,
+} from "./createListState";
+export {
+  createMenuState,
+  createMenuTriggerState,
+  type MenuStateProps,
+  type MenuState,
+  type MenuTriggerStateProps,
+  type MenuTriggerState,
+} from "./createMenuState";
+//# sourceMappingURL=index.d.ts.map

package/src/collections/index.ts

@@ -1,4 +1,3 @@
-// Types
 export type {
   Key,
   SelectionMode,
@@ -13,19 +12,25 @@ export type {
   CollectionBase,
   SingleSelection,
   MultipleSelection,
-} from './types';
+} from "./types";
 
-// List Collection
-export { ListCollection, createListCollection } from './ListCollection';
+export { ListCollection, createListCollection } from "./ListCollection";
+
+export {
+  getChildNodes,
+  getFirstItem,
+  getNthItem,
+  getLastItem,
+  compareNodeOrder,
+} from "./getChildNodes";
 
-// Selection State
 export {
   createSelectionState,
   type SelectionStateProps,
   type SelectionState,
-} from './createSelectionState';
+  type SelectionPressEvent,
+} from "./createSelectionState";
 
-// List State
 export {
   createListState,
   createSingleSelectListState,
@@ -33,9 +38,8 @@ export {
   type ListState,
   type SingleSelectListStateProps,
   type SingleSelectListState,
-} from './createListState';
+} from "./createListState";
 
-// Menu State
 export {
   createMenuState,
   createMenuTriggerState,
@@ -43,4 +47,4 @@ export {
   type MenuState,
   type MenuTriggerStateProps,
   type MenuTriggerState,
-} from './createMenuState';
+} from "./createMenuState";