solidjs-motion 0.1.3 → 0.1.5

package/CHANGELOG.md

@@ -5,6 +5,54 @@ All notable changes to `solidjs-motion` / `@solidjs-motion/motion` are documente
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.5] — 2026-05-21
+
+### Fixed
+
+- **Drag now sets `touch-action` upfront on the element** when `drag` is
+  configured, not just inside `handlePanStart` after threshold cross.
+  Previously, on mobile, the browser would arbitrate the gesture as
+  native scroll/zoom and fire `pointercancel` before motion's own
+  touch-action write could take effect — manifesting as missed drags
+  or, when the user's `onDragEnd` made a threshold-based decision off
+  stale `info.offset`, an immediate dismiss-on-touch (visible in the
+  swipe-stack demo: every press fired a left-swipe).
+
+  Axis mapping mirrors motion-react:
+  - `drag="x"` → `touch-action: pan-y` (browser keeps vertical scroll)
+  - `drag="y"` → `touch-action: pan-x`
+  - `drag={true}` → `touch-action: none`
+
+  User-supplied `style.touch-action` still overrides via natural
+  spread precedence — e.g., `style={{ touchAction: "auto" }}` opts back
+  into the browser's default arbitration. Three regression tests added.
+
+  Removes the need for users to remember to set `touch-action: none` on
+  every draggable element — `<motion.div drag="x">` now Just Works on
+  touch devices.
+
+## [0.1.4] — 2026-05-21
+
+### Added
+
+- **`dragListener` option** on `useMotion` / `<motion.X>` / `motion.create`.
+  Mirrors motion-react's prop. Defaults to `true`. When set to `false`,
+  drag skips attaching its own pointerdown listener to the element —
+  drag becomes external-only, triggered through `dragControls.start(e)`
+  from a handle elsewhere. The canonical case is a scrollable drawer
+  body where direct pointer interaction must stay scroll-only, and a
+  dedicated edge handle is the single drag affordance.
+
+  ```tsx
+  const controls = createDragControls()
+  return (
+    <motion.aside drag="x" dragControls={controls} dragListener={false}>
+      {/* body stays scrollable — no drag from direct touch */}
+      <span onPointerDown={(e) => controls.start(e)}>handle</span>
+    </motion.aside>
+  )
+  ```
+
 ## [0.1.3] — 2026-05-21
 
 ### Fixed

package/dist/index.js

@@ -1246,7 +1246,7 @@ function createDrag(el, getOpts, setActive) {
 		sessionBounds = null;
 		getOpts().onDragEnd?.(event, info);
 	};
-	createPan(() => el, () => ({
+	if (getOpts().dragListener !== false) createPan(() => el, () => ({
 		threshold: getOpts().panThreshold,
 		onPanStart: handlePanStart,
 		onPan: handlePan,
@@ -2308,12 +2308,18 @@ function useMotion(opts) {
 		return mergeProps$1(userProps ?? {}, {
 			get style() {
 				const cleaned = stripStyleEntriesOwnedByRegistry(userProps?.style);
-				if (renderedOnce) return cleaned;
+				const dragOpts = getOpts().drag;
+				const dragTouchAction = dragOpts ? dragOpts === "x" ? "pan-y" : dragOpts === "y" ? "pan-x" : "none" : void 0;
+				const baseWithDefaults = dragTouchAction ? {
+					"touch-action": dragTouchAction,
+					...cleaned
+				} : cleaned;
+				if (renderedOnce) return baseWithDefaults;
 				const composed = composeFirstPaintStyle(userProps?.style);
 				return composed ? {
-					...cleaned,
+					...baseWithDefaults,
 					...composed
-				} : cleaned;
+				} : baseWithDefaults;
 			},
 			ref: mergeRefs(userProps?.ref, motionRef),
 			...wroteFirstPaintStyle ? { "data-motion-hydrated": "" } : {}
@@ -2380,6 +2386,7 @@ var MOTION_OPT_KEYS = [
 	"dragTransition",
 	"dragSnapToOrigin",
 	"dragControls",
+	"dragListener",
 	"whileDrag",
 	"panThreshold",
 	"variants",