@octanejs/visx 0.1.37 → 0.1.38

package/src/tooltip/floating/useChartTooltip.tsrx

@@ -1,5 +1,4 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
-import type React from 'react';
 import type {
 	ChartTooltipItem,
 	ChartTooltipProps,
@@ -43,7 +42,7 @@ export type UseChartTooltipReturn<Datum = unknown> = {
 	open: boolean;
 	items: ChartTooltipItem<Datum>[];
 	anchor: TooltipAnchor | null;
-	containerRef: React.RefCallback<HTMLElement | SVGElement>;
+	containerRef: (node: HTMLElement | SVGElement | null) => void;
 	show: (args: {
 		anchor: TooltipAnchor | ChartTooltipLocalPoint | ChartTooltipSvgPoint;
 		items: ChartTooltipItem<Datum>[];

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

@@ -1,5 +1,4 @@
 // 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 = {
@@ -25,7 +24,7 @@ export type UseChartTooltipReturn<Datum = unknown> = {
     open: boolean;
     items: ChartTooltipItem<Datum>[];
     anchor: TooltipAnchor | null;
-    containerRef: React.RefCallback<HTMLElement | SVGElement>;
+    containerRef: (node: HTMLElement | SVGElement | null) => void;
     show: (args: {
         anchor: TooltipAnchor | ChartTooltipLocalPoint | ChartTooltipSvgPoint;
         items: ChartTooltipItem<Datum>[];

package/src/tooltip/floating/useFloatingTooltip.tsrx

@@ -9,10 +9,15 @@ import {
 	useRole,
 } from '@octanejs/floating-ui';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'octane';
-import type React from 'react';
+import type { Octane } from 'octane/jsx-runtime';
 import { getTooltipAnchorReference } from './anchors';
 import { buildFloatingTooltipMiddleware } from './middleware';
-import type { OpenChangeReason, ReferenceElement, UseFloatingReturn } from './internalTypes';
+import type {
+	HTMLProps,
+	OpenChangeReason,
+	ReferenceElement,
+	UseFloatingReturn,
+} from './internalTypes';
 import type {
 	FloatingTooltipOpenChangeDetails,
 	TooltipAlign,
@@ -31,7 +36,7 @@ function getSideAndAlign(placement: string): { side: TooltipSide; align: Tooltip
 	};
 }
 
-function getFloatingPropsWithDefaultId<TProps extends React.HTMLProps<HTMLElement>>(
+function getFloatingPropsWithDefaultId<TProps extends HTMLProps<HTMLElement>>(
 	props: TProps | undefined,
 	id: string | undefined,
 ) {
@@ -263,7 +268,7 @@ export default function useFloatingTooltip<TData = unknown>(
 
 	const { align, side } = getSideAndAlign(floating.placement);
 	const getFloatingPropsWithId = useCallback(
-		<TProps extends React.HTMLProps<HTMLElement>>(props?: TProps) => getFloatingProps(
+		<TProps extends HTMLProps<HTMLElement>>(props?: TProps) => getFloatingProps(
 			getFloatingPropsWithDefaultId(props, id),
 		) as TProps,
 		[getFloatingProps, id],
@@ -290,10 +295,10 @@ export default function useFloatingTooltip<TData = unknown>(
 		update: floating.update,
 		openTooltip,
 		closeTooltip,
-		getReferenceProps: <TProps extends React.HTMLProps<Element>>(props?: TProps) =>
+		getReferenceProps: <TProps extends HTMLProps<Element>>(props?: TProps) =>
 			getReferenceProps(props) as TProps,
 		getFloatingProps: getFloatingPropsWithId,
-		getArrowProps: <TProps extends React.SVGProps<SVGSVGElement>>(props?: TProps) => {
+		getArrowProps: <TProps extends Octane.SVGProps<SVGSVGElement>>(props?: TProps) => {
 			const emptyProps = {};
 			return props ?? emptyProps as TProps;
 		},

package/src/tooltip/hooks/useTooltipInPortal.tsrx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from 'octane';
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import useMeasure from '../../internal/useMeasure.tsrx';
 import type {
 	RectReadOnly,
@@ -23,7 +23,7 @@ export type UseTooltipInPortal = {
 	/** Function to force a refresh of the container bounds. */
 	forceRefreshBounds: () => void;
 	/** Component to render the tooltip in a portal. */
-	TooltipInPortal: FC<TooltipInPortalProps>;
+	TooltipInPortal: ComponentBody<TooltipInPortalProps>;
 };
 
 export type UseTooltipPortalOptions = Pick<PortalProps, 'zIndex'> & {

package/src/tooltip/hooks/useTooltipInPortal.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { RectReadOnly, Options as BaseUseMeasureOptions } from '../../internal/useMeasure.tsrx';
 import type { PortalProps } from '../Portal.tsrx';
 import type { TooltipProps } from '../tooltips/Tooltip.tsrx';
@@ -12,7 +12,7 @@ export type UseTooltipInPortal = {
     /** Function to force a refresh of the container bounds. */
     forceRefreshBounds: () => void;
     /** Component to render the tooltip in a portal. */
-    TooltipInPortal: FC<TooltipInPortalProps>;
+    TooltipInPortal: ComponentBody<TooltipInPortalProps>;
 };
 export type UseTooltipPortalOptions = Pick<PortalProps, 'zIndex'> & {
     /** whether TooltipWithBounds should be used to auto-detect (page) boundaries and reposition itself. */

package/src/tooltip/tooltips/Tooltip.tsrx

@@ -1,5 +1,6 @@
-import type { CSSProperties, HTMLAttributes, Ref } from 'react';
+import type { CSSProperties, Ref } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import cx from 'classnames';
 
 export type TooltipProps = {
@@ -56,7 +57,9 @@ const Tooltip = ({
 	applyPositionStyle = false,
 	ref,
 	...restProps
-}: TooltipProps & HTMLAttributes<HTMLDivElement> & { ref?: Ref<HTMLDivElement> }) => <div
+}: TooltipProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof TooltipProps> & {
+	ref?: Ref<HTMLDivElement>;
+}) => <div
 	ref={ref}
 	className={cx('visx-tooltip', className)}
 	style={{

package/src/tooltip/tooltips/Tooltip.tsrx.d.ts

@@ -1,6 +1,7 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { CSSProperties, HTMLAttributes, Ref } from 'react';
+import type { CSSProperties, Ref } from 'react';
 import type { OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 export type TooltipProps = {
     /** Tooltip content. */
     children?: OctaneNode;
@@ -32,7 +33,7 @@ export type TooltipProps = {
 };
 export declare const defaultStyles: CSSProperties;
 declare const Tooltip: {
-    ({ className, top, left, offsetLeft, offsetTop, style, children, unstyled, applyPositionStyle, ref, ...restProps }: TooltipProps & HTMLAttributes<HTMLDivElement> & {
+    ({ className, top, left, offsetLeft, offsetTop, style, children, unstyled, applyPositionStyle, ref, ...restProps }: TooltipProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof TooltipProps> & {
         ref?: Ref<HTMLDivElement>;
     }): import("react").JSX.Element;
     displayName: string;

package/src/tooltip/tooltips/TooltipWithBounds.tsrx

@@ -1,4 +1,6 @@
-import type { HTMLAttributes, Ref, CSSProperties } from 'react';
+import type { Ref, CSSProperties } from 'react';
+import type { ElementDescriptor } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import type { WithBoundingRectsProps } from '@octanejs/visx/bounds';
 import { withBoundingRects } from '@octanejs/visx/bounds';
 
@@ -7,7 +9,7 @@ import Tooltip, { defaultStyles } from './Tooltip.tsrx';
 import { TooltipPositionProvider } from '../context/TooltipPositionContext.tsrx';
 
 export type TooltipWithBoundsProps =
-	TooltipProps & HTMLAttributes<HTMLDivElement> & WithBoundingRectsProps & {
+	TooltipProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof TooltipProps> & WithBoundingRectsProps & {
 		nodeRef?: Ref<HTMLDivElement>;
 	};
 
@@ -79,4 +81,8 @@ function TooltipWithBounds({
 	</Tooltip>;
 }
 
-export default withBoundingRects(TooltipWithBounds)
+const TooltipWithBoundsComponent = withBoundingRects(TooltipWithBounds) as unknown as (
+	props: TooltipWithBoundsProps,
+) => ElementDescriptor;
+
+export default TooltipWithBoundsComponent;

package/src/tooltip/tooltips/TooltipWithBounds.tsrx.d.ts

@@ -1,9 +1,11 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { HTMLAttributes, Ref } from 'react';
+import type { Ref } from 'react';
+import type { ElementDescriptor } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import type { WithBoundingRectsProps } from '@octanejs/visx/bounds';
 import type { TooltipProps } from './Tooltip.tsrx';
-export type TooltipWithBoundsProps = TooltipProps & HTMLAttributes<HTMLDivElement> & WithBoundingRectsProps & {
+export type TooltipWithBoundsProps = TooltipProps & Omit<Octane.HTMLAttributes<HTMLDivElement>, keyof TooltipProps> & WithBoundingRectsProps & {
     nodeRef?: Ref<HTMLDivElement>;
 };
-declare const _default: any;
-export default _default;
+declare const TooltipWithBoundsComponent: (props: TooltipWithBoundsProps) => ElementDescriptor;
+export default TooltipWithBoundsComponent;

package/src/xychart/components/Tooltip.tsrx

@@ -237,8 +237,6 @@ function TooltipInner<Datum extends object>({
 			if (isValidNumber(left) && isValidNumber(top)) {
 				const color =
 					(nearestDatumKey && colorScale?.(nearestDatumKey)) ??
-						// @ts-expect-error
-						null ??
 						theme?.gridStyles?.stroke ??
 						theme?.htmlLabel?.color ??
 						'#222';

package/src/xychart/components/XYChart.tsrx

@@ -1,6 +1,5 @@
 /* eslint jsx-a11y/mouse-events-have-key-events: 'off', @typescript-eslint/no-explicit-any: 'off' */
 import { useContext, useEffect } from 'octane';
-import type { PointerEvent } from 'react';
 import type { OctaneNode } from 'octane';
 import { ParentSize } from '@octanejs/visx/responsive';
 import type { ResizeObserverPolyfill } from '@octanejs/visx/responsive';

package/src/xychart/components/XYChart.tsrx.d.ts

@@ -1,5 +1,4 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { PointerEvent } from 'react';
 import type { OctaneNode } from 'octane';
 import type { ResizeObserverPolyfill } from '@octanejs/visx/responsive';
 import type { AxisScaleOutput } from '@octanejs/visx/axis';

package/src/xychart/components/annotation/private/BaseAnnotation.tsrx

@@ -1,5 +1,5 @@
 import { useContext, useMemo } from 'octane';
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { AnnotationProps, EditableAnnotationProps } from '@octanejs/visx/annotation';
 import type { ScaleInput } from '@octanejs/visx/scale';
 import { coerceNumber } from '@octanejs/visx/scale';
@@ -18,7 +18,7 @@ export type BaseAnnotationProps<XScale extends AxisScale, YScale extends AxisSca
 	| 'onDragMove'
 	| 'onDragStart'> & {
 		/** Annotation component to render. */
-		AnnotationComponent: FC<AnnotationProps> | FC<EditableAnnotationProps>;
+		AnnotationComponent: ComponentBody<AnnotationProps> | ComponentBody<EditableAnnotationProps>;
 		/** Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified. */
 		dataKey?: string;
 		/** Datum to annotate, used for Annotation positioning. */

package/src/xychart/components/annotation/private/BaseAnnotation.tsrx.d.ts

@@ -1,11 +1,11 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { AnnotationProps, EditableAnnotationProps } from '@octanejs/visx/annotation';
 import type { ScaleInput } from '@octanejs/visx/scale';
 import type { AxisScale } from '@octanejs/visx/axis';
 export type BaseAnnotationProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = Pick<EditableAnnotationProps, 'canEditLabel' | 'canEditSubject' | 'children' | 'dx' | 'dy' | 'onDragEnd' | 'onDragMove' | 'onDragStart'> & {
     /** Annotation component to render. */
-    AnnotationComponent: FC<AnnotationProps> | FC<EditableAnnotationProps>;
+    AnnotationComponent: ComponentBody<AnnotationProps> | ComponentBody<EditableAnnotationProps>;
     /** Key for series to which datum belongs (used for x/yAccessors). Alternatively xAccessor + yAccessor may be specified. */
     dataKey?: string;
     /** Datum to annotate, used for Annotation positioning. */

package/src/xychart/components/axis/BaseAxis.tsrx

@@ -1,5 +1,5 @@
 import { useMemo, useContext } from 'octane';
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { AxisScale, TickLabelProps, AxisProps as VxAxisProps } from '@octanejs/visx/axis';
 import type { ScaleInput } from '@octanejs/visx/scale';
 import DataContext from '../../context/DataContext.tsrx';
@@ -12,7 +12,7 @@ export type BaseAxisProps<Scale extends AxisScale> = Omit<
   orientation: NonNullable<VxAxisProps<Scale>['orientation']>;
 } & {
   /** Rendered component which is passed VxAxisProps by BaseAxis after processing. */
-  AxisComponent: FC<VxAxisProps<Scale>>;
+  AxisComponent: ComponentBody<VxAxisProps<Scale>>;
 };
 
 /**

package/src/xychart/components/axis/BaseAxis.tsrx.d.ts

@@ -1,12 +1,12 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { AxisScale, AxisProps as VxAxisProps } from '@octanejs/visx/axis';
 export type BaseAxisProps<Scale extends AxisScale> = Omit<VxAxisProps<Scale>, 'scale' | 'orientation'> & {
     /** Required axis orientation. */
     orientation: NonNullable<VxAxisProps<Scale>['orientation']>;
 } & {
     /** Rendered component which is passed VxAxisProps by BaseAxis after processing. */
-    AxisComponent: FC<VxAxisProps<Scale>>;
+    AxisComponent: ComponentBody<VxAxisProps<Scale>>;
 };
 /**
  * Component which handles all xychart-specific logic for axes,

package/src/xychart/components/grid/BaseGrid.tsrx

@@ -1,5 +1,5 @@
 import { useContext } from 'octane';
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { CommonGridProps, AllGridRowsProps, GridColumnsProps } from '@octanejs/visx/grid';
 import type { AxisScale } from '@octanejs/visx/axis';
 import DataContext from '../../context/DataContext.tsrx';
@@ -10,9 +10,9 @@ export type BaseGridProps = {
 		/** Whether to render GridColumns. */
 		columns?: boolean;
 		/** Rendered GridRows component which is passed GridRowProps by BaseGrid. */
-		GridRowsComponent: FC<AllGridRowsProps<AxisScale>>;
+		GridRowsComponent: ComponentBody<AllGridRowsProps<AxisScale>>;
 		/** Rendered GridColumns component which is passed GridColumnsProps by BaseGrid. */
-		GridColumnsComponent: FC<GridColumnsProps<AxisScale>>;
+		GridColumnsComponent: ComponentBody<GridColumnsProps<AxisScale>>;
 	} & CommonGridProps;
 
 /** Component that handles all  */

package/src/xychart/components/grid/BaseGrid.tsrx.d.ts

@@ -1,5 +1,5 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FC } from 'react';
+import type { ComponentBody } from 'octane';
 import type { CommonGridProps, AllGridRowsProps, GridColumnsProps } from '@octanejs/visx/grid';
 import type { AxisScale } from '@octanejs/visx/axis';
 export type BaseGridProps = {
@@ -8,9 +8,9 @@ export type BaseGridProps = {
     /** Whether to render GridColumns. */
     columns?: boolean;
     /** Rendered GridRows component which is passed GridRowProps by BaseGrid. */
-    GridRowsComponent: FC<AllGridRowsProps<AxisScale>>;
+    GridRowsComponent: ComponentBody<AllGridRowsProps<AxisScale>>;
     /** Rendered GridColumns component which is passed GridColumnsProps by BaseGrid. */
-    GridColumnsComponent: FC<GridColumnsProps<AxisScale>>;
+    GridColumnsComponent: ComponentBody<GridColumnsProps<AxisScale>>;
 } & CommonGridProps;
 /** Component that handles all  */
 export default function BaseGrid({ rows, columns, GridRowsComponent, GridColumnsComponent, ...props }: BaseGridProps): import("react").JSX.Element;

package/src/xychart/components/series/AnimatedGlyphSeries.tsrx

@@ -1,6 +1,6 @@
 import type { AxisScale } from '@octanejs/visx/axis';
 import { useCallback } from 'octane';
-import type { FC } from 'react';
+import type { OctaneNode } from 'octane';
 import type { GlyphProps, GlyphsProps } from '../../types';
 import AnimatedGlyphs from './private/AnimatedGlyphs.tsrx';
 import type { BaseGlyphSeriesProps } from './private/BaseGlyphSeries.tsrx';
@@ -15,7 +15,7 @@ export default function AnimatedGlyphSeries<
   renderGlyph = defaultRenderGlyph,
   ...props
 }: Omit<BaseGlyphSeriesProps<XScale, YScale, Datum>, 'renderGlyphs'> & {
-  renderGlyph?: FC<GlyphProps<Datum>>;
+  renderGlyph?: (props: GlyphProps<Datum>) => OctaneNode;
 }) {
   const renderGlyphs = useCallback(
     (glyphsProps: GlyphsProps<XScale, YScale, Datum>) => (

package/src/xychart/components/series/AnimatedGlyphSeries.tsrx.d.ts

@@ -1,8 +1,8 @@
 // Generated by scripts/generate-tsrx-types.mjs.
 import type { AxisScale } from '@octanejs/visx/axis';
-import type { FC } from 'react';
+import type { OctaneNode } from 'octane';
 import type { GlyphProps } from '../../types';
 import type { BaseGlyphSeriesProps } from './private/BaseGlyphSeries.tsrx';
 export default function AnimatedGlyphSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ renderGlyph, ...props }: Omit<BaseGlyphSeriesProps<XScale, YScale, Datum>, 'renderGlyphs'> & {
-    renderGlyph?: FC<GlyphProps<Datum>>;
+    renderGlyph?: (props: GlyphProps<Datum>) => OctaneNode;
 }): import("react").JSX.Element;

package/src/xychart/components/series/GlyphSeries.tsrx

@@ -1,6 +1,5 @@
 import type { AxisScale } from '@octanejs/visx/axis';
 import { Fragment, useCallback } from 'octane';
-import type { FC } from 'react';
 import type { OctaneNode } from 'octane';
 import type { GlyphProps, GlyphsProps } from '../../types';
 import type { BaseGlyphSeriesProps } from './private/BaseGlyphSeries.tsrx';
@@ -11,7 +10,7 @@ export default function GlyphSeries<XScale extends AxisScale, YScale extends Axi
 	renderGlyph = defaultRenderGlyph,
 	...props
 }: Omit<BaseGlyphSeriesProps<XScale, YScale, Datum>, 'renderGlyphs'> & {
-	renderGlyph?: FC<GlyphProps<Datum>>;
+	renderGlyph?: (props: GlyphProps<Datum>) => OctaneNode;
 }) {
 	const renderGlyphs = useCallback(
 		({

package/src/xychart/components/series/GlyphSeries.tsrx.d.ts

@@ -1,8 +1,8 @@
 // Generated by scripts/generate-tsrx-types.mjs.
 import type { AxisScale } from '@octanejs/visx/axis';
-import type { FC } from 'react';
+import type { OctaneNode } from 'octane';
 import type { GlyphProps } from '../../types';
 import type { BaseGlyphSeriesProps } from './private/BaseGlyphSeries.tsrx';
 export default function GlyphSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ renderGlyph, ...props }: Omit<BaseGlyphSeriesProps<XScale, YScale, Datum>, 'renderGlyphs'> & {
-    renderGlyph?: FC<GlyphProps<Datum>>;
+    renderGlyph?: (props: GlyphProps<Datum>) => OctaneNode;
 }): import("react").JSX.Element;

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

@@ -1,6 +1,5 @@
 import type { AxisScale } from '@octanejs/visx/axis';
 import { useMemo } from 'octane';
-import type { FC } from 'react';
 import type { OctaneNode } from 'octane';
 import {
 	useTransition as useSpringTransition,
@@ -72,7 +71,7 @@ export default function AnimatedGlyphs<XScale extends AxisScale, YScale extends
 	// unanimated Glyph component
 	// unanimated Glyph component
 	// unanimated Glyph component
-	renderGlyph: FC<GlyphProps<Datum>>;
+	renderGlyph: (props: GlyphProps<Datum>) => OctaneNode;
 } & GlyphsProps<XScale, YScale, Datum>) {
 	const animatedGlyphs = useSpringTransition(glyphs, {
 		...useAnimatedGlyphsConfig({ xScale, yScale, horizontal }),

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

@@ -1,6 +1,6 @@
 // Generated by scripts/generate-tsrx-types.mjs.
 import type { AxisScale } from '@octanejs/visx/axis';
-import type { FC } from 'react';
+import type { OctaneNode } from 'octane';
 import type { GlyphProps, GlyphsProps } from '../../../types';
 /** Memoized useTransition config */
 export declare function useAnimatedGlyphsConfig<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ xScale, yScale, horizontal, }: {
@@ -36,5 +36,5 @@ export declare function useAnimatedGlyphsConfig<XScale extends AxisScale, YScale
     keys: (glyph: GlyphProps<Datum>) => string;
 };
 export default function AnimatedGlyphs<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({ renderGlyph, glyphs, horizontal, xScale, yScale, onBlur, onFocus, onPointerMove, onPointerOut, onPointerUp, }: {
-    renderGlyph: FC<GlyphProps<Datum>>;
+    renderGlyph: (props: GlyphProps<Datum>) => OctaneNode;
 } & GlyphsProps<XScale, YScale, Datum>): import("react").JSX.Element;

package/src/xychart/components/series/private/BaseAreaSeries.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 { AxisScale } from '@octanejs/visx/axis';
 import type { AreaProps, LinePathProps } from '@octanejs/visx/shape';
 import { Area, LinePath } from '@octanejs/visx/shape';
 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 getScaleBaseline from '../../../utils/getScaleBaseline';
 import isValidNumber from '../../../typeguards/isValidNumber';
@@ -31,8 +31,11 @@ export type BaseAreaSeriesProps<XScale extends AxisScale, YScale extends AxisSca
 		| 'children'
 		| 'defined'>;
 		/** Rendered component which is passed path props by BaseAreaSeries after processing. */
-		PathComponent?: FC<Omit<Octane.SVGProps<SVGPathElement>, 'ref'>> | 'path';
-	} & Omit<Octane.SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
+		PathComponent?: SvgPathComponent;
+	} & Omit<
+		Octane.SVGProps<SVGPathElement>,
+		'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref' | 'children'
+	>;
 
 function BaseAreaSeries<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
 	PathComponent = 'path',

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

@@ -1,9 +1,9 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { FC } from 'react';
 import type { Octane } from 'octane/jsx-runtime';
 import type { AxisScale } from '@octanejs/visx/axis';
 import type { AreaProps, LinePathProps } from '@octanejs/visx/shape';
 import type { SeriesProps } from '../../../types';
+import type { SvgPathComponent } from '../../../types/svgPath';
 export type BaseAreaSeriesProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = SeriesProps<XScale, YScale, Datum> & {
     /** Optional accessor to override the baseline value of Area shapes per datum (useful to generate band shapes) when chart is rendered horizontally (vertical line). Defaults to the scale zero value, not compatible with AreaStack. */
     x0Accessor?: SeriesProps<XScale, YScale, Datum>['xAccessor'];
@@ -16,6 +16,6 @@ export type BaseAreaSeriesProps<XScale extends AxisScale, YScale extends AxisSca
     /** Props to be passed to the Line, if rendered. */
     lineProps?: Omit<LinePathProps<Datum> & Octane.SVGProps<SVGPathElement>, 'data' | 'x' | 'y' | 'children' | 'defined'>;
     /** Rendered component which is passed path props by BaseAreaSeries after processing. */
-    PathComponent?: FC<Omit<Octane.SVGProps<SVGPathElement>, 'ref'>> | 'path';
-} & Omit<Octane.SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref'>;
+    PathComponent?: SvgPathComponent;
+} & Omit<Octane.SVGProps<SVGPathElement>, 'x' | 'y' | 'x0' | 'x1' | 'y0' | 'y1' | 'ref' | 'children'>;
 export default function BaseAreaSeriesWithRegisteredData<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>(props: BaseAreaSeriesProps<XScale, YScale, Datum>): import("react").JSX.Element | null;

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

@@ -1,5 +1,5 @@
-import { Fragment, createElement, useCallback, useContext, useMemo } from 'octane';
-import type { ReactElement, FC } from 'react';
+import { Fragment, useCallback, useContext, useMemo } from 'octane';
+import type { ElementDescriptor } from 'octane';
 import type { Octane } from 'octane/jsx-runtime';
 import type { AxisScale } from '@octanejs/visx/axis';
 import type { SeriesPoint } from 'd3-shape';
@@ -15,6 +15,7 @@ import type {
 	NearestDatumReturnType,
 	SeriesProps,
 } from '../../../types';
+import type { SvgPathComponent } from '../../../types/svgPath';
 import DataContext from '../../../context/DataContext.tsrx';
 import type { BaseAreaSeriesProps } from './BaseAreaSeries.tsrx';
 import { BaseGlyphSeries } from './BaseGlyphSeries.tsrx';
@@ -23,6 +24,7 @@ import { getStackValue } from '../../../utils/combineBarStackData';
 import isValidNumber from '../../../typeguards/isValidNumber';
 import findNearestStackDatum from '../../../utils/findNearestStackDatum';
 import { AREASTACK_EVENT_SOURCE, XYCHART_EVENT_SOURCE } from '../../../constants';
+import type { SeriesEventsParams } from '../../../hooks/useSeriesEvents.tsrx';
 import useSeriesEvents from '../../../hooks/useSeriesEvents.tsrx';
 import defaultRenderGlyph from './defaultRenderGlyph.tsrx';
 import getScaleBandwidth from '../../../utils/getScaleBandwidth';
@@ -36,10 +38,10 @@ type AreaStackDatum<XScale extends AxisScale, YScale extends AxisScale> =
 export type BaseAreaStackProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> =
 	{
 		/** `AreaSeries` elements, note we can't strictly enforce this with TS yet. */
-		children: | ReactElement<AreaStackChildProps<XScale, YScale, Datum>>
-		| ReactElement<AreaStackChildProps<XScale, YScale, Datum>>[];
+		children: | ElementDescriptor<AreaStackChildProps<XScale, YScale, Datum>>
+		| ElementDescriptor<AreaStackChildProps<XScale, YScale, Datum>>[];
 		/** Rendered component which is passed path props by BaseAreaStack 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?: AreaProps<Datum>['curve'];
 		/** Whether to render a Line along value of the Area shape (area is fill only). */
@@ -53,7 +55,9 @@ export type BaseAreaStackProps<XScale extends AxisScale, YScale extends AxisScal
 	| 'onFocus'
 	| 'enableEvents'>;
 
-const identity = (_: unknown) => _;
+function identity<T>(value: T): T {
+	return value;
+}
 
 function BaseAreaStack<XScale extends AxisScale, YScale extends AxisScale, Datum extends object>({
 	PathComponent = 'path',
@@ -118,7 +122,7 @@ function BaseAreaStack<XScale extends AxisScale, YScale extends AxisScale, Datum
 	// pull out all area + line props for each dataKey
 	const stacks = useMemo(
 		() => stackedData.map((stack, stackIndex) => {
-			const areaSeries: ReactElement<BaseAreaSeriesProps<XScale, YScale, Datum>> | undefined =
+			const areaSeries: ElementDescriptor<BaseAreaSeriesProps<XScale, YScale, Datum>> | undefined =
 				seriesChildren.find((child) => child.props.dataKey === stack.key);
 			const {
 				data,
@@ -163,9 +167,11 @@ function BaseAreaStack<XScale extends AxisScale, YScale extends AxisScale, Datum
 	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 AreaStack (registry data is StackedDatum, return type is user Datum)
-		findNearestDatum,
+		findNearestDatum: findNearestDatum as unknown as SeriesEventsParams<
+			XScale,
+			YScale,
+			Datum
+		>['findNearestDatum'],
 		onBlur,
 		onFocus,
 		onPointerMove,
@@ -196,22 +202,24 @@ function BaseAreaStack<XScale extends AxisScale, YScale extends AxisScale, Datum
 	if (dataKeys.some((key) => dataRegistry.get(key) == null) || !xScale || !yScale || !colorScale) {
 		return null;
 	}
-	const areaNodes = stacks.map(
-		(stack) => createElement(
-			Area,
-			{ key: stack.key, curve, ...stack.accessors },
-			({ path }: { path: (data: typeof stack.data) => string | null }) => createElement(
-				PathComponent,
-				{
-					className: 'visx-area',
-					stroke: 'transparent',
-					d: path(stack.data) || '',
-					...stack.areaProps,
-					...eventEmitters,
-				},
-			),
-		),
-	);
+	const areaNodes = stacks.map(function (stack) {
+		function renderAreaPath(args: { path: (data: typeof stack.data) => string | null }) {
+			return (
+				<PathComponent
+					className="visx-area"
+					stroke="transparent"
+					d={args.path(stack.data) || ''}
+					{...stack.areaProps}
+					{...eventEmitters}
+				/>
+			);
+		}
+		return (
+			<Area key={stack.key} curve={curve} {...stack.accessors}>
+				{renderAreaPath}
+			</Area>
+		);
+	});
 
 	return <g className="visx-area-stack">
 		{areaNodes}
@@ -249,8 +257,8 @@ function BaseAreaStack<XScale extends AxisScale, YScale extends AxisScale, Datum
 					data={stack.data}
 					xAccessor={stack.accessors.x || stack.accessors.x1}
 					yAccessor={stack.accessors.y || stack.accessors.y1}
-					xScale={identity}
-					yScale={identity}
+					xScale={identity as unknown as XScale}
+					yScale={identity as unknown as YScale}
 					renderGlyphs={renderGlyphs}
 				/>;
 			})}

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

@@ -1,16 +1,16 @@
 // Generated by scripts/generate-tsrx-types.mjs.
-import type { ReactElement, FC } from 'react';
-import type { Octane } from 'octane/jsx-runtime';
+import type { ElementDescriptor } from 'octane';
 import type { AxisScale } from '@octanejs/visx/axis';
 import type { StackPathConfig, AreaProps } from '@octanejs/visx/shape';
 import type { SeriesProps } from '../../../types';
+import type { SvgPathComponent } from '../../../types/svgPath';
 import type { BaseAreaSeriesProps } from './BaseAreaSeries.tsrx';
 type AreaStackChildProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = Omit<BaseAreaSeriesProps<XScale, YScale, Datum>, 'PathComponent' | 'curve'>;
 export type BaseAreaStackProps<XScale extends AxisScale, YScale extends AxisScale, Datum extends object> = {
     /** `AreaSeries` elements, note we can't strictly enforce this with TS yet. */
-    children: ReactElement<AreaStackChildProps<XScale, YScale, Datum>> | ReactElement<AreaStackChildProps<XScale, YScale, Datum>>[];
+    children: ElementDescriptor<AreaStackChildProps<XScale, YScale, Datum>> | ElementDescriptor<AreaStackChildProps<XScale, YScale, Datum>>[];
     /** Rendered component which is passed path props by BaseAreaStack 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?: AreaProps<Datum>['curve'];
     /** Whether to render a Line along value of the Area shape (area is fill only). */