solidjs-motion 0.1.2 → 0.1.4

package/dist/src/motion-proxy.d.ts

@@ -31,7 +31,7 @@ import { MotionOptions, MotionStyle } from './types';
  * AND `splitProps` at runtime break — the type check surfaces the
  * specific missing key by name.
  */
-export type MotionOptKey = "initial" | "animate" | "exit" | "hover" | "press" | "focus" | "inView" | "inViewOptions" | "drag" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragSnapToOrigin" | "dragControls" | "whileDrag" | "panThreshold" | "variants" | "custom" | "transition" | "onAnimationStart" | "onAnimationComplete" | "onAnimationCancel" | "onUpdate" | "onHoverStart" | "onHoverEnd" | "onPressStart" | "onPress" | "onPressCancel" | "onFocus" | "onBlur" | "onPanStart" | "onPan" | "onPanEnd" | "onViewportEnter" | "onViewportLeave" | "onDragStart" | "onDrag" | "onDragEnd" | "onDragTransitionEnd";
+export type MotionOptKey = "initial" | "animate" | "exit" | "hover" | "press" | "focus" | "inView" | "inViewOptions" | "drag" | "dragConstraints" | "dragElastic" | "dragMomentum" | "dragTransition" | "dragSnapToOrigin" | "dragControls" | "dragListener" | "whileDrag" | "panThreshold" | "variants" | "custom" | "transition" | "onAnimationStart" | "onAnimationComplete" | "onAnimationCancel" | "onUpdate" | "onHoverStart" | "onHoverEnd" | "onPressStart" | "onPress" | "onPressCancel" | "onFocus" | "onBlur" | "onPanStart" | "onPan" | "onPanEnd" | "onViewportEnter" | "onViewportLeave" | "onDragStart" | "onDrag" | "onDragEnd" | "onDragTransitionEnd";
 /**
  * Frozen list of `MotionOptKey`s — fed to `splitProps` at every
  * tag-component render to separate motion options from element

package/dist/src/types.d.ts

@@ -146,6 +146,20 @@ export type DragOptions = {
     dragSnapToOrigin?: boolean;
     /** Imperatively-triggered drag (from createDragControls). */
     dragControls?: DragControls;
+    /**
+     * Whether drag listens for its OWN pointerdown events on the element.
+     * Defaults to `true`.
+     *
+     * Set to `false` when drag should only be started externally via a
+     * `dragControls.start(event)` call from a different element (typically
+     * a "drag handle"). The element itself remains non-draggable from
+     * direct pointer interaction — useful for drawers, sheets, and other
+     * surfaces where the body must stay scrollable and only a dedicated
+     * affordance should commit to a drag.
+     *
+     * Mirrors motion-react's `dragListener` prop.
+     */
+    dragListener?: boolean;
 };
 export type MotionCallbacks = {
     onAnimationStart?: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "solidjs-motion",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "An animation library for SolidJS — port of motion/react patterns built on the framework-agnostic motion package",
   "type": "module",
   "main": "./dist/index.js",

package/src/motion-proxy.tsx

@@ -75,6 +75,7 @@ export type MotionOptKey =
   | "dragTransition"
   | "dragSnapToOrigin"
   | "dragControls"
+  | "dragListener"
   | "whileDrag"
   // Pan
   | "panThreshold"
@@ -132,6 +133,7 @@ export const MOTION_OPT_KEYS: readonly MotionOptKey[] = [
   "dragTransition",
   "dragSnapToOrigin",
   "dragControls",
+  "dragListener",
   "whileDrag",
   // Pan
   "panThreshold",

package/src/primitives/createDrag.ts

@@ -474,7 +474,16 @@ export function createDrag(
     restoreBodyAndElementStyles()
     releasePointerCaptureSafely()
 
-    getOpts().onDragEnd?.(event, info)
+    // The user's `onDragEnd` callback fires at the END of this function
+    // (just before the early-out), not here. Rationale: a synchronous
+    // state flip from the callback (e.g. closing a Dialog whose contents
+    // are this draggable) used to race motion's own post-callback work
+    // — momentum dispatch, MV-ref cleanup — and could wedge surrounding
+    // libraries that observe the same DOM (scroll lock, pointer-event
+    // layers). Firing AFTER all motion DOM-touching work guarantees a
+    // clean handoff: by the time the callback runs, the drag session is
+    // fully torn down and any subsequent reactive cascade is unambiguous
+    // about ownership.
 
     // Capture refs locally — the closure clears xMV/yMV below before the
     // momentum promise can resolve, but the inertia animation needs stable
@@ -630,20 +639,34 @@ export function createDrag(
     xMV = null
     yMV = null
     sessionBounds = null
+
+    // Callback fires last — see the note at the top of handlePanEnd.
+    getOpts().onDragEnd?.(event, info)
   }
 
   // Function-form options so createPan reads `panThreshold` reactively.
   // Handler references are stable — only the threshold (and the wrapping
   // object) is recreated per call from createPan.
-  createPan(
-    () => el,
-    () => ({
-      threshold: getOpts().panThreshold,
-      onPanStart: handlePanStart,
-      onPan: handlePan,
-      onPanEnd: handlePanEnd,
-    }),
-  )
+  //
+  // `dragListener: false` opts out of motion's own pointerdown listener
+  // on `el`. Drag becomes external-only — triggered through
+  // `dragControls.start(event)` from another element. Pointer
+  // interaction on `el` itself stays inert, letting the surface remain
+  // scrollable (the canonical case: a drawer body with a dedicated drag
+  // handle). One-time read at construction matches motion-react's
+  // semantic — toggling `dragListener` reactively is intentionally not
+  // supported.
+  if (getOpts().dragListener !== false) {
+    createPan(
+      () => el,
+      () => ({
+        threshold: getOpts().panThreshold,
+        onPanStart: handlePanStart,
+        onPan: handlePan,
+        onPanEnd: handlePanEnd,
+      }),
+    )
+  }
 
   // ---------- External drag (Q9 — createDragControls integration) ----------
   // When the user wires `dragControls: someControls` into MotionOptions, an

package/src/types.ts

@@ -219,6 +219,20 @@ export type DragOptions = {
   dragSnapToOrigin?: boolean
   /** Imperatively-triggered drag (from createDragControls). */
   dragControls?: DragControls
+  /**
+   * Whether drag listens for its OWN pointerdown events on the element.
+   * Defaults to `true`.
+   *
+   * Set to `false` when drag should only be started externally via a
+   * `dragControls.start(event)` call from a different element (typically
+   * a "drag handle"). The element itself remains non-draggable from
+   * direct pointer interaction — useful for drawers, sheets, and other
+   * surfaces where the body must stay scrollable and only a dedicated
+   * affordance should commit to a drag.
+   *
+   * Mirrors motion-react's `dragListener` prop.
+   */
+  dragListener?: boolean
 }
 
 // ---------------------------------------------------------------------------