@octanejs/aria 0.0.40 → 0.0.41

package/src/components/ColorArea.tsx

@@ -0,0 +1,120 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorArea.tsx).
+import { AriaColorAreaProps, useColorArea } from '../upstream-exports/react-aria/useColorArea';
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	dom,
+	Provider,
+	RenderProps,
+	SlotProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+import {
+	ColorAreaState,
+	useColorAreaState,
+} from '../upstream-exports/react-stately/useColorAreaState';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { InternalColorThumbContext } from './ColorThumb';
+import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
+import React, { createContext, ForwardedRef, forwardRef, useRef } from '../compat/react';
+
+export interface ColorAreaRenderProps {
+	/**
+	 * Whether the color area is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * State of the color area.
+	 */
+	state: ColorAreaState;
+}
+
+export interface ColorAreaProps
+	extends
+		AriaColorAreaProps,
+		RenderProps<ColorAreaRenderProps>,
+		SlotProps,
+		GlobalDOMAttributes<HTMLDivElement> {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-ColorArea'
+	 */
+	className?: ClassNameOrFunction<ColorAreaRenderProps>;
+}
+
+export const ColorAreaContext =
+	createContext<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>(null);
+export const ColorAreaStateContext = createContext<ColorAreaState | null>(null);
+
+/**
+ * A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a
+ * two-dimensional gradient background.
+ */
+export const ColorArea = forwardRef(function ColorArea(
+	props: ColorAreaProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	[props, ref] = useContextProps(props, ref, ColorAreaContext);
+	let inputXRef = useRef(null);
+	let inputYRef = useRef(null);
+
+	let state = useColorAreaState(props);
+	let { colorAreaProps, xInputProps, yInputProps, thumbProps } = useColorArea(
+		{
+			...props,
+			inputXRef,
+			inputYRef,
+			containerRef: ref,
+		},
+		state,
+	);
+
+	let renderProps = useRenderProps({
+		...props,
+		defaultClassName: 'react-aria-ColorArea',
+		defaultStyle: colorAreaProps.style,
+		values: {
+			state,
+			isDisabled: props.isDisabled || false,
+		},
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return (
+		<dom.div
+			ref={ref}
+			{...mergeProps(DOMProps, colorAreaProps, renderProps)}
+			slot={props.slot || undefined}
+			data-disabled={props.isDisabled || undefined}
+		>
+			<Provider
+				values={[
+					[ColorAreaStateContext, state],
+					[
+						InternalColorThumbContext,
+						{
+							state,
+							thumbProps,
+							inputXRef,
+							xInputProps,
+							inputYRef,
+							yInputProps,
+							isDisabled: props.isDisabled,
+						},
+					],
+				]}
+			>
+				{renderProps.children}
+			</Provider>
+		</dom.div>
+	);
+});

package/src/components/ColorField.tsx

@@ -0,0 +1,304 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorField.tsx).
+/*
+ * 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 {
+	AriaColorFieldProps,
+	useColorChannelField,
+	useColorField,
+} from '../upstream-exports/react-aria/useColorField';
+
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	dom,
+	Provider,
+	RACValidation,
+	removeDataAttributes,
+	RenderProps,
+	SlotProps,
+	useContextProps,
+	useRenderProps,
+	useSlot,
+} from './utils';
+import { ColorChannel, ColorSpace } from '../upstream-exports/react-stately/Color';
+import {
+	ColorFieldState,
+	useColorChannelFieldState,
+	useColorFieldState,
+} from '../upstream-exports/react-stately/useColorFieldState';
+import { FieldErrorContext } from './FieldError';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { GlobalDOMAttributes, InputDOMProps, ValidationResult } from '@react-types/shared';
+import { GroupContext } from './Group';
+import { InputContext } from './Input';
+import { LabelContext } from './Label';
+import React, {
+	createContext,
+	ForwardedRef,
+	forwardRef,
+	HTMLAttributes,
+	InputHTMLAttributes,
+	LabelHTMLAttributes,
+	Ref,
+	useRef,
+} from '../compat/react';
+import { TextContext } from './Text';
+import { useLocale } from '../upstream-exports/react-aria/I18nProvider';
+
+export interface ColorFieldRenderProps {
+	/**
+	 * Whether the color field is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * Whether the color field is invalid.
+	 *
+	 * @selector [data-invalid]
+	 */
+	isInvalid: boolean;
+	/**
+	 * Whether the color field is read only.
+	 *
+	 * @selector [data-readonly]
+	 */
+	isReadOnly: boolean;
+	/**
+	 * Whether the color field is required.
+	 *
+	 * @selector [data-required]
+	 */
+	isRequired: boolean;
+	/**
+	 * The color channel that this field edits, or "hex" if no `channel` prop is set.
+	 *
+	 * @selector [data-channel="hex | hue | saturation | ..."]
+	 */
+	channel: ColorChannel | 'hex';
+	/**
+	 * State of the color field.
+	 */
+	state: ColorFieldState;
+}
+
+export interface ColorFieldProps
+	extends
+		Omit<
+			AriaColorFieldProps,
+			| 'label'
+			| 'placeholder'
+			| 'description'
+			| 'errorMessage'
+			| 'validationState'
+			| 'validationBehavior'
+		>,
+		RACValidation,
+		InputDOMProps,
+		RenderProps<ColorFieldRenderProps>,
+		SlotProps,
+		GlobalDOMAttributes<HTMLDivElement> {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-ColorField'
+	 */
+	className?: ClassNameOrFunction<ColorFieldRenderProps>;
+	/**
+	 * The color channel that this field edits. If not provided,
+	 * the color is edited as a hex value.
+	 */
+	channel?: ColorChannel;
+	/**
+	 * The color space that the color field operates in if a `channel` prop is provided.
+	 * If no `channel` is provided, the color field always displays the color as an RGB hex value.
+	 */
+	colorSpace?: ColorSpace;
+}
+
+export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, HTMLDivElement>>(null);
+export const ColorFieldStateContext = createContext<ColorFieldState | null>(null);
+
+/**
+ * A color field allows users to edit a hex color or individual color channel value.
+ */
+export const ColorField = forwardRef(function ColorField(
+	props: ColorFieldProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	[props, ref] = useContextProps(props, ref, ColorFieldContext);
+	if (props.channel) {
+		return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;
+	} else {
+		return <HexColorField {...props} forwardedRef={ref} />;
+	}
+});
+
+interface ColorChannelFieldProps extends Omit<ColorFieldProps, 'channel'> {
+	channel: ColorChannel;
+	forwardedRef: ForwardedRef<HTMLDivElement>;
+}
+
+function ColorChannelField(props: ColorChannelFieldProps) {
+	let { locale } = useLocale();
+	let state = useColorChannelFieldState({
+		...props,
+		locale,
+	});
+
+	let inputRef = useRef<HTMLInputElement>(null);
+	let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
+	let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } =
+		useColorChannelField(
+			{
+				...removeDataAttributes(props),
+				label,
+				validationBehavior: props.validationBehavior ?? 'native',
+			},
+			state,
+			inputRef,
+		);
+
+	return (
+		<>
+			{useChildren(
+				props,
+				state,
+				props.forwardedRef,
+				inputProps,
+				inputRef,
+				labelProps,
+				labelRef,
+				descriptionProps,
+				errorMessageProps,
+				validation,
+			)}
+			{props.name && (
+				<input
+					type="hidden"
+					name={props.name}
+					form={props.form}
+					value={isNaN(state.numberValue) ? '' : state.numberValue}
+				/>
+			)}
+		</>
+	);
+}
+
+interface HexColorFieldProps extends ColorFieldProps {
+	forwardedRef: ForwardedRef<HTMLDivElement>;
+}
+
+function HexColorField(props: HexColorFieldProps) {
+	let state = useColorFieldState({
+		...props,
+		validationBehavior: props.validationBehavior ?? 'native',
+	});
+
+	let inputRef = useRef<HTMLInputElement>(null);
+	let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
+	let { labelProps, inputProps, descriptionProps, errorMessageProps, ...validation } =
+		useColorField(
+			{
+				...removeDataAttributes(props),
+				label,
+				validationBehavior: props.validationBehavior ?? 'native',
+			},
+			state,
+			inputRef,
+		);
+
+	return useChildren(
+		props,
+		state,
+		props.forwardedRef,
+		inputProps,
+		inputRef,
+		labelProps,
+		labelRef,
+		descriptionProps,
+		errorMessageProps,
+		validation,
+	);
+}
+
+function useChildren(
+	props: ColorFieldProps,
+	state: ColorFieldState,
+	ref: ForwardedRef<HTMLDivElement>,
+	inputProps: InputHTMLAttributes<HTMLElement>,
+	inputRef: Ref<HTMLInputElement>,
+	labelProps: LabelHTMLAttributes<HTMLLabelElement>,
+	labelRef: Ref<HTMLLabelElement>,
+	descriptionProps: HTMLAttributes<HTMLElement>,
+	errorMessageProps: HTMLAttributes<HTMLElement>,
+	validation: ValidationResult,
+) {
+	let renderProps = useRenderProps({
+		...props,
+		values: {
+			state,
+			channel: props.channel || 'hex',
+			isDisabled: props.isDisabled || false,
+			isInvalid: validation.isInvalid || false,
+			isReadOnly: props.isReadOnly || false,
+			isRequired: props.isRequired || false,
+		},
+		defaultClassName: 'react-aria-ColorField',
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return (
+		<Provider
+			values={[
+				[ColorFieldStateContext, state],
+				[InputContext, { ...inputProps, ref: inputRef }],
+				[LabelContext, { ...labelProps, ref: labelRef }],
+				[
+					GroupContext,
+					{
+						role: 'presentation',
+						isInvalid: validation.isInvalid,
+						isDisabled: props.isDisabled || false,
+					},
+				],
+				[
+					TextContext,
+					{
+						slots: {
+							description: descriptionProps,
+							errorMessage: errorMessageProps,
+						},
+					},
+				],
+				[FieldErrorContext, validation],
+			]}
+		>
+			<dom.div
+				{...DOMProps}
+				{...renderProps}
+				ref={ref}
+				slot={props.slot || undefined}
+				data-channel={props.channel || 'hex'}
+				data-disabled={props.isDisabled || undefined}
+				data-invalid={validation.isInvalid || undefined}
+				data-readonly={props.isReadOnly || undefined}
+				data-required={props.isRequired || undefined}
+			/>
+		</Provider>
+	);
+}

package/src/components/ColorPicker.tsx

@@ -0,0 +1,86 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorPicker.tsx).
+/*
+ * 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 {
+	ChildrenOrFunction,
+	Provider,
+	SlotProps,
+	SlottedContextValue,
+	useRenderProps,
+	useSlottedContext,
+} from './utils';
+import { Color } from '../upstream-exports/react-stately/Color';
+
+import { ColorAreaContext } from './ColorArea';
+
+import { ColorFieldContext } from './ColorField';
+import {
+	ColorPickerState,
+	ColorPickerProps as StatelyColorPickerProps,
+	useColorPickerState,
+} from '../upstream-exports/react-stately/useColorPickerState';
+import { ColorSliderContext } from './ColorSlider';
+import { ColorSwatchContext } from './ColorSwatch';
+import { ColorSwatchPickerContext } from './ColorSwatchPicker';
+import { ColorWheelContext } from './ColorWheel';
+import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
+import React, { createContext, JSX } from '../compat/react';
+
+export interface ColorPickerRenderProps {
+	/** The currently selected color. */
+	color: Color;
+}
+
+export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps {
+	/**
+	 * The children of the component. A function may be provided to alter the children based on
+	 * component state.
+	 */
+	children: ChildrenOrFunction<ColorPickerRenderProps>;
+}
+
+export const ColorPickerContext = createContext<SlottedContextValue<ColorPickerProps>>(null);
+export const ColorPickerStateContext = createContext<ColorPickerState | null>(null);
+
+/**
+ * A ColorPicker synchronizes a color value between multiple React Aria color components.
+ * It simplifies building color pickers with customizable layouts via composition.
+ */
+export function ColorPicker(props: ColorPickerProps): JSX.Element {
+	let ctx = useSlottedContext(ColorPickerContext, props.slot);
+	props = mergeProps(ctx, props);
+	let state = useColorPickerState(props);
+	let renderProps = useRenderProps({
+		...props,
+		values: {
+			color: state.color,
+		},
+	});
+
+	return (
+		<Provider
+			values={[
+				[ColorPickerStateContext, state],
+				[ColorSliderContext, { value: state.color, onChange: state.setColor }],
+				[ColorAreaContext, { value: state.color, onChange: state.setColor }],
+				[ColorWheelContext, { value: state.color, onChange: state.setColor }],
+				[ColorFieldContext, { value: state.color, onChange: state.setColor }],
+				[ColorSwatchContext, { color: state.color }],
+				[ColorSwatchPickerContext, { value: state.color, onChange: state.setColor }],
+			]}
+		>
+			{renderProps.children}
+		</Provider>
+	);
+}

package/src/components/ColorSlider.tsx

@@ -0,0 +1,144 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorSlider.tsx).
+import { useRef } from 'octane';
+import {
+	AriaColorSliderProps,
+	useColorSlider,
+} from '../upstream-exports/react-aria/useColorSlider';
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	dom,
+	Provider,
+	RenderProps,
+	SlotProps,
+	useContextProps,
+	useRenderProps,
+	useSlot,
+} from './utils';
+import {
+	ColorSliderState,
+	useColorSliderState,
+} from '../upstream-exports/react-stately/useColorSliderState';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { InternalColorThumbContext } from './ColorThumb';
+import { LabelContext } from './Label';
+import { Orientation } from '@react-types/shared';
+import React, { createContext, ForwardedRef, forwardRef } from '../compat/react';
+import { SliderOutputContext, SliderStateContext, SliderTrackContext } from './Slider';
+import { useLocale } from '../upstream-exports/react-aria/I18nProvider';
+
+export interface ColorSliderRenderProps {
+	/**
+	 * The orientation of the color slider.
+	 *
+	 * @selector [data-orientation="horizontal | vertical"]
+	 */
+	orientation: Orientation;
+	/**
+	 * Whether the color slider is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * State of the color slider.
+	 */
+	state: ColorSliderState;
+}
+
+export interface ColorSliderProps
+	extends
+		Omit<AriaColorSliderProps, 'label'>,
+		RenderProps<ColorSliderRenderProps>,
+		SlotProps,
+		GlobalDOMAttributes<HTMLDivElement> {
+	/**
+	 * The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the
+	 * element. A function may be provided to compute the class based on component state.
+	 *
+	 * @default 'react-aria-ColorSlider'
+	 */
+	className?: ClassNameOrFunction<ColorSliderRenderProps>;
+}
+
+export const ColorSliderContext =
+	createContext<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>(null);
+export const ColorSliderStateContext = createContext<ColorSliderState | null>(null);
+
+/**
+ * A color slider allows users to adjust an individual channel of a color value.
+ */
+export const ColorSlider = forwardRef(function ColorSlider(
+	props: ColorSliderProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	[props, ref] = useContextProps(props, ref, ColorSliderContext);
+	let { locale } = useLocale();
+	let state = useColorSliderState({ ...props, locale });
+	let trackRef = useRef(null);
+	let inputRef = useRef(null);
+
+	let [labelRef, label] = useSlot(!props['aria-label'] && !props['aria-labelledby']);
+	let { trackProps, thumbProps, inputProps, labelProps, outputProps } = useColorSlider(
+		{
+			...props,
+			label,
+			trackRef,
+			inputRef,
+		},
+		state,
+	);
+
+	let renderProps = useRenderProps({
+		...props,
+		values: {
+			orientation: state.orientation,
+			isDisabled: state.isDisabled,
+			state,
+		},
+		defaultClassName: 'react-aria-ColorSlider',
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return (
+		<Provider
+			values={[
+				[ColorSliderStateContext, state],
+				[SliderStateContext, state],
+				[SliderTrackContext, { ...trackProps, ref: trackRef }],
+				[SliderOutputContext, outputProps],
+				[
+					LabelContext,
+					{
+						...labelProps,
+						ref: labelRef,
+						children: state.value.getChannelName(props.channel, locale),
+					},
+				],
+				[
+					InternalColorThumbContext,
+					{
+						state,
+						thumbProps,
+						inputXRef: inputRef,
+						xInputProps: inputProps,
+						isDisabled: props.isDisabled,
+					},
+				],
+			]}
+		>
+			<dom.div
+				{...DOMProps}
+				{...renderProps}
+				ref={ref}
+				slot={props.slot || undefined}
+				data-orientation={state.orientation}
+				data-disabled={state.isDisabled || undefined}
+			/>
+		</Provider>
+	);
+});