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

package/src/combobox/index.ts

@@ -7,6 +7,10 @@ export {
   defaultContainsFilter,
   type ComboBoxState,
   type ComboBoxStateProps,
+  type ComboBoxValidationValue,
+  type ComboBoxSelectionMode,
+  type ComboBoxValueType,
+  type ComboBoxChangeValueType,
   type FilterFn,
   type MenuTriggerAction,
   type FocusStrategy,

package/src/data/createAsyncList.ts

@@ -1,12 +1,32 @@
+/*
+ * 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/useAsyncList.ts
+// Ported to SolidJS for Proyecto Viviana; based on packages/react-stately/src/data/useListData.ts
+
 /**
  * createAsyncList - SolidJS port of React Spectrum's useAsyncList
  *
  * Manages state for an immutable async loaded list data structure, and provides
  * convenience methods to update the data over time. Manages loading and error
  * states, pagination, and sorting.
+ *
+ * Ported from:
+ * - packages/react-stately/src/data/useAsyncList.ts
+ * - packages/react-stately/src/data/useListData.ts
  */
 
-import { createSignal, untrack } from "solid-js";
+import { untrack } from "solid-js";
+import { createInternalSignal } from "../utils";
 
 export type Key = string | number;
 export type Selection = "all" | Set<Key>;
@@ -149,7 +169,7 @@ export function createAsyncList<T, C = string>(options: AsyncListOptions<T, C>):
     initialFilterText = "",
   } = options;
 
-  const [state, setState] = createSignal<InternalState<T, C>>({
+  const [state, setState] = createInternalSignal<InternalState<T, C>>({
     loadingState: "idle",
     items: [],
     selectedKeys: initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys || []),
@@ -320,8 +340,14 @@ export function createAsyncList<T, C = string>(options: AsyncListOptions<T, C>):
 
     insertBefore(key: Key, ...values: T[]) {
       setState((s) => {
-        const index = s.items.findIndex((item) => getKey(item) === key);
-        if (index === -1) return s;
+        let index = s.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) {
+          if (s.items.length === 0) {
+            index = 0;
+          } else {
+            return s;
+          }
+        }
         return {
           ...s,
           items: [...s.items.slice(0, index), ...values, ...s.items.slice(index)],
@@ -331,8 +357,14 @@ export function createAsyncList<T, C = string>(options: AsyncListOptions<T, C>):
 
     insertAfter(key: Key, ...values: T[]) {
       setState((s) => {
-        const index = s.items.findIndex((item) => getKey(item) === key);
-        if (index === -1) return s;
+        let index = s.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) {
+          if (s.items.length === 0) {
+            index = 0;
+          } else {
+            return s;
+          }
+        }
         return {
           ...s,
           items: [...s.items.slice(0, index + 1), ...values, ...s.items.slice(index + 1)],
@@ -360,6 +392,9 @@ export function createAsyncList<T, C = string>(options: AsyncListOptions<T, C>):
           }
           selectedKeys = newSelection;
         }
+        if (s.cursor == null && items.length === 0) {
+          selectedKeys = new Set();
+        }
         return { ...s, items, selectedKeys };
       });
     },

package/src/data/createListData.ts

@@ -1,11 +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/data/useListData.ts
+
 /**
  * createListData - SolidJS port of React Spectrum's useListData
  *
  * Manages state for an immutable list data structure, and provides
  * convenience methods to update the data over time.
+ *
+ * Ported from packages/react-stately/src/data/useListData.ts.
  */
 
-import { createSignal, createMemo } from "solid-js";
+import { createMemo } from "solid-js";
+import { createInternalSignal } from "../utils";
 
 export type Key = string | number;
 export type Selection = "all" | Set<Key>;
@@ -88,7 +105,7 @@ export function createListData<T>(options: ListOptions<T>): ListData<T> {
     initialFilterText = "",
   } = options;
 
-  const [state, setState] = createSignal<ListState<T>>({
+  const [state, setState] = createInternalSignal<ListState<T>>({
     items: initialItems,
     selectedKeys: initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys || []),
     filterText: initialFilterText,
@@ -148,8 +165,14 @@ export function createListData<T>(options: ListOptions<T>): ListData<T> {
 
     insertBefore(key: Key, ...values: T[]) {
       setState((s) => {
-        const index = s.items.findIndex((item) => getKey(item) === key);
-        if (index === -1) return s;
+        let index = s.items.findIndex((item) => getKey(item) === key);
+        if (index === -1) {
+          if (s.items.length === 0) {
+            index = 0;
+          } else {
+            return s;
+          }
+        }
         return insertItems(s, index, ...values);
       });
     },

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 || []),
   );
 
@@ -329,6 +345,11 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
     },
 
     remove(...keys: Key[]) {
+      if (keys.length === 0) {
+        return;
+      }
+
+      let nextMap: Map<Key, TreeNode<T>> | undefined;
       setTreeState((state) => {
         let { items, nodeMap } = state;
         let newMap = new Map(nodeMap);
@@ -340,14 +361,17 @@ export function createTreeData<T>(options: TreeOptions<T>): TreeData<T> {
           newMap = result.nodeMap;
         }
 
+        nextMap = newMap;
         return { items: newItems, nodeMap: newMap };
       });
 
       setSelectedKeys((sel) => {
-        if (sel === "all") return sel;
+        if (sel === "all" || !nextMap) return sel;
         const newSel = new Set(sel);
-        for (const key of keys) {
-          newSel.delete(key);
+        for (const key of sel) {
+          if (!nextMap.has(key)) {
+            newSel.delete(key);
+          }
         }
         return newSel;
       });

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,22 @@ import type {
   DragPreviewRenderer,
 } from "./types";
 
-export interface DraggableCollectionStateOptions<T = object> {
+type DragKey = string | number;
+
+export interface DraggableCollectionNode {
+  parentKey?: DragKey | null;
+  textValue?: string;
+}
+
+export interface DraggableCollectionLike {
+  getItem(key: DragKey): DraggableCollectionNode | null | undefined;
+  getKeys?(): Iterable<DragKey>;
+  getTextValue?(key: DragKey): string;
+}
+
+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 +60,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 +84,89 @@ 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;
+  /** Collection passed to the drag. Item text is read from here. */
+  readonly collection?: DraggableCollectionLike;
+}
+
+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 +180,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 +202,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 +269,24 @@ 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);
+    },
+    get collection() {
+      return getProps().collection;
+    },
   };
 }

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({