@octanejs/recharts 0.1.32 → 0.1.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@octanejs/recharts",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "license": "MIT",
   "type": "module",
   "engines": {
@@ -21,13 +21,16 @@
   },
   "main": "src/index.ts",
   "module": "src/index.ts",
-  "types": "src/index.ts",
+  "types": "src/index.d.ts",
   "files": [
     "src",
     "README.md"
   ],
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./src/index.d.ts",
+      "default": "./src/index.ts"
+    }
   },
   "dependencies": {
     "@reduxjs/toolkit": "^2.12.0",
@@ -39,10 +42,10 @@
     "reselect": "5.2.0",
     "tiny-invariant": "^1.3.3",
     "victory-vendor": "^37.3.6",
-    "@octanejs/redux": "0.1.32"
+    "@octanejs/redux": "0.1.34"
   },
   "peerDependencies": {
-    "octane": "0.1.35"
+    "octane": "0.1.37"
   },
   "devDependencies": {
     "@tsrx/react": "^0.2.56",
@@ -51,7 +54,7 @@
     "react-dom": "^19.2.7",
     "recharts": "3.9.2",
     "vitest": "^4.1.10",
-    "octane": "0.1.35"
+    "octane": "0.1.37"
   },
   "scripts": {
     "test": "vitest run"

package/src/animation/AnimationController.ts

@@ -0,0 +1,90 @@
+// Port of animation/AnimationController.ts — upstream ships this module as
+// types only (its compiled `es6/animation/AnimationController.js` is `export {}`),
+// so the vendoring pass that copies recharts' compiled JS skipped it and left
+// `CSSTransitionAnimate` importing a module that does not exist.
+//
+// `TimeoutController`, `CallbackType` and `CancelableTimeout` live in
+// `animation/timeoutController.ts` upstream, and `AnimationHandle` is exported
+// as a type from `animation/AnimationHandle.ts`. Both of those modules are
+// vendored here as compiled `.js`, which carries their runtime classes but
+// erases every type-only export, so they cannot be imported by name yet. They
+// are co-located here until those two modules are typed; move them back to
+// their upstream homes at that point rather than growing this module.
+import type { CSSTransitionAnimation, JavascriptAnimation } from './AnimationHandle';
+
+/**
+ * Callback type for the timeout function.
+ * Receives current time as an argument.
+ */
+export type CallbackType = (now: number) => void;
+
+/**
+ * A function that, when called, cancels the timeout.
+ *
+ * @since 3.9
+ */
+export type CancelableTimeout = () => void;
+
+/**
+ * TimeoutController is responsible for controlling the movement of time.
+ * Think of it as a clock.
+ *
+ * Recharts default implementation uses requestAnimationFrame which works great
+ * in a browser. You may choose to override this which is especially useful if
+ * you want to control animations.
+ *
+ * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
+ *
+ * @since 3.9
+ */
+export interface TimeoutController {
+	/**
+	 * Sets a timeout that executes a callback after a specified delay.
+	 * Allows setting multiple timeouts and provides a way to cancel them
+	 * independently.
+	 *
+	 * The input (`delay`) is relative — "wait for this long". The output (`now`,
+	 * the callback's parameter) is absolute — "this is the time now".
+	 */
+	setTimeout(callback: CallbackType, delay?: number): CancelableTimeout;
+}
+
+/**
+ * Recharts animation state machine.
+ *
+ * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
+ *
+ * @since 3.9
+ */
+export type AnimationHandle = JavascriptAnimation | CSSTransitionAnimation;
+
+/**
+ * It's actually always the case that JavaScript-based animations produce numbers,
+ * and CSS transition-based animations always produce strings,
+ * but it's so much easier to just have them together than to deal with all the generics.
+ *
+ * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
+ *
+ * @since 3.9
+ */
+export type OnAnimationStateUpdate = (newState: number | string) => void;
+
+/**
+ * AnimationController accepts the animation state machine (= RechartsAnimation) plus a timeout controller,
+ * and manages the animation by calling the tick method of the animation state machine at the right time.
+ *
+ * One controller is only responsible for one animation. Every new animation will create a new controller.
+ *
+ * The animation state machine is responsible for calculating the animation progress
+ * and calling the onAnimationStart and onAnimationEnd callbacks at the right time,
+ * while the AnimationController is responsible for calling the tick method of the animation state machine.
+ *
+ * @see {@link https://recharts.github.io/en-US/guide/animations/ Animation guide}
+ *
+ * @since 3.9
+ */
+export type AnimationController = (
+	timeoutController: TimeoutController,
+	animationHandle: AnimationHandle,
+	listener: OnAnimationStateUpdate,
+) => CancelableTimeout;

package/src/animation/CSSTransitionAnimate.tsrx

@@ -1,5 +1,6 @@
 import * as React from 'octane';
-import { CSSProperties, useCallback, useEffect, useRef, useState, type OctaneNode } from 'octane';
+import { useCallback, useEffect, useRef, useState, type OctaneNode } from 'octane';
+import type { Octane } from 'octane/jsx-runtime';
 import { noop } from '../util/DataUtils';
 import { resolveDefaultProps } from '../util/resolveDefaultProps';
 import { useAnimationController } from './useAnimationController';
@@ -11,6 +12,12 @@ import { RequestAnimationFrameTimeoutController } from './timeoutController';
 import { EasingInput, NamedBezier } from './easing';
 import type { AnimationController } from './AnimationController';
 
+// `octane` does not export `CSSProperties`. The object form of octane's JSX
+// `style` prop is the type this render prop hands out, so take it from there
+// (`octane/jsx-runtime` types it as `string | React.CSSProperties`) rather than
+// importing @types/react, which this package does not depend on.
+type CSSProperties = Exclude<NonNullable<Octane.HTMLAttributes<Element>['style']>, string>;
+
 type CSSTransitionAnimateProps = {
 	animationId: string;
 	animationController?: AnimationController;

package/src/index.d.ts

@@ -155,7 +155,10 @@ export type BarShapeProps = Omit<RechartsProps, 'payload'> & {
 };
 export type BrushProps = RechartsProps;
 export type CartesianGridProps = RechartsProps;
+export type DefaultLegendContentProps = RechartsProps;
+export type DefaultTooltipContentProps = RechartsProps;
 export type DotProps = RechartsProps;
+export type ErrorBarProps = RechartsProps;
 export type FunnelProps = RechartsProps;
 export type LabelListProps = RechartsProps;
 export type LabelProps = RechartsProps;
@@ -194,6 +197,10 @@ export type TooltipProps<
 > = RechartsProps & {
 	formatter?: (value: TValue, name: TName, ...rest: any[]) => OctaneNode;
 };
+export type TooltipFormatter<
+	TValue extends ValueType = ValueType,
+	TName extends NameType = NameType,
+> = NonNullable<TooltipProps<TValue, TName>['formatter']>;
 export type TreemapProps = RechartsProps;
 export type XAxisProps = RechartsProps;
 export type YAxisProps = RechartsProps;
@@ -203,18 +210,30 @@ export declare const Area: Component<AreaProps>;
 export declare const AreaChart: Component<ChartProps>;
 export declare const Bar: Component<BarProps>;
 export declare const BarChart: Component<ChartProps>;
-export declare const Brush: Component<BrushProps>;
+export declare const BarStack: Component<RechartsProps>;
 export declare const CartesianGrid: Component<CartesianGridProps>;
+export declare const CartesianAxis: Component<RechartsProps>;
+export declare const CartesianChart: Component<ChartProps>;
+export declare const Cell: Component<Record<string, unknown>>;
 export declare const ComposedChart: Component<ChartProps>;
+export declare const Cross: Component<RechartsProps>;
+export declare const Curve: Component<RechartsProps>;
+export declare const DefaultLegendContent: Component<DefaultLegendContentProps>;
+export declare const DefaultTooltipContent: Component<DefaultTooltipContentProps>;
+export declare const Dot: Component<DotProps>;
+export declare const ErrorBar: Component<ErrorBarProps>;
 export declare const Funnel: Component<FunnelProps>;
 export declare const FunnelChart: Component<ChartProps>;
+export declare const Layer: Component<RechartsProps>;
 export declare const Label: Component<LabelProps>;
 export declare const LabelList: Component<LabelListProps>;
 export declare const Legend: Component<LegendProps>;
 export declare const Line: Component<LineProps>;
 export declare const LineChart: Component<ChartProps>;
+export declare const LineDrawShape: Component<RechartsProps>;
 export declare const Pie: Component<PieProps>;
 export declare const PieChart: Component<ChartProps>;
+export declare const Polygon: Component<RechartsProps>;
 export declare const PolarAngleAxis: Component<PolarAngleAxisProps>;
 export declare const PolarGrid: Component<PolarGridProps>;
 export declare const PolarRadiusAxis: Component<PolarRadiusAxisProps>;
@@ -228,9 +247,35 @@ export declare const ResponsiveContainer: Component<ResponsiveContainerProps>;
 export declare const Sankey: Component<SankeyProps>;
 export declare const Scatter: Component<ScatterProps>;
 export declare const ScatterChart: Component<ChartProps>;
+export declare const Sector: Component<RechartsProps>;
 export declare const SunburstChart: Component<SunburstChartProps>;
+export declare const Surface: Component<RechartsProps>;
+export declare const Symbols: Component<RechartsProps>;
+export declare const Text: Component<RechartsProps>;
 export declare const Tooltip: Component<TooltipProps>;
-export declare const Treemap: Component<TreemapProps>;
+export declare const Trapezoid: Component<RechartsProps>;
 export declare const XAxis: Component<XAxisProps>;
 export declare const YAxis: Component<YAxisProps>;
 export declare const ZAxis: Component<ZAxisProps>;
+export declare const ZIndexLayer: Component<RechartsProps>;
+
+export declare const AnimationControllerProvider: Component<{ children?: OctaneNode }>;
+
+export declare function useChartWidth(): number | undefined;
+export declare function useChartHeight(): number | undefined;
+export declare function useMargin(): unknown;
+export declare function useChartLayout(): RechartsProps['layout'] | undefined;
+export declare function useCartesianChartLayout(): 'horizontal' | 'vertical' | undefined;
+export declare function usePolarChartLayout(): 'centric' | 'radial' | undefined;
+export declare function useIsInChartContext(): boolean;
+export declare function useViewBox(): unknown;
+export declare function useXAxis(xAxisId?: string | number): unknown;
+export declare function useYAxis(yAxisId?: string | number): unknown;
+export declare function useXAxisScale(xAxisId?: string | number): unknown;
+export declare function useYAxisScale(yAxisId?: string | number): unknown;
+export declare function useXAxisInverseScale(xAxisId?: string | number): unknown;
+export declare function useYAxisInverseScale(yAxisId?: string | number): unknown;
+export declare function useOffset(): unknown;
+export declare function usePlotArea(): unknown;
+export declare function useActiveTooltipLabel(): unknown;
+export declare function useActiveTooltipDataPoints(): unknown;