@octanejs/floating-ui 0.1.8 → 0.1.10

package/src/FloatingList.ts

@@ -10,9 +10,11 @@ import {
 	useRef,
 	useState,
 } from 'octane';
+import type { OctaneNode } from 'octane';
 
 import { S, splitSlot, subSlot } from './internal';
 import { useModernLayoutEffect } from './utils';
+import type { MutableRefObject } from './types';
 
 function sortByDocumentPosition(a: Node, b: Node): number {
 	const position = a.compareDocumentPosition(b);
@@ -28,29 +30,55 @@ function sortByDocumentPosition(a: Node, b: Node): number {
 	return 0;
 }
 
-export const FloatingListContext = createContext<any>({
+interface FloatingListContextValue {
+	register: (node: Node) => void;
+	unregister: (node: Node) => void;
+	map: Map<Node, number | null>;
+	elementsRef: MutableRefObject<Array<HTMLElement | null>>;
+	labelsRef?: MutableRefObject<Array<string | null>>;
+}
+
+export const FloatingListContext = createContext<FloatingListContextValue>({
 	register: () => {},
 	unregister: () => {},
 	map: new Map(),
 	elementsRef: { current: [] },
 });
 
-export function FloatingList(props: any): any {
+export interface FloatingListProps {
+	children: OctaneNode;
+	/**
+	 * A ref to the list of HTML elements, ordered by their index.
+	 * `useListNavigation`'s `listRef` prop.
+	 */
+	elementsRef: MutableRefObject<Array<HTMLElement | null>>;
+	/**
+	 * A ref to the list of element labels, ordered by their index.
+	 * `useTypeahead`'s `listRef` prop.
+	 */
+	labelsRef?: MutableRefObject<Array<string | null>>;
+}
+
+/**
+ * Provides context for a list of items within the floating element.
+ * @see https://floating-ui.com/docs/FloatingList
+ */
+export function FloatingList(props: FloatingListProps): OctaneNode {
 	const children = props.children;
 	const elementsRef = props.elementsRef;
 	const labelsRef = props.labelsRef;
 
-	const [nodes, setNodes] = useState(() => new Set<any>(), S('FloatingList:nodes'));
+	const [nodes, setNodes] = useState(() => new Set<Node>(), S('FloatingList:nodes'));
 	const register = useCallback(
-		(node: any) => {
-			setNodes((prevSet: Set<any>) => new Set(prevSet).add(node));
+		(node: Node) => {
+			setNodes((prevSet) => new Set(prevSet).add(node));
 		},
 		[],
 		S('FloatingList:register'),
 	);
 	const unregister = useCallback(
-		(node: any) => {
-			setNodes((prevSet: Set<any>) => {
+		(node: Node) => {
+			setNodes((prevSet) => {
 				const set = new Set(prevSet);
 				set.delete(node);
 				return set;
@@ -61,7 +89,7 @@ export function FloatingList(props: any): any {
 	);
 	const map = useMemo(
 		() => {
-			const newMap = new Map();
+			const newMap = new Map<Node, number | null>();
 			const sortedNodes = Array.from(nodes.keys()).sort(sortByDocumentPosition);
 			sortedNodes.forEach((node, index) => {
 				newMap.set(node, index);
@@ -71,7 +99,7 @@ export function FloatingList(props: any): any {
 		[nodes],
 		S('FloatingList:map'),
 	);
-	const value = useMemo(
+	const value = useMemo<FloatingListContextValue>(
 		() => ({ register, unregister, map, elementsRef, labelsRef }),
 		[register, unregister, map, elementsRef, labelsRef],
 		S('FloatingList:value'),
@@ -79,18 +107,35 @@ export function FloatingList(props: any): any {
 	return createElement(FloatingListContext.Provider, { value, children });
 }
 
+export interface UseListItemProps {
+	label?: string | null;
+}
+
+/**
+ * Used to register a list item and its index (DOM position) in the
+ * `FloatingList`.
+ * @see https://floating-ui.com/docs/FloatingList#uselistitem
+ */
+export function useListItem(
+	props?: UseListItemProps,
+	slot?: symbol,
+): { ref: (node: HTMLElement | null) => void; index: number };
+export function useListItem(slot?: symbol): {
+	ref: (node: HTMLElement | null) => void;
+	index: number;
+};
 export function useListItem(...args: any[]): any {
 	const [user, slotArg] = splitSlot(args);
 	const slot = slotArg ?? S('useListItem');
-	const props = (user[0] as any) ?? {};
+	const props = (user[0] as UseListItemProps) ?? {};
 	const label = props.label;
 
 	const { register, unregister, map, elementsRef, labelsRef } = useContext(FloatingListContext);
-	const [index, setIndex] = useState<any>(null, subSlot(slot, 'index'));
-	const componentRef = useRef<any>(null, subSlot(slot, 'ref'));
+	const [index, setIndex] = useState<number | null>(null, subSlot(slot, 'index'));
+	const componentRef = useRef<HTMLElement | null>(null, subSlot(slot, 'ref'));
 
 	const ref = useCallback(
-		(node: any) => {
+		(node: HTMLElement | null) => {
 			componentRef.current = node;
 			if (index !== null) {
 				elementsRef.current[index] = node;

package/src/FloatingOverlay.ts

@@ -2,9 +2,11 @@
 // optional body scroll-lock. A `.ts` component (createElement, ref-as-prop). React
 // forwardRef → `props.ref`.
 import { createElement } from 'octane';
+import type { OctaneNode } from 'octane';
 
 import { S } from './internal';
-import { getPlatform, useModernLayoutEffect } from './utils';
+import { getPlatform, useModernLayoutEffect, type CSSProperties } from './utils';
+import type { HTMLProps, MutableRefObject, RefCallback } from './types';
 
 const scrollbarProperty = '--floating-ui-scrollbar-width';
 let lockCount = 0;
@@ -48,7 +50,28 @@ function enableScrollLock() {
 	};
 }
 
-export function FloatingOverlay(props: any): any {
+export interface FloatingOverlayProps {
+	/**
+	 * Whether the overlay should lock scrolling on the document body.
+	 * @default false
+	 */
+	lockScroll?: boolean;
+}
+
+/**
+ * Provides base styling for a fixed overlay element to dim content or block
+ * pointer events behind a floating element.
+ * @see https://floating-ui.com/docs/FloatingOverlay
+ */
+export function FloatingOverlay(
+	props: FloatingOverlayProps &
+		HTMLProps<HTMLDivElement> & {
+			// Ref-as-prop (octane has no forwardRef); the overlay's own styles merge
+			// over the OBJECT form of `style`.
+			ref?: MutableRefObject<HTMLDivElement | null> | RefCallback<HTMLDivElement> | null;
+			style?: CSSProperties;
+		},
+): OctaneNode {
 	const { lockScroll = false, ref, ...rest } = props;
 
 	useModernLayoutEffect(
@@ -79,7 +102,7 @@ export function FloatingOverlay(props: any): any {
 			right: 0,
 			bottom: 0,
 			left: 0,
-			...rest.style,
+			...(rest.style as CSSProperties | undefined),
 		},
 	});
 }

package/src/FloatingPortal.ts

@@ -14,6 +14,7 @@ import {
 	useRef,
 	useState,
 } from 'octane';
+import type { OctaneNode } from 'octane';
 
 import { S, splitSlot, subSlot } from './internal';
 import { useId } from './useId';
@@ -26,9 +27,11 @@ import {
 	isOutsideEvent,
 	isSafari,
 	useModernLayoutEffect,
+	type CSSProperties,
 } from './utils';
+import type { HTMLProps, MutableRefObject, OpenChangeReason, RefCallback } from './types';
 
-const HIDDEN_STYLES: any = {
+const HIDDEN_STYLES: CSSProperties = {
 	border: 0,
 	clip: 'rect(0 0 0 0)',
 	height: '1px',
@@ -42,8 +45,12 @@ const HIDDEN_STYLES: any = {
 	left: 0,
 };
 
-export function FocusGuard(props: any): any {
-	const [role, setRole] = useState<any>(undefined, S('FocusGuard:role'));
+export function FocusGuard(
+	props: HTMLProps<HTMLSpanElement> & {
+		ref?: MutableRefObject<HTMLSpanElement | null> | RefCallback<HTMLSpanElement> | null;
+	},
+): OctaneNode {
+	const [role, setRole] = useState<'button' | undefined>(undefined, S('FocusGuard:role'));
 	useModernLayoutEffect(
 		() => {
 			if (isSafari()) {
@@ -63,28 +70,66 @@ export function FocusGuard(props: any): any {
 	});
 }
 
-const HIDDEN_OWNER_STYLES: any = {
+const HIDDEN_OWNER_STYLES: CSSProperties = {
 	clipPath: 'inset(50%)',
 	position: 'fixed',
 	top: 0,
 	left: 0,
 };
-export const PortalContext = createContext<any>(null);
+
+// What a non-modal FloatingFocusManager registers on its enclosing portal.
+export interface FocusManagerState {
+	modal: boolean;
+	open: boolean;
+	onOpenChange: (open: boolean, event?: Event, reason?: OpenChangeReason) => void;
+	domReference: Element | null;
+	closeOnFocusOut: boolean;
+}
+
+interface PortalContextValue {
+	preserveTabOrder: boolean;
+	portalNode: HTMLElement | null;
+	setFocusManagerState: (
+		state:
+			| FocusManagerState
+			| null
+			| ((prev: FocusManagerState | null) => FocusManagerState | null),
+	) => void;
+	beforeInsideRef: MutableRefObject<HTMLSpanElement | null>;
+	afterInsideRef: MutableRefObject<HTMLSpanElement | null>;
+	beforeOutsideRef: MutableRefObject<HTMLSpanElement | null>;
+	afterOutsideRef: MutableRefObject<HTMLSpanElement | null>;
+}
+
+export const PortalContext = createContext<PortalContextValue | null>(null);
 const attr = createAttribute('portal');
 
-export function useFloatingPortalNode(...args: any[]): any {
+export interface UseFloatingPortalNodeProps {
+	id?: string;
+	root?: HTMLElement | ShadowRoot | null | MutableRefObject<HTMLElement | ShadowRoot | null>;
+}
+
+/**
+ * @see https://floating-ui.com/docs/FloatingPortal#usefloatingportalnode
+ */
+export function useFloatingPortalNode(
+	props?: UseFloatingPortalNodeProps,
+	slot?: symbol,
+): HTMLElement | null;
+export function useFloatingPortalNode(slot?: symbol): HTMLElement | null;
+export function useFloatingPortalNode(...args: any[]): HTMLElement | null {
 	// Exported hook → may be called directly by consumers (compiler injects the
 	// slot) or by FloatingPortal (passes an S() slot); fall back to S() otherwise.
 	const [user, slotArg] = splitSlot(args);
 	const slot = slotArg ?? S('useFloatingPortalNode');
-	const props = (user[0] as any) ?? {};
+	const props = (user[0] as UseFloatingPortalNodeProps) ?? {};
 	const id = props.id;
 	const root = props.root;
 
 	const uniqueId = useId(subSlot(slot, 'id'));
 	const portalContext = usePortalContext();
-	const [portalNode, setPortalNode] = useState<any>(null, subSlot(slot, 'node'));
-	const portalNodeRef = useRef<any>(null, subSlot(slot, 'noderef'));
+	const [portalNode, setPortalNode] = useState<HTMLElement | null>(null, subSlot(slot, 'node'));
+	const portalNodeRef = useRef<HTMLElement | null>(null, subSlot(slot, 'noderef'));
 
 	useModernLayoutEffect(
 		() => {
@@ -121,10 +166,15 @@ export function useFloatingPortalNode(...args: any[]): any {
 			if (root === null) return;
 			if (!uniqueId) return;
 			if (portalNodeRef.current) return;
-			let container = root || portalContext?.portalNode;
+			let container:
+				| HTMLElement
+				| ShadowRoot
+				| MutableRefObject<HTMLElement | ShadowRoot | null>
+				| null
+				| undefined = root || portalContext?.portalNode;
 			if (container && !isNode(container)) container = container.current;
 			container = container || document.body;
-			let idWrapper = null;
+			let idWrapper: HTMLDivElement | null = null;
 			if (id) {
 				idWrapper = document.createElement('div');
 				idWrapper.id = id;
@@ -145,18 +195,45 @@ export function useFloatingPortalNode(...args: any[]): any {
 	return portalNode;
 }
 
-export function FloatingPortal(props: any): any {
+export interface FloatingPortalProps {
+	children?: OctaneNode;
+	/**
+	 * Optionally selects the node with the id if it exists, or create it and
+	 * append it to the specified `root` (by default `document.body`).
+	 */
+	id?: string;
+	/**
+	 * Specifies the root node the portal container will be appended to.
+	 */
+	root?: HTMLElement | ShadowRoot | null | MutableRefObject<HTMLElement | ShadowRoot | null>;
+	/**
+	 * When using non-modal focus management using `FloatingFocusManager`, this
+	 * will preserve the tab order context based on the octane tree instead of the
+	 * DOM tree.
+	 */
+	preserveTabOrder?: boolean;
+}
+
+/**
+ * Portals the floating element into a given container element — by default,
+ * outside of the app root and into the body.
+ * @see https://floating-ui.com/docs/FloatingPortal
+ */
+export function FloatingPortal(props: FloatingPortalProps): OctaneNode {
 	const children = props.children;
 	const id = props.id;
 	const root = props.root;
 	const preserveTabOrder = props.preserveTabOrder ?? true;
 
-	const portalNode = useFloatingPortalNode([{ id, root }, S('FloatingPortal:node')]);
-	const [focusManagerState, setFocusManagerState] = useState<any>(null, S('FloatingPortal:fms'));
-	const beforeOutsideRef = useRef<any>(null, S('FloatingPortal:bo'));
-	const afterOutsideRef = useRef<any>(null, S('FloatingPortal:ao'));
-	const beforeInsideRef = useRef<any>(null, S('FloatingPortal:bi'));
-	const afterInsideRef = useRef<any>(null, S('FloatingPortal:ai'));
+	const portalNode = useFloatingPortalNode({ id, root }, S('FloatingPortal:node'));
+	const [focusManagerState, setFocusManagerState] = useState<FocusManagerState | null>(
+		null,
+		S('FloatingPortal:fms'),
+	);
+	const beforeOutsideRef = useRef<HTMLSpanElement | null>(null, S('FloatingPortal:bo'));
+	const afterOutsideRef = useRef<HTMLSpanElement | null>(null, S('FloatingPortal:ao'));
+	const beforeInsideRef = useRef<HTMLSpanElement | null>(null, S('FloatingPortal:bi'));
+	const afterInsideRef = useRef<HTMLSpanElement | null>(null, S('FloatingPortal:ai'));
 	const modal = focusManagerState?.modal;
 	const open = focusManagerState?.open;
 	const shouldRenderGuards =
@@ -171,7 +248,7 @@ export function FloatingPortal(props: any): any {
 			if (!portalNode || !preserveTabOrder || modal) {
 				return;
 			}
-			function onFocus(event: any) {
+			function onFocus(event: FocusEvent) {
 				if (portalNode && isOutsideEvent(event)) {
 					const focusing = event.type === 'focusin';
 					const manageFocus = focusing ? enableFocusInside : disableFocusInside;
@@ -199,7 +276,7 @@ export function FloatingPortal(props: any): any {
 		S('FloatingPortal:e:enable'),
 	);
 
-	const value = useMemo(
+	const value = useMemo<PortalContextValue>(
 		() => ({
 			preserveTabOrder,
 			beforeOutsideRef,
@@ -221,7 +298,7 @@ export function FloatingPortal(props: any): any {
 				createElement(FocusGuard, {
 					'data-type': 'outside',
 					ref: beforeOutsideRef,
-					onFocus: (event: any) => {
+					onFocus: (event: FocusEvent) => {
 						if (isOutsideEvent(event, portalNode)) {
 							beforeInsideRef.current?.focus();
 						} else {
@@ -239,7 +316,7 @@ export function FloatingPortal(props: any): any {
 				createElement(FocusGuard, {
 					'data-type': 'outside',
 					ref: afterOutsideRef,
-					onFocus: (event: any) => {
+					onFocus: (event: FocusEvent) => {
 						if (isOutsideEvent(event, portalNode)) {
 							afterInsideRef.current?.focus();
 						} else {
@@ -254,4 +331,4 @@ export function FloatingPortal(props: any): any {
 	});
 }
 
-export const usePortalContext = () => useContext(PortalContext);
+export const usePortalContext = (): PortalContextValue | null => useContext(PortalContext);

package/src/context.ts

@@ -11,26 +11,41 @@ import { useFloatingParentNodeId, useFloatingTree } from './tree';
 import { useId } from './useId';
 import { usePositionFloating } from './useFloating';
 import { useEffectEvent, useModernLayoutEffect } from './utils';
+import type {
+	ContextData,
+	ExtendedElements,
+	ExtendedRefs,
+	FloatingContext,
+	FloatingRootContext,
+	OpenChangeReason,
+	ReferenceType,
+	UseFloatingOptions,
+	UseFloatingReturn,
+	UseFloatingRootContextOptions,
+} from './types';
 
 export { createPubSub } from './pubsub';
 
-export function useFloatingRootContext(options: any, slot: symbol | undefined): any {
+export function useFloatingRootContext(
+	options: UseFloatingRootContextOptions,
+	slot?: symbol | undefined,
+): FloatingRootContext {
 	const open = options.open ?? false;
 	const onOpenChangeProp = options.onOpenChange;
 	const elementsProp = options.elements;
 
 	const floatingId = useId(subSlot(slot, 'id'));
-	const dataRef = useRef<any>({}, subSlot(slot, 'data'));
+	const dataRef = useRef<ContextData>({}, subSlot(slot, 'data'));
 	const [events] = useState(() => createPubSub(), subSlot(slot, 'events'));
 	const nested = useFloatingParentNodeId() != null;
 
-	const [positionReference, setPositionReference] = useState(
+	const [positionReference, setPositionReference] = useState<ReferenceType | null>(
 		elementsProp.reference,
 		subSlot(slot, 'posref'),
 	);
 
 	const onOpenChange = useEffectEvent(
-		(openVal: boolean, event?: Event, reason?: string) => {
+		(openVal: boolean, event?: Event, reason?: OpenChangeReason) => {
 			dataRef.current.openEvent = openVal ? event : undefined;
 			events.emit('openchange', { open: openVal, event, reason, nested });
 			onOpenChangeProp?.(openVal, event, reason);
@@ -50,16 +65,26 @@ export function useFloatingRootContext(options: any, slot: symbol | undefined):
 		subSlot(slot, 'm:el'),
 	);
 
-	return useMemo(
+	return useMemo<FloatingRootContext>(
 		() => ({ dataRef, open, onOpenChange, elements, events, floatingId, refs }),
 		[open, onOpenChange, elements, events, floatingId, refs],
 		subSlot(slot, 'm:ret'),
 	);
 }
 
+export function useFloating<RT extends ReferenceType = ReferenceType>(
+	options?: UseFloatingOptions,
+	slot?: symbol,
+): UseFloatingReturn<RT>;
+// Loose fallback: pre-typing callers built untyped option bags in plain `.ts`;
+// they keep compiling while still receiving the typed return.
+export function useFloating(
+	options: Record<string, unknown> | undefined,
+	slot?: symbol,
+): UseFloatingReturn;
 export function useFloating(...args: any[]): any {
 	const [user, slot] = splitSlot(args);
-	const options = (user[0] as any) ?? {};
+	const options = (user[0] as UseFloatingOptions) ?? {};
 	const nodeId = options.nodeId;
 
 	const internalRootContext = useFloatingRootContext(
@@ -76,11 +101,14 @@ export function useFloating(...args: any[]): any {
 	const rootContext = options.rootContext || internalRootContext;
 	const computedElements = rootContext.elements;
 
-	const [_domReference, setDomReference] = useState(null, subSlot(slot, 'domref'));
-	const [positionReference, _setPositionReference] = useState(null, subSlot(slot, 'posref'));
+	const [_domReference, setDomReference] = useState<Element | null>(null, subSlot(slot, 'domref'));
+	const [positionReference, _setPositionReference] = useState<ReferenceType | null>(
+		null,
+		subSlot(slot, 'posref'),
+	);
 	const optionDomReference = computedElements?.domReference;
 	const domReference = optionDomReference || _domReference;
-	const domReferenceRef = useRef<any>(null, subSlot(slot, 'domrefref'));
+	const domReferenceRef = useRef<Element | null>(null, subSlot(slot, 'domrefref'));
 	const tree = useFloatingTree();
 
 	useModernLayoutEffect(
@@ -105,7 +133,7 @@ export function useFloating(...args: any[]): any {
 	]);
 
 	const setPositionReference = useCallback(
-		(node: any) => {
+		(node: ReferenceType | null) => {
 			const computedPositionReference = isElement(node)
 				? {
 						getBoundingClientRect: () => node.getBoundingClientRect(),
@@ -121,7 +149,7 @@ export function useFloating(...args: any[]): any {
 	);
 
 	const setReference = useCallback(
-		(node: any) => {
+		(node: ReferenceType | null) => {
 			if (isElement(node) || node === null) {
 				domReferenceRef.current = node;
 				setDomReference(node);
@@ -138,7 +166,7 @@ export function useFloating(...args: any[]): any {
 		subSlot(slot, 'sr'),
 	);
 
-	const refs = useMemo(
+	const refs = useMemo<ExtendedRefs<ReferenceType>>(
 		() => ({
 			...position.refs,
 			setReference,
@@ -149,13 +177,13 @@ export function useFloating(...args: any[]): any {
 		subSlot(slot, 'm:refs'),
 	);
 
-	const elements = useMemo(
+	const elements = useMemo<ExtendedElements<ReferenceType>>(
 		() => ({ ...position.elements, domReference }),
 		[position.elements, domReference],
 		subSlot(slot, 'm:el'),
 	);
 
-	const context = useMemo(
+	const context = useMemo<FloatingContext>(
 		() => ({ ...position, ...rootContext, refs, elements, nodeId }),
 		[position, refs, elements, nodeId, rootContext],
 		subSlot(slot, 'm:ctx'),
@@ -173,7 +201,7 @@ export function useFloating(...args: any[]): any {
 		subSlot(slot, 'e:ctx'),
 	);
 
-	return useMemo(
+	return useMemo<UseFloatingReturn>(
 		() => ({ ...position, context, refs, elements }),
 		[position, refs, elements, context],
 		subSlot(slot, 'm:ret'),

package/src/delayGroup.ts

@@ -10,12 +10,36 @@ import {
 	useReducer,
 	useRef,
 } from 'octane';
+import type { OctaneNode } from 'octane';
 
 import { S, splitSlot, subSlot } from './internal';
 import { getDelay, useModernLayoutEffect } from './utils';
+import type { Delay, FloatingRootContext } from './types';
+
+export interface GroupState {
+	delay: Delay;
+	initialDelay: Delay;
+	currentId: any;
+	timeoutMs: number;
+	isInstantPhase: boolean;
+}
+
+export interface GroupContext extends GroupState {
+	setCurrentId: (currentId: any) => void;
+	setState: (state: Partial<GroupState>) => void;
+}
+
+export interface UseGroupOptions {
+	/**
+	 * Whether delay grouping should be enabled.
+	 * @default true
+	 */
+	enabled?: boolean;
+	id?: any;
+}
 
 const NOOP = () => {};
-export const FloatingDelayGroupContext = createContext<any>({
+export const FloatingDelayGroupContext = createContext<GroupContext>({
 	delay: 0,
 	initialDelay: 0,
 	timeoutMs: 0,
@@ -25,15 +49,39 @@ export const FloatingDelayGroupContext = createContext<any>({
 	isInstantPhase: false,
 });
 
-export const useDelayGroupContext = () => useContext(FloatingDelayGroupContext);
+/**
+ * @deprecated
+ * Use the return value of `useDelayGroup()` instead.
+ */
+export const useDelayGroupContext = (): GroupContext => useContext(FloatingDelayGroupContext);
+
+export interface FloatingDelayGroupProps {
+	children?: OctaneNode;
+	/**
+	 * The delay to use for the group.
+	 */
+	delay: Delay;
+	/**
+	 * An optional explicit timeout to use for the group, which represents when
+	 * grouping logic will no longer be active after the close delay completes.
+	 * This is useful if you want grouping to “last” longer than the close delay,
+	 * for example if there is no close delay at all.
+	 */
+	timeoutMs?: number;
+}
 
-export function FloatingDelayGroup(props: any): any {
+/**
+ * Provides context for a group of floating elements that should share a
+ * `delay`.
+ * @see https://floating-ui.com/docs/FloatingDelayGroup
+ */
+export function FloatingDelayGroup(props: FloatingDelayGroupProps): OctaneNode {
 	const children = props.children;
 	const delay = props.delay;
 	const timeoutMs = props.timeoutMs ?? 0;
 
 	const [state, setState] = useReducer(
-		(prev: any, next: any) => ({ ...prev, ...next }),
+		(prev: GroupState, next: Partial<GroupState>): GroupState => ({ ...prev, ...next }),
 		{
 			delay,
 			timeoutMs,
@@ -69,7 +117,7 @@ export function FloatingDelayGroup(props: any): any {
 		[state.currentId, state.isInstantPhase],
 		S('FloatingDelayGroup:eff'),
 	);
-	const value = useMemo(
+	const value = useMemo<GroupContext>(
 		() => ({ ...state, setState, setCurrentId }),
 		[state, setCurrentId],
 		S('FloatingDelayGroup:value'),
@@ -77,10 +125,20 @@ export function FloatingDelayGroup(props: any): any {
 	return createElement(FloatingDelayGroupContext.Provider, { value, children });
 }
 
-export function useDelayGroup(...args: any[]): any {
+/**
+ * Enables grouping when called inside a component that's a child of a
+ * `FloatingDelayGroup`.
+ * @see https://floating-ui.com/docs/FloatingDelayGroup
+ */
+export function useDelayGroup(
+	context: FloatingRootContext,
+	options?: UseGroupOptions,
+	slot?: symbol,
+): GroupContext;
+export function useDelayGroup(...args: any[]): GroupContext {
 	const [user, slot] = splitSlot(args);
-	const context = user[0];
-	const options = (user[1] as any) ?? {};
+	const context = user[0] as FloatingRootContext;
+	const options = (user[1] as UseGroupOptions) ?? {};
 
 	const open = context.open;
 	const onOpenChange = context.onOpenChange;