[pull] main from bvaughn:main

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 4.6.4
+
+- [664](https://github.com/bvaughn/react-resizable-panels/pull/664), [665](https://github.com/bvaughn/react-resizable-panels/pull/665): Resize actions sometimes "jump" on touch devices
+
 ## 4.6.3
 
 - Fixed a problem with project logo not displaying correctly in the README for the Firefox browser.

lib/components/group/Group.tsx

@@ -356,10 +356,18 @@ export function Group({
           height: "100%",
           width: "100%",
           overflow: "hidden",
+
           ...style,
+
           display: "flex",
           flexDirection: orientation === "horizontal" ? "row" : "column",
-          flexWrap: "nowrap"
+          flexWrap: "nowrap",
+
+          // Inform the browser that the library is handling touch events for this element
+          // but still allow users to scroll content within panels in the non-resizing direction
+          // NOTE This is not an inherited style
+          // See github.com/bvaughn/react-resizable-panels/issues/662
+          touchAction: orientation === "horizontal" ? "pan-y" : "pan-x"
         }}
       >
         {children}

lib/components/panel/Panel.tsx

@@ -72,6 +72,7 @@ export function Panel({
   const {
     getPanelStyles,
     id: groupId,
+    orientation,
     registerPanel,
     togglePanelDisabled
   } = useGroupContext();
@@ -176,7 +177,13 @@ export function Panel({
           maxWidth: "100%",
           flexGrow: 1,
 
-          ...style
+          ...style,
+
+          // Inform the browser that the library is handling touch events for this element
+          // but still allow users to scroll content within panels in the non-resizing direction
+          // NOTE This is not an inherited style
+          // See github.com/bvaughn/react-resizable-panels/issues/662
+          touchAction: orientation === "horizontal" ? "pan-y" : "pan-x"
         }}
       >
         {children}

lib/components/separator/Separator.tsx

@@ -160,9 +160,15 @@ export function Separator({
       style={{
         flexBasis: "auto",
         cursor,
+
         ...style,
+
         flexGrow: 0,
-        flexShrink: 0
+        flexShrink: 0,
+
+        // Inform the browser that the library is handling touch events for this element
+        // See github.com/bvaughn/react-resizable-panels/issues/662
+        touchAction: "none"
       }}
       tabIndex={disabled ? undefined : 0}
     />

lib/global/cursor/updateCursorStyle.ts

@@ -38,7 +38,7 @@ export function updateCursorStyle(ownerDocument: Document) {
         state: interactionState.state
       });
 
-      const nextStyle = `*, *:hover {cursor: ${cursorStyle} !important; ${interactionState.state === "active" ? "touch-action: none;" : ""} }`;
+      const nextStyle = `*, *:hover {cursor: ${cursorStyle} !important; }`;
       if (prevStyle === nextStyle) {
         return;
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-resizable-panels",
-  "version": "4.6.3",
+  "version": "4.6.4",
   "type": "module",
   "author": "Brian Vaughn <brian.david.vaughn@gmail.com> (https://github.com/bvaughn/)",
   "contributors": [