@proyecto-viviana/solid-stately 0.5.1 → 0.6.0-rc.0

package/src/data/createTreeData.ts

@@ -1,11 +1,27 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/data/useTreeData.ts
+
 /**
  * createTreeData - SolidJS port of React Spectrum's useTreeData
  *
  * Manages state for an immutable tree data structure, and provides
  * convenience methods to update the data over time.
+ *
+ * Ported from packages/react-stately/src/data/useTreeData.ts.
  */
 
-import { createSignal } from "solid-js";
+import { createInternalSignal } from "../utils";
 
 export type Key = string | number;
 export type Selection = "all" | Set<Key>;
@@ -94,8 +110,8 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
   // Build initial tree
   const initialTree = buildTree(initialItems, new Map(), null, getKey, getChildren);
 
-  const [treeState, setTreeState] = createSignal<TreeDataState<T>>(initialTree);
-  const [selectedKeys, setSelectedKeys] = createSignal<Selection>(
+  const [treeState, setTreeState] = createInternalSignal<TreeDataState<T>>(initialTree);
+  const [selectedKeys, setSelectedKeys] = createInternalSignal<Selection>(
     initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys || []),
   );
 

package/src/disclosure/createDisclosureState.ts

@@ -1,10 +1,26 @@
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/disclosure/useDisclosureGroupState.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/disclosure/useDisclosureState.ts
+
 /**
  * Disclosure state management for SolidJS
  * Based on @react-stately/disclosure useDisclosureState and useDisclosureGroupState
  */
 
-import { createSignal, createEffect, createMemo, type Accessor } from "solid-js";
-import { access, type MaybeAccessor } from "../utils";
+import { createEffect, createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { access, createInternalSignal, readNow, type MaybeAccessor } from "../utils";
 
 export interface DisclosureStateProps {
   /** Whether the disclosure is expanded (controlled). */
@@ -37,7 +53,7 @@ export function createDisclosureState(
 ): DisclosureState {
   const propsAccessor = () => access(props);
 
-  const [internalExpanded, setInternalExpanded] = createSignal(
+  const [internalExpanded, setInternalExpanded] = createInternalSignal(
     propsAccessor().defaultExpanded ?? false,
   );
 
@@ -106,7 +122,7 @@ export function createDisclosureGroupState(
 ): DisclosureGroupState {
   const propsAccessor = () => access(props);
 
-  const [internalKeys, setInternalKeys] = createSignal<Set<Key>>(
+  const [internalKeys, setInternalKeys] = createInternalSignal<Set<Key>>(
     new Set(propsAccessor().defaultExpandedKeys ?? []),
   );
 
@@ -124,26 +140,31 @@ export function createDisclosureGroupState(
   };
 
   // Ensure only one item is expanded if allowsMultipleExpanded is false.
-  createEffect(() => {
-    const p = propsAccessor();
-    const allowsMultiple = p.allowsMultipleExpanded ?? false;
-    const keys = expandedKeys();
-
-    if (!allowsMultiple && keys.size > 1) {
-      // Use queueMicrotask to defer the update and avoid infinite effect loop
-      const firstKey = keys.values().next().value;
-      if (firstKey != null) {
-        queueMicrotask(() => {
-          setExpandedKeys(new Set([firstKey]));
-        });
+  createEffect(
+    () => {
+      const p = propsAccessor();
+      return {
+        allowsMultiple: p.allowsMultipleExpanded ?? false,
+        keys: expandedKeys(),
+      };
+    },
+    ({ allowsMultiple, keys }) => {
+      if (!allowsMultiple && keys.size > 1) {
+        // Defer the update to avoid an infinite effect loop
+        const firstKey = keys.values().next().value;
+        if (firstKey != null) {
+          queueMicrotask(() => {
+            setExpandedKeys(new Set([firstKey]));
+          });
+        }
       }
-    }
-  });
+    },
+  );
 
   const toggleKey = (key: Key) => {
     const p = propsAccessor();
     const allowsMultiple = p.allowsMultipleExpanded ?? false;
-    const currentKeys = expandedKeys();
+    const currentKeys = p.expandedKeys !== undefined ? expandedKeys() : readNow(internalKeys);
 
     let newKeys: Set<Key>;
     if (allowsMultiple) {

package/src/dnd/createDragState.ts

@@ -1,10 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/dnd/useDrag.ts
+
 /**
  * Drag state management for solid-stately.
  *
  * Provides reactive state for drag operations.
+ *
+ * Ported from packages/react-aria/src/dnd/useDrag.ts.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, readNow } from "../utils";
 import type {
   DragItem,
   DragStartEvent,
@@ -65,7 +83,7 @@ export interface DragState {
 export function createDragState(props: Accessor<DragStateOptions>): DragState {
   const getProps = createMemo(() => props());
 
-  const [isDragging, setIsDragging] = createSignal(false);
+  const [isDragging, setIsDragging] = createInternalSignal(false);
 
   const startDrag = (x: number, y: number) => {
     const p = getProps();
@@ -84,7 +102,7 @@ export function createDragState(props: Accessor<DragStateOptions>): DragState {
 
   const moveDrag = (x: number, y: number) => {
     const p = getProps();
-    if (!isDragging() || p.isDisabled) return;
+    if (!readNow(isDragging) || p.isDisabled) return;
 
     if (typeof p.onDragMove === "function") {
       p.onDragMove({
@@ -97,7 +115,7 @@ export function createDragState(props: Accessor<DragStateOptions>): DragState {
 
   const endDrag = (x: number, y: number, dropOperation: DropOperation) => {
     const p = getProps();
-    if (!isDragging()) return;
+    if (!readNow(isDragging)) return;
 
     setIsDragging(false);
 

package/src/dnd/createDraggableCollectionState.ts

@@ -1,10 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/dnd/useDraggableCollectionState.ts
+
 /**
  * Draggable collection state management for solid-stately.
  *
  * Provides reactive state for dragging items from a collection.
+ *
+ * Ported from packages/react-stately/src/dnd/useDraggableCollectionState.ts.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, readNow } from "../utils";
 import type {
   DragItem,
   DraggableCollectionStartEvent,
@@ -14,9 +32,20 @@ import type {
   DragPreviewRenderer,
 } from "./types";
 
+type DragKey = string | number;
+
+export interface DraggableCollectionNode {
+  parentKey?: DragKey | null;
+}
+
+export interface DraggableCollectionLike {
+  getItem(key: DragKey): DraggableCollectionNode | null | undefined;
+  getKeys?(): Iterable<DragKey>;
+}
+
 export interface DraggableCollectionStateOptions<T = object> {
   /** A function that returns the items being dragged. */
-  getItems: (keys: Set<string | number>) => DragItem[];
+  getItems: (keys: Set<DragKey>) => DragItem[];
   /** Function that returns the allowed drop operations. */
   getAllowedDropOperations?: () => DropOperation[];
   /** Handler that is called when a drag operation is started. */
@@ -29,17 +58,23 @@ export interface DraggableCollectionStateOptions<T = object> {
   isDisabled?: boolean;
   /** Preview renderer function ref. */
   preview?: { current: DragPreviewRenderer | null };
+  /** Collection used to drop selected children whose ancestors are also dragging. */
+  collection?: DraggableCollectionLike;
+  /** Currently selected keys. `"all"` drags every collection key. */
+  selectedKeys?: "all" | Iterable<DragKey>;
+  /** Returns whether `key` is selected. */
+  isSelected?: (key: DragKey) => boolean;
 }
 
 export interface DraggableCollectionState {
   /** Whether items are currently being dragged. */
   readonly isDragging: boolean;
   /** The keys of the items being dragged. */
-  readonly draggingKeys: Set<string | number>;
+  readonly draggingKeys: Set<DragKey>;
   /** Whether dragging is disabled. */
   readonly isDisabled: boolean;
   /** Start a drag operation with the given keys. */
-  startDrag(keys: Set<string | number>, x: number, y: number): void;
+  startDrag(keys: Set<DragKey>, x: number, y: number): void;
   /** Update drag position. */
   moveDrag(x: number, y: number): void;
   /** End a drag operation. */
@@ -47,11 +82,87 @@ export interface DraggableCollectionState {
   /** Cancel a drag operation. */
   cancelDrag(): void;
   /** Get the items being dragged for the given keys. */
-  getItems(keys: Set<string | number>): DragItem[];
+  getItems(keys: Set<DragKey>): DragItem[];
   /** Get allowed drop operations. */
   getAllowedDropOperations(): DropOperation[];
   /** Preview renderer. */
   readonly preview: { current: DragPreviewRenderer | null } | undefined;
+  /**
+   * Keys that will be dragged with `key`. Mirrors RAC
+   * `useDraggableCollectionState.getKeys`: the clicked item, plus every other
+   * selected item that is not a descendant of another selected item.
+   */
+  getKeysForDrag(key: DragKey): Set<DragKey>;
+  /** Returns whether `key` is selected. */
+  isSelected(key: DragKey): boolean;
+}
+
+function selectedKeySet(
+  selectedKeys: "all" | Iterable<DragKey> | undefined,
+  collection: DraggableCollectionLike | undefined,
+): Set<DragKey> | "all" {
+  if (selectedKeys === "all") {
+    if (!collection?.getKeys) {
+      return "all";
+    }
+    return new Set(collection.getKeys());
+  }
+  return new Set(selectedKeys ?? []);
+}
+
+/**
+ * RAC `useDraggableCollectionState.ts` `getKeys`. The clicked item always
+ * drags. If it is selected, every selected item that is not a child of another
+ * selected item is included.
+ */
+export function getKeysForDrag(
+  key: DragKey,
+  options: {
+    collection?: DraggableCollectionLike;
+    selectedKeys?: "all" | Iterable<DragKey>;
+    isSelected?: (key: DragKey) => boolean;
+  },
+): Set<DragKey> {
+  const selected = selectedKeySet(options.selectedKeys, options.collection);
+  const isSelected = options.isSelected?.(key) ?? (selected === "all" ? true : selected.has(key));
+  if (!isSelected) {
+    return new Set([key]);
+  }
+
+  const keys = new Set<DragKey>();
+  const selectedKeys = selected === "all" ? options.collection?.getKeys?.() : selected;
+  if (!selectedKeys) {
+    keys.add(key);
+    return keys;
+  }
+
+  for (const currentKey of selectedKeys) {
+    const node = options.collection?.getItem(currentKey);
+    if (!node) {
+      keys.add(currentKey);
+      continue;
+    }
+    let isChild = false;
+    let parentKey = node.parentKey;
+    while (parentKey != null) {
+      const parentSelected =
+        options.isSelected?.(parentKey) ?? (selected === "all" ? true : selected.has(parentKey));
+      if (parentSelected) {
+        isChild = true;
+        break;
+      }
+      const parentNode = options.collection?.getItem(parentKey);
+      parentKey = parentNode ? parentNode.parentKey : null;
+    }
+    if (!isChild) {
+      keys.add(currentKey);
+    }
+  }
+
+  if (keys.size === 0) {
+    keys.add(key);
+  }
+  return keys;
 }
 
 /**
@@ -65,8 +176,8 @@ export function createDraggableCollectionState<T = object>(
 ): DraggableCollectionState {
   const getProps = createMemo(() => props());
 
-  const [isDragging, setIsDragging] = createSignal(false);
-  const [draggingKeys, setDraggingKeys] = createSignal<Set<string | number>>(new Set());
+  const [isDragging, setIsDragging] = createInternalSignal(false);
+  const [draggingKeys, setDraggingKeys] = createInternalSignal<Set<string | number>>(new Set());
 
   const startDrag = (keys: Set<string | number>, x: number, y: number) => {
     const p = getProps();
@@ -87,21 +198,21 @@ export function createDraggableCollectionState<T = object>(
 
   const moveDrag = (x: number, y: number) => {
     const p = getProps();
-    if (!isDragging() || p.isDisabled) return;
+    if (!readNow(isDragging) || p.isDisabled) return;
 
     if (typeof p.onDragMove === "function") {
       p.onDragMove({
         type: "dragmove",
         x,
         y,
-        keys: draggingKeys(),
+        keys: readNow(draggingKeys),
       });
     }
   };
 
   const endDrag = (x: number, y: number, dropOperation: DropOperation, isInternal: boolean) => {
     const p = getProps();
-    const keys = draggingKeys();
+    const keys = readNow(draggingKeys);
 
     setIsDragging(false);
     setDraggingKeys(new Set<string | number>());
@@ -154,5 +265,21 @@ export function createDraggableCollectionState<T = object>(
     cancelDrag,
     getItems,
     getAllowedDropOperations,
+    getKeysForDrag: (key: DragKey) => {
+      const p = getProps();
+      return getKeysForDrag(key, {
+        collection: p.collection,
+        selectedKeys: p.selectedKeys,
+        isSelected: p.isSelected,
+      });
+    },
+    isSelected: (key: DragKey) => {
+      const p = getProps();
+      if (p.isSelected) {
+        return p.isSelected(key);
+      }
+      const selected = selectedKeySet(p.selectedKeys, p.collection);
+      return selected === "all" ? true : selected.has(key);
+    },
   };
 }

package/src/dnd/createDropState.ts

@@ -1,10 +1,28 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-aria/src/dnd/useDrop.ts
+
 /**
  * Drop state management for solid-stately.
  *
  * Provides reactive state for drop target operations.
+ *
+ * Ported from packages/react-aria/src/dnd/useDrop.ts.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
+import { createInternalSignal, readNow } from "../utils";
 import type {
   DropItem,
   DropEnterEvent,
@@ -83,7 +101,7 @@ export interface DropState {
 export function createDropState(props: Accessor<DropStateOptions>): DropState {
   const getProps = createMemo(() => props());
 
-  const [isDropTarget, setIsDropTarget] = createSignal(false);
+  const [isDropTarget, setIsDropTarget] = createInternalSignal(false);
 
   const enterTarget = (x: number, y: number) => {
     const p = getProps();
@@ -102,7 +120,7 @@ export function createDropState(props: Accessor<DropStateOptions>): DropState {
 
   const moveInTarget = (x: number, y: number) => {
     const p = getProps();
-    if (!isDropTarget() || p.isDisabled) return;
+    if (!readNow(isDropTarget) || p.isDisabled) return;
 
     if (typeof p.onDropMove === "function") {
       p.onDropMove({

package/src/dnd/createDroppableCollectionState.ts

@@ -1,17 +1,33 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/dnd/useDroppableCollectionState.ts
+
 /**
  * Droppable collection state management for solid-stately.
  *
  * Provides reactive state for accepting drops onto a collection.
+ *
+ * Ported from packages/react-stately/src/dnd/useDroppableCollectionState.ts.
  */
 
-import { createSignal, createMemo, type Accessor } from "solid-js";
+import { createMemo } from "solid-js";
+import type { Accessor } from "solid-js";
 import type {
   DropItem,
   DropTarget,
   DropOperation,
   DragTypes,
   DroppableCollectionEnterEvent,
-  DroppableCollectionMoveEvent,
   DroppableCollectionActivateEvent,
   DroppableCollectionExitEvent,
   DroppableCollectionDropEvent,
@@ -21,7 +37,19 @@ import type {
   DroppableCollectionReorderEvent,
   ItemDropTarget,
 } from "./types";
-import type { Collection } from "../collections/types";
+import type { Key } from "../collections/types";
+import { createInternalSignal } from "../utils";
+
+/**
+ * The slice of a host collection drop-target state needs: neighbor walk and
+ * parent-key identity. Grid/Table/Tree collections are not `CollectionNode`
+ * lists (cells exist), so this stays structural instead of `Collection<unknown>`.
+ */
+export interface DroppableCollectionLike {
+  getItem(key: Key): { type?: string; parentKey?: Key | null } | null;
+  getKeyBefore(key: Key): Key | null;
+  getKeyAfter(key: Key): Key | null;
+}
 
 export interface DroppableCollectionStateOptions {
   /**
@@ -59,12 +87,13 @@ export interface DroppableCollectionStateOptions {
   shouldAcceptItemDrop?: (target: ItemDropTarget, types: DragTypes) => boolean;
   /**
    * The host collection. Used by the default drop-operation feature detection to
-   * confirm a reorder stays within the same parent and to prevent dropping an
-   * item onto itself or a descendant. Optional: a flat collection (e.g. a plain
-   * ListBox) is always "within parent" and has no descendants, so omitting it is
-   * faithful for flat hosts.
+   * confirm a reorder stays within the same parent, to prevent dropping an item
+   * onto itself or a descendant, and to treat after(item)/before(next) as one
+   * gap. Optional: a flat collection (e.g. a plain ListBox) is always "within
+   * parent" and has no descendants, so omitting it is faithful for those hosts
+   * except opposite-gap matching.
    */
-  collection?: Collection<unknown>;
+  collection?: DroppableCollectionLike;
   /** Whether the droppable collection is disabled. */
   isDisabled?: boolean;
 }
@@ -111,6 +140,13 @@ export interface DroppableCollectionState {
   ): DropOperation;
   /** Check if an item drop should be accepted. */
   shouldAcceptItemDrop(target: ItemDropTarget, types: DragTypes): boolean;
+  /**
+   * RAC `isDropTarget(target)`: whether `target` is the current drop target,
+   * including the before/after pair that names the same gap between two items.
+   * Named `isDropTargetFor` because `isDropTarget` is already the collection-
+   * level boolean on this port.
+   */
+  isDropTargetFor(target: DropTarget | null): boolean;
 }
 
 /**
@@ -129,8 +165,8 @@ export function createDroppableCollectionState(
 ): DroppableCollectionState {
   const getProps = createMemo(() => props());
 
-  const [isDropTarget, setIsDropTarget] = createSignal(false);
-  const [target, setTarget] = createSignal<DropTarget | null>(null);
+  const [isDropTarget, setIsDropTarget] = createInternalSignal(false);
+  const [target, setTarget] = createInternalSignal<DropTarget | null>(null);
 
   const isAccepted = (types: DragTypes): boolean => {
     const p = getProps();
@@ -438,6 +474,37 @@ export function createDroppableCollectionState(
     return true;
   };
 
+  const isDropTargetFor = (dropTarget: DropTarget | null): boolean => {
+    const current = target();
+    if (!current || !dropTarget) return false;
+    if (targetsEqual(current, dropTarget)) return true;
+
+    // RAC `useDroppableCollectionState.ts:216-228`: after(item) and
+    // before(next) name the same gap. Collection only mounts one of them.
+    if (
+      dropTarget.type !== "item" ||
+      current.type !== "item" ||
+      dropTarget.key === current.key ||
+      dropTarget.dropPosition === current.dropPosition ||
+      dropTarget.dropPosition === "on" ||
+      current.dropPosition === "on"
+    ) {
+      return false;
+    }
+
+    const collection = getProps().collection;
+    if (!collection) return false;
+    return (
+      dropTargetsEqual(getOppositeTarget(collection, dropTarget), current) ||
+      dropTargetsEqual(dropTarget, getOppositeTarget(collection, current))
+    );
+  };
+
+  const assignTarget = (newTarget: DropTarget | null) => {
+    if (isDropTargetFor(newTarget)) return;
+    setTarget(newTarget);
+  };
+
   return {
     get isDropTarget() {
       return isDropTarget();
@@ -448,7 +515,7 @@ export function createDroppableCollectionState(
     get isDisabled() {
       return getProps().isDisabled ?? false;
     },
-    setTarget,
+    setTarget: assignTarget,
     isAccepted,
     enterTarget,
     moveToTarget,
@@ -457,6 +524,7 @@ export function createDroppableCollectionState(
     drop,
     getDropOperation,
     shouldAcceptItemDrop,
+    isDropTargetFor,
   };
 }
 
@@ -464,6 +532,14 @@ export function createDroppableCollectionState(
  * Check if two drop targets are equal.
  */
 function targetsEqual(a: DropTarget, b: DropTarget): boolean {
+  return dropTargetsEqual(a, b);
+}
+
+function dropTargetsEqual(
+  a: DropTarget | null | undefined,
+  b: DropTarget | null | undefined,
+): boolean {
+  if (!a || !b) return false;
   if (a.type !== b.type) return false;
   if (a.type === "root" && b.type === "root") return true;
   if (a.type === "item" && b.type === "item") {
@@ -471,3 +547,33 @@ function targetsEqual(a: DropTarget, b: DropTarget): boolean {
   }
   return false;
 }
+
+function nextItemKey(
+  collection: DroppableCollectionLike,
+  fromKey: Key,
+  direction: "before" | "after",
+) {
+  let key =
+    direction === "before" ? collection.getKeyBefore(fromKey) : collection.getKeyAfter(fromKey);
+  while (key != null) {
+    const node = collection.getItem(key);
+    if (node?.type === "item") return key;
+    key = direction === "before" ? collection.getKeyBefore(key) : collection.getKeyAfter(key);
+  }
+  return null;
+}
+
+function getOppositeTarget(
+  collection: DroppableCollectionLike,
+  target: ItemDropTarget,
+): ItemDropTarget | null {
+  if (target.dropPosition === "before") {
+    const prevKey = nextItemKey(collection, target.key, "before");
+    return prevKey != null ? { type: "item", key: prevKey, dropPosition: "after" } : null;
+  }
+  if (target.dropPosition === "after") {
+    const nextKey = nextItemKey(collection, target.key, "after");
+    return nextKey != null ? { type: "item", key: nextKey, dropPosition: "before" } : null;
+  }
+  return null;
+}

package/src/dnd/index.ts

@@ -52,8 +52,11 @@ export { createDropState, type DropStateOptions, type DropState } from "./create
 
 export {
   createDraggableCollectionState,
+  getKeysForDrag,
   type DraggableCollectionStateOptions,
   type DraggableCollectionState,
+  type DraggableCollectionLike,
+  type DraggableCollectionNode,
 } from "./createDraggableCollectionState";
 
 export {
@@ -61,4 +64,5 @@ export {
   DIRECTORY_DRAG_TYPE,
   type DroppableCollectionStateOptions,
   type DroppableCollectionState,
+  type DroppableCollectionLike,
 } from "./createDroppableCollectionState";