@octanejs/aria 0.0.4 → 0.0.6

package/src/utils/useLoadMoreSentinel.ts

@@ -0,0 +1,78 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/useLoadMoreSentinel.ts
+// — react-aria's private `useLoadMoreSentinel` util, exposed to RAC as
+// 'react-aria/private/utils/useLoadMoreSentinel'). First landed module-locally in
+// ./components/ListBox.ts; hoisted here verbatim once GridList became the second
+// consumer. octane adaptations: private-util slot threading (the trailing `slot`
+// parameter — callers pass their derived sub-slot); explicit dep arrays are
+// preserved verbatim.
+import type { AsyncLoadable, Collection as ICollection, Node } from '@react-types/shared';
+
+import { useRef } from 'octane';
+
+import { subSlot } from '../internal';
+import { getScrollParent } from './getScrollParent';
+import { useEffectEvent } from './useEffectEvent';
+import { useLayoutEffect } from './useLayoutEffect';
+
+type RefObject<T> = { current: T };
+
+export interface LoadMoreSentinelProps extends Omit<AsyncLoadable, 'isLoading'> {
+	collection: ICollection<Node<any>>;
+	/**
+	 * The amount of offset from the bottom of your scrollable region that should trigger load more.
+	 * Uses a percentage value relative to the scroll body's client height. Load more is then
+	 * triggered when your current scroll position's distance from the bottom of the currently loaded
+	 * list of items is less than or equal to the provided value. (e.g. 1 = 100% of the scroll
+	 * region's height).
+	 *
+	 * @default 1
+	 */
+	scrollOffset?: number;
+}
+
+export function useLoadMoreSentinel(
+	props: LoadMoreSentinelProps,
+	ref: RefObject<HTMLElement | null>,
+	slot: symbol | undefined,
+): void {
+	let { collection, onLoadMore, scrollOffset = 1 } = props;
+
+	let sentinelObserver = useRef<IntersectionObserver | null>(null, subSlot(slot, 'observer'));
+
+	let triggerLoadMore = useEffectEvent(
+		(entries: IntersectionObserverEntry[]) => {
+			// Use "isIntersecting" over an equality check of 0 since it seems like there is cases where
+			// a intersection ratio of 0 can be reported when isIntersecting is actually true
+			for (let entry of entries) {
+				// Note that this will be called if the collection changes, even if onLoadMore was already called and is being processed.
+				// Up to user discretion as to how to handle these multiple onLoadMore calls
+				if (entry.isIntersecting && onLoadMore) {
+					onLoadMore();
+				}
+			}
+		},
+		subSlot(slot, 'trigger'),
+	);
+
+	useLayoutEffect(
+		() => {
+			if (ref.current) {
+				// Tear down and set up a new IntersectionObserver when the collection changes so that we can properly trigger additional loadMores if there is room for more items
+				// Need to do this tear down and set up since using a large rootMargin will mean the observer's callback isn't called even when scrolling the item into view beause its visibility hasn't actually changed
+				sentinelObserver.current = new IntersectionObserver(triggerLoadMore, {
+					root: getScrollParent(ref?.current) as HTMLElement,
+					rootMargin: `0px ${100 * scrollOffset}% ${100 * scrollOffset}% ${100 * scrollOffset}%`,
+				});
+				sentinelObserver.current.observe(ref.current);
+			}
+
+			return () => {
+				if (sentinelObserver.current) {
+					sentinelObserver.current.disconnect();
+				}
+			};
+		},
+		[collection, ref, scrollOffset],
+		subSlot(slot, 'observe'),
+	);
+}

package/src/utils/useViewportSize.ts

@@ -0,0 +1,123 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/useViewportSize.ts).
+// octane adaptations: hooks come from 'octane'; the public hook gets the binding's slot
+// threading (splitSlot/subSlot); the explicit `[]` dep array on the listener effect is
+// preserved verbatim.
+import { useEffect, useState } from 'octane';
+
+import { getActiveElement, getEventTarget } from './shadowdom/DOMFunctions';
+import { isIOS } from './platform';
+import { S, splitSlot, subSlot } from '../internal';
+import { useIsSSR } from '../ssr/SSRProvider';
+import { willOpenKeyboard } from './keyboard';
+
+interface ViewportSize {
+	width: number;
+	height: number;
+}
+
+let visualViewport = typeof document !== 'undefined' && window.visualViewport;
+
+export function useViewportSize(): ViewportSize;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useViewportSize(slot: symbol | undefined): ViewportSize;
+export function useViewportSize(...args: any[]): ViewportSize {
+	const [, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useViewportSize');
+
+	let isSSR = useIsSSR(subSlot(slot, 'ssr'));
+	let [size, setSize] = useState(
+		() => (isSSR ? { width: 0, height: 0 } : getViewportSize()),
+		subSlot(slot, 'size'),
+	);
+
+	useEffect(
+		() => {
+			let updateSize = (newSize: ViewportSize) => {
+				setSize((size: ViewportSize) => {
+					if (newSize.width === size.width && newSize.height === size.height) {
+						return size;
+					}
+					return newSize;
+				});
+			};
+
+			// Use visualViewport api to track available height even on iOS virtual keyboard opening
+			let onResize = () => {
+				// Ignore updates when zoomed.
+				if (visualViewport && visualViewport.scale > 1) {
+					return;
+				}
+
+				updateSize(getViewportSize());
+			};
+
+			// When closing the keyboard, iOS does not fire the visual viewport resize event until the animation is complete.
+			// We can anticipate this and resize early by handling the blur event and using the layout size.
+			let frame: number;
+			let onBlur = (e: FocusEvent) => {
+				if (visualViewport && visualViewport.scale > 1) {
+					return;
+				}
+
+				if (willOpenKeyboard(getEventTarget(e) as Element)) {
+					// Wait one frame to see if a new element gets focused.
+					frame = requestAnimationFrame(() => {
+						let activeElement = getActiveElement();
+						if (!activeElement || !willOpenKeyboard(activeElement)) {
+							updateSize({
+								width: document.documentElement.clientWidth,
+								height: document.documentElement.clientHeight,
+							});
+						}
+					});
+				}
+			};
+
+			updateSize(getViewportSize());
+
+			if (isIOS()) {
+				window.addEventListener('blur', onBlur, true);
+			}
+
+			if (!visualViewport) {
+				window.addEventListener('resize', onResize);
+			} else {
+				visualViewport.addEventListener('resize', onResize);
+			}
+
+			return () => {
+				cancelAnimationFrame(frame);
+				if (isIOS()) {
+					window.removeEventListener('blur', onBlur, true);
+				}
+				if (!visualViewport) {
+					window.removeEventListener('resize', onResize);
+				} else {
+					visualViewport.removeEventListener('resize', onResize);
+				}
+			};
+		},
+		[],
+		subSlot(slot, 'listen'),
+	);
+
+	return size;
+}
+
+/**
+ * Get the viewport size without the scrollbar.
+ */
+function getViewportSize(): ViewportSize {
+	return {
+		// Multiply by the visualViewport scale to get the "natural" size, unaffected by pinch zooming.
+		width: visualViewport
+			? // The visual viewport width may include the scrollbar gutter. We should use the minimum width between
+				// the visual viewport and the document element to ensure that the scrollbar width is always excluded.
+				// See: https://github.com/w3c/csswg-drafts/issues/8099
+				Math.min(visualViewport.width * visualViewport.scale, document.documentElement.clientWidth)
+			: document.documentElement.clientWidth,
+		height: visualViewport
+			? visualViewport.height * visualViewport.scale
+			: document.documentElement.clientHeight,
+	};
+}