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

package/hooks.cjs

@@ -4,16 +4,11 @@ var react = require('react');
 var state = require('@dnd-kit/state');
 var reactDom = require('react-dom');
 
-function useConstant(initializer, dependency) {
+function useConstant(initializer) {
   const ref = react.useRef();
-  const previousDependency = react.useRef(dependency);
   if (!ref.current) {
     ref.current = initializer();
   }
-  if (previousDependency.current !== dependency) {
-    previousDependency.current = dependency;
-    ref.current = initializer();
-  }
   return ref.current;
 }
 var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";

package/hooks.d.ts

@@ -2,7 +2,7 @@ import * as _preact_signals_core from '@preact/signals-core';
 import * as react from 'react';
 import { EffectCallback, DependencyList, useLayoutEffect, useEffect } from 'react';
 
-declare function useConstant<T = any>(initializer: () => T, dependency?: any): T;
+declare function useConstant<T = any>(initializer: () => T): T;
 
 declare function useComputed<T = any>(compute: () => T, sync?: boolean): _preact_signals_core.ReadonlySignal<T>;
 

package/hooks.js

@@ -2,16 +2,11 @@ import { useRef, useLayoutEffect, useEffect, useState } from 'react';
 import { computed, Signal, signal, effect } from '@dnd-kit/state';
 import { flushSync } from 'react-dom';
 
-function useConstant(initializer, dependency) {
+function useConstant(initializer) {
   const ref = useRef();
-  const previousDependency = useRef(dependency);
   if (!ref.current) {
     ref.current = initializer();
   }
-  if (previousDependency.current !== dependency) {
-    previousDependency.current = dependency;
-    ref.current = initializer();
-  }
   return ref.current;
 }
 var canUseDOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";

package/index.cjs

@@ -3,13 +3,42 @@
 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');
 
 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;
+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 __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
@@ -27,17 +56,19 @@ var init_context = __esm({
   }
 });
 function useRenderer() {
-  const [_, startTransition] = react.useTransition();
+  const [_, startTransition2] = react.useTransition();
   const [transitionCount, setTransitionCount] = react.useState(0);
   const rendering = react.useRef();
   const resolver = react.useRef();
   const renderer = hooks.useConstant(() => ({
     get rendering() {
-      return rendering.current ?? Promise.resolve();
+      var _a;
+      return (_a = rendering.current) != null ? _a : Promise.resolve();
     }
   }));
   hooks.useOnValueChange(transitionCount, () => {
-    resolver.current?.();
+    var _a;
+    (_a = resolver.current) == null ? void 0 : _a.call(resolver);
     rendering.current = void 0;
   });
   return {
@@ -48,7 +79,7 @@ function useRenderer() {
           resolver.current = resolve;
         });
       }
-      startTransition(() => {
+      startTransition2(() => {
         callback();
         setTransitionCount((count) => count + 1);
       });
@@ -59,50 +90,35 @@ var init_renderer = __esm({
   "src/core/context/renderer.ts"() {
   }
 });
-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;
-      }
-    };
-  }
-});
 
 // src/core/context/DragDropProvider.tsx
 var DragDropProvider_exports = {};
 __export(DragDropProvider_exports, {
   default: () => DragDropProvider
 });
-function DragDropProvider({
-  children,
-  onCollision,
-  onBeforeDragStart,
-  onDragStart,
-  onDragMove,
-  onDragOver,
-  onDragEnd,
-  ...input
-}) {
+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 createManager = () => {
-    const instance = input.manager ?? new dom.DragDropManager(input);
-    instance.renderer = renderer;
-    return instance;
-  };
-  const manager = hooks.useConstant(createManager);
+  const [manager, setManager] = react.useState(
+    (_a2 = input.manager) != null ? _a2 : null
+  );
   const { plugins, modifiers, sensors } = input;
   const handleBeforeDragStart = hooks.useLatest(onBeforeDragStart);
   const handleDragStart = hooks.useLatest(onDragStart);
@@ -111,63 +127,68 @@ function DragDropProvider({
   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());
-    };
-  }, []);
+    var _a3;
+    const manager2 = (_a3 = input.manager) != null ? _a3 : new dom.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);
+      }
+    );
+    react.startTransition(() => setManager(manager2));
+    return manager2.destroy;
+  }, [renderer]);
   hooks.useOnValueChange(
     plugins,
-    () => manager.plugins = plugins ?? dom.defaultPreset.plugins
+    () => manager && (manager.plugins = plugins != null ? plugins : dom.defaultPreset.plugins)
   );
   hooks.useOnValueChange(
     sensors,
-    () => manager.sensors = sensors ?? dom.defaultPreset.sensors
+    () => manager && (manager.sensors = sensors != null ? sensors : dom.defaultPreset.sensors)
+  );
+  hooks.useOnValueChange(
+    modifiers,
+    () => manager && (manager.modifiers = modifiers != null ? modifiers : [])
   );
-  hooks.useOnValueChange(modifiers, () => manager.modifiers = modifiers ?? []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(DragDropContext.Provider, { value: manager, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Lifecycle, { manager }),
-    children
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(DragDropContext.Provider, { value: 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)));
@@ -180,12 +201,13 @@ function useDragDropManager() {
 
 // src/core/hooks/useInstance.ts
 function useInstance(initializer) {
-  const manager = useDragDropManager();
-  const instance = hooks.useConstant(() => initializer(manager));
+  var _a;
+  const manager = (_a = useDragDropManager()) != null ? _a : void 0;
+  const [instance] = react.useState(() => initializer(manager));
   react.useEffect(() => {
     instance.manager = manager;
-    return manager.registry.register(instance);
-  }, [manager]);
+    return manager == null ? void 0 : manager.registry.register(instance);
+  }, [instance, manager]);
   return instance;
 }
 function useDraggable(input) {
@@ -194,15 +216,13 @@ function useDraggable(input) {
   const element = utilities.currentValue(input.element);
   const draggable = useInstance(
     (manager) => new dom.Draggable(
-      {
-        ...input,
+      __spreadProps(__spreadValues({}, input), {
         handle,
         element,
-        options: {
-          ...input.options,
+        options: __spreadProps(__spreadValues({}, input.options), {
           register: false
-        }
-      },
+        })
+      }),
       manager
     )
   );
@@ -220,7 +240,10 @@ function useDraggable(input) {
   );
   hooks.useOnValueChange(
     input.feedback,
-    () => draggable.feedback = input.feedback ?? "default"
+    () => {
+      var _a;
+      return draggable.feedback = (_a = input.feedback) != null ? _a : "default";
+    }
   );
   return {
     draggable,
@@ -229,13 +252,13 @@ function useDraggable(input) {
     },
     handleRef: react.useCallback(
       (element2) => {
-        draggable.handle = element2 ?? void 0;
+        draggable.handle = element2 != null ? element2 : void 0;
       },
       [draggable]
     ),
     ref: react.useCallback(
       (element2) => {
-        draggable.element = element2 ?? void 0;
+        draggable.element = element2 != null ? element2 : void 0;
       },
       [draggable]
     )
@@ -246,14 +269,12 @@ function useDroppable(input) {
   const element = utilities.currentValue(input.element);
   const droppable = useInstance(
     (manager) => new dom.Droppable(
-      {
-        ...input,
+      __spreadProps(__spreadValues({}, input), {
         element,
-        options: {
-          ...input.options,
+        options: __spreadProps(__spreadValues({}, input.options), {
           register: false
-        }
-      },
+        })
+      }),
       manager
     )
   );
@@ -270,7 +291,7 @@ function useDroppable(input) {
     },
     ref: react.useCallback(
       (element2) => {
-        droppable.element = element2 ?? void 0;
+        droppable.element = element2 != null ? element2 : void 0;
       },
       [droppable]
     ),
@@ -279,9 +300,8 @@ function useDroppable(input) {
 }
 function useDragOperation() {
   const manager = useDragDropManager();
-  const { dragOperation } = manager;
-  const source = hooks.useComputed(() => dragOperation.source);
-  const target = hooks.useComputed(() => dragOperation.target);
+  const source = hooks.useComputed(() => manager == null ? void 0 : manager.dragOperation.source);
+  const target = hooks.useComputed(() => manager == null ? void 0 : manager.dragOperation.target);
   return {
     get source() {
       return source.value;

package/index.d.ts

@@ -41,11 +41,11 @@ declare function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>
     droppable: Droppable<T>;
 };
 
-declare function useDragDropManager(): _dnd_kit_dom.DragDropManager<_dnd_kit_dom.Draggable<_dnd_kit_abstract.Data>, _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data>>;
+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 useDragOperation(): {
-    readonly source: _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data> | null;
-    readonly target: _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data> | null;
+    readonly source: _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data> | null | undefined;
+    readonly target: _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data> | null | undefined;
 };
 
 export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable };

package/index.js

@@ -1,23 +1,24 @@
-import { DragDropContext } from './chunk-RDUPMLCN.js';
-import { lazy, useContext, useCallback, useEffect } from 'react';
+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, useConstant } from '@dnd-kit/react/hooks';
+import { useComputed, useOnValueChange } from '@dnd-kit/react/hooks';
 import { currentValue } from '@dnd-kit/react/utilities';
 import { deepEqual } from '@dnd-kit/state';
 
-var DragDropProvider = lazy(() => import('./DragDropProvider-FMQK5X4L.js'));
+var DragDropProvider = lazy(() => import('./DragDropProvider-B4S6ULO6.js'));
 function useDragDropManager() {
   return useContext(DragDropContext);
 }
 
 // src/core/hooks/useInstance.ts
 function useInstance(initializer) {
-  const manager = useDragDropManager();
-  const instance = useConstant(() => initializer(manager));
+  var _a;
+  const manager = (_a = useDragDropManager()) != null ? _a : void 0;
+  const [instance] = useState(() => initializer(manager));
   useEffect(() => {
     instance.manager = manager;
-    return manager.registry.register(instance);
-  }, [manager]);
+    return manager == null ? void 0 : manager.registry.register(instance);
+  }, [instance, manager]);
   return instance;
 }
 function useDraggable(input) {
@@ -26,15 +27,13 @@ function useDraggable(input) {
   const element = currentValue(input.element);
   const draggable = useInstance(
     (manager) => new Draggable(
-      {
-        ...input,
+      __spreadProps(__spreadValues({}, input), {
         handle,
         element,
-        options: {
-          ...input.options,
+        options: __spreadProps(__spreadValues({}, input.options), {
           register: false
-        }
-      },
+        })
+      }),
       manager
     )
   );
@@ -52,7 +51,10 @@ function useDraggable(input) {
   );
   useOnValueChange(
     input.feedback,
-    () => draggable.feedback = input.feedback ?? "default"
+    () => {
+      var _a;
+      return draggable.feedback = (_a = input.feedback) != null ? _a : "default";
+    }
   );
   return {
     draggable,
@@ -61,13 +63,13 @@ function useDraggable(input) {
     },
     handleRef: useCallback(
       (element2) => {
-        draggable.handle = element2 ?? void 0;
+        draggable.handle = element2 != null ? element2 : void 0;
       },
       [draggable]
     ),
     ref: useCallback(
       (element2) => {
-        draggable.element = element2 ?? void 0;
+        draggable.element = element2 != null ? element2 : void 0;
       },
       [draggable]
     )
@@ -78,14 +80,12 @@ function useDroppable(input) {
   const element = currentValue(input.element);
   const droppable = useInstance(
     (manager) => new Droppable(
-      {
-        ...input,
+      __spreadProps(__spreadValues({}, input), {
         element,
-        options: {
-          ...input.options,
+        options: __spreadProps(__spreadValues({}, input.options), {
           register: false
-        }
-      },
+        })
+      }),
       manager
     )
   );
@@ -102,7 +102,7 @@ function useDroppable(input) {
     },
     ref: useCallback(
       (element2) => {
-        droppable.element = element2 ?? void 0;
+        droppable.element = element2 != null ? element2 : void 0;
       },
       [droppable]
     ),
@@ -111,9 +111,8 @@ function useDroppable(input) {
 }
 function useDragOperation() {
   const manager = useDragDropManager();
-  const { dragOperation } = manager;
-  const source = useComputed(() => dragOperation.source);
-  const target = useComputed(() => dragOperation.target);
+  const source = useComputed(() => manager == null ? void 0 : manager.dragOperation.source);
+  const target = useComputed(() => manager == null ? void 0 : manager.dragOperation.target);
   return {
     get source() {
       return source.value;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.3",
+  "version": "0.0.4-beta-20240621131401",
   "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",
-    "@dnd-kit/dom": "^0.0.3",
-    "@dnd-kit/state": "^0.0.3",
+    "@dnd-kit/abstract": "0.0.4-beta-20240621131401",
+    "@dnd-kit/dom": "0.0.4-beta-20240621131401",
+    "@dnd-kit/state": "0.0.4-beta-20240621131401",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {
@@ -71,8 +71,8 @@
     "eslint": "^8.38.0",
     "@dnd-kit/eslint-config": "*",
     "react": "^18.1.0",
-    "tsup": "^7.2.0",
-    "typescript": "^5.1.6"
+    "tsup": "^8.1.0",
+    "typescript": "^5.5.2"
   },
   "publishConfig": {
     "access": "public"

package/sortable.cjs

@@ -7,6 +7,25 @@ var react = require('@dnd-kit/react');
 var hooks = require('@dnd-kit/react/hooks');
 var utilities = require('@dnd-kit/react/utilities');
 
+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));
 function useSortable(input) {
   const {
     accept,
@@ -28,21 +47,21 @@ function useSortable(input) {
   const target = utilities.currentValue(input.target);
   const sortable$1 = hooks.useConstant(() => {
     return new sortable.Sortable(
-      {
-        ...input,
+      __spreadProps(__spreadValues({}, input), {
         handle,
         element,
         target,
         feedback,
-        options: {
-          ...input.options,
+        options: __spreadProps(__spreadValues({}, input.options), {
           register: false
-        }
-      },
-      manager
+        })
+      }),
+      manager != null ? manager : void 0
     );
-  }, manager);
-  react$1.useLayoutEffect(() => {
+  });
+  react$1.useEffect(() => {
+    sortable$1.manager = manager != null ? manager : void 0;
+    if (!manager) return;
     manager.registry.register(sortable$1.draggable);
     manager.registry.register(sortable$1.droppable);
     return () => {
@@ -62,11 +81,11 @@ function useSortable(input) {
     void 0,
     state.deepEqual
   );
-  hooks.useOnValueChange(data, () => sortable$1.data = data ?? null);
+  hooks.useOnValueChange(data, () => sortable$1.data = data != null ? data : null);
   hooks.useOnValueChange(
     index,
     () => {
-      if (manager.dragOperation.status.idle && transition) {
+      if ((manager == null ? void 0 : manager.dragOperation.status.idle) && transition) {
         sortable$1.refreshShape();
       }
     },
@@ -85,7 +104,7 @@ function useSortable(input) {
     collisionPriority,
     () => sortable$1.collisionPriority = collisionPriority
   );
-  hooks.useOnValueChange(feedback, () => sortable$1.feedback = feedback ?? "default");
+  hooks.useOnValueChange(feedback, () => sortable$1.feedback = feedback != null ? feedback : "default");
   hooks.useOnValueChange(transition, () => sortable$1.transition = transition);
   return {
     get isDragSource() {
@@ -96,25 +115,25 @@ function useSortable(input) {
     },
     handleRef: react$1.useCallback(
       (element2) => {
-        sortable$1.handle = element2 ?? void 0;
+        sortable$1.handle = element2 != null ? element2 : void 0;
       },
       [sortable$1]
     ),
     ref: react$1.useCallback(
       (element2) => {
-        sortable$1.element = element2 ?? void 0;
+        sortable$1.element = element2 != null ? element2 : void 0;
       },
       [sortable$1]
     ),
     sourceRef: react$1.useCallback(
       (element2) => {
-        sortable$1.source = element2 ?? void 0;
+        sortable$1.source = element2 != null ? element2 : void 0;
       },
       [sortable$1]
     ),
     targetRef: react$1.useCallback(
       (element2) => {
-        sortable$1.target = element2 ?? void 0;
+        sortable$1.target = element2 != null ? element2 : void 0;
       },
       [sortable$1]
     )

package/sortable.d.ts

@@ -16,4 +16,4 @@ declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>):
     targetRef: (element: Element | null) => void;
 };
 
-export { UseSortableInput, useSortable };
+export { type UseSortableInput, useSortable };

package/sortable.js

@@ -1,10 +1,29 @@
-import { useLayoutEffect, useCallback } from 'react';
+import { useEffect, 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, useIsomorphicLayoutEffect, useImmediateEffect } from '@dnd-kit/react/hooks';
 import { currentValue } from '@dnd-kit/react/utilities';
 
+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));
 function useSortable(input) {
   const {
     accept,
@@ -26,21 +45,21 @@ function useSortable(input) {
   const target = currentValue(input.target);
   const sortable = useConstant(() => {
     return new Sortable(
-      {
-        ...input,
+      __spreadProps(__spreadValues({}, input), {
         handle,
         element,
         target,
         feedback,
-        options: {
-          ...input.options,
+        options: __spreadProps(__spreadValues({}, input.options), {
           register: false
-        }
-      },
-      manager
+        })
+      }),
+      manager != null ? manager : void 0
     );
-  }, manager);
-  useLayoutEffect(() => {
+  });
+  useEffect(() => {
+    sortable.manager = manager != null ? manager : void 0;
+    if (!manager) return;
     manager.registry.register(sortable.draggable);
     manager.registry.register(sortable.droppable);
     return () => {
@@ -60,11 +79,11 @@ function useSortable(input) {
     void 0,
     deepEqual
   );
-  useOnValueChange(data, () => sortable.data = data ?? null);
+  useOnValueChange(data, () => sortable.data = data != null ? data : null);
   useOnValueChange(
     index,
     () => {
-      if (manager.dragOperation.status.idle && transition) {
+      if ((manager == null ? void 0 : manager.dragOperation.status.idle) && transition) {
         sortable.refreshShape();
       }
     },
@@ -83,7 +102,7 @@ function useSortable(input) {
     collisionPriority,
     () => sortable.collisionPriority = collisionPriority
   );
-  useOnValueChange(feedback, () => sortable.feedback = feedback ?? "default");
+  useOnValueChange(feedback, () => sortable.feedback = feedback != null ? feedback : "default");
   useOnValueChange(transition, () => sortable.transition = transition);
   return {
     get isDragSource() {
@@ -94,25 +113,25 @@ function useSortable(input) {
     },
     handleRef: useCallback(
       (element2) => {
-        sortable.handle = element2 ?? void 0;
+        sortable.handle = element2 != null ? element2 : void 0;
       },
       [sortable]
     ),
     ref: useCallback(
       (element2) => {
-        sortable.element = element2 ?? void 0;
+        sortable.element = element2 != null ? element2 : void 0;
       },
       [sortable]
     ),
     sourceRef: useCallback(
       (element2) => {
-        sortable.source = element2 ?? void 0;
+        sortable.source = element2 != null ? element2 : void 0;
       },
       [sortable]
     ),
     targetRef: useCallback(
       (element2) => {
-        sortable.target = element2 ?? void 0;
+        sortable.target = element2 != null ? element2 : void 0;
       },
       [sortable]
     )

package/utilities.cjs

@@ -2,11 +2,12 @@
 
 // src/utilities/currentValue.ts
 function currentValue(value) {
+  var _a;
   if (value == null) {
     return void 0;
   }
   if (typeof value === "object" && "current" in value) {
-    return value.current ?? void 0;
+    return (_a = value.current) != null ? _a : void 0;
   }
   return value;
 }

package/utilities.d.ts

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

package/utilities.js

@@ -1,10 +1,11 @@
 // src/utilities/currentValue.ts
 function currentValue(value) {
+  var _a;
   if (value == null) {
     return void 0;
   }
   if (typeof value === "object" && "current" in value) {
-    return value.current ?? void 0;
+    return (_a = value.current) != null ? _a : void 0;
   }
   return value;
 }