@octanejs/floating-ui 0.1.9 → 0.1.10

package/src/useDismiss.ts

@@ -28,27 +28,101 @@ import {
 	isRootElement,
 	useEffectEvent,
 } from './utils';
+import type { ElementProps, FloatingRootContext } from './types';
 
-const bubbleHandlerKeys: any = {
+export interface UseDismissProps {
+	/**
+	 * Whether the Hook is enabled, including all internal Effects and event
+	 * handlers.
+	 * @default true
+	 */
+	enabled?: boolean;
+	/**
+	 * Whether to dismiss the floating element upon pressing the `esc` key.
+	 * @default true
+	 */
+	escapeKey?: boolean;
+	/**
+	 * Whether to dismiss the floating element upon pressing the reference
+	 * element. You likely want to ensure the `move` option in the `useHover()`
+	 * Hook has been disabled when this is in use.
+	 * @default false
+	 */
+	referencePress?: boolean;
+	/**
+	 * The type of event to use to determine a “press”.
+	 * - `pointerdown` is eager on both mouse + touch input.
+	 * - `mousedown` is eager on mouse input, but lazy on touch input.
+	 * - `click` is lazy on both mouse + touch input.
+	 * @default 'pointerdown'
+	 */
+	referencePressEvent?: 'pointerdown' | 'mousedown' | 'click';
+	/**
+	 * Whether to dismiss the floating element upon pressing outside of the
+	 * floating element. Accepts a guard function to filter which presses count
+	 * as outside (native `MouseEvent`).
+	 * @default true
+	 */
+	outsidePress?: boolean | ((event: MouseEvent) => boolean);
+	/**
+	 * The type of event to use to determine an outside “press”.
+	 * - `pointerdown` is eager on both mouse + touch input.
+	 * - `mousedown` is eager on mouse input, but lazy on touch input.
+	 * - `click` is lazy on both mouse + touch input.
+	 * @default 'pointerdown'
+	 */
+	outsidePressEvent?: 'pointerdown' | 'mousedown' | 'click';
+	/**
+	 * Whether to dismiss the floating element upon scrolling an overflow
+	 * ancestor.
+	 * @default false
+	 */
+	ancestorScroll?: boolean;
+	/**
+	 * Determines whether event listeners bubble upwards through a tree of
+	 * floating elements.
+	 */
+	bubbles?: boolean | { escapeKey?: boolean; outsidePress?: boolean };
+	/**
+	 * Determines whether to use capture phase event listeners.
+	 */
+	capture?: boolean | { escapeKey?: boolean; outsidePress?: boolean };
+}
+
+type PressHandlerKey = 'pointerdown' | 'mousedown' | 'click';
+
+const bubbleHandlerKeys: Record<PressHandlerKey, string> = {
 	pointerdown: 'onPointerDown',
 	mousedown: 'onMouseDown',
 	click: 'onClick',
 };
-const captureHandlerKeys: any = {
+const captureHandlerKeys: Record<PressHandlerKey, string> = {
 	pointerdown: 'onPointerDownCapture',
 	mousedown: 'onMouseDownCapture',
 	click: 'onClickCapture',
 };
-const normalizeProp = (normalizable: any) => ({
+const normalizeProp = (
+	normalizable?: boolean | { escapeKey?: boolean; outsidePress?: boolean },
+) => ({
 	escapeKey: typeof normalizable === 'boolean' ? normalizable : (normalizable?.escapeKey ?? false),
 	outsidePress:
 		typeof normalizable === 'boolean' ? normalizable : (normalizable?.outsidePress ?? true),
 });
 
-export function useDismiss(...args: any[]): any {
+/**
+ * Closes the floating element when a dismissal is requested — by default, when
+ * the user presses the `escape` key or outside of the floating element.
+ * @see https://floating-ui.com/docs/useDismiss
+ */
+export function useDismiss(
+	context: FloatingRootContext,
+	props?: UseDismissProps,
+	slot?: symbol,
+): ElementProps;
+export function useDismiss(...args: any[]): ElementProps {
 	const [user, slot] = splitSlot(args);
-	const context = user[0];
-	const props = (user[1] as any) ?? {};
+	const context = user[0] as FloatingRootContext;
+	const props = (user[1] as UseDismissProps) ?? {};
 
 	const open = context.open;
 	const onOpenChange = context.onOpenChange;
@@ -78,7 +152,7 @@ export function useDismiss(...args: any[]): any {
 	const isComposingRef = useRef(false, subSlot(slot, 'comp'));
 
 	const closeOnEscapeKeyDown = useEffectEvent(
-		(event: any) => {
+		(event: KeyboardEvent) => {
 			if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
 				return;
 			}
@@ -102,13 +176,13 @@ export function useDismiss(...args: any[]): any {
 					}
 				}
 			}
-			onOpenChange(false, isReactEvent(event) ? event.nativeEvent : event, 'escape-key');
+			onOpenChange(false, isReactEvent(event) ? (event as any).nativeEvent : event, 'escape-key');
 		},
 		subSlot(slot, 'esc'),
 	);
 
 	const closeOnEscapeKeyDownCapture = useEffectEvent(
-		(event: any) => {
+		(event: KeyboardEvent) => {
 			const callback = () => {
 				closeOnEscapeKeyDown(event);
 				getTarget(event)?.removeEventListener('keydown', callback);
@@ -119,7 +193,7 @@ export function useDismiss(...args: any[]): any {
 	);
 
 	const closeOnPressOutside = useEffectEvent(
-		(event: any) => {
+		(event: MouseEvent) => {
 			const insideReactTree = dataRef.current.insideReactTree;
 			dataRef.current.insideReactTree = false;
 
@@ -211,7 +285,7 @@ export function useDismiss(...args: any[]): any {
 	);
 
 	const closeOnPressOutsideCapture = useEffectEvent(
-		(event: any) => {
+		(event: MouseEvent) => {
 			const callback = () => {
 				closeOnPressOutside(event);
 				getTarget(event)?.removeEventListener(outsidePressEvent, callback);
@@ -371,7 +445,7 @@ export function useDismiss(...args: any[]): any {
 		subSlot(slot, 'm:flo'),
 	);
 
-	return useMemo(
+	return useMemo<ElementProps>(
 		() => (enabled ? { reference, floating } : {}),
 		[enabled, reference, floating],
 		subSlot(slot, 'm:ret'),

package/src/useFloating.ts

@@ -4,10 +4,25 @@
 // ./internal). The returned `context`/refs carry the root slot so the interaction
 // hooks (later phases) can compose without their own slot.
 import { arrow as arrowCore, computePosition } from '@floating-ui/dom';
+import type {
+	ComputePositionConfig,
+	Derivable,
+	Middleware,
+	MiddlewareState,
+} from '@floating-ui/dom';
 import { flushSync, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'octane';
 
 import { splitSlot, subSlot } from './internal';
 import { deepEqual, getDPR, roundByDPR } from './utils';
+import type {
+	ArrowOptions,
+	FloatingStyles,
+	MutableRefObject,
+	ReferenceType,
+	UsePositionFloatingData,
+	UsePositionFloatingOptions,
+	UsePositionFloatingReturn,
+} from './types';
 
 // Keep a ref pointed at the latest `value` without retriggering effects.
 function useLatestRef<T>(value: T, slot: symbol | undefined): { current: T } {
@@ -24,9 +39,22 @@ function useLatestRef<T>(value: T, slot: symbol | undefined): { current: T } {
 
 // The positioning core (ported from @floating-ui/react-dom's useFloating). The
 // PUBLIC useFloating (in ./context) wraps this and adds the interaction context.
+// Called as `usePositionFloating([options, slot])` — the array form keeps the
+// compiler-injected trailing slot detectable for plain-`.ts` callers.
+// RT defaults to `any` (not upstream's `ReferenceType`) so that pre-typing
+// callers that supply untyped elements — and therefore give inference no
+// candidate — keep their loose reference typing (e.g. @octanejs/base-ui builds
+// its own stricter FloatingContext from this return). Callers with typed
+// elements infer RT precisely.
+export function usePositionFloating<RT extends ReferenceType = any>(
+	args: [UsePositionFloatingOptions<RT>?, (symbol | undefined)?],
+): UsePositionFloatingReturn<RT>;
+// Loose fallback: pre-typing callers built untyped option bags in plain `.ts`;
+// they keep compiling while still receiving the typed return.
+export function usePositionFloating(args: unknown[]): UsePositionFloatingReturn<any>;
 export function usePositionFloating(args: any[]): any {
 	const [user, slot] = splitSlot(args);
-	const options = (user[0] as any) ?? {};
+	const options = (user[0] as UsePositionFloatingOptions) ?? {};
 
 	const placement = options.placement ?? 'bottom';
 	const strategy = options.strategy ?? 'absolute';
@@ -38,7 +66,7 @@ export function usePositionFloating(args: any[]): any {
 	const whileElementsMounted = options.whileElementsMounted;
 	const open = options.open;
 
-	const [data, setData] = useState(
+	const [data, setData] = useState<UsePositionFloatingData>(
 		{
 			x: 0,
 			y: 0,
@@ -55,14 +83,14 @@ export function usePositionFloating(args: any[]): any {
 		setLatestMiddleware(middleware);
 	}
 
-	const [_reference, _setReference] = useState(null, subSlot(slot, 'ref'));
-	const [_floating, _setFloating] = useState(null, subSlot(slot, 'flo'));
+	const [_reference, _setReference] = useState<ReferenceType | null>(null, subSlot(slot, 'ref'));
+	const [_floating, _setFloating] = useState<HTMLElement | null>(null, subSlot(slot, 'flo'));
 
-	const referenceRef = useRef<any>(null, subSlot(slot, 'rref'));
-	const floatingRef = useRef<any>(null, subSlot(slot, 'rflo'));
+	const referenceRef = useRef<ReferenceType | null>(null, subSlot(slot, 'rref'));
+	const floatingRef = useRef<HTMLElement | null>(null, subSlot(slot, 'rflo'));
 
 	const setReference = useCallback(
-		(node: any) => {
+		(node: ReferenceType | null) => {
 			if (node !== referenceRef.current) {
 				referenceRef.current = node;
 				_setReference(node);
@@ -72,7 +100,7 @@ export function usePositionFloating(args: any[]): any {
 		subSlot(slot, 'sref'),
 	);
 	const setFloating = useCallback(
-		(node: any) => {
+		(node: HTMLElement | null) => {
 			if (node !== floatingRef.current) {
 				floatingRef.current = node;
 				_setFloating(node);
@@ -97,7 +125,11 @@ export function usePositionFloating(args: any[]): any {
 			if (!referenceRef.current || !floatingRef.current) {
 				return;
 			}
-			const config: any = { placement, strategy, middleware: latestMiddleware };
+			const config: Partial<ComputePositionConfig> = {
+				placement,
+				strategy,
+				middleware: latestMiddleware,
+			};
 			if (platformRef.current) {
 				config.platform = platformRef.current;
 			}
@@ -122,7 +154,7 @@ export function usePositionFloating(args: any[]): any {
 		() => {
 			if (open === false && dataRef.current.isPositioned) {
 				dataRef.current.isPositioned = false;
-				setData((d: any) => ({ ...d, isPositioned: false }));
+				setData((d) => ({ ...d, isPositioned: false }));
 			}
 		},
 		[open],
@@ -167,7 +199,7 @@ export function usePositionFloating(args: any[]): any {
 		subSlot(slot, 'm:el'),
 	);
 
-	const floatingStyles = useMemo(
+	const floatingStyles = useMemo<FloatingStyles>(
 		() => {
 			const initialStyles = { position: strategy, left: 0, top: 0 };
 			if (!elements.floating) {
@@ -196,14 +228,14 @@ export function usePositionFloating(args: any[]): any {
 }
 
 // Ref-aware `arrow` middleware: accepts an octane ref ({current}) or an element.
-export const arrow = (options: any) => {
-	function isRef(value: any) {
+export const arrow = (options: ArrowOptions | Derivable<ArrowOptions>): Middleware => {
+	function isRef(value: unknown): value is MutableRefObject<Element | null> {
 		return {}.hasOwnProperty.call(value, 'current');
 	}
 	return {
 		name: 'arrow',
 		options,
-		fn(state: any) {
+		fn(state: MiddlewareState) {
 			const { element, padding } = typeof options === 'function' ? options(state) : options;
 			if (element && isRef(element)) {
 				if (element.current != null) {

package/src/useFocus.ts

@@ -15,11 +15,37 @@ import {
 	isTypeableElement,
 	matchesFocusVisible,
 } from './utils';
+import type { ElementProps, FloatingRootContext, OpenChangeReason } from './types';
 
-export function useFocus(...args: any[]): any {
+export interface UseFocusProps {
+	/**
+	 * Whether the Hook is enabled, including all internal Effects and event
+	 * handlers.
+	 * @default true
+	 */
+	enabled?: boolean;
+	/**
+	 * Whether the open state only changes if the focus event is considered
+	 * visible (`:focus-visible` CSS selector).
+	 * @default true
+	 */
+	visibleOnly?: boolean;
+}
+
+/**
+ * Opens the floating element while the reference element has focus, like CSS
+ * `:focus`.
+ * @see https://floating-ui.com/docs/useFocus
+ */
+export function useFocus(
+	context: FloatingRootContext,
+	props?: UseFocusProps,
+	slot?: symbol,
+): ElementProps;
+export function useFocus(...args: any[]): ElementProps {
 	const [user, slot] = splitSlot(args);
-	const context = user[0];
-	const props = (user[1] as any) ?? {};
+	const context = user[0] as FloatingRootContext;
+	const props = (user[1] as UseFocusProps) ?? {};
 
 	const open = context.open;
 	const onOpenChange = context.onOpenChange;
@@ -73,7 +99,7 @@ export function useFocus(...args: any[]): any {
 	useEffect(
 		() => {
 			if (!enabled) return;
-			function onOpenChangeLocal(_ref: any) {
+			function onOpenChangeLocal(_ref: { reason?: OpenChangeReason }) {
 				const { reason } = _ref;
 				if (reason === 'reference-press' || reason === 'escape-key') {
 					blockFocusRef.current = true;
@@ -103,7 +129,7 @@ export function useFocus(...args: any[]): any {
 			onMouseLeave() {
 				blockFocusRef.current = false;
 			},
-			onFocus(event: any) {
+			onFocus(event: FocusEvent) {
 				if (blockFocusRef.current) return;
 				const target = getTarget(event);
 				if (visibleOnly && isElement(target)) {
@@ -117,7 +143,7 @@ export function useFocus(...args: any[]): any {
 				}
 				onOpenChange(true, event, 'focus');
 			},
-			onBlur(event: any) {
+			onBlur(event: FocusEvent) {
 				blockFocusRef.current = false;
 				const relatedTarget = event.relatedTarget;
 
@@ -146,7 +172,7 @@ export function useFocus(...args: any[]): any {
 		subSlot(slot, 'm:ref'),
 	);
 
-	return useMemo(
+	return useMemo<ElementProps>(
 		() => (enabled ? { reference } : {}),
 		[enabled, reference],
 		subSlot(slot, 'm:ret'),

package/src/useHover.ts

@@ -18,20 +18,76 @@ import {
 	useLatestRef,
 	useModernLayoutEffect,
 } from './utils';
+import type {
+	Delay,
+	ElementProps,
+	FloatingRootContext,
+	HandleClose,
+	OpenChangeReason,
+} from './types';
+
+export interface UseHoverProps {
+	/**
+	 * Whether the Hook is enabled, including all internal Effects and event
+	 * handlers.
+	 * @default true
+	 */
+	enabled?: boolean;
+	/**
+	 * Accepts an event handler that runs on `mousemove` to control when the
+	 * floating element closes once the cursor leaves the reference element.
+	 * @default null
+	 */
+	handleClose?: HandleClose | null;
+	/**
+	 * Waits until the user’s cursor is at “rest” over the reference element
+	 * before changing the `open` state.
+	 * @default 0
+	 */
+	restMs?: number | (() => number);
+	/**
+	 * Waits for the specified time when the event listener runs before changing
+	 * the `open` state.
+	 * @default 0
+	 */
+	delay?: Delay | (() => Delay);
+	/**
+	 * Whether the logic only runs for mouse input, ignoring touch input.
+	 * Note: due to a bug with Linux Chrome, "pen" inputs are considered "mouse".
+	 * @default false
+	 */
+	mouseOnly?: boolean;
+	/**
+	 * Whether moving the cursor over the floating element will open it, without a
+	 * regular hover event required.
+	 * @default true
+	 */
+	move?: boolean;
+}
 
 const safePolygonIdentifier = createAttribute('safe-polygon');
 
-function getRestMs(value: any): any {
+function getRestMs(value: number | (() => number)): number {
 	if (typeof value === 'function') {
 		return value();
 	}
 	return value;
 }
 
-export function useHover(...args: any[]): any {
+/**
+ * Opens the floating element while hovering over the reference element, like
+ * CSS `:hover`.
+ * @see https://floating-ui.com/docs/useHover
+ */
+export function useHover(
+	context: FloatingRootContext,
+	props?: UseHoverProps,
+	slot?: symbol,
+): ElementProps;
+export function useHover(...args: any[]): ElementProps {
 	const [user, slot] = splitSlot(args);
-	const context = user[0];
-	const props = (user[1] as any) ?? {};
+	const context = user[0] as FloatingRootContext;
+	const props = (user[1] as UseHoverProps) ?? {};
 
 	const open = context.open;
 	const onOpenChange = context.onOpenChange;
@@ -53,13 +109,16 @@ export function useHover(...args: any[]): any {
 	const openRef = useLatestRef(open, subSlot(slot, 'open'));
 	const restMsRef = useLatestRef(restMs, subSlot(slot, 'restms'));
 
-	const pointerTypeRef = useRef<any>(undefined, subSlot(slot, 'ptype'));
+	const pointerTypeRef = useRef<string | undefined>(undefined, subSlot(slot, 'ptype'));
 	const timeoutRef = useRef(-1, subSlot(slot, 'timeout'));
-	const handlerRef = useRef<any>(undefined, subSlot(slot, 'handler'));
+	const handlerRef = useRef<((event: MouseEvent) => void) | undefined>(
+		undefined,
+		subSlot(slot, 'handler'),
+	);
 	const restTimeoutRef = useRef(-1, subSlot(slot, 'resttimeout'));
 	const blockMouseMoveRef = useRef(true, subSlot(slot, 'block'));
 	const performedPointerEventsMutationRef = useRef(false, subSlot(slot, 'ppem'));
-	const unbindMouseMoveRef = useRef<any>(() => {}, subSlot(slot, 'unbind'));
+	const unbindMouseMoveRef = useRef<() => void>(() => {}, subSlot(slot, 'unbind'));
 	const restTimeoutPendingRef = useRef(false, subSlot(slot, 'rtp'));
 
 	const isHoverOpen = useEffectEvent(
@@ -96,7 +155,7 @@ export function useHover(...args: any[]): any {
 			if (!enabled) return;
 			if (!handleCloseRef.current) return;
 			if (!open) return;
-			function onLeave(event: any) {
+			function onLeave(event: MouseEvent) {
 				if (isHoverOpen()) {
 					onOpenChange(false, event, 'hover');
 				}
@@ -112,7 +171,7 @@ export function useHover(...args: any[]): any {
 	);
 
 	const closeWithDelay = useCallback(
-		(event: any, runElseBranch = true, reason = 'hover') => {
+		(event: Event, runElseBranch = true, reason: OpenChangeReason = 'hover') => {
 			const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
 			if (closeDelay && !handlerRef.current) {
 				clearTimeoutIfSet(timeoutRef);
@@ -161,7 +220,7 @@ export function useHover(...args: any[]): any {
 	useEffect(
 		() => {
 			if (!enabled) return;
-			function onReferenceMouseEnter(event: any) {
+			function onReferenceMouseEnter(event: MouseEvent) {
 				clearTimeoutIfSet(timeoutRef);
 				blockMouseMoveRef.current = false;
 				if (
@@ -181,7 +240,7 @@ export function useHover(...args: any[]): any {
 					onOpenChange(true, event, 'hover');
 				}
 			}
-			function onReferenceMouseLeave(event: any) {
+			function onReferenceMouseLeave(event: MouseEvent) {
 				if (isClickLikeOpenEvent()) {
 					clearPointerEvents();
 					return;
@@ -216,13 +275,13 @@ export function useHover(...args: any[]): any {
 				}
 				const shouldClose =
 					pointerTypeRef.current === 'touch'
-						? !contains(elements.floating, event.relatedTarget)
+						? !contains(elements.floating, event.relatedTarget as Element | null)
 						: true;
 				if (shouldClose) {
 					closeWithDelay(event);
 				}
 			}
-			function onScrollMouseLeave(event: any) {
+			function onScrollMouseLeave(event: MouseEvent) {
 				if (isClickLikeOpenEvent()) return;
 				if (!dataRef.current.floatingContext) return;
 				handleCloseRef.current?.({
@@ -242,13 +301,15 @@ export function useHover(...args: any[]): any {
 			function onFloatingMouseEnter() {
 				clearTimeoutIfSet(timeoutRef);
 			}
-			function onFloatingMouseLeave(event: any) {
+			function onFloatingMouseLeave(event: MouseEvent) {
 				if (!isClickLikeOpenEvent()) {
 					closeWithDelay(event, false);
 				}
 			}
 			if (isElement(elements.domReference)) {
-				const reference = elements.domReference;
+				// lib.dom's `ElementEventMap` lacks mouse events; these listeners are
+				// registered on a plain Element, so go through the generic overload.
+				const reference = elements.domReference as HTMLElement;
 				const floating = elements.floating;
 				if (open) {
 					reference.addEventListener('mouseleave', onScrollMouseLeave);
@@ -311,7 +372,7 @@ export function useHover(...args: any[]): any {
 				if (isElement(elements.domReference) && floatingEl) {
 					const body = getDocument(elements.floating).body;
 					body.setAttribute(safePolygonIdentifier, '');
-					const ref = elements.domReference;
+					const ref = elements.domReference as HTMLElement;
 					const parentFloating = tree?.nodesRef.current.find((node: any) => node.id === parentId)
 						?.context?.elements.floating;
 					if (parentFloating) {
@@ -360,13 +421,13 @@ export function useHover(...args: any[]): any {
 
 	const reference = useMemo(
 		() => {
-			function setPointerRef(event: any) {
+			function setPointerRef(event: PointerEvent) {
 				pointerTypeRef.current = event.pointerType;
 			}
 			return {
 				onPointerDown: setPointerRef,
 				onPointerEnter: setPointerRef,
-				onMouseMove(event: any) {
+				onMouseMove(event: MouseEvent) {
 					function handleMouseMove() {
 						if (!blockMouseMoveRef.current && !openRef.current) {
 							onOpenChange(true, event, 'hover');
@@ -398,7 +459,7 @@ export function useHover(...args: any[]): any {
 		subSlot(slot, 'm:ref'),
 	);
 
-	return useMemo(
+	return useMemo<ElementProps>(
 		() => (enabled ? { reference } : {}),
 		[enabled, reference],
 		subSlot(slot, 'm:ret'),

package/src/useId.ts

@@ -1,6 +1,6 @@
 // @floating-ui/react's useId, backed by octane's SSR-stable useId.
 import { useId as octaneUseId } from 'octane';
 
-export function useId(slot: symbol | undefined): string {
+export function useId(slot?: symbol | undefined): string {
 	return octaneUseId(slot);
 }

package/src/useInteractions.ts

@@ -4,11 +4,16 @@ import { useCallback, useMemo } from 'octane';
 
 import { splitSlot, subSlot } from './internal';
 import { FOCUSABLE_ATTRIBUTE } from './utils';
+import type { ElementProps, UseInteractionsReturn } from './types';
 
 const ACTIVE_KEY = 'active';
 const SELECTED_KEY = 'selected';
 
-function mergeProps(userProps: any, propsList: any[], elementKey: string): any {
+function mergeProps(
+	userProps: any,
+	propsList: Array<ElementProps | void | null | undefined>,
+	elementKey: 'reference' | 'floating' | 'item',
+): Record<string, unknown> {
 	const map = new Map<string, any[]>();
 	const isItem = elementKey === 'item';
 	let domUserProps = userProps;
@@ -31,7 +36,7 @@ function mergeProps(userProps: any, propsList: any[], elementKey: string): any {
 				return propsOrGetProps;
 			})
 			.concat(userProps)
-			.reduce((acc: any, props: any) => {
+			.reduce((acc: Record<string, unknown>, props: any) => {
 				if (!props) {
 					return acc;
 				}
@@ -62,9 +67,13 @@ function mergeProps(userProps: any, propsList: any[], elementKey: string): any {
 	};
 }
 
+export function useInteractions(
+	propsList?: Array<ElementProps | void | null | undefined>,
+	slot?: symbol,
+): UseInteractionsReturn;
 export function useInteractions(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
-	const propsList = (user[0] as any[]) ?? [];
+	const propsList: Array<ElementProps | void | null | undefined> = (user[0] as any[]) ?? [];
 
 	const referenceDeps = propsList.map((key) => (key == null ? undefined : key.reference));
 	const floatingDeps = propsList.map((key) => (key == null ? undefined : key.floating));