@dnd-kit/react 0.0.4-beta-20240621184125 → 0.0.4-beta-20240622155137

package/index.cjs

@@ -4,8 +4,8 @@ var react = require('react');
 var dom = require('@dnd-kit/dom');
 var hooks = require('@dnd-kit/react/hooks');
 var jsxRuntime = require('react/jsx-runtime');
-var utilities = require('@dnd-kit/react/utilities');
 var state = require('@dnd-kit/state');
+var utilities = require('@dnd-kit/react/utilities');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -169,33 +169,34 @@ function useDragDropManager() {
 function useInstance(initializer) {
   var _a;
   const manager = (_a = useDragDropManager()) != null ? _a : void 0;
-  const [instance] = react.useState(() => initializer(manager));
+  const [instance] = react.useState(() => initializer());
   react.useEffect(() => {
     instance.manager = manager;
     return manager == null ? void 0 : manager.registry.register(instance);
   }, [instance, manager]);
   return instance;
 }
+
+// src/core/draggable/useDraggable.ts
 function useDraggable(input) {
-  const { disabled, id, modifiers, sensors } = input;
+  const { disabled, data, id, modifiers, sensors } = input;
   const handle = utilities.currentValue(input.handle);
   const element = utilities.currentValue(input.element);
   const draggable = useInstance(
-    (manager) => new dom.Draggable(
+    () => new dom.Draggable(
       __spreadProps(__spreadValues({}, input), {
         handle,
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
-      manager
+      void 0
     )
   );
   const isDragSource = hooks.useComputed(() => draggable.isDragSource);
+  const status = hooks.useComputed(() => draggable.status);
   hooks.useOnValueChange(id, () => draggable.id = id);
   hooks.useOnValueChange(handle, () => draggable.handle = handle);
   hooks.useOnValueChange(element, () => draggable.element = element);
+  hooks.useOnValueChange(data, () => data && (draggable.data = data));
   hooks.useOnValueChange(disabled, () => draggable.disabled = disabled === true);
   hooks.useOnValueChange(sensors, () => draggable.sensors = sensors);
   hooks.useOnValueChange(
@@ -216,6 +217,9 @@ function useDraggable(input) {
     get isDragSource() {
       return isDragSource.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: react.useCallback(
       (element2) => {
         draggable.handle = element2 != null ? element2 : void 0;
@@ -231,23 +235,21 @@ function useDraggable(input) {
   };
 }
 function useDroppable(input) {
-  const { collisionDetector, disabled, id, accept, type } = input;
+  const { collisionDetector, data, disabled, id, accept, type } = input;
   const element = utilities.currentValue(input.element);
   const droppable = useInstance(
-    (manager) => new dom.Droppable(
+    () => new dom.Droppable(
       __spreadProps(__spreadValues({}, input), {
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
-      manager
+      void 0
     )
   );
   const isDropTarget = hooks.useComputed(() => droppable.isDropTarget);
   hooks.useOnValueChange(id, () => droppable.id = id);
   hooks.useOnValueChange(accept, () => droppable.id = id, void 0, state.deepEqual);
   hooks.useOnValueChange(collisionDetector, () => droppable.id = id);
+  hooks.useOnValueChange(data, () => data && (droppable.data = data));
   hooks.useOnValueChange(disabled, () => droppable.disabled = disabled === true);
   hooks.useOnValueChange(element, () => droppable.element = element);
   hooks.useOnValueChange(type, () => droppable.id = id);

package/index.d.ts

@@ -25,6 +25,7 @@ interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T
 declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>): {
     draggable: Draggable<T>;
     readonly isDragSource: boolean;
+    readonly status: "idle" | "dragging" | "dropping";
     handleRef: (element: Element | null) => void;
     ref: (element: Element | null) => void;
 };

package/index.js

@@ -2,8 +2,8 @@ import { createContext, useState, useEffect, startTransition, useContext, useCal
 import { DragDropManager, defaultPreset, Draggable, Droppable } from '@dnd-kit/dom';
 import { useLatest, useOnValueChange, useComputed, useConstant } from '@dnd-kit/react/hooks';
 import { jsx } from 'react/jsx-runtime';
-import { currentValue } from '@dnd-kit/react/utilities';
 import { deepEqual } from '@dnd-kit/state';
+import { currentValue } from '@dnd-kit/react/utilities';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -167,33 +167,34 @@ function useDragDropManager() {
 function useInstance(initializer) {
   var _a;
   const manager = (_a = useDragDropManager()) != null ? _a : void 0;
-  const [instance] = useState(() => initializer(manager));
+  const [instance] = useState(() => initializer());
   useEffect(() => {
     instance.manager = manager;
     return manager == null ? void 0 : manager.registry.register(instance);
   }, [instance, manager]);
   return instance;
 }
+
+// src/core/draggable/useDraggable.ts
 function useDraggable(input) {
-  const { disabled, id, modifiers, sensors } = input;
+  const { disabled, data, id, modifiers, sensors } = input;
   const handle = currentValue(input.handle);
   const element = currentValue(input.element);
   const draggable = useInstance(
-    (manager) => new Draggable(
+    () => new Draggable(
       __spreadProps(__spreadValues({}, input), {
         handle,
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
-      manager
+      void 0
     )
   );
   const isDragSource = useComputed(() => draggable.isDragSource);
+  const status = useComputed(() => draggable.status);
   useOnValueChange(id, () => draggable.id = id);
   useOnValueChange(handle, () => draggable.handle = handle);
   useOnValueChange(element, () => draggable.element = element);
+  useOnValueChange(data, () => data && (draggable.data = data));
   useOnValueChange(disabled, () => draggable.disabled = disabled === true);
   useOnValueChange(sensors, () => draggable.sensors = sensors);
   useOnValueChange(
@@ -214,6 +215,9 @@ function useDraggable(input) {
     get isDragSource() {
       return isDragSource.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: useCallback(
       (element2) => {
         draggable.handle = element2 != null ? element2 : void 0;
@@ -229,23 +233,21 @@ function useDraggable(input) {
   };
 }
 function useDroppable(input) {
-  const { collisionDetector, disabled, id, accept, type } = input;
+  const { collisionDetector, data, disabled, id, accept, type } = input;
   const element = currentValue(input.element);
   const droppable = useInstance(
-    (manager) => new Droppable(
+    () => new Droppable(
       __spreadProps(__spreadValues({}, input), {
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
-      manager
+      void 0
     )
   );
   const isDropTarget = useComputed(() => droppable.isDropTarget);
   useOnValueChange(id, () => droppable.id = id);
   useOnValueChange(accept, () => droppable.id = id, void 0, deepEqual);
   useOnValueChange(collisionDetector, () => droppable.id = id);
+  useOnValueChange(data, () => data && (droppable.data = data));
   useOnValueChange(disabled, () => droppable.disabled = disabled === true);
   useOnValueChange(element, () => droppable.element = element);
   useOnValueChange(type, () => droppable.id = id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.4-beta-20240621184125",
+  "version": "0.0.4-beta-20240622155137",
   "main": "./index.cjs",
   "module": "./index.js",
   "type": "module",
@@ -56,9 +56,9 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@dnd-kit/abstract": "0.0.4-beta-20240621184125",
-    "@dnd-kit/dom": "0.0.4-beta-20240621184125",
-    "@dnd-kit/state": "0.0.4-beta-20240621184125",
+    "@dnd-kit/abstract": "0.0.4-beta-20240622155137",
+    "@dnd-kit/dom": "0.0.4-beta-20240622155137",
+    "@dnd-kit/state": "0.0.4-beta-20240622155137",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

package/sortable.cjs

@@ -51,12 +51,9 @@ function useSortable(input) {
         handle,
         element,
         target,
-        feedback,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        feedback
       }),
-      manager != null ? manager : void 0
+      void 0
     );
   });
   react$1.useEffect(() => {
@@ -71,6 +68,7 @@ function useSortable(input) {
   }, [sortable$1, manager]);
   const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget);
   const isDragSource = hooks.useComputed(() => sortable$1.isDragSource);
+  const status = hooks.useComputed(() => sortable$1.status);
   hooks.useOnValueChange(id, () => sortable$1.id = id);
   hooks.useOnValueChange(index, () => sortable$1.index = index, hooks.useIsomorphicLayoutEffect);
   hooks.useOnValueChange(type, () => sortable$1.type = type);
@@ -81,7 +79,7 @@ function useSortable(input) {
     void 0,
     state.deepEqual
   );
-  hooks.useOnValueChange(data, () => sortable$1.data = data != null ? data : null);
+  hooks.useOnValueChange(data, () => data && (sortable$1.data = data));
   hooks.useOnValueChange(
     index,
     () => {
@@ -113,6 +111,9 @@ function useSortable(input) {
     get isDropTarget() {
       return isDropTarget.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: react$1.useCallback(
       (element2) => {
         sortable$1.handle = element2 != null ? element2 : void 0;

package/sortable.d.ts

@@ -10,6 +10,7 @@ interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>,
 declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>): {
     readonly isDragSource: boolean;
     readonly isDropTarget: boolean;
+    readonly status: "idle" | "dragging" | "dropping";
     handleRef: (element: Element | null) => void;
     ref: (element: Element | null) => void;
     sourceRef: (element: Element | null) => void;

package/sortable.js

@@ -49,12 +49,9 @@ function useSortable(input) {
         handle,
         element,
         target,
-        feedback,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        feedback
       }),
-      manager != null ? manager : void 0
+      void 0
     );
   });
   useEffect(() => {
@@ -69,6 +66,7 @@ function useSortable(input) {
   }, [sortable, manager]);
   const isDropTarget = useComputed(() => sortable.isDropTarget);
   const isDragSource = useComputed(() => sortable.isDragSource);
+  const status = useComputed(() => sortable.status);
   useOnValueChange(id, () => sortable.id = id);
   useOnValueChange(index, () => sortable.index = index, useIsomorphicLayoutEffect);
   useOnValueChange(type, () => sortable.type = type);
@@ -79,7 +77,7 @@ function useSortable(input) {
     void 0,
     deepEqual
   );
-  useOnValueChange(data, () => sortable.data = data != null ? data : null);
+  useOnValueChange(data, () => data && (sortable.data = data));
   useOnValueChange(
     index,
     () => {
@@ -111,6 +109,9 @@ function useSortable(input) {
     get isDropTarget() {
       return isDropTarget.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: useCallback(
       (element2) => {
         sortable.handle = element2 != null ? element2 : void 0;