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

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;
@@ -38,8 +38,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var defaultManager = new dom.DragDropManager();
 var DragDropContext = react.createContext(
-  new dom.DragDropManager()
+  defaultManager
 );
 function useRenderer() {
   const [_, startTransition2] = react.useTransition();
@@ -169,33 +170,36 @@ 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(manager === defaultManager ? void 0 : manager)
+  );
   react.useEffect(() => {
     instance.manager = manager;
-    return manager == null ? void 0 : manager.registry.register(instance);
+    return instance.register();
   }, [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(
       __spreadProps(__spreadValues({}, input), {
         handle,
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
       manager
     )
   );
   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 +220,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,15 +238,12 @@ 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(
       __spreadProps(__spreadValues({}, input), {
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
       manager
     )
@@ -248,6 +252,7 @@ function useDroppable(input) {
   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);
@@ -283,5 +288,6 @@ exports.useDragDropManager = useDragDropManager;
 exports.useDragOperation = useDragOperation;
 exports.useDraggable = useDraggable;
 exports.useDroppable = useDroppable;
+exports.useInstance = useInstance;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.cjs.map

package/index.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import * as _dnd_kit_abstract from '@dnd-kit/abstract';
-import { DragDropEvents, Data } from '@dnd-kit/abstract';
+import { DragDropEvents, Data, DragDropManager as DragDropManager$1 } from '@dnd-kit/abstract';
 import * as _dnd_kit_dom from '@dnd-kit/dom';
 import { DragDropManagerInput, DragDropManager, Draggable, Droppable, DraggableInput, DroppableInput } from '@dnd-kit/dom';
 import { RefOrValue } from '@dnd-kit/react/utilities';
+import { CleanupFunction } from '@dnd-kit/state';
 
 type Events = DragDropEvents<Draggable, Droppable, DragDropManager>;
 interface Props extends DragDropManagerInput, PropsWithChildren {
@@ -25,6 +26,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;
 };
@@ -45,4 +47,10 @@ declare function useDragOperation(): {
     readonly target: _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data> | null | undefined;
 };
 
-export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable };
+interface Instance<T extends DragDropManager$1<any, any> = DragDropManager$1<any, any>> {
+    manager: T | undefined;
+    register(): CleanupFunction | void;
+}
+declare function useInstance<T extends Instance>(initializer: (manager: DragDropManager$1<any, any> | undefined) => T): T;
+
+export { DragDropProvider, type UseDraggableInput, type UseDroppableInput, useDragDropManager, useDragOperation, useDraggable, useDroppable, useInstance };

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;
@@ -36,8 +36,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var defaultManager = new DragDropManager();
 var DragDropContext = createContext(
-  new DragDropManager()
+  defaultManager
 );
 function useRenderer() {
   const [_, startTransition2] = useTransition();
@@ -167,33 +168,36 @@ function useDragDropManager() {
 function useInstance(initializer) {
   var _a;
   const manager = (_a = useDragDropManager()) != null ? _a : void 0;
-  const [instance] = useState(() => initializer(manager));
+  const [instance] = useState(
+    () => initializer(manager === defaultManager ? void 0 : manager)
+  );
   useEffect(() => {
     instance.manager = manager;
-    return manager == null ? void 0 : manager.registry.register(instance);
+    return instance.register();
   }, [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(
       __spreadProps(__spreadValues({}, input), {
         handle,
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
       manager
     )
   );
   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 +218,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,15 +236,12 @@ 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(
       __spreadProps(__spreadValues({}, input), {
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
       manager
     )
@@ -246,6 +250,7 @@ function useDroppable(input) {
   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);
@@ -276,6 +281,6 @@ function useDragOperation() {
   };
 }
 
-export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable };
+export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable, useInstance };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.4-beta-20240621184125",
+  "version": "0.0.4-beta-20240622232930",
   "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-20240622232930",
+    "@dnd-kit/dom": "0.0.4-beta-20240622232930",
+    "@dnd-kit/state": "0.0.4-beta-20240622232930",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

package/sortable.cjs

@@ -45,32 +45,20 @@ function useSortable(input) {
   const handle = utilities.currentValue(input.handle);
   const element = utilities.currentValue(input.element);
   const target = utilities.currentValue(input.target);
-  const sortable$1 = hooks.useConstant(() => {
+  const sortable$1 = react.useInstance((manager2) => {
     return new sortable.Sortable(
       __spreadProps(__spreadValues({}, input), {
         handle,
         element,
         target,
-        feedback,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        feedback
       }),
-      manager != null ? manager : void 0
+      manager2
     );
   });
-  react$1.useEffect(() => {
-    sortable$1.manager = manager != null ? manager : void 0;
-    if (!manager) return;
-    manager.registry.register(sortable$1.draggable);
-    manager.registry.register(sortable$1.droppable);
-    return () => {
-      manager.registry.unregister(sortable$1.draggable);
-      manager.registry.unregister(sortable$1.droppable);
-    };
-  }, [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 +69,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 +101,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

@@ -1,8 +1,8 @@
-import { useEffect, useCallback } from 'react';
+import { useCallback } from 'react';
 import { deepEqual } from '@dnd-kit/state';
 import { Sortable, defaultSortableTransition } from '@dnd-kit/dom/sortable';
-import { useDragDropManager } from '@dnd-kit/react';
-import { useConstant, useComputed, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect } from '@dnd-kit/react/hooks';
+import { useDragDropManager, useInstance } from '@dnd-kit/react';
+import { useComputed, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect } from '@dnd-kit/react/hooks';
 import { currentValue } from '@dnd-kit/react/utilities';
 
 var __defProp = Object.defineProperty;
@@ -43,32 +43,20 @@ function useSortable(input) {
   const handle = currentValue(input.handle);
   const element = currentValue(input.element);
   const target = currentValue(input.target);
-  const sortable = useConstant(() => {
+  const sortable = useInstance((manager2) => {
     return new Sortable(
       __spreadProps(__spreadValues({}, input), {
         handle,
         element,
         target,
-        feedback,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        feedback
       }),
-      manager != null ? manager : void 0
+      manager2
     );
   });
-  useEffect(() => {
-    sortable.manager = manager != null ? manager : void 0;
-    if (!manager) return;
-    manager.registry.register(sortable.draggable);
-    manager.registry.register(sortable.droppable);
-    return () => {
-      manager.registry.unregister(sortable.draggable);
-      manager.registry.unregister(sortable.droppable);
-    };
-  }, [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 +67,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 +99,9 @@ function useSortable(input) {
     get isDropTarget() {
       return isDropTarget.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: useCallback(
       (element2) => {
         sortable.handle = element2 != null ? element2 : void 0;