@octanejs/aria 0.0.3 → 0.0.5

package/src/intl/autocomplete/da-DK.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Forslag"
+}

package/src/intl/autocomplete/de-DE.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Empfehlungen"
+}

package/src/intl/autocomplete/el-GR.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Προτάσεις"
+}

package/src/intl/autocomplete/en-US.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Suggestions"
+}

package/src/intl/autocomplete/es-ES.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Sugerencias"
+}

package/src/intl/autocomplete/et-EE.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Soovitused"
+}

package/src/intl/autocomplete/fi-FI.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Ehdotukset"
+}

package/src/intl/autocomplete/fr-FR.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Suggestions"
+}

package/src/intl/autocomplete/he-IL.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "הצעות"
+}

package/src/intl/autocomplete/hr-HR.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Prijedlozi"
+}

package/src/intl/autocomplete/hu-HU.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Javaslatok"
+}

package/src/intl/autocomplete/index.ts

@@ -0,0 +1,75 @@
+// Generated locale-dictionary index for the autocomplete area — the octane equivalent of
+// upstream's Parcel glob import (`import intlMessages from '../../intl/autocomplete/*.json'`).
+// The JSON files are copied VERBATIM from .react-spectrum/packages/react-aria/intl/autocomplete/;
+// refresh them from the pinned checkout on version bumps, never hand-edit.
+import ar_AE from './ar-AE.json';
+import bg_BG from './bg-BG.json';
+import cs_CZ from './cs-CZ.json';
+import da_DK from './da-DK.json';
+import de_DE from './de-DE.json';
+import el_GR from './el-GR.json';
+import en_US from './en-US.json';
+import es_ES from './es-ES.json';
+import et_EE from './et-EE.json';
+import fi_FI from './fi-FI.json';
+import fr_FR from './fr-FR.json';
+import he_IL from './he-IL.json';
+import hr_HR from './hr-HR.json';
+import hu_HU from './hu-HU.json';
+import it_IT from './it-IT.json';
+import ja_JP from './ja-JP.json';
+import ko_KR from './ko-KR.json';
+import lt_LT from './lt-LT.json';
+import lv_LV from './lv-LV.json';
+import nb_NO from './nb-NO.json';
+import nl_NL from './nl-NL.json';
+import pl_PL from './pl-PL.json';
+import pt_BR from './pt-BR.json';
+import pt_PT from './pt-PT.json';
+import ro_RO from './ro-RO.json';
+import ru_RU from './ru-RU.json';
+import sk_SK from './sk-SK.json';
+import sl_SI from './sl-SI.json';
+import sr_SP from './sr-SP.json';
+import sv_SE from './sv-SE.json';
+import tr_TR from './tr-TR.json';
+import uk_UA from './uk-UA.json';
+import zh_CN from './zh-CN.json';
+import zh_TW from './zh-TW.json';
+
+export default {
+	'ar-AE': ar_AE,
+	'bg-BG': bg_BG,
+	'cs-CZ': cs_CZ,
+	'da-DK': da_DK,
+	'de-DE': de_DE,
+	'el-GR': el_GR,
+	'en-US': en_US,
+	'es-ES': es_ES,
+	'et-EE': et_EE,
+	'fi-FI': fi_FI,
+	'fr-FR': fr_FR,
+	'he-IL': he_IL,
+	'hr-HR': hr_HR,
+	'hu-HU': hu_HU,
+	'it-IT': it_IT,
+	'ja-JP': ja_JP,
+	'ko-KR': ko_KR,
+	'lt-LT': lt_LT,
+	'lv-LV': lv_LV,
+	'nb-NO': nb_NO,
+	'nl-NL': nl_NL,
+	'pl-PL': pl_PL,
+	'pt-BR': pt_BR,
+	'pt-PT': pt_PT,
+	'ro-RO': ro_RO,
+	'ru-RU': ru_RU,
+	'sk-SK': sk_SK,
+	'sl-SI': sl_SI,
+	'sr-SP': sr_SP,
+	'sv-SE': sv_SE,
+	'tr-TR': tr_TR,
+	'uk-UA': uk_UA,
+	'zh-CN': zh_CN,
+	'zh-TW': zh_TW,
+} as Record<string, Record<string, string>>;

package/src/intl/autocomplete/it-IT.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Suggerimenti"
+}

package/src/intl/autocomplete/ja-JP.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "候補"
+}

package/src/intl/autocomplete/ko-KR.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "제안"
+}

package/src/intl/autocomplete/lt-LT.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Pasiūlymai"
+}

package/src/intl/autocomplete/lv-LV.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Ieteikumi"
+}

package/src/intl/autocomplete/nb-NO.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Forslag"
+}

package/src/intl/autocomplete/nl-NL.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Suggesties"
+}

package/src/intl/autocomplete/pl-PL.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Sugestie"
+}

package/src/intl/autocomplete/pt-BR.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Sugestões"
+}

package/src/intl/autocomplete/pt-PT.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Sugestões"
+}

package/src/intl/autocomplete/ro-RO.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Sugestii"
+}

package/src/intl/autocomplete/ru-RU.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Предложения"
+}

package/src/intl/autocomplete/sk-SK.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Návrhy"
+}

package/src/intl/autocomplete/sl-SI.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Predlogi"
+}

package/src/intl/autocomplete/sr-SP.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Predlozi"
+}

package/src/intl/autocomplete/sv-SE.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Förslag"
+}

package/src/intl/autocomplete/tr-TR.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Öneriler"
+}

package/src/intl/autocomplete/uk-UA.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "Пропозиції"
+}

package/src/intl/autocomplete/zh-CN.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "建议"
+}

package/src/intl/autocomplete/zh-TW.json

@@ -0,0 +1,3 @@
+{
+  "collectionLabel": "建議"
+}

package/src/stately/autocomplete/useAutocompleteState.ts

@@ -0,0 +1,85 @@
+// Ported from react-stately (source: .react-spectrum/packages/react-stately/src/autocomplete/useAutocompleteState.ts).
+// octane adaptations: public-hook slot threading (splitSlot/subSlot) per the binding
+// convention; `ReactNode` → a structural `any` alias (octane renderables); the public
+// value-level `onInputChange(value)` callback is unchanged (the onInput rule applies
+// only to DOM wiring, which lives in useTextField/useAutocomplete).
+import { useState } from 'octane';
+
+import { S, splitSlot, subSlot } from '../../internal';
+import { useControlledState } from '../utils/useControlledState';
+
+// octane adaptation: structural alias for React's ReactNode.
+type ReactNode = any;
+
+export interface AutocompleteState {
+	/** The current value of the autocomplete input. */
+	inputValue: string;
+	/** Sets the value of the autocomplete input. */
+	setInputValue(value: string): void;
+	/** The id of the current aria-activedescendant of the autocomplete input. */
+	focusedNodeId: string | null;
+	/** Sets the id of the current aria-activedescendant of the autocomplete input. */
+	setFocusedNodeId(value: string | null): void;
+}
+
+export interface AutocompleteProps {
+	/** The value of the autocomplete input (controlled). */
+	inputValue?: string;
+	/** The default value of the autocomplete input (uncontrolled). */
+	defaultInputValue?: string;
+	/** Handler that is called when the autocomplete input value changes. */
+	onInputChange?: (value: string) => void;
+	/**
+	 * The children wrapped by the autocomplete. Consists of at least an input element and a
+	 * collection element to filter.
+	 */
+	children: ReactNode;
+}
+
+// Emulate our other stately hooks which accept all "base" props even if not used
+export interface AutocompleteStateOptions extends Omit<AutocompleteProps, 'children'> {}
+
+/**
+ * Provides state management for an autocomplete component.
+ */
+export function useAutocompleteState(props: AutocompleteStateOptions): AutocompleteState;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useAutocompleteState(
+	props: AutocompleteStateOptions,
+	slot: symbol | undefined,
+): AutocompleteState;
+export function useAutocompleteState(...args: any[]): AutocompleteState {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useAutocompleteState');
+	const props = user[0] as AutocompleteStateOptions;
+
+	let {
+		onInputChange: propsOnInputChange,
+		inputValue: propsInputValue,
+		defaultInputValue: propsDefaultInputValue = '',
+	} = props;
+
+	let onInputChange = (value: string) => {
+		if (propsOnInputChange) {
+			propsOnInputChange(value);
+		}
+	};
+
+	let [focusedNodeId, setFocusedNodeId] = useState<string | null>(
+		null,
+		subSlot(slot, 'focusedNodeId'),
+	);
+	let [inputValue, setInputValue] = useControlledState(
+		propsInputValue,
+		propsDefaultInputValue!,
+		onInputChange,
+		subSlot(slot, 'inputValue'),
+	);
+
+	return {
+		inputValue,
+		setInputValue,
+		focusedNodeId,
+		setFocusedNodeId,
+	};
+}

package/src/utils/animation.ts

@@ -0,0 +1,149 @@
+// Ported from react-aria (source: .react-spectrum/packages/react-aria/src/utils/animation.ts).
+// octane adaptations: `flushSync` comes from 'octane' (not react-dom); public hooks get the
+// binding's slot threading (splitSlot/subSlot); explicit dep arrays are preserved verbatim.
+// In environments without `Element#getAnimations` (jsdom), the animation completes
+// immediately, exactly like upstream's JSDOM branch.
+import { flushSync, useCallback, useState } from 'octane';
+
+import { S, splitSlot, subSlot } from '../internal';
+import { useLayoutEffect } from './useLayoutEffect';
+
+type RefObject<T> = { current: T };
+
+export function useEnterAnimation(ref: RefObject<HTMLElement | null>, isReady?: boolean): boolean;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useEnterAnimation(
+	ref: RefObject<HTMLElement | null>,
+	isReady: boolean | undefined,
+	slot: symbol | undefined,
+): boolean;
+export function useEnterAnimation(...args: any[]): boolean {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useEnterAnimation');
+	const ref = user[0] as RefObject<HTMLElement | null>;
+	const isReady = (user[1] as boolean | undefined) ?? true;
+
+	let [isEntering, setEntering] = useState(true, subSlot(slot, 'entering'));
+	let isAnimationReady = isEntering && isReady;
+
+	// There are two cases for entry animations:
+	// 1. CSS @keyframes. The `animation` property is set during the isEntering state, and it is removed after the animation finishes.
+	// 2. CSS transitions. The initial styles are applied during the isEntering state, and removed immediately, causing the transition to occur.
+	//
+	// In the second case, cancel any transitions that were triggered prior to the isEntering = false state (when the transition is supposed to start).
+	// This can happen when isReady starts as false (e.g. popovers prior to placement calculation).
+	useLayoutEffect(
+		() => {
+			if (isAnimationReady && ref.current && 'getAnimations' in ref.current) {
+				for (let animation of ref.current.getAnimations()) {
+					if (animation instanceof CSSTransition) {
+						animation.cancel();
+					}
+				}
+			}
+		},
+		[ref, isAnimationReady],
+		subSlot(slot, 'cancelTransitions'),
+	);
+
+	useAnimation(
+		ref,
+		isAnimationReady,
+		useCallback(() => setEntering(false), [], subSlot(slot, 'onEnd')),
+		subSlot(slot, 'animation'),
+	);
+	return isAnimationReady;
+}
+
+export function useExitAnimation(ref: RefObject<HTMLElement | null>, isOpen: boolean): boolean;
+// Slot-threading form: sibling ported hooks pass their derived sub-slot as the trailing arg.
+export function useExitAnimation(
+	ref: RefObject<HTMLElement | null>,
+	isOpen: boolean,
+	slot: symbol | undefined,
+): boolean;
+export function useExitAnimation(...args: any[]): boolean {
+	const [user, slotArg] = splitSlot(args);
+	const slot = slotArg ?? S('useExitAnimation');
+	const ref = user[0] as RefObject<HTMLElement | null>;
+	const isOpen = user[1] as boolean;
+
+	let [exitState, setExitState] = useState<'closed' | 'open' | 'exiting'>(
+		isOpen ? 'open' : 'closed',
+		subSlot(slot, 'exitState'),
+	);
+
+	switch (exitState) {
+		case 'open':
+			// If isOpen becomes false, set the state to exiting.
+			if (!isOpen) {
+				setExitState('exiting');
+			}
+			break;
+		case 'closed':
+		case 'exiting':
+			// If we are exiting and isOpen becomes true, the animation was interrupted.
+			// Reset the state to open.
+			if (isOpen) {
+				setExitState('open');
+			}
+			break;
+	}
+
+	let isExiting = exitState === 'exiting';
+	useAnimation(
+		ref,
+		isExiting,
+		useCallback(
+			() => {
+				// Set the state to closed, which will cause the element to be unmounted.
+				setExitState((state) => (state === 'exiting' ? 'closed' : state));
+			},
+			[],
+			subSlot(slot, 'onEnd'),
+		),
+		subSlot(slot, 'animation'),
+	);
+
+	return isExiting;
+}
+
+function useAnimation(
+	ref: RefObject<HTMLElement | null>,
+	isActive: boolean,
+	onEnd: () => void,
+	slot: symbol | undefined,
+): void {
+	useLayoutEffect(
+		() => {
+			if (isActive && ref.current) {
+				if (!('getAnimations' in ref.current)) {
+					// JSDOM
+					onEnd();
+					return;
+				}
+
+				let animations = ref.current.getAnimations();
+				if (animations.length === 0) {
+					onEnd();
+					return;
+				}
+
+				let canceled = false;
+				Promise.allSettled(animations.map((a) => a.finished)).then(() => {
+					if (!canceled) {
+						flushSync(() => {
+							onEnd();
+						});
+					}
+				});
+
+				return () => {
+					canceled = true;
+				};
+			}
+		},
+		[ref, isActive, onEnd],
+		subSlot(slot, 'effect'),
+	);
+}

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,
+	};
+}