solidjs-motion 0.1.3 → 0.1.5

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.3",
+  "version": "0.1.5",
   "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

@@ -647,15 +647,26 @@ export function createDrag(
   // 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
 }
 
 // ---------------------------------------------------------------------------

package/src/use-motion.tsx

@@ -309,9 +309,37 @@ export function useMotion(opts: MotionOptions | (() => MotionOptions)): UseMotio
     return mergeProps(userProps ?? {}, {
       get style() {
         const cleaned = stripStyleEntriesOwnedByRegistry(userProps?.style)
-        if (renderedOnce) return cleaned
+
+        // Drag-friendly `touch-action` default for any drag-configured
+        // element. Without this, the mobile browser arbitrates the
+        // gesture as native scroll/zoom and may fire `pointercancel`
+        // before motion's own `touch-action` write (inside
+        // handlePanStart) can take effect — which would manifest as
+        // either a missed drag or a panEnd dispatched with stale
+        // offset data. Setting it at render time, before the browser
+        // ever sees a pointer event, closes that race.
+        //
+        // axis "x" → "pan-y" (browser may still scroll the page
+        // vertically), axis "y" → "pan-x", otherwise → "none".
+        //
+        // Goes FIRST in the spread order so user-supplied
+        // `style: { touchAction: "auto" }` overrides this default.
+        const dragOpts = getOpts().drag
+        const dragTouchAction = dragOpts
+          ? dragOpts === "x"
+            ? "pan-y"
+            : dragOpts === "y"
+              ? "pan-x"
+              : "none"
+          : undefined
+
+        const baseWithDefaults = dragTouchAction
+          ? { "touch-action": dragTouchAction, ...cleaned }
+          : cleaned
+
+        if (renderedOnce) return baseWithDefaults
         const composed = composeFirstPaintStyle(userProps?.style)
-        return composed ? { ...cleaned, ...composed } : cleaned
+        return composed ? { ...baseWithDefaults, ...composed } : baseWithDefaults
       },
       ref: mergeRefs(userProps?.ref, motionRef),
       ...(wroteFirstPaintStyle ? { "data-motion-hydrated": "" } : {}),