@dnd-kit/react 0.1.17 → 0.1.18-beta-20250523142052

package/index.cjs

@@ -43,41 +43,42 @@ var defaultManager = new dom.DragDropManager();
 var DragDropContext = react.createContext(
   defaultManager
 );
-function useRenderer() {
-  const [_, startTransition2] = react.useTransition();
-  const [transitionCount, setTransitionCount] = react.useState(0);
-  const rendering = react.useRef(null);
-  const resolver = react.useRef(null);
-  const renderer = hooks.useConstant(() => ({
-    get rendering() {
-      var _a2;
-      return (_a2 = rendering.current) != null ? _a2 : Promise.resolve();
-    }
-  }));
-  hooks.useOnValueChange(
-    transitionCount,
-    () => {
+var Renderer = react.memo(
+  react.forwardRef(({ children }, ref) => {
+    const [transitionCount, setTransitionCount] = react.useState(0);
+    const rendering = react.useRef(null);
+    const resolver = react.useRef(null);
+    const renderer = react.useMemo(
+      () => ({
+        renderer: {
+          get rendering() {
+            var _a2;
+            return (_a2 = rendering.current) != null ? _a2 : Promise.resolve();
+          }
+        },
+        trackRendering(callback) {
+          if (!rendering.current) {
+            rendering.current = new Promise((resolve) => {
+              resolver.current = resolve;
+            });
+          }
+          react.startTransition(() => {
+            callback();
+            setTransitionCount((count) => count + 1);
+          });
+        }
+      }),
+      []
+    );
+    hooks.useIsomorphicLayoutEffect(() => {
       var _a2;
       (_a2 = resolver.current) == null ? void 0 : _a2.call(resolver);
       rendering.current = null;
-    },
-    react.useLayoutEffect
-  );
-  return {
-    renderer,
-    trackRendering(callback) {
-      if (!rendering.current) {
-        rendering.current = new Promise((resolve) => {
-          resolver.current = resolve;
-        });
-      }
-      startTransition2(() => {
-        callback();
-        setTransitionCount((count) => count + 1);
-      });
-    }
-  };
-}
+    }, [children, transitionCount]);
+    react.useImperativeHandle(ref, () => renderer);
+    return null;
+  })
+);
 var options = [void 0, state.deepEqual];
 function DragDropProvider(_a2) {
   var _b = _a2, {
@@ -98,10 +99,8 @@ function DragDropProvider(_a2) {
     "onDragEnd"
   ]);
   var _a3;
-  const { renderer, trackRendering } = useRenderer();
-  const [manager, setManager] = react.useState(
-    (_a3 = input.manager) != null ? _a3 : null
-  );
+  const rendererRef = react.useRef(null);
+  const [manager, setManager] = react.useState((_a3 = input.manager) != null ? _a3 : null);
   const { plugins, modifiers, sensors } = input;
   const handleBeforeDragStart = hooks.useLatest(onBeforeDragStart);
   const handleDragStart = hooks.useLatest(onDragStart);
@@ -111,49 +110,51 @@ function DragDropProvider(_a2) {
   const handleCollision = hooks.useLatest(onCollision);
   react.useEffect(() => {
     var _a4;
+    if (!rendererRef.current) throw new Error("Renderer not found");
+    const { renderer, trackRendering } = rendererRef.current;
     const manager2 = (_a4 = input.manager) != null ? _a4 : new dom.DragDropManager(input);
     manager2.renderer = renderer;
-    manager2.monitor.addEventListener("beforedragstart", (event, manager3) => {
+    manager2.monitor.addEventListener("beforedragstart", (event) => {
       const callback = handleBeforeDragStart.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
     manager2.monitor.addEventListener(
       "dragstart",
-      (event, manager3) => {
+      (event) => {
         var _a5;
-        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager3);
+        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager2);
       }
     );
-    manager2.monitor.addEventListener("dragover", (event, manager3) => {
+    manager2.monitor.addEventListener("dragover", (event) => {
       const callback = handleDragOver.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
-    manager2.monitor.addEventListener("dragmove", (event, manager3) => {
+    manager2.monitor.addEventListener("dragmove", (event) => {
       const callback = handleDragMove.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
-    manager2.monitor.addEventListener("dragend", (event, manager3) => {
+    manager2.monitor.addEventListener("dragend", (event) => {
       const callback = handleDragEnd.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
     manager2.monitor.addEventListener(
       "collision",
-      (event, manager3) => {
+      (event) => {
         var _a5;
-        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager3);
+        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager2);
       }
     );
     react.startTransition(() => setManager(manager2));
     return manager2.destroy;
-  }, [renderer, input.manager]);
+  }, [input.manager]);
   hooks.useOnValueChange(
     plugins,
     () => manager && (manager.plugins = plugins != null ? plugins : dom.defaultPreset.plugins),
@@ -169,7 +170,10 @@ function DragDropProvider(_a2) {
     () => manager && (manager.modifiers = modifiers != null ? modifiers : dom.defaultPreset.modifiers),
     ...options
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(DragDropContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsxRuntime.jsxs(DragDropContext.Provider, { value: manager, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Renderer, { ref: rendererRef, children }),
+    children
+  ] });
 }
 function useDragDropManager() {
   return react.useContext(DragDropContext);
@@ -257,15 +261,20 @@ function shouldUpdateSynchronously(key, oldValue, newValue) {
   if (key === "isDragSource" && !newValue && oldValue) return true;
   return false;
 }
-function DragOverlay({ children, className, style, tag }) {
+function DragOverlay({
+  children,
+  className,
+  style,
+  tag,
+  disabled
+}) {
+  var _a2;
   const ref = react.useRef(null);
   const manager = useDragDropManager();
-  const source = hooks.useComputed(
-    () => manager == null ? void 0 : manager.dragOperation.source,
-    [manager]
-  ).value;
+  const source = (_a2 = hooks.useComputed(() => manager == null ? void 0 : manager.dragOperation.source, [manager]).value) != null ? _a2 : null;
+  const isDisabled = typeof disabled === "function" ? disabled(source) : disabled;
   react.useEffect(() => {
-    if (!ref.current || !manager) return;
+    if (!ref.current || !manager || isDisabled) return;
     const feedback = manager.plugins.find(
       (plugin) => plugin instanceof dom.Feedback
     );
@@ -274,7 +283,7 @@ function DragOverlay({ children, className, style, tag }) {
     return () => {
       feedback.overlay = void 0;
     };
-  }, [manager]);
+  }, [manager, isDisabled]);
   const patchedManager = react.useMemo(() => {
     if (!manager) return null;
     const patchedRegistry = new Proxy(manager.registry, {
@@ -300,7 +309,7 @@ function DragOverlay({ children, className, style, tag }) {
     renderChildren()
   ) });
   function renderChildren() {
-    if (!source) return null;
+    if (!source || isDisabled) return null;
     if (typeof children === "function") {
       return /* @__PURE__ */ jsxRuntime.jsx(Children, { source, children });
     }

package/index.d.ts

@@ -1,23 +1,21 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PropsWithChildren, RefObject, MutableRefObject, ReactNode } from 'react';
-import * as _dnd_kit_abstract from '@dnd-kit/abstract';
 import { Data, DragDropEvents, 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 { Draggable, Droppable, DragDropManager, DragDropManagerInput, DraggableInput, DroppableInput } from '@dnd-kit/dom';
 export { DragDropManager, KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
 import { CleanupFunction } from '@dnd-kit/state';
 
-type Events$1<T extends Data = Data> = DragDropEvents<Draggable<T>, Droppable<T>, DragDropManager<Draggable<T>, Droppable<T>>>;
-interface Props$1<T extends Data = Data> extends DragDropManagerInput, PropsWithChildren {
-    manager?: DragDropManager;
-    onBeforeDragStart?: Events$1<T>['beforedragstart'];
-    onCollision?: Events$1<T>['collision'];
-    onDragStart?: Events$1<T>['dragstart'];
-    onDragMove?: Events$1<T>['dragmove'];
-    onDragOver?: Events$1<T>['dragover'];
-    onDragEnd?: Events$1<T>['dragend'];
+type Events$1<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>> = DragDropEvents<U, V, W>;
+interface Props$1<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>> extends DragDropManagerInput, PropsWithChildren {
+    manager?: W;
+    onBeforeDragStart?: Events$1<T, U, V, W>['beforedragstart'];
+    onCollision?: Events$1<T, U, V, W>['collision'];
+    onDragStart?: Events$1<T, U, V, W>['dragstart'];
+    onDragMove?: Events$1<T, U, V, W>['dragmove'];
+    onDragOver?: Events$1<T, U, V, W>['dragover'];
+    onDragEnd?: Events$1<T, U, V, W>['dragend'];
 }
-declare function DragDropProvider<T extends Data = Data>({ children, onCollision, onBeforeDragStart, onDragStart, onDragMove, onDragOver, onDragEnd, ...input }: Props$1<T>): react_jsx_runtime.JSX.Element;
+declare function DragDropProvider<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>>({ children, onCollision, onBeforeDragStart, onDragStart, onDragMove, onDragOver, onDragEnd, ...input }: Props$1<T, U, V, W>): react_jsx_runtime.JSX.Element;
 
 type Ref<T> = RefObject<T | null | undefined> | MutableRefObject<T>;
 type RefOrValue<T> = T | Ref<T> | null | undefined;
@@ -35,13 +33,14 @@ declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>
     ref: (element: Element | null) => void;
 };
 
-interface Props {
+interface Props<T extends Data, U extends Draggable<T>> {
     className?: string;
-    children: ReactNode | ((source: Draggable) => ReactNode);
+    children: ReactNode | ((source: U) => ReactNode);
     style?: React.CSSProperties;
     tag?: string;
+    disabled?: boolean | ((source: U | null) => boolean);
 }
-declare function DragOverlay({ children, className, style, tag }: Props): react_jsx_runtime.JSX.Element;
+declare function DragOverlay<T extends Data, U extends Draggable<T>>({ children, className, style, tag, disabled, }: Props<T, U>): react_jsx_runtime.JSX.Element;
 
 interface UseDroppableInput<T extends Data = Data> extends Omit<DroppableInput<T>, 'element'> {
     element?: RefOrValue<Element>;
@@ -52,7 +51,7 @@ declare function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>
     ref: (element: Element | null) => void;
 };
 
-declare function useDragDropManager(): _dnd_kit_dom.DragDropManager<_dnd_kit_dom.Draggable<_dnd_kit_abstract.Data>, _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data>> | null;
+declare function useDragDropManager<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>>(): W | null;
 
 type DragDropEventMap = {
     beforedragstart: 'onBeforeDragStart';
@@ -61,19 +60,19 @@ type EventHandlerName<T extends string> = T extends keyof DragDropEventMap ? Dra
 /**
  * Type for all possible event handlers
  */
-type Events<T extends Data> = DragDropEvents<Draggable<T>, Droppable<T>, DragDropManager<Draggable<T>, Droppable<T>>>;
-type EventHandlers<T extends Data = Data> = {
-    [K in keyof Events<T> as EventHandlerName<K>]: Events<T>[K];
+type Events<T extends Data, U extends Draggable<T>, V extends Droppable<T>, W extends DragDropManager<T, U, V>> = DragDropEvents<U, V, W>;
+type EventHandlers<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>> = {
+    [K in keyof Events<T, U, V, W> as EventHandlerName<K>]: Events<T, U, V, W>[K];
 };
 /**
  * Hook to monitor drag and drop events anywhere within a DragDropProvider
  * @param handlers Object containing event handlers for drag and drop events
  */
-declare function useDragDropMonitor<T extends Data = Data>(handlers: Partial<EventHandlers<T>>): void;
+declare function useDragDropMonitor<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>>(handlers: Partial<EventHandlers<T, U, V, W>>): void;
 
-declare function useDragOperation(): {
-    readonly source: _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data> | null | undefined;
-    readonly target: _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data> | null | undefined;
+declare function useDragOperation<T extends Data = Data, U extends Draggable<T> = Draggable<T>, V extends Droppable<T> = Droppable<T>, W extends DragDropManager<T, U, V> = DragDropManager<T, U, V>>(): {
+    readonly source: U | null | undefined;
+    readonly target: V | null | undefined;
 };
 
 interface Instance<T extends DragDropManager$1<any, any> = DragDropManager$1<any, any>> {

package/index.js

@@ -1,9 +1,9 @@
-import { createContext, useState, useEffect, startTransition, useContext, useCallback, useRef, useMemo, createElement, useTransition, useLayoutEffect } from 'react';
+import { createContext, memo, forwardRef, useState, useRef, useMemo, startTransition, useImperativeHandle, useEffect, useContext, useCallback, createElement } from 'react';
 import { DragDropManager, defaultPreset, Draggable, Feedback, Droppable } from '@dnd-kit/dom';
 export { KeyboardSensor, PointerSensor } from '@dnd-kit/dom';
-import { useLatest, useOnValueChange, useIsomorphicLayoutEffect, useDeepSignal, useOnElementChange, useComputed, useConstant } from '@dnd-kit/react/hooks';
+import { useIsomorphicLayoutEffect, useLatest, useOnValueChange, useDeepSignal, useOnElementChange, useComputed } from '@dnd-kit/react/hooks';
 import { deepEqual, ValueHistory, derived, batch } from '@dnd-kit/state';
-import { jsx } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { currentValue } from '@dnd-kit/react/utilities';
 import { CollisionPriority, CollisionType } from '@dnd-kit/abstract';
 
@@ -42,41 +42,42 @@ var defaultManager = new DragDropManager();
 var DragDropContext = createContext(
   defaultManager
 );
-function useRenderer() {
-  const [_, startTransition2] = useTransition();
-  const [transitionCount, setTransitionCount] = useState(0);
-  const rendering = useRef(null);
-  const resolver = useRef(null);
-  const renderer = useConstant(() => ({
-    get rendering() {
-      var _a2;
-      return (_a2 = rendering.current) != null ? _a2 : Promise.resolve();
-    }
-  }));
-  useOnValueChange(
-    transitionCount,
-    () => {
+var Renderer = memo(
+  forwardRef(({ children }, ref) => {
+    const [transitionCount, setTransitionCount] = useState(0);
+    const rendering = useRef(null);
+    const resolver = useRef(null);
+    const renderer = useMemo(
+      () => ({
+        renderer: {
+          get rendering() {
+            var _a2;
+            return (_a2 = rendering.current) != null ? _a2 : Promise.resolve();
+          }
+        },
+        trackRendering(callback) {
+          if (!rendering.current) {
+            rendering.current = new Promise((resolve) => {
+              resolver.current = resolve;
+            });
+          }
+          startTransition(() => {
+            callback();
+            setTransitionCount((count) => count + 1);
+          });
+        }
+      }),
+      []
+    );
+    useIsomorphicLayoutEffect(() => {
       var _a2;
       (_a2 = resolver.current) == null ? void 0 : _a2.call(resolver);
       rendering.current = null;
-    },
-    useLayoutEffect
-  );
-  return {
-    renderer,
-    trackRendering(callback) {
-      if (!rendering.current) {
-        rendering.current = new Promise((resolve) => {
-          resolver.current = resolve;
-        });
-      }
-      startTransition2(() => {
-        callback();
-        setTransitionCount((count) => count + 1);
-      });
-    }
-  };
-}
+    }, [children, transitionCount]);
+    useImperativeHandle(ref, () => renderer);
+    return null;
+  })
+);
 var options = [void 0, deepEqual];
 function DragDropProvider(_a2) {
   var _b = _a2, {
@@ -97,10 +98,8 @@ function DragDropProvider(_a2) {
     "onDragEnd"
   ]);
   var _a3;
-  const { renderer, trackRendering } = useRenderer();
-  const [manager, setManager] = useState(
-    (_a3 = input.manager) != null ? _a3 : null
-  );
+  const rendererRef = useRef(null);
+  const [manager, setManager] = useState((_a3 = input.manager) != null ? _a3 : null);
   const { plugins, modifiers, sensors } = input;
   const handleBeforeDragStart = useLatest(onBeforeDragStart);
   const handleDragStart = useLatest(onDragStart);
@@ -110,49 +109,51 @@ function DragDropProvider(_a2) {
   const handleCollision = useLatest(onCollision);
   useEffect(() => {
     var _a4;
+    if (!rendererRef.current) throw new Error("Renderer not found");
+    const { renderer, trackRendering } = rendererRef.current;
     const manager2 = (_a4 = input.manager) != null ? _a4 : new DragDropManager(input);
     manager2.renderer = renderer;
-    manager2.monitor.addEventListener("beforedragstart", (event, manager3) => {
+    manager2.monitor.addEventListener("beforedragstart", (event) => {
       const callback = handleBeforeDragStart.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
     manager2.monitor.addEventListener(
       "dragstart",
-      (event, manager3) => {
+      (event) => {
         var _a5;
-        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager3);
+        return (_a5 = handleDragStart.current) == null ? void 0 : _a5.call(handleDragStart, event, manager2);
       }
     );
-    manager2.monitor.addEventListener("dragover", (event, manager3) => {
+    manager2.monitor.addEventListener("dragover", (event) => {
       const callback = handleDragOver.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
-    manager2.monitor.addEventListener("dragmove", (event, manager3) => {
+    manager2.monitor.addEventListener("dragmove", (event) => {
       const callback = handleDragMove.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
-    manager2.monitor.addEventListener("dragend", (event, manager3) => {
+    manager2.monitor.addEventListener("dragend", (event) => {
       const callback = handleDragEnd.current;
       if (callback) {
-        trackRendering(() => callback(event, manager3));
+        trackRendering(() => callback(event, manager2));
       }
     });
     manager2.monitor.addEventListener(
       "collision",
-      (event, manager3) => {
+      (event) => {
         var _a5;
-        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager3);
+        return (_a5 = handleCollision.current) == null ? void 0 : _a5.call(handleCollision, event, manager2);
       }
     );
     startTransition(() => setManager(manager2));
     return manager2.destroy;
-  }, [renderer, input.manager]);
+  }, [input.manager]);
   useOnValueChange(
     plugins,
     () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins),
@@ -168,7 +169,10 @@ function DragDropProvider(_a2) {
     () => manager && (manager.modifiers = modifiers != null ? modifiers : defaultPreset.modifiers),
     ...options
   );
-  return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: manager, children });
+  return /* @__PURE__ */ jsxs(DragDropContext.Provider, { value: manager, children: [
+    /* @__PURE__ */ jsx(Renderer, { ref: rendererRef, children }),
+    children
+  ] });
 }
 function useDragDropManager() {
   return useContext(DragDropContext);
@@ -256,15 +260,20 @@ function shouldUpdateSynchronously(key, oldValue, newValue) {
   if (key === "isDragSource" && !newValue && oldValue) return true;
   return false;
 }
-function DragOverlay({ children, className, style, tag }) {
+function DragOverlay({
+  children,
+  className,
+  style,
+  tag,
+  disabled
+}) {
+  var _a2;
   const ref = useRef(null);
   const manager = useDragDropManager();
-  const source = useComputed(
-    () => manager == null ? void 0 : manager.dragOperation.source,
-    [manager]
-  ).value;
+  const source = (_a2 = useComputed(() => manager == null ? void 0 : manager.dragOperation.source, [manager]).value) != null ? _a2 : null;
+  const isDisabled = typeof disabled === "function" ? disabled(source) : disabled;
   useEffect(() => {
-    if (!ref.current || !manager) return;
+    if (!ref.current || !manager || isDisabled) return;
     const feedback = manager.plugins.find(
       (plugin) => plugin instanceof Feedback
     );
@@ -273,7 +282,7 @@ function DragOverlay({ children, className, style, tag }) {
     return () => {
       feedback.overlay = void 0;
     };
-  }, [manager]);
+  }, [manager, isDisabled]);
   const patchedManager = useMemo(() => {
     if (!manager) return null;
     const patchedRegistry = new Proxy(manager.registry, {
@@ -299,7 +308,7 @@ function DragOverlay({ children, className, style, tag }) {
     renderChildren()
   ) });
   function renderChildren() {
-    if (!source) return null;
+    if (!source || isDisabled) return null;
     if (typeof children === "function") {
       return /* @__PURE__ */ jsx(Children, { source, children });
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.1.17",
+  "version": "0.1.18-beta-20250523142052",
   "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.1.17",
-    "@dnd-kit/dom": "^0.1.17",
-    "@dnd-kit/state": "^0.1.17",
+    "@dnd-kit/abstract": "0.1.18-beta-20250523142052",
+    "@dnd-kit/dom": "0.1.18-beta-20250523142052",
+    "@dnd-kit/state": "0.1.18-beta-20250523142052",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {