@octanejs/floating-ui 0.1.2

package/src/useMergeRefs.ts

@@ -0,0 +1,59 @@
+// Ported from @floating-ui/react useMergeRefs. Merges an array of refs (objects or
+// callbacks) into a single callback ref. React hooks → octane hooks + sub-slots.
+import { useCallback, useMemo, useRef } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+
+export function useMergeRefs(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const refs = (user[0] as any[]) ?? [];
+
+	const cleanupRef = useRef<any>(undefined, subSlot(slot, 'cleanup'));
+
+	const refEffect = useCallback(
+		(instance: any) => {
+			const cleanups = refs.map((ref) => {
+				if (ref == null) {
+					return;
+				}
+				if (typeof ref === 'function') {
+					const refCallback = ref;
+					const refCleanup = refCallback(instance);
+					return typeof refCleanup === 'function'
+						? refCleanup
+						: () => {
+								refCallback(null);
+							};
+				}
+				ref.current = instance;
+				return () => {
+					ref.current = null;
+				};
+			});
+			return () => {
+				cleanups.forEach((refCleanup) => (refCleanup == null ? void 0 : refCleanup()));
+			};
+		},
+		refs,
+		subSlot(slot, 'effect'),
+	);
+
+	return useMemo(
+		() => {
+			if (refs.every((ref) => ref == null)) {
+				return null;
+			}
+			return (value: any) => {
+				if (cleanupRef.current) {
+					cleanupRef.current();
+					cleanupRef.current = undefined;
+				}
+				if (value != null) {
+					cleanupRef.current = refEffect(value);
+				}
+			};
+		},
+		refs,
+		subSlot(slot, 'memo'),
+	);
+}

package/src/useRole.ts

@@ -0,0 +1,106 @@
+// Ported from @floating-ui/react useRole — adds the base ARIA props to the
+// reference + floating elements for a given role. `context` is the first arg;
+// `props` is optional → splitSlot for the trailing slot.
+import { useCallback, useMemo } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import { useFloatingParentNodeId } from './tree';
+import { useId } from './useId';
+import { getFloatingFocusElement } from './utils';
+
+const componentRoleToAriaRoleMap = new Map<string, string | false>([
+	['select', 'listbox'],
+	['combobox', 'listbox'],
+	['label', false],
+]);
+
+export function useRole(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const context = user[0];
+	const props = (user[1] as any) ?? {};
+
+	const open = context.open;
+	const elements = context.elements;
+	const defaultFloatingId = context.floatingId;
+
+	const enabled = props.enabled ?? true;
+	const role = props.role ?? 'dialog';
+
+	const defaultReferenceId = useId(subSlot(slot, 'refid'));
+	const referenceId = elements.domReference?.id || defaultReferenceId;
+	const floatingId = useMemo(
+		() => getFloatingFocusElement(elements.floating)?.id || defaultFloatingId,
+		[elements.floating, defaultFloatingId],
+		subSlot(slot, 'm:fid'),
+	);
+	const mapped = componentRoleToAriaRoleMap.get(role);
+	const ariaRole = mapped != null ? mapped : role;
+	const parentId = useFloatingParentNodeId();
+	const isNested = parentId != null;
+
+	const reference = useMemo(
+		() => {
+			if (ariaRole === 'tooltip' || role === 'label') {
+				return {
+					['aria-' + (role === 'label' ? 'labelledby' : 'describedby')]: open
+						? floatingId
+						: undefined,
+				};
+			}
+			return {
+				'aria-expanded': open ? 'true' : 'false',
+				'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
+				'aria-controls': open ? floatingId : undefined,
+				...(ariaRole === 'listbox' && { role: 'combobox' }),
+				...(ariaRole === 'menu' && { id: referenceId }),
+				...(ariaRole === 'menu' && isNested && { role: 'menuitem' }),
+				...(role === 'select' && { 'aria-autocomplete': 'none' }),
+				...(role === 'combobox' && { 'aria-autocomplete': 'list' }),
+			};
+		},
+		[ariaRole, floatingId, isNested, open, referenceId, role],
+		subSlot(slot, 'm:ref'),
+	);
+
+	const floating = useMemo(
+		() => {
+			const floatingProps: any = {
+				id: floatingId,
+				...(ariaRole && { role: ariaRole }),
+			};
+			if (ariaRole === 'tooltip' || role === 'label') {
+				return floatingProps;
+			}
+			return {
+				...floatingProps,
+				...(ariaRole === 'menu' && { 'aria-labelledby': referenceId }),
+			};
+		},
+		[ariaRole, floatingId, referenceId, role],
+		subSlot(slot, 'm:flo'),
+	);
+
+	const item = useCallback(
+		(_ref: any) => {
+			const { active, selected } = _ref;
+			const commonProps: any = {
+				role: 'option',
+				...(active && { id: floatingId + '-fui-option' }),
+			};
+			switch (role) {
+				case 'select':
+				case 'combobox':
+					return { ...commonProps, 'aria-selected': selected };
+			}
+			return {};
+		},
+		[floatingId, role],
+		subSlot(slot, 'cb:item'),
+	);
+
+	return useMemo(
+		() => (enabled ? { reference, floating, item } : {}),
+		[enabled, reference, floating, item],
+		subSlot(slot, 'm:ret'),
+	);
+}

package/src/useTypeahead.ts

@@ -0,0 +1,168 @@
+// Ported from @floating-ui/react useTypeahead — type-to-select over a list. Native
+// keyboard events (no event.nativeEvent usage here).
+import { useMemo, useRef } from 'octane';
+
+import { splitSlot, subSlot } from './internal';
+import {
+	clearTimeoutIfSet,
+	stopEvent,
+	useEffectEvent,
+	useLatestRef,
+	useModernLayoutEffect,
+} from './utils';
+
+export function useTypeahead(...args: any[]): any {
+	const [user, slot] = splitSlot(args);
+	const context = user[0];
+	const props = (user[1] as any) ?? {};
+
+	const open = context.open;
+	const dataRef = context.dataRef;
+
+	const listRef = props.listRef;
+	const activeIndex = props.activeIndex;
+	const unstableOnMatch = props.onMatch;
+	const unstableOnTypingChange = props.onTypingChange;
+	const enabled = props.enabled ?? true;
+	const findMatch = props.findMatch ?? null;
+	const resetMs = props.resetMs ?? 750;
+	const ignoreKeys = props.ignoreKeys ?? [];
+	const selectedIndex = props.selectedIndex ?? null;
+
+	const timeoutIdRef = useRef(-1, subSlot(slot, 'timeout'));
+	const stringRef = useRef('', subSlot(slot, 'string'));
+	const prevIndexRef = useRef(
+		(selectedIndex != null ? selectedIndex : activeIndex) ?? -1,
+		subSlot(slot, 'prev'),
+	);
+	const matchIndexRef = useRef<any>(null, subSlot(slot, 'match'));
+
+	const onMatch = useEffectEvent(unstableOnMatch, subSlot(slot, 'onmatch'));
+	const onTypingChange = useEffectEvent(unstableOnTypingChange, subSlot(slot, 'ontyping'));
+	const findMatchRef = useLatestRef(findMatch, subSlot(slot, 'find'));
+	const ignoreKeysRef = useLatestRef(ignoreKeys, subSlot(slot, 'ignore'));
+
+	useModernLayoutEffect(
+		() => {
+			if (open) {
+				clearTimeoutIfSet(timeoutIdRef);
+				matchIndexRef.current = null;
+				stringRef.current = '';
+			}
+		},
+		[open],
+		subSlot(slot, 'e:open'),
+	);
+
+	useModernLayoutEffect(
+		() => {
+			if (open && stringRef.current === '') {
+				prevIndexRef.current = (selectedIndex != null ? selectedIndex : activeIndex) ?? -1;
+			}
+		},
+		[open, selectedIndex, activeIndex],
+		subSlot(slot, 'e:sync'),
+	);
+
+	const setTypingChange = useEffectEvent(
+		(value: any) => {
+			if (value) {
+				if (!dataRef.current.typing) {
+					dataRef.current.typing = value;
+					onTypingChange(value);
+				}
+			} else {
+				if (dataRef.current.typing) {
+					dataRef.current.typing = value;
+					onTypingChange(value);
+				}
+			}
+		},
+		subSlot(slot, 'settyping'),
+	);
+
+	const onKeyDown = useEffectEvent(
+		(event: any) => {
+			function getMatchingIndex(list: any[], orderedList: any[], string: string) {
+				const str = findMatchRef.current
+					? findMatchRef.current(orderedList, string)
+					: orderedList.find(
+							(text: any) => text?.toLocaleLowerCase().indexOf(string.toLocaleLowerCase()) === 0,
+						);
+				return str ? list.indexOf(str) : -1;
+			}
+			const listContent = listRef.current;
+			if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
+				if (getMatchingIndex(listContent, listContent, stringRef.current) === -1) {
+					setTypingChange(false);
+				} else if (event.key === ' ') {
+					stopEvent(event);
+				}
+			}
+			if (
+				listContent == null ||
+				ignoreKeysRef.current.includes(event.key) ||
+				event.key.length !== 1 ||
+				event.ctrlKey ||
+				event.metaKey ||
+				event.altKey
+			) {
+				return;
+			}
+			if (open && event.key !== ' ') {
+				stopEvent(event);
+				setTypingChange(true);
+			}
+
+			const allowRapidSuccessionOfFirstLetter = listContent.every((text: any) =>
+				text ? text[0]?.toLocaleLowerCase() !== text[1]?.toLocaleLowerCase() : true,
+			);
+
+			if (allowRapidSuccessionOfFirstLetter && stringRef.current === event.key) {
+				stringRef.current = '';
+				prevIndexRef.current = matchIndexRef.current;
+			}
+			stringRef.current += event.key;
+			clearTimeoutIfSet(timeoutIdRef);
+			timeoutIdRef.current = window.setTimeout(() => {
+				stringRef.current = '';
+				prevIndexRef.current = matchIndexRef.current;
+				setTypingChange(false);
+			}, resetMs);
+			const prevIndex = prevIndexRef.current;
+			const index = getMatchingIndex(
+				listContent,
+				[...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)],
+				stringRef.current,
+			);
+			if (index !== -1) {
+				onMatch(index);
+				matchIndexRef.current = index;
+			} else if (event.key !== ' ') {
+				stringRef.current = '';
+				setTypingChange(false);
+			}
+		},
+		subSlot(slot, 'keydown'),
+	);
+
+	const reference = useMemo(() => ({ onKeyDown }), [onKeyDown], subSlot(slot, 'm:ref'));
+	const floating = useMemo(
+		() => ({
+			onKeyDown,
+			onKeyUp(event: any) {
+				if (event.key === ' ') {
+					setTypingChange(false);
+				}
+			},
+		}),
+		[onKeyDown, setTypingChange],
+		subSlot(slot, 'm:flo'),
+	);
+
+	return useMemo(
+		() => (enabled ? { reference, floating } : {}),
+		[enabled, reference, floating],
+		subSlot(slot, 'm:ret'),
+	);
+}