@octanejs/visx 0.1.36 → 0.1.38

package/src/shape/shapes/LinePath.tsrx

@@ -1,5 +1,6 @@
 import type { Ref } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import cx from 'classnames';
 import type { Line as LineType } from 'd3-shape';
 import type { AddSVGProps, LinePathConfig } from '../types';
@@ -15,7 +16,7 @@ export type LinePathProps<Datum> = {
 		/** Fill color of the path element. */
 		fill?: string;
 		/** className applied to path element. */
-		className?: string;
+		className?: Octane.SVGProps<SVGPathElement>['className'];
 	} & LinePathConfig<Datum>;
 
 export default function LinePath<Datum>({

package/src/shape/shapes/LinePath.tsrx.d.ts

@@ -1,6 +1,7 @@
 // Generated by scripts/generate-tsrx-types.mjs.
 import type { Ref } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import type { Line as LineType } from 'd3-shape';
 import type { AddSVGProps, LinePathConfig } from '../types';
 export type LinePathProps<Datum> = {
@@ -15,6 +16,6 @@ export type LinePathProps<Datum> = {
     /** Fill color of the path element. */
     fill?: string;
     /** className applied to path element. */
-    className?: string;
+    className?: Octane.SVGProps<SVGPathElement>['className'];
 } & LinePathConfig<Datum>;
 export default function LinePath<Datum>({ children, data, x, y, fill, className, curve, innerRef, defined, ...restProps }: AddSVGProps<LinePathProps<Datum>, SVGPathElement>): import("react").JSX.Element;

package/src/shape/types/area.ts

@@ -1,13 +1,14 @@
 import type { Area } from 'd3-shape';
 import type { Ref } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import type { AreaPathConfig } from './D3ShapeConfig';
 
 export type BaseAreaProps<Datum> = {
 	/** Override render function which is passed the configured area generator as input. */
 	children?: (args: { path: Area<Datum> }) => OctaneNode;
 	/** Classname applied to path element. */
-	className?: string;
+	className?: Octane.SVGProps<SVGPathElement>['className'];
 	/** Array of data for which to generate an area shape. */
 	data?: Datum[];
 	/** React RefObject passed to the path element. */

package/src/text/types.ts

@@ -1,7 +1,8 @@
-import type { CSSProperties, Ref, SVGAttributes } from 'react';
+import type { CSSProperties, Ref } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 
-type SVGTSpanProps = SVGAttributes<SVGTSpanElement>;
-type SVGTextProps = SVGAttributes<SVGTextElement>;
+type SVGTSpanProps = Octane.SVGProps<SVGTSpanElement>;
+type SVGTextProps = Octane.SVGProps<SVGTextElement>;
 
 type OwnProps = {
 	/** className to apply to the SVGText element. */

package/src/tooltip/enhancers/withTooltip.tsrx

@@ -1,15 +1,18 @@
-import type { ReactElement, FunctionComponent, HTMLProps, ComponentType } from 'react';
+import type { ComponentBody, ElementDescriptor, OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 
 import type { UseTooltipParams } from '../hooks/useTooltip.tsrx';
 import useTooltip from '../hooks/useTooltip.tsrx';
 
 export type WithTooltipProvidedProps<TooltipData> = UseTooltipParams<TooltipData>;
-type WithTooltipContainerProps = HTMLProps<HTMLDivElement>;
-type RenderTooltipContainer =
-	(children: ReactElement, containerProps?: WithTooltipContainerProps) => ReactElement;
+type WithTooltipContainerProps = Octane.HTMLAttributes<HTMLDivElement>;
+type RenderTooltipContainer = (
+	children: ElementDescriptor,
+	containerProps?: WithTooltipContainerProps,
+) => ElementDescriptor | OctaneNode;
 
 export default function withTooltip<BaseComponentProps = {}, TooltipData = {}>(
-	BaseComponent: ComponentType<BaseComponentProps & WithTooltipProvidedProps<TooltipData>>,
+	BaseComponent: ComponentBody<BaseComponentProps & WithTooltipProvidedProps<TooltipData>>,
 	containerProps: WithTooltipContainerProps = {
 		style: {
 			position: 'relative',
@@ -17,13 +20,15 @@ export default function withTooltip<BaseComponentProps = {}, TooltipData = {}>(
 			height: 'inherit',
 		} as const,
 	},
-	renderContainer: RenderTooltipContainer = (children, props) => <div {...props}>{children}</div>,
-) {
-	const WrappedComponent: FunctionComponent<BaseComponentProps> = (props) => {
+	renderContainer: RenderTooltipContainer = function defaultRenderContainer(children, props) {
+		return <div {...props}>{children}</div>;
+	},
+): (props: BaseComponentProps) => OctaneNode {
+	function WrappedComponent(props: BaseComponentProps): OctaneNode {
 		const tooltipProps = useTooltip<TooltipData>();
 
 		return renderContainer(<BaseComponent {...tooltipProps} {...props} />, containerProps);
-	};
+	}
 
 	return WrappedComponent;
 }

package/src/tooltip/enhancers/withTooltip.tsrx.d.ts

@@ -1,8 +1,9 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactElement, FunctionComponent, HTMLProps, ComponentType } from 'react';
+import type { ComponentBody, ElementDescriptor, OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import type { UseTooltipParams } from '../hooks/useTooltip.tsrx';
 export type WithTooltipProvidedProps<TooltipData> = UseTooltipParams<TooltipData>;
-type WithTooltipContainerProps = HTMLProps<HTMLDivElement>;
-type RenderTooltipContainer = (children: ReactElement, containerProps?: WithTooltipContainerProps) => ReactElement;
-export default function withTooltip<BaseComponentProps = {}, TooltipData = {}>(BaseComponent: ComponentType<BaseComponentProps & WithTooltipProvidedProps<TooltipData>>, containerProps?: WithTooltipContainerProps, renderContainer?: RenderTooltipContainer): FunctionComponent<BaseComponentProps>;
+type WithTooltipContainerProps = Octane.HTMLAttributes<HTMLDivElement>;
+type RenderTooltipContainer = (children: ElementDescriptor, containerProps?: WithTooltipContainerProps) => ElementDescriptor | OctaneNode;
+export default function withTooltip<BaseComponentProps = {}, TooltipData = {}>(BaseComponent: ComponentBody<BaseComponentProps & WithTooltipProvidedProps<TooltipData>>, containerProps?: WithTooltipContainerProps, renderContainer?: RenderTooltipContainer): (props: BaseComponentProps) => OctaneNode;
 export {};

package/src/tooltip/floating/ChartTooltip.tsrx

@@ -1,4 +1,3 @@
-import type React from 'react';
 import type { OctaneNode } from 'octane';
 import ChartTooltipContent from './ChartTooltipContent.tsrx';
 import FloatingTooltip from './FloatingTooltip.tsrx';
@@ -77,7 +76,9 @@ export default function ChartTooltip<Datum = unknown>({
 		offset={offset}
 		collisionPadding={collisionPadding}
 	>
-		{(state) => {
+		{function renderChartTooltip(
+			state: FloatingTooltipRootState<ChartTooltipItem<Datum>[]>,
+		) {
 			const content =
 				renderContent?.({ items, config, state }) ??
 					<ChartTooltipContent label={label} items={items} config={config} {...contentProps} />;

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

@@ -1,5 +1,4 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type React from 'react';
 import type { OctaneNode } from 'octane';
 import type { ChartTooltipConfig, ChartTooltipContentProps, ChartTooltipItem } from './ChartTooltipContent.tsrx';
 import type { FloatingTooltipOffset, FloatingTooltipPadding, FloatingTooltipPortalProps, FloatingTooltipPositionerProps, FloatingTooltipRootState, TooltipAnchor, TooltipPlacement, UseFloatingTooltipOptions } from './types';
@@ -27,4 +26,4 @@ export type ChartTooltipProps<Datum = unknown> = ChartTooltipControlledProps<Dat
         state: FloatingTooltipRootState<ChartTooltipItem<Datum>[]>;
     }) => OctaneNode;
 };
-export default function ChartTooltip<Datum = unknown>({ anchor, collisionPadding, config, contentProps, floatingOptions, items, label, offset, open, placement, portal, portalProps, positionerProps, renderContent, strategy, }: ChartTooltipProps<Datum>): React.JSX.Element;
+export default function ChartTooltip<Datum = unknown>({ anchor, collisionPadding, config, contentProps, floatingOptions, items, label, offset, open, placement, portal, portalProps, positionerProps, renderContent, strategy, }: ChartTooltipProps<Datum>): import("react").JSX.Element;

package/src/tooltip/floating/ChartTooltipContent.tsrx

@@ -1,5 +1,6 @@
-import type React from 'react';
-import type { OctaneNode } from 'octane';
+import type { ComponentBody, OctaneNode } from 'octane';
+import type { CSSProperties } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 
 export type ChartTooltipItem<Datum = unknown> = {
 	key: string;
@@ -19,7 +20,7 @@ export type ChartTooltipItem<Datum = unknown> = {
 export type ChartTooltipConfig<Datum = unknown> = Record<string, {
 		label?: OctaneNode | ((item: ChartTooltipItem<Datum>) => OctaneNode);
 		color?: string | ((item: ChartTooltipItem<Datum>) => string | undefined);
-		icon?: React.ComponentType<{ item: ChartTooltipItem<Datum> }>;
+		icon?: ComponentBody<{ item: ChartTooltipItem<Datum> }>;
 		formatValue?: (value: unknown, item: ChartTooltipItem<Datum>) => OctaneNode;
 		formatLabel?: (item: ChartTooltipItem<Datum>) => OctaneNode;
 		hide?: boolean;
@@ -45,7 +46,7 @@ export type ChartTooltipItemRenderParams<Datum = unknown> = {
 
 export type ChartTooltipValueRenderParams<Datum = unknown> = ChartTooltipItemRenderParams<Datum>;
 
-export type ChartTooltipContentProps<Datum = unknown> = React.HTMLAttributes<HTMLDivElement> & {
+export type ChartTooltipContentProps<Datum = unknown> = Octane.HTMLAttributes<HTMLDivElement> & {
 		label?: OctaneNode;
 		items: ChartTooltipItem<Datum>[];
 		config?: ChartTooltipConfig<Datum>;
@@ -56,7 +57,7 @@ export type ChartTooltipContentProps<Datum = unknown> = React.HTMLAttributes<HTM
 		renderLabel?: (params: ChartTooltipLabelRenderParams<Datum>) => OctaneNode;
 		renderItem?: (params: ChartTooltipItemRenderParams<Datum>) => OctaneNode;
 		renderValue?: (params: ChartTooltipValueRenderParams<Datum>) => OctaneNode;
-		getItemKey?: (item: ChartTooltipItem<Datum>, index: number) => React.Key;
+		getItemKey?: (item: ChartTooltipItem<Datum>, index: number) => string | number;
 		'data-testid'?: string;
 	};
 
@@ -66,7 +67,7 @@ type VisibleItem<Datum> = {
 	item: ChartTooltipItem<Datum>;
 };
 
-type ChartTooltipItemStyle = React.CSSProperties & {
+type ChartTooltipItemStyle = CSSProperties & {
 		'--visx-tooltip-item-color'?: string;
 	};
 

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

@@ -1,6 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type React from 'react';
-import type { OctaneNode } from 'octane';
+import type { ComponentBody, OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 export type ChartTooltipItem<Datum = unknown> = {
     key: string;
     datum?: Datum;
@@ -18,7 +18,7 @@ export type ChartTooltipItem<Datum = unknown> = {
 export type ChartTooltipConfig<Datum = unknown> = Record<string, {
     label?: OctaneNode | ((item: ChartTooltipItem<Datum>) => OctaneNode);
     color?: string | ((item: ChartTooltipItem<Datum>) => string | undefined);
-    icon?: React.ComponentType<{
+    icon?: ComponentBody<{
         item: ChartTooltipItem<Datum>;
     }>;
     formatValue?: (value: unknown, item: ChartTooltipItem<Datum>) => OctaneNode;
@@ -41,7 +41,7 @@ export type ChartTooltipItemRenderParams<Datum = unknown> = {
     indicator: ChartTooltipIndicator;
 };
 export type ChartTooltipValueRenderParams<Datum = unknown> = ChartTooltipItemRenderParams<Datum>;
-export type ChartTooltipContentProps<Datum = unknown> = React.HTMLAttributes<HTMLDivElement> & {
+export type ChartTooltipContentProps<Datum = unknown> = Octane.HTMLAttributes<HTMLDivElement> & {
     label?: OctaneNode;
     items: ChartTooltipItem<Datum>[];
     config?: ChartTooltipConfig<Datum>;
@@ -52,7 +52,7 @@ export type ChartTooltipContentProps<Datum = unknown> = React.HTMLAttributes<HTM
     renderLabel?: (params: ChartTooltipLabelRenderParams<Datum>) => OctaneNode;
     renderItem?: (params: ChartTooltipItemRenderParams<Datum>) => OctaneNode;
     renderValue?: (params: ChartTooltipValueRenderParams<Datum>) => OctaneNode;
-    getItemKey?: (item: ChartTooltipItem<Datum>, index: number) => React.Key;
+    getItemKey?: (item: ChartTooltipItem<Datum>, index: number) => string | number;
     'data-testid'?: string;
 };
-export default function ChartTooltipContent<Datum = unknown>({ className, config, getItemKey, hideIndicator, hideLabel, indicator, items, label, renderItem, renderLabel, renderValue, sortItems, 'data-testid': dataTestId, ...restProps }: ChartTooltipContentProps<Datum>): React.JSX.Element | null;
+export default function ChartTooltipContent<Datum = unknown>({ className, config, getItemKey, hideIndicator, hideLabel, indicator, items, label, renderItem, renderLabel, renderValue, sortItems, 'data-testid': dataTestId, ...restProps }: ChartTooltipContentProps<Datum>): import("react").JSX.Element | null;

package/src/tooltip/floating/FloatingTooltip.tsrx

@@ -1,6 +1,9 @@
 import { FloatingArrow, FloatingDelayGroup, FloatingPortal } from '@octanejs/floating-ui';
 import { cloneElement, isValidElement, useCallback } from 'octane';
-import type React from 'react';
+import type { ElementDescriptor } from 'octane';
+import type { CSSProperties } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
+import type { HTMLProps } from '@octanejs/floating-ui';
 import { FloatingTooltipContextProvider, useFloatingTooltipContext } from './context.tsrx';
 import useFloatingTooltip from './useFloatingTooltip.tsrx';
 import type {
@@ -18,13 +21,13 @@ import type {
 } from './types';
 
 type RenderElementProps<ElementProps, State> = {
-	defaultElement: React.ReactElement;
+	defaultElement: ElementDescriptor;
 	props: ElementProps;
-	render?: React.ReactElement | ((props: ElementProps, state: State) => React.ReactElement);
+	render?: ElementDescriptor | ((props: ElementProps, state: State) => ElementDescriptor);
 	state: State;
 };
 
-type FloatingCssVariables = React.CSSProperties & {
+type FloatingCssVariables = CSSProperties & {
 		'--visx-tooltip-transform-origin'?: string;
 		'--visx-tooltip-arrow-x'?: string;
 		'--visx-tooltip-arrow-y'?: string;
@@ -34,9 +37,9 @@ 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;
+type FloatingReferenceProps = HTMLProps<Element> & FloatingDataAttributes;
+type FloatingDivProps = HTMLProps<HTMLDivElement> & FloatingDataAttributes;
+type FloatingSvgProps = Octane.SVGProps<SVGSVGElement> & FloatingDataAttributes;
 
 function renderElement<ElementProps, State>({
 	defaultElement,
@@ -47,10 +50,10 @@ function renderElement<ElementProps, State>({
 	if (typeof render === 'function') return render(props, state);
 
 	if (isValidElement(render)) {
-		return cloneElement(render, props as Partial<unknown> & React.Attributes);
+		return cloneElement(render, props as Partial<unknown>);
 	}
 
-	return cloneElement(defaultElement, props as Partial<unknown> & React.Attributes);
+	return cloneElement(defaultElement, props as Partial<unknown>);
 }
 
 function getTransformOrigin(state: FloatingTooltipRootState) {
@@ -149,7 +152,7 @@ function Trigger({ disabled = false, render }: FloatingTooltipTriggerProps) {
 
 	if (typeof render === 'function') return render(triggerProps, triggerState);
 
-	return cloneElement(render, triggerProps as Partial<unknown> & React.Attributes);
+	return cloneElement(render, triggerProps as Partial<unknown>);
 }
 
 function Portal({ children, container, disabled = false }: FloatingTooltipPortalProps) {
@@ -182,12 +185,14 @@ function Positioner({ children, id, render, style, ...restProps }: FloatingToolt
 		style: {
 			...state.floatingStyles,
 			...getFloatingCssVariables(state),
-			...style,
+			...(typeof style === 'object' && style != null ? style : null),
 		},
 	};
-	const positionerProps = state.getFloatingProps(basePositionerProps);
+	const positionerProps = state.getFloatingProps(
+		basePositionerProps as HTMLProps<HTMLElement>,
+	) as HTMLProps<HTMLDivElement>;
 
-	return renderElement<React.HTMLProps<HTMLDivElement>, FloatingTooltipPositionerState>({
+	return renderElement<HTMLProps<HTMLDivElement>, FloatingTooltipPositionerState>({
 		defaultElement: <div />,
 		props: positionerProps,
 		render,
@@ -207,7 +212,7 @@ function Content({ children, render, ...restProps }: FloatingTooltipContentProps
 		'data-visx-tooltip-content': '',
 	};
 
-	return renderElement<React.HTMLProps<HTMLDivElement>, FloatingTooltipContentState>({
+	return renderElement<HTMLProps<HTMLDivElement>, FloatingTooltipContentState>({
 		defaultElement: <div />,
 		props: contentProps,
 		render,
@@ -228,16 +233,17 @@ function Arrow({
 	if (!state.mounted) return null;
 
 	if (render) {
+		const svgRest = restProps as Octane.SVGProps<SVGSVGElement>;
 		const baseArrowProps: FloatingSvgProps = {
-			...restProps,
+			...svgRest,
 			height,
 			'data-visx-tooltip-arrow': '',
 			ref: state.arrowRef,
 			width,
 		};
-		const arrowProps = state.getArrowProps(baseArrowProps);
+		const arrowProps = state.getArrowProps(baseArrowProps) as Octane.SVGProps<SVGSVGElement>;
 
-		return renderElement<React.SVGProps<SVGSVGElement>, FloatingTooltipArrowState>({
+		return renderElement<Octane.SVGProps<SVGSVGElement>, FloatingTooltipArrowState>({
 			defaultElement: <svg />,
 			props: arrowProps,
 			render,
@@ -246,7 +252,7 @@ function Arrow({
 	}
 
 	return <FloatingArrow
-		{...restProps}
+		{...(restProps as object)}
 		data-visx-tooltip-arrow=""
 		ref={state.arrowRef}
 		context={state.context}

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

@@ -1,13 +1,13 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type React from 'react';
+import type { ElementDescriptor } from 'octane';
 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 Provider({ children, closeDelay, delay, skipDelay, }: FloatingTooltipProviderProps): import("react").JSX.Element;
+declare function Root<TData = unknown>({ children, forceMount, ...options }: FloatingTooltipRootProps<TData>): import("react").JSX.Element;
+declare function Trigger({ disabled, render }: FloatingTooltipTriggerProps): ElementDescriptor<any>;
 declare function Portal({ children, container, disabled }: FloatingTooltipPortalProps): unknown;
-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 function Positioner({ children, id, render, style, ...restProps }: FloatingTooltipPositionerProps): ElementDescriptor<any> | null;
+declare function Content({ children, render, ...restProps }: FloatingTooltipContentProps): ElementDescriptor<any> | null;
+declare function Arrow({ height, padding: _padding, render, tipRadius, width, ...restProps }: FloatingTooltipArrowProps): import("react").JSX.Element | ElementDescriptor<any> | null;
 declare const FloatingTooltip: {
     Arrow: typeof Arrow;
     Content: typeof Content;

package/src/tooltip/floating/context.tsrx

@@ -1,6 +1,5 @@
 import { createContext, useContext } from 'octane';
 import type { OctaneNode } from 'octane';
-import type React from 'react';
 import type { FloatingTooltipRootState } from './types';
 
 const FloatingTooltipContext = createContext<FloatingTooltipRootState<any> | null>(null);

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

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

package/src/tooltip/floating/internalTypes.ts

@@ -1,5 +1,4 @@
-import type React from 'react';
-import type {
+export type {
 	Boundary,
 	FlipOptions,
 	HideOptions,
@@ -16,110 +15,15 @@ import type {
 } 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;
-};
+	Delay,
+	HTMLProps,
+	OpenChangeReason,
+	UseFloatingOptions,
+	UseFloatingReturn,
+	UseDismissProps,
+	UseFocusProps,
+	UseHoverProps,
+	UseRoleProps,
+} from '@octanejs/floating-ui';
+
+export type { FloatingArrowProps as FloatingUiArrowProps } from '@octanejs/floating-ui';

package/src/tooltip/floating/types.ts

@@ -1,5 +1,7 @@
-import type React from 'react';
-import type { OctaneNode } from 'octane';
+import type { CSSProperties } from 'react';
+import type { ElementDescriptor, OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
+import type { HTMLProps } from '@octanejs/floating-ui';
 import type {
 	Boundary,
 	Delay,
@@ -16,7 +18,6 @@ import type {
 	SizeOptions,
 	Strategy,
 	UseDismissProps,
-	FloatingUiArrowProps,
 	UseFloatingOptions,
 	UseFloatingReturn,
 	UseFocusProps,
@@ -109,12 +110,12 @@ export type UseFloatingTooltipReturn<TData = unknown> = {
 	strategy: Strategy;
 	x: number | null;
 	y: number | null;
-	floatingStyles: React.CSSProperties;
+	floatingStyles: CSSProperties;
 	middlewareData: MiddlewareData;
 
 	refs: UseFloatingReturn<ReferenceElement>['refs'];
 	context: UseFloatingReturn<ReferenceElement>['context'];
-	arrowRef: React.RefCallback<SVGSVGElement>;
+	arrowRef: (node: SVGSVGElement | null) => void;
 
 	setAnchor: (anchor: TooltipAnchor | null) => void;
 	setData: (data: TData | undefined) => void;
@@ -122,9 +123,9 @@ export type UseFloatingTooltipReturn<TData = unknown> = {
 	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;
+	getReferenceProps: <TProps extends HTMLProps<Element>>(props?: TProps) => TProps;
+	getFloatingProps: <TProps extends HTMLProps<HTMLElement>>(props?: TProps) => TProps;
+	getArrowProps: <TProps extends Octane.SVGProps<SVGSVGElement>>(props?: TProps) => TProps;
 };
 
 export type FloatingTooltipProviderProps = {
@@ -149,51 +150,53 @@ export type FloatingTooltipTriggerState = {
 
 export type FloatingTooltipTriggerProps = {
 	render:
-		| React.ReactElement
-		| ((props: React.HTMLProps<Element>, state: FloatingTooltipTriggerState) => React.ReactElement);
+		| ElementDescriptor
+		| ((props: HTMLProps<Element>, state: FloatingTooltipTriggerState) => ElementDescriptor);
 	disabled?: boolean;
 };
 
 export type FloatingTooltipPortalProps = {
-	container?: HTMLElement | ShadowRoot | React.RefObject<HTMLElement | ShadowRoot | null> | null;
+	container?: HTMLElement | ShadowRoot | { current: HTMLElement | ShadowRoot | null } | null;
 	disabled?: boolean;
 	children: OctaneNode;
 };
 
 export type FloatingTooltipPositionerState = FloatingTooltipRootState;
 
-export type FloatingTooltipPositionerProps = React.HTMLAttributes<HTMLDivElement> & {
+export type FloatingTooltipPositionerProps = Octane.HTMLAttributes<HTMLDivElement> & {
 	'data-testid'?: string;
 	render?:
-		| React.ReactElement
+		| ElementDescriptor
 		| ((
-				props: React.HTMLProps<HTMLDivElement>,
+				props: HTMLProps<HTMLDivElement>,
 				state: FloatingTooltipPositionerState,
-		  ) => React.ReactElement);
+		  ) => ElementDescriptor);
 };
 
 export type FloatingTooltipContentState = FloatingTooltipRootState;
 
-export type FloatingTooltipContentProps = React.HTMLAttributes<HTMLDivElement> & {
+export type FloatingTooltipContentProps = Octane.HTMLAttributes<HTMLDivElement> & {
 	render?:
-		| React.ReactElement
-		| ((
-				props: React.HTMLProps<HTMLDivElement>,
-				state: FloatingTooltipContentState,
-		  ) => React.ReactElement);
+		| ElementDescriptor
+		| ((props: HTMLProps<HTMLDivElement>, state: FloatingTooltipContentState) => ElementDescriptor);
 };
 
 export type FloatingTooltipArrowState = FloatingTooltipRootState;
 
 export type FloatingTooltipArrowProps = Omit<
-	FloatingUiArrowProps,
-	'context' | 'padding' | 'ref'
+	Octane.SVGProps<SVGSVGElement>,
+	'width' | 'height' | 'ref'
 > & {
+	width?: number;
+	height?: number;
+	tipRadius?: number;
+	staticOffset?: string | number | null;
+	d?: string;
 	padding?: never;
 	render?:
-		| React.ReactElement
+		| ElementDescriptor
 		| ((
-				props: React.SVGProps<SVGSVGElement>,
+				props: Octane.SVGProps<SVGSVGElement>,
 				state: FloatingTooltipArrowState,
-		  ) => React.ReactElement);
+		  ) => ElementDescriptor);
 };