@octanejs/aria 0.0.40 → 0.0.41

package/src/stately/virtualizer/Layout.tsx

@@ -0,0 +1,105 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/virtualizer/Layout.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 { InvalidationContext } from './types';
+import { ItemDropTarget, Key, LayoutDelegate, Node } from '@react-types/shared';
+import { LayoutInfo } from './LayoutInfo';
+import { Rect } from './Rect';
+import { Size } from './Size';
+import { Virtualizer } from './Virtualizer';
+
+/**
+ * Virtualizer supports arbitrary layout objects, which compute what items are visible, and how
+ * to position and style them. However, layouts do not render items directly. Instead,
+ * layouts produce lightweight LayoutInfo objects which describe various properties of an item,
+ * such as its position and size. The Virtualizer is then responsible for creating the actual
+ * views as needed, based on this layout information.
+ *
+ * Every layout extends from the Layout abstract base class. Layouts must implement the
+ * `getVisibleLayoutInfos`, `getLayoutInfo`, and `getContentSize` methods. All other methods can be
+ * optionally overridden to implement custom behavior.
+ */
+export abstract class Layout<T extends object = Node<any>, O = any> implements LayoutDelegate {
+	/** The Virtualizer the layout is currently attached to. */
+	virtualizer: Virtualizer<T, any> | null = null;
+
+	/**
+	 * Returns an array of `LayoutInfo` objects which are inside the given rectangle.
+	 * Should be implemented by subclasses.
+	 *
+	 * @param rect The rectangle that should contain the returned LayoutInfo objects.
+	 */
+	abstract getVisibleLayoutInfos(rect: Rect): LayoutInfo[];
+
+	/**
+	 * Returns a `LayoutInfo` for the given key.
+	 * Should be implemented by subclasses.
+	 *
+	 * @param key The key of the LayoutInfo to retrieve.
+	 */
+	abstract getLayoutInfo(key: Key): LayoutInfo | null;
+
+	/**
+	 * Returns size of the content. By default, it returns virtualizer's size.
+	 */
+	abstract getContentSize(): Size;
+
+	/**
+	 * Returns whether the layout should invalidate in response to
+	 * visible rectangle changes. By default, it only invalidates
+	 * when the virtualizer's size changes. Return true always
+	 * to make the layout invalidate while scrolling (e.g. sticky headers).
+	 */
+	shouldInvalidate(newRect: Rect, oldRect: Rect): boolean {
+		// By default, invalidate when the size changes
+		return newRect.width !== oldRect.width || newRect.height !== oldRect.height;
+	}
+
+	/**
+	 * Returns whether the layout should invalidate when the layout options change.
+	 * By default it invalidates when the object identity changes. Override this
+	 * method to optimize layout updates based on specific option changes.
+	 */
+	shouldInvalidateLayoutOptions(newOptions: O, oldOptions: O): boolean {
+		return newOptions !== oldOptions;
+	}
+
+	/**
+	 * This method allows the layout to perform any pre-computation
+	 * it needs to in order to prepare LayoutInfos for retrieval.
+	 * Called by the virtualizer before `getVisibleLayoutInfos`
+	 * or `getLayoutInfo` are called.
+	 */
+	update(invalidationContext: InvalidationContext<O>): void {} // eslint-disable-line @typescript-eslint/no-unused-vars
+
+	/**
+	 * Updates the size of the given item.
+	 */
+	updateItemSize?(key: Key, size: Size): boolean;
+
+	/**
+	 * Returns a `LayoutInfo` for the given drop target.
+	 */
+	getDropTargetLayoutInfo?(target: ItemDropTarget): LayoutInfo;
+
+	/** @private */
+	getItemRect(key: Key): Rect | null {
+		return this.getLayoutInfo(key)?.rect ?? null;
+	}
+
+	/** @private */
+	getVisibleRect(): Rect {
+		return this.virtualizer!.visibleRect;
+	}
+}

package/src/stately/virtualizer/LayoutInfo.tsx

@@ -0,0 +1,127 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/virtualizer/LayoutInfo.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 { Key } from '@react-types/shared';
+import { Rect } from './Rect';
+
+/**
+ * Instances of this lightweight class are created by `Layout` subclasses
+ * to represent each item in the `Virtualizer`. LayoutInfo objects describe
+ * various properties of an item, such as its position and size, and style information.
+ * The virtualizer uses this information when creating actual DOM elements to display.
+ */
+export class LayoutInfo {
+	/**
+	 * The type of element represented by this LayoutInfo. Should match the `type` of the
+	 * corresponding collection node.
+	 */
+	type: string;
+
+	/**
+	 * A unique key for this LayoutInfo. Should match the `key` of the corresponding collection node.
+	 */
+	key: Key;
+
+	/**
+	 * The key for a parent LayoutInfo, if any.
+	 */
+	parentKey: Key | null;
+
+	/**
+	 * Content for this item if it was generated by the layout rather than coming from the Collection.
+	 */
+	content: any | null;
+
+	/**
+	 * The rectangle describing the size and position of this element.
+	 */
+	rect: Rect;
+
+	/**
+	 * Whether the size is estimated. `false` by default.
+	 * Items with estimated sizes will be measured the first time they are added to the DOM.
+	 * The estimated size is used to calculate the size and position of the scrollbar.
+	 *
+	 * @default false
+	 */
+	estimatedSize: boolean;
+
+	/**
+	 * Whether the layout info sticks to the viewport when scrolling.
+	 *
+	 * @default false
+	 */
+	isSticky: boolean;
+
+	/**
+	 * The element's opacity.
+	 *
+	 * @default 1
+	 */
+	opacity: number;
+
+	/**
+	 * A CSS transform string to apply to the element. `null` by default.
+	 */
+	transform: string | null;
+
+	/**
+	 * The z-index of the element. 0 by default.
+	 */
+	zIndex: number;
+
+	/**
+	 * Whether the element allows its contents to overflow its container.
+	 *
+	 * @default false
+	 */
+	allowOverflow: boolean;
+
+	/**
+	 * @param type The type of element represented by this LayoutInfo. Should match the `type` of the
+	 *   corresponding collection node.
+	 * @param key A unique key for this LayoutInfo. Should match the `key` of the corresponding
+	 *   collection node.
+	 * @param rect The rectangle describing the size and position of this element.
+	 */
+	constructor(type: string, key: Key, rect: Rect) {
+		this.type = type;
+		this.key = key;
+		this.parentKey = null;
+		this.content = null;
+		this.rect = rect;
+		this.estimatedSize = false;
+		this.isSticky = false;
+		this.opacity = 1;
+		this.transform = null;
+		this.zIndex = 0;
+		this.allowOverflow = false;
+	}
+
+	/**
+	 * Returns a copy of the LayoutInfo.
+	 */
+	copy(): LayoutInfo {
+		let res = new LayoutInfo(this.type, this.key, this.rect.copy());
+		res.estimatedSize = this.estimatedSize;
+		res.opacity = this.opacity;
+		res.transform = this.transform;
+		res.parentKey = this.parentKey;
+		res.content = this.content;
+		res.isSticky = this.isSticky;
+		res.zIndex = this.zIndex;
+		res.allowOverflow = this.allowOverflow;
+		return res;
+	}
+}

package/src/stately/virtualizer/OverscanManager.tsx

@@ -0,0 +1,56 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/virtualizer/OverscanManager.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 { Point } from './Point';
+import { Rect } from './Rect';
+
+export class OverscanManager {
+	private startTime = 0;
+	private velocity = new Point(0, 0);
+	private visibleRect = new Rect();
+
+	setVisibleRect(rect: Rect): void {
+		let time = performance.now() - this.startTime;
+		if (time < 500) {
+			if (rect.x !== this.visibleRect.x && time > 0) {
+				this.velocity.x = (rect.x - this.visibleRect.x) / time;
+			}
+
+			if (rect.y !== this.visibleRect.y && time > 0) {
+				this.velocity.y = (rect.y - this.visibleRect.y) / time;
+			}
+		}
+
+		this.startTime = performance.now();
+		this.visibleRect = rect;
+	}
+
+	getOverscannedRect(): Rect {
+		let overscanned = this.visibleRect.copy();
+
+		let overscanY = this.visibleRect.height / 3;
+		overscanned.height += overscanY;
+		if (this.velocity.y < 0) {
+			overscanned.y -= overscanY;
+		}
+
+		let overscanX = this.visibleRect.width / 3;
+		overscanned.width += overscanX;
+		if (this.velocity.x < 0) {
+			overscanned.x -= overscanX;
+		}
+
+		return overscanned;
+	}
+}

package/src/stately/virtualizer/Point.tsx

@@ -0,0 +1,47 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/virtualizer/Point.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.
+ */
+
+export class Point {
+	/** The x-coordinate of the point. */
+	x: number;
+
+	/** The y-coordinate of the point. */
+	y: number;
+
+	constructor(x = 0, y = 0) {
+		this.x = x;
+		this.y = y;
+	}
+
+	/**
+	 * Returns a copy of this point.
+	 */
+	copy(): Point {
+		return new Point(this.x, this.y);
+	}
+
+	/**
+	 * Checks if two points are equal.
+	 */
+	equals(point: Point): boolean {
+		return this.x === point.x && this.y === point.y;
+	}
+
+	/**
+	 * Returns true if this point is the origin.
+	 */
+	isOrigin(): boolean {
+		return this.x === 0 && this.y === 0;
+	}
+}

package/src/stately/virtualizer/Rect.tsx

@@ -0,0 +1,194 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/virtualizer/Rect.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 { Point } from './Point';
+import { Size } from './Size';
+
+export type RectCorner = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+
+export interface Rect {
+	[key: string]: any;
+}
+
+/**
+ * Represents a rectangle.
+ */
+export class Rect {
+	/** The x-coordinate of the rectangle. */
+	x: number;
+
+	/** The y-coordinate of the rectangle. */
+	y: number;
+
+	/** The width of the rectangle. */
+	width: number;
+
+	/** The height of the rectangle. */
+	height: number;
+
+	constructor(x = 0, y = 0, width = 0, height = 0) {
+		this.x = x;
+		this.y = y;
+		this.width = width;
+		this.height = height;
+	}
+
+	/**
+	 * The maximum x-coordinate in the rectangle.
+	 */
+	get maxX(): number {
+		return this.x + this.width;
+	}
+
+	/**
+	 * The maximum y-coordinate in the rectangle.
+	 */
+	get maxY(): number {
+		return this.y + this.height;
+	}
+
+	/**
+	 * The area of the rectangle.
+	 */
+	get area(): number {
+		return this.width * this.height;
+	}
+
+	/**
+	 * The top left corner of the rectangle.
+	 */
+	get topLeft(): Point {
+		return new Point(this.x, this.y);
+	}
+
+	/**
+	 * The top right corner of the rectangle.
+	 */
+	get topRight(): Point {
+		return new Point(this.maxX, this.y);
+	}
+
+	/**
+	 * The bottom left corner of the rectangle.
+	 */
+	get bottomLeft(): Point {
+		return new Point(this.x, this.maxY);
+	}
+
+	/**
+	 * The bottom right corner of the rectangle.
+	 */
+	get bottomRight(): Point {
+		return new Point(this.maxX, this.maxY);
+	}
+
+	/**
+	 * Returns whether this rectangle intersects another rectangle.
+	 *
+	 * @param rect - The rectangle to check.
+	 */
+	intersects(rect: Rect): boolean {
+		let isTestEnv = process.env.NODE_ENV === 'test' && !process.env.VIRT_ON;
+		return (
+			(isTestEnv || (this.area > 0 && rect.area > 0)) &&
+			this.x <= rect.x + rect.width &&
+			rect.x <= this.x + this.width &&
+			this.y <= rect.y + rect.height &&
+			rect.y <= this.y + this.height
+		);
+	}
+
+	/**
+	 * Returns whether this rectangle fully contains another rectangle.
+	 *
+	 * @param rect - The rectangle to check.
+	 */
+	containsRect(rect: Rect): boolean {
+		return this.x <= rect.x && this.y <= rect.y && this.maxX >= rect.maxX && this.maxY >= rect.maxY;
+	}
+
+	/**
+	 * Returns whether the rectangle contains the given point.
+	 *
+	 * @param point - The point to check.
+	 */
+	containsPoint(point: Point): boolean {
+		return this.x <= point.x && this.y <= point.y && this.maxX >= point.x && this.maxY >= point.y;
+	}
+
+	/**
+	 * Returns the first corner of this rectangle (from top to bottom, left to right)
+	 * that is contained in the given rectangle, or null of the rectangles do not intersect.
+	 *
+	 * @param rect - The rectangle to check.
+	 */
+	getCornerInRect(rect: Rect): RectCorner | null {
+		for (let key of ['topLeft', 'topRight', 'bottomLeft', 'bottomRight']) {
+			if (rect.containsPoint(this[key])) {
+				return key as RectCorner;
+			}
+		}
+
+		return null;
+	}
+
+	equals(rect: Rect): boolean {
+		return (
+			rect.x === this.x &&
+			rect.y === this.y &&
+			rect.width === this.width &&
+			rect.height === this.height
+		);
+	}
+
+	pointEquals(point: Point | Rect): boolean {
+		return this.x === point.x && this.y === point.y;
+	}
+
+	sizeEquals(size: Size | Rect): boolean {
+		return this.width === size.width && this.height === size.height;
+	}
+
+	/**
+	 * Returns the union of this Rect and another.
+	 */
+	union(other: Rect): Rect {
+		let x = Math.min(this.x, other.x);
+		let y = Math.min(this.y, other.y);
+		let width = Math.max(this.maxX, other.maxX) - x;
+		let height = Math.max(this.maxY, other.maxY) - y;
+		return new Rect(x, y, width, height);
+	}
+
+	/**
+	 * Returns the intersection of this Rect with another.
+	 * If the rectangles do not intersect, an all zero Rect is returned.
+	 */
+	intersection(other: Rect): Rect {
+		if (!this.intersects(other)) {
+			return new Rect(0, 0, 0, 0);
+		}
+
+		let x = Math.max(this.x, other.x);
+		let y = Math.max(this.y, other.y);
+		return new Rect(x, y, Math.min(this.maxX, other.maxX) - x, Math.min(this.maxY, other.maxY) - y);
+	}
+
+	/**
+	 * Returns a copy of this rectangle.
+	 */
+	copy(): Rect {
+		return new Rect(this.x, this.y, this.width, this.height);
+	}
+}

package/src/stately/virtualizer/ReusableView.tsx

@@ -0,0 +1,101 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/virtualizer/ReusableView.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 { Key } from '@react-types/shared';
+import { LayoutInfo } from './LayoutInfo';
+import { Virtualizer } from './Virtualizer';
+
+let KEY = 0;
+
+/**
+ * `Virtualizer` creates instances of the `ReusableView` class to
+ * represent views currently being displayed.
+ */
+export class ReusableView<T extends object, V> {
+	/** The Virtualizer this view is a part of. */
+	virtualizer: Virtualizer<T, V>;
+
+	/** The LayoutInfo this view is currently representing. */
+	layoutInfo: LayoutInfo | null;
+
+	/** The content currently being displayed by this view, set by the virtualizer. */
+	content: T | null;
+
+	rendered: V | null;
+
+	viewType: string;
+	key: Key;
+
+	children: Set<ChildView<T, V>>;
+	reusableViews: Map<string, ChildView<T, V>[]>;
+
+	constructor(virtualizer: Virtualizer<T, V>, viewType: string) {
+		this.virtualizer = virtualizer;
+		this.key = ++KEY;
+		this.viewType = viewType;
+		this.children = new Set();
+		this.reusableViews = new Map();
+		this.layoutInfo = null;
+		this.content = null;
+		this.rendered = null;
+	}
+
+	/**
+	 * Prepares the view for reuse. Called just before the view is removed from the DOM.
+	 */
+	prepareForReuse(): void {
+		this.content = null;
+		this.rendered = null;
+		this.layoutInfo = null;
+	}
+
+	getReusableView(reuseType: string): ChildView<T, V> {
+		// Reusable view queue should be FIFO so that DOM order remains consistent during scrolling.
+		// For example, cells within a row should remain in the same order even if the row changes contents.
+		// The cells within a row are removed from their parent in order. If the row is reused, the cells
+		// should be reused in the new row in the same order they were before.
+		let reusable = this.reusableViews.get(reuseType);
+		let view =
+			reusable && reusable.length > 0
+				? reusable.shift()!
+				: new ChildView<T, V>(this.virtualizer, this, reuseType);
+
+		return view;
+	}
+
+	reuseChild(child: ChildView<T, V>): void {
+		child.prepareForReuse();
+		let reusable = this.reusableViews.get(child.viewType);
+		if (!reusable) {
+			reusable = [];
+			this.reusableViews.set(child.viewType, reusable);
+		}
+		reusable.push(child);
+	}
+}
+
+export class RootView<T extends object, V> extends ReusableView<T, V> {
+	constructor(virtualizer: Virtualizer<T, V>) {
+		super(virtualizer, 'root');
+	}
+}
+
+export class ChildView<T extends object, V> extends ReusableView<T, V> {
+	parent: ReusableView<T, V>;
+
+	constructor(virtualizer: Virtualizer<T, V>, parent: ReusableView<T, V>, viewType: string) {
+		super(virtualizer, viewType);
+		this.parent = parent;
+	}
+}

package/src/stately/virtualizer/Size.tsx

@@ -0,0 +1,48 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-stately/src/virtualizer/Size.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.
+ */
+
+export interface Size {
+	[key: string]: any;
+}
+
+export class Size {
+	width: number;
+	height: number;
+
+	constructor(width = 0, height = 0) {
+		this.width = Math.max(width, 0);
+		this.height = Math.max(height, 0);
+	}
+
+	/**
+	 * Returns a copy of this size.
+	 */
+	copy(): Size {
+		return new Size(this.width, this.height);
+	}
+
+	/**
+	 * Returns whether this size is equal to another one.
+	 */
+	equals(other: Size): boolean {
+		return this.width === other.width && this.height === other.height;
+	}
+
+	/**
+	 * The total area of the Size.
+	 */
+	get area(): number {
+		return this.width * this.height;
+	}
+}