airbnb · hshoff · Nov 10, 2025 · Nov 9, 2025 · Nov 9, 2025 · Nov 9, 2025
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -53,6 +53,7 @@ module.exports = {
         'react/jsx-sort-props': 'off',
         'react/no-array-index-key': 'off',
         'react/no-children-prop': 'off',
+        'react/react-in-jsx-scope': 'off', // Not needed with automatic JSX transform (React 16.14+)
         'react/require-default-props': 'off',
         'react/sort-comp': 'off',
         'react/sort-prop-types': 'off',

diff --git a/babel.config.js b/babel.config.js
@@ -12,7 +12,7 @@ const envOptions = {
 
 const presets = [
   ['@babel/preset-env', envOptions],
-  '@babel/preset-react',
+  ['@babel/preset-react', { runtime: 'automatic' }],
   '@babel/preset-typescript',
 ];
 

diff --git a/config-eslint/typescript.js b/config-eslint/typescript.js
@@ -31,6 +31,8 @@ module.exports = {
         'no-unused-vars': 'off',
 
         // IMPORT (Conflicts with TS patterns)
+        'no-duplicate-imports': 'off', // Disabled in favor of import/no-duplicates
+        'import/export': 'off', // TypeScript allows same name for type and value exports
         'import/extensions': [
           'error',
           'never',
@@ -40,6 +42,7 @@ module.exports = {
         ],
         'import/named': 'off',
         'import/no-cycle': 'off',
+        'import/no-duplicates': 'error', // Handles TS type/value namespace separation
         'import/no-named-as-default': 'off',
         'import/no-extraneous-dependencies': [
           'error',
@@ -80,6 +83,7 @@ module.exports = {
           'error',
           { assertionStyle: 'as', objectLiteralTypeAssertions: 'allow-as-parameter' },
         ],
+        '@typescript-eslint/consistent-type-exports': ['error', { fixMixedExportsWithInlineTypeSpecifier: true }],
         '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
         '@typescript-eslint/explicit-function-return-type': 'off', // Allow inferrence
         '@typescript-eslint/func-call-spacing': ['error', 'never'],

diff --git a/package.json b/package.json
@@ -76,8 +76,8 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jsdom": "27.0.0",
     "@types/node": "^22.10.2",
-    "@types/react": "18.3.26",
-    "@types/react-dom": "18.3.7",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.18.1",
     "@typescript-eslint/parser": "^8.18.1",
     "@vitest/coverage-v8": "4",
@@ -100,8 +100,8 @@
     "jsdom": "27.0.0",
     "lerna": "^7.0.2",
     "prettier": "^2.8.1",
-    "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
-    "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
+    "react": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
+    "react-dom": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
     "timezone-mock": "^1.1.0",
     "ts-node": "^10.9.1",
     "typescript": "^5.7.0",
@@ -114,10 +114,10 @@
     ]
   },
   "resolutions": {
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "@types/react": "18.3.26",
-    "@types/react-dom": "18.3.7",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "wrap-ansi": "7.0.0",
     "string-width": "4.2.3",
     "strip-ansi": "6.0.1",

diff --git a/packages/visx-annotation/package.json b/packages/visx-annotation/package.json
@@ -6,6 +6,13 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    }
+  },
   "files": [
     "lib",
     "esm"
@@ -28,7 +35,7 @@
   },
   "homepage": "https://github.com/airbnb/visx#readme",
   "peerDependencies": {
-    "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
+    "react": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
   },
   "dependencies": {
     "@types/react": "*",

diff --git a/packages/visx-annotation/src/components/EditableAnnotation.tsx b/packages/visx-annotation/src/components/EditableAnnotation.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/jsx-handler-names */
 import React, { useCallback, useRef } from 'react';
-import type { UseDrag, HandlerArgs as DragHandlerArgs } from '@visx/drag/lib/useDrag';
-import useDrag from '@visx/drag/lib/useDrag';
+import type { UseDrag, HandlerArgs as DragHandlerArgs } from '@visx/drag';
+import { useDrag } from '@visx/drag';
 import type { AnnotationContextType } from '../types';
 import Annotation from './Annotation';
 
@@ -62,8 +62,8 @@ export default function EditableAnnotation({
 }: EditableAnnotationProps) {
   // chicken before the egg, we need these to reference drag state
   // in drag callbacks which are defined before useDrag() state is available
-  const subjectDragRef = useRef<UseDrag>();
-  const labelDragRef = useRef<UseDrag>();
+  const subjectDragRef = useRef<UseDrag | undefined>(undefined);
+  const labelDragRef = useRef<UseDrag | undefined>(undefined);
 
   const handleDragStart = useCallback(
     ({ event }: DragHandlerArgs) => {

diff --git a/packages/visx-annotation/src/components/LabelAnchorLine.tsx b/packages/visx-annotation/src/components/LabelAnchorLine.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import type { TextProps } from '@visx/text';
 
 interface AnchorLineProps {

diff --git a/packages/visx-annotation/src/index.ts b/packages/visx-annotation/src/index.ts
@@ -6,3 +6,12 @@ export { default as LineSubject } from './components/LineSubject';
 export { default as Annotation } from './components/Annotation';
 export { default as EditableAnnotation } from './components/EditableAnnotation';
 export { default as AnnotationContext } from './context/AnnotationContext';
+
+export type * from './types';
+export type { AnnotationProps } from './components/Annotation';
+export type { CircleSubjectProps } from './components/CircleSubject';
+export type { ConnectorProps } from './components/Connector';
+export type { EditableAnnotationProps } from './components/EditableAnnotation';
+export type { HtmlLabelProps } from './components/HtmlLabel';
+export type { LabelProps } from './components/Label';
+export type { LineSubjectProps } from './components/LineSubject';
diff --git a/packages/visx-axis/package.json b/packages/visx-axis/package.json
@@ -6,6 +6,13 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    }
+  },
   "files": [
     "lib",
     "esm"
@@ -37,7 +44,7 @@
     "classnames": "^2.3.1"
   },
   "peerDependencies": {
-    "react": "^16.3.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
+    "react": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/visx-axis/src/axis/Axis.tsx b/packages/visx-axis/src/axis/Axis.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'classnames';
 import { Group } from '@visx/group';
 import { getTicks, coerceNumber } from '@visx/scale';

diff --git a/packages/visx-axis/src/axis/AxisBottom.tsx b/packages/visx-axis/src/axis/AxisBottom.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
 import Orientation from '../constants/orientation';

diff --git a/packages/visx-axis/src/axis/AxisLeft.tsx b/packages/visx-axis/src/axis/AxisLeft.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
 import Orientation from '../constants/orientation';

diff --git a/packages/visx-axis/src/axis/AxisRenderer.tsx b/packages/visx-axis/src/axis/AxisRenderer.tsx
@@ -1,9 +1,8 @@
-import React from 'react';
 import cx from 'classnames';
 import { Line } from '@visx/shape';
 import { Text } from '@visx/text';
 
-import type { TextProps } from '@visx/text/lib/Text';
+import type { TextProps } from '@visx/text';
 import getLabelTransform from '../utils/getLabelTransform';
 import Orientation from '../constants/orientation';
 import type { AxisRendererProps, AxisScale } from '../types';

diff --git a/packages/visx-axis/src/axis/AxisRight.tsx b/packages/visx-axis/src/axis/AxisRight.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
 import Orientation from '../constants/orientation';

diff --git a/packages/visx-axis/src/axis/AxisTop.tsx b/packages/visx-axis/src/axis/AxisTop.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'classnames';
 import Axis from './Axis';
 import Orientation from '../constants/orientation';

diff --git a/packages/visx-axis/src/axis/Ticks.tsx b/packages/visx-axis/src/axis/Ticks.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import cx from 'classnames';
 import { Line } from '@visx/shape';
 import { Group } from '@visx/group';

diff --git a/packages/visx-axis/src/index.ts b/packages/visx-axis/src/index.ts
@@ -6,4 +6,4 @@ export { default as AxisTop } from './axis/AxisTop';
 export { default as AxisBottom } from './axis/AxisBottom';
 export { default as Orientation } from './constants/orientation';
 
-export * from './types';
+export type * from './types';
diff --git a/packages/visx-axis/src/types.ts b/packages/visx-axis/src/types.ts
@@ -1,5 +1,5 @@
 import type { D3Scale, NumberLike, ScaleInput, ValueOf } from '@visx/scale';
-import type { TextProps } from '@visx/text/lib/Text';
+import type { TextProps } from '@visx/text';
 import type { ReactNode, Ref, SVGProps } from 'react';
 import type Orientation from './constants/orientation';
 

diff --git a/packages/visx-axis/src/utils/getLabelTransform.ts b/packages/visx-axis/src/utils/getLabelTransform.ts
@@ -1,4 +1,4 @@
-import type { TextProps } from '@visx/text/lib/Text';
+import type { TextProps } from '@visx/text';
 import type { OrientationType } from '../constants/orientation';
 import Orientation from '../constants/orientation';
 import type { AxisScaleOutput } from '../types';

diff --git a/packages/visx-bounds/package.json b/packages/visx-bounds/package.json
@@ -6,6 +6,13 @@
   "main": "lib/index.js",
   "module": "esm/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    }
+  },
   "files": [
     "lib",
     "esm"
@@ -34,7 +41,7 @@
     "@types/react-dom": "*"
   },
   "peerDependencies": {
-    "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
-    "react-dom": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
+    "react": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0",
+    "react-dom": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
   }
 }
diff --git a/packages/visx-bounds/src/enhancers/withBoundingRects.tsx b/packages/visx-bounds/src/enhancers/withBoundingRects.tsx
@@ -1,7 +1,6 @@
-/* eslint react/no-did-mount-set-state: 0, react/no-find-dom-node: 0 */
+/* eslint react/no-did-mount-set-state: 0 */
 import type { ComponentClass } from 'react';
 import React from 'react';
-import ReactDOM from 'react-dom';
 
 const emptyRect = {
   top: 0,
@@ -34,7 +33,7 @@ export default function withBoundingRects<Props extends object = {}>(
   return class WrappedComponent extends React.PureComponent<Props> {
     static displayName = `withBoundingRects(${BaseComponent.displayName || ''})`;
     node: HTMLElement | undefined | null;
-    nodeRef: React.RefObject<HTMLElement>;
+    nodeRef: React.RefObject<HTMLElement | null>;
     constructor(props: Props) {
       super(props);
       this.state = {
@@ -46,9 +45,7 @@ export default function withBoundingRects<Props extends object = {}>(
     }
 
     componentDidMount() {
-      this.node = this.nodeRef?.current
-        ? this.nodeRef.current
-        : (ReactDOM.findDOMNode(this) as HTMLElement);
+      this.node = this.nodeRef?.current || null;
       this.setState(() => this.getRects());
     }
 

diff --git a/packages/visx-bounds/test/withBoundingRects.test.tsx b/packages/visx-bounds/test/withBoundingRects.test.tsx
@@ -36,6 +36,7 @@ type BoundingRectsComponentProps = {
   parentRect?: RectShape;
   getRects?: () => DOMRect;
   children?: ReactNode;
+  nodeRef?: React.RefObject<HTMLDivElement>;
   otherProps?: object;
 };
 
@@ -45,6 +46,7 @@ function BoundingRectsComponent({
   parentRect,
   getRects,
   children,
+  nodeRef,
   ...otherProps
 }: BoundingRectsComponentProps) {
   const parentRectStyle = {
@@ -63,7 +65,12 @@ function BoundingRectsComponent({
 
   return (
     <div data-testid="BoundingRectsComponentParent" style={parentRectStyle}>
-      <div data-testid="BoundingRectsComponent" style={rectStyle} onClick={() => getRects?.()}>
+      <div
+        ref={nodeRef}
+        data-testid="BoundingRectsComponent"
+        style={rectStyle}
+        onClick={() => getRects?.()}
+      >
         {children}
         {JSON.stringify(otherProps)}
       </div>

diff --git a/packages/visx-brush/package.json b/packages/visx-brush/package.json
@@ -30,7 +30,7 @@
     "access": "public"
   },
   "peerDependencies": {
-    "react": "^16.0.0-0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
+    "react": "^16.14.0 || ^17.0.0-0 || ^18.0.0-0 || ^19.0.0-0"
   },
   "dependencies": {
     "@visx/drag": "workspace:*",
@@ -39,5 +39,12 @@
     "@visx/scale": "workspace:*",
     "@visx/shape": "workspace:*",
     "classnames": "^2.3.1"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    }
   }
 }
diff --git a/packages/visx-brush/src/BaseBrush.tsx b/packages/visx-brush/src/BaseBrush.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Group } from '@visx/group';
-import type { HandlerArgs as DragArgs } from '@visx/drag/lib/Drag';
-import Drag from '@visx/drag/lib/Drag';
+import type { HandlerArgs as DragArgs } from '@visx/drag';
+import { Drag } from '@visx/drag';
 
 import type { BrushHandleRenderProps } from './BrushHandle';
 import BrushHandle from './BrushHandle';

diff --git a/packages/visx-brush/src/BrushCorner.tsx b/packages/visx-brush/src/BrushCorner.tsx
@@ -1,7 +1,7 @@
 /* eslint react/jsx-handler-names: 0 */
 import React from 'react';
-import type { HandlerArgs as DragArgs } from '@visx/drag/lib/Drag';
-import Drag from '@visx/drag/lib/Drag';
+import type { HandlerArgs as DragArgs } from '@visx/drag';
+import { Drag } from '@visx/drag';
 import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush';
 import type { ResizeTriggerAreas } from './types';
 

diff --git a/packages/visx-brush/src/BrushHandle.tsx b/packages/visx-brush/src/BrushHandle.tsx
@@ -1,7 +1,7 @@
 /* eslint react/jsx-handler-names: 0 */
 import React from 'react';
-import type { HandlerArgs as DragArgs } from '@visx/drag/lib/Drag';
-import Drag from '@visx/drag/lib/Drag';
+import type { HandlerArgs as DragArgs } from '@visx/drag';
+import { Drag } from '@visx/drag';
 import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush';
 import type { BrushPageOffset, BrushingType, ResizeTriggerAreas } from './types';
 import { getPageCoordinates } from './utils';

diff --git a/packages/visx-brush/src/BrushSelection.tsx b/packages/visx-brush/src/BrushSelection.tsx
@@ -1,7 +1,7 @@
 /* eslint react/jsx-handler-names: 0 */
 import React from 'react';
-import type { HandlerArgs as DragArgs } from '@visx/drag/lib/Drag';
-import Drag from '@visx/drag/lib/Drag';
+import type { HandlerArgs as DragArgs } from '@visx/drag';
+import { Drag } from '@visx/drag';
 
 import type { BaseBrushState as BrushState, UpdateBrush } from './BaseBrush';
 import type { BrushPageOffset, BrushingType } from './types';

diff --git a/packages/visx-brush/src/index.ts b/packages/visx-brush/src/index.ts
@@ -1 +1,8 @@
 export { default as Brush } from './Brush';
+
+export type * from './types';
+export type { BrushProps } from './Brush';
+export type { BaseBrushProps, BaseBrushState, UpdateBrush } from './BaseBrush';
+export type { BrushCornerProps } from './BrushCorner';
+export type { BrushHandleProps, BrushHandleRenderProps } from './BrushHandle';
+export type { BrushSelectionProps } from './BrushSelection';
diff --git a/packages/visx-brush/src/utils.ts b/packages/visx-brush/src/utils.ts
@@ -1,4 +1,4 @@
-import type { MouseTouchOrPointerEvent } from '@visx/drag/lib/useDrag';
+import type { MouseTouchOrPointerEvent } from '@visx/drag';
 import type React from 'react';
 import type { Scale } from './types';