@dnd-kit/react 0.0.1

package/README.md

@@ -0,0 +1,17 @@
+# @dnd-kit/react
+
+[![Stable release](https://img.shields.io/npm/v/@dnd-kit/react.svg)](https://npm.im/@dnd-kit/react)
+
+The React layer for @dnd-kit, built on top of @dnd-kit/dom.
+
+## Installation
+
+To get started, install the `@dnd-kit/react` package via npm or yarn:
+
+```
+npm install @dnd-kit/react
+```
+
+## Usage
+
+Visit [docs.dndkit.com](https://docs.dndkit.com) to learn how to get started with @dnd-kit.

package/hooks.cjs

@@ -0,0 +1,98 @@
+'use strict';
+
+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);
+  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
+  );
+}
+function useLatest(value) {
+  const valueRef = react.useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  return valueRef;
+}
+
+// src/hooks/useEvent.ts
+function useEvent(handler) {
+  const handlerRef = useLatest(handler);
+  return react.useCallback(
+    function(...args) {
+      return handlerRef.current?.(...args);
+    },
+    [handlerRef]
+  );
+}
+
+// src/hooks/useImmediateEffect.ts
+function useImmediateEffect(callback, _) {
+  callback();
+}
+function useOnValueChange(value, onChange, effect3 = react.useEffect, compare = Object.is) {
+  const tracked = react.useRef(value);
+  effect3(() => {
+    const oldValue = tracked.current;
+    if (!compare(value, tracked.current)) {
+      tracked.current = value;
+      onChange(value, oldValue);
+    }
+  }, [onChange, value]);
+}
+function useSignalEffect(compute, deps = []) {
+  react.useEffect(() => state.effect(compute), deps);
+}
+
+exports.useComputed = useComputed;
+exports.useConstant = useConstant;
+exports.useEvent = useEvent;
+exports.useImmediateEffect = useImmediateEffect;
+exports.useIsomorphicLayoutEffect = useIsomorphicLayoutEffect;
+exports.useLatest = useLatest;
+exports.useOnValueChange = useOnValueChange;
+exports.useSignalEffect = useSignalEffect;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=hooks.cjs.map

package/hooks.d.ts

@@ -0,0 +1,25 @@
+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 useComputed<T = any>(compute: () => T, sync?: boolean): _preact_signals_core.ReadonlySignal<T>;
+
+declare function useEvent<T extends Function>(handler: T | undefined): (...args: any) => any;
+
+declare function useImmediateEffect(callback: EffectCallback, _?: DependencyList): void;
+
+/**
+ * A hook that resolves to useEffect on the server and useLayoutEffect on the client
+ * @param callback {function} Callback function that is invoked when the dependencies of the hook change
+ */
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+
+declare function useLatest<T>(value: T): react.MutableRefObject<T | undefined>;
+
+declare function useOnValueChange<T>(value: T, onChange: (value: T, oldValue: T) => void, effect?: typeof useEffect, compare?: (value1: any, value2: any) => boolean): void;
+
+declare function useSignalEffect(compute: () => void, deps?: any[]): void;
+
+export { useComputed, useConstant, useEvent, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnValueChange, useSignalEffect };

package/hooks.js

@@ -0,0 +1,89 @@
+import { useRef, useLayoutEffect, useEffect, useCallback, useState } from 'react';
+import { computed, effect, Signal, signal } from '@dnd-kit/state';
+import { flushSync } from 'react-dom';
+
+// src/hooks/useConstant.ts
+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
+  );
+}
+function useLatest(value) {
+  const valueRef = useRef(value);
+  useIsomorphicLayoutEffect(() => {
+    valueRef.current = value;
+  }, [value]);
+  return valueRef;
+}
+
+// src/hooks/useEvent.ts
+function useEvent(handler) {
+  const handlerRef = useLatest(handler);
+  return useCallback(
+    function(...args) {
+      return handlerRef.current?.(...args);
+    },
+    [handlerRef]
+  );
+}
+
+// src/hooks/useImmediateEffect.ts
+function useImmediateEffect(callback, _) {
+  callback();
+}
+function useOnValueChange(value, onChange, effect3 = useEffect, compare = Object.is) {
+  const tracked = useRef(value);
+  effect3(() => {
+    const oldValue = tracked.current;
+    if (!compare(value, tracked.current)) {
+      tracked.current = value;
+      onChange(value, oldValue);
+    }
+  }, [onChange, value]);
+}
+function useSignalEffect(compute, deps = []) {
+  useEffect(() => effect(compute), deps);
+}
+
+export { useComputed, useConstant, useEvent, useImmediateEffect, useIsomorphicLayoutEffect, useLatest, useOnValueChange, useSignalEffect };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=hooks.js.map

package/index.cjs

@@ -0,0 +1,252 @@
+'use strict';
+
+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');
+
+// src/core/context/hooks.ts
+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);
+  const rendering = react.useRef();
+  const resolver = react.useRef();
+  const renderer = hooks.useConstant(() => ({
+    get rendering() {
+      return rendering.current ?? Promise.resolve();
+    }
+  }));
+  hooks.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 = 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.useEvent(onDragStart);
+    const handleDragOver = hooks.useLatest(onDragOver);
+    const handleDragMove = hooks.useLatest(onDragMove);
+    const handleDragEnd = hooks.useLatest(onDragEnd);
+    const handleCollision = hooks.useEvent(onCollision);
+    react.useEffect(() => {
+      manager.monitor.addEventListener("beforedragstart", (event, manager2) => {
+        const callback = handleBeforeDragStart.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager2));
+        }
+      });
+      manager.monitor.addEventListener("dragstart", handleDragStart);
+      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", handleCollision);
+      return () => {
+        manager.destroy();
+      };
+    }, [manager]);
+    hooks.useOnValueChange(
+      plugins,
+      () => manager.plugins = plugins ?? dom.defaultPreset.plugins
+    );
+    hooks.useOnValueChange(modifiers, () => manager.modifiers = modifiers ?? []);
+    react.useImperativeHandle(ref, () => manager, [manager]);
+    return /* @__PURE__ */ jsxRuntime.jsx(DragDropContext.Provider, { value: manager, children });
+  }
+);
+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 isDragSource = hooks.useComputed(() => draggable.isDragSource);
+  hooks.useOnValueChange(id, () => draggable.id = id);
+  hooks.useOnValueChange(handle, () => draggable.handle = handle);
+  hooks.useOnValueChange(element, () => draggable.element = element);
+  hooks.useOnValueChange(disabled, () => draggable.disabled = disabled === true);
+  hooks.useOnValueChange(sensors, () => draggable.sensors = sensors);
+  hooks.useOnValueChange(
+    input.feedback,
+    () => draggable.feedback = input.feedback ?? "default"
+  );
+  react.useEffect(() => {
+    return draggable.destroy;
+  }, [draggable]);
+  return {
+    get isDragSource() {
+      return isDragSource.value;
+    },
+    handleRef: react.useCallback(
+      (element2) => {
+        draggable.handle = element2 ?? void 0;
+      },
+      [draggable]
+    ),
+    ref: react.useCallback(
+      (element2) => {
+        draggable.element = element2 ?? void 0;
+      },
+      [draggable]
+    )
+  };
+}
+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 isDisabled = hooks.useComputed(() => droppable.disabled);
+  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(disabled, () => droppable.disabled = disabled === true);
+  hooks.useOnValueChange(element, () => droppable.element = element);
+  hooks.useOnValueChange(type, () => droppable.id = id);
+  react.useEffect(() => {
+    return droppable.destroy;
+  }, [droppable]);
+  return {
+    get isDisabled() {
+      return isDisabled.value;
+    },
+    get isDropTarget() {
+      return isDropTarget.value;
+    },
+    ref: react.useCallback(
+      (element2) => {
+        droppable.element = element2 ?? void 0;
+      },
+      [droppable]
+    )
+  };
+}
+
+exports.DragDropProvider = DragDropProvider;
+exports.useDragDropManager = useDragDropManager;
+exports.useDragOperation = useDragOperation;
+exports.useDraggable = useDraggable;
+exports.useDroppable = useDroppable;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.cjs.map

package/index.d.ts

@@ -0,0 +1,46 @@
+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 { 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;
+    onBeforeDragStart?: Events['beforedragstart'];
+    onCollision?: Events['collision'];
+    onDragStart?: Events['dragstart'];
+    onDragMove?: Events['dragmove'];
+    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>>>>;
+
+interface UseDraggableInput<T extends Data = Data> extends Omit<DraggableInput<T>, 'handle' | 'element'> {
+    handle?: RefOrValue<Element>;
+    element?: RefOrValue<Element>;
+}
+declare function useDraggable<T extends Data = Data>(input: UseDraggableInput<T>): {
+    readonly isDragSource: boolean;
+    handleRef: (element: Element | null) => void;
+    ref: (element: Element | null) => void;
+};
+
+interface UseDroppableInput<T extends Data = Data> extends Omit<DroppableInput<T>, 'element'> {
+    element?: RefOrValue<Element>;
+}
+declare function useDroppable<T extends Data = Data>(input: UseDroppableInput<T>): {
+    readonly isDisabled: boolean;
+    readonly isDropTarget: boolean;
+    ref: (element: Element | null) => void;
+};
+
+export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable };

package/index.js

@@ -0,0 +1,246 @@
+import { createContext, forwardRef, useEffect, useImperativeHandle, useContext, useTransition, useState, useRef, useCallback, useLayoutEffect } 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 { jsx } from 'react/jsx-runtime';
+import { getCurrentValue } from '@dnd-kit/react/utilities';
+
+// src/core/context/hooks.ts
+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(() => ({
+    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$1(() => {
+      const instance = input.manager ?? new DragDropManager(input);
+      instance.renderer = renderer;
+      return instance;
+    });
+    const { plugins, modifiers } = input;
+    const handleBeforeDragStart = useLatest(onBeforeDragStart);
+    const handleDragStart = useEvent(onDragStart);
+    const handleDragOver = useLatest(onDragOver);
+    const handleDragMove = useLatest(onDragMove);
+    const handleDragEnd = useLatest(onDragEnd);
+    const handleCollision = useEvent(onCollision);
+    useEffect(() => {
+      manager.monitor.addEventListener("beforedragstart", (event, manager2) => {
+        const callback = handleBeforeDragStart.current;
+        if (callback) {
+          trackRendering(() => callback(event, manager2));
+        }
+      });
+      manager.monitor.addEventListener("dragstart", handleDragStart);
+      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", handleCollision);
+      return () => {
+        manager.destroy();
+      };
+    }, [manager]);
+    useOnValueChange(
+      plugins,
+      () => manager.plugins = plugins ?? defaultPreset.plugins
+    );
+    useOnValueChange(modifiers, () => manager.modifiers = modifiers ?? []);
+    useImperativeHandle(ref, () => manager, [manager]);
+    return /* @__PURE__ */ jsx(DragDropContext.Provider, { value: manager, children });
+  }
+);
+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 isDragSource = useComputed$1(() => draggable.isDragSource);
+  useOnValueChange(id, () => draggable.id = id);
+  useOnValueChange(handle, () => draggable.handle = handle);
+  useOnValueChange(element, () => draggable.element = element);
+  useOnValueChange(disabled, () => draggable.disabled = disabled === true);
+  useOnValueChange(sensors, () => draggable.sensors = sensors);
+  useOnValueChange(
+    input.feedback,
+    () => draggable.feedback = input.feedback ?? "default"
+  );
+  useEffect(() => {
+    return draggable.destroy;
+  }, [draggable]);
+  return {
+    get isDragSource() {
+      return isDragSource.value;
+    },
+    handleRef: useCallback(
+      (element2) => {
+        draggable.handle = element2 ?? void 0;
+      },
+      [draggable]
+    ),
+    ref: useCallback(
+      (element2) => {
+        draggable.element = element2 ?? void 0;
+      },
+      [draggable]
+    )
+  };
+}
+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 isDisabled = useComputed$1(() => droppable.disabled);
+  const isDropTarget = useComputed$1(() => 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(() => {
+    return droppable.destroy;
+  }, [droppable]);
+  return {
+    get isDisabled() {
+      return isDisabled.value;
+    },
+    get isDropTarget() {
+      return isDropTarget.value;
+    },
+    ref: useCallback(
+      (element2) => {
+        droppable.element = element2 ?? void 0;
+      },
+      [droppable]
+    )
+  };
+}
+
+export { DragDropProvider, useDragDropManager, useDragOperation, useDraggable, useDroppable };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=index.js.map

package/package.json

@@ -0,0 +1,80 @@
+{
+  "name": "@dnd-kit/react",
+  "version": "0.0.1",
+  "main": "./index.cjs",
+  "module": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "sideEffects": false,
+  "license": "MIT",
+  "files": [
+    "LICENSE",
+    "README.md",
+    "index.js",
+    "index.d.ts",
+    "index.cjs",
+    "hooks.js",
+    "hooks.d.ts",
+    "hooks.cjs",
+    "sortable.js",
+    "sortable.d.ts",
+    "sortable.cjs",
+    "utilities.js",
+    "utilities.d.ts",
+    "utilities.cjs"
+  ],
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js",
+      "require": "./index.cjs"
+    },
+    "./hooks": {
+      "types": "./hooks.d.ts",
+      "import": "./hooks.js",
+      "require": "./hooks.cjs"
+    },
+    "./sortable": {
+      "types": "./sortable.d.ts",
+      "import": "./sortable.js",
+      "require": "./sortable.cjs"
+    },
+    "./utilities": {
+      "types": "./utilities.d.ts",
+      "import": "./utilities.js",
+      "require": "./utilities.cjs"
+    }
+  },
+  "scripts": {
+    "build": "bun build:hooks && bun build:utilities && bun build:core && bun build:sortable",
+    "build:core": "tsup src/core/index.ts",
+    "build:hooks": "tsup --entry.hooks src/hooks/index.ts",
+    "build:sortable": "tsup --entry.sortable src/sortable/index.ts",
+    "build:utilities": "tsup --entry.utilities src/utilities/index.ts",
+    "dev": "bun build:hooks --watch & bun build:utilities --watch & bun build:core --watch & bun build:sortable --watch",
+    "lint": "TIMING=1 eslint src/**/*.ts* --fix",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "@dnd-kit/abstract": "*",
+    "@dnd-kit/dom": "*",
+    "@dnd-kit/state": "*",
+    "tslib": "^2.6.2"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "eslint": "^8.38.0",
+    "@dnd-kit/eslint-config": "*",
+    "react": "^18.1.0",
+    "tsup": "^7.2.0",
+    "typescript": "^5.1.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/sortable.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+var react$1 = require('react');
+var state = require('@dnd-kit/state');
+var sortable = require('@dnd-kit/dom/sortable');
+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,
+    collisionDetector,
+    collisionPriority,
+    id,
+    data,
+    index,
+    disabled,
+    sensors,
+    transition = sortable.defaultSortableTransition,
+    type
+  } = input;
+  const feedback = typeof input.feedback === "function" ? "none" : input.feedback;
+  const manager = react.useDragDropManager();
+  const handle = utilities.getCurrentValue(input.handle);
+  const element = utilities.getCurrentValue(input.element);
+  const sortable$1 = hooks.useConstant(
+    () => new sortable.Sortable(
+      {
+        ...input,
+        handle,
+        element,
+        feedback
+      },
+      manager
+    ),
+    manager
+  );
+  const isDisabled = hooks.useComputed(() => sortable$1.disabled);
+  const isDropTarget = hooks.useComputed(() => sortable$1.isDropTarget);
+  const isDragSource = hooks.useComputed(() => sortable$1.isDragSource);
+  hooks.useOnValueChange(
+    accept,
+    () => sortable$1.accept = accept,
+    void 0,
+    state.deepEqual
+  );
+  hooks.useOnValueChange(type, () => sortable$1.type = type);
+  hooks.useOnValueChange(id, () => sortable$1.id = id);
+  hooks.useOnValueChange(data, () => sortable$1.data = data ?? null);
+  hooks.useOnValueChange(
+    index,
+    () => {
+      if (manager.dragOperation.status.idle && transition) {
+        sortable$1.refreshShape();
+      }
+    },
+    hooks.useImmediateEffect
+  );
+  hooks.useOnValueChange(index, () => sortable$1.index = index, hooks.useIsomorphicLayoutEffect);
+  hooks.useOnValueChange(handle, () => sortable$1.handle = handle);
+  hooks.useOnValueChange(element, () => sortable$1.element = element);
+  hooks.useOnValueChange(disabled, () => sortable$1.disabled = disabled === true);
+  hooks.useOnValueChange(sensors, () => sortable$1.sensors = sensors);
+  hooks.useOnValueChange(
+    collisionDetector,
+    () => sortable$1.collisionDetector = collisionDetector
+  );
+  hooks.useOnValueChange(
+    collisionPriority,
+    () => sortable$1.collisionPriority = collisionPriority
+  );
+  hooks.useOnValueChange(
+    input.feedback,
+    () => sortable$1.feedback = feedback ?? "default"
+  );
+  hooks.useOnValueChange(transition, () => sortable$1.transition = transition);
+  react$1.useEffect(() => {
+    return sortable$1.destroy;
+  }, [sortable$1]);
+  return {
+    get isDisabled() {
+      return isDisabled.value;
+    },
+    get isDragSource() {
+      return isDragSource.value;
+    },
+    get isDropTarget() {
+      return isDropTarget.value;
+    },
+    handleRef: react$1.useCallback(
+      (element2) => {
+        sortable$1.handle = element2 ?? void 0;
+      },
+      [sortable$1]
+    ),
+    ref: react$1.useCallback(
+      (element2) => {
+        sortable$1.element = element2 ?? void 0;
+      },
+      [sortable$1]
+    ),
+    sourceRef: react$1.useCallback(
+      (element2) => {
+        sortable$1.source = element2 ?? void 0;
+      },
+      [sortable$1]
+    ),
+    targetRef: react$1.useCallback(
+      (element2) => {
+        sortable$1.target = element2 ?? void 0;
+      },
+      [sortable$1]
+    )
+  };
+}
+
+exports.useSortable = useSortable;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=sortable.cjs.map

package/sortable.d.ts

@@ -0,0 +1,21 @@
+import { Data } from '@dnd-kit/abstract';
+import { SortableInput } from '@dnd-kit/dom/sortable';
+import { RefOrValue } from '@dnd-kit/react/utilities';
+import { FeedbackType } from '@dnd-kit/dom';
+
+interface UseSortableInput<T extends Data = Data> extends Omit<SortableInput<T>, 'handle' | 'element' | 'feedback'> {
+    handle?: RefOrValue<Element>;
+    element?: RefOrValue<Element>;
+    feedback?: FeedbackType | (() => React.ReactNode);
+}
+declare function useSortable<T extends Data = Data>(input: UseSortableInput<T>): {
+    readonly isDisabled: boolean;
+    readonly isDragSource: boolean;
+    readonly isDropTarget: boolean;
+    handleRef: (element: Element | null) => void;
+    ref: (element: Element | null) => void;
+    sourceRef: (element: Element | null) => void;
+    targetRef: (element: Element | null) => void;
+};
+
+export { UseSortableInput, useSortable };

package/sortable.js

@@ -0,0 +1,119 @@
+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, useImmediateEffect, useIsomorphicLayoutEffect } from '@dnd-kit/react/hooks';
+import { getCurrentValue } from '@dnd-kit/react/utilities';
+
+// src/sortable/useSortable.ts
+function useSortable(input) {
+  const {
+    accept,
+    collisionDetector,
+    collisionPriority,
+    id,
+    data,
+    index,
+    disabled,
+    sensors,
+    transition = defaultSortableTransition,
+    type
+  } = input;
+  const feedback = typeof input.feedback === "function" ? "none" : input.feedback;
+  const manager = useDragDropManager();
+  const handle = getCurrentValue(input.handle);
+  const element = getCurrentValue(input.element);
+  const sortable = useConstant(
+    () => new Sortable(
+      {
+        ...input,
+        handle,
+        element,
+        feedback
+      },
+      manager
+    ),
+    manager
+  );
+  const isDisabled = useComputed(() => sortable.disabled);
+  const isDropTarget = useComputed(() => sortable.isDropTarget);
+  const isDragSource = useComputed(() => sortable.isDragSource);
+  useOnValueChange(
+    accept,
+    () => sortable.accept = accept,
+    void 0,
+    deepEqual
+  );
+  useOnValueChange(type, () => sortable.type = type);
+  useOnValueChange(id, () => sortable.id = id);
+  useOnValueChange(data, () => sortable.data = data ?? null);
+  useOnValueChange(
+    index,
+    () => {
+      if (manager.dragOperation.status.idle && transition) {
+        sortable.refreshShape();
+      }
+    },
+    useImmediateEffect
+  );
+  useOnValueChange(index, () => sortable.index = index, useIsomorphicLayoutEffect);
+  useOnValueChange(handle, () => sortable.handle = handle);
+  useOnValueChange(element, () => sortable.element = element);
+  useOnValueChange(disabled, () => sortable.disabled = disabled === true);
+  useOnValueChange(sensors, () => sortable.sensors = sensors);
+  useOnValueChange(
+    collisionDetector,
+    () => sortable.collisionDetector = collisionDetector
+  );
+  useOnValueChange(
+    collisionPriority,
+    () => sortable.collisionPriority = collisionPriority
+  );
+  useOnValueChange(
+    input.feedback,
+    () => sortable.feedback = feedback ?? "default"
+  );
+  useOnValueChange(transition, () => sortable.transition = transition);
+  useEffect(() => {
+    return sortable.destroy;
+  }, [sortable]);
+  return {
+    get isDisabled() {
+      return isDisabled.value;
+    },
+    get isDragSource() {
+      return isDragSource.value;
+    },
+    get isDropTarget() {
+      return isDropTarget.value;
+    },
+    handleRef: useCallback(
+      (element2) => {
+        sortable.handle = element2 ?? void 0;
+      },
+      [sortable]
+    ),
+    ref: useCallback(
+      (element2) => {
+        sortable.element = element2 ?? void 0;
+      },
+      [sortable]
+    ),
+    sourceRef: useCallback(
+      (element2) => {
+        sortable.source = element2 ?? void 0;
+      },
+      [sortable]
+    ),
+    targetRef: useCallback(
+      (element2) => {
+        sortable.target = element2 ?? void 0;
+      },
+      [sortable]
+    )
+  };
+}
+
+export { useSortable };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=sortable.js.map

package/utilities.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+// src/utilities/getCurrentValue.ts
+function getCurrentValue(value) {
+  if (value == null) {
+    return void 0;
+  }
+  if (typeof value === "object" && "current" in value) {
+    return value.current ?? void 0;
+  }
+  return value;
+}
+
+exports.getCurrentValue = getCurrentValue;
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=utilities.cjs.map

package/utilities.d.ts

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

package/utilities.js

@@ -0,0 +1,14 @@
+// src/utilities/getCurrentValue.ts
+function getCurrentValue(value) {
+  if (value == null) {
+    return void 0;
+  }
+  if (typeof value === "object" && "current" in value) {
+    return value.current ?? void 0;
+  }
+  return value;
+}
+
+export { getCurrentValue };
+//# sourceMappingURL=out.js.map
+//# sourceMappingURL=utilities.js.map