@octanejs/aria 0.0.40 → 0.0.42

package/src/dnd/constants.tsx

@@ -0,0 +1,93 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/dnd/constants.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 { DropOperation } from '@react-types/shared';
+
+export interface IDropOperation {
+	readonly none: 0;
+	readonly cancel: 0;
+	readonly move: number;
+	readonly copy: number;
+	readonly link: number;
+	readonly all: number;
+}
+
+export enum DROP_OPERATION {
+	none = 0,
+	cancel = 0,
+	move = 1 << 0,
+	copy = 1 << 1,
+	link = 1 << 2,
+	all = move | copy | link,
+}
+interface DropOperationAllowed extends IDropOperation {
+	readonly copyMove: number;
+	readonly copyLink: number;
+	readonly linkMove: number;
+	readonly all: number;
+	readonly uninitialized: number;
+}
+// See https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/effectAllowed
+export const DROP_OPERATION_ALLOWED: DropOperationAllowed = {
+	...DROP_OPERATION,
+	copyMove: DROP_OPERATION.copy | DROP_OPERATION.move,
+	copyLink: DROP_OPERATION.copy | DROP_OPERATION.link,
+	linkMove: DROP_OPERATION.link | DROP_OPERATION.move,
+	all: DROP_OPERATION.all,
+	uninitialized: DROP_OPERATION.all,
+};
+
+interface EffectAllowed {
+	0: 'none' | 'cancel';
+	1: 'move';
+	2: 'copy';
+	3: 'copyMove';
+	4: 'link';
+	5: 'linkMove';
+	6: 'copyLink';
+	7: 'all';
+}
+
+export const EFFECT_ALLOWED: EffectAllowed = invert(
+	DROP_OPERATION_ALLOWED,
+) as unknown as EffectAllowed;
+EFFECT_ALLOWED[DROP_OPERATION.all] = 'all'; // ensure we don't map to 'uninitialized'.
+
+type DropEffect = 'none' | 'link' | 'copy' | 'move';
+
+export const DROP_EFFECT_TO_DROP_OPERATION: { [K in DropEffect]: DropOperation } = {
+	none: 'cancel',
+	link: 'link',
+	copy: 'copy',
+	move: 'move',
+};
+
+export const DROP_OPERATION_TO_DROP_EFFECT: { [K in DropOperation]: DropEffect } = invert(
+	DROP_EFFECT_TO_DROP_OPERATION,
+);
+
+function invert<T extends string | number, C extends string | number>(
+	object: Record<T, C>,
+): Record<C, T> {
+	let res: Record<C, T> = {} as Record<C, T>;
+	for (let key in object) {
+		res[object[key]] = key as T;
+	}
+
+	return res;
+}
+
+export const NATIVE_DRAG_TYPES: Set<string> = new Set(['text/plain', 'text/uri-list', 'text/html']);
+export const CUSTOM_DRAG_TYPE = 'application/vnd.react-aria.items+json';
+export const GENERIC_TYPE = 'application/octet-stream';

package/src/dnd/useAutoScroll.tsx

@@ -0,0 +1,116 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/dnd/useAutoScroll.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 { getScrollParent } from '../utils/getScrollParent';
+
+import { isIOS, isWebKit } from '../utils/platform';
+import { isScrollable } from '../utils/isScrollable';
+import { RefObject } from '@react-types/shared';
+import { useCallback, useEffect, useRef } from '../compat/react';
+
+const AUTOSCROLL_AREA_SIZE = 20;
+
+interface AutoScrollAria {
+	move(x: number, y: number): void;
+	stop(): void;
+}
+
+export function useAutoScroll(ref: RefObject<Element | null>): AutoScrollAria {
+	let scrollableRef = useRef<Element>(null);
+	let scrollableX = useRef(true);
+	let scrollableY = useRef(true);
+	useEffect(() => {
+		if (ref.current) {
+			scrollableRef.current = isScrollable(ref.current)
+				? ref.current
+				: getScrollParent(ref.current);
+			let style = window.getComputedStyle(scrollableRef.current);
+			scrollableX.current = /(auto|scroll)/.test(style.overflowX);
+			scrollableY.current = /(auto|scroll)/.test(style.overflowY);
+		}
+	}, [ref]);
+
+	let state = useRef<{
+		timer: ReturnType<typeof requestAnimationFrame> | undefined;
+		dx: number;
+		dy: number;
+	}>({
+		timer: undefined,
+		dx: 0,
+		dy: 0,
+	}).current;
+
+	useEffect(() => {
+		return () => {
+			if (state.timer) {
+				cancelAnimationFrame(state.timer);
+				state.timer = undefined;
+			}
+		};
+		// state will become a new object, so it's ok to use in the dependency array for unmount
+	}, [state]);
+
+	let scroll = useCallback(() => {
+		if (scrollableX.current && scrollableRef.current) {
+			scrollableRef.current.scrollLeft += state.dx;
+		}
+		if (scrollableY.current && scrollableRef.current) {
+			scrollableRef.current.scrollTop += state.dy;
+		}
+
+		if (state.timer) {
+			state.timer = requestAnimationFrame(scroll);
+		}
+	}, [scrollableRef, state]);
+
+	return {
+		move(x, y) {
+			// Most browsers auto scroll natively, but WebKit on macOS does not (iOS does 🤷‍♂️).
+			// https://bugs.webkit.org/show_bug.cgi?id=222636
+			if (!isWebKit() || isIOS() || !scrollableRef.current) {
+				return;
+			}
+
+			let box = scrollableRef.current.getBoundingClientRect();
+			let left = AUTOSCROLL_AREA_SIZE;
+			let top = AUTOSCROLL_AREA_SIZE;
+			let bottom = box.height - AUTOSCROLL_AREA_SIZE;
+			let right = box.width - AUTOSCROLL_AREA_SIZE;
+			if (x < left || x > right || y < top || y > bottom) {
+				if (x < left) {
+					state.dx = x - left;
+				} else if (x > right) {
+					state.dx = x - right;
+				}
+				if (y < top) {
+					state.dy = y - top;
+				} else if (y > bottom) {
+					state.dy = y - bottom;
+				}
+
+				if (!state.timer) {
+					state.timer = requestAnimationFrame(scroll);
+				}
+			} else {
+				this.stop();
+			}
+		},
+		stop() {
+			if (state.timer) {
+				cancelAnimationFrame(state.timer);
+				state.timer = undefined;
+			}
+		},
+	};
+}

package/src/dnd/useClipboard.tsx

@@ -0,0 +1,160 @@
+/** @jsxImportSource octane */
+// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/dnd/useClipboard.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 { chain } from '../utils/chain';
+
+import { DOMAttributes, DragItem, DropItem } from '@react-types/shared';
+import { readFromDataTransfer, writeToDataTransfer } from './utils';
+import { useEffect, useRef } from '../compat/react';
+import { useEffectEvent } from '../utils/useEffectEvent';
+import { useFocus } from '../interactions/useFocus';
+
+export interface ClipboardProps {
+	/** A function that returns the items to copy. */
+	getItems?: (details: { action: 'cut' | 'copy' }) => DragItem[];
+	/** Handler that is called when the user triggers a copy interaction. */
+	onCopy?: () => void;
+	/** Handler that is called when the user triggers a cut interaction. */
+	onCut?: () => void;
+	/** Handler that is called when the user triggers a paste interaction. */
+	onPaste?: (items: DropItem[]) => void;
+	/** Whether the clipboard is disabled. */
+	isDisabled?: boolean;
+}
+
+export interface ClipboardResult {
+	/** Props for the element that will handle clipboard events. */
+	clipboardProps: DOMAttributes;
+}
+
+interface GlobalEventData {
+	listener: (event: Event) => void;
+	handlers: Set<(event: any) => void>;
+}
+
+const globalEvents = new Map<string, GlobalEventData>();
+function addGlobalEventListener<E extends Event>(event: string, fn: (event: E) => void) {
+	let eventData = globalEvents.get(event);
+	if (!eventData) {
+		let handlers = new Set<(e: any) => void>();
+		let listener = (e: Event) => {
+			for (let handler of handlers) {
+				handler(e);
+			}
+		};
+
+		eventData = { listener, handlers };
+		globalEvents.set(event, eventData);
+
+		document.addEventListener(event, listener);
+	}
+
+	eventData.handlers.add(fn);
+	return () => {
+		eventData.handlers.delete(fn);
+		if (eventData.handlers.size === 0) {
+			document.removeEventListener(event, eventData.listener);
+			globalEvents.delete(event);
+		}
+	};
+}
+
+/**
+ * Handles clipboard interactions for a focusable element. Supports items of multiple
+ * data types, and integrates with the operating system native clipboard.
+ */
+export function useClipboard(options: ClipboardProps): ClipboardResult {
+	let { isDisabled } = options;
+	let isFocusedRef = useRef(false);
+	let { focusProps } = useFocus({
+		onFocusChange: (isFocused) => {
+			isFocusedRef.current = isFocused;
+		},
+	});
+
+	let onBeforeCopy = useEffectEvent((e: ClipboardEvent) => {
+		// Enable the "Copy" menu item in Safari if this element is focused and copying is supported.
+		if (isFocusedRef.current && options.getItems) {
+			e.preventDefault();
+		}
+	});
+
+	let onCopy = useEffectEvent((e: ClipboardEvent) => {
+		if (!isFocusedRef.current || !options.getItems) {
+			return;
+		}
+
+		e.preventDefault();
+		if (e.clipboardData) {
+			writeToDataTransfer(e.clipboardData, options.getItems({ action: 'copy' }));
+			options.onCopy?.();
+		}
+	});
+
+	let onBeforeCut = useEffectEvent((e: ClipboardEvent) => {
+		if (isFocusedRef.current && options.onCut && options.getItems) {
+			e.preventDefault();
+		}
+	});
+
+	let onCut = useEffectEvent((e: ClipboardEvent) => {
+		if (!isFocusedRef.current || !options.onCut || !options.getItems) {
+			return;
+		}
+
+		e.preventDefault();
+		if (e.clipboardData) {
+			writeToDataTransfer(e.clipboardData, options.getItems({ action: 'cut' }));
+			options.onCut();
+		}
+	});
+
+	let onBeforePaste = useEffectEvent((e: ClipboardEvent) => {
+		// Unfortunately, e.clipboardData.types is not available in this event so we always
+		// have to enable the Paste menu item even if the type of data is unsupported.
+		if (isFocusedRef.current && options.onPaste) {
+			e.preventDefault();
+		}
+	});
+
+	let onPaste = useEffectEvent((e: ClipboardEvent) => {
+		if (!isFocusedRef.current || !options.onPaste) {
+			return;
+		}
+
+		e.preventDefault();
+		if (e.clipboardData) {
+			let items = readFromDataTransfer(e.clipboardData);
+			options.onPaste(items);
+		}
+	});
+
+	useEffect(() => {
+		if (isDisabled) {
+			return;
+		}
+		return chain(
+			addGlobalEventListener('beforecopy', onBeforeCopy),
+			addGlobalEventListener('copy', onCopy),
+			addGlobalEventListener('beforecut', onBeforeCut),
+			addGlobalEventListener('cut', onCut),
+			addGlobalEventListener('beforepaste', onBeforePaste),
+			addGlobalEventListener('paste', onPaste),
+		);
+	}, [isDisabled]);
+
+	return {
+		clipboardProps: focusProps,
+	};
+}