@octanejs/aria 0.0.1 → 0.0.4

package/src/selection/ListKeyboardDelegate.ts

@@ -0,0 +1,392 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/selection/ListKeyboardDelegate.ts).
+// Verbatim (no React surface); RefObject type from @react-types/shared. Two strict-TS
+// adjustments with identical runtime behavior: the CardView layout-delegate escape hatch
+// indexes through a structural type (upstream indexes LayoutDelegate, which doesn't declare
+// getKeyLeftOf/getKeyRightOf), and its possibly-null key lands in a local instead of
+// reassigning the non-null `key` parameter.
+import type {
+	Collection,
+	Direction,
+	DisabledBehavior,
+	Key,
+	KeyboardDelegate,
+	LayoutDelegate,
+	Node,
+	Orientation,
+	Rect,
+	RefObject,
+} from '@react-types/shared';
+import { DOMLayoutDelegate } from './DOMLayoutDelegate';
+import { getItemElement } from './utils';
+import { isScrollable } from '../utils/isScrollable';
+
+interface ListKeyboardDelegateOptions<T> {
+	collection: Collection<Node<T>>;
+	ref: RefObject<HTMLElement | null>;
+	collator?: Intl.Collator;
+	layout?: 'stack' | 'grid';
+	orientation?: Orientation;
+	direction?: Direction;
+	disabledKeys?: Set<Key>;
+	disabledBehavior?: DisabledBehavior;
+	layoutDelegate?: LayoutDelegate;
+}
+
+// Optional spatial methods some layout delegates (e.g. CardView's) implement beyond the
+// LayoutDelegate interface.
+type DirectionalLayoutDelegate = LayoutDelegate & {
+	getKeyRightOf?(key: Key): Key | null;
+	getKeyLeftOf?(key: Key): Key | null;
+};
+
+export class ListKeyboardDelegate<T> implements KeyboardDelegate {
+	private collection: Collection<Node<T>>;
+	private disabledKeys: Set<Key>;
+	private disabledBehavior: DisabledBehavior;
+	private ref: RefObject<HTMLElement | null>;
+	private collator: Intl.Collator | undefined;
+	private layout: 'stack' | 'grid';
+	private orientation?: Orientation;
+	private direction?: Direction;
+	private layoutDelegate: DirectionalLayoutDelegate;
+
+	constructor(
+		collection: Collection<Node<T>>,
+		disabledKeys: Set<Key>,
+		ref: RefObject<HTMLElement | null>,
+		collator?: Intl.Collator,
+		expandedKeys?: Set<Key>,
+	);
+	constructor(options: ListKeyboardDelegateOptions<T>);
+	constructor(...args: any[]) {
+		if (args.length === 1) {
+			let opts = args[0] as ListKeyboardDelegateOptions<T>;
+			this.collection = opts.collection;
+			this.ref = opts.ref;
+			this.collator = opts.collator;
+			this.disabledKeys = opts.disabledKeys || new Set();
+			this.disabledBehavior = opts.disabledBehavior || 'all';
+			this.orientation = opts.orientation || 'vertical';
+			this.direction = opts.direction;
+			this.layout = opts.layout || 'stack';
+			this.layoutDelegate = opts.layoutDelegate || new DOMLayoutDelegate(opts.ref);
+		} else {
+			this.collection = args[0];
+			this.disabledKeys = args[1];
+			this.ref = args[2];
+			this.collator = args[3];
+			this.layout = 'stack';
+			this.orientation = 'vertical';
+			this.disabledBehavior = 'all';
+			this.layoutDelegate = new DOMLayoutDelegate(this.ref);
+		}
+
+		// If this is a vertical stack, remove the left/right methods completely
+		// so they aren't called by useDroppableCollection.
+		if (this.layout === 'stack' && this.orientation === 'vertical') {
+			this.getKeyLeftOf = undefined;
+			this.getKeyRightOf = undefined;
+		}
+	}
+
+	private isDisabled(item: Node<unknown>) {
+		return (
+			this.disabledBehavior === 'all' &&
+			(item.props?.isDisabled || this.disabledKeys.has(item.key)) &&
+			item.props?.disabledBehavior !== 'selection'
+		);
+	}
+
+	private findNextNonDisabled(
+		key: Key | null,
+		getNext: (key: Key) => Key | null,
+		includeDisabled = false,
+	): Key | null {
+		let nextKey = key;
+		while (nextKey != null) {
+			let item = this.collection.getItem(nextKey);
+			if (item?.type === 'item' && (includeDisabled || !this.isDisabled(item))) {
+				return nextKey;
+			}
+
+			nextKey = getNext(nextKey);
+		}
+
+		return null;
+	}
+
+	getNextKey(key: Key, options?: { includeDisabled?: boolean }): Key | null {
+		let nextKey: Key | null = key;
+		nextKey = this.collection.getKeyAfter(nextKey);
+		return this.findNextNonDisabled(
+			nextKey,
+			(key) => this.collection.getKeyAfter(key),
+			options?.includeDisabled,
+		);
+	}
+
+	getPreviousKey(key: Key, options?: { includeDisabled?: boolean }): Key | null {
+		let nextKey: Key | null = key;
+		nextKey = this.collection.getKeyBefore(nextKey);
+		return this.findNextNonDisabled(
+			nextKey,
+			(key) => this.collection.getKeyBefore(key),
+			options?.includeDisabled,
+		);
+	}
+
+	private findKey(
+		key: Key,
+		nextKey: (key: Key) => Key | null,
+		shouldSkip: (prevRect: Rect, itemRect: Rect) => boolean,
+	) {
+		let tempKey: Key | null = key;
+		let itemRect = this.layoutDelegate.getItemRect(tempKey);
+		if (!itemRect || tempKey == null) {
+			return null;
+		}
+
+		// Find the item above or below in the same column.
+		let prevRect = itemRect;
+		do {
+			tempKey = nextKey(tempKey);
+			if (tempKey == null) {
+				break;
+			}
+			itemRect = this.layoutDelegate.getItemRect(tempKey);
+		} while (itemRect && shouldSkip(prevRect, itemRect) && tempKey != null);
+
+		return tempKey;
+	}
+
+	private isSameRow(prevRect: Rect, itemRect: Rect) {
+		return prevRect.y === itemRect.y || prevRect.x !== itemRect.x;
+	}
+
+	private isSameColumn(prevRect: Rect, itemRect: Rect) {
+		return prevRect.x === itemRect.x || prevRect.y !== itemRect.y;
+	}
+
+	// checks to see if the next/prev key is spatially above/below the current key. If not, that means we are in
+	// a reversed column layout and need to adjust appropriately
+	// TODO: still need to see how this works with virtualizer once there is handling for the reverse layout
+	// this felt like a simpler approach then changing getKeyAbove/Below to be purely spatial calculations
+	private isReversed(key: Key): boolean {
+		let nextKey = this.getNextKey(key);
+		let currentEl = getItemElement(this.ref, key);
+		if (nextKey != null) {
+			let nextEl = getItemElement(this.ref, nextKey);
+			if (!currentEl || !nextEl) {
+				return false;
+			}
+			return currentEl.getBoundingClientRect().top > nextEl.getBoundingClientRect().top;
+		}
+		let prevKey = this.getPreviousKey(key);
+		if (prevKey != null) {
+			let prevEl = getItemElement(this.ref, prevKey);
+			if (!currentEl || !prevEl) {
+				return false;
+			}
+			return prevEl.getBoundingClientRect().top > currentEl.getBoundingClientRect().top;
+		}
+		return false;
+	}
+
+	getKeyBelow(key: Key, options?: { includeDisabled?: boolean }): Key | null {
+		if (this.layout === 'grid' && this.orientation === 'vertical') {
+			return this.findKey(key, (key) => this.getNextKey(key, options), this.isSameRow);
+		} else if (this.orientation === 'vertical') {
+			return this.isReversed(key)
+				? this.getPreviousKey(key, options)
+				: this.getNextKey(key, options);
+		} else {
+			return this.getNextKey(key, options);
+		}
+	}
+
+	getKeyAbove(key: Key, options?: { includeDisabled?: boolean }): Key | null {
+		if (this.layout === 'grid' && this.orientation === 'vertical') {
+			return this.findKey(key, (key) => this.getPreviousKey(key, options), this.isSameRow);
+		} else if (this.orientation === 'vertical') {
+			return this.isReversed(key)
+				? this.getNextKey(key, options)
+				: this.getPreviousKey(key, options);
+		} else {
+			return this.getPreviousKey(key, options);
+		}
+	}
+
+	private getNextColumn(key: Key, right: boolean, options?: { includeDisabled?: boolean }) {
+		return right ? this.getPreviousKey(key, options) : this.getNextKey(key, options);
+	}
+
+	getKeyRightOf?(key: Key, options?: { includeDisabled?: boolean }): Key | null {
+		// This is a temporary solution for CardView until we refactor useSelectableCollection.
+		// https://github.com/orgs/adobe/projects/19/views/32?pane=issue&itemId=77825042
+		let layoutDelegateMethod =
+			this.direction === 'ltr' ? ('getKeyRightOf' as const) : ('getKeyLeftOf' as const);
+		if (this.layoutDelegate[layoutDelegateMethod]) {
+			let nextKey: Key | null = this.layoutDelegate[layoutDelegateMethod]!(key);
+			return this.findNextNonDisabled(
+				nextKey,
+				(key) => this.layoutDelegate[layoutDelegateMethod]!(key),
+				options?.includeDisabled,
+			);
+		}
+
+		if (this.layout === 'grid') {
+			if (this.orientation === 'vertical') {
+				return this.getNextColumn(key, this.direction === 'rtl', options);
+			} else {
+				return this.findKey(
+					key,
+					(key) => this.getNextColumn(key, this.direction === 'rtl', options),
+					this.isSameColumn,
+				);
+			}
+		} else if (this.orientation === 'horizontal') {
+			return this.getNextColumn(key, this.direction === 'rtl', options);
+		}
+
+		return null;
+	}
+
+	getKeyLeftOf?(key: Key, options?: { includeDisabled?: boolean }): Key | null {
+		let layoutDelegateMethod =
+			this.direction === 'ltr' ? ('getKeyLeftOf' as const) : ('getKeyRightOf' as const);
+		if (this.layoutDelegate[layoutDelegateMethod]) {
+			let nextKey: Key | null = this.layoutDelegate[layoutDelegateMethod]!(key);
+			return this.findNextNonDisabled(
+				nextKey,
+				(key) => this.layoutDelegate[layoutDelegateMethod]!(key),
+				options?.includeDisabled,
+			);
+		}
+
+		if (this.layout === 'grid') {
+			if (this.orientation === 'vertical') {
+				return this.getNextColumn(key, this.direction === 'ltr', options);
+			} else {
+				return this.findKey(
+					key,
+					(key) => this.getNextColumn(key, this.direction === 'ltr', options),
+					this.isSameColumn,
+				);
+			}
+		} else if (this.orientation === 'horizontal') {
+			return this.getNextColumn(key, this.direction === 'ltr', options);
+		}
+
+		return null;
+	}
+
+	getFirstKey(): Key | null {
+		let key = this.collection.getFirstKey();
+		return this.findNextNonDisabled(key, (key) => this.collection.getKeyAfter(key));
+	}
+
+	getLastKey(): Key | null {
+		let key = this.collection.getLastKey();
+		return this.findNextNonDisabled(key, (key) => this.collection.getKeyBefore(key));
+	}
+
+	getKeyPageAbove(key: Key): Key | null {
+		let menu = this.ref.current;
+		let itemRect = this.layoutDelegate.getItemRect(key);
+		if (!itemRect) {
+			return null;
+		}
+
+		let reversed = this.isReversed(key);
+		if (menu && !isScrollable(menu)) {
+			return this.getFirstKey();
+		}
+
+		let nextKey: Key | null = key;
+		if (this.orientation === 'horizontal') {
+			let pageX = Math.max(
+				0,
+				itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width,
+			);
+
+			while (itemRect && itemRect.x > pageX && nextKey != null) {
+				nextKey = this.getKeyAbove(nextKey);
+				itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
+			}
+		} else {
+			let visibleRect = this.layoutDelegate.getVisibleRect();
+			// column reverse makes y negative for items so we need to instead do current pos - height instead
+			let pageY = reversed
+				? itemRect.y - visibleRect.height
+				: Math.max(0, itemRect.y + itemRect.height - visibleRect.height);
+
+			while (itemRect && itemRect.y > pageY && nextKey != null) {
+				nextKey = this.getKeyAbove(nextKey);
+				itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
+			}
+		}
+
+		return nextKey ?? (reversed ? this.getLastKey() : this.getFirstKey());
+	}
+
+	getKeyPageBelow(key: Key): Key | null {
+		let menu = this.ref.current;
+		let itemRect = this.layoutDelegate.getItemRect(key);
+		if (!itemRect) {
+			return null;
+		}
+
+		let reversed = this.isReversed(key);
+		if (menu && !isScrollable(menu)) {
+			return this.getLastKey();
+		}
+
+		let nextKey: Key | null = key;
+		if (this.orientation === 'horizontal') {
+			let pageX = Math.min(
+				this.layoutDelegate.getContentSize().width,
+				itemRect.x - itemRect.width + this.layoutDelegate.getVisibleRect().width,
+			);
+
+			while (itemRect && itemRect.x < pageX && nextKey != null) {
+				nextKey = this.getKeyBelow(nextKey);
+				itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
+			}
+		} else {
+			let pageY = Math.min(
+				this.layoutDelegate.getContentSize().height,
+				itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height,
+			);
+
+			while (itemRect && itemRect.y < pageY && nextKey != null) {
+				nextKey = this.getKeyBelow(nextKey);
+				itemRect = nextKey == null ? null : this.layoutDelegate.getItemRect(nextKey);
+			}
+		}
+
+		return nextKey ?? (reversed ? this.getFirstKey() : this.getLastKey());
+	}
+
+	getKeyForSearch(search: string, fromKey?: Key): Key | null {
+		if (!this.collator) {
+			return null;
+		}
+
+		let collection = this.collection;
+		let key = fromKey || this.getFirstKey();
+		while (key != null) {
+			let item = collection.getItem(key);
+			if (!item) {
+				return null;
+			}
+			let substring = item.textValue.slice(0, search.length);
+			if (item.textValue && this.collator.compare(substring, search) === 0) {
+				return key;
+			}
+
+			key = this.getNextKey(key);
+		}
+
+		return null;
+	}
+}