Add isWheelDisabled prop to useNumberField and useColorField

packages/@react-aria/color/src/useColorField.ts

@@ -46,6 +46,7 @@ export function useColorField(
     isDisabled,
     isReadOnly,
     isRequired,
+    isWheelDisabled,
     validationBehavior = 'aria'
   } = props;
 
@@ -90,7 +91,7 @@ export function useColorField(
     }
   }, [decrement, increment]);
   // If the input isn't supposed to receive input, disable scrolling.
-  let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
+  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
   useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);
 
   let onChange = value => {

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -75,6 +75,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     onKeyUp,
     description,
     errorMessage,
+    isWheelDisabled,
     ...otherProps
   } = props;
 
@@ -145,7 +146,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     }
   }, [decrement, increment]);
   // If the input isn't supposed to receive input, disable scrolling.
-  let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
+  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
   useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, inputRef);
 
   // The inputMode attribute influences the software keyboard that is shown on touch devices.

packages/@react-spectrum/color/stories/ColorField.stories.tsx

@@ -79,6 +79,9 @@ export default {
     isInvalid: {
       control: 'boolean'
     },
+    isWheelDisabled: {
+      control: 'boolean'
+    },
     description: {
       control: 'text'
     },

packages/@react-types/color/src/index.d.ts

@@ -99,7 +99,9 @@ export interface Color {
 
 export interface ColorFieldProps extends Omit<ValueBase<string | Color | null>, 'onChange'>, InputBase, Validation<Color | null>, FocusableProps, TextInputBase, LabelableProps, HelpTextProps {
   /** Handler that is called when the value changes. */
-  onChange?: (color: Color | null) => void
+  onChange?: (color: Color | null) => void,
+  /** Enables or disables changing the value with scroll. */
+  isWheelDisabled?: boolean
 }
 
 export interface AriaColorFieldProps extends ColorFieldProps, AriaLabelingProps, FocusableDOMProps, Omit<TextInputDOMProps, 'minLength' | 'maxLength' | 'pattern' | 'type' | 'inputMode' | 'autoComplete'>, AriaValidationProps {}

packages/@react-types/numberfield/src/index.d.ts

@@ -29,7 +29,11 @@ export interface NumberFieldProps extends InputBase, Validation<number>, Focusab
    * Formatting options for the value displayed in the number field.
    * This also affects what characters are allowed to be typed by the user.
    */
-  formatOptions?: Intl.NumberFormatOptions
+  formatOptions?: Intl.NumberFormatOptions,
+  /**
+   * Enables or disables changing the value with scroll.
+   */
+  isWheelDisabled?: boolean
 }
 
 export interface AriaNumberFieldProps extends NumberFieldProps, DOMProps, AriaLabelingProps, TextInputDOMEvents {

packages/react-aria-components/stories/NumberField.stories.tsx

@@ -17,13 +17,23 @@ export default {
   title: 'React Aria Components'
 };
 
-export const NumberFieldExample = () => (
-  <NumberField data-testid="number-field-example" formatOptions={{style: 'currency', currency: 'USD'}}>
-    <Label>Test</Label>
-    <Group style={{display: 'flex'}}>
-      <Button slot="decrement">-</Button>
-      <Input />
-      <Button slot="increment">+</Button>
-    </Group>
-  </NumberField>
-);
+export const NumberFieldExample = {
+  args: {
+    defaultValue: 0,
+    minValue: 0,
+    maxValue: 100,
+    step: 1,
+    formatOptions: {style: 'currency', currency: 'USD'},
+    isWheelDisabled: false
+  },
+  render: (args) => (
+    <NumberField {...args}>
+      <Label>Test</Label>
+      <Group style={{display: 'flex'}}>
+        <Button slot="decrement">-</Button>
+        <Input />
+        <Button slot="increment">+</Button>
+      </Group>
+    </NumberField>
+  )
+};