@react-aria/color 3.1.4 → 3.2.0

package/src/useColorField.ts

@@ -1,142 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaColorFieldProps} from '@react-types/color';
-import {ColorFieldState} from '@react-stately/color';
-import {DOMAttributes, ValidationResult} from '@react-types/shared';
-import {
-  InputHTMLAttributes,
-  LabelHTMLAttributes,
-  RefObject,
-  useCallback,
-  useState
-} from 'react';
-import {mergeProps, useFormReset, useId} from '@react-aria/utils';
-import {privateValidationStateProp} from '@react-stately/form';
-import {useFocusWithin, useScrollWheel} from '@react-aria/interactions';
-import {useFormattedTextField} from '@react-aria/textfield';
-import {useSpinButton} from '@react-aria/spinbutton';
-
-export interface ColorFieldAria extends ValidationResult {
-  /** Props for the label element. */
-  labelProps: LabelHTMLAttributes<HTMLLabelElement>,
-  /** Props for the input element. */
-  inputProps: InputHTMLAttributes<HTMLInputElement>,
-  /** Props for the text field's description element, if any. */
-  descriptionProps: DOMAttributes,
-  /** Props for the text field's error message element, if any. */
-  errorMessageProps: DOMAttributes
-}
-
-/**
- * Provides the behavior and accessibility implementation for a color field component.
- * Color fields allow users to enter and adjust a hex color value.
- */
-export function useColorField(
-  props: AriaColorFieldProps,
-  state: ColorFieldState,
-  ref: RefObject<HTMLInputElement | null>
-): ColorFieldAria {
-  let {
-    isDisabled,
-    isReadOnly,
-    isRequired,
-    isWheelDisabled,
-    validationBehavior = 'aria'
-  } = props;
-
-  let {
-    colorValue,
-    inputValue,
-    increment,
-    decrement,
-    incrementToMax,
-    decrementToMin,
-    commit
-  } = state;
-
-  let inputId = useId();
-  let {spinButtonProps} = useSpinButton(
-    {
-      isDisabled,
-      isReadOnly,
-      isRequired,
-      maxValue: 0xFFFFFF,
-      minValue: 0,
-      onIncrement: increment,
-      onIncrementToMax: incrementToMax,
-      onDecrement: decrement,
-      onDecrementToMin: decrementToMin,
-      value: colorValue ? colorValue.toHexInt() : undefined,
-      textValue: colorValue ? colorValue.toString('hex') : undefined
-    }
-  );
-
-  let [focusWithin, setFocusWithin] = useState(false);
-  let {focusWithinProps} = useFocusWithin({isDisabled, onFocusWithinChange: setFocusWithin});
-
-  let onWheel = useCallback((e) => {
-    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {
-      return;
-    }
-    if (e.deltaY > 0) {
-      increment();
-    } else if (e.deltaY < 0) {
-      decrement();
-    }
-  }, [decrement, increment]);
-  // If the input isn't supposed to receive input, disable scrolling.
-  let scrollingDisabled = isWheelDisabled || isDisabled || isReadOnly || !focusWithin;
-  useScrollWheel({onScroll: onWheel, isDisabled: scrollingDisabled}, ref);
-
-  let onChange = value => {
-    if (state.validate(value)) {
-      state.setInputValue(value);
-    }
-  };
-
-  let {inputProps, ...otherProps} = useFormattedTextField({
-    ...props,
-    id: inputId,
-    value: inputValue,
-    // Intentionally invalid value that will be ignored by onChange during form reset
-    // This is handled separately below.
-    defaultValue: '!',
-    validate: undefined,
-    [privateValidationStateProp]: state,
-    type: 'text',
-    autoComplete: 'off',
-    onChange
-  }, state, ref);
-
-  useFormReset(ref, state.defaultColorValue, state.setColorValue);
-
-  inputProps = mergeProps(inputProps, spinButtonProps, focusWithinProps, {
-    role: 'textbox',
-    'aria-valuemax': null,
-    'aria-valuemin': null,
-    'aria-valuenow': null,
-    'aria-valuetext': null,
-    autoCorrect: 'off',
-    spellCheck: 'false',
-    onBlur: commit
-  });
-
-  if (validationBehavior === 'native') {
-    inputProps['aria-required'] = undefined;
-  }
-
-  return {
-    inputProps,
-    ...otherProps
-  };
-}

package/src/useColorSlider.ts

@@ -1,151 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaColorSliderProps} from '@react-types/color';
-import {ColorSliderState} from '@react-stately/color';
-import {DOMAttributes, RefObject} from '@react-types/shared';
-import {InputHTMLAttributes} from 'react';
-import {mergeProps} from '@react-aria/utils';
-import {useLocale} from '@react-aria/i18n';
-import {useSlider, useSliderThumb} from '@react-aria/slider';
-import {useVisuallyHidden} from '@react-aria/visually-hidden';
-
-export interface AriaColorSliderOptions extends AriaColorSliderProps {
-  /** A ref for the track element. */
-  trackRef: RefObject<Element | null>,
-  /** A ref for the input element. */
-  inputRef: RefObject<HTMLInputElement | null>
-}
-
-export interface ColorSliderAria {
-  /** Props for the label element. */
-  labelProps: DOMAttributes,
-  /** Props for the track element. */
-  trackProps: DOMAttributes,
-  /** Props for the thumb element. */
-  thumbProps: DOMAttributes,
-  /** Props for the visually hidden range input element. */
-  inputProps: InputHTMLAttributes<HTMLInputElement>,
-  /** Props for the output element, displaying the value of the color slider. */
-  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: AriaColorSliderOptions, state: ColorSliderState): ColorSliderAria {
-  let {trackRef, inputRef, orientation, channel, 'aria-label': ariaLabel, name, form} = props;
-
-  let {locale, direction} = useLocale();
-
-  // Provide a default aria-label if there is no other label provided.
-  if (!props.label && !ariaLabel && !props['aria-labelledby']) {
-    ariaLabel = state.value.getChannelName(channel, locale);
-  }
-
-  // @ts-ignore - ignore unused incompatible props
-  let {groupProps, trackProps, labelProps, outputProps} = useSlider({...props, 'aria-label': ariaLabel}, state, trackRef);
-  let {inputProps, thumbProps} = useSliderThumb({
-    index: 0,
-    orientation,
-    isDisabled: props.isDisabled,
-    name,
-    form,
-    trackRef,
-    inputRef
-  }, state);
-
-  let value = state.getDisplayColor();
-  let generateBackground = () => {
-    let to: string;
-    if (orientation === 'vertical') {
-      to = 'top';
-    } else if (direction === 'ltr') {
-      to = 'right';
-    } else {
-      to = 'left';
-    }
-    switch (channel) {
-      case 'hue': {
-        let stops = [0, 60, 120, 180, 240, 300, 360].map(hue => value.withChannelValue('hue', hue).toString('css')).join(', ');
-        return `linear-gradient(to ${to}, ${stops})`;
-      }
-      case 'lightness': {
-        // We have to add an extra color stop in the middle so that the hue shows up at all.
-        // Otherwise it will always just be black to white.
-        let min = state.getThumbMinValue(0);
-        let max = state.getThumbMaxValue(0);
-        let start = value.withChannelValue(channel, min).toString('css');
-        let middle = value.withChannelValue(channel, (max - min) / 2).toString('css');
-        let end = value.withChannelValue(channel, max).toString('css');
-        return `linear-gradient(to ${to}, ${start}, ${middle}, ${end})`;
-      }
-      case 'saturation':
-      case 'brightness':
-      case 'red':
-      case 'green':
-      case 'blue':
-      case 'alpha': {
-        let start = value.withChannelValue(channel, state.getThumbMinValue(0)).toString('css');
-        let end = value.withChannelValue(channel, state.getThumbMaxValue(0)).toString('css');
-        return `linear-gradient(to ${to}, ${start}, ${end})`;
-      }
-      default:
-        throw new Error('Unknown color channel: ' + channel);
-    }
-  };
-
-  let forcedColorAdjustNoneStyle = {forcedColorAdjust: 'none'};
-
-  if (channel === 'hue') {
-    inputProps['aria-valuetext'] += `, ${value.getHueName(locale)}`;
-  } else if (channel !== 'alpha') {
-    inputProps['aria-valuetext'] += `, ${value.getColorName(locale)}`;
-  }
-
-  let {visuallyHiddenProps} = useVisuallyHidden({
-    style: {
-      opacity: '0.0001',
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none'
-    }
-  });
-
-  return {
-    trackProps: {
-      ...mergeProps(groupProps, trackProps),
-      style: {
-        ...trackProps.style,
-        ...forcedColorAdjustNoneStyle,
-        background: generateBackground()
-      }
-    },
-    inputProps: {
-      ...inputProps,
-      style: {
-        ...inputProps.style,
-        ...visuallyHiddenProps.style
-      }
-    },
-    thumbProps: {
-      ...thumbProps,
-      style: {
-        ...thumbProps.style,
-        ...forcedColorAdjustNoneStyle
-      }
-    },
-    labelProps,
-    outputProps
-  };
-}

package/src/useColorSwatch.ts

@@ -1,74 +0,0 @@
-/*
- * Copyright 2024 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaLabelingProps, DOMProps} from '@react-types/shared';
-import {Color} from '@react-types/color';
-import {filterDOMProps, useId} from '@react-aria/utils';
-import {HTMLAttributes, useMemo} from 'react';
-// @ts-ignore
-import intlMessages from '../intl/*.json';
-import {parseColor} from '@react-stately/color';
-import {useLocale, useLocalizedStringFormatter} from '@react-aria/i18n';
-
-export interface AriaColorSwatchProps extends AriaLabelingProps, DOMProps {
-  /** The color value to display in the swatch. */
-  color?: string | Color,
-  /** 
-   * A localized accessible name for the color.
-   * By default, a description is generated from the color value,
-   * but this can be overridden if you have a more specific color
-   * name (e.g. Pantone colors).
-   */
-  colorName?: string
-}
-
-export interface ColorSwatchAria {
-  /** Props for the color swatch element. */
-  colorSwatchProps: HTMLAttributes<HTMLElement>,
-  /** The parsed color value of the swatch. */
-  color: Color
-}
-
-/**
- * Provides the accessibility implementation for a color swatch component.
- * A color swatch displays a preview of a selected color.
- */
-export function useColorSwatch(props: AriaColorSwatchProps): ColorSwatchAria {
-  let {color: value, colorName} = props;
-  let nonNullValue = value || '#fff0';
-  let color = useMemo(() => typeof nonNullValue === 'string' ? parseColor(nonNullValue) : nonNullValue, [nonNullValue]);
-  let {locale} = useLocale();
-  let DOMProps = filterDOMProps(props, {labelable: true});
-  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');
-  let id = useId(props.id);
-
-  if (!colorName) {
-    colorName = color.getChannelValue('alpha') === 0 ? stringFormatter.format('transparent') : color.getColorName(locale);
-  }
-
-  return {
-    colorSwatchProps: {
-      ...DOMProps,
-      role: 'img',
-      'aria-roledescription': stringFormatter.format('colorSwatch'),
-      'aria-label': [colorName, props['aria-label'] || ''].filter(Boolean).join(', '),
-      'aria-labelledby': props['aria-labelledby'] ? `${id} ${props['aria-labelledby']}` : undefined,
-      id,
-      style: {
-        backgroundColor: color.toString('css'),
-        // @ts-ignore
-        forcedColorAdjust: 'none'
-      }
-    },
-    color: color || null
-  };
-}