ColorArea: Jittery ColorThumb on large sizes due to missing xChannelStep and yChannelStep options

[StepanVorobev]

Provide a general summary of the issue here

When using ColorArea with a large size (e.g., 360px or more) and with HSB/HSL color model, the ColorThumb starts to jitter during mouse drag interactions. This is especially noticeable when moving the thumb diagonally or in rapid movements. It appears to be caused by the lack of control over the xChannelStep and yChannelStep properties in useColorAreaState.
This is noticeable even in your documentation, but not so much because your color selection area is only 192px

🤔 Expected Behavior?

• The ColorThumb should move smoothly regardless of the size of the ColorArea.
• Developers should be able to configure xChannelStep and yChannelStep in useColorAreaState to fine-tune the behavior for larger ColorArea sizes.

😯 Current Behavior

The useColorAreaState hook in react-aria does not provide options to configure xChannelStep and yChannelStep. As a result, when using a large ColorArea (e.g., 500px or more), the ColorThumb exhibits jittery behavior during dragging. The lack of configurability forces developers to rely on the default step values, which are not optimal for larger sizes.

Additionally, customizing the behavior requires duplicating the useColorAreaState hook and implementing a custom ColorArea component, which leads to maintenance overhead and dependency management issues.

💁 Possible Solution

Add support for xChannelStep and yChannelStep in useColorAreaState. This would allow developers to configure the precision of movements based on the size of the ColorArea.
It would also be nice to add these props to the ColorArea component so that users don't have to create their own ColorArea because of the need to pass props.

Alternatively, implement an automatic step calculation based on the size of the ColorArea to ensure smooth thumb movement.

🔦 Context

Library version: from 1.2.1 to 1.5.0 and further

I had to duplicate the useColorAreaState hook in my project, create a custom ColorArea component, and pin the react-aria library to a specific version without using the caret (^) to avoid breaking changes.

🖥️ Steps to Reproduce

Steps to reproduce:

1. Create a ColorArea with dimensions larger than 100px (e.g., 500px).
2. Attempt to drag the ColorThumb diagonally or in rapid movements.
3. Observe the jittery behavior of the ColorThumb.

(or go to react-aria site, find an example with hsl/hsb. For clarity, you can increase the size of the area in DevTools)

Version

from 1.2.1 to 1.5.0 and later

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Thanks for the issue. What values would you expect to be able to pass for the step?

I think what you're asking for is a smooth drag but then snap after pressend.

This could be a little tricky for a mouse or touch user to use as the handle may unexpectedly jump after lifting.