@octanejs/aria 0.0.40 → 0.0.42

package/src/color/useColorArea.tsx

@@ -0,0 +1,599 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/color/useColorArea.ts).
+/*
+ * 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 {
+	AriaLabelingProps,
+	DOMAttributes,
+	DOMProps,
+	MoveMoveEvent,
+	RefObject,
+} from '@react-types/shared';
+import {
+	ColorAreaProps,
+	ColorAreaState,
+} from '../upstream-exports/react-stately/useColorAreaState';
+import { ColorChannel } from '../upstream-exports/react-stately/Color';
+import { focusWithoutScrolling } from '../utils/focusWithoutScrolling';
+import intlMessages from '../intl/color/index';
+import { isAndroid, isIOS } from '../utils/platform';
+import { mergeProps } from '../utils/mergeProps';
+import React, { InputHTMLAttributes, useCallback, useRef, useState } from '../compat/react';
+import { useColorAreaGradient } from './useColorAreaGradient';
+import { useFocus } from '../interactions/useFocus';
+import { useFocusWithin } from '../interactions/useFocusWithin';
+import { useFormReset } from '../utils/useFormReset';
+import { useGlobalListeners } from '../utils/useGlobalListeners';
+import { useKeyboard } from '../interactions/useKeyboard';
+import { useLabels } from '../utils/useLabels';
+import { useLocale } from '../i18n/I18nProvider';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+import { useMove } from '../interactions/useMove';
+import { useVisuallyHidden } from '../visually-hidden/VisuallyHidden';
+
+export interface AriaColorAreaProps extends ColorAreaProps, DOMProps, AriaLabelingProps {
+	/**
+	 * The name of the x channel input element, used when submitting an HTML form. See
+	 * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+	 */
+	xName?: string;
+	/**
+	 * The name of the y channel input element, used when submitting an HTML form. See
+	 * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
+	 */
+	yName?: string;
+	/**
+	 * The `<form>` element to associate the ColorArea with.
+	 * The value of this attribute must be the id of a `<form>` in the same document.
+	 * See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#form).
+	 */
+	form?: string;
+}
+
+export interface ColorAreaAria {
+	/** Props for the color area container element. */
+	colorAreaProps: DOMAttributes;
+	/** Props for the thumb element. */
+	thumbProps: DOMAttributes;
+	/** Props for the visually hidden horizontal range input element. */
+	xInputProps: InputHTMLAttributes<HTMLInputElement>;
+	/** Props for the visually hidden vertical range input element. */
+	yInputProps: InputHTMLAttributes<HTMLInputElement>;
+}
+
+export interface AriaColorAreaOptions extends AriaColorAreaProps {
+	/** A ref to the input that represents the x axis of the color area. */
+	inputXRef: RefObject<HTMLInputElement | null>;
+	/** A ref to the input that represents the y axis of the color area. */
+	inputYRef: RefObject<HTMLInputElement | null>;
+	/** A ref to the color area containing element. */
+	containerRef: RefObject<Element | null>;
+}
+
+type NativeInputEvent = Event & { currentTarget: HTMLInputElement };
+
+/**
+ * Provides the behavior and accessibility implementation for a color area component. Color area
+ * allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional
+ * gradient background.
+ */
+export function useColorArea(props: AriaColorAreaOptions, state: ColorAreaState): ColorAreaAria {
+	let {
+		isDisabled,
+		inputXRef,
+		inputYRef,
+		containerRef,
+		'aria-label': ariaLabel,
+		xName,
+		yName,
+		form,
+	} = props;
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/color');
+
+	let { addGlobalListener, removeGlobalListener } = useGlobalListeners();
+
+	let { direction, locale } = useLocale();
+
+	let [focusedInput, setFocusedInput] = useState<'x' | 'y' | null>(null);
+	let focusInput = useCallback(
+		(inputRef: RefObject<HTMLInputElement | null> = inputXRef) => {
+			if (inputRef.current) {
+				focusWithoutScrolling(inputRef.current);
+			}
+		},
+		[inputXRef],
+	);
+
+	useFormReset(inputXRef, state.defaultValue, state.setValue);
+
+	let [valueChangedViaKeyboard, setValueChangedViaKeyboard] = useState(false);
+	let [valueChangedViaInputEvent, setValueChangedViaInputEvent] = useState(false);
+	let { xChannel, yChannel, zChannel } = state.channels;
+	let xChannelStep = state.xChannelStep;
+	let yChannelStep = state.yChannelStep;
+
+	let currentPosition = useRef<{ x: number; y: number } | null>(null);
+
+	let { keyboardProps } = useKeyboard({
+		onKeyDown(e) {
+			// these are the cases that useMove doesn't handle
+			if (!/^(PageUp|PageDown|Home|End)$/.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
+			state.setDragging(true);
+			setValueChangedViaKeyboard(true);
+			let dir: 'x' | 'y' | undefined;
+			switch (e.key) {
+				case 'PageUp':
+					state.incrementY(state.yChannelPageStep);
+					dir = 'y';
+					break;
+				case 'PageDown':
+					state.decrementY(state.yChannelPageStep);
+					dir = 'y';
+					break;
+				case 'Home':
+					direction === 'rtl'
+						? state.incrementX(state.xChannelPageStep)
+						: state.decrementX(state.xChannelPageStep);
+					dir = 'x';
+					break;
+				case 'End':
+					direction === 'rtl'
+						? state.decrementX(state.xChannelPageStep)
+						: state.incrementX(state.xChannelPageStep);
+					dir = 'x';
+					break;
+			}
+			state.setDragging(false);
+			if (dir) {
+				let input = dir === 'x' ? inputXRef : inputYRef;
+				focusInput(input);
+				setFocusedInput(dir);
+			}
+		},
+	});
+
+	let moveHandler = {
+		onMoveStart() {
+			currentPosition.current = null;
+			state.setDragging(true);
+		},
+		onMove({ deltaX, deltaY, pointerType, shiftKey }: MoveMoveEvent) {
+			let {
+				incrementX,
+				decrementX,
+				incrementY,
+				decrementY,
+				xChannelPageStep,
+				xChannelStep,
+				yChannelPageStep,
+				yChannelStep,
+				getThumbPosition,
+				setColorFromPoint,
+			} = state;
+			if (currentPosition.current == null) {
+				currentPosition.current = getThumbPosition();
+			}
+			let { width, height } = containerRef.current?.getBoundingClientRect() || {
+				width: 0,
+				height: 0,
+			};
+			let valueChanged = deltaX !== 0 || deltaY !== 0;
+			if (pointerType === 'keyboard') {
+				let deltaXValue =
+					shiftKey && xChannelPageStep > xChannelStep ? xChannelPageStep : xChannelStep;
+				let deltaYValue =
+					shiftKey && yChannelPageStep > yChannelStep ? yChannelPageStep : yChannelStep;
+				if ((deltaX > 0 && direction === 'ltr') || (deltaX < 0 && direction === 'rtl')) {
+					incrementX(deltaXValue);
+				} else if ((deltaX < 0 && direction === 'ltr') || (deltaX > 0 && direction === 'rtl')) {
+					decrementX(deltaXValue);
+				} else if (deltaY > 0) {
+					decrementY(deltaYValue);
+				} else if (deltaY < 0) {
+					incrementY(deltaYValue);
+				}
+				setValueChangedViaKeyboard(valueChanged);
+				// set the focused input based on which axis has the greater delta
+				focusedInput = valueChanged && Math.abs(deltaY) > Math.abs(deltaX) ? 'y' : 'x';
+				setFocusedInput(focusedInput);
+			} else {
+				currentPosition.current.x += ((direction === 'rtl' ? -1 : 1) * deltaX) / width;
+				currentPosition.current.y += deltaY / height;
+				setColorFromPoint(currentPosition.current.x, currentPosition.current.y);
+			}
+		},
+		onMoveEnd() {
+			isOnColorArea.current = false;
+			state.setDragging(false);
+			let input = focusedInput === 'x' ? inputXRef : inputYRef;
+			focusInput(input);
+		},
+	};
+	let { moveProps: movePropsThumb } = useMove(moveHandler);
+
+	let { focusWithinProps } = useFocusWithin({
+		onFocusWithinChange: (focusWithin: boolean) => {
+			if (!focusWithin) {
+				setValueChangedViaKeyboard(false);
+				setValueChangedViaInputEvent(false);
+			}
+		},
+	});
+
+	let currentPointer = useRef<number | null | undefined>(undefined);
+	let isOnColorArea = useRef<boolean>(false);
+	let { moveProps: movePropsContainer } = useMove({
+		onMoveStart() {
+			if (isOnColorArea.current) {
+				moveHandler.onMoveStart();
+			}
+		},
+		onMove(e) {
+			if (isOnColorArea.current) {
+				moveHandler.onMove(e);
+			}
+		},
+		onMoveEnd() {
+			if (isOnColorArea.current) {
+				moveHandler.onMoveEnd();
+			}
+		},
+	});
+
+	let onThumbDown = (id: number | null | undefined) => {
+		if (!state.isDragging) {
+			currentPointer.current = id;
+			setValueChangedViaKeyboard(false);
+			focusInput();
+			state.setDragging(true);
+			if (typeof PointerEvent !== 'undefined') {
+				addGlobalListener(window, 'pointerup', onThumbUp, false);
+			} else {
+				addGlobalListener(window, 'mouseup', onThumbUp, false);
+				addGlobalListener(window, 'touchend', onThumbUp, false);
+			}
+		}
+	};
+
+	let onThumbUp = (e: any) => {
+		let id = e.pointerId ?? e.changedTouches?.[0].identifier;
+		if (id === currentPointer.current) {
+			setValueChangedViaKeyboard(false);
+			focusInput();
+			state.setDragging(false);
+			currentPointer.current = undefined;
+			isOnColorArea.current = false;
+
+			if (typeof PointerEvent !== 'undefined') {
+				removeGlobalListener(window, 'pointerup', onThumbUp, false);
+			} else {
+				removeGlobalListener(window, 'mouseup', onThumbUp, false);
+				removeGlobalListener(window, 'touchend', onThumbUp, false);
+			}
+		}
+	};
+
+	let onColorAreaDown = (
+		colorArea: Element,
+		id: number | null | undefined,
+		clientX: number,
+		clientY: number,
+	) => {
+		let rect = colorArea.getBoundingClientRect();
+		let { width, height } = rect;
+		let x = (clientX - rect.x) / width;
+		let y = (clientY - rect.y) / height;
+		if (direction === 'rtl') {
+			x = 1 - x;
+		}
+		if (
+			x >= 0 &&
+			x <= 1 &&
+			y >= 0 &&
+			y <= 1 &&
+			!state.isDragging &&
+			currentPointer.current === undefined
+		) {
+			isOnColorArea.current = true;
+			setValueChangedViaKeyboard(false);
+			currentPointer.current = id;
+			state.setColorFromPoint(x, y);
+
+			focusInput();
+			state.setDragging(true);
+
+			if (typeof PointerEvent !== 'undefined') {
+				addGlobalListener(window, 'pointerup', onColorAreaUp, false);
+			} else {
+				addGlobalListener(window, 'mouseup', onColorAreaUp, false);
+				addGlobalListener(window, 'touchend', onColorAreaUp, false);
+			}
+		}
+	};
+
+	let onColorAreaUp = (e: any) => {
+		let id = e.pointerId ?? e.changedTouches?.[0].identifier;
+		if (isOnColorArea.current && id === currentPointer.current) {
+			isOnColorArea.current = false;
+			setValueChangedViaKeyboard(false);
+			currentPointer.current = undefined;
+			state.setDragging(false);
+			focusInput();
+
+			if (typeof PointerEvent !== 'undefined') {
+				removeGlobalListener(window, 'pointerup', onColorAreaUp, false);
+			} else {
+				removeGlobalListener(window, 'mouseup', onColorAreaUp, false);
+				removeGlobalListener(window, 'touchend', onColorAreaUp, false);
+			}
+		}
+	};
+
+	let colorAreaInteractions = isDisabled
+		? {}
+		: mergeProps(
+				{
+					...(typeof PointerEvent !== 'undefined'
+						? {
+								onPointerDown: (e: React.PointerEvent) => {
+									if (
+										e.pointerType === 'mouse' &&
+										(e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)
+									) {
+										return;
+									}
+									onColorAreaDown(e.currentTarget, e.pointerId, e.clientX, e.clientY);
+								},
+							}
+						: {
+								onMouseDown: (e: React.MouseEvent) => {
+									if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
+										return;
+									}
+									onColorAreaDown(e.currentTarget, undefined, e.clientX, e.clientY);
+								},
+								onTouchStart: (e: React.TouchEvent) => {
+									onColorAreaDown(
+										e.currentTarget,
+										e.changedTouches[0].identifier,
+										e.changedTouches[0].clientX,
+										e.changedTouches[0].clientY,
+									);
+								},
+							}),
+				},
+				movePropsContainer,
+			);
+
+	let thumbInteractions = isDisabled
+		? {}
+		: mergeProps(
+				{
+					...(typeof PointerEvent !== 'undefined'
+						? {
+								onPointerDown: (e: React.PointerEvent) => {
+									if (
+										e.pointerType === 'mouse' &&
+										(e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey)
+									) {
+										return;
+									}
+									onThumbDown(e.pointerId);
+								},
+							}
+						: {
+								onMouseDown: (e: React.MouseEvent) => {
+									if (e.button !== 0 || e.altKey || e.ctrlKey || e.metaKey) {
+										return;
+									}
+									onThumbDown(undefined);
+								},
+								onTouchStart: (e: React.TouchEvent) => {
+									onThumbDown(e.changedTouches[0].identifier);
+								},
+							}),
+				},
+				focusWithinProps,
+				keyboardProps,
+				movePropsThumb,
+			);
+
+	let { focusProps: xInputFocusProps } = useFocus({
+		onFocus: () => {
+			setFocusedInput('x');
+		},
+	});
+
+	let { focusProps: yInputFocusProps } = useFocus({
+		onFocus: () => {
+			setFocusedInput('y');
+		},
+	});
+
+	const onInput = (e: NativeInputEvent) => {
+		const { currentTarget } = e;
+		setValueChangedViaInputEvent(true);
+		if (currentTarget === inputXRef.current) {
+			state.setXValue(parseFloat(currentTarget.value));
+		} else if (currentTarget === inputYRef.current) {
+			state.setYValue(parseFloat(currentTarget.value));
+		}
+	};
+
+	let isMobile = isIOS() || isAndroid();
+
+	let value = state.getDisplayColor();
+	const getAriaValueTextForChannel = useCallback(
+		(channel: ColorChannel) => {
+			const isAfterInput = valueChangedViaInputEvent || valueChangedViaKeyboard;
+			return `${
+				isAfterInput
+					? stringFormatter.format('colorNameAndValue', {
+							name: value.getChannelName(channel, locale),
+							value: value.formatChannelValue(channel, locale),
+						})
+					: [
+							stringFormatter.format('colorNameAndValue', {
+								name: value.getChannelName(channel, locale),
+								value: value.formatChannelValue(channel, locale),
+							}),
+							stringFormatter.format('colorNameAndValue', {
+								name: value.getChannelName(channel === yChannel ? xChannel : yChannel, locale),
+								value: value.formatChannelValue(channel === yChannel ? xChannel : yChannel, locale),
+							}),
+							stringFormatter.format('colorNameAndValue', {
+								name: value.getChannelName(zChannel, locale),
+								value: value.formatChannelValue(zChannel, locale),
+							}),
+						].join(', ')
+			}, ${value.getColorName(locale)}`;
+		},
+		[
+			locale,
+			value,
+			stringFormatter,
+			valueChangedViaInputEvent,
+			valueChangedViaKeyboard,
+			xChannel,
+			yChannel,
+			zChannel,
+		],
+	);
+
+	let colorPickerLabel = stringFormatter.format('colorPicker');
+
+	let xInputLabellingProps = useLabels({
+		...props,
+		'aria-label': ariaLabel
+			? stringFormatter.format('colorInputLabel', {
+					label: ariaLabel,
+					channelLabel: colorPickerLabel,
+				})
+			: colorPickerLabel,
+	});
+
+	let yInputLabellingProps = useLabels({
+		...props,
+		'aria-label': ariaLabel
+			? stringFormatter.format('colorInputLabel', {
+					label: ariaLabel,
+					channelLabel: colorPickerLabel,
+				})
+			: colorPickerLabel,
+	});
+
+	let colorAreaLabellingProps = useLabels(
+		{
+			...props,
+			'aria-label': ariaLabel ? `${ariaLabel}, ${colorPickerLabel}` : undefined,
+		},
+		isMobile ? colorPickerLabel : undefined,
+	);
+
+	let ariaRoleDescription = stringFormatter.format('twoDimensionalSlider');
+
+	let { visuallyHiddenProps } = useVisuallyHidden({
+		style: {
+			opacity: '0.0001',
+			width: '100%',
+			height: '100%',
+			pointerEvents: 'none',
+		},
+	});
+
+	let { colorAreaStyleProps, thumbStyleProps } = useColorAreaGradient({
+		direction,
+		state,
+		xChannel,
+		yChannel,
+		zChannel,
+	});
+
+	return {
+		colorAreaProps: {
+			...colorAreaLabellingProps,
+			...colorAreaInteractions,
+			...colorAreaStyleProps,
+			role: 'group',
+		},
+		thumbProps: {
+			...thumbInteractions,
+			...thumbStyleProps,
+			role: 'presentation',
+		},
+		xInputProps: {
+			...xInputLabellingProps,
+			...visuallyHiddenProps,
+			...xInputFocusProps,
+			type: 'range',
+			min: state.value.getChannelRange(xChannel).minValue,
+			max: state.value.getChannelRange(xChannel).maxValue,
+			step: xChannelStep,
+			'aria-roledescription': ariaRoleDescription,
+			'aria-valuetext': getAriaValueTextForChannel(xChannel),
+			'aria-orientation': 'horizontal',
+			'aria-describedby': props['aria-describedby'],
+			'aria-details': props['aria-details'],
+			disabled: isDisabled,
+			value: state.value.getChannelValue(xChannel),
+			name: xName,
+			form,
+			tabIndex: isMobile || !focusedInput || focusedInput === 'x' ? undefined : -1,
+			/*
+        So that only a single "2d slider" control shows up when listing form elements for screen readers,
+        add aria-hidden="true" to the unfocused control when the value has not changed via the keyboard,
+        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
+      */
+			'aria-hidden':
+				isMobile || !focusedInput || focusedInput === 'x' || valueChangedViaKeyboard
+					? undefined
+					: 'true',
+			// React's synthetic onChange for range inputs follows the native input event.
+			onInput,
+		},
+		yInputProps: {
+			...yInputLabellingProps,
+			...visuallyHiddenProps,
+			...yInputFocusProps,
+			type: 'range',
+			min: state.value.getChannelRange(yChannel).minValue,
+			max: state.value.getChannelRange(yChannel).maxValue,
+			step: yChannelStep,
+			'aria-roledescription': ariaRoleDescription,
+			'aria-valuetext': getAriaValueTextForChannel(yChannel),
+			'aria-orientation': 'vertical',
+			'aria-describedby': props['aria-describedby'],
+			'aria-details': props['aria-details'],
+			disabled: isDisabled,
+			value: state.value.getChannelValue(yChannel),
+			name: yName,
+			form,
+			tabIndex: isMobile || focusedInput === 'y' ? undefined : -1,
+			/*
+        So that only a single "2d slider" control shows up when listing form elements for screen readers,
+        add aria-hidden="true" to the unfocused input when the value has not changed via the keyboard,
+        but remove aria-hidden to reveal the input for each channel when the value has changed with the keyboard.
+      */
+			'aria-hidden':
+				isMobile || focusedInput === 'y' || valueChangedViaKeyboard ? undefined : 'true',
+			// React's synthetic onChange for range inputs follows the native input event.
+			onInput,
+		},
+	};
+}