@octanejs/aria 0.0.40 → 0.0.41

package/src/dnd/DragPreview.tsx

@@ -0,0 +1,100 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/dnd/DragPreview.tsx).
+/*
+ * 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 { DragItem, DragPreviewRenderer } from '@react-types/shared';
+import { flushSync } from 'octane';
+import React, {
+	ForwardedRef,
+	JSX,
+	useEffect,
+	useImperativeHandle,
+	useRef,
+	useState,
+} from '../compat/react';
+
+export interface DragPreviewProps {
+	/**
+	 * A render function which returns a preview element, or an object containing the element
+	 * and a custom offset. If an object is returned, the provided `x` and `y` values will be
+	 * used as the drag preview offset instead of the default calculation.
+	 */
+	children: (
+		items: DragItem[],
+	) => JSX.Element | { element: JSX.Element; x: number; y: number } | null;
+}
+
+export const DragPreview: React.ForwardRefExoticComponent<
+	DragPreviewProps & React.RefAttributes<DragPreviewRenderer | null>
+> = React.forwardRef(function DragPreview(
+	props: DragPreviewProps,
+	ref: ForwardedRef<DragPreviewRenderer | null>,
+) {
+	let render = props.children;
+	let [children, setChildren] = useState<JSX.Element | null>(null);
+	let domRef = useRef<HTMLDivElement | null>(null);
+	let raf = useRef<ReturnType<typeof requestAnimationFrame> | undefined>(undefined);
+
+	useImperativeHandle(
+		ref,
+		() =>
+			(items: DragItem[], callback: (node: HTMLElement | null, x?: number, y?: number) => void) => {
+				// This will be called during the onDragStart event by useDrag. We need to render the
+				// preview synchronously before this event returns so we can call event.dataTransfer.setDragImage.
+
+				let result = render(items);
+				let element: JSX.Element | null;
+				let offsetX: number | undefined;
+				let offsetY: number | undefined;
+
+				if (result && typeof result === 'object' && 'element' in result) {
+					element = result.element;
+					offsetX = result.x;
+					offsetY = result.y;
+				} else {
+					element = result as JSX.Element | null;
+				}
+
+				flushSync(() => {
+					setChildren(element);
+				});
+
+				// Yield back to useDrag to set the drag image.
+				callback(domRef.current, offsetX, offsetY);
+
+				// Remove the preview from the DOM after a frame so the browser has time to paint.
+				raf.current = requestAnimationFrame(() => {
+					setChildren(null);
+				});
+			},
+		[render],
+	);
+
+	useEffect(() => {
+		return () => {
+			if (raf.current) {
+				cancelAnimationFrame(raf.current);
+			}
+		};
+	}, []);
+
+	if (!children) {
+		return null;
+	}
+
+	return (
+		<div style={{ zIndex: -100, position: 'fixed', top: 0, left: -100000 }} ref={domRef}>
+			{children}
+		</div>
+	);
+});

package/src/dnd/DropTargetKeyboardNavigation.tsx

@@ -0,0 +1,317 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/dnd/DropTargetKeyboardNavigation.ts).
+import { Collection, DropTarget, Key, KeyboardDelegate, Node } from '@react-types/shared';
+
+export function navigate(
+	keyboardDelegate: KeyboardDelegate,
+	collection: Collection<Node<unknown>>,
+	target: DropTarget | null | undefined,
+	direction: 'left' | 'right' | 'up' | 'down',
+	rtl = false,
+	wrap = false,
+): DropTarget | null {
+	switch (direction) {
+		case 'left':
+			return rtl
+				? nextDropTarget(keyboardDelegate, collection, target, wrap, 'left')
+				: previousDropTarget(keyboardDelegate, collection, target, wrap, 'left');
+		case 'right':
+			return rtl
+				? previousDropTarget(keyboardDelegate, collection, target, wrap, 'right')
+				: nextDropTarget(keyboardDelegate, collection, target, wrap, 'right');
+		case 'up':
+			return previousDropTarget(keyboardDelegate, collection, target, wrap);
+		case 'down':
+			return nextDropTarget(keyboardDelegate, collection, target, wrap);
+	}
+}
+
+function nextDropTarget(
+	keyboardDelegate: KeyboardDelegate,
+	collection: Collection<Node<unknown>>,
+	target: DropTarget | null | undefined,
+	wrap = false,
+	horizontal: 'left' | 'right' | null = null,
+): DropTarget | null {
+	if (!target) {
+		return {
+			type: 'root',
+		};
+	}
+
+	if (target.type === 'root') {
+		let nextKey = keyboardDelegate.getFirstKey?.() ?? null;
+		if (nextKey != null) {
+			return {
+				type: 'item',
+				key: nextKey,
+				dropPosition: 'before',
+			};
+		}
+
+		return null;
+	}
+
+	if (target.type === 'item') {
+		let nextKey: Key | null | undefined = null;
+		if (horizontal) {
+			nextKey =
+				horizontal === 'right'
+					? keyboardDelegate.getKeyRightOf?.(target.key, { includeDisabled: true })
+					: keyboardDelegate.getKeyLeftOf?.(target.key, { includeDisabled: true });
+		} else {
+			nextKey = keyboardDelegate.getKeyBelow?.(target.key, { includeDisabled: true });
+		}
+		let nextCollectionKey = getNextItem(collection, target.key, (key) =>
+			collection.getKeyAfter(key),
+		);
+
+		// If the keyboard delegate did not move to the next key in the collection,
+		// jump to that key with the same drop position. Otherwise, try the other
+		// drop positions on the current key first.
+		if (nextKey != null && nextKey !== nextCollectionKey) {
+			return {
+				type: 'item',
+				key: nextKey,
+				dropPosition: target.dropPosition,
+			};
+		}
+
+		switch (target.dropPosition) {
+			case 'before': {
+				return {
+					type: 'item',
+					key: target.key,
+					dropPosition: 'on',
+				};
+			}
+			case 'on': {
+				// If there are nested items, traverse to them prior to the "after" position of this target.
+				// If the next key is on the same level, then its "before" position is equivalent to this item's "after" position.
+				let targetNode = collection.getItem(target.key);
+				let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+				if (targetNode && nextNode && nextNode.level >= targetNode.level) {
+					return {
+						type: 'item',
+						key: nextNode.key,
+						dropPosition: 'before',
+					};
+				}
+
+				return {
+					type: 'item',
+					key: target.key,
+					dropPosition: 'after',
+				};
+			}
+			case 'after': {
+				// If this is the last sibling in a level, traverse to the parent.
+				let targetNode = collection.getItem(target.key);
+				let nextItemInSameLevel =
+					targetNode?.nextKey != null ? collection.getItem(targetNode.nextKey) : null;
+				while (nextItemInSameLevel != null && nextItemInSameLevel.type !== 'item') {
+					nextItemInSameLevel =
+						nextItemInSameLevel.nextKey != null
+							? collection.getItem(nextItemInSameLevel.nextKey)
+							: null;
+				}
+
+				if (targetNode && nextItemInSameLevel == null && targetNode.parentKey != null) {
+					// If the parent item has an item after it, use the "before" position.
+					let parentNode = collection.getItem(targetNode.parentKey);
+					const nextNode =
+						parentNode?.nextKey != null ? collection.getItem(parentNode.nextKey) : null;
+					if (nextNode?.type === 'item') {
+						return {
+							type: 'item',
+							key: nextNode.key,
+							dropPosition: 'before',
+						};
+					}
+
+					if (parentNode?.type === 'item') {
+						return {
+							type: 'item',
+							key: parentNode.key,
+							dropPosition: 'after',
+						};
+					}
+				}
+
+				if (nextItemInSameLevel) {
+					return {
+						type: 'item',
+						key: nextItemInSameLevel.key,
+						dropPosition: 'on',
+					};
+				}
+			}
+		}
+	}
+
+	if (wrap) {
+		return {
+			type: 'root',
+		};
+	}
+
+	return null;
+}
+
+function previousDropTarget(
+	keyboardDelegate: KeyboardDelegate,
+	collection: Collection<Node<unknown>>,
+	target: DropTarget | null | undefined,
+	wrap = false,
+	horizontal: 'left' | 'right' | null = null,
+): DropTarget | null {
+	// Start after the last root-level item.
+	if (!target || (wrap && target.type === 'root')) {
+		// Keyboard delegate gets the deepest item but we want the shallowest.
+		let prevKey: Key | null = null;
+		let lastKey = keyboardDelegate.getLastKey?.();
+		while (lastKey != null) {
+			let node = collection.getItem(lastKey);
+			if (node?.type !== 'item') {
+				break;
+			}
+			prevKey = lastKey;
+			lastKey = node?.parentKey;
+		}
+
+		if (prevKey != null) {
+			return {
+				type: 'item',
+				key: prevKey,
+				dropPosition: 'after',
+			};
+		}
+
+		return null;
+	}
+
+	if (target.type === 'item') {
+		let prevKey: Key | null | undefined = null;
+		if (horizontal) {
+			prevKey =
+				horizontal === 'left'
+					? keyboardDelegate.getKeyLeftOf?.(target.key, { includeDisabled: true })
+					: keyboardDelegate.getKeyRightOf?.(target.key, { includeDisabled: true });
+		} else {
+			prevKey = keyboardDelegate.getKeyAbove?.(target.key, { includeDisabled: true });
+		}
+		let prevCollectionKey = getNextItem(collection, target.key, (key) =>
+			collection.getKeyBefore(key),
+		);
+
+		// If the keyboard delegate did not move to the next key in the collection,
+		// jump to that key with the same drop position. Otherwise, try the other
+		// drop positions on the current key first.
+		if (prevKey != null && prevKey !== prevCollectionKey) {
+			return {
+				type: 'item',
+				key: prevKey,
+				dropPosition: target.dropPosition,
+			};
+		}
+
+		switch (target.dropPosition) {
+			case 'before': {
+				// Move after the last child of the previous item.
+				let targetNode = collection.getItem(target.key);
+				if (targetNode && targetNode.prevKey != null) {
+					let lastChild = getLastChild(collection, targetNode.prevKey);
+					if (lastChild) {
+						return lastChild;
+					}
+				}
+
+				if (prevKey != null) {
+					return {
+						type: 'item',
+						key: prevKey,
+						dropPosition: 'on',
+					};
+				}
+
+				return {
+					type: 'root',
+				};
+			}
+			case 'on': {
+				return {
+					type: 'item',
+					key: target.key,
+					dropPosition: 'before',
+				};
+			}
+			case 'after': {
+				// Move after the last child of this item.
+				let lastChild = getLastChild(collection, target.key);
+				if (lastChild) {
+					return lastChild;
+				}
+
+				return {
+					type: 'item',
+					key: target.key,
+					dropPosition: 'on',
+				};
+			}
+		}
+	}
+
+	if (target.type !== 'root') {
+		return {
+			type: 'root',
+		};
+	}
+
+	return null;
+}
+
+function getLastChild(collection: Collection<Node<unknown>>, key: Key): DropTarget | null {
+	// getChildNodes still returns child tree items even when the item is collapsed.
+	// Checking if the next item has a greater level is a silly way to determine if the item is expanded.
+	let targetNode = collection.getItem(key);
+	let nextKey = getNextItem(collection, key, (key) => collection.getKeyAfter(key));
+	let nextNode = nextKey != null ? collection.getItem(nextKey) : null;
+	if (targetNode && nextNode && nextNode.level > targetNode.level) {
+		let lastChild: Node<unknown> | null = null;
+		if ('lastChildKey' in targetNode) {
+			lastChild =
+				targetNode.lastChildKey != null ? collection.getItem(targetNode.lastChildKey) : null;
+			while (lastChild && lastChild.type !== 'item' && lastChild.prevKey != null) {
+				lastChild = collection.getItem(lastChild.prevKey)!;
+			}
+		} else {
+			lastChild =
+				Array.from(targetNode.childNodes).findLast((item) => item.type === 'item') || null;
+		}
+
+		if (lastChild) {
+			return {
+				type: 'item',
+				key: lastChild.key,
+				dropPosition: 'after',
+			};
+		}
+	}
+
+	return null;
+}
+
+// Find the next or previous item in a collection, skipping over other types of nodes (e.g. content).
+function getNextItem(
+	collection: Collection<Node<unknown>>,
+	key: Key,
+	getNextKey: (key: Key) => Key | null,
+): Key | null {
+	let nextCollectionKey = getNextKey(key);
+	let nextCollectionNode = nextCollectionKey != null ? collection.getItem(nextCollectionKey) : null;
+	while (nextCollectionNode && nextCollectionNode.type !== 'item') {
+		nextCollectionKey = getNextKey(nextCollectionNode.key);
+		nextCollectionNode = nextCollectionKey != null ? collection.getItem(nextCollectionKey) : null;
+	}
+	return nextCollectionKey;
+}

package/src/dnd/ListDropTargetDelegate.tsx

@@ -0,0 +1,215 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/dnd/ListDropTargetDelegate.ts).
+import {
+	Direction,
+	DropTarget,
+	DropTargetDelegate,
+	Node,
+	Orientation,
+	RefObject,
+} from '@react-types/shared';
+
+interface ListDropTargetDelegateOptions {
+	/**
+	 * Whether the items are arranged in a stack or grid.
+	 *
+	 * @default 'stack'
+	 */
+	layout?: 'stack' | 'grid';
+	/**
+	 * The primary orientation of the items. Usually this is the
+	 * direction that the collection scrolls.
+	 *
+	 * @default 'vertical'
+	 */
+	orientation?: Orientation;
+	/**
+	 * The horizontal layout direction.
+	 *
+	 * @default 'ltr'
+	 */
+	direction?: Direction;
+}
+
+// Terms used in the below code:
+//   * "Primary"   – The main layout direction. For stacks, this is the direction
+//                   that the stack is arranged in (e.g. horizontal or vertical).
+//                   For grids, this is the main scroll direction.
+//   * "Secondary" – The secondary layout direction. For stacks, there is no secondary
+//                   layout direction. For grids, this is the opposite of the primary direction.
+//   * "Flow"      – The flow direction of the items. For stacks, this is the the primary
+//                   direction. For grids, it is the secondary direction.
+
+export class ListDropTargetDelegate implements DropTargetDelegate {
+	private collection: Iterable<Node<unknown>>;
+	private ref: RefObject<HTMLElement | null>;
+	private layout: 'stack' | 'grid';
+	private orientation: Orientation;
+	protected direction: Direction;
+
+	constructor(
+		collection: Iterable<Node<unknown>>,
+		ref: RefObject<HTMLElement | null>,
+		options?: ListDropTargetDelegateOptions,
+	) {
+		this.collection = collection;
+		this.ref = ref;
+		this.layout = options?.layout || 'stack';
+		this.orientation = options?.orientation || 'vertical';
+		this.direction = options?.direction || 'ltr';
+	}
+
+	private getPrimaryStart(rect: DOMRect) {
+		return this.orientation === 'horizontal' ? rect.left : rect.top;
+	}
+
+	private getPrimaryEnd(rect: DOMRect) {
+		return this.orientation === 'horizontal' ? rect.right : rect.bottom;
+	}
+
+	private getSecondaryStart(rect: DOMRect) {
+		return this.orientation === 'horizontal' ? rect.top : rect.left;
+	}
+
+	private getSecondaryEnd(rect: DOMRect) {
+		return this.orientation === 'horizontal' ? rect.bottom : rect.right;
+	}
+
+	private getFlowStart(rect: DOMRect) {
+		return this.layout === 'stack' ? this.getPrimaryStart(rect) : this.getSecondaryStart(rect);
+	}
+
+	private getFlowEnd(rect: DOMRect) {
+		return this.layout === 'stack' ? this.getPrimaryEnd(rect) : this.getSecondaryEnd(rect);
+	}
+
+	private getFlowSize(rect: DOMRect) {
+		return this.getFlowEnd(rect) - this.getFlowStart(rect);
+	}
+
+	getDropTargetFromPoint(
+		x: number,
+		y: number,
+		isValidDropTarget: (target: DropTarget) => boolean,
+	): DropTarget {
+		if (this.collection[Symbol.iterator]().next().done || !this.ref.current) {
+			return { type: 'root' };
+		}
+
+		let rect: DOMRect | undefined = this.ref.current.getBoundingClientRect();
+		let primary = this.orientation === 'horizontal' ? x : y;
+		let secondary = this.orientation === 'horizontal' ? y : x;
+		primary += this.getPrimaryStart(rect);
+		secondary += this.getSecondaryStart(rect);
+
+		let flow = this.layout === 'stack' ? primary : secondary;
+		let isPrimaryRTL = this.orientation === 'horizontal' && this.direction === 'rtl';
+		let isSecondaryRTL =
+			this.layout === 'grid' && this.orientation === 'vertical' && this.direction === 'rtl';
+		let isFlowRTL = this.layout === 'stack' ? isPrimaryRTL : isSecondaryRTL;
+
+		let collection = this.ref.current?.dataset.collection;
+		let elements = this.ref.current.querySelectorAll(
+			collection ? `[data-collection="${CSS.escape(collection)}"]` : '[data-key]',
+		);
+		let elementMap = new Map<string, HTMLElement>();
+		for (let item of elements) {
+			if (item instanceof HTMLElement && item.dataset.key != null) {
+				elementMap.set(item.dataset.key, item);
+			}
+		}
+
+		// TODO: assume that only item type items are valid drop targets. This is to prevent a crash when dragging over the loader
+		// row since it doesn't have a data-key set on it. Will eventually need to handle the case with drag and drop and loaders located between rows aka tree.
+		// Can see https://github.com/adobe/react-spectrum/pull/4210/files#diff-21e555e0c597a28215e36137f5be076a65a1e1456c92cd0fdd60f866929aae2a for additional logic
+		// that may need to happen then
+		let items = [...this.collection].filter((item) => item.type === 'item');
+
+		if (items.length < 1) {
+			return { type: 'root' };
+		}
+
+		let low = 0;
+		let high = items.length;
+		while (low < high) {
+			let mid = Math.floor((low + high) / 2);
+			let item = items[mid];
+			let element = elementMap.get(String(item.key));
+			if (!element) {
+				break;
+			}
+			let rect = element.getBoundingClientRect();
+			let update = (isGreater: boolean) => {
+				if (isGreater) {
+					low = mid + 1;
+				} else {
+					high = mid;
+				}
+			};
+
+			if (primary < this.getPrimaryStart(rect)) {
+				update(isPrimaryRTL);
+			} else if (primary > this.getPrimaryEnd(rect)) {
+				update(!isPrimaryRTL);
+			} else if (secondary < this.getSecondaryStart(rect)) {
+				update(isSecondaryRTL);
+			} else if (secondary > this.getSecondaryEnd(rect)) {
+				update(!isSecondaryRTL);
+			} else {
+				let target: DropTarget = {
+					type: 'item',
+					key: item.key,
+					dropPosition: 'on',
+				};
+
+				if (isValidDropTarget(target)) {
+					// Otherwise, if dropping on the item is accepted, try the before/after positions if within 5px
+					// of the start or end of the item.
+					if (
+						flow <= this.getFlowStart(rect) + 5 &&
+						isValidDropTarget({ ...target, dropPosition: 'before' })
+					) {
+						target.dropPosition = isFlowRTL ? 'after' : 'before';
+					} else if (
+						flow >= this.getFlowEnd(rect) - 5 &&
+						isValidDropTarget({ ...target, dropPosition: 'after' })
+					) {
+						target.dropPosition = isFlowRTL ? 'before' : 'after';
+					}
+				} else {
+					// If dropping on the item isn't accepted, try the target before or after depending on the position.
+					let mid = this.getFlowStart(rect) + this.getFlowSize(rect) / 2;
+					if (flow <= mid && isValidDropTarget({ ...target, dropPosition: 'before' })) {
+						target.dropPosition = isFlowRTL ? 'after' : 'before';
+					} else if (flow >= mid && isValidDropTarget({ ...target, dropPosition: 'after' })) {
+						target.dropPosition = isFlowRTL ? 'before' : 'after';
+					}
+				}
+
+				return target;
+			}
+		}
+
+		let item = items[Math.min(low, items.length - 1)];
+		let element = elementMap.get(String(item.key));
+		rect = element?.getBoundingClientRect();
+
+		if (
+			rect &&
+			(primary < this.getPrimaryStart(rect) ||
+				Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect)))
+		) {
+			return {
+				type: 'item',
+				key: item.key,
+				dropPosition: isFlowRTL ? 'after' : 'before',
+			};
+		}
+
+		return {
+			type: 'item',
+			key: item.key,
+			dropPosition: isFlowRTL ? 'before' : 'after',
+		};
+	}
+}