@react-aria/interactions - npm Package Compare versions

Comparing version 3.3.4 to 3.4.0

dist/main.js

@@ -10,3 +10,4 @@ var _react2 = require("react");
   useRef,
-  useState
+  useState,
+  useCallback
 } = _react2;
@@ -19,2 +20,3 @@
   useGlobalListeners,
+  useSyncRef,
   isMac
@@ -115,13 +117,5 @@ } = require("@react-aria/utils");
     register();
-  } // Sync ref from <PressResponder> with ref passed to usePress.
+  }
 
-
-  useEffect(() => {
-    if (context && context.ref) {
-      context.ref.current = props.ref.current;
-      return () => {
-        context.ref.current = null;
-      };
-    }
-  }, [context, props.ref]);
+  useSyncRef(context, props.ref);
   return props;
@@ -883,2 +877,3 @@ }
 function $b83372066b2b4e1d9257843b2455c$var$handleFocusEvent(e) {
+  // Firefox fires two extra focus events when the user first clicks into an iframe:
   // first on the window, then on the document. We ignore these events so they don't
@@ -888,3 +883,4 @@ // cause keyboard focus rings to appear.
     return;
-  } // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
+  } // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
+  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
 
@@ -1650,2 +1646,41 @@
 exports.useMove = useMove;
+
+// scroll wheel needs to be added not passively so it's cancelable, small helper hook to remember that
+function useScrollWheel(props, ref) {
+  let {
+    onScroll,
+    isDisabled
+  } = props;
+  let onScrollHandler = useCallback(e => {
+    // If the ctrlKey is pressed, this is a zoom event, do nothing.
+    if (e.ctrlKey) {
+      return;
+    } // stop scrolling the page
+
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (onScroll) {
+      onScroll({
+        deltaX: e.deltaX,
+        deltaY: e.deltaY
+      });
+    }
+  }, [onScroll]);
+  useEffect(() => {
+    let elem = ref.current;
+
+    if (isDisabled) {
+      return;
+    }
+
+    elem.addEventListener('wheel', onScrollHandler);
+    return () => {
+      elem.removeEventListener('wheel', onScrollHandler);
+    };
+  }, [onScrollHandler, ref, isDisabled]);
+}
+
+exports.useScrollWheel = useScrollWheel;
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,3 +0,3 @@
-import _react, { useContext, useEffect, useMemo, useRef, useState } from "react";
-import { mergeProps, runAfterTransition, focusWithoutScrolling, useGlobalListeners, isMac } from "@react-aria/utils";
+import _react, { useContext, useEffect, useMemo, useRef, useState, useCallback } from "react";
+import { mergeProps, runAfterTransition, focusWithoutScrolling, useGlobalListeners, useSyncRef, isMac } from "@react-aria/utils";
 import _babelRuntimeHelpersEsmObjectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
@@ -89,13 +89,5 @@ import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
     register();
-  } // Sync ref from <PressResponder> with ref passed to usePress.
+  }
 
-
-  useEffect(() => {
-    if (context && context.ref) {
-      context.ref.current = props.ref.current;
-      return () => {
-        context.ref.current = null;
-      };
-    }
-  }, [context, props.ref]);
+  useSyncRef(context, props.ref);
   return props;
@@ -847,2 +839,3 @@ }
 function $d01f69bb2ab5f70dfd0005370a2a2cbc$var$handleFocusEvent(e) {
+  // Firefox fires two extra focus events when the user first clicks into an iframe:
   // first on the window, then on the document. We ignore these events so they don't
@@ -852,3 +845,4 @@ // cause keyboard focus rings to appear.
     return;
-  } // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
+  } // If a focus event occurs without a preceding keyboard or pointer event, switch to virtual modality.
+  // This occurs, for example, when navigating a form with the next/previous buttons on iOS.
 
@@ -1590,2 +1584,38 @@
 }
+// scroll wheel needs to be added not passively so it's cancelable, small helper hook to remember that
+export function useScrollWheel(props, ref) {
+  let {
+    onScroll,
+    isDisabled
+  } = props;
+  let onScrollHandler = useCallback(e => {
+    // If the ctrlKey is pressed, this is a zoom event, do nothing.
+    if (e.ctrlKey) {
+      return;
+    } // stop scrolling the page
+
+
+    e.preventDefault();
+    e.stopPropagation();
+
+    if (onScroll) {
+      onScroll({
+        deltaX: e.deltaX,
+        deltaY: e.deltaY
+      });
+    }
+  }, [onScroll]);
+  useEffect(() => {
+    let elem = ref.current;
+
+    if (isDisabled) {
+      return;
+    }
+
+    elem.addEventListener('wheel', onScrollHandler);
+    return () => {
+      elem.removeEventListener('wheel', onScrollHandler);
+    };
+  }, [onScrollHandler, ref, isDisabled]);
+}
 //# sourceMappingURL=module.js.map

dist/types.d.ts

 import React, { HTMLAttributes, RefObject, ReactElement, ReactNode, FocusEvent, SyntheticEvent } from "react";
-import { PressEvents, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents } from "@react-types/shared";
+import { PressEvents, FocusEvents, HoverEvents, KeyboardEvents, MoveEvents, ScrollEvents } from "@react-types/shared";
 export interface PressProps extends PressEvents {
@@ -138,3 +138,8 @@ /** Whether the target is in a controlled press state (e.g. an overlay it triggers is open). */
 export function useMove(props: MoveEvents): MoveResult;
+export interface ScrollWheelProps extends ScrollEvents {
+    /** Whether the scroll listener should be disabled. */
+    isDisabled?: boolean;
+}
+export function useScrollWheel(props: ScrollWheelProps, ref: RefObject<HTMLElement>): void;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@react-aria/interactions",
-  "version": "3.3.4",
+  "version": "3.4.0",
   "description": "Spectrum UI components in React",
@@ -21,4 +21,4 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/utils": "^3.7.0",
-    "@react-types/shared": "^3.5.0"
+    "@react-aria/utils": "^3.8.0",
+    "@react-types/shared": "^3.6.0"
   },
@@ -31,3 +31,3 @@ "peerDependencies": {
   },
-  "gitHead": "9920ffaa2596a03c4498a15cb940bd2f4ba5cd6a"
+  "gitHead": "3aae08e7d8a75382bedcddac7c86107e40db9296"
 }

src/DOMPropsContext.ts

@@ -13,4 +13,4 @@ /*
 
-import {mergeProps} from '@react-aria/utils';
-import React, {HTMLAttributes, MutableRefObject, RefObject, useContext, useEffect} from 'react';
+import {mergeProps, useSyncRef} from '@react-aria/utils';
+import React, {HTMLAttributes, MutableRefObject, RefObject, useContext} from 'react';
 
@@ -36,14 +36,5 @@ interface DOMPropsResponderProps extends HTMLAttributes<HTMLElement> {
   }
+  useSyncRef(context, props.ref);
 
-  // Sync ref from <DOMPropsResponder> with ref passed to the useHover hook.
-  useEffect(() => {
-    if (context && context.ref) {
-      context.ref.current = props.ref.current;
-      return () => {
-        context.ref.current = null;
-      };
-    }
-  }, [context, props.ref]);
-
   return props;
 }

src/index.ts

@@ -23,1 +23,2 @@ /*
 export * from './usePress';
+export * from './useScrollWheel';

src/usePress.ts

@@ -19,3 +19,3 @@ /*
 import {disableTextSelection, restoreTextSelection} from './textSelection';
-import {focusWithoutScrolling, mergeProps} from '@react-aria/utils';
+import {focusWithoutScrolling, mergeProps, useGlobalListeners, useSyncRef} from '@react-aria/utils';
 import {HTMLAttributes, RefObject, useContext, useEffect, useMemo, useRef, useState} from 'react';
@@ -25,3 +25,2 @@ import {isVirtualClick} from './utils';
 import {PressResponderContext} from './context';
-import {useGlobalListeners} from '@react-aria/utils';
 
@@ -76,13 +75,4 @@ export interface PressProps extends PressEvents {
   }
+  useSyncRef(context, props.ref);
 
-  // Sync ref from <PressResponder> with ref passed to usePress.
-  useEffect(() => {
-    if (context && context.ref) {
-      context.ref.current = props.ref.current;
-      return () => {
-        context.ref.current = null;
-      };
-    }
-  }, [context, props.ref]);
-
   return props;
@@ -89,0 +79,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

410953

1.92%

Number of package files

28

3.7%

Lines of code

4640

1.91%

Dependency changes

• Updated

  @react-aria/utils@^3.8.0

• Updated

  @react-types/shared@^3.6.0