@octanejs/aria 0.0.39 → 0.0.41

package/src/color/useColorAreaGradient.tsx

@@ -0,0 +1,157 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/color/useColorAreaGradient.ts).
+/*
+ * Copyright 2022 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 { Color, ColorChannel } from '../upstream-exports/react-stately/Color';
+
+import { ColorAreaState } from '../upstream-exports/react-stately/useColorAreaState';
+import { CSSProperties, useMemo } from '../compat/react';
+import { parseColor } from '../upstream-exports/react-stately/Color';
+
+const hue = (color: Color) =>
+	[0, 60, 120, 180, 240, 300, 360]
+		.map((hue) => color.withChannelValue('hue', hue).toString('css'))
+		.join(', ');
+const saturation = (color: Color) => `${color.withChannelValue('saturation', 0)}, transparent`;
+
+const hslChannels = {
+	hue,
+	saturation,
+	lightness: () => 'black, transparent, white',
+};
+
+const hsbChannels = {
+	hue,
+	saturation,
+	brightness: () => 'black, transparent',
+};
+
+interface Gradients {
+	colorAreaStyleProps: {
+		style: CSSProperties;
+	};
+	thumbStyleProps: {
+		style: CSSProperties;
+	};
+}
+
+interface ColorAreaGradientProps {
+	direction: 'ltr' | 'rtl';
+	state: ColorAreaState;
+	zChannel: ColorChannel;
+	xChannel: ColorChannel;
+	yChannel: ColorChannel;
+}
+
+export function useColorAreaGradient({
+	direction,
+	state,
+	zChannel,
+	xChannel,
+	yChannel,
+}: ColorAreaGradientProps): Gradients {
+	let returnVal = useMemo<Gradients>(() => {
+		let end = direction === 'rtl' ? 'left' : 'right';
+		let colorAreaStyles = {};
+		let zValue = state.value.getChannelValue(zChannel);
+
+		switch (state.value.getColorSpace()) {
+			case 'rgb': {
+				let rgb = parseColor('rgb(0, 0, 0)');
+				colorAreaStyles = {
+					background: [
+						// The screen blend mode multiplies the inverse of each channel, e.g. 1 - (1 - a) * (1 - b).
+						// Create a layer for each channel, with the other channels as 0. After blending, this should
+						// result in the gradients being combined channel by channel.
+						`linear-gradient(to ${end}, ${rgb.withChannelValue(xChannel, 0)}, ${rgb.withChannelValue(xChannel, 255)})`,
+						`linear-gradient(to top, ${rgb.withChannelValue(yChannel, 0)}, ${rgb.withChannelValue(yChannel, 255)})`,
+						rgb.withChannelValue(zChannel, zValue),
+					].join(','),
+					backgroundBlendMode: 'screen',
+				};
+				break;
+			}
+			case 'hsl': {
+				let channels = state.value.getColorChannels();
+				let value = parseColor('hsl(0, 100%, 50%)').withChannelValue(zChannel, zValue);
+
+				let bg = channels
+					.filter((c) => c !== zChannel)
+					.map(
+						(c) =>
+							`linear-gradient(to ${c === xChannel ? end : 'top'}, ${(hslChannels as Record<string, (color: Color) => string>)[c](value)})`,
+					)
+					.reverse();
+				if (zChannel === 'hue') {
+					bg.push(value.toString('css'));
+				}
+
+				colorAreaStyles = {
+					background: bg.join(', '),
+				};
+				break;
+			}
+			case 'hsb': {
+				let channels = state.value.getColorChannels();
+				let value = parseColor('hsb(0, 100%, 100%)').withChannelValue(zChannel, zValue);
+
+				let bg = channels
+					.filter((c) => c !== zChannel)
+					.map(
+						(c) =>
+							`linear-gradient(to ${c === xChannel ? end : 'top'}, ${(hsbChannels as Record<string, (color: Color) => string>)[c](value)})`,
+					)
+					.reverse();
+				if (zChannel === 'hue') {
+					bg.push(value.toString('css'));
+				}
+
+				colorAreaStyles = {
+					background: bg.join(', '),
+				};
+				break;
+			}
+		}
+
+		let { x, y } = state.getThumbPosition();
+
+		if (direction === 'rtl') {
+			x = 1 - x;
+		}
+
+		let forcedColorAdjustNoneStyle = { forcedColorAdjust: 'none' };
+
+		return {
+			colorAreaStyleProps: {
+				style: {
+					position: 'relative',
+					touchAction: 'none',
+					...forcedColorAdjustNoneStyle,
+					...colorAreaStyles,
+				},
+			},
+			thumbStyleProps: {
+				style: {
+					position: 'absolute',
+					left: `${x * 100}%`,
+					top: `${y * 100}%`,
+					transform: 'translate(-50%, -50%)',
+					touchAction: 'none',
+					...forcedColorAdjustNoneStyle,
+				},
+			},
+		};
+	}, [direction, state, zChannel, xChannel, yChannel]);
+
+	return returnVal;
+}

package/src/color/useColorChannelField.tsx

@@ -0,0 +1,53 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/color/useColorChannelField.ts).
+/*
+ * 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, RefObject } from '@react-types/shared';
+import {
+	ColorChannelFieldProps,
+	ColorChannelFieldState,
+} from '../upstream-exports/react-stately/useColorFieldState';
+import { NumberFieldAria, useNumberField } from '../numberfield/useNumberField';
+import { useLocale } from '../i18n/I18nProvider';
+
+export interface AriaColorChannelFieldProps extends ColorChannelFieldProps, AriaLabelingProps {}
+export interface ColorChannelFieldAria extends NumberFieldAria {}
+
+/**
+ * Provides the behavior and accessibility implementation for a color channel field, allowing users
+ * to edit the value of an individual color channel.
+ */
+export function useColorChannelField(
+	props: AriaColorChannelFieldProps,
+	state: ColorChannelFieldState,
+	inputRef: RefObject<HTMLInputElement | null>,
+): ColorChannelFieldAria {
+	let { locale } = useLocale();
+	return useNumberField(
+		{
+			...props,
+			value: undefined,
+			defaultValue: undefined,
+			onChange: undefined,
+			validate: undefined,
+			// Provide a default aria-label if no other label is provided.
+			'aria-label':
+				props['aria-label'] ||
+				(props.label || props['aria-labelledby']
+					? undefined
+					: state.colorValue.getChannelName(props.channel, locale)),
+		} as any,
+		state,
+		inputRef,
+	);
+}

package/src/color/useColorField.tsx

@@ -0,0 +1,170 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/color/useColorField.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,
+	AriaValidationProps,
+	DOMAttributes,
+	FocusableDOMProps,
+	ScrollEvent,
+	TextInputDOMProps,
+	ValidationResult,
+} from '@react-types/shared';
+import {
+	ColorFieldProps,
+	ColorFieldState,
+} from '../upstream-exports/react-stately/useColorFieldState';
+import {
+	InputHTMLAttributes,
+	LabelHTMLAttributes,
+	RefObject,
+	useCallback,
+	useState,
+} from '../compat/react';
+import { mergeProps } from '../utils/mergeProps';
+import { privateValidationStateProp } from '../upstream-exports/react-stately/private/form/useFormValidationState';
+import { useFocusWithin } from '../interactions/useFocusWithin';
+import { useFormattedTextField } from '../textfield/useFormattedTextField';
+import { useFormReset } from '../utils/useFormReset';
+import { useId } from '../utils/useId';
+import { useScrollWheel } from '../interactions/useScrollWheel';
+import { useSpinButton } from '../spinbutton/useSpinButton';
+
+export interface AriaColorFieldProps
+	extends
+		ColorFieldProps,
+		AriaLabelingProps,
+		FocusableDOMProps,
+		Omit<
+			TextInputDOMProps,
+			| 'minLength'
+			| 'maxLength'
+			| 'pattern'
+			| 'type'
+			| 'inputMode'
+			| 'autoComplete'
+			| 'autoCorrect'
+			| 'spellCheck'
+		>,
+		AriaValidationProps {
+	/** Enables or disables changing the value with scroll. */
+	isWheelDisabled?: boolean;
+}
+
+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: ScrollEvent) => {
+			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: string) => {
+		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,
+		} as any,
+		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/color/useColorSlider.tsx

@@ -0,0 +1,177 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/color/useColorSlider.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,
+	InputDOMProps,
+	RefObject,
+} from '@react-types/shared';
+import {
+	ColorSliderProps,
+	ColorSliderState,
+} from '../upstream-exports/react-stately/useColorSliderState';
+import { InputHTMLAttributes } from '../compat/react';
+import { mergeProps } from '../utils/mergeProps';
+import { useLocale } from '../i18n/I18nProvider';
+import { useSlider } from '../slider/useSlider';
+import { useSliderThumb } from '../slider/useSliderThumb';
+import { useVisuallyHidden } from '../visually-hidden/VisuallyHidden';
+
+export interface AriaColorSliderProps
+	extends ColorSliderProps, InputDOMProps, DOMProps, AriaLabelingProps {}
+
+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);
+	}
+
+	let { groupProps, trackProps, labelProps, outputProps } = useSlider(
+		// @ts-ignore - ignore unused incompatible props
+		{ ...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/color/useColorSwatch.tsx

@@ -0,0 +1,83 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/color/useColorSwatch.ts).
+/*
+ * 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 '../upstream-exports/react-stately/Color';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { HTMLAttributes, useMemo } from '../compat/react';
+import intlMessages from '../intl/color/index';
+import { parseColor } from '../upstream-exports/react-stately/Color';
+import { useId } from '../utils/useId';
+import { useLocale } from '../i18n/I18nProvider';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+
+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,
+	};
+}