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

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,7 +99,7 @@ function DragDropProvider(_a2) {
     "onDragEnd"
   ]);
   var _a3;
-  const { renderer, trackRendering } = useRenderer();
+  const rendererRef = react.useRef(null);
   const [manager, setManager] = react.useState(
     (_a3 = input.manager) != null ? _a3 : null
   );
@@ -111,6 +112,8 @@ 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) => {
@@ -153,7 +156,7 @@ function DragDropProvider(_a2) {
     );
     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 +172,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);

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,7 +98,7 @@ function DragDropProvider(_a2) {
     "onDragEnd"
   ]);
   var _a3;
-  const { renderer, trackRendering } = useRenderer();
+  const rendererRef = useRef(null);
   const [manager, setManager] = useState(
     (_a3 = input.manager) != null ? _a3 : null
   );
@@ -110,6 +111,8 @@ 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) => {
@@ -152,7 +155,7 @@ function DragDropProvider(_a2) {
     );
     startTransition(() => setManager(manager2));
     return manager2.destroy;
-  }, [renderer, input.manager]);
+  }, [input.manager]);
   useOnValueChange(
     plugins,
     () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins),
@@ -168,7 +171,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);

package/package.json

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