@octanejs/visx 0.1.36 → 0.1.38

package/src/xychart/components/series/private/BaseBarGroup.tsrx

@@ -1,6 +1,5 @@
 import { useContext, useMemo, useEffect, useCallback } from 'octane';
-import type { ReactElement, FC } from 'react';
-import type { OctaneNode } from 'octane';
+import type { ComponentBody, OctaneNode } from 'octane';
 import type { PositionScale } from '@octanejs/visx/shape';
 import { scaleBand } from '@octanejs/visx/scale';
 import type { BaseBarSeriesProps } from './BaseBarSeries.tsrx';
@@ -30,7 +29,7 @@ export type BaseBarGroupProps<XScale extends PositionScale, YScale extends Posit
 		/** Comparator function to sort `dataKeys` within a bar group. By default the DOM rendering order of `BarGroup`s `children` is used. */
 		sortBars?: (dataKeyA: string, dataKeyB: string) => number;
 		/** Rendered component which is passed BarsProps by BaseBarGroup after processing. */
-		BarsComponent: FC<BarsProps<XScale, YScale>>;
+		BarsComponent: ComponentBody<BarsProps<XScale, YScale>>;
 	} & Pick<SeriesProps<XScale, YScale, Datum>, | 'onPointerMove'
 	| 'onPointerOut'
 	| 'onPointerUp'
@@ -149,8 +148,7 @@ export default function BaseBarGroup<XScale extends PositionScale, YScale extend
 		const getWidth = horizontal ? (d: Datum) => Math.abs(getLength(d)) : () => barThickness;
 		const getHeight = horizontal ? () => barThickness : (d: Datum) => Math.abs(getLength(d));
 		// get props from child BarSeries, if available
-		const childBarSeries: ReactElement<BaseBarSeriesProps<XScale, YScale, Datum>> | undefined =
-			barSeriesChildren.find((child) => child.props.dataKey === key);
+		const childBarSeries = barSeriesChildren.find((child) => child.props.dataKey === key);
 		const { colorAccessor, radius, radiusAll, radiusBottom, radiusLeft, radiusRight, radiusTop } =
 			childBarSeries?.props || {};
 

package/src/xychart/components/series/private/BaseBarGroup.tsrx.d.ts

@@ -1,6 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FC } from 'react';
-import type { OctaneNode } from 'octane';
+import type { ComponentBody, OctaneNode } from 'octane';
 import type { PositionScale } from '@octanejs/visx/shape';
 import type { BarsProps, SeriesProps } from '../../../types';
 export type BaseBarGroupProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> = {
@@ -11,6 +10,6 @@ export type BaseBarGroupProps<XScale extends PositionScale, YScale extends Posit
     /** Comparator function to sort `dataKeys` within a bar group. By default the DOM rendering order of `BarGroup`s `children` is used. */
     sortBars?: (dataKeyA: string, dataKeyB: string) => number;
     /** Rendered component which is passed BarsProps by BaseBarGroup after processing. */
-    BarsComponent: FC<BarsProps<XScale, YScale>>;
+    BarsComponent: ComponentBody<BarsProps<XScale, YScale>>;
 } & Pick<SeriesProps<XScale, YScale, Datum>, 'onPointerMove' | 'onPointerOut' | 'onPointerUp' | 'onPointerDown' | 'onBlur' | 'onFocus' | 'enableEvents'>;
 export default function BaseBarGroup<XScale extends PositionScale, YScale extends PositionScale, Datum extends object>({ children, padding, sortBars, BarsComponent, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, onPointerDown, enableEvents, }: BaseBarGroupProps<XScale, YScale, Datum>): import("react").JSX.Element | null;

package/src/xychart/components/series/private/BaseBarSeries.tsrx

@@ -1,5 +1,5 @@
 import { useContext, useEffect, useMemo } from 'octane';
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { AxisScale } from '@octanejs/visx/axis';
 import DataContext from '../../../context/DataContext.tsrx';
 import type { Bar, BarsProps, DataContextType, SeriesProps } from '../../../types';
@@ -13,7 +13,7 @@ import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
 export type BaseBarSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
 	SeriesProps<XScale, YScale, Datum> & {
 		/** Rendered component which is passed BarsProps by BaseBarSeries after processing. */
-		BarsComponent: FC<BarsProps<XScale, YScale>>;
+		BarsComponent: ComponentBody<BarsProps<XScale, YScale>>;
 		/**
  * Specify bar padding when bar thickness does not come from a `band` scale.
  * Accepted values are [0, 1], 0 = no padding, 1 = no bar, defaults to 0.1.

package/src/xychart/components/series/private/BaseBarSeries.tsrx.d.ts

@@ -1,10 +1,10 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { AxisScale } from '@octanejs/visx/axis';
 import type { BarsProps, SeriesProps } from '../../../types';
 export type BaseBarSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = SeriesProps<XScale, YScale, Datum> & {
     /** Rendered component which is passed BarsProps by BaseBarSeries after processing. */
-    BarsComponent: FC<BarsProps<XScale, YScale>>;
+    BarsComponent: ComponentBody<BarsProps<XScale, YScale>>;
     /**
 * Specify bar padding when bar thickness does not come from a `band` scale.
 * Accepted values are [0, 1], 0 = no padding, 1 = no bar, defaults to 0.1.

package/src/xychart/components/series/private/BaseBarStack.tsrx

@@ -1,5 +1,5 @@
 import { useContext, useCallback } from 'octane';
-import type { ReactElement, FC } from 'react';
+import type { ComponentBody, ElementDescriptor } from 'octane';
 import type { SeriesPoint } from 'd3-shape';
 import type { PositionScale, StackPathConfig } from '@octanejs/visx/shape';
 import { getFirstItem, getSecondItem, getBandwidth } from '@octanejs/visx/shape';
@@ -19,6 +19,7 @@ import type {
 import isValidNumber from '../../../typeguards/isValidNumber';
 import { getStackValue } from '../../../utils/combineBarStackData';
 import { BARSTACK_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import type { SeriesEventsParams } from '../../../hooks/useSeriesEvents.tsrx';
 import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
 import findNearestStackDatum from '../../../utils/findNearestStackDatum';
 import useStackedData from '../../../hooks/useStackedData.tsrx';
@@ -32,10 +33,10 @@ type StackBar<XScale extends PositionScale, YScale extends PositionScale> =
 export type BaseBarStackProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> =
 	{
 		/** `BarSeries` elements, note we can't strictly enforce this with TS yet. */
-		children: | ReactElement<BarStackChildProps<XScale, YScale, Datum>>
-		| ReactElement<BarStackChildProps<XScale, YScale, Datum>>[];
+		children: | ElementDescriptor<BarStackChildProps<XScale, YScale, Datum>>
+		| ElementDescriptor<BarStackChildProps<XScale, YScale, Datum>>[];
 		/** Rendered component which is passed BarsProps by BaseBarStack after processing. */
-		BarsComponent: FC<BarsProps<XScale, YScale>>;
+		BarsComponent: ComponentBody<BarsProps<XScale, YScale>>;
 	} & Pick<StackPathConfig<Datum, string>, | 'offset'
 	| 'order'> & Pick<SeriesProps<XScale, YScale, Datum>, | 'onPointerMove'
 	| 'onPointerOut'
@@ -88,8 +89,11 @@ function BaseBarStack<XScale extends PositionScale, YScale extends PositionScale
 	const eventEmitters = useSeriesEvents<XScale, YScale, Datum>({
 		dataKey: dataKeys,
 		enableEvents,
-		// @ts-expect-error Datum input + return type are expected to be the same type but they differ for BarStack (registry data is StackedDatum, return type is user Datum)
-		findNearestDatum,
+		findNearestDatum: findNearestDatum as unknown as SeriesEventsParams<
+			XScale,
+			YScale,
+			Datum
+		>['findNearestDatum'],
 		onBlur,
 		onFocus,
 		onPointerMove,
@@ -136,7 +140,7 @@ function BaseBarStack<XScale extends PositionScale, YScale extends PositionScale
 		if (!entry) return null;
 
 		// get props from child BarSeries, if available
-		const childBarSeries: ReactElement<BaseBarSeriesProps<XScale, YScale, Datum>> | undefined =
+		const childBarSeries: ElementDescriptor<BaseBarSeriesProps<XScale, YScale, Datum>> | undefined =
 			seriesChildren.find((child) => child.props.dataKey === barStack.key);
 		const { colorAccessor, radius, radiusAll, radiusBottom, radiusLeft, radiusRight, radiusTop } =
 			childBarSeries?.props || {};

package/src/xychart/components/series/private/BaseBarStack.tsrx.d.ts

@@ -1,14 +1,14 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactElement, FC } from 'react';
+import type { ComponentBody, ElementDescriptor } from 'octane';
 import type { PositionScale, StackPathConfig } from '@octanejs/visx/shape';
 import type { BaseBarSeriesProps } from './BaseBarSeries.tsrx';
 import type { BarsProps, SeriesProps } from '../../../types';
 type BarStackChildProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> = Omit<BaseBarSeriesProps<XScale, YScale, Datum>, 'BarsComponent'>;
 export type BaseBarStackProps<XScale extends PositionScale, YScale extends PositionScale, Datum extends object> = {
     /** `BarSeries` elements, note we can't strictly enforce this with TS yet. */
-    children: ReactElement<BarStackChildProps<XScale, YScale, Datum>> | ReactElement<BarStackChildProps<XScale, YScale, Datum>>[];
+    children: ElementDescriptor<BarStackChildProps<XScale, YScale, Datum>> | ElementDescriptor<BarStackChildProps<XScale, YScale, Datum>>[];
     /** Rendered component which is passed BarsProps by BaseBarStack after processing. */
-    BarsComponent: FC<BarsProps<XScale, YScale>>;
+    BarsComponent: ComponentBody<BarsProps<XScale, YScale>>;
 } & Pick<StackPathConfig<Datum, string>, 'offset' | 'order'> & Pick<SeriesProps<XScale, YScale, Datum>, 'onPointerMove' | 'onPointerOut' | 'onPointerUp' | 'onPointerDown' | 'onBlur' | 'onFocus' | 'enableEvents'>;
 declare function BaseBarStack<XScale extends PositionScale, YScale extends PositionScale, Datum extends object>({ children, order, offset, BarsComponent, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, onPointerDown, enableEvents, }: BaseBarStackProps<XScale, YScale, Datum>): import("react").JSX.Element | null;
 export default BaseBarStack;

package/src/xychart/components/series/private/BaseLineSeries.tsrx

@@ -1,11 +1,11 @@
 import { Fragment, useContext, useCallback, useMemo, useEffect } from 'octane';
-import type { FC } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { LinePathProps } from '@octanejs/visx/shape';
 import { LinePath } from '@octanejs/visx/shape';
 import type { AxisScale } from '@octanejs/visx/axis';
 import DataContext from '../../../context/DataContext.tsrx';
 import type { DataContextType, GlyphsProps, SeriesProps } from '../../../types';
+import type { SvgPathComponent } from '../../../types/svgPath';
 import getScaledValueFactory from '../../../utils/getScaledValueFactory';
 import isValidNumber from '../../../typeguards/isValidNumber';
 import { LINESERIES_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
@@ -16,12 +16,15 @@ import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
 export type BaseLineSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
 	SeriesProps<XScale, YScale, Datum> & {
 		/** Rendered component which is passed path props by BaseLineSeries after processing. */
-		PathComponent?: FC<Omit<Octane.SVGProps<SVGPathElement>, 'ref'>> | 'path';
+		PathComponent?: SvgPathComponent;
 		/** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
 		curve?: LinePathProps<Datum>['curve'];
 		/** Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
 		colorAccessor?: (dataKey: string) => string | undefined | null;
-	} & Omit<Octane.SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
+	} & Omit<
+		Octane.SVGProps<SVGPathElement>,
+		'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref' | 'children'
+	>;
 
 function BaseLineSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
 	colorAccessor,

package/src/xychart/components/series/private/BaseLineSeries.tsrx.d.ts

@@ -1,15 +1,15 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FC } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { LinePathProps } from '@octanejs/visx/shape';
 import type { AxisScale } from '@octanejs/visx/axis';
 import type { SeriesProps } from '../../../types';
+import type { SvgPathComponent } from '../../../types/svgPath';
 export type BaseLineSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = SeriesProps<XScale, YScale, Datum> & {
     /** Rendered component which is passed path props by BaseLineSeries after processing. */
-    PathComponent?: FC<Omit<Octane.SVGProps<SVGPathElement>, 'ref'>> | 'path';
+    PathComponent?: SvgPathComponent;
     /** Sets the curve factory (from @octanejs/visx/curve or d3-curve) for the line generator. Defaults to curveLinear. */
     curve?: LinePathProps<Datum>['curve'];
     /** Given a datakey, returns its color. Falls back to theme color if unspecified or if a null-ish value is returned. */
     colorAccessor?: (dataKey: string) => string | undefined | null;
-} & Omit<Octane.SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
+} & Omit<Octane.SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref' | 'children'>;
 export default function BaseBaseLineSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseLineSeriesProps<XScale, YScale, Datum>): import("react").JSX.Element | null;

package/src/xychart/hooks/useEventEmitter.tsrx

@@ -1,4 +1,3 @@
-import type { PointerEvent, FocusEvent } from 'react';
 import { useCallback, useContext, useEffect, useRef } from 'octane';
 import { localPoint } from '@octanejs/visx/event';
 import EventEmitterContext from '../context/EventEmitterContext.tsrx';
@@ -8,7 +7,7 @@ export type EventType =
 	'pointermove' | 'pointerout' | 'pointerup' | 'pointerdown' | 'focus' | 'blur';
 
 export type HandlerParams = {
-	/** The react PointerEvent or FocusEvent. */
+	/** The native PointerEvent or FocusEvent. */
 	event: PointerEvent | FocusEvent;
 	/** Position of the PointerEvent in svg coordinates. */
 	svgPoint: ReturnType<typeof localPoint>;

package/src/xychart/hooks/useEventEmitter.tsrx.d.ts

@@ -1,9 +1,8 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { PointerEvent, FocusEvent } from 'react';
 import { localPoint } from '@octanejs/visx/event';
 export type EventType = 'pointermove' | 'pointerout' | 'pointerup' | 'pointerdown' | 'focus' | 'blur';
 export type HandlerParams = {
-    /** The react PointerEvent or FocusEvent. */
+    /** The native PointerEvent or FocusEvent. */
     event: PointerEvent | FocusEvent;
     /** Position of the PointerEvent in svg coordinates. */
     svgPoint: ReturnType<typeof localPoint>;

package/src/xychart/hooks/useEventEmitters.tsrx

@@ -1,4 +1,3 @@
-import type { PointerEvent, FocusEvent } from 'react';
 import { useCallback } from 'octane';
 import useEventEmitter from './useEventEmitter.tsrx';
 

package/src/xychart/hooks/useEventEmitters.tsrx.d.ts

@@ -1,5 +1,4 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { PointerEvent, FocusEvent } from 'react';
 type PointerEventEmitterParams = {
     /** Source of the events, e.g., the component name. */
     source: string;

package/src/xychart/hooks/useEventHandlers.tsrx

@@ -1,5 +1,4 @@
 import type { AxisScale } from '@octanejs/visx/axis';
-import type { PointerEvent, FocusEvent } from 'react';
 import { useCallback, useContext } from 'octane';
 import DataContext from '../context/DataContext.tsrx';
 import { isFocusEvent, isPointerEvent } from '../typeguards/events';

package/src/xychart/hooks/useEventHandlers.tsrx.d.ts

@@ -1,6 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
 import type { AxisScale } from '@octanejs/visx/axis';
-import type { PointerEvent, FocusEvent } from 'react';
 import type { EventHandlerParams, NearestDatumArgs, NearestDatumReturnType } from '../types';
 export declare const POINTER_EVENTS_ALL = "__POINTER_EVENTS_ALL";
 export declare const POINTER_EVENTS_NEAREST = "__POINTER_EVENTS_NEAREST";

package/src/xychart/hooks/useSeriesEvents.tsrx

@@ -1,4 +1,3 @@
-import type { FocusEvent, PointerEvent } from 'react';
 import { useCallback, useContext } from 'octane';
 import type { AxisScale } from '@octanejs/visx/axis';
 import TooltipContext from '../context/TooltipContext.tsrx';

package/src/xychart/hooks/useSeriesEvents.tsrx.d.ts

@@ -1,5 +1,4 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FocusEvent, PointerEvent } from 'react';
 import type { AxisScale } from '@octanejs/visx/axis';
 import type { SeriesProps } from '../types';
 import type { PointerEventHandlerParams } from './useEventHandlers.tsrx';

package/src/xychart/hooks/useStackedData.tsrx.d.ts

@@ -7,7 +7,7 @@ type UseStackedData<Datum extends object> = {
     children: OctaneNode;
 } & Pick<StackPathConfig<Datum, string>, 'offset' | 'order'>;
 export default function useStackedData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object, ChildrenProps extends SeriesProps<XScale, YScale, Datum>>({ children, order, offset, }: UseStackedData<Datum>): {
-    seriesChildren: import("react").ReactElement<ChildrenProps, string | import("react").JSXElementConstructor<any>>[];
+    seriesChildren: import("octane").ElementDescriptor<ChildrenProps>[];
     dataKeys: string[];
     stackedData: import("d3-shape").Series<CombinedStackData<XScale, YScale>, string>[];
 };

package/src/xychart/typeguards/events.ts

@@ -1,5 +1,3 @@
-import type { FocusEvent, PointerEvent } from 'react';
-
 type EventType = PointerEvent | FocusEvent;
 
 // functional definition of a PointerEvent (mouse, touch)

package/src/xychart/types/series.ts

@@ -1,4 +1,3 @@
-import type { PointerEvent, FocusEvent } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { AxisScale } from '@octanejs/visx/axis';
 import type { ScaleInput } from '@octanejs/visx/scale';

package/src/xychart/types/svgPath.ts

@@ -0,0 +1,5 @@
+import type { ComponentBody } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
+
+/** Host `path` or an Octane component that accepts path SVG props. */
+export type SvgPathComponent = 'path' | ComponentBody<Omit<Octane.SVGProps<SVGPathElement>, 'ref'>>;

package/src/xychart/types/theme.ts

@@ -1,9 +1,10 @@
-import type { CSSProperties, HTMLAttributes, SVGAttributes } from 'react';
+import type { CSSProperties } from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import type { TextProps } from '@octanejs/visx/text';
 
-export type HTMLTextStyles = HTMLAttributes<HTMLDivElement>['style'];
+export type HTMLTextStyles = CSSProperties;
 
-export type LineStyles = Omit<SVGAttributes<SVGLineElement>, 'Key'>;
+export type LineStyles = Omit<Octane.SVGProps<SVGLineElement>, 'key' | 'ref'>;
 
 export type GridStyles = CSSProperties;
 

package/src/xychart/utils/combineBarStackData.ts

@@ -1,4 +1,3 @@
-import type { ReactElement } from 'react';
 import type { AxisScale } from '@octanejs/visx/axis';
 import type { CombinedStackData, SeriesProps } from '../types';
 
@@ -17,7 +16,7 @@ export default function combineBarStackData<
 	YScale extends AxisScale,
 	Datum extends object,
 >(
-	seriesChildren: ReactElement<SeriesProps<XScale, YScale, Datum>>[],
+	seriesChildren: ReadonlyArray<{ props: SeriesProps<XScale, YScale, Datum> }>,
 	horizontal?: boolean,
 ): CombinedStackData<XScale, YScale>[] {
 	const dataByStackValue = new Map<string, CombinedStackData<XScale, YScale>>();

package/src/xychart/utils/getChildrenAndGrandchildrenWithProps.ts

@@ -1,9 +1,8 @@
-import type { ReactElement } from 'react';
-import type { OctaneNode } from 'octane';
+import type { ElementDescriptor, OctaneNode } from 'octane';
 import { Children } from 'octane';
 
 /** Returns whether the OctaneNode has props (and therefore is an `Element` versus primitive type) */
-function isChildWithProps<P extends object>(child: OctaneNode): child is ReactElement<P> {
+function isChildWithProps<P extends object>(child: OctaneNode): child is ElementDescriptor<P> {
 	return !!child && typeof child === 'object' && 'props' in child && child.props != null;
 }
 
@@ -13,7 +12,7 @@ function isChildWithProps<P extends object>(child: OctaneNode): child is ReactEl
  */
 export default function getChildrenAndGrandchildrenWithProps<P extends object>(
 	children: OctaneNode,
-): ReactElement<P>[] {
+): ElementDescriptor<P>[] {
 	return Children.toArray(children)
 		.flatMap((child) => {
 			if (isChildWithProps(child) && (child.props as any).children) {
@@ -21,5 +20,5 @@ export default function getChildrenAndGrandchildrenWithProps<P extends object>(
 			}
 			return child;
 		})
-		.filter((child) => isChildWithProps<P>(child)) as unknown as ReactElement<P>[];
+		.filter((child) => isChildWithProps<P>(child)) as unknown as ElementDescriptor<P>[];
 }

package/src/zoom/Zoom.tsrx

@@ -1,7 +1,7 @@
 // OCTANE DIVERGENCE[visx-native-zoom-gestures][differential:visx-native-gestures]:
 // Zoom attaches native wheel/pointer/touch listeners rather than @use-gesture/react at runtime.
 import { useState, useRef, useCallback, useEffect } from 'octane';
-import type { ReactElement } from 'react';
+import type { OctaneNode } from 'octane';
 import { localPoint } from '@octanejs/visx/event';
 import {
 	composeMatrices,
@@ -98,7 +98,7 @@ export type ZoomProps<ElementType> = {
 	constrain?: (transform: TransformMatrix, prevTransform: TransformMatrix) => TransformMatrix;
 	/** Initial transform matrix to apply. */
 	initialTransformMatrix?: TransformMatrix;
-	children: (zoom: ZoomType<ElementType>) => ReactElement;
+	children: (zoom: ZoomType<ElementType>) => OctaneNode;
 };
 
 function Zoom<ElementType extends Element>({
@@ -113,8 +113,8 @@ function Zoom<ElementType extends Element>({
 	height,
 	constrain,
 	children,
-}: ZoomProps<ElementType>): ReactElement {
-	const containerRef = useRef<ElementType>(null);
+}: ZoomProps<ElementType>): OctaneNode {
+	const containerRef = useRef<ElementType | null>(null);
 	const matrixStateRef = useRef<TransformMatrix>(initialTransformMatrix);
 	const pointerActiveRef = useRef(false);
 	const lastPinchDistanceRef = useRef(0);
@@ -250,7 +250,8 @@ function Zoom<ElementType extends Element>({
 
 	const handlePinch: ZoomType<ElementType>['handlePinch'] = useCallback((state) => {
 		const { origin: [ox, oy], memo } = state;
-		let currentMemo = memo;
+		type PinchMemo = { top: number; left: number };
+		let currentMemo = memo as PinchMemo | undefined;
 		if (containerRef.current) {
 			const { top, left } = currentMemo ?? containerRef.current.getBoundingClientRect();
 			if (!currentMemo) {
@@ -326,21 +327,22 @@ function Zoom<ElementType extends Element>({
 			lastPinchDistanceRef.current = distance;
 		};
 
-		target.addEventListener('pointerdown', onPointerDown);
-		target.addEventListener('wheel', onWheel, { passive: false });
-		target.addEventListener('touchstart', onTouchStart, { passive: false });
-		target.addEventListener('touchmove', onTouchMove, { passive: false });
-		window.addEventListener('pointermove', onPointerMove);
-		window.addEventListener('pointerup', onPointerUp);
-		window.addEventListener('pointercancel', onPointerUp);
-		return () => {
-			target.removeEventListener('pointerdown', onPointerDown);
-			target.removeEventListener('wheel', onWheel);
-			target.removeEventListener('touchstart', onTouchStart);
-			target.removeEventListener('touchmove', onTouchMove);
-			window.removeEventListener('pointermove', onPointerMove);
-			window.removeEventListener('pointerup', onPointerUp);
-			window.removeEventListener('pointercancel', onPointerUp);
+		const element: Element = target;
+		element.addEventListener('pointerdown', onPointerDown as EventListener);
+		element.addEventListener('wheel', onWheel as EventListener, { passive: false });
+		element.addEventListener('touchstart', onTouchStart as EventListener, { passive: false });
+		element.addEventListener('touchmove', onTouchMove as EventListener, { passive: false });
+		window.addEventListener('pointermove', onPointerMove as EventListener);
+		window.addEventListener('pointerup', onPointerUp as EventListener);
+		window.addEventListener('pointercancel', onPointerUp as EventListener);
+		return function removeZoomListeners() {
+			element.removeEventListener('pointerdown', onPointerDown as EventListener);
+			element.removeEventListener('wheel', onWheel as EventListener);
+			element.removeEventListener('touchstart', onTouchStart as EventListener);
+			element.removeEventListener('touchmove', onTouchMove as EventListener);
+			window.removeEventListener('pointermove', onPointerMove as EventListener);
+			window.removeEventListener('pointerup', onPointerUp as EventListener);
+			window.removeEventListener('pointercancel', onPointerUp as EventListener);
 		};
 	}, [dragEnd, dragMove, dragStart, handlePinch, handleWheel]);
 

package/src/zoom/Zoom.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactElement } from 'react';
+import type { OctaneNode } from 'octane';
 import type { TransformMatrix, Scale, PinchDelta, GenericWheelEvent, Zoom as ZoomType } from './types';
 export type ZoomProps<ElementType> = {
     /** Width of the zoom container. */
@@ -56,7 +56,7 @@ export type ZoomProps<ElementType> = {
     constrain?: (transform: TransformMatrix, prevTransform: TransformMatrix) => TransformMatrix;
     /** Initial transform matrix to apply. */
     initialTransformMatrix?: TransformMatrix;
-    children: (zoom: ZoomType<ElementType>) => ReactElement;
+    children: (zoom: ZoomType<ElementType>) => OctaneNode;
 };
-declare function Zoom<ElementType extends Element>({ scaleXMin, scaleXMax, scaleYMin, scaleYMax, initialTransformMatrix, wheelDelta, pinchDelta, width, height, constrain, children, }: ZoomProps<ElementType>): ReactElement;
+declare function Zoom<ElementType extends Element>({ scaleXMin, scaleXMax, scaleYMin, scaleYMax, initialTransformMatrix, wheelDelta, pinchDelta, width, height, constrain, children, }: ZoomProps<ElementType>): OctaneNode;
 export default Zoom;

package/src/zoom/types.ts

@@ -1,16 +1,8 @@
-import type { Handler, UserHandlers, WebKitGestureEvent } from '@use-gesture/core/types';
-import type {
-	MouseEvent as ReactMouseEvent,
-	PointerEvent as ReactPointerEvent,
-	RefObject,
-	TouchEvent as ReactTouchEvent,
-	WheelEvent as ReactWheelEvent,
-} from 'react';
+import type { RefObject } from 'react';
 
-export type GenericWheelEvent = ReactWheelEvent | WheelEvent;
+export type GenericWheelEvent = WheelEvent;
 
-export type InteractionEvent =
-	ReactMouseEvent | ReactTouchEvent | ReactPointerEvent | MouseEvent | TouchEvent | PointerEvent;
+export type InteractionEvent = MouseEvent | TouchEvent | PointerEvent;
 
 export interface TransformMatrix {
 	scaleX: number;
@@ -30,20 +22,15 @@ export type Translate = Pick<TransformMatrix, 'translateX' | 'translateY'>;
 
 export type Scale = Pick<TransformMatrix, 'scaleX' | 'scaleY'>;
 
-export type PinchDelta = (
-	params: Parameters<
-		Handler<
-			'pinch',
-			| TouchEvent
-			| ReactTouchEvent
-			| PointerEvent
-			| ReactPointerEvent
-			| WheelEvent
-			| ReactWheelEvent
-			| WebKitGestureEvent
-		>
-	>[0],
-) => Scale;
+type PinchDeltaState = {
+	event: TouchEvent | PointerEvent | WheelEvent;
+	origin: [number, number];
+	offset: [number, number];
+	lastOffset: [number, number];
+	memo: unknown;
+};
+
+export type PinchDelta = (params: PinchDeltaState) => Scale;
 
 export interface ScaleSignature {
 	scaleX: TransformMatrix['scaleX'];
@@ -72,9 +59,9 @@ export interface ProvidedZoom<ElementType> {
 	/** Resets the transform to the initial transform specified by props. */
 	reset: () => void;
 	/** Callback for a wheel event, updating scale based on props.wheelDelta, relative to the mouse position. */
-	handleWheel: (event: ReactWheelEvent | WheelEvent) => void;
+	handleWheel: (event: GenericWheelEvent) => void;
 	/** Callback for a pinch event, updating scale based on props.pinchDelta relative to the pinch position. */
-	handlePinch: UserHandlers['onPinch'];
+	handlePinch: (state: PinchDeltaState) => unknown;
 	/** Callback for dragEnd, sets isDragging to false. */
 	dragEnd: () => void;
 	/** Callback for dragMove, results in a scale transform. */