@octanejs/base-ui 0.1.49 → 0.1.51

package/src/floating-ui-react/hooks/useClick.ts

@@ -0,0 +1,229 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import { useAnimationFrame } from '@octanejs/base-ui-utils/useAnimationFrame';
+import { useTimeout } from '@octanejs/base-ui-utils/useTimeout';
+import { EMPTY_OBJECT } from '@octanejs/base-ui-utils/empty';
+import type { ElementProps, FloatingContext, FloatingRootContext } from '../types';
+import { getTarget, isTypeableElement } from '../utils/element';
+import { isMouseLikePointerType, isVirtualPointerEvent } from '../utils/event';
+import { createChangeEventDetails } from '../../internals/createBaseUIEventDetails';
+import { REASONS } from '../../internals/reasons';
+
+export interface UseClickProps {
+	/**
+	 * Whether the Hook is enabled, including all internal Effects and event
+	 * handlers.
+	 * @default true
+	 */
+	enabled?: boolean | undefined;
+	/**
+	 * The type of event to use to determine a “click” with mouse input.
+	 * Keyboard clicks work as normal.
+	 * @default 'click'
+	 */
+	event?: 'click' | 'mousedown' | 'mousedown-only' | undefined;
+	/**
+	 * Whether to toggle the open state with repeated clicks.
+	 * @default true
+	 */
+	toggle?: boolean | undefined;
+	/**
+	 * Whether to ignore the logic for mouse input (for example, if `useHover()`
+	 * is also being used).
+	 * @default false
+	 */
+	ignoreMouse?: boolean | undefined;
+	/**
+	 * If already open from another event such as the `useHover()` Hook,
+	 * determines whether to keep the floating element open when clicking the
+	 * reference element for the first time.
+	 * @default true
+	 */
+	stickIfOpen?: boolean | undefined;
+	/**
+	 * Touch-only delay (ms) before opening. Useful to allow mobile viewport/keyboard to settle.
+	 * @default 0
+	 */
+	touchOpenDelay?: number | undefined;
+	/**
+	 * The reason for the click.
+	 * @default REASONS.triggerPress
+	 */
+	reason?: typeof REASONS.triggerPress | typeof REASONS.inputPress | undefined;
+}
+
+/**
+ * Opens or closes the floating element when clicking the reference element.
+ * @see https://floating-ui.com/docs/useClick
+ */
+export function useClick(
+	context: FloatingRootContext | FloatingContext,
+	props: UseClickProps = {},
+): ElementProps {
+	const {
+		enabled = true,
+		event: eventOption = 'click',
+		toggle = true,
+		ignoreMouse = false,
+		stickIfOpen = true,
+		touchOpenDelay = 0,
+		reason = REASONS.triggerPress,
+	} = props;
+
+	const store = 'rootStore' in context ? context.rootStore : context;
+
+	const dataRef = store.context.dataRef;
+
+	const pointerTypeRef = React.useRef<'mouse' | 'pen' | 'touch' | 'virtual' | undefined>(undefined);
+	const frame = useAnimationFrame();
+	const touchOpenTimeout = useTimeout();
+
+	const reference: ElementProps['reference'] = React.useMemo(() => {
+		function setOpenWithTouchDelay(
+			nextOpen: boolean,
+			nativeEvent: MouseEvent,
+			target: HTMLElement,
+			pointerType: 'mouse' | 'pen' | 'touch' | 'virtual' | undefined,
+		) {
+			const details = createChangeEventDetails(reason, nativeEvent, target);
+
+			if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
+				touchOpenTimeout.start(touchOpenDelay, () => {
+					store.setOpen(true, details);
+				});
+			} else {
+				store.setOpen(nextOpen, details);
+			}
+		}
+
+		function getNextOpen(
+			open: boolean,
+			currentTarget: EventTarget | null,
+			isClickLikeOpenEvent: (eventType: string | undefined) => boolean,
+		) {
+			const openEvent = dataRef.current.openEvent;
+			const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== currentTarget;
+
+			if (open && hasClickedOnInactiveTrigger) {
+				// Moving between triggers should always open the newly active one.
+				return true;
+			}
+
+			if (!open) {
+				// A closed popup should open on the next press.
+				return true;
+			}
+
+			if (!toggle) {
+				// Non-toggle mode never closes on a repeated trigger press.
+				return true;
+			}
+
+			if (openEvent && stickIfOpen) {
+				// Preserve hover/focus-opened popups until the matching click-like event closes them.
+				return !isClickLikeOpenEvent(openEvent.type);
+			}
+
+			// Otherwise, a repeated click toggles the popup closed.
+			return false;
+		}
+
+		return {
+			onPointerDown(event) {
+				// Screen reader activations (Android TalkBack, desktop screen readers) report a
+				// mouse-like `pointerType`, but `ignoreMouse` must not drop them: hover logic cannot
+				// open for a virtual press since there is no real pointer movement to wait for.
+				// Virtual `touch` presses (iOS VoiceOver) keep their type so `touchOpenDelay` applies.
+				pointerTypeRef.current =
+					isMouseLikePointerType(event.pointerType, true) && isVirtualPointerEvent(event)
+						? 'virtual'
+						: (event.pointerType as typeof pointerTypeRef.current);
+			},
+			onMouseDown(event) {
+				const pointerType = pointerTypeRef.current;
+				const nativeEvent = event;
+				const open = store.select('open');
+
+				// Ignore all buttons except for the "main" button.
+				// https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
+				if (
+					event.button !== 0 ||
+					eventOption === 'click' ||
+					(isMouseLikePointerType(pointerType, true) && ignoreMouse)
+				) {
+					return;
+				}
+
+				const nextOpen = getNextOpen(
+					open,
+					event.currentTarget,
+					(openEventType) => openEventType === 'click' || openEventType === 'mousedown',
+				);
+
+				// Animations sometimes won't run on a typeable element if using a rAF.
+				// Focus is always set on these elements. For touch, we may delay opening.
+				const target = getTarget(nativeEvent);
+
+				if (isTypeableElement(target)) {
+					setOpenWithTouchDelay(nextOpen, nativeEvent, target as HTMLElement, pointerType);
+					return;
+				}
+
+				// Capture the currentTarget before the rAF.
+				// as React sets it to null after the event handler completes.
+				const eventCurrentTarget = event.currentTarget as HTMLElement;
+
+				// Wait until focus is set on the element. This is an alternative to
+				// `event.preventDefault()` to avoid :focus-visible from appearing when using a pointer.
+				frame.request(() => {
+					setOpenWithTouchDelay(nextOpen, nativeEvent, eventCurrentTarget, pointerType);
+				});
+			},
+			onClick(event) {
+				if (eventOption === 'mousedown-only') {
+					return;
+				}
+
+				const pointerType = pointerTypeRef.current;
+
+				if (eventOption === 'mousedown' && pointerType) {
+					pointerTypeRef.current = undefined;
+					return;
+				}
+
+				if (isMouseLikePointerType(pointerType, true) && ignoreMouse) {
+					return;
+				}
+
+				const open = store.select('open');
+				const nextOpen = getNextOpen(
+					open,
+					event.currentTarget,
+					(openEventType) =>
+						openEventType === 'click' ||
+						openEventType === 'mousedown' ||
+						openEventType === 'keydown' ||
+						openEventType === 'keyup',
+				);
+				setOpenWithTouchDelay(nextOpen, event, event.currentTarget as HTMLElement, pointerType);
+			},
+			onKeyDown() {
+				pointerTypeRef.current = undefined;
+			},
+		};
+	}, [
+		dataRef,
+		eventOption,
+		ignoreMouse,
+		reason,
+		store,
+		stickIfOpen,
+		toggle,
+		frame,
+		touchOpenTimeout,
+		touchOpenDelay,
+	]);
+
+	return React.useMemo(() => (enabled ? { reference } : EMPTY_OBJECT), [enabled, reference]);
+}

package/src/floating-ui-react/hooks/useClientPoint.ts

@@ -0,0 +1,261 @@
+/** @jsxImportSource octane */
+'use client';
+import * as React from 'octane';
+import { addEventListener } from '@octanejs/base-ui-utils/addEventListener';
+import { useStableCallback } from '@octanejs/base-ui-utils/useStableCallback';
+import { getWindow } from '@floating-ui/utils/dom';
+import type { ContextData, ElementProps, FloatingContext, FloatingRootContext } from '../types';
+import { contains, getTarget } from '../utils/element';
+import { isMouseLikePointerType } from '../utils/event';
+
+function createVirtualElement(
+	domElement: Element | null | undefined,
+	data: {
+		axis: 'x' | 'y' | 'both';
+		dataRef: React.RefObject<ContextData>;
+		pointerType: string | undefined;
+		x: number | null;
+		y: number | null;
+	},
+) {
+	let offsetX: number | null = null;
+	let offsetY: number | null = null;
+	let isAutoUpdateEvent = false;
+
+	return {
+		contextElement: domElement || undefined,
+		getBoundingClientRect() {
+			const domRect = domElement?.getBoundingClientRect() || {
+				width: 0,
+				height: 0,
+				x: 0,
+				y: 0,
+			};
+
+			const isXAxis = data.axis === 'x' || data.axis === 'both';
+			const isYAxis = data.axis === 'y' || data.axis === 'both';
+			const canTrackCursorOnAutoUpdate =
+				['mouseenter', 'mousemove'].includes(data.dataRef.current.openEvent?.type || '') &&
+				data.pointerType !== 'touch';
+
+			let width = domRect.width;
+			let height = domRect.height;
+			let x = domRect.x;
+			let y = domRect.y;
+
+			if (offsetX == null && data.x && isXAxis) {
+				offsetX = domRect.x - data.x;
+			}
+
+			if (offsetY == null && data.y && isYAxis) {
+				offsetY = domRect.y - data.y;
+			}
+
+			x -= offsetX || 0;
+			y -= offsetY || 0;
+			width = 0;
+			height = 0;
+
+			if (!isAutoUpdateEvent || canTrackCursorOnAutoUpdate) {
+				width = data.axis === 'y' ? domRect.width : 0;
+				height = data.axis === 'x' ? domRect.height : 0;
+				x = isXAxis && data.x != null ? data.x : x;
+				y = isYAxis && data.y != null ? data.y : y;
+			} else if (isAutoUpdateEvent && !canTrackCursorOnAutoUpdate) {
+				height = data.axis === 'x' ? domRect.height : height;
+				width = data.axis === 'y' ? domRect.width : width;
+			}
+
+			isAutoUpdateEvent = true;
+
+			return {
+				width,
+				height,
+				x,
+				y,
+				top: y,
+				right: x + width,
+				bottom: y + height,
+				left: x,
+			};
+		},
+	};
+}
+
+function isMouseBasedEvent(event: Event | undefined): event is MouseEvent {
+	return event != null && (event as MouseEvent).clientX != null;
+}
+
+export interface UseClientPointProps {
+	/**
+	 * Whether the Hook is enabled, including all internal Effects and event
+	 * handlers.
+	 * @default true
+	 */
+	enabled?: boolean | undefined;
+	/**
+	 * Whether to restrict the client point to an axis and use the reference
+	 * element (if it exists) as the other axis. This can be useful if the
+	 * floating element is also interactive.
+	 * @default 'both'
+	 */
+	axis?: 'x' | 'y' | 'both' | undefined;
+}
+
+/**
+ * Positions the floating element relative to a client point (in the viewport),
+ * such as the mouse position. By default, it follows the mouse cursor.
+ * @see https://floating-ui.com/docs/useClientPoint
+ */
+export function useClientPoint(
+	context: FloatingRootContext | FloatingContext,
+	props: UseClientPointProps = {},
+): ElementProps {
+	const { enabled = true, axis = 'both' } = props;
+
+	const store = 'rootStore' in context ? context.rootStore : context;
+
+	const open = store.useState('open');
+	const floating = store.useState('floatingElement');
+	const domReference = store.useState('domReferenceElement');
+
+	const dataRef = store.context.dataRef;
+
+	const initialRef = React.useRef(false);
+	const cleanupListenerRef = React.useRef<null | (() => void)>(null);
+
+	const [pointerType, setPointerType] = React.useState<string | undefined>();
+	const [reactive, setReactive] = React.useState([]);
+
+	const resetReference = useStableCallback((reference: Element | null) => {
+		store.set('positionReference', reference);
+	});
+
+	const setReference = useStableCallback(
+		(newX: number | null, newY: number | null, referenceElement?: Element | null) => {
+			if (initialRef.current) {
+				return;
+			}
+
+			// Prevent setting if the open event was not a mouse-like one
+			// (e.g. focus to open, then hover over the reference element).
+			// Only apply if the event exists.
+			if (dataRef.current.openEvent && !isMouseBasedEvent(dataRef.current.openEvent)) {
+				return;
+			}
+
+			store.set(
+				'positionReference',
+				createVirtualElement(referenceElement ?? domReference, {
+					x: newX,
+					y: newY,
+					axis,
+					dataRef,
+					pointerType,
+				}),
+			);
+		},
+	);
+
+	const handleReferenceEnterOrMove = useStableCallback((event: React.MouseEvent<Element>) => {
+		if (!open) {
+			setReference(event.clientX, event.clientY, event.currentTarget as Element);
+		} else if (!cleanupListenerRef.current) {
+			// If there's no cleanup, there's no listener, but we want to ensure
+			// we add the listener if the cursor landed on the floating element and
+			// then back on the reference (i.e. it's interactive).
+			setReference(event.clientX, event.clientY, event.currentTarget as Element);
+			setReactive([]);
+		}
+	});
+
+	// If the pointer is a mouse-like pointer, we want to continue following the
+	// mouse even if the floating element is transitioning out. On touch
+	// devices, this is undesirable because the floating element will move to
+	// the dismissal touch point.
+	const openCheck = isMouseLikePointerType(pointerType) ? floating : open;
+
+	React.useEffect(() => {
+		if (!enabled) {
+			resetReference(domReference);
+			return undefined;
+		}
+
+		if (!openCheck) {
+			return undefined;
+		}
+
+		function cleanupListener() {
+			cleanupListenerRef.current?.();
+			cleanupListenerRef.current = null;
+		}
+
+		const win = getWindow(floating);
+
+		function handleMouseMove(event: MouseEvent) {
+			const target = getTarget(event) as Element | null;
+
+			if (!contains(floating, target)) {
+				setReference(event.clientX, event.clientY);
+			} else {
+				cleanupListener();
+			}
+		}
+
+		if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {
+			cleanupListenerRef.current = addEventListener(win, 'mousemove', handleMouseMove);
+		} else {
+			resetReference(domReference);
+		}
+
+		return cleanupListener;
+	}, [
+		openCheck,
+		enabled,
+		floating,
+		dataRef,
+		domReference,
+		store,
+		setReference,
+		resetReference,
+		reactive,
+	]);
+
+	// Clear virtual cursor references when the hook unmounts. Enabled flips are handled above.
+	React.useEffect(
+		() => () => {
+			store.set('positionReference', null);
+		},
+		[store],
+	);
+
+	React.useEffect(() => {
+		if (enabled && !floating) {
+			initialRef.current = false;
+		}
+	}, [enabled, floating]);
+
+	React.useEffect(() => {
+		if (!enabled && open) {
+			initialRef.current = true;
+		}
+	}, [enabled, open]);
+
+	const reference: ElementProps['reference'] = React.useMemo(() => {
+		function setPointerTypeRef(event: React.PointerEvent) {
+			setPointerType(event.pointerType);
+		}
+
+		return {
+			onPointerDown: setPointerTypeRef,
+			onPointerEnter: setPointerTypeRef,
+			onMouseMove: handleReferenceEnterOrMove,
+			onMouseEnter: handleReferenceEnterOrMove,
+		};
+	}, [handleReferenceEnterOrMove]);
+
+	return React.useMemo(
+		() => (enabled ? { reference, trigger: reference } : {}),
+		[enabled, reference],
+	);
+}