@octanejs/aria 0.0.40 → 0.0.42

package/src/components/ColorSwatch.tsx

@@ -0,0 +1,72 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorSwatch.tsx).
+import {
+	AriaColorSwatchProps,
+	useColorSwatch,
+} from '../upstream-exports/react-aria/useColorSwatch';
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	dom,
+	SlotProps,
+	StyleRenderProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+import { Color } from '../upstream-exports/react-stately/Color';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
+import React, { createContext, ForwardedRef, forwardRef } from '../compat/react';
+
+export interface ColorSwatchRenderProps {
+	/** The color of the swatch. */
+	color: Color;
+}
+
+export interface ColorSwatchProps
+	extends
+		AriaColorSwatchProps,
+		StyleRenderProps<ColorSwatchRenderProps>,
+		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-ColorSwatch'
+	 */
+	className?: ClassNameOrFunction<ColorSwatchRenderProps>;
+}
+
+export const ColorSwatchContext =
+	createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);
+
+/**
+ * A ColorSwatch displays a preview of a selected color.
+ */
+export const ColorSwatch = forwardRef(function ColorSwatch(
+	props: ColorSwatchProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	[props, ref] = useContextProps(props, ref, ColorSwatchContext);
+	let { colorSwatchProps, color } = useColorSwatch(props);
+	let renderProps = useRenderProps({
+		...props,
+		defaultClassName: 'react-aria-ColorSwatch',
+		defaultStyle: colorSwatchProps.style,
+		values: {
+			color,
+		},
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+
+	return (
+		<dom.div
+			{...mergeProps(DOMProps, colorSwatchProps, renderProps)}
+			slot={props.slot || undefined}
+			ref={ref}
+		/>
+	);
+});

package/src/components/ColorSwatchPicker.tsx

@@ -0,0 +1,176 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorSwatchPicker.tsx).
+import { isChildrenBlock } from 'octane';
+import {
+	AriaLabelingProps,
+	GlobalDOMAttributes,
+	HoverEvents,
+	PressEvents,
+	ValueBase,
+} from '@react-types/shared';
+import {
+	ClassNameOrFunction,
+	composeRenderProps,
+	ContextValue,
+	RenderProps,
+	StyleRenderProps,
+	useContextProps,
+} from './utils';
+import { Color } from '../upstream-exports/react-stately/Color';
+import { ColorSwatchContext } from './ColorSwatch';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import intlMessages from '../intl/react-aria-components/index';
+import { ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps } from './ListBox';
+import { parseColor } from '../upstream-exports/react-stately/Color';
+import React, {
+	createContext,
+	ForwardedRef,
+	forwardRef,
+	ReactNode,
+	useContext,
+	useEffect,
+	useMemo,
+} from '../compat/react';
+import { useColorPickerState } from '../upstream-exports/react-stately/useColorPickerState';
+import { useLocale } from '../upstream-exports/react-aria/I18nProvider';
+import { useLocalizedStringFormatter } from '../upstream-exports/react-aria/useLocalizedStringFormatter';
+
+export interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}
+export interface ColorSwatchPickerProps
+	extends
+		ValueBase<string | Color, Color>,
+		AriaLabelingProps,
+		StyleRenderProps<ColorSwatchPickerRenderProps>,
+		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-ColorSwatchPicker'
+	 */
+	className?: ClassNameOrFunction<ColorSwatchPickerRenderProps>;
+	/** The children of the ColorSwatchPicker. */
+	children?: ReactNode;
+	/**
+	 * Whether the items are arranged in a stack or grid.
+	 *
+	 * @default 'grid'
+	 */
+	layout?: 'grid' | 'stack';
+}
+
+export const ColorSwatchPickerContext =
+	createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);
+const ColorMapContext = createContext<Map<string, Color> | null>(null);
+
+/**
+ * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
+ */
+export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(
+	props: ColorSwatchPickerProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	[props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);
+	let state = useColorPickerState(props);
+	let colorMap = useMemo(() => new Map(), []);
+	let formatter = useLocalizedStringFormatter(intlMessages, 'react-aria-components');
+
+	return (
+		<ListBox
+			{...filterDOMProps(props, { labelable: true })}
+			ref={ref}
+			className={props.className || 'react-aria-ColorSwatchPicker'}
+			style={props.style}
+			aria-label={
+				props['aria-label'] ||
+				(!props['aria-labelledby'] ? formatter.format('colorSwatchPicker') : undefined)
+			}
+			layout={props.layout || 'grid'}
+			selectionMode="single"
+			selectedKeys={[state.color.toString('hexa')]}
+			onSelectionChange={(keys) => {
+				// single select, 'all' cannot occur. appease typescript.
+				if (keys !== 'all') {
+					state.setColor(colorMap.get([...keys][0]));
+				}
+			}}
+			disallowEmptySelection
+		>
+			<ColorMapContext.Provider value={colorMap}>{props.children}</ColorMapContext.Provider>
+		</ListBox>
+	);
+});
+
+export interface ColorSwatchPickerItemRenderProps extends Omit<
+	ListBoxItemRenderProps,
+	'selectionMode' | 'selectionBehavior'
+> {
+	/** The color of the swatch. */
+	color: Color;
+}
+
+export interface ColorSwatchPickerItemProps
+	extends
+		RenderProps<ColorSwatchPickerItemRenderProps>,
+		HoverEvents,
+		PressEvents,
+		Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
+	/**
+	 * 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-ColorSwatchPickerItem'
+	 */
+	className?: ClassNameOrFunction<ColorSwatchPickerItemRenderProps>;
+	/** The color of the swatch. */
+	color: string | Color;
+	/** Whether the color swatch is disabled. */
+	isDisabled?: boolean;
+}
+
+export const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(
+	props: ColorSwatchPickerItemProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	let propColor = props.color || '#0000';
+	let color = useMemo(
+		() => (typeof propColor === 'string' ? parseColor(propColor) : propColor),
+		[propColor],
+	);
+	let { locale } = useLocale();
+	let map = useContext(ColorMapContext)!;
+	useEffect(() => {
+		let key = color.toString('hexa');
+		map.set(key, color);
+		return () => {
+			map.delete(key);
+		};
+	}, [color, map]);
+
+	let wrap = (v: any) => {
+		// A `.tsrx` `@{ … }` body compiles children to a tagged BLOCK function,
+		// which is not a render prop. Wrapping it would strip the block tag and
+		// cause composeRenderProps to invoke it with render values.
+		if (typeof v === 'function' && !isChildrenBlock(v)) {
+			return (renderProps: any) => v({ ...renderProps, color });
+		}
+		return v;
+	};
+
+	return (
+		<ListBoxItem
+			{...props}
+			// ColorSwatchPickerItem is never a link.
+			render={props.render as any}
+			ref={ref}
+			id={color.toString('hexa')}
+			textValue={color.getColorName(locale)}
+			className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}
+			style={wrap(props.style)}
+		>
+			{composeRenderProps(wrap(props.children), (children) => (
+				<ColorSwatchContext.Provider value={{ color }}>{children}</ColorSwatchContext.Provider>
+			))}
+		</ListBoxItem>
+	);
+});

package/src/components/ColorThumb.tsx

@@ -0,0 +1,140 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorThumb.tsx).
+import { ClassNameOrFunction, dom, RenderProps, useRenderProps } from './utils';
+import { Color } from '../upstream-exports/react-stately/Color';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { GlobalDOMAttributes, HoverEvents, RefObject } from '@react-types/shared';
+import { mergeProps } from '../upstream-exports/react-aria/mergeProps';
+import React, {
+	createContext,
+	ForwardedRef,
+	forwardRef,
+	HTMLAttributes,
+	InputHTMLAttributes,
+	useContext,
+} from '../compat/react';
+import { useFocusRing } from '../upstream-exports/react-aria/useFocusRing';
+import { useHover } from '../upstream-exports/react-aria/useHover';
+
+interface ColorState {
+	getDisplayColor(): Color;
+	isDragging: boolean;
+}
+
+interface InternalColorThumbContextValue {
+	state: ColorState;
+	thumbProps: HTMLAttributes<HTMLElement>;
+	inputXRef: RefObject<HTMLInputElement | null>;
+	inputYRef?: RefObject<HTMLInputElement | null>;
+	xInputProps: InputHTMLAttributes<HTMLInputElement>;
+	yInputProps?: InputHTMLAttributes<HTMLInputElement>;
+	isDisabled?: boolean;
+}
+
+export const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);
+
+export interface ColorThumbRenderProps {
+	/**
+	 * The selected color, excluding the alpha channel.
+	 */
+	color: Color;
+	/**
+	 * Whether this thumb is currently being dragged.
+	 *
+	 * @selector [data-dragging]
+	 */
+	isDragging: boolean;
+	/**
+	 * Whether the thumb is currently hovered with a mouse.
+	 *
+	 * @selector [data-hovered]
+	 */
+	isHovered: boolean;
+	/**
+	 * Whether the thumb is currently focused.
+	 *
+	 * @selector [data-focused]
+	 */
+	isFocused: boolean;
+	/**
+	 * Whether the thumb is keyboard focused.
+	 *
+	 * @selector [data-focus-visible]
+	 */
+	isFocusVisible: boolean;
+	/**
+	 * Whether the thumb is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+}
+
+export interface ColorThumbProps
+	extends HoverEvents, RenderProps<ColorThumbRenderProps>, 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-ColorThumb'
+	 */
+	className?: ClassNameOrFunction<ColorThumbRenderProps>;
+}
+
+/**
+ * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to
+ * adjust the color value.
+ */
+export const ColorThumb = forwardRef(function ColorThumb(
+	props: ColorThumbProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	let {
+		state,
+		thumbProps,
+		inputXRef,
+		inputYRef,
+		xInputProps,
+		yInputProps,
+		isDisabled = false,
+	} = useContext(InternalColorThumbContext)!;
+	let { focusProps, isFocused, isFocusVisible } = useFocusRing();
+	let { hoverProps, isHovered } = useHover(props);
+
+	let renderProps = useRenderProps({
+		...props,
+		defaultClassName: 'react-aria-ColorThumb',
+		defaultStyle: {
+			...thumbProps.style,
+			backgroundColor: state.getDisplayColor().toString(),
+		},
+		values: {
+			color: state.getDisplayColor(),
+			isHovered,
+			isDragging: state.isDragging,
+			isFocused,
+			isFocusVisible,
+			isDisabled,
+		},
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return (
+		<dom.div
+			{...mergeProps(thumbProps, hoverProps, DOMProps)}
+			{...renderProps}
+			ref={ref}
+			data-hovered={isHovered || undefined}
+			data-dragging={state.isDragging || undefined}
+			data-focused={isFocused || undefined}
+			data-focus-visible={isFocusVisible || undefined}
+			data-disabled={isDisabled || undefined}
+		>
+			<input ref={inputXRef} {...xInputProps} {...focusProps} />
+			{yInputProps && <input ref={inputYRef} {...yInputProps} {...focusProps} />}
+			{renderProps.children}
+		</dom.div>
+	);
+});

package/src/components/ColorWheel.tsx

@@ -0,0 +1,163 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/ColorWheel.tsx).
+import { AriaColorWheelOptions, useColorWheel } from '../upstream-exports/react-aria/useColorWheel';
+import {
+	ClassNameOrFunction,
+	ContextValue,
+	dom,
+	Provider,
+	RenderProps,
+	SlotProps,
+	StyleRenderProps,
+	useContextProps,
+	useRenderProps,
+} from './utils';
+import {
+	ColorWheelState,
+	useColorWheelState,
+} from '../upstream-exports/react-stately/useColorWheelState';
+import { filterDOMProps } from '../upstream-exports/react-aria/filterDOMProps';
+import { GlobalDOMAttributes } from '@react-types/shared';
+import { InternalColorThumbContext } from './ColorThumb';
+import React, {
+	createContext,
+	ForwardedRef,
+	forwardRef,
+	HTMLAttributes,
+	useContext,
+	useRef,
+} from '../compat/react';
+
+export interface ColorWheelRenderProps {
+	/**
+	 * Whether the color wheel is disabled.
+	 *
+	 * @selector [data-disabled]
+	 */
+	isDisabled: boolean;
+	/**
+	 * State of the color wheel.
+	 */
+	state: ColorWheelState;
+}
+
+export interface ColorWheelProps
+	extends
+		AriaColorWheelOptions,
+		RenderProps<ColorWheelRenderProps>,
+		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-ColorWheel'
+	 */
+	className?: ClassNameOrFunction<ColorWheelRenderProps>;
+}
+
+export const ColorWheelContext =
+	createContext<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>(null);
+export const ColorWheelStateContext = createContext<ColorWheelState | null>(null);
+
+/**
+ * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
+ */
+export const ColorWheel = forwardRef(function ColorWheel(
+	props: ColorWheelProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	[props, ref] = useContextProps(props, ref, ColorWheelContext);
+	let state = useColorWheelState(props);
+	let inputRef = useRef(null);
+	let { trackProps, inputProps, thumbProps } = useColorWheel(props, state, inputRef);
+
+	let renderProps = useRenderProps({
+		...props,
+		values: {
+			state,
+			isDisabled: props.isDisabled || false,
+		},
+		defaultClassName: 'react-aria-ColorWheel',
+		defaultStyle: {
+			position: 'relative',
+		},
+	});
+
+	let DOMProps = filterDOMProps(props, { global: true });
+	delete DOMProps.id;
+
+	return (
+		<dom.div
+			{...DOMProps}
+			{...renderProps}
+			ref={ref}
+			slot={props.slot || undefined}
+			data-disabled={props.isDisabled || undefined}
+		>
+			<Provider
+				values={[
+					[ColorWheelStateContext, state],
+					[ColorWheelTrackContext, trackProps],
+					[
+						InternalColorThumbContext,
+						{
+							state,
+							thumbProps,
+							inputXRef: inputRef,
+							xInputProps: inputProps,
+							isDisabled: props.isDisabled,
+						},
+					],
+				]}
+			>
+				{renderProps.children}
+			</Provider>
+		</dom.div>
+	);
+});
+
+export interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}
+export interface ColorWheelTrackProps
+	extends StyleRenderProps<ColorWheelTrackRenderProps>, 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-ColorWheelTrack'
+	 */
+	className?: ClassNameOrFunction<ColorWheelTrackRenderProps>;
+}
+interface ColorWheelTrackContextValue
+	extends
+		Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>,
+		StyleRenderProps<ColorWheelTrackRenderProps> {}
+
+export const ColorWheelTrackContext =
+	createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);
+
+/**
+ * A color wheel track renders a circular gradient track.
+ */
+export const ColorWheelTrack = forwardRef(function ColorWheelTrack(
+	props: ColorWheelTrackProps,
+	ref: ForwardedRef<HTMLDivElement>,
+) {
+	[props, ref] = useContextProps(props, ref, ColorWheelTrackContext);
+	let state = useContext(ColorWheelStateContext)!;
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	let { className, style, ...rest } = props;
+
+	let renderProps = useRenderProps({
+		...props,
+		defaultClassName: 'react-aria-ColorWheelTrack',
+		values: {
+			isDisabled: state.isDisabled,
+			state,
+		},
+	});
+
+	return (
+		<dom.div {...rest} {...renderProps} ref={ref} data-disabled={state.isDisabled || undefined} />
+	);
+});