@mk-drag-and-drop/react 0.3.0 → 0.4.1

package/README.md

@@ -52,6 +52,7 @@ The React root export includes:
 - `useSortable`, `UseSortableOptions`, `UseSortableResult`
 - `useDragHandle`, `UseDragHandleResult`
 - `useRemeasureDropTargets`
+- `useRecomputeActiveDrag`
 - `useRemeasureOverlay`
 - `composeRefs`
 - React-friendly `restrictToContainer`, `ReactRestrictToContainerInput`
@@ -402,6 +403,32 @@ every render. Sortable preview movement does not automatically remeasure a
 group; call this function when an app-owned layout change needs to affect
 targeting.
 
+### useRecomputeActiveDrag
+
+`useRecomputeActiveDrag` returns a function for rerunning the active drag update
+path from the last pointer position. It must be used inside `DragProvider` and
+is a thin wrapper over the DOM runtime operation. It follows the same update
+path as DOM pointer movement. Calling the returned function with no active drag
+is safe and does nothing.
+
+```tsx
+const recomputeActiveDrag = useRecomputeActiveDrag();
+
+recomputeActiveDrag();
+```
+
+Use it after external changes that require active targeting to run again without
+a new pointer event. It does not remeasure drop targets. When target
+measurements changed, call `useRemeasureDropTargets()` first.
+
+```tsx
+const remeasureDropTargets = useRemeasureDropTargets();
+const recomputeActiveDrag = useRecomputeActiveDrag();
+
+remeasureDropTargets({ group: "items" });
+recomputeActiveDrag();
+```
+
 ### useRemeasureOverlay
 
 `useRemeasureOverlay` returns a function for manually refreshing the current
@@ -426,6 +453,16 @@ Preview movement does not trigger full target remeasurement. The app still
 commits data on drop, using placement derived from the current preview DOM
 order. React rendering should then reflect the final data.
 
+React uses the DOM package placement rules. Same-container sortable preview
+keeps its movement-responsive first-placement behavior: forward movement places
+after a newly active target, backward movement places before, and no
+sortable-axis movement uses the target midpoint. When a sortable item first
+enters a different DOM container, the initial side is based on the target
+midpoint on the sortable axis: above or left of midpoint places before, while
+below or right of midpoint places after. `placementBoundary` remains a
+same-target reversal and hysteresis control after preview placement exists; it
+does not decide the initial side for cross-container sortable entry.
+
 Examples may rerender a full list for simplicity, but granular state management,
 external stores, server commits, and imperative rendering strategies are
 compatible. The package does not require React state.
@@ -525,6 +562,10 @@ DOM registry may narrow measured candidates to relevant sortable item, neighbor,
 or container entries before the targeting algorithm runs; the algorithm still
 chooses from that narrowed measured list.
 
+The before/after side follows the DOM package sortable placement behavior
+described above, including midpoint initial placement for cross-container entry
+and `placementBoundary` for later same-target reversal behavior.
+
 - `lockToXAxis()`
 - `lockToYAxis()`
 - `restrictToContainer(refOrResolver)`
@@ -590,9 +631,10 @@ mount/unmount.
 `useDraggable`, `useDroppable`, and `useSortable` rely on React prop/ref updates
 for normal mount, unmount, and element replacement behavior.
 
-`useRemeasureDropTargets` and `useRemeasureOverlay` are for geometry changes,
-not resource release. The runtime also prunes disconnected targets on
-drag-critical paths such as remeasurement.
+`useRemeasureDropTargets`, `useRecomputeActiveDrag`, and `useRemeasureOverlay`
+are for active drag geometry or targeting changes, not resource release. The
+runtime also prunes disconnected targets on drag-critical paths such as
+remeasurement.
 
 ## Examples
 
@@ -626,6 +668,8 @@ React examples live in `apps/react-web/src/react`:
 - `useDragHandle()`: returns the handle attribute props for a handle element.
 - `useRemeasureDropTargets()`: returns a function for remeasuring all targets,
   one target, multiple targets, or a group.
+- `useRecomputeActiveDrag()`: returns a function for rerunning active targeting
+  and drag update from the last pointer position without remeasuring targets.
 - `useRemeasureOverlay()`: returns a function for manually refreshing the
   currently mounted overlay measurement.
 - `composeRefs`: helper for combining the refs returned by hooks with app refs.

package/dist/hooks/use-recompute-active-drag.d.ts

@@ -0,0 +1 @@
+export declare function useRecomputeActiveDrag(): () => void;

package/dist/hooks/use-recompute-active-drag.js

@@ -0,0 +1,12 @@
+import { useCallback, useContext } from "react";
+import { DragContext } from "../drag-context.js";
+export function useRecomputeActiveDrag() {
+    const context = useContext(DragContext);
+    if (!context) {
+        throw new Error("useRecomputeActiveDrag must be used inside DragProvider");
+    }
+    const { runtime } = context;
+    return useCallback(() => {
+        runtime.recomputeActiveDrag();
+    }, [runtime]);
+}

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export { useDraggable, type UseDraggableOptions, type UseDraggableResult, } from
 export { useDropContainer, type UseDropContainerOptions, type UseDropContainerResult, } from "./hooks/use-drop-container.js";
 export { useDroppable, type UseDroppableOptions, type UseDroppableResult, } from "./hooks/use-droppable.js";
 export { useRemeasureDropTargets } from "./hooks/use-remeasure-drop-targets.js";
+export { useRecomputeActiveDrag } from "./hooks/use-recompute-active-drag.js";
 export { useRemeasureOverlay } from "./hooks/use-remeasure-overlay.js";
 export { useSortable, type UseSortableOptions, type UseSortableResult, } from "./hooks/use-sortable.js";
 export { composeRefs } from "./utils/compose-refs.js";

package/dist/index.js

@@ -6,6 +6,7 @@ export { useDraggable, } from "./hooks/use-draggable.js";
 export { useDropContainer, } from "./hooks/use-drop-container.js";
 export { useDroppable, } from "./hooks/use-droppable.js";
 export { useRemeasureDropTargets } from "./hooks/use-remeasure-drop-targets.js";
+export { useRecomputeActiveDrag } from "./hooks/use-recompute-active-drag.js";
 export { useRemeasureOverlay } from "./hooks/use-remeasure-overlay.js";
 export { useSortable, } from "./hooks/use-sortable.js";
 export { composeRefs } from "./utils/compose-refs.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mk-drag-and-drop/react",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "React hooks and provider for the mk drag-and-drop DOM runtime.",
   "license": "MIT",
   "homepage": "https://mkramer.dev",
@@ -39,7 +39,7 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@mk-drag-and-drop/dom": "^0.3.0"
+    "@mk-drag-and-drop/dom": "^0.4.1"
   },
   "peerDependencies": {
     "react": "^19.0.0"
@@ -57,8 +57,8 @@
     "react-dom": "^19.2.7",
     "vitest": "^2.1.9",
     "typescript": "5.5.4",
-    "@repo/eslint-config": "0.0.0",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.0"
   },
   "scripts": {
     "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",