@react-aria/color 3.0.0-beta.2 → 3.0.0-beta.20

package/src/useColorField.ts

@@ -24,7 +24,7 @@ import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
 import {useFormattedTextField} from '@react-aria/textfield';
 import {useSpinButton} from '@react-aria/spinbutton';
 
-interface ColorFieldAria {
+export interface ColorFieldAria {
   /** Props for the label element. */
   labelProps: LabelHTMLAttributes<HTMLLabelElement>,
   /** Props for the input element. */
@@ -85,7 +85,7 @@ export function useColorField(
     } else if (e.deltaY < 0) {
       decrement();
     }
-  }, [isReadOnly, isDisabled, decrement, increment]);
+  }, [decrement, increment]);
   // If the input isn't supposed to receive input, disable scrolling.
   let scrollingDisabled = isDisabled || isReadOnly || !focusWithin;
   useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);
@@ -98,6 +98,7 @@ export function useColorField(
     mergeProps(props, {
       id: inputId,
       value: inputValue,
+      defaultValue: undefined,
       type: 'text',
       autoComplete: 'off',
       onChange
@@ -112,6 +113,7 @@ export function useColorField(
       'aria-valuenow': null,
       'aria-valuetext': null,
       autoCorrect: 'off',
+      spellCheck: 'false',
       onBlur: commit
     })
   };

package/src/useColorSlider.ts

@@ -12,36 +12,37 @@
 
 import {AriaColorSliderProps} from '@react-types/color';
 import {ColorSliderState} from '@react-stately/color';
-import {HTMLAttributes, RefObject} from 'react';
+import {DOMAttributes} from '@react-types/shared';
+import {InputHTMLAttributes, RefObject} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {useLocale} from '@react-aria/i18n';
 import {useSlider, useSliderThumb} from '@react-aria/slider';
 
-interface ColorSliderAriaOptions extends AriaColorSliderProps {
+export interface AriaColorSliderOptions extends AriaColorSliderProps {
   /** A ref for the track element. */
-  trackRef: RefObject<HTMLElement>,
+  trackRef: RefObject<Element>,
   /** A ref for the input element. */
   inputRef: RefObject<HTMLInputElement>
 }
 
-interface ColorSliderAria {
+export interface ColorSliderAria {
   /** Props for the label element. */
-  labelProps: HTMLAttributes<HTMLElement>,
+  labelProps: DOMAttributes,
   /** Props for the track element. */
-  trackProps: HTMLAttributes<HTMLElement>,
+  trackProps: DOMAttributes,
   /** Props for the thumb element. */
-  thumbProps: HTMLAttributes<HTMLElement>,
+  thumbProps: DOMAttributes,
   /** Props for the visually hidden range input element. */
-  inputProps: HTMLAttributes<HTMLElement>,
+  inputProps: InputHTMLAttributes<HTMLInputElement>,
   /** Props for the output element, displaying the value of the color slider. */
-  outputProps: HTMLAttributes<HTMLElement>
+  outputProps: DOMAttributes
 }
 
 /**
  * Provides the behavior and accessibility implementation for a color slider component.
  * Color sliders allow users to adjust an individual channel of a color value.
  */
-export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSliderState): ColorSliderAria {
+export function useColorSlider(props: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {
   let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel} = props;
 
   let {locale, direction} = useLocale();
@@ -99,17 +100,14 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
     }
   };
 
-  let thumbPosition = state.getThumbPercent(0);
-  if (orientation === 'vertical' || direction === 'rtl') {
-    thumbPosition = 1 - thumbPosition;
-  }
+  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};
 
   return {
     trackProps: {
       ...mergeProps(groupProps, trackProps),
       style: {
-        position: 'relative',
-        touchAction: 'none',
+        ...trackProps.style,
+        ...forcedColorAdjustNoneStyle,
         background: generateBackground()
       }
     },
@@ -117,10 +115,8 @@ export function useColorSlider(props: ColorSliderAriaOptions, state: ColorSlider
     thumbProps: {
       ...thumbProps,
       style: {
-        touchAction: 'none',
-        position: 'absolute',
-        [orientation === 'vertical' ? 'top' : 'left']: `${thumbPosition * 100}%`,
-        transform: 'translate(-50%, -50%)'
+        ...thumbProps.style,
+        ...forcedColorAdjustNoneStyle
       }
     },
     labelProps,

package/src/useColorWheel.ts

@@ -12,37 +12,35 @@
 
 import {AriaColorWheelProps} from '@react-types/color';
 import {ColorWheelState} from '@react-stately/color';
+import {DOMAttributes} from '@react-types/shared';
 import {focusWithoutScrolling, mergeProps, useGlobalListeners, useLabels} from '@react-aria/utils';
-import React, {ChangeEvent, HTMLAttributes, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
+import React, {ChangeEvent, InputHTMLAttributes, RefObject, useCallback, useRef} from 'react';
 import {useKeyboard, useMove} from '@react-aria/interactions';
 import {useLocale} from '@react-aria/i18n';
 
-interface ColorWheelAriaProps extends AriaColorWheelProps {
+export interface AriaColorWheelOptions extends AriaColorWheelProps {
   /** The outer radius of the color wheel. */
   outerRadius: number,
   /** The inner radius of the color wheel. */
   innerRadius: number
 }
 
-interface ColorWheelAria {
+export interface ColorWheelAria {
   /** Props for the track element. */
-  trackProps: HTMLAttributes<HTMLElement>,
+  trackProps: DOMAttributes,
   /** Props for the thumb element. */
-  thumbProps: HTMLAttributes<HTMLElement>,
+  thumbProps: DOMAttributes,
   /** Props for the visually hidden range input element. */
   inputProps: InputHTMLAttributes<HTMLInputElement>
 }
 
-const PAGE_MIN_STEP_SIZE = 6;
-
 /**
  * Provides the behavior and accessibility implementation for a color wheel component.
  * Color wheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState, inputRef: RefObject<HTMLElement>): ColorWheelAria {
+export function useColorWheel(props: AriaColorWheelOptions, state: ColorWheelState, inputRef: RefObject<HTMLInputElement>): ColorWheelAria {
   let {
     isDisabled,
-    step = 1,
     innerRadius,
     outerRadius,
     'aria-label': ariaLabel
@@ -62,12 +60,38 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
   stateRef.current = state;
 
   let currentPosition = useRef<{x: number, y: number}>(null);
+
+  let {keyboardProps} = useKeyboard({
+    onKeyDown(e) {
+      // these are the cases that useMove doesn't handle
+      if (!/^(PageUp|PageDown)$/.test(e.key)) {
+        e.continuePropagation();
+        return;
+      }
+      // same handling as useMove, don't need to stop propagation, useKeyboard will do that for us
+      e.preventDefault();
+      // remember to set this and unset it so that onChangeEnd is fired
+      stateRef.current.setDragging(true);
+      switch (e.key) {
+        case 'PageUp':
+          e.preventDefault();
+          state.increment(stateRef.current.pageStep);
+          break;
+        case 'PageDown':
+          e.preventDefault();
+          state.decrement(stateRef.current.pageStep);
+          break;
+      }
+      stateRef.current.setDragging(false);
+    }
+  });
+
   let moveHandler = {
     onMoveStart() {
       currentPosition.current = null;
       state.setDragging(true);
     },
-    onMove({deltaX, deltaY, pointerType}) {
+    onMove({deltaX, deltaY, pointerType, shiftKey}) {
       if (currentPosition.current == null) {
         currentPosition.current = stateRef.current.getThumbPosition(thumbRadius);
       }
@@ -75,9 +99,9 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
       currentPosition.current.y += deltaY;
       if (pointerType === 'keyboard') {
         if (deltaX > 0 || deltaY < 0) {
-          state.increment();
+          state.increment(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
         } else if (deltaX < 0 || deltaY > 0) {
-          state.decrement();
+          state.decrement(shiftKey ? stateRef.current.pageStep : stateRef.current.step);
         }
       } else {
         stateRef.current.setHueFromPoint(currentPosition.current.x, currentPosition.current.y, thumbRadius);
@@ -116,9 +140,13 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
       currentPointer.current = id;
       focusInput();
       state.setDragging(true);
-      addGlobalListener(window, 'mouseup', onThumbUp, false);
-      addGlobalListener(window, 'touchend', onThumbUp, false);
-      addGlobalListener(window, 'pointerup', onThumbUp, false);
+
+      if (typeof PointerEvent !== 'undefined') {
+        addGlobalListener(window, 'pointerup', onThumbUp, false);
+      } else {
+        addGlobalListener(window, 'mouseup', onThumbUp, false);
+        addGlobalListener(window, 'touchend', onThumbUp, false);
+      }
     }
   };
 
@@ -130,9 +158,12 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
       currentPointer.current = undefined;
       isOnTrack.current = false;
 
-      removeGlobalListener(window, 'mouseup', onThumbUp, false);
-      removeGlobalListener(window, 'touchend', onThumbUp, false);
-      removeGlobalListener(window, 'pointerup', onThumbUp, false);
+      if (typeof PointerEvent !== 'undefined') {
+        removeGlobalListener(window, 'pointerup', onThumbUp, false);
+      } else {
+        removeGlobalListener(window, 'mouseup', onThumbUp, false);
+        removeGlobalListener(window, 'touchend', onThumbUp, false);
+      }
     }
   };
 
@@ -149,9 +180,12 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
       focusInput();
       state.setDragging(true);
 
-      addGlobalListener(window, 'mouseup', onTrackUp, false);
-      addGlobalListener(window, 'touchend', onTrackUp, false);
-      addGlobalListener(window, 'pointerup', onTrackUp, false);
+      if (typeof PointerEvent !== 'undefined') {
+        addGlobalListener(window, 'pointerup', onTrackUp, false);
+      } else {
+        addGlobalListener(window, 'mouseup', onTrackUp, false);
+        addGlobalListener(window, 'touchend', onTrackUp, false);
+      }
     }
   };
 
@@ -163,43 +197,34 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
       state.setDragging(false);
       focusInput();
 
-      removeGlobalListener(window, 'mouseup', onTrackUp, false);
-      removeGlobalListener(window, 'touchend', onTrackUp, false);
-      removeGlobalListener(window, 'pointerup', onTrackUp, false);
-    }
-  };
 
-  let {keyboardProps} = useKeyboard({
-    onKeyDown(e) {
-      switch (e.key) {
-        case 'PageUp':
-          e.preventDefault();
-          state.increment(PAGE_MIN_STEP_SIZE);
-          break;
-        case 'PageDown':
-          e.preventDefault();
-          state.decrement(PAGE_MIN_STEP_SIZE);
-          break;
+      if (typeof PointerEvent !== 'undefined') {
+        removeGlobalListener(window, 'pointerup', onTrackUp, false);
+      } else {
+        removeGlobalListener(window, 'mouseup', onTrackUp, false);
+        removeGlobalListener(window, 'touchend', onTrackUp, false);
       }
     }
-  });
+  };
 
   let trackInteractions = isDisabled ? {} : mergeProps({
-    onMouseDown: (e: React.MouseEvent) => {
-      if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
-        return;
-      }
-      onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);
-    },
-    onPointerDown: (e: React.PointerEvent) => {
-      if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {
-        return;
-      }
-      onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
-    },
-    onTouchStart: (e: React.TouchEvent) => {
-      onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
-    }
+    ...(typeof PointerEvent !== 'undefined' ? {
+      onPointerDown: (e: React.PointerEvent) => {
+        if (e.pointerType === 'mouse' && (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)) {
+          return;
+        }
+        onTrackDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
+      }} : {
+        onMouseDown: (e: React.MouseEvent) => {
+          if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
+            return;
+          }
+          onTrackDown(e.currentTarget, undefined, e.clientX, e.clientY);
+        },
+        onTouchStart: (e: React.TouchEvent) => {
+          onTrackDown(e.currentTarget, e.changedTouches[0].identifier, e.changedTouches[0].clientX, e.changedTouches[0].clientY);
+        }
+      })
   }, movePropsContainer);
 
   let thumbInteractions = isDisabled ? {} : mergeProps({
@@ -218,7 +243,7 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
     onTouchStart: (e: React.TouchEvent) => {
       onThumbDown(e.changedTouches[0].identifier);
     }
-  }, movePropsThumb, keyboardProps);
+  }, keyboardProps, movePropsThumb);
   let {x, y} = state.getThumbPosition(thumbRadius);
 
   // Provide a default aria-label if none is given
@@ -232,6 +257,12 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
     'aria-label': ariaLabel
   });
 
+  let {minValue, maxValue, step} = state.value.getChannelRange('hue');
+
+  let forcedColorAdjustNoneStyle = {
+    forcedColorAdjust: 'none'
+  };
+
   return {
     trackProps: {
       ...trackInteractions,
@@ -258,7 +289,8 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
             hsl(360, 100%, 50%)
           )
         `,
-        clipPath: `path(evenodd, "${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}")`
+        clipPath: `path(evenodd, "${circlePath(outerRadius, outerRadius, outerRadius)} ${circlePath(outerRadius, outerRadius, innerRadius)}")`,
+        ...forcedColorAdjustNoneStyle
       }
     },
     thumbProps: {
@@ -268,15 +300,16 @@ export function useColorWheel(props: ColorWheelAriaProps, state: ColorWheelState
         left: '50%',
         top: '50%',
         transform: `translate(calc(${x}px - 50%), calc(${y}px - 50%))`,
-        touchAction: 'none'
+        touchAction: 'none',
+        ...forcedColorAdjustNoneStyle
       }
     },
     inputProps: mergeProps(
       inputLabellingProps,
       {
         type: 'range',
-        min: '0',
-        max: '360',
+        min: String(minValue),
+        max: String(maxValue),
         step: String(step),
         'aria-valuetext': state.value.formatChannelValue('hue', locale),
         disabled: isDisabled,