@octanejs/visx 0.1.0

package/src/tooltip/floating/middleware.ts

@@ -0,0 +1,104 @@
+import {
+	arrow as arrowMiddleware,
+	flip as flipMiddleware,
+	hide as hideMiddleware,
+	offset as offsetMiddleware,
+	shift as shiftMiddleware,
+	size as sizeMiddleware,
+} from '@octanejs/floating-ui';
+import type { Middleware } from './internalTypes';
+import type { UseFloatingTooltipOptions } from './types';
+
+type BuildFloatingTooltipMiddlewareOptions = Pick<
+	UseFloatingTooltipOptions,
+	| 'arrow'
+	| 'collisionBoundary'
+	| 'collisionPadding'
+	| 'flip'
+	| 'hideWhenDetached'
+	| 'middleware'
+	| 'middlewareMode'
+	| 'offset'
+	| 'shift'
+	| 'size'
+> & {
+	arrowElement?: Element | null;
+};
+
+function getCollisionOptions({
+	collisionBoundary,
+	collisionPadding,
+}: Pick<BuildFloatingTooltipMiddlewareOptions, 'collisionBoundary' | 'collisionPadding'>) {
+	return {
+		boundary: collisionBoundary,
+		padding: collisionPadding,
+	};
+}
+
+export function buildFloatingTooltipMiddleware({
+	arrow,
+	arrowElement,
+	collisionBoundary,
+	collisionPadding,
+	flip = true,
+	hideWhenDetached = false,
+	middleware,
+	middlewareMode = 'append',
+	offset = 0,
+	shift = true,
+	size = false,
+}: BuildFloatingTooltipMiddlewareOptions = {}) {
+	const callerMiddleware = middleware ?? [];
+
+	if (middlewareMode === 'replace') return callerMiddleware;
+
+	const collisionOptions = getCollisionOptions({ collisionBoundary, collisionPadding });
+	const builtInMiddleware: Middleware[] = [offsetMiddleware(offset)];
+
+	if (flip) {
+		builtInMiddleware.push(
+			flipMiddleware({
+				...collisionOptions,
+				...(typeof flip === 'object' ? flip : null),
+			}),
+		);
+	}
+
+	if (shift) {
+		builtInMiddleware.push(
+			shiftMiddleware({
+				...collisionOptions,
+				...(typeof shift === 'object' ? shift : null),
+			}),
+		);
+	}
+
+	if (size) {
+		builtInMiddleware.push(
+			sizeMiddleware({
+				...collisionOptions,
+				...(typeof size === 'object' ? size : null),
+			}),
+		);
+	}
+
+	if (hideWhenDetached) {
+		builtInMiddleware.push(
+			hideMiddleware({
+				...collisionOptions,
+				...(typeof hideWhenDetached === 'object' ? hideWhenDetached : null),
+			}),
+		);
+	}
+
+	if (arrow && arrowElement) {
+		builtInMiddleware.push(
+			arrowMiddleware({
+				element: arrowElement,
+				padding: typeof arrow === 'object' ? arrow.padding : undefined,
+			}),
+		);
+	}
+
+	return [...builtInMiddleware, ...callerMiddleware];
+}

package/src/tooltip/floating/types.ts

@@ -0,0 +1,198 @@
+import type React from 'react';
+import type {
+	Boundary,
+	Delay,
+	FlipOptions,
+	HideOptions,
+	Middleware,
+	MiddlewareData,
+	OffsetOptions,
+	OpenChangeReason,
+	Padding,
+	Placement,
+	ReferenceElement,
+	ShiftOptions,
+	SizeOptions,
+	Strategy,
+	UseDismissProps,
+	FloatingUiArrowProps,
+	UseFloatingOptions,
+	UseFloatingReturn,
+	UseFocusProps,
+	UseHoverProps,
+	UseRoleProps,
+	VirtualElement,
+} from './internalTypes';
+
+export type TooltipPlacement = Placement;
+export type TooltipSide = 'top' | 'right' | 'bottom' | 'left';
+export type TooltipAlign = 'start' | 'center' | 'end';
+export type TooltipCoordinateSpace = 'client' | 'page';
+export type TooltipVirtualElement = VirtualElement;
+
+export type TooltipAnchor =
+	| { type: 'element'; element: Element | null }
+	| { type: 'point'; x: number; y: number; coordinateSpace?: TooltipCoordinateSpace }
+	| { type: 'container-point'; x: number; y: number; container: Element | null }
+	| { type: 'svg-point'; x: number; y: number; svg: SVGSVGElement | SVGGraphicsElement | null }
+	| { type: 'rect'; getRect: () => DOMRect | ClientRect; contextElement?: Element | null }
+	| { type: 'virtual'; element: TooltipVirtualElement };
+
+export type FloatingTooltipOffset = OffsetOptions;
+export type FloatingTooltipPadding = Padding;
+export type FloatingTooltipBoundary = Boundary;
+export type FloatingTooltipFlipOptions = FlipOptions;
+export type FloatingTooltipShiftOptions = ShiftOptions;
+export type FloatingTooltipSizeOptions = SizeOptions;
+export type FloatingTooltipHideOptions = HideOptions;
+
+export type FloatingTooltipArrowOptions = {
+	padding?: FloatingTooltipPadding;
+};
+
+export type FloatingTooltipInteractions =
+	| boolean
+	| {
+			hover?: boolean | UseHoverProps;
+			focus?: boolean | UseFocusProps;
+			dismiss?: boolean | UseDismissProps;
+			role?: boolean | UseRoleProps;
+	  };
+
+export type FloatingTooltipOpenChangeDetails<TData = unknown> = {
+	data: TData | undefined;
+	anchor: TooltipAnchor | null;
+	event?: Event;
+	reason?: OpenChangeReason;
+};
+
+export type UseFloatingTooltipOptions<TData = unknown> = {
+	open?: boolean;
+	defaultOpen?: boolean;
+	onOpenChange?: (open: boolean, details: FloatingTooltipOpenChangeDetails<TData>) => void;
+
+	anchor?: TooltipAnchor | null;
+	defaultAnchor?: TooltipAnchor | null;
+	data?: TData;
+	defaultData?: TData;
+
+	placement?: TooltipPlacement;
+	strategy?: Strategy;
+	offset?: number | FloatingTooltipOffset;
+	collisionPadding?: FloatingTooltipPadding;
+	collisionBoundary?: FloatingTooltipBoundary;
+	flip?: boolean | FloatingTooltipFlipOptions;
+	shift?: boolean | FloatingTooltipShiftOptions;
+	size?: boolean | FloatingTooltipSizeOptions;
+	hideWhenDetached?: boolean | FloatingTooltipHideOptions;
+	arrow?: boolean | FloatingTooltipArrowOptions;
+
+	interactions?: FloatingTooltipInteractions;
+	middleware?: Middleware[];
+	middlewareMode?: 'append' | 'replace';
+	whileElementsMounted?: UseFloatingOptions['whileElementsMounted'];
+
+	id?: string;
+	role?: 'tooltip' | 'label';
+	disabled?: boolean;
+};
+
+export type UseFloatingTooltipReturn<TData = unknown> = {
+	open: boolean;
+	mounted: boolean;
+	data: TData | undefined;
+	anchor: TooltipAnchor | null;
+	placement: TooltipPlacement;
+	side: TooltipSide;
+	align: TooltipAlign;
+	strategy: Strategy;
+	x: number | null;
+	y: number | null;
+	floatingStyles: React.CSSProperties;
+	middlewareData: MiddlewareData;
+
+	refs: UseFloatingReturn<ReferenceElement>['refs'];
+	context: UseFloatingReturn<ReferenceElement>['context'];
+	arrowRef: React.RefCallback<SVGSVGElement>;
+
+	setAnchor: (anchor: TooltipAnchor | null) => void;
+	setData: (data: TData | undefined) => void;
+	update: () => void;
+	openTooltip: (data?: TData, anchor?: TooltipAnchor | null) => void;
+	closeTooltip: () => void;
+
+	getReferenceProps: <TProps extends React.HTMLProps<Element>>(props?: TProps) => TProps;
+	getFloatingProps: <TProps extends React.HTMLProps<HTMLElement>>(props?: TProps) => TProps;
+	getArrowProps: <TProps extends React.SVGProps<SVGSVGElement>>(props?: TProps) => TProps;
+};
+
+export type FloatingTooltipProviderProps = {
+	delay?: Delay;
+	closeDelay?: number;
+	skipDelay?: number;
+	children: React.ReactNode;
+};
+
+export type FloatingTooltipRootState<TData = unknown> = UseFloatingTooltipReturn<TData>;
+
+export type FloatingTooltipRootProps<TData = unknown> = UseFloatingTooltipOptions<TData> & {
+	forceMount?: boolean;
+	children: React.ReactNode | ((state: FloatingTooltipRootState<TData>) => React.ReactNode);
+};
+
+export type FloatingTooltipTriggerState = {
+	open: boolean;
+	side: TooltipSide;
+	align: TooltipAlign;
+};
+
+export type FloatingTooltipTriggerProps = {
+	render:
+		| React.ReactElement
+		| ((props: React.HTMLProps<Element>, state: FloatingTooltipTriggerState) => React.ReactElement);
+	disabled?: boolean;
+};
+
+export type FloatingTooltipPortalProps = {
+	container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null;
+	disabled?: boolean;
+	children: React.ReactNode;
+};
+
+export type FloatingTooltipPositionerState = FloatingTooltipRootState;
+
+export type FloatingTooltipPositionerProps = React.HTMLAttributes<HTMLDivElement> & {
+	'data-testid'?: string;
+	render?:
+		| React.ReactElement
+		| ((
+				props: React.HTMLProps<HTMLDivElement>,
+				state: FloatingTooltipPositionerState,
+		  ) => React.ReactElement);
+};
+
+export type FloatingTooltipContentState = FloatingTooltipRootState;
+
+export type FloatingTooltipContentProps = React.HTMLAttributes<HTMLDivElement> & {
+	render?:
+		| React.ReactElement
+		| ((
+				props: React.HTMLProps<HTMLDivElement>,
+				state: FloatingTooltipContentState,
+		  ) => React.ReactElement);
+};
+
+export type FloatingTooltipArrowState = FloatingTooltipRootState;
+
+export type FloatingTooltipArrowProps = Omit<
+	FloatingUiArrowProps,
+	'context' | 'padding' | 'ref'
+> & {
+	padding?: never;
+	render?:
+		| React.ReactElement
+		| ((
+				props: React.SVGProps<SVGSVGElement>,
+				state: FloatingTooltipArrowState,
+		  ) => React.ReactElement);
+};

package/src/tooltip/floating/useChartTooltip.tsrx

@@ -0,0 +1,180 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
+import type React from 'react';
+import type {
+	ChartTooltipItem,
+	ChartTooltipProps,
+	ChartTooltipControlledProps,
+} from './ChartTooltip.tsrx';
+import type {
+	FloatingTooltipOffset,
+	TooltipAnchor,
+	TooltipPlacement,
+	UseFloatingTooltipOptions,
+} from './types';
+
+export type ChartTooltipLocalPoint = {
+	x: number;
+	y: number;
+};
+
+export type ChartTooltipSvgPoint = {
+	type: 'svg-local-point';
+	x: number;
+	y: number;
+};
+
+export type UseChartTooltipOptions<Datum = unknown> = {
+	defaultOpen?: boolean;
+	defaultItems?: ChartTooltipItem<Datum>[];
+	defaultAnchor?: TooltipAnchor | null;
+	placement?: TooltipPlacement;
+	offset?: number | FloatingTooltipOffset;
+	hideDelay?: number;
+	container?: Element | null;
+	floatingOptions?: Omit<UseFloatingTooltipOptions<ChartTooltipItem<Datum>[]>, | 'open'
+	| 'defaultOpen'
+	| 'data'
+	| 'defaultData'
+	| 'anchor'
+	| 'defaultAnchor'>;
+};
+
+export type UseChartTooltipReturn<Datum = unknown> = {
+	open: boolean;
+	items: ChartTooltipItem<Datum>[];
+	anchor: TooltipAnchor | null;
+	containerRef: React.RefCallback<HTMLElement | SVGElement>;
+	show: (args: {
+		anchor: TooltipAnchor | ChartTooltipLocalPoint | ChartTooltipSvgPoint;
+		items: ChartTooltipItem<Datum>[];
+	}) => void;
+	hide: () => void;
+	update: (args: Partial<{ anchor: TooltipAnchor; items: ChartTooltipItem<Datum>[] }>) => void;
+	tooltipProps: ChartTooltipControlledProps<Datum> & Pick<ChartTooltipProps<Datum>, | 'floatingOptions'
+	| 'offset'
+	| 'placement'>;
+};
+
+function isTooltipAnchor(
+	anchor: TooltipAnchor | ChartTooltipLocalPoint | ChartTooltipSvgPoint,
+): anchor is TooltipAnchor {
+	return 'type' in anchor && anchor.type !== 'svg-local-point';
+}
+
+function isSvgElement(element: Element | null): element is SVGSVGElement | SVGGraphicsElement {
+	return element?.namespaceURI === 'http://www.w3.org/2000/svg';
+}
+
+export default function useChartTooltip<Datum = unknown>(
+	{
+		container,
+		defaultAnchor = null,
+		defaultItems = [],
+		defaultOpen = false,
+		floatingOptions,
+		hideDelay,
+		offset,
+		placement,
+	}: UseChartTooltipOptions<Datum> = {},
+): UseChartTooltipReturn<Datum> {
+	const [open, setOpen] = useState(defaultOpen);
+	const [items, setItems] = useState(defaultItems);
+	const [anchor, setAnchor] = useState<TooltipAnchor | null>(defaultAnchor);
+	const [containerElement, setContainerElement] = useState<HTMLElement | SVGElement | null>(null);
+	const hideTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+	const latestContainer = container ?? containerElement;
+
+	const clearHideTimeout = useCallback(() => {
+		if (hideTimeoutRef.current) {
+			clearTimeout(hideTimeoutRef.current);
+			hideTimeoutRef.current = null;
+		}
+	}, []);
+
+	useEffect(() => clearHideTimeout, [clearHideTimeout]);
+
+	const containerRef = useCallback((node: HTMLElement | SVGElement | null) => {
+		setContainerElement(node);
+	}, []);
+
+	const resolveAnchor = useCallback((nextAnchor: | TooltipAnchor
+	| ChartTooltipLocalPoint
+	| ChartTooltipSvgPoint): TooltipAnchor => {
+		if (isTooltipAnchor(nextAnchor)) return nextAnchor;
+
+		if ('type' in nextAnchor && nextAnchor.type === 'svg-local-point') {
+			return {
+				type: 'svg-point',
+				x: nextAnchor.x,
+				y: nextAnchor.y,
+				svg: isSvgElement(latestContainer) ? latestContainer : null,
+			};
+		}
+
+		return {
+			type: 'container-point',
+			x: nextAnchor.x,
+			y: nextAnchor.y,
+			container: latestContainer,
+		};
+	}, [latestContainer]);
+
+	const show = useCallback(({
+		anchor: nextAnchor,
+		items: nextItems,
+	}: {
+		anchor: TooltipAnchor | ChartTooltipLocalPoint | ChartTooltipSvgPoint;
+		items: ChartTooltipItem<Datum>[];
+	}) => {
+		clearHideTimeout();
+		setAnchor(resolveAnchor(nextAnchor));
+		setItems(nextItems);
+		setOpen(true);
+	}, [clearHideTimeout, resolveAnchor]);
+
+	const hide = useCallback(() => {
+		clearHideTimeout();
+
+		if (hideDelay == null) {
+			setOpen(false);
+			return;
+		}
+
+		hideTimeoutRef.current = setTimeout(() => {
+			setOpen(false);
+			hideTimeoutRef.current = null;
+		}, hideDelay);
+	}, [clearHideTimeout, hideDelay]);
+
+	const update = useCallback(({ anchor: nextAnchor, items: nextItems }: Partial<{
+		anchor: TooltipAnchor;
+		items: ChartTooltipItem<Datum>[];
+	}>) => {
+		if (nextAnchor !== undefined) setAnchor(nextAnchor);
+		if (nextItems !== undefined) setItems(nextItems);
+	}, []);
+
+	const tooltipProps = useMemo(
+		() => ({
+			open,
+			anchor,
+			items,
+			floatingOptions,
+			offset,
+			placement,
+		}),
+		[anchor, floatingOptions, items, offset, open, placement],
+	);
+
+	return {
+		open,
+		items,
+		anchor,
+		containerRef,
+		show,
+		hide,
+		update,
+		tooltipProps,
+	};
+}

package/src/tooltip/floating/useChartTooltip.tsrx.d.ts

@@ -0,0 +1,40 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type React from 'react';
+import type { ChartTooltipItem, ChartTooltipProps, ChartTooltipControlledProps } from './ChartTooltip.tsrx';
+import type { FloatingTooltipOffset, TooltipAnchor, TooltipPlacement, UseFloatingTooltipOptions } from './types';
+export type ChartTooltipLocalPoint = {
+    x: number;
+    y: number;
+};
+export type ChartTooltipSvgPoint = {
+    type: 'svg-local-point';
+    x: number;
+    y: number;
+};
+export type UseChartTooltipOptions<Datum = unknown> = {
+    defaultOpen?: boolean;
+    defaultItems?: ChartTooltipItem<Datum>[];
+    defaultAnchor?: TooltipAnchor | null;
+    placement?: TooltipPlacement;
+    offset?: number | FloatingTooltipOffset;
+    hideDelay?: number;
+    container?: Element | null;
+    floatingOptions?: Omit<UseFloatingTooltipOptions<ChartTooltipItem<Datum>[]>, 'open' | 'defaultOpen' | 'data' | 'defaultData' | 'anchor' | 'defaultAnchor'>;
+};
+export type UseChartTooltipReturn<Datum = unknown> = {
+    open: boolean;
+    items: ChartTooltipItem<Datum>[];
+    anchor: TooltipAnchor | null;
+    containerRef: React.RefCallback<HTMLElement | SVGElement>;
+    show: (args: {
+        anchor: TooltipAnchor | ChartTooltipLocalPoint | ChartTooltipSvgPoint;
+        items: ChartTooltipItem<Datum>[];
+    }) => void;
+    hide: () => void;
+    update: (args: Partial<{
+        anchor: TooltipAnchor;
+        items: ChartTooltipItem<Datum>[];
+    }>) => void;
+    tooltipProps: ChartTooltipControlledProps<Datum> & Pick<ChartTooltipProps<Datum>, 'floatingOptions' | 'offset' | 'placement'>;
+};
+export default function useChartTooltip<Datum = unknown>({ container, defaultAnchor, defaultItems, defaultOpen, floatingOptions, hideDelay, offset, placement, }?: UseChartTooltipOptions<Datum>): UseChartTooltipReturn<Datum>;