replace react-resize-detector

Author: T4rk1n

components/dash-core-components/package-lock.json

@@ -57,7 +57,6 @@
     "react-dropzone": "^4.1.2",
     "react-fast-compare": "^3.2.2",
     "react-markdown": "^4.3.1",
-    "react-resize-detector": "^6.7.6",
     "react-select-fast-filter-options": "^0.2.3",
     "react-virtualized-select": "^3.1.3",
     "remark-math": "^3.0.1",
@@ -73,7 +72,6 @@
     "@plotly/dash-component-plugins": "^1.2.3",
     "@plotly/webpack-dash-dynamic-import": "^1.3.0",
     "babel-loader": "^9.2.1",
-    "component-playground": "^3.2.1",
     "copyfiles": "^2.4.1",
     "css-loader": "^6.8.1",
     "es-check": "^7.1.1",
@@ -84,8 +82,6 @@
     "identity-obj-proxy": "^3.0.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
     "react-jsx-parser": "1.21.0",
     "rimraf": "^5.0.5",
     "style-loader": "^3.3.3",
@@ -101,8 +97,8 @@
     "/lib/"
   ],
   "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+    "react": "16 - 19",
+    "react-dom": "16 - 19"
   },
   "browserslist": [
     "last 9 years and not dead"

components/dash-core-components/package.json

@@ -1,7 +1,5 @@
 import lazyLoadMathJax from '../utils/LazyLoader/mathjax';
 import React, {Component} from 'react';
-// /build/withPolyfill for IE11 support - https://github.com/maslianok/react-resize-detector/issues/144
-import ResizeDetector from 'react-resize-detector/build/withPolyfill';
 import {
     equals,
     filter,
@@ -16,6 +14,8 @@ import PropTypes from 'prop-types';
 import {graphPropTypes, graphDefaultProps} from '../components/Graph.react';
 /* global Plotly:true */
 
+import ResizeDetector from '../utils/ResizeDetector';
+
 /**
  * `autosize: true` causes Plotly.js to conform to the parent element size.
  * This is necessary for `dcc.Graph` call to `Plotly.Plots.resize(target)` to do something.
@@ -526,14 +526,7 @@ class PlotlyGraph extends Component {
                 className={className}
                 style={style}
             >
-                <ResizeDetector
-                    handleHeight={true}
-                    handleWidth={true}
-                    refreshMode="debounce"
-                    refreshOptions={{trailing: true}}
-                    refreshRate={50}
-                    onResize={this.graphResize}
-                />
+                <ResizeDetector onResize={this.graphResize} />
                 <div ref={this.gd} style={{height: '100%', width: '100%'}} />
             </div>
         );