@dnd-kit/react 0.0.3-beta-20240617124334 → 0.0.3

package/hooks.cjs

@@ -4,7 +4,6 @@ var react = require('react');
 var state = require('@dnd-kit/state');
 var reactDom = require('react-dom');
 
-// src/hooks/useConstant.ts
 function useConstant(initializer, dependency) {
   const ref = react.useRef();
   const previousDependency = react.useRef(dependency);

package/hooks.js

@@ -2,7 +2,6 @@ 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
 function useConstant(initializer, dependency) {
   const ref = useRef();
   const previousDependency = useRef(dependency);

package/index.cjs

@@ -3,14 +3,29 @@
 var react = require('react');
 var dom = require('@dnd-kit/dom');
 var hooks = require('@dnd-kit/react/hooks');
+var utilities$1 = require('@dnd-kit/dom/utilities');
 var jsxRuntime = require('react/jsx-runtime');
 var utilities = require('@dnd-kit/react/utilities');
 var state = require('@dnd-kit/state');
 
-// src/core/context/DragDropProvider.tsx
-var DragDropContext = react.createContext(
-  new dom.DragDropManager()
-);
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var DragDropContext;
+var init_context = __esm({
+  "src/core/context/context.ts"() {
+    "use client";
+    DragDropContext = react.createContext(
+      new dom.DragDropManager()
+    );
+  }
+});
 function useRenderer() {
   const [_, startTransition] = react.useTransition();
   const [transitionCount, setTransitionCount] = react.useState(0);
@@ -40,92 +55,125 @@ function useRenderer() {
     }
   };
 }
-var DragDropProvider = react.forwardRef(
-  function DragDropProvider2({
-    children,
-    onCollision,
-    onBeforeDragStart,
-    onDragStart,
-    onDragMove,
-    onDragOver,
-    onDragEnd,
-    ...input
-  }, ref) {
-    const { renderer, trackRendering } = useRenderer();
-    const manager = hooks.useConstant(() => {
-      const instance = input.manager ?? new dom.DragDropManager(input);
-      instance.renderer = renderer;
-      return instance;
-    });
-    const { plugins, modifiers } = input;
-    const handleBeforeDragStart = hooks.useLatest(onBeforeDragStart);
-    const handleDragStart = hooks.useLatest(onDragStart);
-    const handleDragOver = hooks.useLatest(onDragOver);
-    const handleDragMove = hooks.useLatest(onDragMove);
-    const handleDragEnd = hooks.useLatest(onDragEnd);
-    const handleCollision = hooks.useLatest(onCollision);
-    react.useEffect(() => {
-      const listeners = [
-        manager.monitor.addEventListener(
-          "beforedragstart",
-          (event, manager2) => {
-            const callback = handleBeforeDragStart.current;
-            if (callback) {
-              trackRendering(() => callback(event, manager2));
-            }
-          }
-        ),
-        manager.monitor.addEventListener(
-          "dragstart",
-          (event, manager2) => handleDragStart.current?.(event, manager2)
-        ),
-        manager.monitor.addEventListener("dragover", (event, manager2) => {
-          const callback = handleDragOver.current;
-          if (callback) {
-            trackRendering(() => callback(event, manager2));
-          }
-        }),
-        manager.monitor.addEventListener("dragmove", (event, manager2) => {
-          const callback = handleDragMove.current;
-          if (callback) {
-            trackRendering(() => callback(event, manager2));
-          }
-        }),
-        manager.monitor.addEventListener("dragend", (event, manager2) => {
-          const callback = handleDragEnd.current;
-          if (callback) {
-            trackRendering(() => callback(event, manager2));
-          }
-        }),
-        manager.monitor.addEventListener(
-          "collision",
-          (event, manager2) => handleCollision.current?.(event, manager2)
-        )
-      ];
-      return () => {
-        listeners.forEach((unsubscribe) => unsubscribe());
-      };
-    }, [manager]);
-    hooks.useOnValueChange(
-      plugins,
-      () => manager.plugins = plugins ?? dom.defaultPreset.plugins
-    );
-    hooks.useOnValueChange(modifiers, () => manager.modifiers = modifiers ?? []);
-    react.useImperativeHandle(ref, () => manager, [manager]);
-    return /* @__PURE__ */ jsxRuntime.jsxs(DragDropContext.Provider, { value: manager, children: [
-      children,
-      /* @__PURE__ */ jsxRuntime.jsx(Lifecycle, { manager })
-    ] });
+var init_renderer = __esm({
+  "src/core/context/renderer.ts"() {
   }
-);
-var Lifecycle = class extends react.Component {
-  render() {
-    return null;
+});
+var Lifecycle;
+var init_lifecycle = __esm({
+  "src/core/context/lifecycle.ts"() {
+    Lifecycle = class extends react.Component {
+      initialized = false;
+      clearTimeout;
+      componentDidMount() {
+        this.clearTimeout?.();
+        this.clearTimeout = utilities$1.timeout(() => this.initialized = true, 25);
+      }
+      componentWillUnmount() {
+        if (!this.initialized)
+          return;
+        this.props.manager.destroy();
+      }
+      render() {
+        return null;
+      }
+    };
   }
-  componentWillUnmount() {
-    this.props.manager.destroy();
+});
+
+// src/core/context/DragDropProvider.tsx
+var DragDropProvider_exports = {};
+__export(DragDropProvider_exports, {
+  default: () => DragDropProvider
+});
+function DragDropProvider({
+  children,
+  onCollision,
+  onBeforeDragStart,
+  onDragStart,
+  onDragMove,
+  onDragOver,
+  onDragEnd,
+  ...input
+}) {
+  const { renderer, trackRendering } = useRenderer();
+  const createManager = () => {
+    const instance = input.manager ?? new dom.DragDropManager(input);
+    instance.renderer = renderer;
+    return instance;
+  };
+  const manager = hooks.useConstant(createManager);
+  const { plugins, modifiers, sensors } = input;
+  const handleBeforeDragStart = hooks.useLatest(onBeforeDragStart);
+  const handleDragStart = hooks.useLatest(onDragStart);
+  const handleDragOver = hooks.useLatest(onDragOver);
+  const handleDragMove = hooks.useLatest(onDragMove);
+  const handleDragEnd = hooks.useLatest(onDragEnd);
+  const handleCollision = hooks.useLatest(onCollision);
+  react.useEffect(() => {
+    const listeners = [
+      manager.monitor.addEventListener("beforedragstart", (event, manager2) => {
+        const callback = handleBeforeDragStart.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager2));
+        }
+      }),
+      manager.monitor.addEventListener(
+        "dragstart",
+        (event, manager2) => handleDragStart.current?.(event, manager2)
+      ),
+      manager.monitor.addEventListener("dragover", (event, manager2) => {
+        const callback = handleDragOver.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager2));
+        }
+      }),
+      manager.monitor.addEventListener("dragmove", (event, manager2) => {
+        const callback = handleDragMove.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager2));
+        }
+      }),
+      manager.monitor.addEventListener("dragend", (event, manager2) => {
+        const callback = handleDragEnd.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager2));
+        }
+      }),
+      manager.monitor.addEventListener(
+        "collision",
+        (event, manager2) => handleCollision.current?.(event, manager2)
+      )
+    ];
+    return () => {
+      listeners.forEach((dispose) => dispose());
+    };
+  }, []);
+  hooks.useOnValueChange(
+    plugins,
+    () => manager.plugins = plugins ?? dom.defaultPreset.plugins
+  );
+  hooks.useOnValueChange(
+    sensors,
+    () => manager.sensors = sensors ?? dom.defaultPreset.sensors
+  );
+  hooks.useOnValueChange(modifiers, () => manager.modifiers = modifiers ?? []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(DragDropContext.Provider, { value: manager, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Lifecycle, { manager }),
+    children
+  ] });
+}
+var init_DragDropProvider = __esm({
+  "src/core/context/DragDropProvider.tsx"() {
+    init_context();
+    init_renderer();
+    init_lifecycle();
   }
-};
+});
+var DragDropProvider2 = react.lazy(() => Promise.resolve().then(() => (init_DragDropProvider(), DragDropProvider_exports)));
+
+// src/core/hooks/useDragDropManager.ts
+init_context();
 function useDragDropManager() {
   return react.useContext(DragDropContext);
 }
@@ -135,6 +183,7 @@ function useInstance(initializer) {
   const manager = useDragDropManager();
   const instance = hooks.useConstant(() => initializer(manager));
   react.useEffect(() => {
+    instance.manager = manager;
     return manager.registry.register(instance);
   }, [manager]);
   return instance;
@@ -243,7 +292,7 @@ function useDragOperation() {
   };
 }
 
-exports.DragDropProvider = DragDropProvider;
+exports.DragDropProvider = DragDropProvider2;
 exports.useDragDropManager = useDragDropManager;
 exports.useDragOperation = useDragOperation;
 exports.useDraggable = useDraggable;

package/index.d.ts

@@ -1,9 +1,10 @@
 import * as react from 'react';
 import { PropsWithChildren } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as _dnd_kit_abstract from '@dnd-kit/abstract';
 import { DragDropEvents, Data } from '@dnd-kit/abstract';
 import * as _dnd_kit_dom from '@dnd-kit/dom';
-import { DragDropManager, Draggable, Droppable, DragDropManagerInput, DraggableInput, DroppableInput } from '@dnd-kit/dom';
+import { DragDropManagerInput, DragDropManager, Draggable, Droppable, DraggableInput, DroppableInput } from '@dnd-kit/dom';
 import { RefOrValue } from '@dnd-kit/react/utilities';
 
 type Events = DragDropEvents<Draggable, Droppable, DragDropManager>;
@@ -16,7 +17,9 @@ interface Props extends DragDropManagerInput, PropsWithChildren {
     onDragOver?: Events['dragover'];
     onDragEnd?: Events['dragend'];
 }
-declare const DragDropProvider: react.ForwardRefExoticComponent<Props & react.RefAttributes<DragDropManager<Draggable<_dnd_kit_abstract.Data>, Droppable<_dnd_kit_abstract.Data>>>>;
+declare function DragDropProvider$1({ children, onCollision, onBeforeDragStart, onDragStart, onDragMove, onDragOver, onDragEnd, ...input }: Props): react_jsx_runtime.JSX.Element;
+
+declare const DragDropProvider: react.LazyExoticComponent<typeof DragDropProvider$1>;
 
 interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T>, 'handle' | 'element'> {
     handle?: RefOrValue<Element>;

package/index.js

@@ -1,129 +1,11 @@
-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, useOnValueChange, useComputed } from '@dnd-kit/react/hooks';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { DragDropContext } from './chunk-RDUPMLCN.js';
+import { lazy, useContext, useCallback, useEffect } from 'react';
+import { Draggable, Droppable } from '@dnd-kit/dom';
+import { useComputed, useOnValueChange, useConstant } from '@dnd-kit/react/hooks';
 import { currentValue } from '@dnd-kit/react/utilities';
 import { deepEqual } from '@dnd-kit/state';
 
-// src/core/context/DragDropProvider.tsx
-var DragDropContext = createContext(
-  new DragDropManager()
-);
-function useRenderer() {
-  const [_, startTransition] = useTransition();
-  const [transitionCount, setTransitionCount] = useState(0);
-  const rendering = useRef();
-  const resolver = useRef();
-  const renderer = useConstant(() => ({
-    get rendering() {
-      return rendering.current ?? Promise.resolve();
-    }
-  }));
-  useOnValueChange(transitionCount, () => {
-    resolver.current?.();
-    rendering.current = void 0;
-  });
-  return {
-    renderer,
-    trackRendering(callback) {
-      if (!rendering.current) {
-        rendering.current = new Promise((resolve) => {
-          resolver.current = resolve;
-        });
-      }
-      startTransition(() => {
-        callback();
-        setTransitionCount((count) => count + 1);
-      });
-    }
-  };
-}
-var DragDropProvider = forwardRef(
-  function DragDropProvider2({
-    children,
-    onCollision,
-    onBeforeDragStart,
-    onDragStart,
-    onDragMove,
-    onDragOver,
-    onDragEnd,
-    ...input
-  }, ref) {
-    const { renderer, trackRendering } = useRenderer();
-    const manager = useConstant(() => {
-      const instance = input.manager ?? new DragDropManager(input);
-      instance.renderer = renderer;
-      return instance;
-    });
-    const { plugins, modifiers } = input;
-    const handleBeforeDragStart = useLatest(onBeforeDragStart);
-    const handleDragStart = useLatest(onDragStart);
-    const handleDragOver = useLatest(onDragOver);
-    const handleDragMove = useLatest(onDragMove);
-    const handleDragEnd = useLatest(onDragEnd);
-    const handleCollision = useLatest(onCollision);
-    useEffect(() => {
-      const listeners = [
-        manager.monitor.addEventListener(
-          "beforedragstart",
-          (event, manager2) => {
-            const callback = handleBeforeDragStart.current;
-            if (callback) {
-              trackRendering(() => callback(event, manager2));
-            }
-          }
-        ),
-        manager.monitor.addEventListener(
-          "dragstart",
-          (event, manager2) => handleDragStart.current?.(event, manager2)
-        ),
-        manager.monitor.addEventListener("dragover", (event, manager2) => {
-          const callback = handleDragOver.current;
-          if (callback) {
-            trackRendering(() => callback(event, manager2));
-          }
-        }),
-        manager.monitor.addEventListener("dragmove", (event, manager2) => {
-          const callback = handleDragMove.current;
-          if (callback) {
-            trackRendering(() => callback(event, manager2));
-          }
-        }),
-        manager.monitor.addEventListener("dragend", (event, manager2) => {
-          const callback = handleDragEnd.current;
-          if (callback) {
-            trackRendering(() => callback(event, manager2));
-          }
-        }),
-        manager.monitor.addEventListener(
-          "collision",
-          (event, manager2) => handleCollision.current?.(event, manager2)
-        )
-      ];
-      return () => {
-        listeners.forEach((unsubscribe) => unsubscribe());
-      };
-    }, [manager]);
-    useOnValueChange(
-      plugins,
-      () => manager.plugins = plugins ?? defaultPreset.plugins
-    );
-    useOnValueChange(modifiers, () => manager.modifiers = modifiers ?? []);
-    useImperativeHandle(ref, () => manager, [manager]);
-    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();
-  }
-};
+var DragDropProvider = lazy(() => import('./DragDropProvider-FMQK5X4L.js'));
 function useDragDropManager() {
   return useContext(DragDropContext);
 }
@@ -133,6 +15,7 @@ function useInstance(initializer) {
   const manager = useDragDropManager();
   const instance = useConstant(() => initializer(manager));
   useEffect(() => {
+    instance.manager = manager;
     return manager.registry.register(instance);
   }, [manager]);
   return instance;

package/package.json

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

package/sortable.cjs

@@ -7,7 +7,6 @@ var react = require('@dnd-kit/react');
 var hooks = require('@dnd-kit/react/hooks');
 var utilities = require('@dnd-kit/react/utilities');
 
-// src/sortable/useSortable.ts
 function useSortable(input) {
   const {
     accept,

package/sortable.js

@@ -5,7 +5,6 @@ import { useDragDropManager } from '@dnd-kit/react';
 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) {
   const {
     accept,