@octanejs/floating-ui 0.1.8 → 0.1.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/floating-ui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -42,14 +42,14 @@
     "tabbable": "^6.5.0"
   },
   "peerDependencies": {
-    "octane": "0.1.9"
+    "octane": "0.1.11"
   },
   "devDependencies": {
     "@floating-ui/react": "0.27.19",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "vitest": "^4.1.9",
-    "octane": "0.1.9"
+    "octane": "0.1.11"
   },
   "scripts": {
     "test": "vitest run"

package/src/Composite.ts

@@ -4,6 +4,9 @@
 // `render` prop (a function, an element to clone, or a default <div>); octane has no
 // cloneElement, so it's implemented locally over createElement.
 import { createContext, createElement, useContext, useMemo, useRef, useState } from 'octane';
+import type { OctaneNode } from 'octane';
+import type { OctaneElement } from 'octane/jsx-runtime';
+import type { Dimensions } from '@floating-ui/dom';
 
 import { FloatingList, useListItem } from './FloatingList';
 import { S } from './internal';
@@ -19,7 +22,9 @@ import {
 	isIndexOutOfListBounds,
 	isListIndexDisabled,
 	useEffectEvent,
+	type DisabledIndices,
 } from './utils';
+import type { HTMLProps, MutableRefObject, RefCallback } from './types';
 
 const ARROW_LEFT = 'ArrowLeft';
 const ARROW_RIGHT = 'ArrowRight';
@@ -29,13 +34,22 @@ const horizontalKeys = [ARROW_LEFT, ARROW_RIGHT];
 const verticalKeys = [ARROW_UP, ARROW_DOWN];
 const allKeys = [...horizontalKeys, ...verticalKeys];
 
-function cloneElement(el: any, props: any): any {
+// Upstream's (unexported) `RenderProp`, in octane terms: an element descriptor
+// to clone, or a factory receiving the computed HTML props.
+type RenderProp = OctaneElement | ((props: HTMLProps<HTMLElement>) => OctaneNode);
+
+type CompositeRef = MutableRefObject<HTMLElement | null> | RefCallback<HTMLElement> | null;
+
+function cloneElement(el: OctaneElement, props: Record<string, unknown>): OctaneNode {
 	return createElement(el.type, { ...el.props, ...props });
 }
 
-function renderJsx(render: any, computedProps: any): any {
+function renderJsx(
+	render: RenderProp | undefined,
+	computedProps: Record<string, unknown>,
+): OctaneNode {
 	if (typeof render === 'function') {
-		return render(computedProps);
+		return render(computedProps as HTMLProps<HTMLElement>);
 	}
 	if (render) {
 		return cloneElement(render, computedProps);
@@ -43,12 +57,79 @@ function renderJsx(render: any, computedProps: any): any {
 	return createElement('div', { ...computedProps });
 }
 
-export const CompositeContext = createContext<any>({
+interface CompositeContextValue {
+	activeIndex: number;
+	onNavigate(index: number): void;
+}
+
+export const CompositeContext = createContext<CompositeContextValue>({
 	activeIndex: 0,
 	onNavigate: () => {},
 });
 
-export function Composite(props: any): any {
+export interface CompositeProps {
+	/**
+	 * Determines the element to render.
+	 * @example
+	 * ```jsx
+	 * <Composite render={<ul />} />
+	 * <Composite render={(htmlProps) => <ul {...htmlProps} />} />
+	 * ```
+	 */
+	render?: RenderProp;
+	/**
+	 * Determines the orientation of the composite.
+	 */
+	orientation?: 'horizontal' | 'vertical' | 'both';
+	/**
+	 * Determines whether focus should loop around when navigating past the first
+	 * or last item.
+	 */
+	loop?: boolean;
+	/**
+	 * Whether the direction of the composite’s navigation is in RTL layout.
+	 */
+	rtl?: boolean;
+	/**
+	 * Determines the number of columns there are in the composite
+	 * (i.e. it’s a grid).
+	 */
+	cols?: number;
+	/**
+	 * Determines which items are disabled. The `disabled` or `aria-disabled`
+	 * attributes are used by default.
+	 */
+	disabledIndices?: DisabledIndices;
+	/**
+	 * Determines which item is active. Used to externally control the active
+	 * item.
+	 */
+	activeIndex?: number;
+	/**
+	 * Called when the user navigates to a new item. Used to externally control
+	 * the active item.
+	 */
+	onNavigate?(index: number): void;
+	/**
+	 * Only for `cols > 1`, specify sizes for grid items.
+	 * `{ width: 2, height: 2 }` means an item is 2 columns wide and 2 rows tall.
+	 */
+	itemSizes?: Dimensions[];
+	/**
+	 * Only relevant for `cols > 1` and items with different sizes, specify if
+	 * the grid is dense (as defined in the CSS spec for grid-auto-flow).
+	 */
+	dense?: boolean;
+}
+
+/**
+ * Creates a single tab stop whose items are navigated by arrow keys, which
+ * provides list navigation outside of floating element contexts.
+ * @see https://floating-ui.com/docs/Composite
+ */
+export function Composite(
+	props: CompositeProps & HTMLProps<HTMLElement> & { ref?: CompositeRef },
+): OctaneNode {
 	const render = props.render;
 	const orientation = props.orientation ?? 'both';
 	const loop = props.loop ?? true;
@@ -81,16 +162,16 @@ export function Composite(props: any): any {
 		externalSetActiveIndex != null ? externalSetActiveIndex : internalSetActiveIndex,
 		S('Composite:nav'),
 	);
-	const elementsRef = useRef<any[]>([], S('Composite:els'));
-	const renderElementProps = render && typeof render !== 'function' ? render.props : {};
-	const contextValue = useMemo(
+	const elementsRef = useRef<Array<HTMLElement | null>>([], S('Composite:els'));
+	const renderElementProps: any = render && typeof render !== 'function' ? render.props : {};
+	const contextValue = useMemo<CompositeContextValue>(
 		() => ({ activeIndex, onNavigate }),
 		[activeIndex, onNavigate],
 		S('Composite:ctx'),
 	);
 	const isGrid = cols > 1;
 
-	function handleKeyDown(event: any) {
+	function handleKeyDown(event: KeyboardEvent) {
 		if (!allKeys.includes(event.key)) return;
 		let nextIndex = activeIndex;
 		const minIndex = getMinListIndex(elementsRef, disabledIndices);
@@ -105,7 +186,7 @@ export function Composite(props: any): any {
 			const minGridIndex = cellMap.findIndex(
 				(index) => index != null && !isListIndexDisabled(elementsRef, index, disabledIndices),
 			);
-			const maxGridIndex = cellMap.reduce(
+			const maxGridIndex = cellMap.reduce<number>(
 				(foundIndex, index, cellIndex) =>
 					index != null && !isListIndexDisabled(elementsRef, index, disabledIndices)
 						? cellIndex
@@ -129,7 +210,7 @@ export function Composite(props: any): any {
 							disabledIndices: getGridCellIndices(
 								[
 									...((typeof disabledIndices !== 'function' ? disabledIndices : null) ||
-										elementsRef.current.map((_: any, index: number) =>
+										elementsRef.current.map((_, index) =>
 											isListIndexDisabled(elementsRef, index, disabledIndices) ? index : undefined,
 										)),
 									undefined,
@@ -156,19 +237,19 @@ export function Composite(props: any): any {
 			horizontal: [horizontalEndKey],
 			vertical: [ARROW_DOWN],
 			both: [horizontalEndKey, ARROW_DOWN],
-		}[orientation as 'horizontal' | 'vertical' | 'both'];
+		}[orientation];
 		const toStartKeys = {
 			horizontal: [horizontalStartKey],
 			vertical: [ARROW_UP],
 			both: [horizontalStartKey, ARROW_UP],
-		}[orientation as 'horizontal' | 'vertical' | 'both'];
+		}[orientation];
 		const preventedKeys = isGrid
 			? allKeys
 			: {
 					horizontal: horizontalKeys,
 					vertical: verticalKeys,
 					both: allKeys,
-				}[orientation as 'horizontal' | 'vertical' | 'both'];
+				}[orientation];
 		if (nextIndex === activeIndex && [...toEndKeys, ...toStartKeys].includes(event.key)) {
 			if (loop && nextIndex === maxIndex && toEndKeys.includes(event.key)) {
 				nextIndex = minIndex;
@@ -197,8 +278,8 @@ export function Composite(props: any): any {
 		...renderElementProps,
 		ref: forwardedRef,
 		'aria-orientation': orientation === 'both' ? undefined : orientation,
-		onKeyDown(e: any) {
-			domProps.onKeyDown?.(e);
+		onKeyDown(e: KeyboardEvent) {
+			domProps.onKeyDown?.(e as KeyboardEvent & { currentTarget: HTMLElement & EventTarget });
 			renderElementProps.onKeyDown?.(e);
 			handleKeyDown(e);
 		},
@@ -213,11 +294,28 @@ export function Composite(props: any): any {
 	});
 }
 
-export function CompositeItem(props: any): any {
+export interface CompositeItemProps {
+	/**
+	 * Determines the element to render.
+	 * @example
+	 * ```jsx
+	 * <CompositeItem render={<li />} />
+	 * <CompositeItem render={(htmlProps) => <li {...htmlProps} />} />
+	 * ```
+	 */
+	render?: RenderProp;
+}
+
+/**
+ * @see https://floating-ui.com/docs/Composite
+ */
+export function CompositeItem(
+	props: CompositeItemProps & HTMLProps<HTMLElement> & { ref?: CompositeRef },
+): OctaneNode {
 	const render = props.render;
 	const forwardedRef = props.ref;
 	const { render: _r, ref: _ref, ...domProps } = props;
-	const renderElementProps = render && typeof render !== 'function' ? render.props : {};
+	const renderElementProps: any = render && typeof render !== 'function' ? render.props : {};
 	const { activeIndex, onNavigate } = useContext(CompositeContext);
 	const { ref, index } = useListItem(S('CompositeItem:listItem'));
 	const mergedRef = useMergeRefs(
@@ -231,8 +329,8 @@ export function CompositeItem(props: any): any {
 		ref: mergedRef,
 		tabIndex: isActive ? 0 : -1,
 		'data-active': isActive ? '' : undefined,
-		onFocus(e: any) {
-			domProps.onFocus?.(e);
+		onFocus(e: FocusEvent) {
+			domProps.onFocus?.(e as FocusEvent & { currentTarget: HTMLElement & EventTarget });
 			renderElementProps.onFocus?.(e);
 			onNavigate(index);
 		},

package/src/FloatingArrow.ts

@@ -5,12 +5,69 @@
 // verbatim, so SVG presentation attributes are written kebab-case here.
 import { getComputedStyle } from '@floating-ui/utils/dom';
 import { createElement, useState } from 'octane';
+import type { OctaneNode } from 'octane';
 
 import { S } from './internal';
 import { useId } from './useId';
-import { useModernLayoutEffect } from './utils';
+import { useModernLayoutEffect, type CSSProperties } from './utils';
+import type { FloatingContext, MutableRefObject, RefCallback } from './types';
 
-export function FloatingArrow(props: any): any {
+// Upstream extends `React.ComponentPropsWithRef<'svg'>`. The port declares its
+// OWN props strictly and leaves the remaining SVG attributes open (`unknown`
+// index) so prop bags typed against other libraries' SVG surfaces (e.g.
+// React's synthetic-event `SVGProps`) remain spreadable; the rest is forwarded
+// verbatim to the `<svg>` element.
+export interface FloatingArrowProps {
+	/**
+	 * The floating context.
+	 */
+	context: Omit<FloatingContext, 'refs'> & { refs: any };
+	/**
+	 * Width of the arrow.
+	 * @default 14
+	 */
+	width?: number;
+	/**
+	 * Height of the arrow.
+	 * @default 7
+	 */
+	height?: number;
+	/**
+	 * The corner radius (rounding) of the arrow tip.
+	 * @default 0 (sharp)
+	 */
+	tipRadius?: number;
+	/**
+	 * Forces a static offset over dynamic positioning under a certain condition.
+	 * If the shift() middleware causes the popover to shift, this value will be
+	 * ignored.
+	 */
+	staticOffset?: string | number | null;
+	/**
+	 * Custom path string.
+	 */
+	d?: string;
+	/**
+	 * Stroke (border) color of the arrow.
+	 */
+	stroke?: string;
+	/**
+	 * Stroke (border) width of the arrow.
+	 */
+	strokeWidth?: number;
+	/** Object-form styles merged over the arrow's own positioning styles. */
+	style?: CSSProperties;
+	/** Ref-as-prop (octane has no forwardRef). */
+	ref?: MutableRefObject<SVGSVGElement | null> | RefCallback<SVGSVGElement> | null;
+	/** Remaining SVG attributes/handlers, forwarded to the `<svg>` element. */
+	[key: string]: unknown;
+}
+
+/**
+ * Renders a pointing arrow triangle.
+ * @see https://floating-ui.com/docs/FloatingArrow
+ */
+export function FloatingArrow(props: FloatingArrowProps): OctaneNode {
 	const ref = props.ref;
 	const context = props.context;
 	const placement = context.placement;
@@ -88,13 +145,13 @@ export function FloatingArrow(props: any): any {
 			(' L' + (width - svgX) + ',' + (height - svgY)) +
 			(' Q' + width / 2 + ',' + height + ' ' + svgX + ',' + (height - svgY)) +
 			' Z';
-	const rotation: any = (
+	const rotation = (
 		{
 			top: isCustomShape ? 'rotate(180deg)' : '',
 			left: isCustomShape ? 'rotate(90deg)' : 'rotate(-90deg)',
 			bottom: isCustomShape ? '' : 'rotate(180deg)',
 			right: isCustomShape ? 'rotate(-90deg)' : 'rotate(90deg)',
-		} as any
+		} as Record<string, string>
 	)[side];
 
 	return createElement(

package/src/FloatingFocusManager.ts

@@ -7,6 +7,7 @@
 import { getNodeName, isHTMLElement, isShadowRoot } from '@floating-ui/utils/dom';
 import { focusable, isTabbable, tabbable } from 'tabbable';
 import { createElement, useEffect, useMemo, useRef } from 'octane';
+import type { OctaneNode } from 'octane';
 
 import { FocusGuard, usePortalContext } from './FloatingPortal';
 import { S } from './internal';
@@ -33,9 +34,11 @@ import {
 	useEffectEvent,
 	useLatestRef,
 	useModernLayoutEffect,
+	type CSSProperties,
 } from './utils';
+import type { FloatingRootContext, HTMLProps, MutableRefObject, RefCallback } from './types';
 
-const HIDDEN_STYLES: any = {
+const HIDDEN_STYLES: CSSProperties = {
 	border: 0,
 	clip: 'rect(0 0 0 0)',
 	height: '1px',
@@ -63,7 +66,7 @@ function getCounterMap(control: any) {
 let uncontrolledElementsSet = new WeakSet<any>();
 let markerMap: any = {};
 let lockCount = 0;
-export const supportsInert = () =>
+export const supportsInert = (): boolean =>
 	typeof HTMLElement !== 'undefined' && 'inert' in HTMLElement.prototype;
 function unwrapHost(node: any): any {
 	if (!node) {
@@ -180,13 +183,13 @@ function markOthers(avoidElements: any[], ariaHidden = false, inert = false): ()
 
 // ── previously-focused element tracking (for return focus) ───────────────────
 const LIST_LIMIT = 20;
-let previouslyFocusedElements: any[] = [];
+let previouslyFocusedElements: Array<WeakRef<Element>> = [];
 function clearDisconnectedPreviouslyFocusedElements() {
 	previouslyFocusedElements = previouslyFocusedElements.filter(
 		(elementRef) => elementRef.deref()?.isConnected,
 	);
 }
-function addPreviouslyFocusedElement(element: any) {
+function addPreviouslyFocusedElement(element: Element | null | undefined) {
 	clearDisconnectedPreviouslyFocusedElements();
 	if (element && getNodeName(element) !== 'body') {
 		previouslyFocusedElements.push(new WeakRef(element));
@@ -195,18 +198,21 @@ function addPreviouslyFocusedElement(element: any) {
 		}
 	}
 }
-function getPreviouslyFocusedElement() {
+function getPreviouslyFocusedElement(): Element | undefined {
 	clearDisconnectedPreviouslyFocusedElements();
 	return previouslyFocusedElements[previouslyFocusedElements.length - 1]?.deref();
 }
-function getFirstTabbableElement(container: any) {
+function getFirstTabbableElement(container: Element) {
 	const tabbableOptions = getTabbableOptions();
 	if (isTabbable(container, tabbableOptions)) {
 		return container;
 	}
 	return tabbable(container, tabbableOptions)[0] || container;
 }
-function handleTabIndex(floatingFocusElement: any, orderRef: any) {
+function handleTabIndex(
+	floatingFocusElement: HTMLElement,
+	orderRef: MutableRefObject<Array<'reference' | 'floating' | 'content'>>,
+) {
 	if (
 		!orderRef.current.includes('floating') &&
 		!floatingFocusElement.getAttribute('role')?.includes('dialog')
@@ -215,7 +221,7 @@ function handleTabIndex(floatingFocusElement: any, orderRef: any) {
 	}
 	const options = getTabbableOptions();
 	const focusableElements = focusable(floatingFocusElement, options);
-	const tabbableContent = focusableElements.filter((element: any) => {
+	const tabbableContent = focusableElements.filter((element) => {
 		const dataTabIndex = element.getAttribute('data-tabindex') || '';
 		return (
 			isTabbable(element, options) ||
@@ -237,10 +243,13 @@ function handleTabIndex(floatingFocusElement: any, orderRef: any) {
 	}
 }
 
-function useLiteMergeRefs(refs: any[], slot: symbol): any {
+function useLiteMergeRefs<T>(
+	refs: Array<MutableRefObject<T | null> | undefined>,
+	slot: symbol,
+): (value: T | null) => void {
 	return useMemo(
 		() => {
-			return (value: any) => {
+			return (value: T | null) => {
 				refs.forEach((ref) => {
 					if (ref) {
 						ref.current = value;
@@ -253,7 +262,11 @@ function useLiteMergeRefs(refs: any[], slot: symbol): any {
 	);
 }
 
-export function VisuallyHiddenDismiss(props: any): any {
+export function VisuallyHiddenDismiss(
+	props: HTMLProps<HTMLButtonElement> & {
+		ref?: MutableRefObject<HTMLButtonElement | null> | RefCallback<HTMLButtonElement> | null;
+	},
+): OctaneNode {
 	return createElement('button', {
 		...props,
 		type: 'button',
@@ -263,7 +276,95 @@ export function VisuallyHiddenDismiss(props: any): any {
 	});
 }
 
-export function FloatingFocusManager(props: any): any {
+export interface FloatingFocusManagerProps {
+	children: OctaneNode;
+	/**
+	 * The floating context returned from `useFloatingRootContext` (a full
+	 * `FloatingContext` from `useFloating` is structurally compatible).
+	 */
+	context: FloatingRootContext;
+	/**
+	 * Whether or not the focus manager should be disabled. Useful to delay focus
+	 * management until after a transition completes or some other conditional
+	 * state.
+	 * @default false
+	 */
+	disabled?: boolean;
+	/**
+	 * The order in which focus cycles.
+	 * @default ['content']
+	 */
+	order?: Array<'reference' | 'floating' | 'content'>;
+	/**
+	 * Which element to initially focus. Can be either a number (tabbable index as
+	 * specified by the `order`) or a ref.
+	 * @default 0
+	 */
+	initialFocus?: number | MutableRefObject<HTMLElement | null>;
+	/**
+	 * Determines if the focus guards are rendered. If not, focus can escape into
+	 * the address bar/console/browser UI, like in native dialogs.
+	 * @default true
+	 */
+	guards?: boolean;
+	/**
+	 * Determines if focus should be returned to the reference element once the
+	 * floating element closes/unmounts (or if that is not available, the
+	 * previously focused element). This prop is ignored if the floating element
+	 * lost focus.
+	 * It can be also set to a ref to explicitly control the element to return focus to.
+	 * @default true
+	 */
+	returnFocus?: boolean | MutableRefObject<HTMLElement | null>;
+	/**
+	 * Determines if focus should be restored to the nearest tabbable element if
+	 * focus inside the floating element is lost (such as due to the removal of
+	 * the currently focused element from the DOM).
+	 * @default false
+	 */
+	restoreFocus?: boolean;
+	/**
+	 * Determines if focus is “modal”, meaning focus is fully trapped inside the
+	 * floating element and outside content cannot be accessed. This includes
+	 * screen reader virtual cursors.
+	 * @default true
+	 */
+	modal?: boolean;
+	/**
+	 * If your focus management is modal and there is no explicit close button
+	 * available, you can use this prop to render a visually-hidden dismiss
+	 * button at the start and end of the floating element. This allows
+	 * touch-based screen readers to escape the floating element due to lack of
+	 * an `esc` key.
+	 * @default undefined
+	 */
+	visuallyHiddenDismiss?: boolean | string;
+	/**
+	 * Determines whether `focusout` event listeners that control whether the
+	 * floating element should be closed if the focus moves outside of it are
+	 * attached to the reference and floating elements. This affects non-modal
+	 * focus management.
+	 * @default true
+	 */
+	closeOnFocusOut?: boolean;
+	/**
+	 * Determines whether outside elements are `inert` when `modal` is enabled.
+	 * This enables pointer modality without a backdrop.
+	 * @default false
+	 */
+	outsideElementsInert?: boolean;
+	/**
+	 * Returns a list of elements that should be considered part of the
+	 * floating element.
+	 */
+	getInsideElements?: () => Element[];
+}
+
+/**
+ * Provides focus management for the floating element.
+ * @see https://floating-ui.com/docs/FloatingFocusManager
+ */
+export function FloatingFocusManager(props: FloatingFocusManagerProps): OctaneNode {
 	const context = props.context;
 	const children = props.children;
 	const disabled = props.disabled ?? false;
@@ -301,8 +402,8 @@ export function FloatingFocusManager(props: any): any {
 	const returnFocusRef = useLatestRef(returnFocus, S('FFM:return'));
 	const tree = useFloatingTree();
 	const portalContext = usePortalContext();
-	const startDismissButtonRef = useRef<any>(null, S('FFM:startDismiss'));
-	const endDismissButtonRef = useRef<any>(null, S('FFM:endDismiss'));
+	const startDismissButtonRef = useRef<HTMLButtonElement | null>(null, S('FFM:startDismiss'));
+	const endDismissButtonRef = useRef<HTMLButtonElement | null>(null, S('FFM:endDismiss'));
 	const preventReturnFocusRef = useRef(false, S('FFM:preventReturn'));
 	const isPointerDownRef = useRef(false, S('FFM:pointerDown'));
 	const tabbableIndexRef = useRef(-1, S('FFM:tabbableIndex'));
@@ -313,10 +414,10 @@ export function FloatingFocusManager(props: any): any {
 	const getTabbableContent = useEffectEvent((container = floatingFocusElement) => {
 		return container ? tabbable(container, getTabbableOptions()) : [];
 	}, S('FFM:getContent'));
-	const getTabbableElements = useEffectEvent((container?: any) => {
+	const getTabbableElements = useEffectEvent((container?: HTMLElement) => {
 		const content = getTabbableContent(container);
 		return orderRef.current
-			.map((type: string) => {
+			.map((type) => {
 				if (domReference && type === 'reference') {
 					return domReference;
 				}
@@ -333,7 +434,7 @@ export function FloatingFocusManager(props: any): any {
 		() => {
 			if (disabled) return;
 			if (!modal) return;
-			function onKeyDown(event: any) {
+			function onKeyDown(event: KeyboardEvent) {
 				if (event.key === 'Tab') {
 					if (
 						contains(
@@ -388,7 +489,7 @@ export function FloatingFocusManager(props: any): any {
 		() => {
 			if (disabled) return;
 			if (!floating) return;
-			function handleFocusIn(event: any) {
+			function handleFocusIn(event: FocusEvent) {
 				const target = getTarget(event);
 				const tabbableContent = getTabbableContent();
 				const tabbableIndex = tabbableContent.indexOf(target as any);
@@ -415,8 +516,8 @@ export function FloatingFocusManager(props: any): any {
 					isPointerDownRef.current = false;
 				});
 			}
-			function handleFocusOutside(event: any) {
-				const relatedTarget = event.relatedTarget;
+			function handleFocusOutside(event: FocusEvent) {
+				const relatedTarget = event.relatedTarget as Element | null;
 				const currentTarget = event.currentTarget;
 				const target = getTarget(event);
 				queueMicrotask(() => {
@@ -526,8 +627,8 @@ export function FloatingFocusManager(props: any): any {
 		S('FFM:e:focusout'),
 	);
 
-	const beforeGuardRef = useRef<any>(null, S('FFM:beforeGuard'));
-	const afterGuardRef = useRef<any>(null, S('FFM:afterGuard'));
+	const beforeGuardRef = useRef<HTMLSpanElement | null>(null, S('FFM:beforeGuard'));
+	const afterGuardRef = useRef<HTMLSpanElement | null>(null, S('FFM:afterGuard'));
 	const mergedBeforeGuardRef = useLiteMergeRefs(
 		[beforeGuardRef, portalContext?.beforeInsideRef],
 		S('FFM:mergeBefore'),
@@ -743,13 +844,13 @@ export function FloatingFocusManager(props: any): any {
 		S('FFM:e:tabIndex'),
 	);
 
-	function renderDismissButton(location: string) {
+	function renderDismissButton(location: 'start' | 'end') {
 		if (disabled || !visuallyHiddenDismiss || !modal) {
 			return null;
 		}
 		return createElement(VisuallyHiddenDismiss, {
 			ref: location === 'start' ? startDismissButtonRef : endDismissButtonRef,
-			onClick: (event: any) => onOpenChange(false, event),
+			onClick: (event: MouseEvent) => onOpenChange(false, event),
 			children: typeof visuallyHiddenDismiss === 'string' ? visuallyHiddenDismiss : 'Dismiss',
 		});
 	}
@@ -765,7 +866,7 @@ export function FloatingFocusManager(props: any): any {
 			createElement(FocusGuard, {
 				'data-type': 'inside',
 				ref: mergedBeforeGuardRef,
-				onFocus: (event: any) => {
+				onFocus: (event: FocusEvent) => {
 					if (modal) {
 						const els = getTabbableElements();
 						enqueueFocus(order[0] === 'reference' ? els[0] : els[els.length - 1]);
@@ -790,7 +891,7 @@ export function FloatingFocusManager(props: any): any {
 			createElement(FocusGuard, {
 				'data-type': 'inside',
 				ref: mergedAfterGuardRef,
-				onFocus: (event: any) => {
+				onFocus: (event: FocusEvent) => {
 					if (modal) {
 						enqueueFocus(getTabbableElements()[0]);
 					} else if (