react-native-gesture-handler 3.0.0-beta.2 → 3.0.0-beta.3

package/src/web/handlers/HoverGestureHandler.ts

@@ -1,11 +1,11 @@
+import type { StylusData } from '../../handlers/gestureHandlerCommon';
 import { State } from '../../State';
-import { AdaptedEvent } from '../interfaces';
+import { SingleGestureName } from '../../v3/types';
+import type { AdaptedEvent } from '../interfaces';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import GestureHandlerOrchestrator from '../tools/GestureHandlerOrchestrator';
 import GestureHandler from './GestureHandler';
-import { StylusData } from '../../handlers/gestureHandlerCommon';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
-import IGestureHandler from './IGestureHandler';
-import { SingleGestureName } from '../../v3/types';
+import type IGestureHandler from './IGestureHandler';
 
 export default class HoverGestureHandler extends GestureHandler {
   private stylusData: StylusData | undefined;

package/src/web/handlers/IGestureHandler.ts

@@ -1,16 +1,16 @@
-import type { PointerType } from '../../PointerType';
 import type {
   ActiveCursor,
   MouseButton,
   TouchAction,
   UserSelect,
 } from '../../handlers/gestureHandlerCommon';
+import type { PointerType } from '../../PointerType';
 import type { State } from '../../State';
+import type { SingleGestureName } from '../../v3/types';
 import type { Config } from '../interfaces';
 import type EventManager from '../tools/EventManager';
 import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import type PointerTracker from '../tools/PointerTracker';
-import { SingleGestureName } from '../../v3/types';
 
 export default interface IGestureHandler {
   attached: boolean;
@@ -18,7 +18,7 @@ export default interface IGestureHandler {
   activationIndex: number;
   awaiting: boolean;
   handlerTag: number;
-  readonly testID?: string;
+  readonly testID?: string | undefined;
   readonly delegate: GestureHandlerDelegate<unknown, this>;
   readonly tracker: PointerTracker;
   readonly name: SingleGestureName;
@@ -28,9 +28,9 @@ export default interface IGestureHandler {
   readonly enabled: boolean | null;
   readonly pointerType: PointerType;
   enableContextMenu: boolean;
-  readonly activeCursor?: ActiveCursor;
-  readonly touchAction?: TouchAction;
-  readonly userSelect?: UserSelect;
+  readonly activeCursor?: ActiveCursor | undefined;
+  readonly touchAction?: TouchAction | undefined;
+  readonly userSelect?: UserSelect | undefined;
 
   attachEventManager: (manager: EventManager<unknown>) => void;
 

package/src/web/handlers/LongPressGestureHandler.ts

@@ -1,11 +1,10 @@
-import { ActionType } from '../../ActionType';
+import type { ActionType } from '../../ActionType';
 import { State } from '../../State';
 import { SingleGestureName } from '../../v3/types';
-import { AdaptedEvent, Config, PropsRef } from '../interfaces';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
-
+import type { AdaptedEvent, Config, PropsRef } from '../interfaces';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import GestureHandler from './GestureHandler';
-import IGestureHandler from './IGestureHandler';
+import type IGestureHandler from './IGestureHandler';
 
 const DEFAULT_MIN_DURATION_MS = 500;
 const DEFAULT_MAX_DIST_DP = 10;

package/src/web/handlers/ManualGestureHandler.ts

@@ -1,8 +1,8 @@
 import { SingleGestureName } from '../../v3/types';
-import { AdaptedEvent } from '../interfaces';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import type { AdaptedEvent } from '../interfaces';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import GestureHandler from './GestureHandler';
-import IGestureHandler from './IGestureHandler';
+import type IGestureHandler from './IGestureHandler';
 
 export default class ManualGestureHandler extends GestureHandler {
   public constructor(

package/src/web/handlers/NativeViewGestureHandler.ts

@@ -1,13 +1,13 @@
 import { Platform } from 'react-native';
+
+import type { ActionType } from '../../ActionType';
 import { State } from '../../State';
+import { SingleGestureName } from '../../v3/types';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config, PropsRef } from '../interfaces';
-
+import type { AdaptedEvent, Config, PropsRef } from '../interfaces';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import GestureHandler from './GestureHandler';
-import { ActionType } from '../../ActionType';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
-import IGestureHandler from './IGestureHandler';
-import { SingleGestureName } from '../../v3/types';
+import type IGestureHandler from './IGestureHandler';
 export default class NativeViewGestureHandler extends GestureHandler {
   private buttonRole!: boolean;
 
@@ -147,7 +147,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
   }
 
   public override shouldRecognizeSimultaneously(
-    handler: GestureHandler
+    handler: IGestureHandler
   ): boolean {
     if (super.shouldRecognizeSimultaneously(handler)) {
       return true;
@@ -176,7 +176,7 @@ export default class NativeViewGestureHandler extends GestureHandler {
     );
   }
 
-  public override shouldBeCancelledByOther(_handler: GestureHandler): boolean {
+  public override shouldBeCancelledByOther(_handler: IGestureHandler): boolean {
     return !this.disallowInterruption;
   }
 

package/src/web/handlers/PanGestureHandler.ts

@@ -1,12 +1,12 @@
+import type { StylusData } from '../../handlers/gestureHandlerCommon';
 import { State } from '../../State';
+import { SingleGestureName } from '../../v3/types';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, Config, WheelDevice } from '../interfaces';
-import { StylusData } from '../../handlers/gestureHandlerCommon';
-
+import type { AdaptedEvent, Config } from '../interfaces';
+import { WheelDevice } from '../interfaces';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import GestureHandler from './GestureHandler';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
-import IGestureHandler from './IGestureHandler';
-import { SingleGestureName } from '../../v3/types';
+import type IGestureHandler from './IGestureHandler';
 
 const DEFAULT_MIN_POINTERS = 1;
 const DEFAULT_MAX_POINTERS = 10;
@@ -16,7 +16,7 @@ export default class PanGestureHandler extends GestureHandler {
   public velocityX = 0;
   public velocityY = 0;
 
-  private minDist?: number = undefined;
+  private minDist?: number | undefined = undefined;
   private minDistSq = DEFAULT_MIN_DIST_SQ;
 
   private activeOffsetXStart = -Number.MAX_SAFE_INTEGER;

package/src/web/handlers/PinchGestureHandler.ts

@@ -1,15 +1,13 @@
+import type { ActionType } from '../../ActionType';
 import { State } from '../../State';
+import { SingleGestureName } from '../../v3/types';
 import { DEFAULT_TOUCH_SLOP } from '../constants';
-import { AdaptedEvent, PropsRef } from '../interfaces';
-
+import type { ScaleGestureListener } from '../detectors/ScaleGestureDetector';
+import ScaleGestureDetector from '../detectors/ScaleGestureDetector';
+import type { AdaptedEvent, PropsRef } from '../interfaces';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import GestureHandler from './GestureHandler';
-import ScaleGestureDetector, {
-  ScaleGestureListener,
-} from '../detectors/ScaleGestureDetector';
-import { ActionType } from '../../ActionType';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
-import IGestureHandler from './IGestureHandler';
-import { SingleGestureName } from '../../v3/types';
+import type IGestureHandler from './IGestureHandler';
 
 export default class PinchGestureHandler extends GestureHandler {
   private scale = 1;
@@ -70,9 +68,14 @@ export default class PinchGestureHandler extends GestureHandler {
   }
 
   protected override transformNativeEvent() {
+    const focal = this.delegate.absoluteToLocal(
+      this.scaleGestureDetector.focusX,
+      this.scaleGestureDetector.focusY
+    );
+
     return {
-      focalX: this.scaleGestureDetector.focusX,
-      focalY: this.scaleGestureDetector.focusY,
+      focalX: focal.x,
+      focalY: focal.y,
       velocity: this.velocity,
       scale: this.scale,
     };
@@ -93,12 +96,11 @@ export default class PinchGestureHandler extends GestureHandler {
   protected override onPointerUp(event: AdaptedEvent): void {
     super.onPointerUp(event);
     this.tracker.removeFromTracker(event.pointerId);
-    if (this.state !== State.ACTIVE) {
-      return;
-    }
-    this.scaleGestureDetector.onTouchEvent(event, this.tracker);
 
     if (this.state === State.ACTIVE) {
+      // We don't have to call it in the else branch as it would simply return `true`.
+      this.scaleGestureDetector.onTouchEvent(event, this.tracker);
+
       this.end();
     } else {
       this.fail();

package/src/web/handlers/RotationGestureHandler.ts

@@ -1,14 +1,12 @@
+import type { ActionType } from '../../ActionType';
 import { State } from '../../State';
-import { AdaptedEvent, PropsRef } from '../interfaces';
-
-import GestureHandler from './GestureHandler';
-import RotationGestureDetector, {
-  RotationGestureListener,
-} from '../detectors/RotationGestureDetector';
-import { ActionType } from '../../ActionType';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
-import IGestureHandler from './IGestureHandler';
 import { SingleGestureName } from '../../v3/types';
+import type { RotationGestureListener } from '../detectors/RotationGestureDetector';
+import RotationGestureDetector from '../detectors/RotationGestureDetector';
+import type { AdaptedEvent, PropsRef } from '../interfaces';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
+import GestureHandler from './GestureHandler';
+import type IGestureHandler from './IGestureHandler';
 
 const ROTATION_RECOGNITION_THRESHOLD = Math.PI / 36;
 
@@ -41,7 +39,11 @@ export default class RotationGestureHandler extends GestureHandler {
       return true;
     },
     onRotationEnd: (_detector: RotationGestureDetector): void => {
-      this.end();
+      if (this.state === State.ACTIVE) {
+        this.end();
+      } else {
+        this.fail();
+      }
     },
   };
 
@@ -66,24 +68,25 @@ export default class RotationGestureHandler extends GestureHandler {
   }
 
   protected override transformNativeEvent() {
+    const anchor = this.getAnchor();
+
     return {
       rotation: this.rotation ? this.rotation : 0,
-      anchorX: this.getAnchorX(),
-      anchorY: this.getAnchorY(),
+      anchorX: anchor.x,
+      anchorY: anchor.y,
       velocity: this.velocity ? this.velocity : 0,
     };
   }
 
-  public getAnchorX(): number {
-    const anchorX = this.rotationGestureDetector.anchorX;
+  private getAnchor(): { x: number; y: number } {
+    const absX = this.rotationGestureDetector.anchorX;
+    const absY = this.rotationGestureDetector.anchorY;
 
-    return anchorX ? anchorX : this.cachedAnchorX;
-  }
-
-  public getAnchorY(): number {
-    const anchorY = this.rotationGestureDetector.anchorY;
+    if (Number.isFinite(absX) && Number.isFinite(absY)) {
+      return this.delegate.absoluteToLocal(absX, absY);
+    }
 
-    return anchorY ? anchorY : this.cachedAnchorY;
+    return { x: this.cachedAnchorX, y: this.cachedAnchorY };
   }
 
   protected override onPointerDown(event: AdaptedEvent): void {
@@ -104,12 +107,9 @@ export default class RotationGestureHandler extends GestureHandler {
       return;
     }
 
-    if (this.getAnchorX()) {
-      this.cachedAnchorX = this.getAnchorX();
-    }
-    if (this.getAnchorY()) {
-      this.cachedAnchorY = this.getAnchorY();
-    }
+    const anchor = this.getAnchor();
+    this.cachedAnchorX = anchor.x;
+    this.cachedAnchorY = anchor.y;
 
     this.tracker.track(event);
 
@@ -123,12 +123,9 @@ export default class RotationGestureHandler extends GestureHandler {
       return;
     }
 
-    if (this.getAnchorX()) {
-      this.cachedAnchorX = this.getAnchorX();
-    }
-    if (this.getAnchorY()) {
-      this.cachedAnchorY = this.getAnchorY();
-    }
+    const anchor = this.getAnchor();
+    this.cachedAnchorX = anchor.x;
+    this.cachedAnchorY = anchor.y;
 
     this.tracker.track(event);
 
@@ -141,16 +138,6 @@ export default class RotationGestureHandler extends GestureHandler {
     super.onPointerUp(event);
     this.tracker.removeFromTracker(event.pointerId);
     this.rotationGestureDetector.onTouchEvent(event, this.tracker);
-
-    if (this.state !== State.ACTIVE) {
-      return;
-    }
-
-    if (this.state === State.ACTIVE) {
-      this.end();
-    } else {
-      this.fail();
-    }
   }
 
   protected override onPointerRemove(event: AdaptedEvent): void {

package/src/web/handlers/TapGestureHandler.ts

@@ -1,10 +1,10 @@
 import { State } from '../../State';
 import { SingleGestureName } from '../../v3/types';
-import { AdaptedEvent, Config, EventTypes } from '../interfaces';
-import { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
-
+import type { AdaptedEvent, Config } from '../interfaces';
+import { EventTypes } from '../interfaces';
+import type { GestureHandlerDelegate } from '../tools/GestureHandlerDelegate';
 import GestureHandler from './GestureHandler';
-import IGestureHandler from './IGestureHandler';
+import type IGestureHandler from './IGestureHandler';
 
 const DEFAULT_MAX_DURATION_MS = 500;
 const DEFAULT_MAX_DELAY_MS = 500;

package/src/web/interfaces.ts

@@ -1,28 +1,28 @@
-import {
-  UserSelect,
+import type { Directions } from '../Directions';
+import type {
   ActiveCursor,
+  GestureTouchEvent,
   MouseButton,
-  TouchAction,
   StylusData,
-  GestureTouchEvent,
+  TouchAction,
+  UserSelect,
 } from '../handlers/gestureHandlerCommon';
-import { Directions } from '../Directions';
-import { PointerType } from '../PointerType';
-import {
+import type { PointerType } from '../PointerType';
+import type { State } from '../State';
+import type {
   GestureStateChangeEventWithHandlerData,
   GestureUpdateEventWithHandlerData,
 } from '../v3/types';
-import { State } from '../State';
 
 export interface HitSlop {
-  left?: number;
-  right?: number;
-  top?: number;
-  bottom?: number;
-  horizontal?: number;
-  vertical?: number;
-  width?: number;
-  height?: number;
+  left?: number | undefined;
+  right?: number | undefined;
+  top?: number | undefined;
+  bottom?: number | undefined;
+  horizontal?: number | undefined;
+  vertical?: number | undefined;
+  width?: number | undefined;
+  height?: number | undefined;
 }
 
 export interface Handler {
@@ -44,21 +44,21 @@ type ConfigArgs =
 
 export interface Config extends Record<string, ConfigArgs> {
   enabled: boolean;
-  simultaneousHandlers?: Handler[] | null;
-  waitFor?: Handler[] | null;
-  blocksHandlers?: Handler[] | null;
-  hitSlop?: HitSlop;
-  shouldCancelWhenOutside?: boolean;
-  userSelect?: UserSelect;
-  activeCursor?: ActiveCursor;
-  mouseButton?: MouseButton;
-  enableContextMenu?: boolean;
-  touchAction?: TouchAction;
-  manualActivation?: boolean;
-  dispatchesAnimatedEvents?: false;
-  dispatchesReanimatedEvents?: boolean;
-  needsPointerData?: false;
-  testID?: string;
+  simultaneousHandlers?: Handler[] | null | undefined;
+  waitFor?: Handler[] | null | undefined;
+  blocksHandlers?: Handler[] | null | undefined;
+  hitSlop?: HitSlop | undefined;
+  shouldCancelWhenOutside?: boolean | undefined;
+  userSelect?: UserSelect | undefined;
+  activeCursor?: ActiveCursor | undefined;
+  mouseButton?: MouseButton | undefined;
+  enableContextMenu?: boolean | undefined;
+  touchAction?: TouchAction | undefined;
+  manualActivation?: boolean | undefined;
+  dispatchesAnimatedEvents?: false | undefined;
+  dispatchesReanimatedEvents?: boolean | undefined;
+  needsPointerData?: false | undefined;
+  testID?: string | undefined;
 
   activateAfterLongPress?: number;
   failOffsetXStart?: number;
@@ -98,7 +98,7 @@ export interface GestureHandlerNativeEvent
   numberOfPointers: number;
   state: State;
   handlerTag: number;
-  oldState?: State;
+  oldState?: State | undefined;
   pointerType: PointerType;
 }
 
@@ -147,9 +147,9 @@ export interface AdaptedEvent {
   eventType: EventTypes;
   pointerType: PointerType;
   time: number;
-  button?: MouseButton;
-  stylusData?: StylusData;
-  wheelDeltaY?: number;
+  button?: MouseButton | undefined;
+  stylusData?: StylusData | undefined;
+  wheelDeltaY?: number | undefined;
 }
 
 export enum EventTypes {

package/src/web/tools/EventManager.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-empty-function */
-import { AdaptedEvent, EventTypes } from '../interfaces';
+import type { AdaptedEvent, EventTypes } from '../interfaces';
 
 type PointerEventCallback = (event: AdaptedEvent) => void;
 

package/src/web/tools/GestureHandlerDelegate.ts

@@ -13,6 +13,10 @@ export interface GestureHandlerDelegate<TComponent, THandler> {
   updateDOM(): void;
   isPointerInBounds({ x, y }: { x: number; y: number }): boolean;
   measureView(): MeasureResult;
+  absoluteToLocal(
+    absoluteX: number,
+    absoluteY: number
+  ): { x: number; y: number };
   reset(): void;
 
   onBegin(): void;

package/src/web/tools/GestureHandlerOrchestrator.ts

@@ -1,6 +1,5 @@
 import { PointerType } from '../../PointerType';
 import { State } from '../../State';
-
 import type IGestureHandler from '../handlers/IGestureHandler';
 import PointerTracker from './PointerTracker';
 

package/src/web/tools/GestureHandlerWebDelegate.ts

@@ -1,18 +1,18 @@
 import findNodeHandle from '../../findNodeHandle';
+import { MouseButton } from '../../handlers/gestureHandlerCommon';
+import { State } from '../../State';
+import { tagMessage } from '../../utils';
+import { SingleGestureName } from '../../v3/types';
 import type IGestureHandler from '../handlers/IGestureHandler';
-import {
+import { getEffectiveBoundingRect, isPointerInBounds } from '../utils';
+import type EventManager from './EventManager';
+import type {
   GestureHandlerDelegate,
   MeasureResult,
 } from './GestureHandlerDelegate';
-import PointerEventManager from './PointerEventManager';
-import { State } from '../../State';
-import { isPointerInBounds } from '../utils';
-import EventManager from './EventManager';
-import { MouseButton } from '../../handlers/gestureHandlerCommon';
 import KeyboardEventManager from './KeyboardEventManager';
+import PointerEventManager from './PointerEventManager';
 import WheelEventManager from './WheelEventManager';
-import { tagMessage } from '../../utils';
-import { SingleGestureName } from '../../v3/types';
 
 interface DefaultViewStyles {
   userSelect: string;
@@ -89,11 +89,10 @@ export class GestureHandlerWebDelegate
   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;
+    this.setViewStyle('userSelect', this.defaultViewStyles.userSelect);
+    this.setViewStyle('webkitUserSelect', this.defaultViewStyles.userSelect);
+    this.setViewStyle('touchAction', this.defaultViewStyles.touchAction);
+    this.setViewStyle('WebkitTouchCallout', this.defaultViewStyles.touchAction);
   }
 
   updateDOM(): void {
@@ -114,7 +113,7 @@ export class GestureHandlerWebDelegate
       throw new Error(tagMessage('Cannot measure a null view'));
     }
 
-    const rect = this.view.getBoundingClientRect();
+    const rect = getEffectiveBoundingRect(this.view);
 
     return {
       pageX: rect.left,
@@ -124,6 +123,46 @@ export class GestureHandlerWebDelegate
     };
   }
 
+  absoluteToLocal(
+    absoluteX: number,
+    absoluteY: number
+  ): { x: number; y: number } {
+    if (!this.view) {
+      throw new Error(tagMessage('Cannot convert coords on a null view'));
+    }
+
+    const rect = getEffectiveBoundingRect(this.view);
+    const transform = getComputedStyle(this.view).transform;
+    const matrix =
+      transform && transform !== 'none'
+        ? new DOMMatrix(transform)
+        : new DOMMatrix();
+
+    // Zero out translation — it's already reflected in the bounding rect
+    // center, so we only need to invert the rotation+scale part.
+    matrix.e = 0;
+    matrix.f = 0;
+    const inverse = matrix.inverse();
+
+    // Offset from the visual center of the bounding rect
+    const rectCenterX = rect.left + rect.width / 2;
+    const rectCenterY = rect.top + rect.height / 2;
+    const dx = absoluteX - rectCenterX;
+    const dy = absoluteY - rectCenterY;
+
+    // Apply inverse rotation+scale to get local-space offset from center
+    const localOffset = inverse.transformPoint(new DOMPoint(dx, dy));
+
+    // Add back the local center (untransformed dimensions)
+    const localCenterX = this.view.offsetWidth / 2;
+    const localCenterY = this.view.offsetHeight / 2;
+
+    return {
+      x: localCenterX + localOffset.x,
+      y: localCenterY + localOffset.y,
+    };
+  }
+
   reset(): void {
     this.eventManagers.forEach((manager: EventManager<unknown>) =>
       manager.resetManager()
@@ -202,13 +241,12 @@ export class GestureHandlerWebDelegate
 
     this.ensureView(this.view);
 
-    this.view.style['userSelect'] = this.gestureHandler.enabled
+    const value = this.gestureHandler.enabled
       ? (userSelect ?? 'none')
       : this.defaultViewStyles.userSelect;
 
-    this.view.style['webkitUserSelect'] = this.gestureHandler.enabled
-      ? (userSelect ?? 'none')
-      : this.defaultViewStyles.userSelect;
+    this.setViewStyle('userSelect', value);
+    this.setViewStyle('webkitUserSelect', value);
   }
 
   private setTouchAction() {
@@ -216,14 +254,12 @@ export class GestureHandlerWebDelegate
 
     this.ensureView(this.view);
 
-    this.view.style['touchAction'] = this.gestureHandler.enabled
+    const value = this.gestureHandler.enabled
       ? (touchAction ?? 'none')
       : this.defaultViewStyles.touchAction;
 
-    // @ts-ignore This one disables default events on Safari
-    this.view.style['WebkitTouchCallout'] = this.gestureHandler.enabled
-      ? (touchAction ?? 'none')
-      : this.defaultViewStyles.touchAction;
+    this.setViewStyle('touchAction', value);
+    this.setViewStyle('WebkitTouchCallout', value);
   }
 
   private setContextMenu() {
@@ -287,6 +323,29 @@ export class GestureHandlerWebDelegate
     this.isInitialized = false;
   }
 
+  private setViewStyle(
+    property: Extract<keyof CSSStyleDeclaration, string> | 'WebkitTouchCallout',
+    value: string
+  ): void {
+    this.ensureView(this.view);
+
+    const hasDisplayContents =
+      this.view.style.display === 'contents' ||
+      getComputedStyle(this.view).display === 'contents';
+
+    if (hasDisplayContents) {
+      for (const child of Array.from(this.view.children)) {
+        if (child instanceof HTMLElement) {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+          (child.style as any)[property] = value;
+        }
+      }
+    } else {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+      (this.view.style as any)[property] = value;
+    }
+  }
+
   private ensureView(view: any): asserts view is HTMLElement {
     if (!view) {
       throw new Error(tagMessage('Expected delegate view to be HTMLElement'));

package/src/web/tools/InteractionManager.ts

@@ -1,6 +1,7 @@
-import { GestureRelations, SingleGestureName } from '../../v3/types';
+import type { GestureRelations } from '../../v3/types';
+import { SingleGestureName } from '../../v3/types';
 import type IGestureHandler from '../handlers/IGestureHandler';
-import { Config, Handler } from '../interfaces';
+import type { Config, Handler } from '../interfaces';
 
 export default class InteractionManager {
   private static _instance: InteractionManager;

package/src/web/tools/KeyboardEventManager.ts

@@ -1,6 +1,7 @@
-import { AdaptedEvent, EventTypes } from '../interfaces';
-import EventManager from './EventManager';
 import { PointerType } from '../../PointerType';
+import type { AdaptedEvent } from '../interfaces';
+import { EventTypes } from '../interfaces';
+import EventManager from './EventManager';
 
 export default class KeyboardEventManager extends EventManager<HTMLElement> {
   private static activationKeys = ['Enter', ' '];