@dnd-kit/react 0.0.2-beta-20240604021900 → 0.0.2-beta-20240604190117

package/index.cjs

@@ -2,79 +2,15 @@
 
 var react = require('react');
 var dom = require('@dnd-kit/dom');
-var state = require('@dnd-kit/state');
-var reactDom = require('react-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');
 
-// src/core/context/hooks.ts
+// src/core/context/DragDropProvider.tsx
 var DragDropContext = react.createContext(
   new dom.DragDropManager()
 );
-function useConstant(initializer, dependency) {
-  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";
-var useIsomorphicLayoutEffect = canUseDOM ? react.useLayoutEffect : react.useEffect;
-
-// src/hooks/useSignal.ts
-function useSignal(signalOrValue, sync = false) {
-  const sig = useConstant(
-    () => signalOrValue instanceof state.Signal ? signalOrValue : state.signal(signalOrValue)
-  );
-  let val = sig.peek();
-  const update = react.useState(val)[1];
-  useIsomorphicLayoutEffect(
-    () => state.effect(() => {
-      if (val !== (val = sig.value)) {
-        if (sync) {
-          reactDom.flushSync(() => update(val));
-        } else {
-          update(val);
-        }
-      }
-    }),
-    [sync]
-  );
-  return sig;
-}
-
-// src/hooks/useComputed.ts
-function useComputed(compute, sync = false) {
-  return useSignal(
-    useConstant(() => state.computed(compute)),
-    sync
-  );
-}
-
-// src/core/context/hooks.ts
-function useDragDropManager() {
-  return react.useContext(DragDropContext);
-}
-function useDragOperation() {
-  const manager = useDragDropManager();
-  const { dragOperation } = manager;
-  const source = useComputed(() => dragOperation.source);
-  const target = useComputed(() => dragOperation.target);
-  return {
-    get source() {
-      return source.value;
-    },
-    get target() {
-      return target.value;
-    }
-  };
-}
 function useRenderer() {
   const [_, startTransition] = react.useTransition();
   const [transitionCount, setTransitionCount] = react.useState(0);
@@ -175,14 +111,30 @@ var DragDropProvider = react.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(DragDropContext.Provider, { value: manager, children });
   }
 );
+function useDragDropManager() {
+  return react.useContext(DragDropContext);
+}
+
+// src/core/hooks/useInstance.ts
+function useInstance(initializer) {
+  const manager = useDragDropManager();
+  const [instance] = react.useState(() => initializer(manager));
+  react.useEffect(() => {
+    manager.registry.register(instance);
+    return () => {
+      manager.registry.unregister(instance);
+    };
+  }, []);
+  return instance;
+}
+
+// src/core/draggable/useDraggable.ts
 function useDraggable(input) {
   const { disabled, id, sensors } = input;
-  const manager = useDragDropManager();
   const handle = utilities.getCurrentValue(input.handle);
   const element = utilities.getCurrentValue(input.element);
-  const draggable = hooks.useConstant(
-    () => new dom.Draggable({ ...input, handle, element }, manager),
-    manager
+  const draggable = useInstance(
+    (manager) => new dom.Draggable({ ...input, handle, element }, manager)
   );
   const isDragSource = hooks.useComputed(() => draggable.isDragSource);
   hooks.useOnValueChange(id, () => draggable.id = id);
@@ -194,12 +146,6 @@ function useDraggable(input) {
     input.feedback,
     () => draggable.feedback = input.feedback ?? "default"
   );
-  react.useEffect(() => {
-    manager.registry.register(draggable);
-    return () => {
-      manager.registry.unregister(draggable);
-    };
-  }, [manager, draggable]);
   return {
     get isDragSource() {
       return isDragSource.value;
@@ -219,12 +165,10 @@ function useDraggable(input) {
   };
 }
 function useDroppable(input) {
-  const manager = useDragDropManager();
   const { collisionDetector, disabled, id, accept, type } = input;
   const element = utilities.getCurrentValue(input.element);
-  const droppable = hooks.useConstant(
-    () => new dom.Droppable({ ...input, element }, manager),
-    manager
+  const droppable = useInstance(
+    (manager) => new dom.Droppable({ ...input, element }, manager)
   );
   const isDisabled = hooks.useComputed(() => droppable.disabled);
   const isDropTarget = hooks.useComputed(() => droppable.isDropTarget);
@@ -234,12 +178,6 @@ function useDroppable(input) {
   hooks.useOnValueChange(disabled, () => droppable.disabled = disabled === true);
   hooks.useOnValueChange(element, () => droppable.element = element);
   hooks.useOnValueChange(type, () => droppable.id = id);
-  react.useEffect(() => {
-    manager.registry.register(droppable);
-    return () => {
-      manager.registry.unregister(droppable);
-    };
-  }, [manager, droppable]);
   return {
     get isDisabled() {
       return isDisabled.value;
@@ -255,6 +193,20 @@ function useDroppable(input) {
     )
   };
 }
+function useDragOperation() {
+  const manager = useDragDropManager();
+  const { dragOperation } = manager;
+  const source = hooks.useComputed(() => dragOperation.source);
+  const target = hooks.useComputed(() => dragOperation.target);
+  return {
+    get source() {
+      return source.value;
+    },
+    get target() {
+      return target.value;
+    }
+  };
+}
 
 exports.DragDropProvider = DragDropProvider;
 exports.useDragDropManager = useDragDropManager;

package/index.d.ts

@@ -1,17 +1,11 @@
-import * as _dnd_kit_dom from '@dnd-kit/dom';
-import { DragDropManager, Draggable, Droppable, DragDropManagerInput, DraggableInput, DroppableInput } from '@dnd-kit/dom';
-import * as _dnd_kit_abstract from '@dnd-kit/abstract';
-import { DragDropEvents, Data } from '@dnd-kit/abstract';
 import * as react from 'react';
 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';
+import { DragDropManager, Draggable, Droppable, DragDropManagerInput, DraggableInput, DroppableInput } from '@dnd-kit/dom';
 import { RefOrValue } from '@dnd-kit/react/utilities';
 
-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 useDragOperation(): {
-    readonly source: _dnd_kit_dom.Draggable<_dnd_kit_abstract.Data> | null;
-    readonly target: _dnd_kit_dom.Droppable<_dnd_kit_abstract.Data> | null;
-};
-
 type Events = DragDropEvents<Draggable, Droppable, DragDropManager>;
 interface Props extends DragDropManagerInput, PropsWithChildren {
     manager?: DragDropManager;
@@ -43,4 +37,11 @@ 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>>;
+
+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;
+};
+
 export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable };

package/index.js

@@ -1,84 +1,20 @@
-import { createContext, forwardRef, useEffect, useImperativeHandle, useContext, useTransition, useState, useRef, useCallback, useLayoutEffect } from 'react';
+import { createContext, forwardRef, useEffect, useImperativeHandle, useTransition, useState, useRef, useContext, useCallback } from 'react';
 import { DragDropManager, defaultPreset, Draggable, Droppable } from '@dnd-kit/dom';
-import { deepEqual, Signal, signal, effect, computed } from '@dnd-kit/state';
-import { flushSync } from 'react-dom';
-import { useConstant as useConstant$1, useLatest, useEvent, useOnValueChange, useComputed as useComputed$1 } from '@dnd-kit/react/hooks';
+import { useConstant, useLatest, useEvent, useOnValueChange, useComputed } from '@dnd-kit/react/hooks';
 import { jsx } from 'react/jsx-runtime';
 import { getCurrentValue } from '@dnd-kit/react/utilities';
+import { deepEqual } from '@dnd-kit/state';
 
-// src/core/context/hooks.ts
+// src/core/context/DragDropProvider.tsx
 var DragDropContext = createContext(
   new DragDropManager()
 );
-function useConstant(initializer, dependency) {
-  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";
-var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
-
-// src/hooks/useSignal.ts
-function useSignal(signalOrValue, sync = false) {
-  const sig = useConstant(
-    () => signalOrValue instanceof Signal ? signalOrValue : signal(signalOrValue)
-  );
-  let val = sig.peek();
-  const update = useState(val)[1];
-  useIsomorphicLayoutEffect(
-    () => effect(() => {
-      if (val !== (val = sig.value)) {
-        if (sync) {
-          flushSync(() => update(val));
-        } else {
-          update(val);
-        }
-      }
-    }),
-    [sync]
-  );
-  return sig;
-}
-
-// src/hooks/useComputed.ts
-function useComputed(compute, sync = false) {
-  return useSignal(
-    useConstant(() => computed(compute)),
-    sync
-  );
-}
-
-// src/core/context/hooks.ts
-function useDragDropManager() {
-  return useContext(DragDropContext);
-}
-function useDragOperation() {
-  const manager = useDragDropManager();
-  const { dragOperation } = manager;
-  const source = useComputed(() => dragOperation.source);
-  const target = useComputed(() => dragOperation.target);
-  return {
-    get source() {
-      return source.value;
-    },
-    get target() {
-      return target.value;
-    }
-  };
-}
 function useRenderer() {
   const [_, startTransition] = useTransition();
   const [transitionCount, setTransitionCount] = useState(0);
   const rendering = useRef();
   const resolver = useRef();
-  const renderer = useConstant$1(() => ({
+  const renderer = useConstant(() => ({
     get rendering() {
       return rendering.current ?? Promise.resolve();
     }
@@ -114,7 +50,7 @@ var DragDropProvider = forwardRef(
     ...input
   }, ref) {
     const { renderer, trackRendering } = useRenderer();
-    const manager = useConstant$1(() => {
+    const manager = useConstant(() => {
       const instance = input.manager ?? new DragDropManager(input);
       instance.renderer = renderer;
       return instance;
@@ -173,16 +109,32 @@ var DragDropProvider = forwardRef(
     return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: manager, children });
   }
 );
+function useDragDropManager() {
+  return useContext(DragDropContext);
+}
+
+// src/core/hooks/useInstance.ts
+function useInstance(initializer) {
+  const manager = useDragDropManager();
+  const [instance] = useState(() => initializer(manager));
+  useEffect(() => {
+    manager.registry.register(instance);
+    return () => {
+      manager.registry.unregister(instance);
+    };
+  }, []);
+  return instance;
+}
+
+// src/core/draggable/useDraggable.ts
 function useDraggable(input) {
   const { disabled, id, sensors } = input;
-  const manager = useDragDropManager();
   const handle = getCurrentValue(input.handle);
   const element = getCurrentValue(input.element);
-  const draggable = useConstant$1(
-    () => new Draggable({ ...input, handle, element }, manager),
-    manager
+  const draggable = useInstance(
+    (manager) => new Draggable({ ...input, handle, element }, manager)
   );
-  const isDragSource = useComputed$1(() => draggable.isDragSource);
+  const isDragSource = useComputed(() => draggable.isDragSource);
   useOnValueChange(id, () => draggable.id = id);
   useOnValueChange(handle, () => draggable.handle = handle);
   useOnValueChange(element, () => draggable.element = element);
@@ -192,12 +144,6 @@ function useDraggable(input) {
     input.feedback,
     () => draggable.feedback = input.feedback ?? "default"
   );
-  useEffect(() => {
-    manager.registry.register(draggable);
-    return () => {
-      manager.registry.unregister(draggable);
-    };
-  }, [manager, draggable]);
   return {
     get isDragSource() {
       return isDragSource.value;
@@ -217,27 +163,19 @@ function useDraggable(input) {
   };
 }
 function useDroppable(input) {
-  const manager = useDragDropManager();
   const { collisionDetector, disabled, id, accept, type } = input;
   const element = getCurrentValue(input.element);
-  const droppable = useConstant$1(
-    () => new Droppable({ ...input, element }, manager),
-    manager
+  const droppable = useInstance(
+    (manager) => new Droppable({ ...input, element }, manager)
   );
-  const isDisabled = useComputed$1(() => droppable.disabled);
-  const isDropTarget = useComputed$1(() => droppable.isDropTarget);
+  const isDisabled = useComputed(() => droppable.disabled);
+  const isDropTarget = useComputed(() => droppable.isDropTarget);
   useOnValueChange(id, () => droppable.id = id);
   useOnValueChange(accept, () => droppable.id = id, void 0, deepEqual);
   useOnValueChange(collisionDetector, () => droppable.id = id);
   useOnValueChange(disabled, () => droppable.disabled = disabled === true);
   useOnValueChange(element, () => droppable.element = element);
   useOnValueChange(type, () => droppable.id = id);
-  useEffect(() => {
-    manager.registry.register(droppable);
-    return () => {
-      manager.registry.unregister(droppable);
-    };
-  }, [manager, droppable]);
   return {
     get isDisabled() {
       return isDisabled.value;
@@ -253,6 +191,20 @@ function useDroppable(input) {
     )
   };
 }
+function useDragOperation() {
+  const manager = useDragDropManager();
+  const { dragOperation } = manager;
+  const source = useComputed(() => dragOperation.source);
+  const target = useComputed(() => dragOperation.target);
+  return {
+    get source() {
+      return source.value;
+    },
+    get target() {
+      return target.value;
+    }
+  };
+}
 
 export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable };
 //# sourceMappingURL=out.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dnd-kit/react",
-  "version": "0.0.2-beta-20240604021900",
+  "version": "0.0.2-beta-20240604190117",
   "main": "./index.cjs",
   "module": "./index.js",
   "type": "module",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@dnd-kit/abstract": "*",
-    "@dnd-kit/dom": "0.0.2-beta-20240604021900",
+    "@dnd-kit/dom": "0.0.2-beta-20240604190117",
     "@dnd-kit/state": "*",
     "tslib": "^2.6.2"
   },

package/sortable.cjs

@@ -37,6 +37,14 @@ function useSortable(input) {
     ),
     manager
   );
+  react$1.useEffect(() => {
+    manager.registry.register(sortable$1.draggable);
+    manager.registry.register(sortable$1.droppable);
+    return () => {
+      manager.registry.unregister(sortable$1.draggable);
+      manager.registry.unregister(sortable$1.droppable);
+    };
+  }, [manager]);
   const isDisabled = hooks.useComputed(() => sortable$1.disabled);
   const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget);
   const isDragSource = hooks.useComputed(() => sortable$1.isDragSource);

package/sortable.js

@@ -1,4 +1,4 @@
-import { 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';
@@ -35,6 +35,14 @@ function useSortable(input) {
     ),
     manager
   );
+  useEffect(() => {
+    manager.registry.register(sortable.draggable);
+    manager.registry.register(sortable.droppable);
+    return () => {
+      manager.registry.unregister(sortable.draggable);
+      manager.registry.unregister(sortable.droppable);
+    };
+  }, [manager]);
   const isDisabled = useComputed(() => sortable.disabled);
   const isDropTarget = useComputed(() => sortable.isDropTarget);
   const isDragSource = useComputed(() => sortable.isDragSource);