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

package/index.cjs

@@ -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,10 +170,12 @@ function useDragDropManager() {
 function useInstance(initializer) {
   var _a;
   const manager = (_a = useDragDropManager()) != null ? _a : void 0;
-  const [instance] = react.useState(() => initializer());
+  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;
 }
@@ -183,12 +186,12 @@ function useDraggable(input) {
   const handle = utilities.currentValue(input.handle);
   const element = utilities.currentValue(input.element);
   const draggable = useInstance(
-    () => new dom.Draggable(
+    (manager) => new dom.Draggable(
       __spreadProps(__spreadValues({}, input), {
         handle,
         element
       }),
-      void 0
+      manager
     )
   );
   const isDragSource = hooks.useComputed(() => draggable.isDragSource);
@@ -238,11 +241,11 @@ function useDroppable(input) {
   const { collisionDetector, data, disabled, id, accept, type } = input;
   const element = utilities.currentValue(input.element);
   const droppable = useInstance(
-    () => new dom.Droppable(
+    (manager) => new dom.Droppable(
       __spreadProps(__spreadValues({}, input), {
         element
       }),
-      void 0
+      manager
     )
   );
   const isDropTarget = hooks.useComputed(() => droppable.isDropTarget);
@@ -285,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 {
@@ -46,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

@@ -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,10 +168,12 @@ function useDragDropManager() {
 function useInstance(initializer) {
   var _a;
   const manager = (_a = useDragDropManager()) != null ? _a : void 0;
-  const [instance] = useState(() => initializer());
+  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;
 }
@@ -181,12 +184,12 @@ function useDraggable(input) {
   const handle = currentValue(input.handle);
   const element = currentValue(input.element);
   const draggable = useInstance(
-    () => new Draggable(
+    (manager) => new Draggable(
       __spreadProps(__spreadValues({}, input), {
         handle,
         element
       }),
-      void 0
+      manager
     )
   );
   const isDragSource = useComputed(() => draggable.isDragSource);
@@ -236,11 +239,11 @@ function useDroppable(input) {
   const { collisionDetector, data, disabled, id, accept, type } = input;
   const element = currentValue(input.element);
   const droppable = useInstance(
-    () => new Droppable(
+    (manager) => new Droppable(
       __spreadProps(__spreadValues({}, input), {
         element
       }),
-      void 0
+      manager
     )
   );
   const isDropTarget = useComputed(() => droppable.isDropTarget);
@@ -278,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-20240622155137",
+  "version": "0.0.4",
   "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-20240622155137",
-    "@dnd-kit/dom": "0.0.4-beta-20240622155137",
-    "@dnd-kit/state": "0.0.4-beta-20240622155137",
+    "@dnd-kit/abstract": "^0.0.4",
+    "@dnd-kit/dom": "^0.0.4",
+    "@dnd-kit/state": "^0.0.4",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

package/sortable.cjs

@@ -45,7 +45,7 @@ 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,
@@ -53,19 +53,9 @@ function useSortable(input) {
         target,
         feedback
       }),
-      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);

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,7 +43,7 @@ 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,
@@ -51,19 +51,9 @@ function useSortable(input) {
         target,
         feedback
       }),
-      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);