react-sway 0.4.1 → 0.4.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## 0.4.3 - 2026-10-21
+
+- Preserve browser zoom gestures, nested controls, and secondary mouse clicks.
+- Stop external edge-hover motion when edge-hover mode is disabled.
+- Preserve inert duplicate groups on React 17 and 18 as well as React 19.
+- Update the development toolchain; keep TypeScript 6 for parser compatibility.
+
 ## 0.4.0
 
 - Added horizontal and vertical axis semantics with page-safe touch behavior.

package/README.md

@@ -16,7 +16,8 @@ It works by duplicating your content to create a seamless loop and uses CSS tran
 *   **User Friendly Interactions:**
     *   Click and drag to scroll.
     *   Swipe on touch devices.
-    *   Mouse wheel support with axis-aware intent detection, delta-mode normalization, and velocity capping.
+    *   Mouse wheel support with axis-aware intent detection, delta-mode normalization, and velocity capping. Browser zoom gestures pass through.
+    *   Nested buttons, links, and editable fields retain their native interactions.
     *   Keyboard controls: Spacebar to pause/resume, Arrow keys to scroll, Home/End to jump.
 *   **External Input Bridge:** Use `ref` with `ReactSwayHandle` to route wheel and edge-hover intent from a parent drag/drop surface into Sway.
 *   **Idle-Safe Listeners:** Global drag listeners are attached only during active drag or touch gestures and cleaned up on release, cancel, blur, and unmount.
@@ -290,12 +291,12 @@ function MinimalEdgeHoverExamples() {
 | `edgeHoverInputMode` | `'external' \| 'hybrid'` | `'hybrid'` | Use intrinsic pointer sensing plus the imperative bridge, or external imperative ownership only for composed drag surfaces. |
 | `edgeHoverScroll` | `boolean` | `false` | Only auto-scroll while hovering the active axis boundary: top/bottom for vertical, left/right for horizontal. A short ingress feather removes sensor chatter; velocity then accelerates through the physical edge and reaches its bounded cap one activation-zone width beyond it. |
 | `edgeHoverSize` | `number` | `96` | Thickness in pixels of each edge-hover activation zone. |
-| `edgeHoverSpeedMultiplier` | `number` | `6` | Maximum edge-hover velocity as a multiple of `speed`. The physical edge retains the established 3x response, then accelerates to the bounded `1`–`10` maximum beyond the viewport; set `1` for constant speed. |
+| `edgeHoverSpeedMultiplier` | `number` | `6` | Maximum edge-hover velocity as a multiple of `speed`. The physical edge retains the established 3x response, then accelerates to the bounded `1`–`10` maximum beyond the viewport; set `1` for constant speed. |
 | `friction` | `number` | `0.95` | Momentum decay coefficient (0-1, lower = more friction). |
 | `keyboard` | `boolean` | `true` | Enable keyboard controls (Space, Arrow keys, Home/End). |
 | `lazy` | `boolean` | `true` | Enable lazy visibility detection via IntersectionObserver. |
 | `lazyRootMargin` | `string` | `'100px'` | IntersectionObserver `rootMargin` for lazy visibility detection. |
-| `lazyThreshold` | `number` | `0.01` | IntersectionObserver `threshold`, normalized to the inclusive `0`–`1` interval. |
+| `lazyThreshold` | `number` | `0.01` | IntersectionObserver `threshold`, normalized to the inclusive `0`–`1` interval. |
 | `onPause` | `() => void` | - | Fired once when active autonomous scrolling transitions to interaction-paused. |
 | `onResume` | `() => void` | - | Fired when interaction-paused autonomous scrolling resumes. |
 | `onScroll` | `(position: number) => void` | - | Fired on every position change with the current scroll position. |

package/dist/index.cjs

@@ -50,10 +50,10 @@ function getEdgeHoverVelocityScale(intensity, speedMultiplier = 6) {
 	if (depth < EDGE_HOVER_ENTRY_FEATHER_INTENSITY) return direction * smoothUnitStep(depth / EDGE_HOVER_ENTRY_FEATHER_INTENSITY);
 	const physicalEdgeScale = Math.min(EDGE_HOVER_PHYSICAL_EDGE_SPEED_MULTIPLIER, maximumScale);
 	if (depth <= EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) {
-		const physicalEdgeProgress = (depth - EDGE_HOVER_ENTRY_FEATHER_INTENSITY) / (EDGE_HOVER_PHYSICAL_EDGE_INTENSITY - EDGE_HOVER_ENTRY_FEATHER_INTENSITY);
+		const physicalEdgeProgress = (depth - EDGE_HOVER_ENTRY_FEATHER_INTENSITY) / .42;
 		return direction * (1 + (physicalEdgeScale - 1) * smoothUnitStep(physicalEdgeProgress));
 	}
-	const beyondEdgeProgress = (depth - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) / (1 - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY);
+	const beyondEdgeProgress = (depth - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) / .5;
 	return direction * (physicalEdgeScale + (maximumScale - physicalEdgeScale) * smoothUnitStep(beyondEdgeProgress));
 }
 /**
@@ -115,8 +115,10 @@ function normalizeWheelDelta(event, container, axis) {
 * the gesture. This partial function is the wheel-ownership boundary.
 */
 function getOwnedWheelDelta(event, container, isHorizontal, wheelMode) {
+	if (event.ctrlKey) return null;
 	const deltaX = normalizeWheelDelta(event, container, "x");
 	const deltaY = normalizeWheelDelta(event, container, "y");
+	if (!Number.isFinite(deltaX) || !Number.isFinite(deltaY) || deltaX === 0 && deltaY === 0) return null;
 	const absDeltaX = Math.abs(deltaX);
 	const absDeltaY = Math.abs(deltaY);
 	if (isHorizontal) {
@@ -161,6 +163,10 @@ var WHEEL_VELOCITY_MULTIPLIER = .14;
 var WHEEL_IMMEDIATE_DELTA_FACTOR = .14;
 /** Minimum touch movement before a gesture is classified by axis. */
 var TOUCH_AXIS_LOCK_THRESHOLD_PX = 8;
+var INERT_ATTRIBUTE = { inert: Number.parseInt(react.version, 10) >= 19 ? true : "" };
+function isInteractiveTarget(target) {
+	return target instanceof Element && Boolean(target.closest("a, button, input, select, textarea, [contenteditable]:not([contenteditable=\"false\"])"));
+}
 function getVisibleEdgeInterval(rect, isHorizontal) {
 	const rectEnd = isHorizontal ? rect.right : rect.bottom;
 	const rectStart = isHorizontal ? rect.left : rect.top;
@@ -421,7 +427,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		touchDragListenerCleanupRef.current = null;
 	}, []);
 	const handleKeyDown = (0, react.useCallback)((e) => {
-		if (!keyboard) return;
+		if (!keyboard || isInteractiveTarget(e.target)) return;
 		switch (e.key) {
 			case " ":
 				e.preventDefault();
@@ -468,8 +474,6 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 				velocityRef.current = 0;
 				pauseAutoScroll();
 				scheduleAutoScrollResume();
-				break;
-			default: break;
 		}
 		startAnimationLoop();
 	}, [
@@ -537,7 +541,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		handleMouseUp
 	]);
 	const handleMouseDown = (0, react.useCallback)((e) => {
-		if (!draggable) return;
+		if (!draggable || e.button !== 0 || isInteractiveTarget(e.target)) return;
 		e.preventDefault();
 		containerRef.current?.focus();
 		setDraggingState(true);
@@ -617,7 +621,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		handleTouchMove
 	]);
 	const handleTouchStart = (0, react.useCallback)((e) => {
-		if (!draggable || e.touches.length !== 1) return;
+		if (!draggable || e.touches.length !== 1 || isInteractiveTarget(e.target)) return;
 		containerRef.current?.focus();
 		touchInteractionStateRef.current = "pending";
 		lastTouchXRef.current = e.touches[0].clientX;
@@ -628,7 +632,7 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		attachTouchDragListeners();
 	}, [attachTouchDragListeners, draggable]);
 	const handleWheel = (0, react.useCallback)((e) => {
-		if (!wheelEnabled) return false;
+		if (!wheelEnabled || e.defaultPrevented) return false;
 		const currentContainer = e.currentTarget instanceof HTMLElement ? e.currentTarget : containerRef.current;
 		if (!currentContainer) return false;
 		const ownedDelta = getOwnedWheelDelta(e, currentContainer, isHorizontal, wheelMode);
@@ -681,6 +685,9 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 		externalEdgeHoverLeaseRef.current = false;
 		setEdgeHoverIntensity(0);
 	}, [setEdgeHoverIntensity]);
+	(0, react.useEffect)(() => {
+		if (!edgeHoverScroll) clearEdgeHover();
+	}, [clearEdgeHover, edgeHoverScroll]);
 	(0, react.useImperativeHandle)(ref, () => ({
 		clearEdgeHover,
 		handleEdgeHover,
@@ -911,19 +918,19 @@ var ReactSway = (0, react.forwardRef)(function ReactSway({ ariaLabel = "Scrollab
 				flex: "0 0 auto"
 			} : void 0,
 			children
-		}), Array.from({ length: loopSegmentCount - 1 }, (_, duplicateIndex) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("aside", {
+		}), Array.from({ length: loopSegmentCount - 1 }, (_, duplicateIndex) => /* @__PURE__ */ (0, react.createElement)("aside", {
 			"aria-hidden": "true",
 			className: "content-group duplicate",
 			"data-duplicate": "true",
-			inert: true,
+			...INERT_ATTRIBUTE,
+			key: `duplicate-${duplicateIndex}`,
 			role: "presentation",
 			style: isHorizontal ? {
 				display: "flex",
 				flex: "0 0 auto",
 				pointerEvents: "none"
-			} : { pointerEvents: "none" },
-			children
-		}, `duplicate-${duplicateIndex}`))]
+			} : { pointerEvents: "none" }
+		}, children))]
 	});
 });
 //#endregion

package/dist/index.js

@@ -1,4 +1,4 @@
-import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createElement, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, version } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/edge-hover-velocity.ts
 /**
@@ -49,10 +49,10 @@ function getEdgeHoverVelocityScale(intensity, speedMultiplier = 6) {
 	if (depth < EDGE_HOVER_ENTRY_FEATHER_INTENSITY) return direction * smoothUnitStep(depth / EDGE_HOVER_ENTRY_FEATHER_INTENSITY);
 	const physicalEdgeScale = Math.min(EDGE_HOVER_PHYSICAL_EDGE_SPEED_MULTIPLIER, maximumScale);
 	if (depth <= EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) {
-		const physicalEdgeProgress = (depth - EDGE_HOVER_ENTRY_FEATHER_INTENSITY) / (EDGE_HOVER_PHYSICAL_EDGE_INTENSITY - EDGE_HOVER_ENTRY_FEATHER_INTENSITY);
+		const physicalEdgeProgress = (depth - EDGE_HOVER_ENTRY_FEATHER_INTENSITY) / .42;
 		return direction * (1 + (physicalEdgeScale - 1) * smoothUnitStep(physicalEdgeProgress));
 	}
-	const beyondEdgeProgress = (depth - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) / (1 - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY);
+	const beyondEdgeProgress = (depth - EDGE_HOVER_PHYSICAL_EDGE_INTENSITY) / .5;
 	return direction * (physicalEdgeScale + (maximumScale - physicalEdgeScale) * smoothUnitStep(beyondEdgeProgress));
 }
 /**
@@ -114,8 +114,10 @@ function normalizeWheelDelta(event, container, axis) {
 * the gesture. This partial function is the wheel-ownership boundary.
 */
 function getOwnedWheelDelta(event, container, isHorizontal, wheelMode) {
+	if (event.ctrlKey) return null;
 	const deltaX = normalizeWheelDelta(event, container, "x");
 	const deltaY = normalizeWheelDelta(event, container, "y");
+	if (!Number.isFinite(deltaX) || !Number.isFinite(deltaY) || deltaX === 0 && deltaY === 0) return null;
 	const absDeltaX = Math.abs(deltaX);
 	const absDeltaY = Math.abs(deltaY);
 	if (isHorizontal) {
@@ -160,6 +162,10 @@ var WHEEL_VELOCITY_MULTIPLIER = .14;
 var WHEEL_IMMEDIATE_DELTA_FACTOR = .14;
 /** Minimum touch movement before a gesture is classified by axis. */
 var TOUCH_AXIS_LOCK_THRESHOLD_PX = 8;
+var INERT_ATTRIBUTE = { inert: Number.parseInt(version, 10) >= 19 ? true : "" };
+function isInteractiveTarget(target) {
+	return target instanceof Element && Boolean(target.closest("a, button, input, select, textarea, [contenteditable]:not([contenteditable=\"false\"])"));
+}
 function getVisibleEdgeInterval(rect, isHorizontal) {
 	const rectEnd = isHorizontal ? rect.right : rect.bottom;
 	const rectStart = isHorizontal ? rect.left : rect.top;
@@ -420,7 +426,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		touchDragListenerCleanupRef.current = null;
 	}, []);
 	const handleKeyDown = useCallback((e) => {
-		if (!keyboard) return;
+		if (!keyboard || isInteractiveTarget(e.target)) return;
 		switch (e.key) {
 			case " ":
 				e.preventDefault();
@@ -467,8 +473,6 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 				velocityRef.current = 0;
 				pauseAutoScroll();
 				scheduleAutoScrollResume();
-				break;
-			default: break;
 		}
 		startAnimationLoop();
 	}, [
@@ -536,7 +540,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		handleMouseUp
 	]);
 	const handleMouseDown = useCallback((e) => {
-		if (!draggable) return;
+		if (!draggable || e.button !== 0 || isInteractiveTarget(e.target)) return;
 		e.preventDefault();
 		containerRef.current?.focus();
 		setDraggingState(true);
@@ -616,7 +620,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		handleTouchMove
 	]);
 	const handleTouchStart = useCallback((e) => {
-		if (!draggable || e.touches.length !== 1) return;
+		if (!draggable || e.touches.length !== 1 || isInteractiveTarget(e.target)) return;
 		containerRef.current?.focus();
 		touchInteractionStateRef.current = "pending";
 		lastTouchXRef.current = e.touches[0].clientX;
@@ -627,7 +631,7 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		attachTouchDragListeners();
 	}, [attachTouchDragListeners, draggable]);
 	const handleWheel = useCallback((e) => {
-		if (!wheelEnabled) return false;
+		if (!wheelEnabled || e.defaultPrevented) return false;
 		const currentContainer = e.currentTarget instanceof HTMLElement ? e.currentTarget : containerRef.current;
 		if (!currentContainer) return false;
 		const ownedDelta = getOwnedWheelDelta(e, currentContainer, isHorizontal, wheelMode);
@@ -680,6 +684,9 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 		externalEdgeHoverLeaseRef.current = false;
 		setEdgeHoverIntensity(0);
 	}, [setEdgeHoverIntensity]);
+	useEffect(() => {
+		if (!edgeHoverScroll) clearEdgeHover();
+	}, [clearEdgeHover, edgeHoverScroll]);
 	useImperativeHandle(ref, () => ({
 		clearEdgeHover,
 		handleEdgeHover,
@@ -910,19 +917,19 @@ var ReactSway = forwardRef(function ReactSway({ ariaLabel = "Scrollable content"
 				flex: "0 0 auto"
 			} : void 0,
 			children
-		}), Array.from({ length: loopSegmentCount - 1 }, (_, duplicateIndex) => /* @__PURE__ */ jsx("aside", {
+		}), Array.from({ length: loopSegmentCount - 1 }, (_, duplicateIndex) => /* @__PURE__ */ createElement("aside", {
 			"aria-hidden": "true",
 			className: "content-group duplicate",
 			"data-duplicate": "true",
-			inert: true,
+			...INERT_ATTRIBUTE,
+			key: `duplicate-${duplicateIndex}`,
 			role: "presentation",
 			style: isHorizontal ? {
 				display: "flex",
 				flex: "0 0 auto",
 				pointerEvents: "none"
-			} : { pointerEvents: "none" },
-			children
-		}, `duplicate-${duplicateIndex}`))]
+			} : { pointerEvents: "none" }
+		}, children))]
 	});
 });
 //#endregion

package/package.json

@@ -16,18 +16,18 @@
     }
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^16.3.2",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "eslint": "^10.7.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "eslint": "^10.13.0",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "jsdom": "^29.1.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "jsdom": "^30.1.3",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "typescript": "^6.0.3",
-    "vite": "^8.1.5",
-    "vitest": "^4.1.10"
+    "vite": "^8.3.4",
+    "vitest": "^5.0.5"
   },
   "files": [
     "CHANGELOG.md",
@@ -74,5 +74,5 @@
   },
   "type": "module",
   "types": "./dist/index.d.ts",
-  "version": "0.4.1"
+  "version": "0.4.3"
 }