Full react 19 support (#1866)

Co-authored-by: Anton Dubrouski <anton.dubrouski@softnetix.io>

Author: adubrouski

package.json

@@ -147,8 +147,8 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "peerDependencies": {
-    "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0",
-    "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"
+    "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "browserify": {
     "transform": [

source/CellMeasurer/CellMeasurer.js

@@ -1,7 +1,7 @@
 /** @flow */
 import * as React from 'react';
-import {findDOMNode} from 'react-dom';
 import type {CellMeasureCache} from './types';
+import {cloneElement} from 'react';
 
 type Children = (params: {measure: () => void}) => React.Element<*>;
 
@@ -30,7 +30,7 @@ type Props = {
 export default class CellMeasurer extends React.PureComponent<Props> {
   static __internalCellMeasurerFlag = false;
 
-  _child: ?Element;
+  _child: {current: HTMLElement | null} = React.createRef();
 
   componentDidMount() {
     this._maybeMeasureCell();
@@ -43,18 +43,31 @@ export default class CellMeasurer extends React.PureComponent<Props> {
   render() {
     const {children} = this.props;
 
-    return typeof children === 'function'
-      ? children({
-          measure: this._measure,
-          registerChild: this._registerChild,
-        })
-      : children;
+    const resolvedChildren =
+      typeof children === 'function'
+        ? children({measure: this._measure, registerChild: this._registerChild})
+        : children;
+
+    if (resolvedChildren === null) {
+      return resolvedChildren;
+    }
+
+    return cloneElement(resolvedChildren, {
+      ref: node => {
+        if (typeof resolvedChildren.ref === 'function') {
+          resolvedChildren.ref(node);
+        } else if (resolvedChildren.ref) {
+          resolvedChildren.ref.current = node;
+        }
+        this._child.current = node;
+      },
+    });
   }
 
   _getCellMeasurements() {
     const {cache} = this.props;
 
-    const node = this._child || findDOMNode(this);
+    const node = this._child.current;
 
     // TODO Check for a bad combination of fixedWidth and missing numeric width or vice versa with height
 
@@ -157,7 +170,7 @@ export default class CellMeasurer extends React.PureComponent<Props> {
         'CellMeasurer registerChild expects to be passed Element or null',
       );
     }
-    this._child = element;
+    this._child.current = element;
     if (element) {
       this._maybeMeasureCell();
     }

source/Grid/Grid.js

@@ -221,6 +221,9 @@ type Props = {
 
   /** Width of Grid; this property determines the number of visible (vs virtualized) columns.  */
   width: number,
+
+  /** Reference to DOM node */
+  elementRef?: React.Ref<React.ElementType>,
 };
 
 type InstanceProps = {
@@ -1382,6 +1385,12 @@ class Grid extends React.PureComponent<Props, State> {
 
   _setScrollingContainerRef = (ref: Element) => {
     this._scrollingContainer = ref;
+
+    if (typeof this.props.elementRef === 'function') {
+      this.props.elementRef(ref);
+    } else if (typeof this.props.elementRef === 'object') {
+      this.props.elementRef.current = ref;
+    }
   };
 
   /**

source/Table/Table.js

@@ -6,7 +6,6 @@ import clsx from 'clsx';
 import Column from './Column';
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import {findDOMNode} from 'react-dom';
 import Grid, {accessibilityOverscanIndicesGetter} from '../Grid';
 
 import defaultRowRenderer from './defaultRowRenderer';
@@ -263,6 +262,7 @@ export default class Table extends React.PureComponent {
     this._onScroll = this._onScroll.bind(this);
     this._onSectionRendered = this._onSectionRendered.bind(this);
     this._setRef = this._setRef.bind(this);
+    this._setGridElementRef = this._setGridElementRef.bind(this);
   }
 
   forceUpdateGrid() {
@@ -338,8 +338,8 @@ export default class Table extends React.PureComponent {
   }
 
   getScrollbarWidth() {
-    if (this.Grid) {
-      const Grid = findDOMNode(this.Grid);
+    if (this.GridElement) {
+      const Grid = this.GridElement;
       const clientWidth = Grid.clientWidth || 0;
       const offsetWidth = Grid.offsetWidth || 0;
       return offsetWidth - clientWidth;
@@ -390,7 +390,7 @@ export default class Table extends React.PureComponent {
     React.Children.toArray(children).forEach((column, index) => {
       const flexStyles = this._getFlexStyleForColumn(
         column,
-        column.props.style,
+        column.props.style || Column.defaultProps.style,
       );
 
       this._cachedColumnStyles[index] = {
@@ -427,6 +427,7 @@ export default class Table extends React.PureComponent {
 
         <Grid
           {...this.props}
+          elementRef={this._setGridElementRef}
           aria-readonly={null}
           autoContainerWidth
           className={clsx('ReactVirtualized__Table__Grid', gridClassName)}
@@ -734,6 +735,10 @@ export default class Table extends React.PureComponent {
     this.Grid = ref;
   }
 
+  _setGridElementRef(ref) {
+    this.GridElement = ref;
+  }
+
   _setScrollbarWidth() {
     const scrollbarWidth = this.getScrollbarWidth();
 

source/WindowScroller/WindowScroller.js

@@ -1,7 +1,6 @@
 // @flow
 
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import {
   registerScrollListener,
   unregisterScrollListener,
@@ -91,6 +90,7 @@ export default class WindowScroller extends React.PureComponent<Props, State> {
   _positionFromLeft = 0;
   _detectElementResize: DetectElementResize;
   _child: ?Element;
+  _windowScrollerRef: {current: HTMLElement | null} = React.createRef();
 
   state = {
     ...getDimensions(this.props.scrollElement, this.props),
@@ -103,7 +103,7 @@ export default class WindowScroller extends React.PureComponent<Props, State> {
     const {onResize} = this.props;
     const {height, width} = this.state;
 
-    const thisNode = this._child || ReactDOM.findDOMNode(this);
+    const thisNode = this._child || this._windowScrollerRef.current;
     if (thisNode instanceof Element && scrollElement) {
       const offset = getPositionOffset(thisNode, scrollElement);
       this._positionFromTop = offset.top;
@@ -176,15 +176,21 @@ export default class WindowScroller extends React.PureComponent<Props, State> {
     const {children} = this.props;
     const {isScrolling, scrollTop, scrollLeft, height, width} = this.state;
 
-    return children({
-      onChildScroll: this._onChildScroll,
-      registerChild: this._registerChild,
-      height,
-      isScrolling,
-      scrollLeft,
-      scrollTop,
-      width,
-    });
+    return React.createElement(
+      'div',
+      {
+        ref: this._windowScrollerRef,
+      },
+      children({
+        onChildScroll: this._onChildScroll,
+        registerChild: this._registerChild,
+        height,
+        isScrolling,
+        scrollLeft,
+        scrollTop,
+        width,
+      }),
+    );
   }
 
   _registerChild = element => {

yarn.lock

@@ -47,8 +47,8 @@
 
 "@babel/generator@^7.12.13":
   version "7.13.16"
-  resolved "https://registry.nlark.com/@babel/generator/download/@babel/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
-  integrity sha1-C+/ChwMaIB2EzfwXO0azIK5HLRQ=
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.13.16.tgz#0befc287031a201d84cdfc173b46b320ae472d14"
+  integrity sha512-grBBR75UnKOcUWMp8WoDxNsWCFl//XCK6HWTrBQKTr5SV9f5g0pNOjdyzi/DTBv12S9GnYPInIXQBTky7OXEMg==
   dependencies:
     "@babel/types" "^7.13.16"
     jsesc "^2.5.1"
@@ -196,8 +196,8 @@
 
 "@babel/helper-plugin-utils@^7.12.13":
   version "7.13.0"
-  resolved "https://registry.npm.taobao.org/@babel/helper-plugin-utils/download/@babel/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
-  integrity sha1-gGUmzhJa7QM3O8QWqCgyHjpqM68=
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
+  integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
 "@babel/helper-regex@^7.0.0", "@babel/helper-regex@^7.4.4":
   version "7.5.5"
@@ -244,8 +244,8 @@
 
 "@babel/helper-validator-identifier@^7.12.11":
   version "7.12.11"
-  resolved "https://registry.nlark.com/@babel/helper-validator-identifier/download/@babel/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
-  integrity sha1-yaHwIZF9y1zPDU5FPjmQIpgfye0=
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
+  integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
 "@babel/helper-wrap-function@^7.7.0":
   version "7.7.0"
@@ -360,8 +360,8 @@
 
 "@babel/plugin-syntax-flow@^7.12.13":
   version "7.12.13"
-  resolved "https://registry.npm.taobao.org/@babel/plugin-syntax-flow/download/@babel/plugin-syntax-flow-7.12.13.tgz#5df9962503c0a9c918381c929d51d4d6949e7e86"
-  integrity sha1-XfmWJQPAqckYOBySnVHU1pSefoY=
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.12.13.tgz#5df9962503c0a9c918381c929d51d4d6949e7e86"
+  integrity sha512-J/RYxnlSLXZLVR7wTRsozxKT8qbsx1mNKJzXEEjQ0Kjx1ZACcyHgbanNWNCFtc36IzuWhYWPpvJFFoexoOWFmA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.12.13"
 
@@ -491,8 +491,8 @@
 
 "@babel/plugin-transform-flow-comments@^7.12.13":
   version "7.12.13"
-  resolved "https://registry.nlark.com/@babel/plugin-transform-flow-comments/download/@babel/plugin-transform-flow-comments-7.12.13.tgz#b6f0de89ac4955572913f4af82f6b8ddbff38bf1"
-  integrity sha1-tvDeiaxJVVcpE/Svgva43b/zi/E=
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-comments/-/plugin-transform-flow-comments-7.12.13.tgz#b6f0de89ac4955572913f4af82f6b8ddbff38bf1"
+  integrity sha512-o4Z7Mw9KvrfAxBwSr+Ia+E0+LLb6ZzDXQTsJb628ejXuvvNoCDyu3FLBcz2/W8B7q/MOzm6d6pbNM6ur/aegMQ==
   dependencies:
     "@babel/generator" "^7.12.13"
     "@babel/helper-plugin-utils" "^7.12.13"
@@ -848,8 +848,8 @@
 
 "@babel/types@^7.13.16":
   version "7.13.17"
-  resolved "https://registry.nlark.com/@babel/types/download/@babel/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
-  integrity sha1-SAEKEVyfunWItEN91oyUaQErOLQ=
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.13.17.tgz#48010a115c9fba7588b4437dd68c9469012b38b4"
+  integrity sha512-RawydLgxbOPDlTLJNtoIypwdmAy//uQIzlKt2+iBiJaRlVuI6QLUxVAyWGNfOzp8Yu4L4lLIacoCyTNtpb4wiA==
   dependencies:
     "@babel/helper-validator-identifier" "^7.12.11"
     to-fast-properties "^2.0.0"