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

package/index.cjs

@@ -4,13 +4,12 @@ var react = require('react');
 var dom = require('@dnd-kit/dom');
 var hooks = require('@dnd-kit/react/hooks');
 var jsxRuntime = require('react/jsx-runtime');
-var utilities = require('@dnd-kit/react/utilities');
 var state = require('@dnd-kit/state');
+var utilities = require('@dnd-kit/react/utilities');
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -39,22 +38,9 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-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()
-    );
-  }
-});
+var DragDropContext = react.createContext(
+  new dom.DragDropManager()
+);
 function useRenderer() {
   const [_, startTransition2] = react.useTransition();
   const [transitionCount, setTransitionCount] = react.useState(0);
@@ -86,16 +72,6 @@ function useRenderer() {
     }
   };
 }
-var init_renderer = __esm({
-  "src/core/context/renderer.ts"() {
-  }
-});
-
-// src/core/context/DragDropProvider.tsx
-var DragDropProvider_exports = {};
-__export(DragDropProvider_exports, {
-  default: () => DragDropProvider
-});
 function DragDropProvider(_a) {
   var _b = _a, {
     children,
@@ -185,16 +161,6 @@ function DragDropProvider(_a) {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(DragDropContext.Provider, { value: manager, children });
 }
-var init_DragDropProvider = __esm({
-  "src/core/context/DragDropProvider.tsx"() {
-    init_context();
-    init_renderer();
-  }
-});
-var DragDropProvider2 = react.lazy(() => Promise.resolve().then(() => (init_DragDropProvider(), DragDropProvider_exports)));
-
-// src/core/hooks/useDragDropManager.ts
-init_context();
 function useDragDropManager() {
   return react.useContext(DragDropContext);
 }
@@ -203,33 +169,34 @@ function useDragDropManager() {
 function useInstance(initializer) {
   var _a;
   const manager = (_a = useDragDropManager()) != null ? _a : void 0;
-  const [instance] = react.useState(() => initializer(manager));
+  const [instance] = react.useState(() => initializer());
   react.useEffect(() => {
     instance.manager = manager;
     return manager == null ? void 0 : manager.registry.register(instance);
   }, [instance, manager]);
   return instance;
 }
+
+// src/core/draggable/useDraggable.ts
 function useDraggable(input) {
-  const { disabled, id, modifiers, sensors } = input;
+  const { disabled, data, id, modifiers, sensors } = input;
   const handle = utilities.currentValue(input.handle);
   const element = utilities.currentValue(input.element);
   const draggable = useInstance(
-    (manager) => new dom.Draggable(
+    () => new dom.Draggable(
       __spreadProps(__spreadValues({}, input), {
         handle,
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
-      manager
+      void 0
     )
   );
   const isDragSource = hooks.useComputed(() => draggable.isDragSource);
+  const status = hooks.useComputed(() => draggable.status);
   hooks.useOnValueChange(id, () => draggable.id = id);
   hooks.useOnValueChange(handle, () => draggable.handle = handle);
   hooks.useOnValueChange(element, () => draggable.element = element);
+  hooks.useOnValueChange(data, () => data && (draggable.data = data));
   hooks.useOnValueChange(disabled, () => draggable.disabled = disabled === true);
   hooks.useOnValueChange(sensors, () => draggable.sensors = sensors);
   hooks.useOnValueChange(
@@ -250,6 +217,9 @@ function useDraggable(input) {
     get isDragSource() {
       return isDragSource.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: react.useCallback(
       (element2) => {
         draggable.handle = element2 != null ? element2 : void 0;
@@ -265,23 +235,21 @@ function useDraggable(input) {
   };
 }
 function useDroppable(input) {
-  const { collisionDetector, disabled, id, accept, type } = input;
+  const { collisionDetector, data, disabled, id, accept, type } = input;
   const element = utilities.currentValue(input.element);
   const droppable = useInstance(
-    (manager) => new dom.Droppable(
+    () => new dom.Droppable(
       __spreadProps(__spreadValues({}, input), {
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
-      manager
+      void 0
     )
   );
   const isDropTarget = hooks.useComputed(() => droppable.isDropTarget);
   hooks.useOnValueChange(id, () => droppable.id = id);
   hooks.useOnValueChange(accept, () => droppable.id = id, void 0, state.deepEqual);
   hooks.useOnValueChange(collisionDetector, () => droppable.id = id);
+  hooks.useOnValueChange(data, () => data && (droppable.data = data));
   hooks.useOnValueChange(disabled, () => droppable.disabled = disabled === true);
   hooks.useOnValueChange(element, () => droppable.element = element);
   hooks.useOnValueChange(type, () => droppable.id = id);
@@ -312,7 +280,7 @@ function useDragOperation() {
   };
 }
 
-exports.DragDropProvider = DragDropProvider2;
+exports.DragDropProvider = DragDropProvider;
 exports.useDragDropManager = useDragDropManager;
 exports.useDragOperation = useDragOperation;
 exports.useDraggable = useDraggable;

package/index.d.ts

@@ -1,6 +1,5 @@
-import * as react from 'react';
-import { PropsWithChildren } from 'react';
 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 * as _dnd_kit_dom from '@dnd-kit/dom';
@@ -17,9 +16,7 @@ interface Props extends DragDropManagerInput, PropsWithChildren {
     onDragOver?: Events['dragover'];
     onDragEnd?: Events['dragend'];
 }
-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>;
+declare function DragDropProvider({ children, onCollision, onBeforeDragStart, onDragStart, onDragMove, onDragOver, onDragEnd, ...input }: Props): react_jsx_runtime.JSX.Element;
 
 interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T>, 'handle' | 'element'> {
     handle?: RefOrValue<Element>;
@@ -28,6 +25,7 @@ interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T
 declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>): {
     draggable: Draggable<T>;
     readonly isDragSource: boolean;
+    readonly status: "idle" | "dragging" | "dropping";
     handleRef: (element: Element | null) => void;
     ref: (element: Element | null) => void;
 };

package/index.js

@@ -1,11 +1,164 @@
-import { DragDropContext, __spreadProps, __spreadValues } from './chunk-56SCTCQE.js';
-import { lazy, useContext, useCallback, useState, useEffect } from 'react';
-import { Draggable, Droppable } from '@dnd-kit/dom';
-import { useComputed, useOnValueChange } from '@dnd-kit/react/hooks';
-import { currentValue } from '@dnd-kit/react/utilities';
+import { createContext, useState, useEffect, startTransition, useContext, useCallback, useTransition, useRef } from 'react';
+import { DragDropManager, defaultPreset, Draggable, Droppable } from '@dnd-kit/dom';
+import { useLatest, useOnValueChange, useComputed, useConstant } from '@dnd-kit/react/hooks';
+import { jsx } from 'react/jsx-runtime';
 import { deepEqual } from '@dnd-kit/state';
+import { currentValue } from '@dnd-kit/react/utilities';
 
-var DragDropProvider = lazy(() => import('./DragDropProvider-B4S6ULO6.js'));
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var DragDropContext = createContext(
+  new DragDropManager()
+);
+function useRenderer() {
+  const [_, startTransition2] = useTransition();
+  const [transitionCount, setTransitionCount] = useState(0);
+  const rendering = useRef();
+  const resolver = useRef();
+  const renderer = useConstant(() => ({
+    get rendering() {
+      var _a;
+      return (_a = rendering.current) != null ? _a : Promise.resolve();
+    }
+  }));
+  useOnValueChange(transitionCount, () => {
+    var _a;
+    (_a = resolver.current) == null ? void 0 : _a.call(resolver);
+    rendering.current = void 0;
+  });
+  return {
+    renderer,
+    trackRendering(callback) {
+      if (!rendering.current) {
+        rendering.current = new Promise((resolve) => {
+          resolver.current = resolve;
+        });
+      }
+      startTransition2(() => {
+        callback();
+        setTransitionCount((count) => count + 1);
+      });
+    }
+  };
+}
+function DragDropProvider(_a) {
+  var _b = _a, {
+    children,
+    onCollision,
+    onBeforeDragStart,
+    onDragStart,
+    onDragMove,
+    onDragOver,
+    onDragEnd
+  } = _b, input = __objRest(_b, [
+    "children",
+    "onCollision",
+    "onBeforeDragStart",
+    "onDragStart",
+    "onDragMove",
+    "onDragOver",
+    "onDragEnd"
+  ]);
+  var _a2;
+  const { renderer, trackRendering } = useRenderer();
+  const [manager, setManager] = useState(
+    (_a2 = input.manager) != null ? _a2 : null
+  );
+  const { plugins, modifiers, sensors } = 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(() => {
+    var _a3;
+    const manager2 = (_a3 = input.manager) != null ? _a3 : new DragDropManager(input);
+    manager2.renderer = renderer;
+    manager2.monitor.addEventListener("beforedragstart", (event, manager3) => {
+      const callback = handleBeforeDragStart.current;
+      if (callback) {
+        trackRendering(() => callback(event, manager3));
+      }
+    });
+    manager2.monitor.addEventListener(
+      "dragstart",
+      (event, manager3) => {
+        var _a4;
+        return (_a4 = handleDragStart.current) == null ? void 0 : _a4.call(handleDragStart, event, manager3);
+      }
+    );
+    manager2.monitor.addEventListener("dragover", (event, manager3) => {
+      const callback = handleDragOver.current;
+      if (callback) {
+        trackRendering(() => callback(event, manager3));
+      }
+    });
+    manager2.monitor.addEventListener("dragmove", (event, manager3) => {
+      const callback = handleDragMove.current;
+      if (callback) {
+        trackRendering(() => callback(event, manager3));
+      }
+    });
+    manager2.monitor.addEventListener("dragend", (event, manager3) => {
+      const callback = handleDragEnd.current;
+      if (callback) {
+        trackRendering(() => callback(event, manager3));
+      }
+    });
+    manager2.monitor.addEventListener(
+      "collision",
+      (event, manager3) => {
+        var _a4;
+        return (_a4 = handleCollision.current) == null ? void 0 : _a4.call(handleCollision, event, manager3);
+      }
+    );
+    startTransition(() => setManager(manager2));
+    return manager2.destroy;
+  }, [renderer]);
+  useOnValueChange(
+    plugins,
+    () => manager && (manager.plugins = plugins != null ? plugins : defaultPreset.plugins)
+  );
+  useOnValueChange(
+    sensors,
+    () => manager && (manager.sensors = sensors != null ? sensors : defaultPreset.sensors)
+  );
+  useOnValueChange(
+    modifiers,
+    () => manager && (manager.modifiers = modifiers != null ? modifiers : [])
+  );
+  return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: manager, children });
+}
 function useDragDropManager() {
   return useContext(DragDropContext);
 }
@@ -14,33 +167,34 @@ function useDragDropManager() {
 function useInstance(initializer) {
   var _a;
   const manager = (_a = useDragDropManager()) != null ? _a : void 0;
-  const [instance] = useState(() => initializer(manager));
+  const [instance] = useState(() => initializer());
   useEffect(() => {
     instance.manager = manager;
     return manager == null ? void 0 : manager.registry.register(instance);
   }, [instance, manager]);
   return instance;
 }
+
+// src/core/draggable/useDraggable.ts
 function useDraggable(input) {
-  const { disabled, id, modifiers, sensors } = input;
+  const { disabled, data, id, modifiers, sensors } = input;
   const handle = currentValue(input.handle);
   const element = currentValue(input.element);
   const draggable = useInstance(
-    (manager) => new Draggable(
+    () => new Draggable(
       __spreadProps(__spreadValues({}, input), {
         handle,
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
-      manager
+      void 0
     )
   );
   const isDragSource = useComputed(() => draggable.isDragSource);
+  const status = useComputed(() => draggable.status);
   useOnValueChange(id, () => draggable.id = id);
   useOnValueChange(handle, () => draggable.handle = handle);
   useOnValueChange(element, () => draggable.element = element);
+  useOnValueChange(data, () => data && (draggable.data = data));
   useOnValueChange(disabled, () => draggable.disabled = disabled === true);
   useOnValueChange(sensors, () => draggable.sensors = sensors);
   useOnValueChange(
@@ -61,6 +215,9 @@ function useDraggable(input) {
     get isDragSource() {
       return isDragSource.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: useCallback(
       (element2) => {
         draggable.handle = element2 != null ? element2 : void 0;
@@ -76,23 +233,21 @@ function useDraggable(input) {
   };
 }
 function useDroppable(input) {
-  const { collisionDetector, disabled, id, accept, type } = input;
+  const { collisionDetector, data, disabled, id, accept, type } = input;
   const element = currentValue(input.element);
   const droppable = useInstance(
-    (manager) => new Droppable(
+    () => new Droppable(
       __spreadProps(__spreadValues({}, input), {
-        element,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        element
       }),
-      manager
+      void 0
     )
   );
   const isDropTarget = useComputed(() => droppable.isDropTarget);
   useOnValueChange(id, () => droppable.id = id);
   useOnValueChange(accept, () => droppable.id = id, void 0, deepEqual);
   useOnValueChange(collisionDetector, () => droppable.id = id);
+  useOnValueChange(data, () => data && (droppable.data = data));
   useOnValueChange(disabled, () => droppable.disabled = disabled === true);
   useOnValueChange(element, () => droppable.element = element);
   useOnValueChange(type, () => droppable.id = id);

package/package.json

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

package/sortable.cjs

@@ -51,12 +51,9 @@ function useSortable(input) {
         handle,
         element,
         target,
-        feedback,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        feedback
       }),
-      manager != null ? manager : void 0
+      void 0
     );
   });
   react$1.useEffect(() => {
@@ -71,6 +68,7 @@ function useSortable(input) {
   }, [sortable$1, manager]);
   const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget);
   const isDragSource = hooks.useComputed(() => sortable$1.isDragSource);
+  const status = hooks.useComputed(() => sortable$1.status);
   hooks.useOnValueChange(id, () => sortable$1.id = id);
   hooks.useOnValueChange(index, () => sortable$1.index = index, hooks.useIsomorphicLayoutEffect);
   hooks.useOnValueChange(type, () => sortable$1.type = type);
@@ -81,7 +79,7 @@ function useSortable(input) {
     void 0,
     state.deepEqual
   );
-  hooks.useOnValueChange(data, () => sortable$1.data = data != null ? data : null);
+  hooks.useOnValueChange(data, () => data && (sortable$1.data = data));
   hooks.useOnValueChange(
     index,
     () => {
@@ -113,6 +111,9 @@ function useSortable(input) {
     get isDropTarget() {
       return isDropTarget.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: react$1.useCallback(
       (element2) => {
         sortable$1.handle = element2 != null ? element2 : void 0;

package/sortable.d.ts

@@ -10,6 +10,7 @@ interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>,
 declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>): {
     readonly isDragSource: boolean;
     readonly isDropTarget: boolean;
+    readonly status: "idle" | "dragging" | "dropping";
     handleRef: (element: Element | null) => void;
     ref: (element: Element | null) => void;
     sourceRef: (element: Element | null) => void;

package/sortable.js

@@ -49,12 +49,9 @@ function useSortable(input) {
         handle,
         element,
         target,
-        feedback,
-        options: __spreadProps(__spreadValues({}, input.options), {
-          register: false
-        })
+        feedback
       }),
-      manager != null ? manager : void 0
+      void 0
     );
   });
   useEffect(() => {
@@ -69,6 +66,7 @@ function useSortable(input) {
   }, [sortable, manager]);
   const isDropTarget = useComputed(() => sortable.isDropTarget);
   const isDragSource = useComputed(() => sortable.isDragSource);
+  const status = useComputed(() => sortable.status);
   useOnValueChange(id, () => sortable.id = id);
   useOnValueChange(index, () => sortable.index = index, useIsomorphicLayoutEffect);
   useOnValueChange(type, () => sortable.type = type);
@@ -79,7 +77,7 @@ function useSortable(input) {
     void 0,
     deepEqual
   );
-  useOnValueChange(data, () => sortable.data = data != null ? data : null);
+  useOnValueChange(data, () => data && (sortable.data = data));
   useOnValueChange(
     index,
     () => {
@@ -111,6 +109,9 @@ function useSortable(input) {
     get isDropTarget() {
       return isDropTarget.value;
     },
+    get status() {
+      return status.value;
+    },
     handleRef: useCallback(
       (element2) => {
         sortable.handle = element2 != null ? element2 : void 0;