@octanejs/visx 0.1.0

package/src/tooltip/floating/FloatingTooltip.tsrx

@@ -0,0 +1,269 @@
+import { FloatingArrow, FloatingDelayGroup, FloatingPortal } from '@octanejs/floating-ui';
+import { cloneElement, isValidElement, useCallback } from 'octane';
+import type React from 'react';
+import { FloatingTooltipContextProvider, useFloatingTooltipContext } from './context.tsrx';
+import useFloatingTooltip from './useFloatingTooltip.tsrx';
+import type {
+	FloatingTooltipArrowProps,
+	FloatingTooltipArrowState,
+	FloatingTooltipContentProps,
+	FloatingTooltipContentState,
+	FloatingTooltipPortalProps,
+	FloatingTooltipPositionerProps,
+	FloatingTooltipPositionerState,
+	FloatingTooltipProviderProps,
+	FloatingTooltipRootProps,
+	FloatingTooltipRootState,
+	FloatingTooltipTriggerProps,
+} from './types';
+
+type RenderElementProps<ElementProps, State> = {
+	defaultElement: React.ReactElement;
+	props: ElementProps;
+	render?: React.ReactElement | ((props: ElementProps, state: State) => React.ReactElement);
+	state: State;
+};
+
+type FloatingCssVariables = React.CSSProperties & {
+		'--visx-tooltip-transform-origin'?: string;
+		'--visx-tooltip-arrow-x'?: string;
+		'--visx-tooltip-arrow-y'?: string;
+	};
+
+type FloatingDataAttributes = {
+	[key: `data-${string}`]: string | undefined;
+};
+
+type FloatingReferenceProps = React.HTMLProps<Element> & FloatingDataAttributes;
+type FloatingDivProps = React.HTMLProps<HTMLDivElement> & FloatingDataAttributes;
+type FloatingSvgProps = React.SVGProps<SVGSVGElement> & FloatingDataAttributes;
+
+function renderElement<ElementProps, State>({
+	defaultElement,
+	props,
+	render,
+	state,
+}: RenderElementProps<ElementProps, State>) {
+	if (typeof render === 'function') return render(props, state);
+
+	if (isValidElement(render)) {
+		return cloneElement(render, props as Partial<unknown> & React.Attributes);
+	}
+
+	return cloneElement(defaultElement, props as Partial<unknown> & React.Attributes);
+}
+
+function getTransformOrigin(state: FloatingTooltipRootState) {
+	const arrowX = state.middlewareData.arrow?.x;
+	const arrowY = state.middlewareData.arrow?.y;
+
+	switch (state.side) {
+		case 'top':
+			return `${arrowX == null ? '50%' : `${arrowX}px`} bottom`;
+		case 'bottom':
+			return `${arrowX == null ? '50%' : `${arrowX}px`} top`;
+		case 'left':
+			return `right ${arrowY == null ? '50%' : `${arrowY}px`}`;
+		case 'right':
+			return `left ${arrowY == null ? '50%' : `${arrowY}px`}`;
+		default:
+			return '50% 50%';
+	}
+}
+
+function getFloatingCssVariables(state: FloatingTooltipRootState): FloatingCssVariables {
+	const arrowX = state.middlewareData.arrow?.x;
+	const arrowY = state.middlewareData.arrow?.y;
+
+	return {
+		'--visx-tooltip-transform-origin': getTransformOrigin(state),
+		'--visx-tooltip-arrow-x': arrowX == null ? undefined : `${arrowX}px`,
+		'--visx-tooltip-arrow-y': arrowY == null ? undefined : `${arrowY}px`,
+	};
+}
+
+function getPortalRoot(container: FloatingTooltipPortalProps['container']) {
+	if (!container) return undefined;
+	if ('current' in container) return container.current;
+	return container;
+}
+
+function Provider({
+	children,
+	closeDelay = 0,
+	delay = 600,
+	skipDelay = 400,
+}: FloatingTooltipProviderProps) {
+	const floatingDelay =
+		typeof delay === 'number'
+			? { open: delay, close: closeDelay }
+			: { open: delay.open ?? 600, close: delay.close ?? closeDelay };
+
+	return <FloatingDelayGroup
+		delay={floatingDelay}
+		timeoutMs={skipDelay}
+	>{children}</FloatingDelayGroup>;
+}
+
+function Root<TData = unknown>({
+	children,
+	forceMount = false,
+	...options
+}: FloatingTooltipRootProps<TData>) {
+	const tooltip = useFloatingTooltip<TData>(options);
+	const state = {
+		...tooltip,
+		mounted: tooltip.open || forceMount,
+	};
+
+	return <FloatingTooltipContextProvider value={state}>
+		{typeof children === 'function' ? children(state) : children}
+	</FloatingTooltipContextProvider>;
+}
+
+function Trigger({ disabled = false, render }: FloatingTooltipTriggerProps) {
+	const state = useFloatingTooltipContext('FloatingTooltip.Trigger');
+	const setTriggerReference = useCallback((node: Element | null) => {
+		if (disabled) {
+			state.refs.setPositionReference(node);
+			state.refs.setReference(null);
+			return;
+		}
+
+		state.refs.setReference(node);
+	}, [disabled, state.refs]);
+	const triggerState = {
+		open: state.open,
+		side: state.side,
+		align: state.align,
+	};
+	const referenceProps: FloatingReferenceProps = {
+		'aria-disabled': disabled || undefined,
+		'data-disabled': disabled ? '' : undefined,
+		'data-state': state.open ? 'open' : 'closed',
+		'data-visx-tooltip-trigger': '',
+		ref: setTriggerReference,
+	};
+	const triggerProps =
+		disabled ? referenceProps : state.getReferenceProps(referenceProps);
+
+	if (typeof render === 'function') return render(triggerProps, triggerState);
+
+	return cloneElement(render, triggerProps as Partial<unknown> & React.Attributes);
+}
+
+function Portal({ children, container, disabled = false }: FloatingTooltipPortalProps) {
+	const state = useFloatingTooltipContext('FloatingTooltip.Portal');
+
+	if (!state.mounted) return null;
+	if (disabled) return children;
+
+	return <FloatingPortal
+		root={getPortalRoot(container)}
+	>{children}</FloatingPortal>;
+}
+
+function Positioner({ children, id, render, style, ...restProps }: FloatingTooltipPositionerProps) {
+	const state = useFloatingTooltipContext('FloatingTooltip.Positioner');
+
+	if (!state.mounted) return null;
+
+	const anchorHidden = Boolean(state.middlewareData.hide?.referenceHidden);
+	const basePositionerProps: FloatingDivProps = {
+		...restProps,
+		children,
+		'data-anchor-hidden': anchorHidden ? '' : undefined,
+		'data-align': state.align,
+		'data-side': state.side,
+		'data-state': state.open ? 'open' : 'closed',
+		'data-visx-tooltip': '',
+		...(id === undefined ? null : { id }),
+		ref: state.refs.setFloating,
+		style: {
+			...state.floatingStyles,
+			...getFloatingCssVariables(state),
+			...style,
+		},
+	};
+	const positionerProps = state.getFloatingProps(basePositionerProps);
+
+	return renderElement<React.HTMLProps<HTMLDivElement>, FloatingTooltipPositionerState>({
+		defaultElement: <div />,
+		props: positionerProps,
+		render,
+		state,
+	});
+}
+
+function Content({ children, render, ...restProps }: FloatingTooltipContentProps) {
+	const state = useFloatingTooltipContext('FloatingTooltip.Content');
+
+	if (!state.mounted) return null;
+
+	const contentProps: FloatingDivProps = {
+		...restProps,
+		children,
+		'data-state': state.open ? 'open' : 'closed',
+		'data-visx-tooltip-content': '',
+	};
+
+	return renderElement<React.HTMLProps<HTMLDivElement>, FloatingTooltipContentState>({
+		defaultElement: <div />,
+		props: contentProps,
+		render,
+		state,
+	});
+}
+
+function Arrow({
+	height = 7,
+	padding: _padding,
+	render,
+	tipRadius = 0,
+	width = 14,
+	...restProps
+}: FloatingTooltipArrowProps) {
+	const state = useFloatingTooltipContext('FloatingTooltip.Arrow');
+
+	if (!state.mounted) return null;
+
+	if (render) {
+		const baseArrowProps: FloatingSvgProps = {
+			...restProps,
+			height,
+			'data-visx-tooltip-arrow': '',
+			ref: state.arrowRef,
+			width,
+		};
+		const arrowProps = state.getArrowProps(baseArrowProps);
+
+		return renderElement<React.SVGProps<SVGSVGElement>, FloatingTooltipArrowState>({
+			defaultElement: <svg />,
+			props: arrowProps,
+			render,
+			state,
+		});
+	}
+
+	return <FloatingArrow
+		{...restProps}
+		data-visx-tooltip-arrow=""
+		ref={state.arrowRef}
+		context={state.context}
+		width={width}
+		height={height}
+		tipRadius={tipRadius}
+	/>;
+}
+
+const FloatingTooltip = {
+	Arrow,
+	Content,
+	Portal,
+	Positioner,
+	Provider,
+	Root,
+	Trigger,
+};
+
+export default FloatingTooltip

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

@@ -0,0 +1,20 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type React from 'react';
+import type { FloatingTooltipArrowProps, FloatingTooltipContentProps, FloatingTooltipPortalProps, FloatingTooltipPositionerProps, FloatingTooltipProviderProps, FloatingTooltipRootProps, FloatingTooltipTriggerProps } from './types';
+declare function Provider({ children, closeDelay, delay, skipDelay, }: FloatingTooltipProviderProps): React.JSX.Element;
+declare function Root<TData = unknown>({ children, forceMount, ...options }: FloatingTooltipRootProps<TData>): React.JSX.Element;
+declare function Trigger({ disabled, render }: FloatingTooltipTriggerProps): import("octane").ElementDescriptor<any> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function Portal({ children, container, disabled }: FloatingTooltipPortalProps): string | number | bigint | boolean | React.JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+declare function Positioner({ children, id, render, style, ...restProps }: FloatingTooltipPositionerProps): import("octane").ElementDescriptor<any> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+declare function Content({ children, render, ...restProps }: FloatingTooltipContentProps): import("octane").ElementDescriptor<any> | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
+declare function Arrow({ height, padding: _padding, render, tipRadius, width, ...restProps }: FloatingTooltipArrowProps): React.JSX.Element | import("octane").ElementDescriptor<any> | null;
+declare const FloatingTooltip: {
+    Arrow: typeof Arrow;
+    Content: typeof Content;
+    Portal: typeof Portal;
+    Positioner: typeof Positioner;
+    Provider: typeof Provider;
+    Root: typeof Root;
+    Trigger: typeof Trigger;
+};
+export default FloatingTooltip;

package/src/tooltip/floating/anchors.ts

@@ -0,0 +1,146 @@
+import type { ReferenceElement } from './internalTypes';
+import type { TooltipAnchor, TooltipVirtualElement } from './types';
+
+type MatrixLike = {
+	a?: number;
+	b?: number;
+	c?: number;
+	d?: number;
+	e?: number;
+	f?: number;
+};
+
+type SvgPointLike = {
+	x: number;
+	y: number;
+	matrixTransform(matrix: MatrixLike): { x: number; y: number };
+};
+
+function createRect(left: number, top: number, width = 0, height = 0): DOMRect | ClientRect {
+	if (typeof DOMRect === 'function') {
+		return new DOMRect(left, top, width, height);
+	}
+
+	const rect: DOMRect = {
+		x: left,
+		y: top,
+		left,
+		top,
+		width,
+		height,
+		right: left + width,
+		bottom: top + height,
+		toJSON: () => ({
+			x: left,
+			y: top,
+			left,
+			top,
+			width,
+			height,
+			right: left + width,
+			bottom: top + height,
+		}),
+	};
+
+	return rect;
+}
+
+function createPointVirtualElement(
+	x: number,
+	y: number,
+	contextElement?: Element | null,
+): TooltipVirtualElement {
+	return {
+		getBoundingClientRect: () => createRect(x, y),
+		contextElement: contextElement ?? undefined,
+	};
+}
+
+function getScrollX() {
+	return window.scrollX || window.pageXOffset || 0;
+}
+
+function getScrollY() {
+	return window.scrollY || window.pageYOffset || 0;
+}
+
+function isSvgSvgElement(element: SVGSVGElement | SVGGraphicsElement): element is SVGSVGElement {
+	return element.ownerSVGElement == null;
+}
+
+function getSvgPointReference(
+	x: number,
+	y: number,
+	svg: SVGSVGElement | SVGGraphicsElement,
+): TooltipVirtualElement {
+	return {
+		getBoundingClientRect: () => {
+			const ownerSvg = isSvgSvgElement(svg) ? svg : svg.ownerSVGElement;
+			const createSVGPoint = ownerSvg?.createSVGPoint?.bind(ownerSvg);
+			const getScreenCTM = svg.getScreenCTM?.bind(svg) ?? ownerSvg?.getScreenCTM?.bind(ownerSvg);
+			const screenCTM = getScreenCTM?.();
+
+			if (createSVGPoint && screenCTM) {
+				const point = createSVGPoint() as SvgPointLike;
+				point.x = x;
+				point.y = y;
+				const transformed = point.matrixTransform(screenCTM);
+				return createRect(transformed.x, transformed.y);
+			}
+
+			const bounds = svg.getBoundingClientRect();
+			return createRect(bounds.left + x, bounds.top + y);
+		},
+		contextElement: svg,
+	};
+}
+
+export function getTooltipAnchorReference(
+	anchor: TooltipAnchor | null | undefined,
+): ReferenceElement | null {
+	if (!anchor) return null;
+
+	switch (anchor.type) {
+		case 'element':
+			return anchor.element;
+
+		case 'point': {
+			const x = anchor.coordinateSpace === 'page' ? anchor.x - getScrollX() : anchor.x;
+			const y = anchor.coordinateSpace === 'page' ? anchor.y - getScrollY() : anchor.y;
+			return createPointVirtualElement(x, y);
+		}
+
+		case 'container-point': {
+			if (!anchor.container) return null;
+
+			const { container } = anchor;
+			const reference: TooltipVirtualElement = {
+				getBoundingClientRect: () => {
+					const bounds = container.getBoundingClientRect();
+					return createRect(bounds.left + anchor.x, bounds.top + anchor.y);
+				},
+				contextElement: container,
+			};
+
+			return reference;
+		}
+
+		case 'svg-point':
+			return anchor.svg ? getSvgPointReference(anchor.x, anchor.y, anchor.svg) : null;
+
+		case 'rect': {
+			const reference: TooltipVirtualElement = {
+				getBoundingClientRect: anchor.getRect,
+				contextElement: anchor.contextElement ?? undefined,
+			};
+
+			return reference;
+		}
+
+		case 'virtual':
+			return anchor.element;
+
+		default:
+			return null;
+	}
+}

package/src/tooltip/floating/context.tsrx

@@ -0,0 +1,29 @@
+import { createContext, useContext } from 'octane';
+import type React from 'react';
+import type { FloatingTooltipRootState } from './types';
+
+const FloatingTooltipContext = createContext<FloatingTooltipRootState<any> | null>(null);
+
+export type FloatingTooltipContextProviderProps = {
+	children: React.ReactNode;
+	value: FloatingTooltipRootState<any>;
+};
+
+export function FloatingTooltipContextProvider({
+	children,
+	value,
+}: FloatingTooltipContextProviderProps) {
+	return <FloatingTooltipContext.Provider
+		value={value}
+	>{children}</FloatingTooltipContext.Provider>;
+}
+
+export function useFloatingTooltipContext(componentName: string) {
+	const context = useContext(FloatingTooltipContext);
+
+	if (!context) {
+		throw new Error(`${componentName} must be rendered inside FloatingTooltip.Root.`);
+	}
+
+	return context;
+}

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

@@ -0,0 +1,9 @@
+// Generated by scripts/generate-tsrx-types.mjs.
+import type React from 'react';
+import type { FloatingTooltipRootState } from './types';
+export type FloatingTooltipContextProviderProps = {
+    children: React.ReactNode;
+    value: FloatingTooltipRootState<any>;
+};
+export declare function FloatingTooltipContextProvider({ children, value, }: FloatingTooltipContextProviderProps): React.JSX.Element;
+export declare function useFloatingTooltipContext(componentName: string): FloatingTooltipRootState<any>;

package/src/tooltip/floating/index.ts

@@ -0,0 +1,61 @@
+'use client';
+
+export { getTooltipAnchorReference } from './anchors';
+export { default as ChartTooltip } from './ChartTooltip.tsrx';
+export { default as ChartTooltipContent } from './ChartTooltipContent.tsrx';
+export { default as FloatingTooltip } from './FloatingTooltip.tsrx';
+export { default as useChartTooltip } from './useChartTooltip.tsrx';
+export { default as useFloatingTooltip } from './useFloatingTooltip.tsrx';
+export { buildFloatingTooltipMiddleware } from './middleware';
+
+export type { ChartTooltipControlledProps, ChartTooltipProps } from './ChartTooltip.tsrx';
+
+export type {
+	ChartTooltipConfig,
+	ChartTooltipContentProps,
+	ChartTooltipIndicator,
+	ChartTooltipItem,
+	ChartTooltipItemRenderParams,
+	ChartTooltipLabelRenderParams,
+	ChartTooltipValueRenderParams,
+} from './ChartTooltipContent.tsrx';
+
+export type {
+	ChartTooltipLocalPoint,
+	ChartTooltipSvgPoint,
+	UseChartTooltipOptions,
+	UseChartTooltipReturn,
+} from './useChartTooltip.tsrx';
+
+export type {
+	FloatingTooltipArrowOptions,
+	FloatingTooltipArrowProps,
+	FloatingTooltipArrowState,
+	FloatingTooltipBoundary,
+	FloatingTooltipContentProps,
+	FloatingTooltipContentState,
+	FloatingTooltipFlipOptions,
+	FloatingTooltipHideOptions,
+	FloatingTooltipInteractions,
+	FloatingTooltipOffset,
+	FloatingTooltipOpenChangeDetails,
+	FloatingTooltipPadding,
+	FloatingTooltipPortalProps,
+	FloatingTooltipPositionerProps,
+	FloatingTooltipPositionerState,
+	FloatingTooltipProviderProps,
+	FloatingTooltipRootProps,
+	FloatingTooltipRootState,
+	FloatingTooltipShiftOptions,
+	FloatingTooltipSizeOptions,
+	FloatingTooltipTriggerProps,
+	FloatingTooltipTriggerState,
+	TooltipAlign,
+	TooltipAnchor,
+	TooltipCoordinateSpace,
+	TooltipPlacement,
+	TooltipSide,
+	TooltipVirtualElement,
+	UseFloatingTooltipOptions,
+	UseFloatingTooltipReturn,
+} from './types';

package/src/tooltip/floating/internalTypes.ts

@@ -0,0 +1,125 @@
+import type React from 'react';
+import type {
+	Boundary,
+	FlipOptions,
+	HideOptions,
+	Middleware,
+	MiddlewareData,
+	OffsetOptions,
+	Padding,
+	Placement,
+	ReferenceElement,
+	ShiftOptions,
+	SizeOptions,
+	Strategy,
+	VirtualElement,
+} from '@floating-ui/dom';
+
+export type {
+	Boundary,
+	FlipOptions,
+	HideOptions,
+	Middleware,
+	MiddlewareData,
+	OffsetOptions,
+	Padding,
+	Placement,
+	ReferenceElement,
+	ShiftOptions,
+	SizeOptions,
+	Strategy,
+	VirtualElement,
+};
+
+export type OpenChangeReason =
+	| 'outside-press'
+	| 'escape-key'
+	| 'ancestor-scroll'
+	| 'reference-press'
+	| 'click'
+	| 'hover'
+	| 'focus'
+	| 'focus-out'
+	| 'list-navigation'
+	| 'safe-polygon';
+
+export type Delay = number | Partial<{ open: number; close: number }>;
+
+export type UseHoverProps = {
+	enabled?: boolean;
+	handleClose?: ((context: unknown) => (event: MouseEvent) => void) | null;
+	restMs?: number | (() => number);
+	delay?: Delay | (() => Delay);
+	mouseOnly?: boolean;
+	move?: boolean;
+};
+
+export type UseFocusProps = {
+	enabled?: boolean;
+	visibleOnly?: boolean;
+};
+
+export type UseDismissProps = {
+	enabled?: boolean;
+	escapeKey?: boolean;
+	outsidePress?: boolean | ((event: MouseEvent) => boolean);
+	outsidePressEvent?: 'pointerdown' | 'mousedown' | 'click';
+	referencePress?: boolean;
+	referencePressEvent?: 'pointerdown' | 'mousedown' | 'click';
+	ancestorScroll?: boolean;
+	bubbles?: boolean | { escapeKey?: boolean; outsidePress?: boolean };
+	capture?: boolean | { escapeKey?: boolean; outsidePress?: boolean };
+};
+
+export type UseRoleProps = {
+	enabled?: boolean;
+	role?:
+		| 'tooltip'
+		| 'dialog'
+		| 'alertdialog'
+		| 'menu'
+		| 'listbox'
+		| 'grid'
+		| 'tree'
+		| 'label'
+		| 'select'
+		| 'combobox';
+};
+
+export type UseFloatingOptions = {
+	whileElementsMounted?: (
+		reference: ReferenceElement,
+		floating: HTMLElement,
+		update: () => void,
+	) => void | (() => void);
+};
+
+type MutableReference<T> = { current: T };
+
+export type UseFloatingReturn<RT extends ReferenceElement = ReferenceElement> = {
+	x: number;
+	y: number;
+	placement: Placement;
+	strategy: Strategy;
+	floatingStyles: React.CSSProperties;
+	middlewareData: MiddlewareData;
+	update: () => void;
+	refs: {
+		reference: MutableReference<RT | null>;
+		floating: MutableReference<HTMLElement | null>;
+		domReference: MutableReference<Element | null>;
+		setReference: (node: RT | null) => void;
+		setPositionReference: (node: RT | null) => void;
+		setFloating: (node: HTMLElement | null) => void;
+	};
+	context: Record<string, unknown>;
+};
+
+export type FloatingUiArrowProps = React.SVGProps<SVGSVGElement> & {
+	context: unknown;
+	width?: number;
+	height?: number;
+	tipRadius?: number;
+	staticOffset?: string | number | null;
+	d?: string;
+};