@react-aria/numberfield - npm Package Compare versions

Comparing version 3.0.0-nightly.985 to 3.0.0-nightly.992

dist/main.js

@@ -15,3 +15,4 @@ var {
 var {
-  useFocus
+  useFocus,
+  useFocusWithin
 } = require("@react-aria/interactions");
@@ -31,3 +32,4 @@
   useMemo,
-  useRef
+  useRef,
+  useState
 } = require("react");
@@ -37,2 +39,4 @@
 
+var _babelRuntimeHelpersExtends = $parcel$interopDefault(require("@babel/runtime/helpers/extends"));
+
 function $parcel$interopDefault(a) {
@@ -242,6 +246,12 @@ return a && a.__esModule ? a.default : a;
   });
+  let [focusWithin, setFocusWithin] = useState(false);
+  let {
+    focusWithinProps
+  } = useFocusWithin({
+    isDisabled,
+    onFocusWithinChange: setFocusWithin
+  });
   let onWheel = useCallback(e => {
-    // If the input isn't supposed to receive input, do nothing.
     // If the ctrlKey is pressed, this is a zoom event, do nothing.
-    if (isDisabled || isReadOnly || e.ctrlKey) {
+    if (e.ctrlKey) {
       return;
@@ -258,6 +268,9 @@ } // stop scrolling the page
     }
-  }, [isReadOnly, isDisabled, decrement, increment]);
+  }, [decrement, increment]); // If the input isn't supposed to receive input, disable scrolling.
+
+  let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
   $ebb253b0ca493f114f41772a028a$var$useScrollWheel({
     onScroll: onWheel,
-    capture: false
+    capture: false,
+    isDisabled: scrollingDisabled
   }, inputRef); // The inputMode attribute influences the software keyboard that is shown on touch devices.
@@ -509,7 +522,7 @@ // Browsers and operating systems are quite inconsistent about what keys are available, however.
   return {
-    groupProps: {
+    groupProps: _babelRuntimeHelpersExtends({
       role: 'group',
       'aria-disabled': isDisabled,
       'aria-invalid': validationState === 'invalid' ? 'true' : undefined
-    },
+    }, focusWithinProps),
     labelProps,
@@ -528,12 +541,19 @@ inputProps,
     onScroll,
-    capture
+    capture,
+    isDisabled
   } = _ref;
   useEffect(() => {
     let elem = ref.current;
-    elem.addEventListener('wheel', onScroll, capture);
+
+    if (!isDisabled) {
+      elem.addEventListener('wheel', onScroll, capture);
+    }
+
     return () => {
-      elem.removeEventListener('wheel', onScroll, capture);
+      if (!isDisabled) {
+        elem.removeEventListener('wheel', onScroll, capture);
+      }
     };
-  }, [onScroll, ref, capture]);
+  }, [onScroll, ref, capture, isDisabled]);
 }
 //# sourceMappingURL=main.js.map

dist/module.js

 import { useTextField } from "@react-aria/textfield";
 import { useSpinButton } from "@react-aria/spinbutton";
 import { useMessageFormatter, useNumberFormatter } from "@react-aria/i18n";
-import { useFocus } from "@react-aria/interactions";
+import { useFocus, useFocusWithin } from "@react-aria/interactions";
 import { isAndroid, isIOS, isIPhone, mergeProps, useId } from "@react-aria/utils";
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import _babelRuntimeHelpersEsmInteropRequireDefault from "@babel/runtime/helpers/esm/interopRequireDefault";
+import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
 // ASSET: /home/circleci/react-spectrum/packages/@react-aria/numberfield/intl/ar-AE.json
@@ -208,6 +209,12 @@ var $f89057a954f93785840632a2bd0de992$exports = {};
   });
+  let [focusWithin, setFocusWithin] = useState(false);
+  let {
+    focusWithinProps
+  } = useFocusWithin({
+    isDisabled,
+    onFocusWithinChange: setFocusWithin
+  });
   let onWheel = useCallback(e => {
-    // If the input isn't supposed to receive input, do nothing.
     // If the ctrlKey is pressed, this is a zoom event, do nothing.
-    if (isDisabled || isReadOnly || e.ctrlKey) {
+    if (e.ctrlKey) {
       return;
@@ -224,6 +231,9 @@ } // stop scrolling the page
     }
-  }, [isReadOnly, isDisabled, decrement, increment]);
+  }, [decrement, increment]); // If the input isn't supposed to receive input, disable scrolling.
+
+  let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
   $b40e566e8b7705a138eb78aae622eee$var$useScrollWheel({
     onScroll: onWheel,
-    capture: false
+    capture: false,
+    isDisabled: scrollingDisabled
   }, inputRef); // The inputMode attribute influences the software keyboard that is shown on touch devices.
@@ -475,7 +485,7 @@ // Browsers and operating systems are quite inconsistent about what keys are available, however.
   return {
-    groupProps: {
+    groupProps: _babelRuntimeHelpersEsmExtends({
       role: 'group',
       'aria-disabled': isDisabled,
       'aria-invalid': validationState === 'invalid' ? 'true' : undefined
-    },
+    }, focusWithinProps),
     labelProps,
@@ -491,12 +501,19 @@ inputProps,
     onScroll,
-    capture
+    capture,
+    isDisabled
   } = _ref;
   useEffect(() => {
     let elem = ref.current;
-    elem.addEventListener('wheel', onScroll, capture);
+
+    if (!isDisabled) {
+      elem.addEventListener('wheel', onScroll, capture);
+    }
+
     return () => {
-      elem.removeEventListener('wheel', onScroll, capture);
+      if (!isDisabled) {
+        elem.removeEventListener('wheel', onScroll, capture);
+      }
     };
-  }, [onScroll, ref, capture]);
+  }, [onScroll, ref, capture, isDisabled]);
 }
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@react-aria/numberfield",
-  "version": "3.0.0-nightly.985+887fff79",
+  "version": "3.0.0-nightly.992+d1844573",
   "description": "Spectrum UI components in React",
@@ -21,13 +21,13 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "3.0.0-nightly.985+887fff79",
-    "@react-aria/interactions": "3.0.0-nightly.985+887fff79",
-    "@react-aria/live-announcer": "3.0.0-nightly.985+887fff79",
-    "@react-aria/spinbutton": "3.0.0-nightly.985+887fff79",
-    "@react-aria/textfield": "3.0.0-nightly.985+887fff79",
-    "@react-aria/utils": "3.0.0-nightly.985+887fff79",
-    "@react-stately/numberfield": "3.0.0-nightly.985+887fff79",
-    "@react-types/button": "3.3.2-nightly.2665+887fff79",
-    "@react-types/numberfield": "3.0.0-nightly.2665+887fff79",
-    "@react-types/shared": "3.0.0-nightly.985+887fff79",
-    "@react-types/textfield": "3.0.0-nightly.985+887fff79"
+    "@react-aria/i18n": "3.0.0-nightly.992+d1844573",
+    "@react-aria/interactions": "3.0.0-nightly.992+d1844573",
+    "@react-aria/live-announcer": "3.0.0-nightly.992+d1844573",
+    "@react-aria/spinbutton": "3.0.0-nightly.992+d1844573",
+    "@react-aria/textfield": "3.0.0-nightly.992+d1844573",
+    "@react-aria/utils": "3.0.0-nightly.992+d1844573",
+    "@react-stately/numberfield": "3.0.0-nightly.992+d1844573",
+    "@react-types/button": "3.3.2-nightly.2672+d1844573",
+    "@react-types/numberfield": "3.0.0-nightly.2672+d1844573",
+    "@react-types/shared": "3.0.0-nightly.992+d1844573",
+    "@react-types/textfield": "3.0.0-nightly.992+d1844573"
   },
@@ -40,3 +40,3 @@ "peerDependencies": {
   },
-  "gitHead": "887fff79e8f33c0f8953dc38955419feddd56b6a"
+  "gitHead": "d1844573fa992f7a34285ebafdc08cb407829095"
 }

src/useNumberField.ts

@@ -23,3 +23,4 @@ /*
   useMemo,
-  useRef
+  useRef,
+  useState
 } from 'react';
@@ -31,3 +32,3 @@ // @ts-ignore
 import {TextInputDOMProps} from '@react-types/shared';
-import {useFocus} from '@react-aria/interactions';
+import {useFocus, useFocusWithin} from '@react-aria/interactions';
 import {
@@ -120,6 +121,8 @@ useMessageFormatter,
 
+  let [focusWithin, setFocusWithin] = useState(false);
+  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});
+
   let onWheel = useCallback((e) => {
-    // If the input isn't supposed to receive input, do nothing.
     // If the ctrlKey is pressed, this is a zoom event, do nothing.
-    if (isDisabled || isReadOnly || e.ctrlKey) {
+    if (e.ctrlKey) {
       return;
@@ -136,4 +139,6 @@ }
     }
-  }, [isReadOnly, isDisabled, decrement, increment]);
-  useScrollWheel({onScroll: onWheel, capture: false}, inputRef);
+  }, [decrement, increment]);
+  // If the input isn't supposed to receive input, disable scrolling.
+  let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
+  useScrollWheel({onScroll: onWheel, capture: false, isDisabled: scrollingDisabled}, inputRef);
 
@@ -381,3 +386,4 @@ // The inputMode attribute influences the software keyboard that is shown on touch devices.
       'aria-disabled': isDisabled,
-      'aria-invalid': validationState === 'invalid' ? 'true' : undefined
+      'aria-invalid': validationState === 'invalid' ? 'true' : undefined,
+      ...focusWithinProps
     },
@@ -392,11 +398,16 @@ labelProps,
 // scroll wheel needs to be added not passively so it's cancelable, small helper hook to remember that
-function useScrollWheel({onScroll, capture}: {onScroll: (e) => void, capture: boolean}, ref: RefObject<HTMLElement>) {
+function useScrollWheel({onScroll, capture, isDisabled}: {onScroll: (e) => void, capture: boolean, isDisabled: boolean}, ref: RefObject<HTMLElement>) {
   useEffect(() => {
     let elem = ref.current;
-    elem.addEventListener('wheel', onScroll, capture);
 
+    if (!isDisabled) {
+      elem.addEventListener('wheel', onScroll, capture);
+    }
+
     return () => {
-      elem.removeEventListener('wheel', onScroll, capture);
+      if (!isDisabled) {
+        elem.removeEventListener('wheel', onScroll, capture);
+      }
     };
-  }, [onScroll, ref, capture]);
+  }, [onScroll, ref, capture, isDisabled]);
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

160414

increased by1.9%

Lines of code

1384

increased by2.9%

Dependency changes

• Updated@react-aria/i18n@3.0.0-nightly.992+d1844573

• Updated@react-aria/interactions@3.0.0-nightly.992+d1844573

• Updated@react-aria/live-announcer@3.0.0-nightly.992+d1844573

• Updated@react-aria/spinbutton@3.0.0-nightly.992+d1844573

• Updated@react-aria/textfield@3.0.0-nightly.992+d1844573

• Updated@react-aria/utils@3.0.0-nightly.992+d1844573

• Updated@react-stately/numberfield@3.0.0-nightly.992+d1844573

• Updated@react-types/button@3.3.2-nightly.2672+d1844573

• Updated@react-types/numberfield@3.0.0-nightly.2672+d1844573

• Updated@react-types/shared@3.0.0-nightly.992+d1844573

• Updated@react-types/textfield@3.0.0-nightly.992+d1844573