@octanejs/aria 0.0.40 → 0.0.42

package/src/components/useDragAndDrop.tsx

@@ -0,0 +1,221 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria-components/src/useDragAndDrop.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 {
+	DropIndicatorProps as AriaDropIndicatorProps,
+	DropIndicatorAria,
+	DroppableCollectionOptions,
+	DroppableCollectionResult,
+	DroppableItemOptions,
+	DroppableItemResult,
+	useDropIndicator,
+	useDroppableCollection,
+	useDroppableItem,
+} from '../upstream-exports/react-aria/useDroppableCollection';
+import {
+	DraggableCollectionOptions,
+	DraggableItemProps,
+	DraggableItemResult,
+	DragPreview,
+	useDraggableCollection,
+	useDraggableItem,
+} from '../upstream-exports/react-aria/useDraggableCollection';
+import {
+	DraggableCollectionProps,
+	DroppableCollectionProps,
+	Key,
+	RefObject,
+} from '@react-types/shared';
+import {
+	DraggableCollectionState,
+	DraggableCollectionStateOptions,
+	useDraggableCollectionState,
+} from '../upstream-exports/react-stately/useDraggableCollectionState';
+import { DragItem, DropTarget, DropTargetDelegate } from '@react-types/shared';
+import {
+	DroppableCollectionState,
+	DroppableCollectionStateOptions,
+	useDroppableCollectionState,
+} from '../upstream-exports/react-stately/useDroppableCollectionState';
+import { isVirtualDragging } from '../upstream-exports/react-aria/private/dnd/DragManager';
+import { JSX, useMemo } from '../compat/react';
+import { ListDropTargetDelegate } from '../upstream-exports/react-aria/ListDropTargetDelegate';
+
+// Compatibility exports consumed by the existing collection component ports.
+export type {
+	AriaDropIndicatorProps,
+	DropIndicatorAria,
+	DraggableCollectionState,
+	DraggableItemResult,
+	DroppableCollectionResult,
+	DroppableCollectionState,
+	DroppableItemResult,
+};
+
+export { DropIndicator, DropIndicatorContext, DragAndDropContext } from './DragAndDrop';
+export type { DropIndicatorProps, DropIndicatorRenderProps } from './DragAndDrop';
+
+interface DraggableCollectionStateOpts<T = object> extends Omit<
+	DraggableCollectionStateOptions<T>,
+	'getItems'
+> {}
+
+interface DragHooks<T = object> {
+	useDraggableCollectionState?: (
+		props: DraggableCollectionStateOpts<T>,
+	) => DraggableCollectionState;
+	useDraggableCollection?: (
+		props: DraggableCollectionOptions,
+		state: DraggableCollectionState,
+		ref: RefObject<HTMLElement | null>,
+	) => void;
+	useDraggableItem?: (
+		props: DraggableItemProps,
+		state: DraggableCollectionState,
+	) => DraggableItemResult;
+	DragPreview?: typeof DragPreview;
+	renderDragPreview?: (
+		items: DragItem[],
+	) => JSX.Element | { element: JSX.Element; x: number; y: number };
+	isVirtualDragging?: () => boolean;
+}
+
+interface DropHooks {
+	useDroppableCollectionState?: (
+		props: DroppableCollectionStateOptions,
+	) => DroppableCollectionState;
+	useDroppableCollection?: (
+		props: DroppableCollectionOptions,
+		state: DroppableCollectionState,
+		ref: RefObject<HTMLElement | null>,
+	) => DroppableCollectionResult;
+	useDroppableItem?: (
+		options: DroppableItemOptions,
+		state: DroppableCollectionState,
+		ref: RefObject<HTMLElement | null>,
+	) => DroppableItemResult;
+	useDropIndicator?: (
+		props: AriaDropIndicatorProps,
+		state: DroppableCollectionState,
+		ref: RefObject<HTMLElement | null>,
+	) => DropIndicatorAria;
+	renderDropIndicator?: (target: DropTarget) => JSX.Element;
+	dropTargetDelegate?: DropTargetDelegate;
+	ListDropTargetDelegate: typeof ListDropTargetDelegate;
+}
+
+export type DragAndDropHooks<T = object> = DragHooks<T> & DropHooks;
+
+export interface DragAndDrop<T = object> {
+	/** Drag and drop hooks for the collection element. */
+	dragAndDropHooks: DragAndDropHooks<T>;
+}
+
+export interface DragAndDropOptions<T = object>
+	extends Omit<DraggableCollectionProps, 'preview' | 'getItems'>, DroppableCollectionProps {
+	/**
+	 * A function that returns the items being dragged. If not specified, we assume that the
+	 * collection is not draggable.
+	 *
+	 * @default () => []
+	 */
+	getItems?: (keys: Set<Key>, items: T[]) => DragItem[];
+	/**
+	 * A function that renders a drag preview, which is shown under the user's cursor while dragging.
+	 * By default, a copy of the dragged element is rendered.
+	 */
+	renderDragPreview?: (
+		items: DragItem[],
+	) => JSX.Element | { element: JSX.Element; x: number; y: number };
+	/**
+	 * A function that renders a drop indicator element between two items in a collection.
+	 * This should render a `<DropIndicator>` element. If this function is not provided, a
+	 * default DropIndicator is provided.
+	 */
+	renderDropIndicator?: (target: DropTarget) => JSX.Element;
+	/**
+	 * A custom delegate object that provides drop targets for pointer coordinates within the
+	 * collection.
+	 */
+	dropTargetDelegate?: DropTargetDelegate;
+	/** Whether the drag and drop events should be disabled. */
+	isDisabled?: boolean;
+}
+
+/**
+ * Provides the hooks required to enable drag and drop behavior for a drag and drop compatible
+ * collection component.
+ */
+export function useDragAndDrop<T = object>(options: DragAndDropOptions<T>): DragAndDrop<T> {
+	let dragAndDropHooks = useMemo(() => {
+		let {
+			onDrop,
+			onInsert,
+			onItemDrop,
+			onReorder,
+			onMove,
+			onRootDrop,
+			getItems,
+			renderDragPreview,
+			renderDropIndicator,
+			dropTargetDelegate,
+		} = options;
+
+		let isDraggable = !!getItems;
+		let isDroppable = !!(onDrop || onInsert || onItemDrop || onReorder || onMove || onRootDrop);
+
+		let hooks = {} as DragAndDropHooks;
+		if (isDraggable) {
+			hooks.useDraggableCollectionState = function useDraggableCollectionStateOverride(
+				props: DraggableCollectionStateOpts,
+			) {
+				return useDraggableCollectionState({
+					...props,
+					...options,
+				} as DraggableCollectionStateOptions);
+			};
+			hooks.useDraggableCollection = useDraggableCollection;
+			hooks.useDraggableItem = useDraggableItem;
+			hooks.DragPreview = DragPreview;
+			hooks.renderDragPreview = renderDragPreview;
+			hooks.isVirtualDragging = isVirtualDragging;
+		}
+
+		if (isDroppable) {
+			hooks.useDroppableCollectionState = function useDroppableCollectionStateOverride(
+				props: DroppableCollectionStateOptions,
+			) {
+				return useDroppableCollectionState({ ...props, ...options });
+			};
+			hooks.useDroppableItem = useDroppableItem;
+			hooks.useDroppableCollection = function useDroppableCollectionOverride(
+				props: DroppableCollectionOptions,
+				state: DroppableCollectionState,
+				ref: RefObject<HTMLElement | null>,
+			) {
+				return useDroppableCollection({ ...props, ...options }, state, ref);
+			};
+			hooks.useDropIndicator = useDropIndicator;
+			hooks.renderDropIndicator = renderDropIndicator;
+			hooks.dropTargetDelegate = dropTargetDelegate;
+			hooks.ListDropTargetDelegate = ListDropTargetDelegate;
+		}
+
+		return hooks;
+	}, [options]);
+
+	return {
+		dragAndDropHooks,
+	};
+}

package/src/components/utils.ts

@@ -37,101 +37,24 @@ interface SlottedValue<T> {
 export type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
 export type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;
 
-type ProviderValue<T> = [Context<SlottedContextValue<T>>, SlottedContextValue<T>];
-type ProviderValues<A, B, C, D, E, F, G, H, I, J, K, L> =
-	| [ProviderValue<A>]
-	| [ProviderValue<A>, ProviderValue<B>]
-	| [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>]
-	| [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>]
-	| [ProviderValue<A>, ProviderValue<B>, ProviderValue<C>, ProviderValue<D>, ProviderValue<E>]
-	| [
-			ProviderValue<A>,
-			ProviderValue<B>,
-			ProviderValue<C>,
-			ProviderValue<D>,
-			ProviderValue<E>,
-			ProviderValue<F>,
-	  ]
-	| [
-			ProviderValue<A>,
-			ProviderValue<B>,
-			ProviderValue<C>,
-			ProviderValue<D>,
-			ProviderValue<E>,
-			ProviderValue<F>,
-			ProviderValue<G>,
-	  ]
-	| [
-			ProviderValue<A>,
-			ProviderValue<B>,
-			ProviderValue<C>,
-			ProviderValue<D>,
-			ProviderValue<E>,
-			ProviderValue<F>,
-			ProviderValue<G>,
-			ProviderValue<H>,
-	  ]
-	| [
-			ProviderValue<A>,
-			ProviderValue<B>,
-			ProviderValue<C>,
-			ProviderValue<D>,
-			ProviderValue<E>,
-			ProviderValue<F>,
-			ProviderValue<G>,
-			ProviderValue<H>,
-			ProviderValue<I>,
-	  ]
-	| [
-			ProviderValue<A>,
-			ProviderValue<B>,
-			ProviderValue<C>,
-			ProviderValue<D>,
-			ProviderValue<E>,
-			ProviderValue<F>,
-			ProviderValue<G>,
-			ProviderValue<H>,
-			ProviderValue<I>,
-			ProviderValue<J>,
-	  ]
-	| [
-			ProviderValue<A>,
-			ProviderValue<B>,
-			ProviderValue<C>,
-			ProviderValue<D>,
-			ProviderValue<E>,
-			ProviderValue<F>,
-			ProviderValue<G>,
-			ProviderValue<H>,
-			ProviderValue<I>,
-			ProviderValue<J>,
-			ProviderValue<K>,
-	  ]
-	| [
-			ProviderValue<A>,
-			ProviderValue<B>,
-			ProviderValue<C>,
-			ProviderValue<D>,
-			ProviderValue<E>,
-			ProviderValue<F>,
-			ProviderValue<G>,
-			ProviderValue<H>,
-			ProviderValue<I>,
-			ProviderValue<J>,
-			ProviderValue<K>,
-			ProviderValue<L>,
-	  ];
-
-interface ProviderProps<A, B, C, D, E, F, G, H, I, J, K, L> {
-	values: ProviderValues<A, B, C, D, E, F, G, H, I, J, K, L>;
+type ProviderValue<C extends Context<any>> = readonly [
+	C,
+	C extends Context<infer Value> ? Value : never,
+];
+type ProviderValues<Contexts extends readonly Context<any>[]> = {
+	readonly [Index in keyof Contexts]: ProviderValue<Contexts[Index]>;
+};
+
+interface ProviderProps<Contexts extends readonly Context<any>[]> {
+	values: ProviderValues<Contexts>;
 	children: ReactNode;
 }
 
 // No hooks (Provider nests plain Context.Provider descriptors), so no slot threading. The
 // descriptor `{ value, children }` shape stays stable per values entry (see aria memory
 // octane-provider-children-shape-flip).
-export function Provider<A, B, C, D, E, F, G, H, I, J, K, L>(
-	props: ProviderProps<A, B, C, D, E, F, G, H, I, J, K, L>,
+export function Provider<const Contexts extends readonly Context<any>[]>(
+	props: ProviderProps<Contexts>,
 ): any {
 	let { values, children } = props;
 	for (let [Context, value] of values) {

package/src/datepicker/useDateField.tsx

@@ -0,0 +1,272 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/datepicker/useDateField.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,
+	GroupDOMAttributes,
+	InputDOMProps,
+	KeyboardEvent,
+	RefObject,
+	ValidationResult,
+} from '@react-types/shared';
+import { createFocusManager, FocusManager } from '../focus/FocusScope';
+import {
+	DateFieldProps,
+	DateFieldState,
+	DateValue,
+} from '../upstream-exports/react-stately/useDateFieldState';
+import { filterDOMProps } from '../utils/filterDOMProps';
+import { InputHTMLAttributes, useEffect, useMemo, useRef } from '../compat/react';
+import intlMessages from '../intl/datepicker/index';
+import { mergeProps } from '../utils/mergeProps';
+import {
+	TimeFieldState,
+	TimePickerProps,
+	TimeValue,
+} from '../upstream-exports/react-stately/useTimeFieldState';
+import { useDatePickerGroup } from './useDatePickerGroup';
+import { useDescription } from '../utils/useDescription';
+import { useField } from '../label/useField';
+import { useFocusWithin } from '../interactions/useFocusWithin';
+import { useFormReset } from '../utils/useFormReset';
+import { useFormValidation } from '../form/useFormValidation';
+import { useLocalizedStringFormatter } from '../i18n/useLocalizedStringFormatter';
+
+export interface AriaDateFieldProps<T extends DateValue>
+	extends DateFieldProps<T>, AriaLabelingProps, DOMProps, InputDOMProps {
+	/**
+	 * Describes the type of autocomplete functionality the input should provide if any. See
+	 * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+	 */
+	autoComplete?: string;
+}
+
+// Allows this hook to also be used with TimeField
+export interface AriaDateFieldOptions<T extends DateValue> extends Omit<
+	AriaDateFieldProps<T>,
+	'value' | 'defaultValue' | 'onChange' | 'minValue' | 'maxValue' | 'placeholderValue' | 'validate'
+> {
+	/** A ref for the hidden input element for HTML form submission. */
+	inputRef?: RefObject<HTMLInputElement | null>;
+}
+
+export interface DateFieldAria extends ValidationResult {
+	/** Props for the field's visible label element, if any. */
+	labelProps: DOMAttributes;
+	/** Props for the field grouping element. */
+	fieldProps: GroupDOMAttributes;
+	/** Props for the hidden input element for HTML form submission. */
+	inputProps: InputHTMLAttributes<HTMLInputElement>;
+	/** Props for the description element, if any. */
+	descriptionProps: DOMAttributes;
+	/** Props for the error message element, if any. */
+	errorMessageProps: DOMAttributes;
+}
+
+// Data that is passed between useDateField and useDateSegment.
+interface HookData {
+	ariaLabel?: string;
+	ariaLabelledBy?: string;
+	ariaDescribedBy?: string;
+	focusManager: FocusManager;
+}
+
+export const hookData: WeakMap<DateFieldState, HookData> = new WeakMap<DateFieldState, HookData>();
+
+// Private props that we pass from useDatePicker/useDateRangePicker.
+// Ideally we'd use a Symbol for this, but React doesn't support them: https://github.com/facebook/react/issues/7552
+// These need to be stable across server and client module evaluation for SSR hydration.
+export const roleSymbol: string = '__reactAriaDateFieldRole';
+export const focusManagerSymbol: string = '__reactAriaDateFieldFocusManager';
+
+/**
+ * Provides the behavior and accessibility implementation for a date field component.
+ * A date field allows users to enter and edit date and time values using a keyboard.
+ * Each part of a date value is displayed in an individually editable segment.
+ */
+export function useDateField<T extends DateValue>(
+	props: AriaDateFieldOptions<T>,
+	state: DateFieldState,
+	ref: RefObject<Element | null>,
+): DateFieldAria {
+	let { isInvalid, validationErrors, validationDetails } = state.displayValidation;
+	let { labelProps, fieldProps, descriptionProps, errorMessageProps } = useField({
+		...props,
+		labelElementType: 'span',
+		isInvalid,
+		errorMessage: props.errorMessage || validationErrors,
+	});
+
+	let valueOnFocus = useRef<DateValue | null>(null);
+	let { focusWithinProps } = useFocusWithin({
+		...props,
+		onFocusWithin(e) {
+			valueOnFocus.current = state.value;
+			props.onFocus?.(e as any);
+		},
+		onBlurWithin: (e) => {
+			state.confirmPlaceholder();
+			if (state.value !== valueOnFocus.current) {
+				state.commitValidation();
+			}
+			props.onBlur?.(e as any);
+		},
+		onFocusWithinChange: props.onFocusChange,
+	});
+
+	let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/datepicker');
+	let message =
+		state.maxGranularity === 'hour' ? 'selectedTimeDescription' : 'selectedDateDescription';
+	let field = state.maxGranularity === 'hour' ? 'time' : 'date';
+	let description = state.value
+		? stringFormatter.format(message, { [field]: state.formatValue({ month: 'long' }) })
+		: '';
+	let descProps = useDescription(description);
+
+	// If within a date picker or date range picker, the date field will have role="presentation" and an aria-describedby
+	// will be passed in that references the value (e.g. entire range). Otherwise, add the field's value description.
+	let describedBy =
+		(props as any)[roleSymbol] === 'presentation'
+			? fieldProps['aria-describedby']
+			: [descProps['aria-describedby'], fieldProps['aria-describedby']].filter(Boolean).join(' ') ||
+				undefined;
+	let propsFocusManager = (props as any)[focusManagerSymbol];
+	let focusManager = useMemo(
+		() => propsFocusManager || createFocusManager(ref),
+		[propsFocusManager, ref],
+	);
+	let groupProps = useDatePickerGroup(state, ref, (props as any)[roleSymbol] === 'presentation');
+
+	// Pass labels and other information to segments.
+	hookData.set(state, {
+		ariaLabel: props['aria-label'],
+		ariaLabelledBy:
+			[labelProps.id, props['aria-labelledby']].filter(Boolean).join(' ') || undefined,
+		ariaDescribedBy: describedBy,
+		focusManager,
+	});
+
+	let autoFocusRef = useRef(props.autoFocus);
+
+	// When used within a date picker or date range picker, the field gets role="presentation"
+	// rather than role="group". Since the date picker/date range picker already has a role="group"
+	// with a label and description, and the segments are already labeled by this as well, this
+	// avoids very verbose duplicate announcements.
+	let fieldDOMProps: GroupDOMAttributes;
+	if ((props as any)[roleSymbol] === 'presentation') {
+		fieldDOMProps = {
+			role: 'presentation',
+		};
+	} else {
+		fieldDOMProps = mergeProps(fieldProps, {
+			role: 'group' as const,
+			'aria-disabled': props.isDisabled || undefined,
+			'aria-describedby': describedBy,
+		});
+	}
+
+	useEffect(() => {
+		if (autoFocusRef.current) {
+			focusManager.focusFirst();
+		}
+		autoFocusRef.current = false;
+	}, [focusManager]);
+
+	useFormReset(props.inputRef, state.defaultValue, state.setValue);
+	useFormValidation(
+		{
+			...props,
+			focus() {
+				focusManager.focusFirst();
+			},
+		},
+		state,
+		props.inputRef,
+	);
+
+	let inputProps: InputHTMLAttributes<HTMLInputElement> = {
+		type: 'hidden',
+		name: props.name,
+		form: props.form,
+		value: state.value?.toString() || '',
+		disabled: props.isDisabled,
+	};
+
+	if (props.validationBehavior === 'native') {
+		// Use a hidden <input type="text"> rather than <input type="hidden">
+		// so that an empty value blocks HTML form submission when the field is required.
+		inputProps.type = 'text';
+		inputProps.hidden = true;
+		inputProps.required = props.isRequired;
+		// React uses a no-op synthetic onChange to mark this controlled validation proxy
+		// as intentionally managed. Octane's equivalent marker is the native input event.
+		inputProps.onInput = () => {};
+	}
+
+	let domProps = filterDOMProps(props);
+	return {
+		labelProps: {
+			...labelProps,
+			onClick: () => {
+				focusManager.focusFirst();
+			},
+		},
+		fieldProps: mergeProps(domProps, fieldDOMProps, groupProps, focusWithinProps, {
+			onKeyDown(e: KeyboardEvent) {
+				if (props.onKeyDown) {
+					props.onKeyDown(e);
+				}
+			},
+			onKeyUp(e: KeyboardEvent) {
+				if (props.onKeyUp) {
+					props.onKeyUp(e);
+				}
+			},
+			style: {
+				unicodeBidi: 'isolate',
+			},
+		}),
+		inputProps,
+		descriptionProps,
+		errorMessageProps,
+		isInvalid,
+		validationErrors,
+		validationDetails,
+	};
+}
+
+export interface AriaTimeFieldProps<T extends TimeValue>
+	extends TimePickerProps<T>, AriaLabelingProps, DOMProps, InputDOMProps {}
+
+export interface AriaTimeFieldOptions<T extends TimeValue> extends AriaTimeFieldProps<T> {
+	/** A ref for the hidden input element for HTML form submission. */
+	inputRef?: RefObject<HTMLInputElement | null>;
+}
+
+/**
+ * Provides the behavior and accessibility implementation for a time field component.
+ * A time field allows users to enter and edit time values using a keyboard.
+ * Each part of a time value is displayed in an individually editable segment.
+ */
+export function useTimeField<T extends TimeValue>(
+	props: AriaTimeFieldOptions<T>,
+	state: TimeFieldState,
+	ref: RefObject<Element | null>,
+): DateFieldAria {
+	let res = useDateField(props, state, ref);
+	res.inputProps.value = state.timeValue?.toString() || '';
+	return res;
+}