@dnd-kit/react 0.0.2-beta-20240604230258 → 0.0.2-beta-20240606131929

package/hooks.cjs

@@ -49,6 +49,11 @@ function useComputed(compute, sync = false) {
     sync
   );
 }
+
+// src/hooks/useImmediateEffect.ts
+function useImmediateEffect(callback, _) {
+  callback();
+}
 function useLatest(value) {
   const valueRef = react.useRef(value);
   useIsomorphicLayoutEffect(() => {
@@ -56,43 +61,22 @@ function useLatest(value) {
   }, [value]);
   return valueRef;
 }
-
-// src/hooks/useEvent.ts
-function useEvent(handler) {
-  const handlerRef = useLatest(handler);
-  return react.useCallback(
-    function(...args) {
-      return handlerRef.current?.(...args);
-    },
-    [handlerRef]
-  );
-}
-
-// src/hooks/useImmediateEffect.ts
-function useImmediateEffect(callback, _) {
-  callback();
-}
-function useOnValueChange(value, onChange, effect3 = react.useEffect, compare = Object.is) {
+function useOnValueChange(value, onChange, effect2 = react.useEffect, compare = Object.is) {
   const tracked = react.useRef(value);
-  effect3(() => {
+  effect2(() => {
     const oldValue = tracked.current;
-    if (!compare(value, tracked.current)) {
+    if (!compare(value, oldValue)) {
       tracked.current = value;
       onChange(value, oldValue);
     }
   }, [onChange, value]);
 }
-function useSignalEffect(compute, deps = []) {
-  react.useEffect(() => state.effect(compute), deps);
-}
 
 exports.useComputed = useComputed;
 exports.useConstant = useConstant;
-exports.useEvent = useEvent;
 exports.useImmediateEffect = useImmediateEffect;
 exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
 exports.useLatest = useLatest;
 exports.useOnValueChange = useOnValueChange;
-exports.useSignalEffect = useSignalEffect;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=hooks.cjs.map

package/hooks.d.ts

@@ -6,8 +6,6 @@ declare function useConstant<T = any>(initializer: () => T, dependency?: any): T
 
 declare function useComputed<T = any>(compute: () => T, sync?: boolean): _preact_signals_core.ReadonlySignal<T>;
 
-declare function useEvent<T extends Function>(handler: T | undefined): (...args: any) => any;
-
 declare function useImmediateEffect(callback: EffectCallback, _?: DependencyList): void;
 
 /**
@@ -20,6 +18,4 @@ declare function useLatest<T>(value: T): react.MutableRefObject<T | undefined>;
 
 declare function useOnValueChange<T>(value: T, onChange: (value: T, oldValue: T) => void, effect?: typeof useEffect, compare?: (value1: any, value2: any) => boolean): void;
 
-declare function useSignalEffect(compute: () => void, deps?: any[]): void;
-
-export { useComputed, useConstant, useEvent, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnValueChange, useSignalEffect };
+export { useComputed, useConstant, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnValueChange };

package/hooks.js

@@ -1,5 +1,5 @@
-import { useRef, useLayoutEffect, useEffect, useCallback, useState } from 'react';
-import { computed, effect, Signal, signal } from '@dnd-kit/state';
+import { useRef, useLayoutEffect, useEffect, useState } from 'react';
+import { computed, Signal, signal, effect } from '@dnd-kit/state';
 import { flushSync } from 'react-dom';
 
 // src/hooks/useConstant.ts
@@ -47,6 +47,11 @@ function useComputed(compute, sync = false) {
     sync
   );
 }
+
+// src/hooks/useImmediateEffect.ts
+function useImmediateEffect(callback, _) {
+  callback();
+}
 function useLatest(value) {
   const valueRef = useRef(value);
   useIsomorphicLayoutEffect(() => {
@@ -54,36 +59,17 @@ function useLatest(value) {
   }, [value]);
   return valueRef;
 }
-
-// src/hooks/useEvent.ts
-function useEvent(handler) {
-  const handlerRef = useLatest(handler);
-  return useCallback(
-    function(...args) {
-      return handlerRef.current?.(...args);
-    },
-    [handlerRef]
-  );
-}
-
-// src/hooks/useImmediateEffect.ts
-function useImmediateEffect(callback, _) {
-  callback();
-}
-function useOnValueChange(value, onChange, effect3 = useEffect, compare = Object.is) {
+function useOnValueChange(value, onChange, effect2 = useEffect, compare = Object.is) {
   const tracked = useRef(value);
-  effect3(() => {
+  effect2(() => {
     const oldValue = tracked.current;
-    if (!compare(value, tracked.current)) {
+    if (!compare(value, oldValue)) {
       tracked.current = value;
       onChange(value, oldValue);
     }
   }, [onChange, value]);
 }
-function useSignalEffect(compute, deps = []) {
-  useEffect(() => effect(compute), deps);
-}
 
-export { useComputed, useConstant, useEvent, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnValueChange, useSignalEffect };
+export { useComputed, useConstant, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnValueChange };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=hooks.js.map

package/index.cjs

@@ -59,11 +59,11 @@ var DragDropProvider = react.forwardRef(
     });
     const { plugins, modifiers } = input;
     const handleBeforeDragStart = hooks.useLatest(onBeforeDragStart);
-    const handleDragStart = hooks.useEvent(onDragStart);
+    const handleDragStart = hooks.useLatest(onDragStart);
     const handleDragOver = hooks.useLatest(onDragOver);
     const handleDragMove = hooks.useLatest(onDragMove);
     const handleDragEnd = hooks.useLatest(onDragEnd);
-    const handleCollision = hooks.useEvent(onCollision);
+    const handleCollision = hooks.useLatest(onCollision);
     react.useEffect(() => {
       const listeners = [
         manager.monitor.addEventListener(
@@ -75,7 +75,10 @@ var DragDropProvider = react.forwardRef(
             }
           }
         ),
-        manager.monitor.addEventListener("dragstart", handleDragStart),
+        manager.monitor.addEventListener(
+          "dragstart",
+          (event, manager2) => handleDragStart.current?.(event, manager2)
+        ),
         manager.monitor.addEventListener("dragover", (event, manager2) => {
           const callback = handleDragOver.current;
           if (callback) {
@@ -94,12 +97,13 @@ var DragDropProvider = react.forwardRef(
             trackRendering(() => callback(event, manager2));
           }
         }),
-        manager.monitor.addEventListener("collision", handleCollision)
+        manager.monitor.addEventListener(
+          "collision",
+          (event, manager2) => handleCollision.current?.(event, manager2)
+        )
       ];
       return () => {
-        for (const unsubscribe of listeners) {
-          unsubscribe();
-        }
+        listeners.forEach((unsubscribe) => unsubscribe());
       };
     }, [manager]);
     hooks.useOnValueChange(
@@ -108,9 +112,20 @@ var DragDropProvider = react.forwardRef(
     );
     hooks.useOnValueChange(modifiers, () => manager.modifiers = modifiers ?? []);
     react.useImperativeHandle(ref, () => manager, [manager]);
-    return /* @__PURE__ */ jsxRuntime.jsx(DragDropContext.Provider, { value: manager, children });
+    return /* @__PURE__ */ jsxRuntime.jsxs(DragDropContext.Provider, { value: manager, children: [
+      children,
+      /* @__PURE__ */ jsxRuntime.jsx(Lifecycle, { manager })
+    ] });
   }
 );
+var Lifecycle = class extends react.Component {
+  render() {
+    return null;
+  }
+  componentWillUnmount() {
+    this.props.manager.destroy();
+  }
+};
 function useDragDropManager() {
   return react.useContext(DragDropContext);
 }
@@ -131,10 +146,21 @@ function useInstance(initializer) {
 // src/core/draggable/useDraggable.ts
 function useDraggable(input) {
   const { disabled, id, sensors } = input;
-  const handle = utilities.getCurrentValue(input.handle);
-  const element = utilities.getCurrentValue(input.element);
+  const handle = utilities.currentValue(input.handle);
+  const element = utilities.currentValue(input.element);
   const draggable = useInstance(
-    (manager) => new dom.Draggable({ ...input, handle, element }, manager)
+    (manager) => new dom.Draggable(
+      {
+        ...input,
+        handle,
+        element,
+        options: {
+          ...input.options,
+          register: false
+        }
+      },
+      manager
+    )
   );
   const isDragSource = hooks.useComputed(() => draggable.isDragSource);
   hooks.useOnValueChange(id, () => draggable.id = id);
@@ -166,9 +192,19 @@ function useDraggable(input) {
 }
 function useDroppable(input) {
   const { collisionDetector, disabled, id, accept, type } = input;
-  const element = utilities.getCurrentValue(input.element);
+  const element = utilities.currentValue(input.element);
   const droppable = useInstance(
-    (manager) => new dom.Droppable({ ...input, element }, manager)
+    (manager) => new dom.Droppable(
+      {
+        ...input,
+        element,
+        options: {
+          ...input.options,
+          register: false
+        }
+      },
+      manager
+    )
   );
   const isDisabled = hooks.useComputed(() => droppable.disabled);
   const isDropTarget = hooks.useComputed(() => droppable.isDropTarget);

package/index.js

@@ -1,8 +1,8 @@
-import { createContext, forwardRef, useEffect, useImperativeHandle, useTransition, useState, useRef, useContext, useCallback } from 'react';
+import { createContext, forwardRef, useEffect, useImperativeHandle, Component, useTransition, useState, useRef, useContext, useCallback } from 'react';
 import { DragDropManager, defaultPreset, Draggable, Droppable } from '@dnd-kit/dom';
-import { useConstant, useLatest, useEvent, useOnValueChange, useComputed } from '@dnd-kit/react/hooks';
-import { jsx } from 'react/jsx-runtime';
-import { getCurrentValue } from '@dnd-kit/react/utilities';
+import { useConstant, useLatest, useOnValueChange, useComputed } from '@dnd-kit/react/hooks';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { currentValue } from '@dnd-kit/react/utilities';
 import { deepEqual } from '@dnd-kit/state';
 
 // src/core/context/DragDropProvider.tsx
@@ -57,11 +57,11 @@ var DragDropProvider = forwardRef(
     });
     const { plugins, modifiers } = input;
     const handleBeforeDragStart = useLatest(onBeforeDragStart);
-    const handleDragStart = useEvent(onDragStart);
+    const handleDragStart = useLatest(onDragStart);
     const handleDragOver = useLatest(onDragOver);
     const handleDragMove = useLatest(onDragMove);
     const handleDragEnd = useLatest(onDragEnd);
-    const handleCollision = useEvent(onCollision);
+    const handleCollision = useLatest(onCollision);
     useEffect(() => {
       const listeners = [
         manager.monitor.addEventListener(
@@ -73,7 +73,10 @@ var DragDropProvider = forwardRef(
             }
           }
         ),
-        manager.monitor.addEventListener("dragstart", handleDragStart),
+        manager.monitor.addEventListener(
+          "dragstart",
+          (event, manager2) => handleDragStart.current?.(event, manager2)
+        ),
         manager.monitor.addEventListener("dragover", (event, manager2) => {
           const callback = handleDragOver.current;
           if (callback) {
@@ -92,12 +95,13 @@ var DragDropProvider = forwardRef(
             trackRendering(() => callback(event, manager2));
           }
         }),
-        manager.monitor.addEventListener("collision", handleCollision)
+        manager.monitor.addEventListener(
+          "collision",
+          (event, manager2) => handleCollision.current?.(event, manager2)
+        )
       ];
       return () => {
-        for (const unsubscribe of listeners) {
-          unsubscribe();
-        }
+        listeners.forEach((unsubscribe) => unsubscribe());
       };
     }, [manager]);
     useOnValueChange(
@@ -106,9 +110,20 @@ var DragDropProvider = forwardRef(
     );
     useOnValueChange(modifiers, () => manager.modifiers = modifiers ?? []);
     useImperativeHandle(ref, () => manager, [manager]);
-    return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: manager, children });
+    return /* @__PURE__ */ jsxs(DragDropContext.Provider, { value: manager, children: [
+      children,
+      /* @__PURE__ */ jsx(Lifecycle, { manager })
+    ] });
   }
 );
+var Lifecycle = class extends Component {
+  render() {
+    return null;
+  }
+  componentWillUnmount() {
+    this.props.manager.destroy();
+  }
+};
 function useDragDropManager() {
   return useContext(DragDropContext);
 }
@@ -129,10 +144,21 @@ function useInstance(initializer) {
 // src/core/draggable/useDraggable.ts
 function useDraggable(input) {
   const { disabled, id, sensors } = input;
-  const handle = getCurrentValue(input.handle);
-  const element = getCurrentValue(input.element);
+  const handle = currentValue(input.handle);
+  const element = currentValue(input.element);
   const draggable = useInstance(
-    (manager) => new Draggable({ ...input, handle, element }, manager)
+    (manager) => new Draggable(
+      {
+        ...input,
+        handle,
+        element,
+        options: {
+          ...input.options,
+          register: false
+        }
+      },
+      manager
+    )
   );
   const isDragSource = useComputed(() => draggable.isDragSource);
   useOnValueChange(id, () => draggable.id = id);
@@ -164,9 +190,19 @@ function useDraggable(input) {
 }
 function useDroppable(input) {
   const { collisionDetector, disabled, id, accept, type } = input;
-  const element = getCurrentValue(input.element);
+  const element = currentValue(input.element);
   const droppable = useInstance(
-    (manager) => new Droppable({ ...input, element }, manager)
+    (manager) => new Droppable(
+      {
+        ...input,
+        element,
+        options: {
+          ...input.options,
+          register: false
+        }
+      },
+      manager
+    )
   );
   const isDisabled = useComputed(() => droppable.disabled);
   const isDropTarget = useComputed(() => droppable.isDropTarget);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.2-beta-20240604230258",
+  "version": "0.0.2-beta-20240606131929",
   "main": "./index.cjs",
   "module": "./index.js",
   "type": "module",
@@ -56,8 +56,8 @@
     "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
   },
   "dependencies": {
-    "@dnd-kit/abstract": "0.0.2-beta-20240604230258",
-    "@dnd-kit/dom": "0.0.2-beta-20240604230258",
+    "@dnd-kit/abstract": "0.0.2-beta-20240606131929",
+    "@dnd-kit/dom": "0.0.2-beta-20240606131929",
     "@dnd-kit/state": "*",
     "tslib": "^2.6.2"
   },

package/sortable.cjs

@@ -16,6 +16,7 @@ function useSortable(input) {
     id,
     data,
     index,
+    group,
     disabled,
     feedback,
     sensors,
@@ -23,39 +24,44 @@ function useSortable(input) {
     type
   } = input;
   const manager = react.useDragDropManager();
-  const handle = utilities.getCurrentValue(input.handle);
-  const element = utilities.getCurrentValue(input.element);
-  const sortable$1 = hooks.useConstant(
-    () => new sortable.Sortable(
+  const handle = utilities.currentValue(input.handle);
+  const element = utilities.currentValue(input.element);
+  const sortable$1 = hooks.useConstant(() => {
+    return new sortable.Sortable(
       {
         ...input,
         handle,
         element,
-        feedback
+        feedback,
+        options: {
+          ...input.options,
+          register: false
+        }
       },
       manager
-    ),
-    manager
-  );
-  react$1.useEffect(() => {
+    );
+  }, manager);
+  react$1.useLayoutEffect(() => {
     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);
     };
-  }, [manager]);
+  }, [sortable$1, manager]);
   const isDisabled = hooks.useComputed(() => sortable$1.disabled);
   const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget);
   const isDragSource = hooks.useComputed(() => sortable$1.isDragSource);
+  hooks.useOnValueChange(id, () => sortable$1.id = id);
+  hooks.useOnValueChange(index, () => sortable$1.index = index, hooks.useIsomorphicLayoutEffect);
+  hooks.useOnValueChange(type, () => sortable$1.type = type);
+  hooks.useOnValueChange(group, () => sortable$1.group = group);
   hooks.useOnValueChange(
     accept,
     () => sortable$1.accept = accept,
     void 0,
     state.deepEqual
   );
-  hooks.useOnValueChange(type, () => sortable$1.type = type);
-  hooks.useOnValueChange(id, () => sortable$1.id = id);
   hooks.useOnValueChange(data, () => sortable$1.data = data ?? null);
   hooks.useOnValueChange(
     index,
@@ -66,7 +72,6 @@ function useSortable(input) {
     },
     hooks.useImmediateEffect
   );
-  hooks.useOnValueChange(index, () => sortable$1.index = index, hooks.useIsomorphicLayoutEffect);
   hooks.useOnValueChange(handle, () => sortable$1.handle = handle);
   hooks.useOnValueChange(element, () => sortable$1.element = element);
   hooks.useOnValueChange(disabled, () => sortable$1.disabled = disabled === true);

package/sortable.js

@@ -1,9 +1,9 @@
-import { useEffect, useCallback } from 'react';
+import { useLayoutEffect, 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, useImmediateEffect, useIsomorphicLayoutEffect } from '@dnd-kit/react/hooks';
-import { getCurrentValue } from '@dnd-kit/react/utilities';
+import { useConstant, useComputed, useOnValueChange, useIsomorphicLayoutEffect, useImmediateEffect } from '@dnd-kit/react/hooks';
+import { currentValue } from '@dnd-kit/react/utilities';
 
 // src/sortable/useSortable.ts
 function useSortable(input) {
@@ -14,6 +14,7 @@ function useSortable(input) {
     id,
     data,
     index,
+    group,
     disabled,
     feedback,
     sensors,
@@ -21,39 +22,44 @@ function useSortable(input) {
     type
   } = input;
   const manager = useDragDropManager();
-  const handle = getCurrentValue(input.handle);
-  const element = getCurrentValue(input.element);
-  const sortable = useConstant(
-    () => new Sortable(
+  const handle = currentValue(input.handle);
+  const element = currentValue(input.element);
+  const sortable = useConstant(() => {
+    return new Sortable(
       {
         ...input,
         handle,
         element,
-        feedback
+        feedback,
+        options: {
+          ...input.options,
+          register: false
+        }
       },
       manager
-    ),
-    manager
-  );
-  useEffect(() => {
+    );
+  }, manager);
+  useLayoutEffect(() => {
     manager.registry.register(sortable.draggable);
     manager.registry.register(sortable.droppable);
     return () => {
       manager.registry.unregister(sortable.draggable);
       manager.registry.unregister(sortable.droppable);
     };
-  }, [manager]);
+  }, [sortable, manager]);
   const isDisabled = useComputed(() => sortable.disabled);
   const isDropTarget = useComputed(() => sortable.isDropTarget);
   const isDragSource = useComputed(() => sortable.isDragSource);
+  useOnValueChange(id, () => sortable.id = id);
+  useOnValueChange(index, () => sortable.index = index, useIsomorphicLayoutEffect);
+  useOnValueChange(type, () => sortable.type = type);
+  useOnValueChange(group, () => sortable.group = group);
   useOnValueChange(
     accept,
     () => sortable.accept = accept,
     void 0,
     deepEqual
   );
-  useOnValueChange(type, () => sortable.type = type);
-  useOnValueChange(id, () => sortable.id = id);
   useOnValueChange(data, () => sortable.data = data ?? null);
   useOnValueChange(
     index,
@@ -64,7 +70,6 @@ function useSortable(input) {
     },
     useImmediateEffect
   );
-  useOnValueChange(index, () => sortable.index = index, useIsomorphicLayoutEffect);
   useOnValueChange(handle, () => sortable.handle = handle);
   useOnValueChange(element, () => sortable.element = element);
   useOnValueChange(disabled, () => sortable.disabled = disabled === true);

package/utilities.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-// src/utilities/getCurrentValue.ts
-function getCurrentValue(value) {
+// src/utilities/currentValue.ts
+function currentValue(value) {
   if (value == null) {
     return void 0;
   }
@@ -11,6 +11,6 @@ function getCurrentValue(value) {
   return value;
 }
 
-exports.getCurrentValue = getCurrentValue;
+exports.currentValue = currentValue;
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=utilities.cjs.map

package/utilities.d.ts

@@ -1,6 +1,6 @@
 import { RefObject, MutableRefObject } from 'react';
 
 type RefOrValue<T> = T | RefObject<T | null | undefined> | MutableRefObject<T> | null | undefined;
-declare function getCurrentValue<T>(value: RefOrValue<T>): NonNullable<T> | undefined;
+declare function currentValue<T>(value: RefOrValue<T>): NonNullable<T> | undefined;
 
-export { RefOrValue, getCurrentValue };
+export { RefOrValue, currentValue };

package/utilities.js

@@ -1,5 +1,5 @@
-// src/utilities/getCurrentValue.ts
-function getCurrentValue(value) {
+// src/utilities/currentValue.ts
+function currentValue(value) {
   if (value == null) {
     return void 0;
   }
@@ -9,6 +9,6 @@ function getCurrentValue(value) {
   return value;
 }
 
-export { getCurrentValue };
+export { currentValue };
 //# sourceMappingURL=out.js.map
 //# sourceMappingURL=utilities.js.map