@react-aria/color - npm Package Compare versions

Comparing version 3.0.0-nightly.2672 to 3.0.0-nightly.2674

dist/main.js

 var {
-  useTextField
-} = require("@react-aria/textfield");
-
-var {
   useSpinButton
@@ -10,4 +6,9 @@ } = require("@react-aria/spinbutton");
 var {
+  useFormattedTextField
+} = require("@react-aria/textfield");
+
+var {
   useKeyboard,
-  useMove
+  useMove,
+  useScrollWheel
 } = require("@react-aria/interactions");
@@ -439,3 +440,2 @@
     inputValue,
-    setInputValue,
     commit,
@@ -463,13 +463,18 @@ increment,
   });
-
-  let onWheel = e => {
-    if (isDisabled || isReadOnly) {
-      return;
-    }
-
-    if (e.deltaY < 0) {
+  let onWheel = useCallback(e => {
+    if (e.deltaY > 0) {
       increment();
-    } else {
+    } else if (e.deltaY < 0) {
       decrement();
     }
+  }, [isReadOnly, isDisabled, decrement, increment]); // If the input isn't supposed to receive input, disable scrolling.
+
+  let scrollingDisabled = isDisabled || isReadOnly;
+  useScrollWheel({
+    onScroll: onWheel,
+    isDisabled: scrollingDisabled
+  }, ref);
+
+  let onChange = value => {
+    state.setInputValue(value);
   };
@@ -480,3 +485,3 @@
     inputProps
-  } = useTextField(mergeProps(props, {
+  } = useFormattedTextField(mergeProps(props, {
     id: inputId,
@@ -486,4 +491,4 @@ value: inputValue,
     autoComplete: 'off',
-    onChange: setInputValue
-  }), ref);
+    onChange
+  }), state, ref);
   return {
@@ -498,4 +503,3 @@ labelProps,
       autoCorrect: 'off',
-      onBlur: commit,
-      onWheel
+      onBlur: commit
     })
@@ -502,0 +506,0 @@ };

dist/module.js

@@ -1,4 +0,4 @@
-import { useTextField } from "@react-aria/textfield";
 import { useSpinButton } from "@react-aria/spinbutton";
-import { useKeyboard, useMove } from "@react-aria/interactions";
+import { useFormattedTextField } from "@react-aria/textfield";
+import { useKeyboard, useMove, useScrollWheel } from "@react-aria/interactions";
 import { useCallback, useRef } from "react";
@@ -401,3 +401,2 @@ import { useSlider, useSliderThumb } from "@react-aria/slider";
     inputValue,
-    setInputValue,
     commit,
@@ -425,13 +424,18 @@ increment,
   });
-
-  let onWheel = e => {
-    if (isDisabled || isReadOnly) {
-      return;
-    }
-
-    if (e.deltaY < 0) {
+  let onWheel = useCallback(e => {
+    if (e.deltaY > 0) {
       increment();
-    } else {
+    } else if (e.deltaY < 0) {
       decrement();
     }
+  }, [isReadOnly, isDisabled, decrement, increment]); // If the input isn't supposed to receive input, disable scrolling.
+
+  let scrollingDisabled = isDisabled || isReadOnly;
+  useScrollWheel({
+    onScroll: onWheel,
+    isDisabled: scrollingDisabled
+  }, ref);
+
+  let onChange = value => {
+    state.setInputValue(value);
   };
@@ -442,3 +446,3 @@
     inputProps
-  } = useTextField(mergeProps(props, {
+  } = useFormattedTextField(mergeProps(props, {
     id: inputId,
@@ -448,4 +452,4 @@ value: inputValue,
     autoComplete: 'off',
-    onChange: setInputValue
-  }), ref);
+    onChange
+  }), state, ref);
   return {
@@ -460,4 +464,3 @@ labelProps,
       autoCorrect: 'off',
-      onBlur: commit,
-      onWheel
+      onBlur: commit
     })
@@ -464,0 +467,0 @@ };

package.json

 {
   "name": "@react-aria/color",
-  "version": "3.0.0-nightly.2672+d1844573",
+  "version": "3.0.0-nightly.2674+faa93480",
   "description": "Spectrum UI components in React",
@@ -21,12 +21,12 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/i18n": "3.0.0-nightly.992+d1844573",
-    "@react-aria/interactions": "3.0.0-nightly.992+d1844573",
-    "@react-aria/slider": "3.0.2-nightly.2672+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/color": "3.0.0-nightly.2672+d1844573",
-    "@react-types/color": "3.0.0-nightly.2672+d1844573",
-    "@react-types/shared": "3.0.0-nightly.992+d1844573",
-    "@react-types/slider": "3.0.2-nightly.2672+d1844573"
+    "@react-aria/i18n": "3.0.0-nightly.994+faa93480",
+    "@react-aria/interactions": "3.0.0-nightly.994+faa93480",
+    "@react-aria/slider": "3.0.2-nightly.2674+faa93480",
+    "@react-aria/spinbutton": "3.0.0-nightly.994+faa93480",
+    "@react-aria/textfield": "3.0.0-nightly.994+faa93480",
+    "@react-aria/utils": "3.0.0-nightly.994+faa93480",
+    "@react-stately/color": "3.0.0-nightly.2674+faa93480",
+    "@react-types/color": "3.0.0-nightly.2674+faa93480",
+    "@react-types/shared": "3.0.0-nightly.994+faa93480",
+    "@react-types/slider": "3.0.2-nightly.2674+faa93480"
   },
@@ -39,3 +39,3 @@ "peerDependencies": {
   },
-  "gitHead": "d1844573fa992f7a34285ebafdc08cb407829095"
+  "gitHead": "faa9348097bf62403e37e32daf897cdad5512e09"
 }

src/useColorField.ts

@@ -18,7 +18,9 @@ /*
   LabelHTMLAttributes,
-  RefObject
+  RefObject,
+  useCallback
 } from 'react';
 import {mergeProps, useId} from '@react-aria/utils';
+import {useFormattedTextField} from '@react-aria/textfield';
+import {useScrollWheel} from '@react-aria/interactions';
 import {useSpinButton} from '@react-aria/spinbutton';
-import {useTextField} from '@react-aria/textfield';
 
@@ -50,3 +52,2 @@ interface ColorFieldAria {
     inputValue,
-    setInputValue,
     commit,
@@ -76,14 +77,18 @@ increment,
 
-  let onWheel = (e) => {
-    if (isDisabled || isReadOnly) {
-      return;
-    }
-    if (e.deltaY < 0) {
+  let onWheel = useCallback((e) => {
+    if (e.deltaY > 0) {
       increment();
-    } else {
+    } else if (e.deltaY < 0) {
       decrement();
     }
+  }, [isReadOnly, isDisabled, decrement, increment]);
+  // If the input isn't supposed to receive input, disable scrolling.
+  let scrollingDisabled = isDisabled || isReadOnly;
+  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);
+
+  let onChange = value => {
+    state.setInputValue(value);
   };
 
-  let {labelProps, inputProps} = useTextField(
+  let {labelProps, inputProps} = useFormattedTextField(
     mergeProps(props, {
@@ -94,4 +99,4 @@ id: inputId,
       autoComplete: 'off',
-      onChange: setInputValue
-    }), ref);
+      onChange
+    }), state, ref);
 
@@ -107,6 +112,5 @@ return {
       autoCorrect: 'off',
-      onBlur: commit,
-      onWheel
+      onBlur: commit
     })
   };
 }

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

132190

increased by1.77%

Lines of code

1425

increased by0.71%

Dependency changes

• Updated@react-aria/i18n@3.0.0-nightly.994+faa93480

• Updated@react-aria/interactions@3.0.0-nightly.994+faa93480

• Updated@react-aria/slider@3.0.2-nightly.2674+faa93480

• Updated@react-aria/spinbutton@3.0.0-nightly.994+faa93480

• Updated@react-aria/textfield@3.0.0-nightly.994+faa93480

• Updated@react-aria/utils@3.0.0-nightly.994+faa93480

• Updated@react-stately/color@3.0.0-nightly.2674+faa93480

• Updated@react-types/color@3.0.0-nightly.2674+faa93480

• Updated@react-types/shared@3.0.0-nightly.994+faa93480

• Updated@react-types/slider@3.0.2-nightly.2674+faa93480