feat: add allowPinchZoom

Author: theKashey

README.md

@@ -59,6 +59,7 @@ import {FocusOn} from 'react-focus-on';
  - `[gapMode]` - the way removed ScrollBar would be _compensated_ - margin(default), or padding. See [scroll-locky documentation](https://github.com/theKashey/react-scroll-locky#gap-modes) to find the one you need.
  - `[noIsolation]` - disables aria-hidden isolation
  - `[inert]` - enables pointer-events isolation (☠️ dangerous, use to disable "parent scrollbars", refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation)
+ - `[allowPinchZoom]` - enables "pinch-n-zoom" behavior. By default it might be prevented, refer to [react-remove-scroll](https://github.com/theKashey/react-remove-scroll) documentation
 ---
  - `[onActivation]` - on activation callback
  - `[onDeactivation]` - on deactivation callback

example/app.tsx

@@ -58,6 +58,8 @@ export default class App extends Component <{}, AppState> {
                   onActivation={() => console.log("activated")}
                   onDeactivation={() => console.log("deactivated")}
 
+                  allowPinchZoom={true}
+
                   className="test-class-name"
                 >
                   Holala!! {on ? "on" : "off"}

package.json

@@ -41,8 +41,8 @@
   },
   "dependencies": {
     "aria-hidden": "^1.1.1",
-    "react-focus-lock": "^2.2.0",
-    "react-remove-scroll": "^2.1.1",
+    "react-focus-lock": "^2.2.1",
+    "react-remove-scroll": "^2.2.0",
     "react-style-singleton": "^2.0.0",
     "use-callback-ref": "^1.2.1",
     "use-sidecar": "^1.0.1"

src/Effect.tsx

@@ -26,6 +26,7 @@ export function Effect({
   );
 
   const lastEventTarget = useRef<EventTarget>(null);
+  const mouseTouches = useRef<number>(0);
 
   React.useEffect(
     () => {
@@ -67,15 +68,26 @@ export function Effect({
         }
       };
 
+      const onTouchStart = (event: TouchEvent) => {
+        onMouseDown(event);
+        mouseTouches.current = event.touches.length;
+      };
+
+      const onTouchEnd = (event: TouchEvent) => {
+        mouseTouches.current = event.touches.length;
+      };
+
       if (activeNode) {
         document.addEventListener('keydown', onKeyDown);
         document.addEventListener('mousedown', onMouseDown);
-        document.addEventListener('touchstart', onMouseDown);
+        document.addEventListener('touchstart', onTouchStart);
+        document.addEventListener('touchend', onTouchEnd);
 
         return () => {
           document.removeEventListener('keydown', onKeyDown);
           document.removeEventListener('mousedown', onMouseDown);
-          document.removeEventListener('touchstart', onMouseDown);
+          document.removeEventListener('touchstart', onTouchStart);
+          document.removeEventListener('touchend', onTouchEnd);
         };
       }
     },

src/UI.tsx

@@ -20,6 +20,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
       focusLock = true,
       returnFocus = true,
       inert,
+      allowPinchZoom,
       sideCar,
       className,
       ...rest
@@ -46,6 +47,7 @@ export const FocusOn = React.forwardRef<HTMLElement, ReactFocusOnSideProps>(
             ...restProps,
             sideCar,
             shards,
+            allowPinchZoom,
             inert,
             enabled: enabled && scrollLock
           }}

src/types.ts

@@ -19,6 +19,7 @@ export interface CommonProps {
 
   noIsolation?: boolean;
   inert?: boolean;
+  allowPinchZoom?: boolean;
 
   shards?: Array<React.RefObject<any> | HTMLElement>;
 }

yarn.lock

@@ -4515,10 +4515,10 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.1"
     readable-stream "^2.0.4"
 
-focus-lock@^0.6.5:
-  version "0.6.5"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.5.tgz#f6eb37832a9b1b205406175f5277396a28c0fce1"
-  integrity sha512-i/mVBOoa9o+tl+u9owOJUF8k8L85odZNIsctB+JAK2HFT8jckiBwmk+3uydlm6FN8czgnkIwQtBv6yyAbrzXjw==
+focus-lock@^0.6.6:
+  version "0.6.6"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
+  integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
 
 follow-redirects@^1.0.0:
   version "1.5.9"
@@ -8584,13 +8584,13 @@ react-dom@^16.8.6:
     prop-types "^15.6.2"
     scheduler "^0.13.6"
 
-react-focus-lock@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.0.tgz#8eb17dfb4c51e1b0a514bd0d4555208e46715deb"
-  integrity sha512-0Km5cKst2pQJqaE1ctNzkSH/ev9sw7Xl24OfY3U9PhVb4/d9F9qwWsiRd9KQ5lOSKeUpLlp/NP8l+FE+LM/e0A==
+react-focus-lock@^2.2.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.2.1.tgz#1d12887416925dc53481914b7cedd39494a3b24a"
+  integrity sha512-47g0xYcCTZccdzKRGufepY8oZ3W1Qg+2hn6u9SHZ0zUB6uz/4K4xJe7yYFNZ1qT6m+2JDm82F6QgKeBTbjW4PQ==
   dependencies:
     "@babel/runtime" "^7.0.0"
-    focus-lock "^0.6.5"
+    focus-lock "^0.6.6"
     prop-types "^15.6.2"
     react-clientside-effect "^1.2.2"
     use-callback-ref "^1.2.1"
@@ -8631,10 +8631,10 @@ react-remove-scroll-bar@^2.0.0:
     react-style-singleton "^2.0.0"
     tslib "^1.0.0"
 
-react-remove-scroll@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.1.1.tgz#8149d91bbc507ba06495cc9e18edb4c799a6654c"
-  integrity sha512-5FE6/hUw8ajzRpbeJDQ2XXQ1+u5ox6JBLNl6T8o5cBJ64i4KARgxyToJnm8g4EptjBKnoQQwUYkHzxCOZWbynw==
+react-remove-scroll@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.2.0.tgz#f42e6a4791ebfcce2c96f970d24deb1399fa9550"
+  integrity sha512-bT29xAkNuhS2tnsxhLNJrmmb6Rn8VsnlOfSoRaKdKi90DbhRcQfJ9vHG1TtgfkCP+rx059vCGIScPZaCWsyIKA==
   dependencies:
     react-remove-scroll-bar "^2.0.0"
     react-style-singleton "^2.0.0"