[Web] Detector DOM props (#3877)

## Description

This PR introduces missing web props to `NativeDetector`.

## Test plan

<details>
<summary>Tested on the following code:</summary>

```tsx
import React, { useState } from 'react';
import { StyleSheet, Text, Pressable } from 'react-native';
import {
  GestureDetector,
  GestureHandlerRootView,
  usePanGesture,
} from 'react-native-gesture-handler';
import Animated, {
  interpolateColor,
  useAnimatedStyle,
  useSharedValue,
  withTiming,
} from 'react-native-reanimated';

const Colors = {
  enabled: '#32a852',
  disabled: '#b02525',
};

const AnimationDuration = 250;

export default function WebStylesResetExample() {
  const [enabled, setEnabled] = useState(true);
  const colorProgress = useSharedValue(0);

  const animatedStyles = useAnimatedStyle(() => {
    const backgroundColor = interpolateColor(
      colorProgress.value,
      [0, 1],
      [Colors.enabled, Colors.disabled]
    );

    return { backgroundColor };
  });

  const g = usePanGesture({
    onUpdate: (e) => {
      console.log(e.x, e.y);
    },
    enabled: enabled,
    disableReanimated: true,
  });

  return (
    <GestureHandlerRootView style={[styles.container, styles.centered]}>
      <GestureDetector gesture={g} enableContextMenu={false} userSelect="auto">
        <Animated.View style={[styles.box, styles.centered, animatedStyles]}>
          <Text style={{ fontSize: 32 }}> Lorem Ipsum </Text>
        </Animated.View>
      </GestureDetector>

      <Pressable
        style={[styles.button, styles.centered]}
        onPress={() => {
          setEnabled((prev) => !prev);

          colorProgress.value = withTiming(enabled ? 1 : 0, {
            duration: AnimationDuration,
          });
        }}>
        <Text style={{ fontSize: 16 }}>{enabled ? 'Disable' : 'Enable'}</Text>
      </Pressable>
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  centered: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },

  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },

  button: {
    width: 250,
    height: 35,
    backgroundColor: 'plum',
    borderRadius: 10,
    margin: 25,
  },

  box: {
    width: 250,
    height: 250,
    borderRadius: 25,
  },
});
```

</details>

Author: m-bert

packages/react-native-gesture-handler/src/RNGestureHandlerModule.web.ts

@@ -67,7 +67,7 @@ export default {
   setGestureHandlerConfig(handlerTag: number, newConfig: Config) {
     NodeManager.getHandler(handlerTag).setGestureConfig(newConfig);
   },
-  updateGestureHandlerConfig(handlerTag: number, newConfig: Config) {
+  updateGestureHandlerConfig(handlerTag: number, newConfig: Partial<Config>) {
     NodeManager.getHandler(handlerTag).updateGestureConfig(newConfig);
   },
   getGestureHandlerNode(handlerTag: number) {

packages/react-native-gesture-handler/src/v3/detectors/HostGestureDetector.web.tsx

@@ -4,12 +4,16 @@ import { ActionType } from '../../ActionType';
 import { PropsRef } from '../../web/interfaces';
 import { View } from 'react-native';
 import { tagMessage } from '../../utils';
+import { TouchAction, UserSelect } from '../../handlers/gestureHandlerCommon';
 
 export interface GestureHandlerDetectorProps extends PropsRef {
   handlerTags: number[];
   moduleId: number;
   children?: React.ReactNode;
   virtualChildren?: Set<VirtualChildrenWeb>;
+  userSelect?: UserSelect;
+  touchAction?: TouchAction;
+  enableContextMenu?: boolean;
 }
 
 export interface VirtualChildrenWeb {
@@ -24,7 +28,7 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
   const { handlerTags, children } = props;
 
   const viewRef = useRef<Element>(null);
-  const propsRef = useRef<PropsRef>(props);
+  const propsRef = useRef<GestureHandlerDetectorProps>(props);
   const attachedHandlers = useRef<Set<number>>(new Set<number>());
   const attachedNativeHandlers = useRef<Set<number>>(new Set<number>());
   const attachedVirtualHandlers = useRef<Map<number, Set<number>>>(new Map());
@@ -42,7 +46,7 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
 
   const attachHandlers = (
     viewRef: RefObject<Element | null>,
-    propsRef: RefObject<PropsRef>,
+    propsRef: RefObject<GestureHandlerDetectorProps>,
     currentHandlerTags: Set<number>,
     attachedHandlerTags: Set<number>,
     actionType: ActionType
@@ -72,11 +76,32 @@ const HostGestureDetector = (props: GestureHandlerDetectorProps) => {
         );
       }
       attachedHandlerTags.add(tag);
+
+      RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+        userSelect: props.userSelect,
+        touchAction: props.touchAction,
+        enableContextMenu: props.enableContextMenu,
+      });
     });
   };
 
   useEffect(() => {
+    const shouldUpdateDOMProps =
+      propsRef.current.userSelect !== props.userSelect ||
+      propsRef.current.touchAction !== props.touchAction ||
+      propsRef.current.enableContextMenu !== props.enableContextMenu;
+
     propsRef.current = props;
+
+    if (shouldUpdateDOMProps) {
+      for (const tag of attachedHandlers.current) {
+        RNGestureHandlerModule.updateGestureHandlerConfig(tag, {
+          userSelect: props.userSelect,
+          touchAction: props.touchAction,
+          enableContextMenu: props.enableContextMenu,
+        });
+      }
+    }
   }, [props]);
 
   useEffect(() => {

packages/react-native-gesture-handler/src/v3/detectors/NativeDetector.tsx

@@ -12,6 +12,9 @@ import { ReanimatedNativeDetector } from './ReanimatedNativeDetector';
 export function NativeDetector<THandlerData, TConfig>({
   gesture,
   children,
+  touchAction,
+  userSelect,
+  enableContextMenu,
 }: NativeDetectorProps<THandlerData, TConfig>) {
   const NativeDetectorComponent = gesture.config.dispatchesAnimatedEvents
     ? AnimatedNativeDetector
@@ -28,6 +31,9 @@ export function NativeDetector<THandlerData, TConfig>({
 
   return (
     <NativeDetectorComponent
+      touchAction={touchAction}
+      userSelect={userSelect}
+      enableContextMenu={enableContextMenu}
       pointerEvents={'box-none'}
       // @ts-ignore This is a type mismatch between RNGH types and RN Codegen types
       onGestureHandlerStateChange={

packages/react-native-gesture-handler/src/v3/detectors/common.ts

@@ -3,6 +3,7 @@ import { Gesture } from '../types';
 import { Animated, StyleSheet } from 'react-native';
 import HostGestureDetector from './HostGestureDetector';
 import { GestureDetectorProps as LegacyDetectorProps } from '../../handlers/gestures/GestureDetector';
+import { TouchAction, UserSelect } from '../../handlers/gestureHandlerCommon';
 
 export enum GestureDetectorType {
   Native,
@@ -13,6 +14,9 @@ export enum GestureDetectorType {
 export interface NativeDetectorProps<THandlerData, TConfig> {
   children?: React.ReactNode;
   gesture: Gesture<THandlerData, TConfig>;
+  userSelect?: UserSelect;
+  touchAction?: TouchAction;
+  enableContextMenu?: boolean;
 }
 
 export interface InterceptingGestureDetectorProps<THandlerData, TConfig> {

packages/react-native-gesture-handler/src/v3/hooks/utils/propsWhiteList.ts

@@ -19,11 +19,8 @@ const CommonConfig = new Set<keyof CommonGestureConfig>([
   'enabled',
   'shouldCancelWhenOutside',
   'hitSlop',
-  'userSelect',
   'activeCursor',
   'mouseButton',
-  'enableContextMenu',
-  'touchAction',
   'testID',
 ]);
 
@@ -39,6 +36,9 @@ export const allowedNativeProps = new Set<
   ...CommonConfig,
 
   // InternalConfigProps
+  'userSelect',
+  'enableContextMenu',
+  'touchAction',
   'dispatchesReanimatedEvents',
   'dispatchesAnimatedEvents',
   'needsPointerData',

packages/react-native-gesture-handler/src/v3/types/ConfigTypes.ts

@@ -47,6 +47,9 @@ export type InternalConfigProps<THandlerData> = {
   dispatchesReanimatedEvents?: boolean;
   dispatchesAnimatedEvents?: boolean;
   needsPointerData?: boolean;
+  userSelect?: UserSelect;
+  touchAction?: TouchAction;
+  enableContextMenu?: boolean;
   changeEventCalculator?: ChangeCalculatorType<THandlerData>;
 };
 
@@ -60,14 +63,11 @@ export type CommonGestureConfig = {
     enabled?: boolean;
     shouldCancelWhenOutside?: boolean;
     hitSlop?: HitSlop;
-    userSelect?: UserSelect;
     activeCursor?: ActiveCursor;
     mouseButton?: MouseButton;
-    enableContextMenu?: boolean;
-    touchAction?: TouchAction;
     cancelsTouchesInView?: boolean;
   },
-  HitSlop | UserSelect | ActiveCursor | MouseButton | TouchAction
+  HitSlop | ActiveCursor | MouseButton
 >;
 
 export type ComposedGestureConfig = {

packages/react-native-gesture-handler/src/web/handlers/GestureHandler.ts

@@ -712,27 +712,30 @@ export default abstract class GestureHandler implements IGestureHandler {
   //
 
   // Helper function to correctly set enabled property
-  private updateEnabled(enabled: boolean | undefined) {
+  private maybeUpdateEnabled(enabled: boolean | undefined): boolean {
     if (enabled === undefined) {
-      if (this._enabled) {
-        return;
+      if (this._enabled !== undefined) {
+        return false;
       }
 
       this._enabled = true;
-      this.delegate.onEnabledChange();
-    } else if (this._enabled !== enabled) {
-      this._enabled = enabled;
-      this.delegate.onEnabledChange();
+
+      return true;
     }
+
+    const prevEnabled = this._enabled;
+    this._enabled = enabled;
+
+    return enabled !== prevEnabled;
   }
 
   public setGestureConfig(config: Config) {
     this.resetConfig();
     this.updateGestureConfig(config);
   }
 
-  public updateGestureConfig(config: Config): void {
-    this.updateEnabled(config.enabled);
+  public updateGestureConfig(config: Partial<Config>): void {
+    const enabledChanged = this.maybeUpdateEnabled(config.enabled);
 
     if (config.hitSlop !== undefined) {
       this.hitSlop = config.hitSlop;
@@ -764,20 +767,31 @@ export default abstract class GestureHandler implements IGestureHandler {
       this.shouldCancelWhenOutside = config.shouldCancelWhenOutside;
     }
 
-    if (config.enableContextMenu !== undefined) {
-      this.enableContextMenu = config.enableContextMenu;
-    }
-
     if (config.activeCursor !== undefined) {
       this._activeCursor = config.activeCursor;
     }
 
+    let shouldUpdateDOM = false;
+
+    if (config.enableContextMenu !== undefined) {
+      this.enableContextMenu = config.enableContextMenu;
+      shouldUpdateDOM = true;
+    }
+
     if (config.touchAction !== undefined) {
       this._touchAction = config.touchAction;
+      shouldUpdateDOM = true;
     }
 
     if (config.userSelect !== undefined) {
       this._userSelect = config.userSelect;
+      shouldUpdateDOM = true;
+    }
+
+    if (enabledChanged) {
+      this.delegate.onEnabledChange();
+    } else if (shouldUpdateDOM) {
+      this.delegate.updateDOM();
     }
 
     if (this.enabled) {

packages/react-native-gesture-handler/src/web/handlers/IGestureHandler.ts

@@ -56,7 +56,7 @@ export default interface IGestureHandler {
   sendEvent: (newState: State, oldState: State) => void;
 
   setGestureConfig: (config: Config) => void;
-  updateGestureConfig: (config: Config) => void;
+  updateGestureConfig: (config: Partial<Config>) => void;
 
   isButton?: () => boolean;
 }

packages/react-native-gesture-handler/src/web/tools/GestureHandlerDelegate.ts

@@ -10,6 +10,7 @@ export interface GestureHandlerDelegate<TComponent, THandler> {
 
   init(viewRef: number, handler: THandler): void;
   detach(): void;
+  updateDOM(): void;
   isPointerInBounds({ x, y }: { x: number; y: number }): boolean;
   measureView(): MeasureResult;
   reset(): void;

packages/react-native-gesture-handler/src/web/tools/GestureHandlerWebDelegate.ts

@@ -61,12 +61,14 @@ export class GestureHandlerWebDelegate
       this.gestureHandler.attachEventManager(manager)
     );
 
-    this.configure();
+    this.updateDOM();
 
     this.isInitialized = true;
   }
 
   detach(): void {
+    this.restoreDefaultViewStyles();
+
     this.defaultViewStyles = {
       userSelect: '',
       touchAction: '',
@@ -83,7 +85,17 @@ export class GestureHandlerWebDelegate
     this.isInitialized = false;
   }
 
-  configure(): void {
+  restoreDefaultViewStyles(): void {
+    this.ensureView(this.view);
+
+    this.view.style['userSelect'] = this.defaultViewStyles.userSelect;
+    this.view.style['webkitUserSelect'] = this.defaultViewStyles.userSelect;
+    this.view.style['touchAction'] = this.defaultViewStyles.touchAction;
+    // @ts-ignore This one disables default events on Safari
+    this.view.style['WebkitTouchCallout'] = this.defaultViewStyles.touchAction;
+  }
+
+  updateDOM(): void {
     this.setUserSelect();
     this.setTouchAction();
     this.setContextMenu();
@@ -220,7 +232,7 @@ export class GestureHandlerWebDelegate
       return;
     }
 
-    this.configure();
+    this.updateDOM();
 
     this.eventManagers.forEach((manager) => {
       manager.setEnabled(this.gestureHandler.enabled);