diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json
index b03ce9ea74310..c59c90230c586 100644
--- a/packages/react-devtools-shared/package.json
+++ b/packages/react-devtools-shared/package.json
@@ -23,6 +23,7 @@
"local-storage-fallback": "^4.1.1",
"lodash.throttle": "^4.1.1",
"memoize-one": "^3.1.1",
- "react-virtualized-auto-sizer": "^1.0.6"
+ "react-virtualized-auto-sizer": "^1.0.23",
+ "react-window": "^1.8.10"
}
}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/CHANGELOG.md b/packages/react-devtools-shared/src/node_modules/react-window/CHANGELOG.md
deleted file mode 100644
index 7030d4ee8e91c..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/CHANGELOG.md
+++ /dev/null
@@ -1,96 +0,0 @@
-Changelog
-------------
-
-### 1.8.0
-* 🎉 Added new "smart" align option for grid and list scroll-to-item methods ([gaearon](https://github.com/gaearon) - [#209](https://github.com/bvaughn/react-window/pull/209))
-
-### 1.7.2
-* 🐛 Add guards to avoid invalid scroll offsets when `scrollTo()` is called with a negative offset or when `scrollToItem` is called with invalid indices (negative or too large).
-
-### 1.7.1
-* 🐛 Fix SSR regression introduced in 1.7.0 - ([Betree](https://github.com/Betree) - [#185](https://github.com/bvaughn/react-window/pull/185))
-
-### 1.7.0
-* 🎉 Grid `scrollToItem` supports optional `rowIndex` and `columnIndex` params ([jgoz](https://github.com/jgoz) - [#174](https://github.com/bvaughn/react-window/pull/174))
-* DEV mode checks for `WeakSet` support before using it to avoid requiring a polyfill for IE11 - ([jgoz](https://github.com/jgoz) - [#167](https://github.com/bvaughn/react-window/pull/167))
-
-### 1.6.2
-* 🐛 Bugfix for RTL when scrolling back towards the beginning (right) of the list.
-
-### 1.6.1
-* 🐛 Bugfix to account for differences between Chrome and non-Chrome browsers with regard to RTL and "scroll" events.
-
-### 1.6.0
-* 🎉 RTL support added for lists and grids. Special thanks to [davidgarsan](https://github.com/davidgarsan) for his support. - [#156](https://github.com/bvaughn/react-window/pull/156)
-* 🐛 Grid `scrollToItem` methods take scrollbar size into account when aligning items - [#153](https://github.com/bvaughn/react-window/issues/153)
-
-### 1.5.2
-* 🐛 Edge case bug fix for `VariableSizeList` and `VariableSizeGrid` when the number of items decreases while a scroll is in progress. - ([iamsolankiamit](https://github.com/iamsolankiamit) - [#138](https://github.com/bvaughn/react-window/pull/138))
-
-### 1.5.1
-* 🐛 Updated `getDerivedState` Flow annotations to address a warning in a newer version of Flow.
-
-### 1.5.0
-* 🎉 Added advanced memoization helpers methods `areEqual` and `shouldComponentUpdate` for item renderers. - [#114](https://github.com/bvaughn/react-window/issues/114)
-
-### 1.4.0
-* 🎉 List and Grid components now "overscan" (pre-render) in both directions when scrolling is not active. When scrolling is in progress, cells are only pre-rendered in the direction being scrolled. This change has been made in an effort to reduce visible flicker when scrolling starts without adding additional overhead during scroll (which is the most performance sensitive time).
-* 🎉 Grid components now support separate `overscanColumnsCount` and `overscanRowsCount` props. Legacy `overscanCount` prop will continue to work, but with a deprecation warning in DEV mode.
-* 🐛 Replaced `setTimeout` with `requestAnimationFrame` based timer, to avoid starvation issue for `isScrolling` reset. - [#106](https://github.com/bvaughn/react-window/issues/106)
-* 🎉 Renamed List and Grid `innerTagName` and `outerTagName` props to `innerElementType` and `outerElementType` to formalize support for attaching arbitrary props (e.g. test ids) to List and Grid inner and outer DOM elements. Legacy `innerTagName` and `outerTagName` props will continue to work, but with a deprecation warning in DEV mode.
-* 🐛 List re-renders items if `direction` prop changes. - [#104](https://github.com/bvaughn/react-window/issues/104)
-
-### 1.3.1
-* 🎉 Pass `itemData` value to custom `itemKey` callbacks when present - [#90](https://github.com/bvaughn/react-window/issues/90))
-
-### 1.3.0
-* (Skipped)
-
-### 1.2.4
-* 🐛 Added Flow annotations to memoized methods to avoid a Flow warning for newer versions of Flow
-
-### 1.2.3
-* 🐛 Relaxed `children` validation checks. They were too strict and didn't support new React APIs like `memo`.
-
-### 1.2.2
-* 🐛 Improved Flow types for class component item renderers - ([nicholas-l](https://github.com/nicholas-l) - [#77](https://github.com/bvaughn/react-window/pull/77))
-
-### 1.2.1
-* 🎉 Improved Flow types to include optional `itemData` parameter. ([TrySound](https://github.com/TrySound) - [#66](https://github.com/bvaughn/react-window/pull/66))
-* 🐛 `VariableSizeList` and `VariableSizeGrid` no longer call size getter functions with invalid index when item count is zero.
-
-### 1.2.0
-* 🎉 Flow types added to NPM package. ([TrySound](https://github.com/TrySound) - [#40](https://github.com/bvaughn/react-window/pull/40))
-* 🎉 Relaxed grid `scrollTo` method to make `scrollLeft` and `scrollTop` params _optional_ (so you can only update one axis if desired). - [#63](https://github.com/bvaughn/react-window/pull/63))
-* 🐛 Fixed invalid `this` pointer in `VariableSizeGrid` that broke the `resetAfter*` methods - [#58](https://github.com/bvaughn/react-window/pull/58))
-* Upgraded to babel 7 and used shared runtime helpers to reduce package size slightly. ([TrySound](https://github.com/TrySound) - [#48](https://github.com/bvaughn/react-window/pull/48))
-* Remove `overflow:hidden` from inner container ([souporserious](https://github.com/souporserious) - [#56](https://github.com/bvaughn/react-window/pull/56))
-
-### 1.1.2
-* 🐛 Fixed edge case `scrollToItem` bug that caused lists/grids with very few items to have negative scroll offsets.
-
-### 1.1.1
-* 🐛 `FixedSizeGrid` and `FixedSizeList` automatically clear style cache when item size props change.
-
-### 1.1.0
-* 🎉 Use explicit `constructor` and `super` to generate cleaner component code. ([Andarist](https://github.com/Andarist) - [#26](https://github.com/bvaughn/react-window/pull/26))
-* 🎉 Add optional `shouldForceUpdate` param reset-index methods to specify `forceUpdate` behavior. ([nihgwu](https://github.com/nihgwu) - [#32](https://github.com/bvaughn/react-window/pull/32))
-
-### 1.0.3
-* 🐛 Avoid unnecessary scrollbars for lists (e.g. no horizontal scrollbar for a vertical list) unless content requires them.
-
-### 1.0.2
-
-* 🎉 Enable Babel `annotate-pure-calls` option so that classes compiled by "transform-es2015-classes" are annotated with `#__PURE__`. This enables [UglifyJS to remove them if they are not referenced](https://github.com/mishoo/UglifyJS2/pull/1448), improving dead code elimination in application code. ([Andarist](https://github.com/Andarist) - [#20](https://github.com/bvaughn/react-window/pull/20))
-* 🎉 Update "rollup-plugin-peer-deps-external" and use new `includeDependencies` flag so that the "memoize-one" dependency does not get inlined into the Rollup bundle. ([Andarist](https://github.com/Andarist) - [#19](https://github.com/bvaughn/react-window/pull/19))
-* 🎉 Enable [Babel "loose" mode](https://babeljs.io/docs/en/babel-preset-env#loose) to reduce package size (-8%). ([Andarist](https://github.com/Andarist) - [#18](https://github.com/bvaughn/react-window/pull/18))
-
-### 1.0.1
-Updated `README.md` file to remove `@alpha` tag from NPM installation instructions.
-
-# 1.0.0
-Initial release of library. Includes the following components:
-* `FixedSizeGrid`
-* `FixedSizeList`
-* `VariableSizeGrid`
-* `VariableSizeList`
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/LICENSE.md b/packages/react-devtools-shared/src/node_modules/react-window/LICENSE.md
deleted file mode 100644
index 0569d0a7b8b21..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/LICENSE.md
+++ /dev/null
@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2018 Brian Vaughn
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/README.md b/packages/react-devtools-shared/src/node_modules/react-window/README.md
deleted file mode 100644
index 8603c9c5bcc53..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/README.md
+++ /dev/null
@@ -1,88 +0,0 @@
-# react-window
-
-> React components for efficiently rendering large lists and tabular data
-
-[](https://yarnpkg.com/en/package/react-window) [](https://travis-ci.org/bvaughn/react-window) [](LICENSE.md)
-
-## Install
-
-```bash
-# Yarn
-yarn add react-window
-
-# NPM
-npm install --save react-window
-```
-
-## Usage
-
-Learn more at [react-window.now.sh](https://react-window.now.sh/):
-
-## Related libraries
-
-* [`react-virtualized-auto-sizer`](https://npmjs.com/package/react-virtualized-auto-sizer): HOC that grows to fit all of the available space and passes the width and height values to its child.
-* [`react-window-infinite-loader`](https://npmjs.com/package/react-window-infinite-loader): Helps break large data sets down into chunks that can be just-in-time loaded as they are scrolled into view. It can also be used to create infinite loading lists (e.g. Facebook or Twitter).
-
-## Frequently asked questions
-
-### How is `react-window` different from `react-virtualized`?
-I wrote `react-virtualized` several years ago. At the time, I was new to both React and the concept of windowing. Because of this, I made a few API decisions that I later came to regret. One of these was adding too many non-essential features and components. Once you add something to an open source project, removing it is pretty painful for users.
-
-`react-window` is a complete rewrite of `react-virtualized`. I didn't try to solve as many problems or support as many use cases. Instead I focused on making the package **smaller**1 and **faster**. I also put a lot of thought into making the API (and documentation) as beginner-friendly as possible (with the caveat that windowing is still kind of an advanced use case).
-
-If `react-window` provides the functionality your project needs, I would strongly recommend using it instead of `react-virtualized`. However if you need features that only `react-virtualized` provides, you have two options:
-
-1. Use `react-virtualized`. (It's still widely used by a lot of successful projects!)
-2. Create a component that decorates one of the `react-window` primitives and adds the functionality you need. You may even want to release this component to NPM (as its own, standalone package)! 🙂
-
-1 - Adding a `react-virtualized` list to a CRA project increases the (gzipped) build size by ~33.5 KB. Adding a `react-window` list to a CRA project increases the (gzipped) build size by <2 KB.
-
-### Can a list or a grid fill 100% the width or height of a page?
-
-Yes. I recommend using the [`react-virtualized-auto-sizer` package](https://npmjs.com/package/react-virtualized-auto-sizer):
-
-
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/3vnx878jk5).
-
-### Why is my list blank when I scroll?
-
-If your list looks something like this...
-
-
-
-...then you probably forgot to use the `style` parameter! Libraries like react-window work by absolutely positioning the list items (via an inline style), so don't forget to attach it to the DOM element you render!
-
-
-
-### Can I lazy load data for my list?
-
-Yes. I recommend using the [`react-window-infinite-loader` package](https://npmjs.com/package/react-window-infinite-loader):
-
-
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/5wqo7z2np4).
-
-### Can I attach custom properties or event handlers?
-
-Yes, using the `outerElementType` prop.
-
-
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/4zqx79nww0).
-
-### Can I add gutter or padding between items?
-
-Yes, although it requires a bit of inline styling.
-
-
-
-Here's a [Code Sandbox demo](https://codesandbox.io/s/2w8wmlm89p).
-
-### Does this library support "sticky" items?
-
-Yes, although it requires a small amount of user code. Here's a [Code Sandbox demo](https://codesandbox.io/s/0mk3qwpl4l).
-
-## License
-
-MIT © [bvaughn](https://github.com/bvaughn)
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index-dev.umd.js b/packages/react-devtools-shared/src/node_modules/react-window/dist/index-dev.umd.js
deleted file mode 100644
index 96dc2ae17a611..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/dist/index-dev.umd.js
+++ /dev/null
@@ -1,2 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e=e||self).ReactWindow={},e.React)}(this,function(e,t){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t=t?e.call(null):n.id=requestAnimationFrame(o)})};return n}var u=-1;var d=null;function f(e){if(void 0===e&&(e=!1),null===d||e){var t=document.createElement("div"),r=t.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var n=document.createElement("div"),o=n.style;return o.width="100px",o.height="100px",t.appendChild(n),document.body.appendChild(t),t.scrollLeft>0?d="positive-descending":(t.scrollLeft=1,d=0===t.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(t),d}return d}var h=150,p=function(e){var t=e.columnIndex;e.data;return e.rowIndex+":"+t},m=null,v=null,g=null;function w(e){var i,l,d=e.getColumnOffset,m=e.getColumnStartIndexForOffset,v=e.getColumnStopIndexForStartIndex,g=e.getColumnWidth,w=e.getEstimatedTotalHeight,I=e.getEstimatedTotalWidth,M=e.getOffsetForColumnAndAlignment,y=e.getOffsetForRowAndAlignment,x=e.getRowHeight,C=e.getRowOffset,_=e.getRowStartIndexForOffset,b=e.getRowStopIndexForStartIndex,R=e.initInstanceProps,T=e.shouldResetStyleCacheOnItemSizeChange,z=e.validateProps;return l=i=function(e){function i(t){var r;return(r=e.call(this,t)||this)._instanceProps=R(r.props,o(o(r))),r._resetIsScrollingTimeoutId=null,r._outerRef=void 0,r.state={instance:o(o(r)),isScrolling:!1,horizontalScrollDirection:"forward",scrollLeft:"number"==typeof r.props.initialScrollLeft?r.props.initialScrollLeft:0,scrollTop:"number"==typeof r.props.initialScrollTop?r.props.initialScrollTop:0,scrollUpdateWasRequested:!1,verticalScrollDirection:"forward"},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(e,t,n,o,i,a,l,s){return r.props.onItemsRendered({overscanColumnStartIndex:e,overscanColumnStopIndex:t,overscanRowStartIndex:n,overscanRowStopIndex:o,visibleColumnStartIndex:i,visibleColumnStopIndex:a,visibleRowStartIndex:l,visibleRowStopIndex:s})}),r._callOnScroll=void 0,r._callOnScroll=a(function(e,t,n,o,i){return r.props.onScroll({horizontalScrollDirection:n,scrollLeft:e,scrollTop:t,verticalScrollDirection:o,scrollUpdateWasRequested:i})}),r._getItemStyle=void 0,r._getItemStyle=function(e,t){var n,o,i=r.props,a=i.columnWidth,l=i.direction,s=i.rowHeight,c=r._getItemStyleCache(T&&a,T&&l,T&&s),u=e+":"+t;c.hasOwnProperty(u)?n=c[u]:c[u]=((o={position:"absolute"})["rtl"===l?"right":"left"]=d(r.props,t,r._instanceProps),o.top=C(r.props,e,r._instanceProps),o.height=x(r.props,e,r._instanceProps),o.width=g(r.props,t,r._instanceProps),n=o);return n},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(e,t,r){return{}}),r._onScroll=function(e){var t=e.currentTarget,n=t.clientHeight,o=t.clientWidth,i=t.scrollLeft,a=t.scrollTop,l=t.scrollHeight,s=t.scrollWidth;r.setState(function(e){if(e.scrollLeft===i&&e.scrollTop===a)return null;var t=r.props.direction,c=i;if("rtl"===t)switch(f()){case"negative":c=-i;break;case"positive-descending":c=s-o-i}c=Math.max(0,Math.min(c,s-o));var u=Math.max(0,Math.min(a,l-n));return{isScrolling:!0,horizontalScrollDirection:e.scrollLeftc?p:0,g=m>l?p:0;this.scrollTo({scrollLeft:void 0!==n?M(this.props,n,r,f,this._instanceProps,g):f,scrollTop:void 0!==o?y(this.props,o,r,h,this._instanceProps,v):h})},l.componentDidMount=function(){var e=this.props,t=e.initialScrollLeft,r=e.initialScrollTop;if(null!=this._outerRef){var n=this._outerRef;"number"==typeof t&&(n.scrollLeft=t),"number"==typeof r&&(n.scrollTop=r)}this._callPropsCallbacks()},l.componentDidUpdate=function(){var e=this.props.direction,t=this.state,r=t.scrollLeft,n=t.scrollTop;if(t.scrollUpdateWasRequested&&null!=this._outerRef){var o=this._outerRef;if("rtl"===e)switch(f()){case"negative":o.scrollLeft=-r;break;case"positive-ascending":o.scrollLeft=r;break;default:var i=o.clientWidth,a=o.scrollWidth;o.scrollLeft=a-i-r}else o.scrollLeft=Math.max(0,r);o.scrollTop=Math.max(0,n)}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var e=this.props,n=e.children,o=e.className,i=e.columnCount,a=e.direction,l=e.height,s=e.innerRef,c=e.innerElementType,u=e.innerTagName,d=e.itemData,f=e.itemKey,h=void 0===f?p:f,m=e.outerElementType,v=e.outerTagName,g=e.rowCount,S=e.style,M=e.useIsScrolling,y=e.width,x=this.state.isScrolling,C=this._getHorizontalRangeToRender(),_=C[0],b=C[1],R=this._getVerticalRangeToRender(),T=R[0],z=R[1],O=[];if(i>0&&g)for(var P=T;P<=z;P++)for(var W=_;W<=b;W++)O.push(t.createElement(n,{columnIndex:W,data:d,isScrolling:M?x:void 0,key:h({columnIndex:W,data:d,rowIndex:P}),rowIndex:P,style:this._getItemStyle(P,W)}));var E=w(this.props,this._instanceProps),A=I(this.props,this._instanceProps);return t.createElement(m||v||"div",{className:o,onScroll:this._onScroll,ref:this._outerRefSetter,style:r({position:"relative",height:l,width:y,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:a},S)},t.createElement(c||u||"div",{children:O,ref:s,style:{height:E,pointerEvents:x?"none":void 0,width:A}}))},l._callPropsCallbacks=function(){var e=this.props,t=e.columnCount,r=e.onItemsRendered,n=e.onScroll,o=e.rowCount;if("function"==typeof r&&t>0&&o>0){var i=this._getHorizontalRangeToRender(),a=i[0],l=i[1],s=i[2],c=i[3],u=this._getVerticalRangeToRender(),d=u[0],f=u[1],h=u[2],p=u[3];this._callOnItemsRendered(a,l,d,f,s,c,h,p)}if("function"==typeof n){var m=this.state,v=m.horizontalScrollDirection,g=m.scrollLeft,w=m.scrollTop,S=m.scrollUpdateWasRequested,I=m.verticalScrollDirection;this._callOnScroll(g,w,v,I,S)}},l._getHorizontalRangeToRender=function(){var e=this.props,t=e.columnCount,r=e.overscanColumnCount,n=e.overscanColumnsCount,o=e.overscanCount,i=e.rowCount,a=this.state,l=a.horizontalScrollDirection,s=a.isScrolling,c=a.scrollLeft,u=r||n||o||1;if(0===t||0===i)return[0,0,0,0];var d=m(this.props,c,this._instanceProps),f=v(this.props,d,c,this._instanceProps),h=s&&"backward"!==l?1:Math.max(1,u),p=s&&"forward"!==l?1:Math.max(1,u);return[Math.max(0,d-h),Math.max(0,Math.min(t-1,f+p)),d,f]},l._getVerticalRangeToRender=function(){var e=this.props,t=e.columnCount,r=e.overscanCount,n=e.overscanRowCount,o=e.overscanRowsCount,i=e.rowCount,a=this.state,l=a.isScrolling,s=a.verticalScrollDirection,c=a.scrollTop,u=n||o||r||1;if(0===t||0===i)return[0,0,0,0];var d=_(this.props,c,this._instanceProps),f=b(this.props,d,c,this._instanceProps),h=l&&"backward"!==s?1:Math.max(1,u),p=l&&"forward"!==s?1:Math.max(1,u);return[Math.max(0,d-h),Math.max(0,Math.min(i-1,f+p)),d,f]},i}(t.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,useIsScrolling:!1},l}"undefined"!=typeof window&&void 0!==window.WeakSet&&(m=new WeakSet,v=new WeakSet,g=new WeakSet);var S=function(e,t){var r=e.children,n=e.direction,o=e.height,i=e.innerTagName,a=e.outerTagName,l=e.overscanColumnsCount,s=e.overscanCount,c=e.overscanRowsCount,u=e.width,d=t.instance;if("number"==typeof s&&m&&!m.has(d)&&(m.add(d),console.warn("The overscanCount prop has been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")),"number"!=typeof l&&"number"!=typeof c||v&&!v.has(d)&&(v.add(d),console.warn("The overscanColumnsCount and overscanRowsCount props have been deprecated. Please use the overscanColumnCount and overscanRowCount props instead.")),null==i&&null==a||g&&!g.has(d)&&(g.add(d),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead.")),null==r)throw Error('An invalid "children" prop has been specified. Value should be a React component. "'+(null===r?"null":typeof r)+'" was specified.');switch(n){case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". "'+n+'" was specified.')}if("number"!=typeof u)throw Error('An invalid "width" prop has been specified. Grids must specify a number for width. "'+(null===u?"null":typeof u)+'" was specified.');if("number"!=typeof o)throw Error('An invalid "height" prop has been specified. Grids must specify a number for height. "'+(null===o?"null":typeof o)+'" was specified.')},I=function(e,t){var r=e.rowCount,n=t.rowMetadataMap,o=t.estimatedRowHeight,i=t.lastMeasuredRowIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},M=function(e,t){var r=e.columnCount,n=t.columnMetadataMap,o=t.estimatedColumnWidth,i=t.lastMeasuredColumnIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},y=function(e,t,r,n){var o,i,a;if("column"===e?(o=n.columnMetadataMap,i=t.columnWidth,a=n.lastMeasuredColumnIndex):(o=n.rowMetadataMap,i=t.rowHeight,a=n.lastMeasuredRowIndex),r>a){var l=0;if(a>=0){var s=o[a];l=s.offset+s.size}for(var c=a+1;c<=r;c++){var u=i(c);o[c]={offset:l,size:u},l+=u}"column"===e?n.lastMeasuredColumnIndex=r:n.lastMeasuredRowIndex=r}return o[r]},x=function(e,t,r,n){var o,i;return"column"===e?(o=r.columnMetadataMap,i=r.lastMeasuredColumnIndex):(o=r.rowMetadataMap,i=r.lastMeasuredRowIndex),(i>0?o[i].offset:0)>=n?C(e,t,r,i,0,n):_(e,t,r,Math.max(0,i),n)},C=function(e,t,r,n,o,i){for(;o<=n;){var a=o+Math.floor((n-o)/2),l=y(e,t,a,r).offset;if(l===i)return a;li&&(n=a-1)}return o>0?o-1:0},_=function(e,t,r,n,o){for(var i="column"===e?t.columnCount:t.rowCount,a=1;n=d-l&&o<=u+l?"auto":"center"),n){case"start":return u;case"end":return d;case"center":return Math.round(d+(u-d)/2);case"auto":default:return o>=d&&o<=u?o:d>u?d:o0)for(var T=_;T<=b;T++)R.push(t.createElement(n,{data:f,key:p(T,f),index:T,isScrolling:S?M:void 0,style:this._getItemStyle(T)}));var O=d(this.props,this._instanceProps);return t.createElement(v||g||"div",{className:o,onScroll:x,ref:this._outerRefSetter,style:r({position:"relative",height:a,width:I,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:i},w)},t.createElement(s||c||"div",{children:R,ref:l,style:{height:y?"100%":O,pointerEvents:M?"none":void 0,width:y?O:"100%"}}))},l._callPropsCallbacks=function(){if("function"==typeof this.props.onItemsRendered&&this.props.itemCount>0){var e=this._getRangeToRender(),t=e[0],r=e[1],n=e[2],o=e[3];this._callOnItemsRendered(t,r,n,o)}if("function"==typeof this.props.onScroll){var i=this.state,a=i.scrollDirection,l=i.scrollOffset,s=i.scrollUpdateWasRequested;this._callOnScroll(a,l,s)}},l._getRangeToRender=function(){var e=this.props,t=e.itemCount,r=e.overscanCount,n=this.state,o=n.isScrolling,i=n.scrollDirection,a=n.scrollOffset;if(0===t)return[0,0,0,0];var l=m(this.props,a,this._instanceProps),s=v(this.props,l,a,this._instanceProps),c=o&&"backward"!==i?1:Math.max(1,r),u=o&&"forward"!==i?1:Math.max(1,r);return[Math.max(0,l-c),Math.max(0,Math.min(t-1,s+u)),l,s]},i}(t.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},l}"undefined"!=typeof window&&void 0!==window.WeakSet&&(O=new WeakSet,P=new WeakSet);var E=function(e,t){var r=e.children,n=e.direction,o=e.height,i=e.layout,a=e.innerTagName,l=e.outerTagName,s=e.width,c=t.instance;null==a&&null==l||P&&!P.has(c)&&(P.add(c),console.warn("The innerTagName and outerTagName props have been deprecated. Please use the innerElementType and outerElementType props instead."));var u="horizontal"===n||"horizontal"===i;switch(n){case"horizontal":case"vertical":O&&!O.has(c)&&(O.add(c),console.warn('The direction prop should be either "ltr" (default) or "rtl". Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'));break;case"ltr":case"rtl":break;default:throw Error('An invalid "direction" prop has been specified. Value should be either "ltr" or "rtl". "'+n+'" was specified.')}switch(i){case"horizontal":case"vertical":break;default:throw Error('An invalid "layout" prop has been specified. Value should be either "horizontal" or "vertical". "'+i+'" was specified.')}if(null==r)throw Error('An invalid "children" prop has been specified. Value should be a React component. "'+(null===r?"null":typeof r)+'" was specified.');if(u&&"number"!=typeof s)throw Error('An invalid "width" prop has been specified. Horizontal lists must specify a number for width. "'+(null===s?"null":typeof s)+'" was specified.');if(!u&&"number"!=typeof o)throw Error('An invalid "height" prop has been specified. Vertical lists must specify a number for height. "'+(null===o?"null":typeof o)+'" was specified.')},A=function(e,t,r){var n=e.itemSize,o=r.itemMetadataMap,i=r.lastMeasuredIndex;if(t>i){var a=0;if(i>=0){var l=o[i];a=l.offset+l.size}for(var s=i+1;s<=t;s++){var c=n(s);o[s]={offset:a,size:c},a+=c}r.lastMeasuredIndex=t}return o[t]},k=function(e,t,r,n,o){for(;n<=r;){var i=n+Math.floor((r-n)/2),a=A(e,i,t).offset;if(a===o)return i;ao&&(r=i-1)}return n>0?n-1:0},D=function(e,t,r,n){for(var o=e.itemCount,i=1;r=r&&(i=r-1),i>=0){var l=n[i];a=l.offset+l.size}return a+(r-i-1)*o},L=W({getItemOffset:function(e,t,r){return A(e,t,r).offset},getItemSize:function(e,t,r){return r.itemMetadataMap[t].size},getEstimatedTotalSize:F,getOffsetForIndexAndAlignment:function(e,t,r,n,o){var i=e.direction,a=e.height,l=e.layout,s=e.width,c="horizontal"===i||"horizontal"===l?s:a,u=A(e,t,o),d=F(e,o),f=Math.max(0,Math.min(d-c,u.offset)),h=Math.max(0,u.offset-c+u.size);switch("smart"===r&&(r=n>=h-c&&n<=f+c?"auto":"center"),r){case"start":return f;case"end":return h;case"center":return Math.round(h+(f-h)/2);case"auto":default:return n>=h&&n<=f?n:n0?n[o].offset:0)>=r?k(e,t,o,0,r):D(e,t,Math.max(0,o),r)}(e,r,t)},getStopIndexForStartIndex:function(e,t,r,n){for(var o=e.direction,i=e.height,a=e.itemCount,l=e.layout,s=e.width,c="horizontal"===o||"horizontal"===l?s:i,u=A(e,t,n),d=r+c,f=u.offset+u.size,h=t;h=d-s&&n<=u+s?"auto":"center"),r){case"start":return u;case"end":return d;case"center":var f=Math.round(d+(u-d)/2);return fc+Math.floor(s/2)?c:f;case"auto":default:return n>=d&&n<=u?n:d>u?d:n=d-l&&n<=u+l?"auto":"center"),r){case"start":return u;case"end":return d;case"center":var f=Math.round(d+(u-d)/2);return fc+Math.floor(l/2)?c:f;case"auto":default:return n>=d&&n<=u?n:d>u?d:n=h-u&&n<=f+u?"auto":"center"),r){case"start":return f;case"end":return h;case"center":var p=Math.round(h+(f-h)/2);return pd+Math.floor(u/2)?d:p;case"auto":default:return n>=h&&n<=f?n:n=0||(o[r]=e[r]);return o}function q(e,t){for(var r in e)if(!(r in t))return!0;for(var n in t)if(e[n]!==t[n])return!0;return!1}function N(e,t){var r=e.style,n=V(e,["style"]),o=t.style,i=V(t,["style"]);return!q(r,o)&&!q(n,i)}e.VariableSizeGrid=R,e.VariableSizeList=L,e.FixedSizeGrid=H,e.FixedSizeList=U,e.areEqual=N,e.shouldComponentUpdate=function(e,t){return!N(this.props,e)||q(this.state,t)},Object.defineProperty(e,"__esModule",{value:!0})});
-//# sourceMappingURL=index-dev.umd.js.map
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index-prod.umd.js b/packages/react-devtools-shared/src/node_modules/react-window/dist/index-prod.umd.js
deleted file mode 100644
index ca33541ed54f6..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/dist/index-prod.umd.js
+++ /dev/null
@@ -1,2 +0,0 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t=t||self).ReactWindow={},t.React)}(this,function(t,e){"use strict";function r(){return(r=Object.assign||function(t){for(var e=1;e=e?t.call(null):o.id=requestAnimationFrame(n)})};return o}var u=-1;var f=null;function d(t){if(void 0===t&&(t=!1),null===f||t){var e=document.createElement("div"),r=e.style;r.width="50px",r.height="50px",r.overflow="scroll",r.direction="rtl";var o=document.createElement("div"),n=o.style;return n.width="100px",n.height="100px",e.appendChild(o),document.body.appendChild(e),e.scrollLeft>0?f="positive-descending":(e.scrollLeft=1,f=0===e.scrollLeft?"negative":"positive-ascending"),document.body.removeChild(e),f}return f}var h=150,m=function(t){var e=t.columnIndex;t.data;return t.rowIndex+":"+e};function p(t){var i,l,f=t.getColumnOffset,p=t.getColumnStartIndexForOffset,v=t.getColumnStopIndexForStartIndex,S=t.getColumnWidth,I=t.getEstimatedTotalHeight,w=t.getEstimatedTotalWidth,M=t.getOffsetForColumnAndAlignment,x=t.getOffsetForRowAndAlignment,_=t.getRowHeight,C=t.getRowOffset,R=t.getRowStartIndexForOffset,y=t.getRowStopIndexForStartIndex,T=t.initInstanceProps,O=t.shouldResetStyleCacheOnItemSizeChange,z=t.validateProps;return l=i=function(t){function i(e){var r;return(r=t.call(this,e)||this)._instanceProps=T(r.props,n(n(r))),r._resetIsScrollingTimeoutId=null,r._outerRef=void 0,r.state={instance:n(n(r)),isScrolling:!1,horizontalScrollDirection:"forward",scrollLeft:"number"==typeof r.props.initialScrollLeft?r.props.initialScrollLeft:0,scrollTop:"number"==typeof r.props.initialScrollTop?r.props.initialScrollTop:0,scrollUpdateWasRequested:!1,verticalScrollDirection:"forward"},r._callOnItemsRendered=void 0,r._callOnItemsRendered=a(function(t,e,o,n,i,a,l,s){return r.props.onItemsRendered({overscanColumnStartIndex:t,overscanColumnStopIndex:e,overscanRowStartIndex:o,overscanRowStopIndex:n,visibleColumnStartIndex:i,visibleColumnStopIndex:a,visibleRowStartIndex:l,visibleRowStopIndex:s})}),r._callOnScroll=void 0,r._callOnScroll=a(function(t,e,o,n,i){return r.props.onScroll({horizontalScrollDirection:o,scrollLeft:t,scrollTop:e,verticalScrollDirection:n,scrollUpdateWasRequested:i})}),r._getItemStyle=void 0,r._getItemStyle=function(t,e){var o,n,i=r.props,a=i.columnWidth,l=i.direction,s=i.rowHeight,c=r._getItemStyleCache(O&&a,O&&l,O&&s),u=t+":"+e;c.hasOwnProperty(u)?o=c[u]:c[u]=((n={position:"absolute"})["rtl"===l?"right":"left"]=f(r.props,e,r._instanceProps),n.top=C(r.props,t,r._instanceProps),n.height=_(r.props,t,r._instanceProps),n.width=S(r.props,e,r._instanceProps),o=n);return o},r._getItemStyleCache=void 0,r._getItemStyleCache=a(function(t,e,r){return{}}),r._onScroll=function(t){var e=t.currentTarget,o=e.clientHeight,n=e.clientWidth,i=e.scrollLeft,a=e.scrollTop,l=e.scrollHeight,s=e.scrollWidth;r.setState(function(t){if(t.scrollLeft===i&&t.scrollTop===a)return null;var e=r.props.direction,c=i;if("rtl"===e)switch(d()){case"negative":c=-i;break;case"positive-descending":c=s-n-i}c=Math.max(0,Math.min(c,s-n));var u=Math.max(0,Math.min(a,l-o));return{isScrolling:!0,horizontalScrollDirection:t.scrollLeftc?m:0,v=p>l?m:0;this.scrollTo({scrollLeft:void 0!==o?M(this.props,o,r,d,this._instanceProps,v):d,scrollTop:void 0!==n?x(this.props,n,r,h,this._instanceProps,g):h})},l.componentDidMount=function(){var t=this.props,e=t.initialScrollLeft,r=t.initialScrollTop;if(null!=this._outerRef){var o=this._outerRef;"number"==typeof e&&(o.scrollLeft=e),"number"==typeof r&&(o.scrollTop=r)}this._callPropsCallbacks()},l.componentDidUpdate=function(){var t=this.props.direction,e=this.state,r=e.scrollLeft,o=e.scrollTop;if(e.scrollUpdateWasRequested&&null!=this._outerRef){var n=this._outerRef;if("rtl"===t)switch(d()){case"negative":n.scrollLeft=-r;break;case"positive-ascending":n.scrollLeft=r;break;default:var i=n.clientWidth,a=n.scrollWidth;n.scrollLeft=a-i-r}else n.scrollLeft=Math.max(0,r);n.scrollTop=Math.max(0,o)}this._callPropsCallbacks()},l.componentWillUnmount=function(){null!==this._resetIsScrollingTimeoutId&&s(this._resetIsScrollingTimeoutId)},l.render=function(){var t=this.props,o=t.children,n=t.className,i=t.columnCount,a=t.direction,l=t.height,s=t.innerRef,c=t.innerElementType,u=t.innerTagName,f=t.itemData,d=t.itemKey,h=void 0===d?m:d,p=t.outerElementType,g=t.outerTagName,v=t.rowCount,S=t.style,M=t.useIsScrolling,x=t.width,_=this.state.isScrolling,C=this._getHorizontalRangeToRender(),R=C[0],y=C[1],T=this._getVerticalRangeToRender(),O=T[0],z=T[1],b=[];if(i>0&&v)for(var P=O;P<=z;P++)for(var W=R;W<=y;W++)b.push(e.createElement(o,{columnIndex:W,data:f,isScrolling:M?_:void 0,key:h({columnIndex:W,data:f,rowIndex:P}),rowIndex:P,style:this._getItemStyle(P,W)}));var D=I(this.props,this._instanceProps),F=w(this.props,this._instanceProps);return e.createElement(p||g||"div",{className:n,onScroll:this._onScroll,ref:this._outerRefSetter,style:r({position:"relative",height:l,width:x,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:a},S)},e.createElement(c||u||"div",{children:b,ref:s,style:{height:D,pointerEvents:_?"none":void 0,width:F}}))},l._callPropsCallbacks=function(){var t=this.props,e=t.columnCount,r=t.onItemsRendered,o=t.onScroll,n=t.rowCount;if("function"==typeof r&&e>0&&n>0){var i=this._getHorizontalRangeToRender(),a=i[0],l=i[1],s=i[2],c=i[3],u=this._getVerticalRangeToRender(),f=u[0],d=u[1],h=u[2],m=u[3];this._callOnItemsRendered(a,l,f,d,s,c,h,m)}if("function"==typeof o){var p=this.state,g=p.horizontalScrollDirection,v=p.scrollLeft,S=p.scrollTop,I=p.scrollUpdateWasRequested,w=p.verticalScrollDirection;this._callOnScroll(v,S,g,w,I)}},l._getHorizontalRangeToRender=function(){var t=this.props,e=t.columnCount,r=t.overscanColumnCount,o=t.overscanColumnsCount,n=t.overscanCount,i=t.rowCount,a=this.state,l=a.horizontalScrollDirection,s=a.isScrolling,c=a.scrollLeft,u=r||o||n||1;if(0===e||0===i)return[0,0,0,0];var f=p(this.props,c,this._instanceProps),d=v(this.props,f,c,this._instanceProps),h=s&&"backward"!==l?1:Math.max(1,u),m=s&&"forward"!==l?1:Math.max(1,u);return[Math.max(0,f-h),Math.max(0,Math.min(e-1,d+m)),f,d]},l._getVerticalRangeToRender=function(){var t=this.props,e=t.columnCount,r=t.overscanCount,o=t.overscanRowCount,n=t.overscanRowsCount,i=t.rowCount,a=this.state,l=a.isScrolling,s=a.verticalScrollDirection,c=a.scrollTop,u=o||n||r||1;if(0===e||0===i)return[0,0,0,0];var f=R(this.props,c,this._instanceProps),d=y(this.props,f,c,this._instanceProps),h=l&&"backward"!==s?1:Math.max(1,u),m=l&&"forward"!==s?1:Math.max(1,u);return[Math.max(0,f-h),Math.max(0,Math.min(i-1,d+m)),f,d]},i}(e.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,useIsScrolling:!1},l}var g=function(t,e){t.children,t.direction,t.height,t.innerTagName,t.outerTagName,t.overscanColumnsCount,t.overscanCount,t.overscanRowsCount,t.width,e.instance},v=function(t,e){var r=t.rowCount,o=e.rowMetadataMap,n=e.estimatedRowHeight,i=e.lastMeasuredRowIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},S=function(t,e){var r=t.columnCount,o=e.columnMetadataMap,n=e.estimatedColumnWidth,i=e.lastMeasuredColumnIndex,a=0;if(i>=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},I=function(t,e,r,o){var n,i,a;if("column"===t?(n=o.columnMetadataMap,i=e.columnWidth,a=o.lastMeasuredColumnIndex):(n=o.rowMetadataMap,i=e.rowHeight,a=o.lastMeasuredRowIndex),r>a){var l=0;if(a>=0){var s=n[a];l=s.offset+s.size}for(var c=a+1;c<=r;c++){var u=i(c);n[c]={offset:l,size:u},l+=u}"column"===t?o.lastMeasuredColumnIndex=r:o.lastMeasuredRowIndex=r}return n[r]},w=function(t,e,r,o){var n,i;return"column"===t?(n=r.columnMetadataMap,i=r.lastMeasuredColumnIndex):(n=r.rowMetadataMap,i=r.lastMeasuredRowIndex),(i>0?n[i].offset:0)>=o?M(t,e,r,i,0,o):x(t,e,r,Math.max(0,i),o)},M=function(t,e,r,o,n,i){for(;n<=o;){var a=n+Math.floor((o-n)/2),l=I(t,e,a,r).offset;if(l===i)return a;li&&(o=a-1)}return n>0?n-1:0},x=function(t,e,r,o,n){for(var i="column"===t?e.columnCount:e.rowCount,a=1;o=f-l&&n<=u+l?"auto":"center"),o){case"start":return u;case"end":return f;case"center":return Math.round(f+(u-f)/2);case"auto":default:return n>=f&&n<=u?n:f>u?f:n0)for(var z=R;z<=T;z++)O.push(e.createElement(o,{data:d,key:m(z,d),index:z,isScrolling:I?M:void 0,style:this._getItemStyle(z)}));var b=f(this.props,this._instanceProps);return e.createElement(g||v||"div",{className:n,onScroll:_,ref:this._outerRefSetter,style:r({position:"relative",height:a,width:w,overflow:"auto",WebkitOverflowScrolling:"touch",willChange:"transform",direction:i},S)},e.createElement(s||c||"div",{children:O,ref:l,style:{height:x?"100%":b,pointerEvents:M?"none":void 0,width:x?b:"100%"}}))},l._callPropsCallbacks=function(){if("function"==typeof this.props.onItemsRendered&&this.props.itemCount>0){var t=this._getRangeToRender(),e=t[0],r=t[1],o=t[2],n=t[3];this._callOnItemsRendered(e,r,o,n)}if("function"==typeof this.props.onScroll){var i=this.state,a=i.scrollDirection,l=i.scrollOffset,s=i.scrollUpdateWasRequested;this._callOnScroll(a,l,s)}},l._getRangeToRender=function(){var t=this.props,e=t.itemCount,r=t.overscanCount,o=this.state,n=o.isScrolling,i=o.scrollDirection,a=o.scrollOffset;if(0===e)return[0,0,0,0];var l=p(this.props,a,this._instanceProps),s=g(this.props,l,a,this._instanceProps),c=n&&"backward"!==i?1:Math.max(1,r),u=n&&"forward"!==i?1:Math.max(1,r);return[Math.max(0,l-c),Math.max(0,Math.min(e-1,s+u)),l,s]},i}(e.PureComponent),i.defaultProps={direction:"ltr",itemData:void 0,layout:"vertical",overscanCount:2,useIsScrolling:!1},l}var O=function(t,e){t.children,t.direction,t.height,t.layout,t.innerTagName,t.outerTagName,t.width,e.instance},z=function(t,e,r){var o=t.itemSize,n=r.itemMetadataMap,i=r.lastMeasuredIndex;if(e>i){var a=0;if(i>=0){var l=n[i];a=l.offset+l.size}for(var s=i+1;s<=e;s++){var c=o(s);n[s]={offset:a,size:c},a+=c}r.lastMeasuredIndex=e}return n[e]},b=function(t,e,r,o,n){for(;o<=r;){var i=o+Math.floor((r-o)/2),a=z(t,i,e).offset;if(a===n)return i;an&&(r=i-1)}return o>0?o-1:0},P=function(t,e,r,o){for(var n=t.itemCount,i=1;r=r&&(i=r-1),i>=0){var l=o[i];a=l.offset+l.size}return a+(r-i-1)*n},D=T({getItemOffset:function(t,e,r){return z(t,e,r).offset},getItemSize:function(t,e,r){return r.itemMetadataMap[e].size},getEstimatedTotalSize:W,getOffsetForIndexAndAlignment:function(t,e,r,o,n){var i=t.direction,a=t.height,l=t.layout,s=t.width,c="horizontal"===i||"horizontal"===l?s:a,u=z(t,e,n),f=W(t,n),d=Math.max(0,Math.min(f-c,u.offset)),h=Math.max(0,u.offset-c+u.size);switch("smart"===r&&(r=o>=h-c&&o<=d+c?"auto":"center"),r){case"start":return d;case"end":return h;case"center":return Math.round(h+(d-h)/2);case"auto":default:return o>=h&&o<=d?o:o0?o[n].offset:0)>=r?b(t,e,n,0,r):P(t,e,Math.max(0,n),r)}(t,r,e)},getStopIndexForStartIndex:function(t,e,r,o){for(var n=t.direction,i=t.height,a=t.itemCount,l=t.layout,s=t.width,c="horizontal"===n||"horizontal"===l?s:i,u=z(t,e,o),f=r+c,d=u.offset+u.size,h=e;h=f-s&&o<=u+s?"auto":"center"),r){case"start":return u;case"end":return f;case"center":var d=Math.round(f+(u-f)/2);return dc+Math.floor(s/2)?c:d;case"auto":default:return o>=f&&o<=u?o:f>u?f:o=f-l&&o<=u+l?"auto":"center"),r){case"start":return u;case"end":return f;case"center":var d=Math.round(f+(u-f)/2);return dc+Math.floor(l/2)?c:d;case"auto":default:return o>=f&&o<=u?o:f>u?f:o=h-u&&o<=d+u?"auto":"center"),r){case"start":return d;case"end":return h;case"center":var m=Math.round(h+(d-h)/2);return mf+Math.floor(u/2)?f:m;case"auto":default:return o>=h&&o<=d?o:o=0||(n[r]=t[r]);return n}function H(t,e){for(var r in t)if(!(r in e))return!0;for(var o in e)if(t[o]!==e[o])return!0;return!1}function k(t,e){var r=t.style,o=A(t,["style"]),n=e.style,i=A(e,["style"]);return!H(r,n)&&!H(o,i)}t.VariableSizeGrid=C,t.VariableSizeList=D,t.FixedSizeGrid=F,t.FixedSizeList=L,t.areEqual=k,t.shouldComponentUpdate=function(t,e){return!k(this.props,t)||H(this.state,e)},Object.defineProperty(t,"__esModule",{value:!0})});
-//# sourceMappingURL=index-prod.umd.js.map
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js
deleted file mode 100644
index 83875b5ee0193..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js
+++ /dev/null
@@ -1,2079 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
-var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
-var _assertThisInitialized = _interopDefault(require('@babel/runtime/helpers/assertThisInitialized'));
-var memoizeOne = _interopDefault(require('memoize-one'));
-var react = require('react');
-var _objectWithoutPropertiesLoose = _interopDefault(require('@babel/runtime/helpers/objectWithoutPropertiesLoose'));
-
-// Animation frame based implementation of setTimeout.
-// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
-var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
-var now = hasNativePerformanceNow ? function () {
- return performance.now();
-} : function () {
- return Date.now();
-};
-function cancelTimeout(timeoutID) {
- cancelAnimationFrame(timeoutID.id);
-}
-function requestTimeout(callback, delay) {
- var start = now();
-
- function tick() {
- if (now() - start >= delay) {
- callback.call(null);
- } else {
- timeoutID.id = requestAnimationFrame(tick);
- }
- }
-
- var timeoutID = {
- id: requestAnimationFrame(tick)
- };
- return timeoutID;
-}
-
-var size = -1; // This utility copied from "dom-helpers" package.
-
-function getScrollbarSize(recalculate) {
- if (recalculate === void 0) {
- recalculate = false;
- }
-
- if (size === -1 || recalculate) {
- var div = document.createElement('div');
- var style = div.style;
- style.width = '50px';
- style.height = '50px';
- style.overflow = 'scroll';
- document.body.appendChild(div);
- size = div.offsetWidth - div.clientWidth;
- document.body.removeChild(div);
- }
-
- return size;
-}
-var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
-// The safest way to check this is to intentionally set a negative offset,
-// and then verify that the subsequent "scroll" event matches the negative offset.
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
-
-function getRTLOffsetType(recalculate) {
- if (recalculate === void 0) {
- recalculate = false;
- }
-
- if (cachedRTLResult === null || recalculate) {
- var outerDiv = document.createElement('div');
- var outerStyle = outerDiv.style;
- outerStyle.width = '50px';
- outerStyle.height = '50px';
- outerStyle.overflow = 'scroll';
- outerStyle.direction = 'rtl';
- var innerDiv = document.createElement('div');
- var innerStyle = innerDiv.style;
- innerStyle.width = '100px';
- innerStyle.height = '100px';
- outerDiv.appendChild(innerDiv);
- document.body.appendChild(outerDiv);
-
- if (outerDiv.scrollLeft > 0) {
- cachedRTLResult = 'positive-descending';
- } else {
- outerDiv.scrollLeft = 1;
-
- if (outerDiv.scrollLeft === 0) {
- cachedRTLResult = 'negative';
- } else {
- cachedRTLResult = 'positive-ascending';
- }
- }
-
- document.body.removeChild(outerDiv);
- return cachedRTLResult;
- }
-
- return cachedRTLResult;
-}
-
-var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
-
-var defaultItemKey = function defaultItemKey(_ref) {
- var columnIndex = _ref.columnIndex,
- data = _ref.data,
- rowIndex = _ref.rowIndex;
- return rowIndex + ":" + columnIndex;
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
-// This avoids spamming the console every time a render happens.
-
-
-var devWarningsOverscanCount = null;
-var devWarningsOverscanRowsColumnsCount = null;
-var devWarningsTagName = null;
-
-if (process.env.NODE_ENV !== 'production') {
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
- devWarningsOverscanCount =
- /*#__PURE__*/
- new WeakSet();
- devWarningsOverscanRowsColumnsCount =
- /*#__PURE__*/
- new WeakSet();
- devWarningsTagName =
- /*#__PURE__*/
- new WeakSet();
- }
-}
-
-function createGridComponent(_ref2) {
- var _class, _temp;
-
- var getColumnOffset = _ref2.getColumnOffset,
- getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
- getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
- getColumnWidth = _ref2.getColumnWidth,
- getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
- getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
- getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
- getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
- getRowHeight = _ref2.getRowHeight,
- getRowOffset = _ref2.getRowOffset,
- getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
- getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
- initInstanceProps = _ref2.initInstanceProps,
- shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
- validateProps = _ref2.validateProps;
- return _temp = _class =
- /*#__PURE__*/
- function (_PureComponent) {
- _inheritsLoose(Grid, _PureComponent);
-
- // Always use explicit constructor for React components.
- // It produces less code after transpilation. (#26)
- // eslint-disable-next-line no-useless-constructor
- function Grid(props) {
- var _this;
-
- _this = _PureComponent.call(this, props) || this;
- _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
- _this._resetIsScrollingTimeoutId = null;
- _this._outerRef = void 0;
- _this.state = {
- instance: _assertThisInitialized(_assertThisInitialized(_this)),
- isScrolling: false,
- horizontalScrollDirection: 'forward',
- scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
- scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
- scrollUpdateWasRequested: false,
- verticalScrollDirection: 'forward'
- };
- _this._callOnItemsRendered = void 0;
- _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
- return _this.props.onItemsRendered({
- overscanColumnStartIndex: overscanColumnStartIndex,
- overscanColumnStopIndex: overscanColumnStopIndex,
- overscanRowStartIndex: overscanRowStartIndex,
- overscanRowStopIndex: overscanRowStopIndex,
- visibleColumnStartIndex: visibleColumnStartIndex,
- visibleColumnStopIndex: visibleColumnStopIndex,
- visibleRowStartIndex: visibleRowStartIndex,
- visibleRowStopIndex: visibleRowStopIndex
- });
- });
- _this._callOnScroll = void 0;
- _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
- return _this.props.onScroll({
- horizontalScrollDirection: horizontalScrollDirection,
- scrollLeft: scrollLeft,
- scrollTop: scrollTop,
- verticalScrollDirection: verticalScrollDirection,
- scrollUpdateWasRequested: scrollUpdateWasRequested
- });
- });
- _this._getItemStyle = void 0;
-
- _this._getItemStyle = function (rowIndex, columnIndex) {
- var _this$props = _this.props,
- columnWidth = _this$props.columnWidth,
- direction = _this$props.direction,
- rowHeight = _this$props.rowHeight;
-
- var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
-
- var key = rowIndex + ":" + columnIndex;
- var style;
-
- if (itemStyleCache.hasOwnProperty(key)) {
- style = itemStyleCache[key];
- } else {
- var _style;
-
- itemStyleCache[key] = style = (_style = {
- position: 'absolute'
- }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
- }
-
- return style;
- };
-
- _this._getItemStyleCache = void 0;
- _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
- return {};
- });
-
- _this._onScroll = function (event) {
- var _event$currentTarget = event.currentTarget,
- clientHeight = _event$currentTarget.clientHeight,
- clientWidth = _event$currentTarget.clientWidth,
- scrollLeft = _event$currentTarget.scrollLeft,
- scrollTop = _event$currentTarget.scrollTop,
- scrollHeight = _event$currentTarget.scrollHeight,
- scrollWidth = _event$currentTarget.scrollWidth;
-
- _this.setState(function (prevState) {
- if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- }
-
- var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
-
- var calculatedScrollLeft = scrollLeft;
-
- if (direction === 'rtl') {
- switch (getRTLOffsetType()) {
- case 'negative':
- calculatedScrollLeft = -scrollLeft;
- break;
-
- case 'positive-descending':
- calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-
-
- calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
- var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
- return {
- isScrolling: true,
- horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
- scrollLeft: calculatedScrollLeft,
- scrollTop: calculatedScrollTop,
- verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
- scrollUpdateWasRequested: false
- };
- }, _this._resetIsScrollingDebounced);
- };
-
- _this._outerRefSetter = function (ref) {
- var outerRef = _this.props.outerRef;
- _this._outerRef = ref;
-
- if (typeof outerRef === 'function') {
- outerRef(ref);
- } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
- outerRef.current = ref;
- }
- };
-
- _this._resetIsScrollingDebounced = function () {
- if (_this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(_this._resetIsScrollingTimeoutId);
- }
-
- _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
- };
-
- _this._resetIsScrolling = function () {
- _this._resetIsScrollingTimeoutId = null;
-
- _this.setState({
- isScrolling: false
- }, function () {
- // Clear style cache after state update has been committed.
- // This way we don't break pure sCU for items that don't use isScrolling param.
- _this._getItemStyleCache(-1);
- });
- };
-
- return _this;
- }
-
- Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
- validateSharedProps(nextProps, prevState);
- validateProps(nextProps);
- return null;
- };
-
- var _proto = Grid.prototype;
-
- _proto.scrollTo = function scrollTo(_ref3) {
- var scrollLeft = _ref3.scrollLeft,
- scrollTop = _ref3.scrollTop;
-
- if (scrollLeft !== undefined) {
- scrollLeft = Math.max(0, scrollLeft);
- }
-
- if (scrollTop !== undefined) {
- scrollTop = Math.max(0, scrollTop);
- }
-
- this.setState(function (prevState) {
- if (scrollLeft === undefined) {
- scrollLeft = prevState.scrollLeft;
- }
-
- if (scrollTop === undefined) {
- scrollTop = prevState.scrollTop;
- }
-
- if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
- return null;
- }
-
- return {
- horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
- scrollLeft: scrollLeft,
- scrollTop: scrollTop,
- scrollUpdateWasRequested: true,
- verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
- };
- }, this._resetIsScrollingDebounced);
- };
-
- _proto.scrollToItem = function scrollToItem(_ref4) {
- var _ref4$align = _ref4.align,
- align = _ref4$align === void 0 ? 'auto' : _ref4$align,
- columnIndex = _ref4.columnIndex,
- rowIndex = _ref4.rowIndex;
- var _this$props2 = this.props,
- columnCount = _this$props2.columnCount,
- height = _this$props2.height,
- rowCount = _this$props2.rowCount,
- width = _this$props2.width;
- var _this$state = this.state,
- scrollLeft = _this$state.scrollLeft,
- scrollTop = _this$state.scrollTop;
- var scrollbarSize = getScrollbarSize();
-
- if (columnIndex !== undefined) {
- columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
- }
-
- if (rowIndex !== undefined) {
- rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
- }
-
- var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
- var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
- // to ensure it's fully visible.
- // But we only need to account for its size when it's actually visible.
-
- var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
- var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
- this.scrollTo({
- scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
- scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
- });
- };
-
- _proto.componentDidMount = function componentDidMount() {
- var _this$props3 = this.props,
- initialScrollLeft = _this$props3.initialScrollLeft,
- initialScrollTop = _this$props3.initialScrollTop;
-
- if (this._outerRef != null) {
- var outerRef = this._outerRef;
-
- if (typeof initialScrollLeft === 'number') {
- outerRef.scrollLeft = initialScrollLeft;
- }
-
- if (typeof initialScrollTop === 'number') {
- outerRef.scrollTop = initialScrollTop;
- }
- }
-
- this._callPropsCallbacks();
- };
-
- _proto.componentDidUpdate = function componentDidUpdate() {
- var direction = this.props.direction;
- var _this$state2 = this.state,
- scrollLeft = _this$state2.scrollLeft,
- scrollTop = _this$state2.scrollTop,
- scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
-
- if (scrollUpdateWasRequested && this._outerRef != null) {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // So we need to determine which browser behavior we're dealing with, and mimic it.
- var outerRef = this._outerRef;
-
- if (direction === 'rtl') {
- switch (getRTLOffsetType()) {
- case 'negative':
- outerRef.scrollLeft = -scrollLeft;
- break;
-
- case 'positive-ascending':
- outerRef.scrollLeft = scrollLeft;
- break;
-
- default:
- var clientWidth = outerRef.clientWidth,
- scrollWidth = outerRef.scrollWidth;
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- } else {
- outerRef.scrollLeft = Math.max(0, scrollLeft);
- }
-
- outerRef.scrollTop = Math.max(0, scrollTop);
- }
-
- this._callPropsCallbacks();
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- if (this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(this._resetIsScrollingTimeoutId);
- }
- };
-
- _proto.render = function render() {
- var _this$props4 = this.props,
- children = _this$props4.children,
- className = _this$props4.className,
- columnCount = _this$props4.columnCount,
- direction = _this$props4.direction,
- height = _this$props4.height,
- innerRef = _this$props4.innerRef,
- innerElementType = _this$props4.innerElementType,
- innerTagName = _this$props4.innerTagName,
- itemData = _this$props4.itemData,
- _this$props4$itemKey = _this$props4.itemKey,
- itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
- outerElementType = _this$props4.outerElementType,
- outerTagName = _this$props4.outerTagName,
- rowCount = _this$props4.rowCount,
- style = _this$props4.style,
- useIsScrolling = _this$props4.useIsScrolling,
- width = _this$props4.width;
- var isScrolling = this.state.isScrolling;
-
- var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
- columnStartIndex = _this$_getHorizontalR[0],
- columnStopIndex = _this$_getHorizontalR[1];
-
- var _this$_getVerticalRan = this._getVerticalRangeToRender(),
- rowStartIndex = _this$_getVerticalRan[0],
- rowStopIndex = _this$_getVerticalRan[1];
-
- var items = [];
-
- if (columnCount > 0 && rowCount) {
- for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
- for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
- items.push(react.createElement(children, {
- columnIndex: _columnIndex,
- data: itemData,
- isScrolling: useIsScrolling ? isScrolling : undefined,
- key: itemKey({
- columnIndex: _columnIndex,
- data: itemData,
- rowIndex: _rowIndex
- }),
- rowIndex: _rowIndex,
- style: this._getItemStyle(_rowIndex, _columnIndex)
- }));
- }
- }
- } // Read this value AFTER items have been created,
- // So their actual sizes (if variable) are taken into consideration.
-
-
- var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
- var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
- return react.createElement(outerElementType || outerTagName || 'div', {
- className: className,
- onScroll: this._onScroll,
- ref: this._outerRefSetter,
- style: _extends({
- position: 'relative',
- height: height,
- width: width,
- overflow: 'auto',
- WebkitOverflowScrolling: 'touch',
- willChange: 'transform',
- direction: direction
- }, style)
- }, react.createElement(innerElementType || innerTagName || 'div', {
- children: items,
- ref: innerRef,
- style: {
- height: estimatedTotalHeight,
- pointerEvents: isScrolling ? 'none' : undefined,
- width: estimatedTotalWidth
- }
- }));
- };
-
- _proto._callPropsCallbacks = function _callPropsCallbacks() {
- var _this$props5 = this.props,
- columnCount = _this$props5.columnCount,
- onItemsRendered = _this$props5.onItemsRendered,
- onScroll = _this$props5.onScroll,
- rowCount = _this$props5.rowCount;
-
- if (typeof onItemsRendered === 'function') {
- if (columnCount > 0 && rowCount > 0) {
- var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
- _overscanColumnStartIndex = _this$_getHorizontalR2[0],
- _overscanColumnStopIndex = _this$_getHorizontalR2[1],
- _visibleColumnStartIndex = _this$_getHorizontalR2[2],
- _visibleColumnStopIndex = _this$_getHorizontalR2[3];
-
- var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
- _overscanRowStartIndex = _this$_getVerticalRan2[0],
- _overscanRowStopIndex = _this$_getVerticalRan2[1],
- _visibleRowStartIndex = _this$_getVerticalRan2[2],
- _visibleRowStopIndex = _this$_getVerticalRan2[3];
-
- this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
- }
- }
-
- if (typeof onScroll === 'function') {
- var _this$state3 = this.state,
- _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
- _scrollLeft = _this$state3.scrollLeft,
- _scrollTop = _this$state3.scrollTop,
- _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
- _verticalScrollDirection = _this$state3.verticalScrollDirection;
-
- this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
- }
- }; // Lazily create and cache item styles while scrolling,
- // So that pure component sCU will prevent re-renders.
- // We maintain this cache, and pass a style prop rather than index,
- // So that List can clear cached styles and force item re-render if necessary.
-
-
- _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
- var _this$props6 = this.props,
- columnCount = _this$props6.columnCount,
- overscanColumnCount = _this$props6.overscanColumnCount,
- overscanColumnsCount = _this$props6.overscanColumnsCount,
- overscanCount = _this$props6.overscanCount,
- rowCount = _this$props6.rowCount;
- var _this$state4 = this.state,
- horizontalScrollDirection = _this$state4.horizontalScrollDirection,
- isScrolling = _this$state4.isScrolling,
- scrollLeft = _this$state4.scrollLeft;
- var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
-
- if (columnCount === 0 || rowCount === 0) {
- return [0, 0, 0, 0];
- }
-
- var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
- var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
-
- var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
- var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
- };
-
- _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
- var _this$props7 = this.props,
- columnCount = _this$props7.columnCount,
- overscanCount = _this$props7.overscanCount,
- overscanRowCount = _this$props7.overscanRowCount,
- overscanRowsCount = _this$props7.overscanRowsCount,
- rowCount = _this$props7.rowCount;
- var _this$state5 = this.state,
- isScrolling = _this$state5.isScrolling,
- verticalScrollDirection = _this$state5.verticalScrollDirection,
- scrollTop = _this$state5.scrollTop;
- var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
-
- if (columnCount === 0 || rowCount === 0) {
- return [0, 0, 0, 0];
- }
-
- var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
- var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
-
- var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
- var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
- };
-
- return Grid;
- }(react.PureComponent), _class.defaultProps = {
- direction: 'ltr',
- itemData: undefined,
- useIsScrolling: false
- }, _temp;
-}
-
-var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
- var children = _ref5.children,
- direction = _ref5.direction,
- height = _ref5.height,
- innerTagName = _ref5.innerTagName,
- outerTagName = _ref5.outerTagName,
- overscanColumnsCount = _ref5.overscanColumnsCount,
- overscanCount = _ref5.overscanCount,
- overscanRowsCount = _ref5.overscanRowsCount,
- width = _ref5.width;
- var instance = _ref6.instance;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof overscanCount === 'number') {
- if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
- devWarningsOverscanCount.add(instance);
- console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
- }
- }
-
- if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
- if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
- devWarningsOverscanRowsColumnsCount.add(instance);
- console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
- }
- }
-
- if (innerTagName != null || outerTagName != null) {
- if (devWarningsTagName && !devWarningsTagName.has(instance)) {
- devWarningsTagName.add(instance);
- console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
- }
- }
-
- if (children == null) {
- throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
- }
-
- switch (direction) {
- case 'ltr':
- case 'rtl':
- // Valid values
- break;
-
- default:
- throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
- }
-
- if (typeof width !== 'number') {
- throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
- }
-
- if (typeof height !== 'number') {
- throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
- }
- }
-};
-
-var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
-
-var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
- var rowCount = _ref.rowCount;
- var rowMetadataMap = _ref2.rowMetadataMap,
- estimatedRowHeight = _ref2.estimatedRowHeight,
- lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
- var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
-
- if (lastMeasuredRowIndex >= rowCount) {
- lastMeasuredRowIndex = rowCount - 1;
- }
-
- if (lastMeasuredRowIndex >= 0) {
- var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
- }
-
- var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
-};
-
-var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
- var columnCount = _ref3.columnCount;
- var columnMetadataMap = _ref4.columnMetadataMap,
- estimatedColumnWidth = _ref4.estimatedColumnWidth,
- lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
- var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
-
- if (lastMeasuredColumnIndex >= columnCount) {
- lastMeasuredColumnIndex = columnCount - 1;
- }
-
- if (lastMeasuredColumnIndex >= 0) {
- var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
- }
-
- var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
-};
-
-var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
- var itemMetadataMap, itemSize, lastMeasuredIndex;
-
- if (itemType === 'column') {
- itemMetadataMap = instanceProps.columnMetadataMap;
- itemSize = props.columnWidth;
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
- } else {
- itemMetadataMap = instanceProps.rowMetadataMap;
- itemSize = props.rowHeight;
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
- }
-
- if (index > lastMeasuredIndex) {
- var offset = 0;
-
- if (lastMeasuredIndex >= 0) {
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
- offset = itemMetadata.offset + itemMetadata.size;
- }
-
- for (var i = lastMeasuredIndex + 1; i <= index; i++) {
- var size = itemSize(i);
- itemMetadataMap[i] = {
- offset: offset,
- size: size
- };
- offset += size;
- }
-
- if (itemType === 'column') {
- instanceProps.lastMeasuredColumnIndex = index;
- } else {
- instanceProps.lastMeasuredRowIndex = index;
- }
- }
-
- return itemMetadataMap[index];
-};
-
-var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
- var itemMetadataMap, lastMeasuredIndex;
-
- if (itemType === 'column') {
- itemMetadataMap = instanceProps.columnMetadataMap;
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
- } else {
- itemMetadataMap = instanceProps.rowMetadataMap;
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
- }
-
- var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
-
- if (lastMeasuredItemOffset >= offset) {
- // If we've already measured items within this range just use a binary search as it's faster.
- return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
- } else {
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
- // The overall complexity for this approach is O(log n).
- return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
- }
-};
-
-var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
- while (low <= high) {
- var middle = low + Math.floor((high - low) / 2);
- var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
-
- if (currentOffset === offset) {
- return middle;
- } else if (currentOffset < offset) {
- low = middle + 1;
- } else if (currentOffset > offset) {
- high = middle - 1;
- }
- }
-
- if (low > 0) {
- return low - 1;
- } else {
- return 0;
- }
-};
-
-var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
- var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
- var interval = 1;
-
- while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
- index += interval;
- interval *= 2;
- }
-
- return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
-};
-
-var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
- var size = itemType === 'column' ? props.width : props.height;
- var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
- // To ensure it reflects actual measurements instead of just estimates.
-
- var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
- var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
- var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
-
- if (align === 'smart') {
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
-};
-
-var VariableSizeGrid =
-/*#__PURE__*/
-createGridComponent({
- getColumnOffset: function getColumnOffset(props, index, instanceProps) {
- return getItemMetadata('column', props, index, instanceProps).offset;
- },
- getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
- return findNearestItem('column', props, instanceProps, scrollLeft);
- },
- getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
- var columnCount = props.columnCount,
- width = props.width;
- var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
- var maxOffset = scrollLeft + width;
- var offset = itemMetadata.offset + itemMetadata.size;
- var stopIndex = startIndex;
-
- while (stopIndex < columnCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
- getColumnWidth: function getColumnWidth(props, index, instanceProps) {
- return instanceProps.columnMetadataMap[index].size;
- },
- getEstimatedTotalHeight: getEstimatedTotalHeight,
- getEstimatedTotalWidth: getEstimatedTotalWidth,
- getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
- return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
- },
- getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
- return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
- },
- getRowOffset: function getRowOffset(props, index, instanceProps) {
- return getItemMetadata('row', props, index, instanceProps).offset;
- },
- getRowHeight: function getRowHeight(props, index, instanceProps) {
- return instanceProps.rowMetadataMap[index].size;
- },
- getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
- return findNearestItem('row', props, instanceProps, scrollTop);
- },
- getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
- var rowCount = props.rowCount,
- height = props.height;
- var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
- var maxOffset = scrollTop + height;
- var offset = itemMetadata.offset + itemMetadata.size;
- var stopIndex = startIndex;
-
- while (stopIndex < rowCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
- initInstanceProps: function initInstanceProps(props, instance) {
- var _ref5 = props,
- estimatedColumnWidth = _ref5.estimatedColumnWidth,
- estimatedRowHeight = _ref5.estimatedRowHeight;
- var instanceProps = {
- columnMetadataMap: {},
- estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
- estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
- lastMeasuredColumnIndex: -1,
- lastMeasuredRowIndex: -1,
- rowMetadataMap: {}
- };
-
- instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
- if (shouldForceUpdate === void 0) {
- shouldForceUpdate = true;
- }
-
- instance.resetAfterIndices({
- columnIndex: columnIndex,
- shouldForceUpdate: shouldForceUpdate
- });
- };
-
- instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
- if (shouldForceUpdate === void 0) {
- shouldForceUpdate = true;
- }
-
- instance.resetAfterIndices({
- rowIndex: rowIndex,
- shouldForceUpdate: shouldForceUpdate
- });
- };
-
- instance.resetAfterIndices = function (_ref6) {
- var columnIndex = _ref6.columnIndex,
- rowIndex = _ref6.rowIndex,
- _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
- shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
-
- if (typeof columnIndex === 'number') {
- instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
- }
-
- if (typeof rowIndex === 'number') {
- instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
- } // We could potentially optimize further by only evicting styles after this index,
- // But since styles are only cached while scrolling is in progress-
- // It seems an unnecessary optimization.
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
-
-
- instance._getItemStyleCache(-1);
-
- if (shouldForceUpdate) {
- instance.forceUpdate();
- }
- };
-
- return instanceProps;
- },
- shouldResetStyleCacheOnItemSizeChange: false,
- validateProps: function validateProps(_ref7) {
- var columnWidth = _ref7.columnWidth,
- rowHeight = _ref7.rowHeight;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof columnWidth !== 'function') {
- throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
- } else if (typeof rowHeight !== 'function') {
- throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
- }
- }
- }
-});
-
-var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
-
-var defaultItemKey$1 = function defaultItemKey(index, data) {
- return index;
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
-// This avoids spamming the console every time a render happens.
-
-
-var devWarningsDirection = null;
-var devWarningsTagName$1 = null;
-
-if (process.env.NODE_ENV !== 'production') {
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
- devWarningsDirection =
- /*#__PURE__*/
- new WeakSet();
- devWarningsTagName$1 =
- /*#__PURE__*/
- new WeakSet();
- }
-}
-
-function createListComponent(_ref) {
- var _class, _temp;
-
- var getItemOffset = _ref.getItemOffset,
- getEstimatedTotalSize = _ref.getEstimatedTotalSize,
- getItemSize = _ref.getItemSize,
- getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
- getStartIndexForOffset = _ref.getStartIndexForOffset,
- getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
- initInstanceProps = _ref.initInstanceProps,
- shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
- validateProps = _ref.validateProps;
- return _temp = _class =
- /*#__PURE__*/
- function (_PureComponent) {
- _inheritsLoose(List, _PureComponent);
-
- // Always use explicit constructor for React components.
- // It produces less code after transpilation. (#26)
- // eslint-disable-next-line no-useless-constructor
- function List(props) {
- var _this;
-
- _this = _PureComponent.call(this, props) || this;
- _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
- _this._outerRef = void 0;
- _this._resetIsScrollingTimeoutId = null;
- _this.state = {
- instance: _assertThisInitialized(_assertThisInitialized(_this)),
- isScrolling: false,
- scrollDirection: 'forward',
- scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
- scrollUpdateWasRequested: false
- };
- _this._callOnItemsRendered = void 0;
- _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
- return _this.props.onItemsRendered({
- overscanStartIndex: overscanStartIndex,
- overscanStopIndex: overscanStopIndex,
- visibleStartIndex: visibleStartIndex,
- visibleStopIndex: visibleStopIndex
- });
- });
- _this._callOnScroll = void 0;
- _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
- return _this.props.onScroll({
- scrollDirection: scrollDirection,
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: scrollUpdateWasRequested
- });
- });
- _this._getItemStyle = void 0;
-
- _this._getItemStyle = function (index) {
- var _this$props = _this.props,
- direction = _this$props.direction,
- itemSize = _this$props.itemSize,
- layout = _this$props.layout;
-
- var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
-
- var style;
-
- if (itemStyleCache.hasOwnProperty(index)) {
- style = itemStyleCache[index];
- } else {
- var _style;
-
- var _offset = getItemOffset(_this.props, index, _this._instanceProps);
-
- var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- itemStyleCache[index] = style = (_style = {
- position: 'absolute'
- }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
- }
-
- return style;
- };
-
- _this._getItemStyleCache = void 0;
- _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
- return {};
- });
-
- _this._onScrollHorizontal = function (event) {
- var _event$currentTarget = event.currentTarget,
- clientWidth = _event$currentTarget.clientWidth,
- scrollLeft = _event$currentTarget.scrollLeft,
- scrollWidth = _event$currentTarget.scrollWidth;
-
- _this.setState(function (prevState) {
- if (prevState.scrollOffset === scrollLeft) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- }
-
- var direction = _this.props.direction;
- var scrollOffset = scrollLeft;
-
- if (direction === 'rtl') {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
- switch (getRTLOffsetType()) {
- case 'negative':
- scrollOffset = -scrollLeft;
- break;
-
- case 'positive-descending':
- scrollOffset = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-
-
- scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
- return {
- isScrolling: true,
- scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: false
- };
- }, _this._resetIsScrollingDebounced);
- };
-
- _this._onScrollVertical = function (event) {
- var _event$currentTarget2 = event.currentTarget,
- clientHeight = _event$currentTarget2.clientHeight,
- scrollHeight = _event$currentTarget2.scrollHeight,
- scrollTop = _event$currentTarget2.scrollTop;
-
- _this.setState(function (prevState) {
- if (prevState.scrollOffset === scrollTop) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-
-
- var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
- return {
- isScrolling: true,
- scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: false
- };
- }, _this._resetIsScrollingDebounced);
- };
-
- _this._outerRefSetter = function (ref) {
- var outerRef = _this.props.outerRef;
- _this._outerRef = ref;
-
- if (typeof outerRef === 'function') {
- outerRef(ref);
- } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
- outerRef.current = ref;
- }
- };
-
- _this._resetIsScrollingDebounced = function () {
- if (_this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(_this._resetIsScrollingTimeoutId);
- }
-
- _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
- };
-
- _this._resetIsScrolling = function () {
- _this._resetIsScrollingTimeoutId = null;
-
- _this.setState({
- isScrolling: false
- }, function () {
- // Clear style cache after state update has been committed.
- // This way we don't break pure sCU for items that don't use isScrolling param.
- _this._getItemStyleCache(-1, null);
- });
- };
-
- return _this;
- }
-
- List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
- validateSharedProps$1(nextProps, prevState);
- validateProps(nextProps);
- return null;
- };
-
- var _proto = List.prototype;
-
- _proto.scrollTo = function scrollTo(scrollOffset) {
- scrollOffset = Math.max(0, scrollOffset);
- this.setState(function (prevState) {
- if (prevState.scrollOffset === scrollOffset) {
- return null;
- }
-
- return {
- scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: true
- };
- }, this._resetIsScrollingDebounced);
- };
-
- _proto.scrollToItem = function scrollToItem(index, align) {
- if (align === void 0) {
- align = 'auto';
- }
-
- var itemCount = this.props.itemCount;
- var scrollOffset = this.state.scrollOffset;
- index = Math.max(0, Math.min(index, itemCount - 1));
- this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
- };
-
- _proto.componentDidMount = function componentDidMount() {
- var _this$props2 = this.props,
- direction = _this$props2.direction,
- initialScrollOffset = _this$props2.initialScrollOffset,
- layout = _this$props2.layout;
-
- if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
- var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
-
- if (direction === 'horizontal' || layout === 'horizontal') {
- outerRef.scrollLeft = initialScrollOffset;
- } else {
- outerRef.scrollTop = initialScrollOffset;
- }
- }
-
- this._callPropsCallbacks();
- };
-
- _proto.componentDidUpdate = function componentDidUpdate() {
- var _this$props3 = this.props,
- direction = _this$props3.direction,
- layout = _this$props3.layout;
- var _this$state = this.state,
- scrollOffset = _this$state.scrollOffset,
- scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
-
- if (scrollUpdateWasRequested && this._outerRef != null) {
- var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
-
- if (direction === 'horizontal' || layout === 'horizontal') {
- if (direction === 'rtl') {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // So we need to determine which browser behavior we're dealing with, and mimic it.
- switch (getRTLOffsetType()) {
- case 'negative':
- outerRef.scrollLeft = -scrollOffset;
- break;
-
- case 'positive-ascending':
- outerRef.scrollLeft = scrollOffset;
- break;
-
- default:
- var clientWidth = outerRef.clientWidth,
- scrollWidth = outerRef.scrollWidth;
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
- break;
- }
- } else {
- outerRef.scrollLeft = scrollOffset;
- }
- } else {
- outerRef.scrollTop = scrollOffset;
- }
- }
-
- this._callPropsCallbacks();
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- if (this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(this._resetIsScrollingTimeoutId);
- }
- };
-
- _proto.render = function render() {
- var _this$props4 = this.props,
- children = _this$props4.children,
- className = _this$props4.className,
- direction = _this$props4.direction,
- height = _this$props4.height,
- innerRef = _this$props4.innerRef,
- innerElementType = _this$props4.innerElementType,
- innerTagName = _this$props4.innerTagName,
- itemCount = _this$props4.itemCount,
- itemData = _this$props4.itemData,
- _this$props4$itemKey = _this$props4.itemKey,
- itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
- layout = _this$props4.layout,
- outerElementType = _this$props4.outerElementType,
- outerTagName = _this$props4.outerTagName,
- style = _this$props4.style,
- useIsScrolling = _this$props4.useIsScrolling,
- width = _this$props4.width;
- var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
-
- var _this$_getRangeToRend = this._getRangeToRender(),
- startIndex = _this$_getRangeToRend[0],
- stopIndex = _this$_getRangeToRend[1];
-
- var items = [];
-
- if (itemCount > 0) {
- for (var _index = startIndex; _index <= stopIndex; _index++) {
- items.push(react.createElement(children, {
- data: itemData,
- key: itemKey(_index, itemData),
- index: _index,
- isScrolling: useIsScrolling ? isScrolling : undefined,
- style: this._getItemStyle(_index)
- }));
- }
- } // Read this value AFTER items have been created,
- // So their actual sizes (if variable) are taken into consideration.
-
-
- var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
- return react.createElement(outerElementType || outerTagName || 'div', {
- className: className,
- onScroll: onScroll,
- ref: this._outerRefSetter,
- style: _extends({
- position: 'relative',
- height: height,
- width: width,
- overflow: 'auto',
- WebkitOverflowScrolling: 'touch',
- willChange: 'transform',
- direction: direction
- }, style)
- }, react.createElement(innerElementType || innerTagName || 'div', {
- children: items,
- ref: innerRef,
- style: {
- height: isHorizontal ? '100%' : estimatedTotalSize,
- pointerEvents: isScrolling ? 'none' : undefined,
- width: isHorizontal ? estimatedTotalSize : '100%'
- }
- }));
- };
-
- _proto._callPropsCallbacks = function _callPropsCallbacks() {
- if (typeof this.props.onItemsRendered === 'function') {
- var itemCount = this.props.itemCount;
-
- if (itemCount > 0) {
- var _this$_getRangeToRend2 = this._getRangeToRender(),
- _overscanStartIndex = _this$_getRangeToRend2[0],
- _overscanStopIndex = _this$_getRangeToRend2[1],
- _visibleStartIndex = _this$_getRangeToRend2[2],
- _visibleStopIndex = _this$_getRangeToRend2[3];
-
- this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
- }
- }
-
- if (typeof this.props.onScroll === 'function') {
- var _this$state2 = this.state,
- _scrollDirection = _this$state2.scrollDirection,
- _scrollOffset = _this$state2.scrollOffset,
- _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
-
- this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
- }
- }; // Lazily create and cache item styles while scrolling,
- // So that pure component sCU will prevent re-renders.
- // We maintain this cache, and pass a style prop rather than index,
- // So that List can clear cached styles and force item re-render if necessary.
-
-
- _proto._getRangeToRender = function _getRangeToRender() {
- var _this$props5 = this.props,
- itemCount = _this$props5.itemCount,
- overscanCount = _this$props5.overscanCount;
- var _this$state3 = this.state,
- isScrolling = _this$state3.isScrolling,
- scrollDirection = _this$state3.scrollDirection,
- scrollOffset = _this$state3.scrollOffset;
-
- if (itemCount === 0) {
- return [0, 0, 0, 0];
- }
-
- var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
- var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
-
- var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
- var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
- };
-
- return List;
- }(react.PureComponent), _class.defaultProps = {
- direction: 'ltr',
- itemData: undefined,
- layout: 'vertical',
- overscanCount: 2,
- useIsScrolling: false
- }, _temp;
-} // NOTE: I considered further wrapping individual items with a pure ListItem component.
-// This would avoid ever calling the render function for the same index more than once,
-// But it would also add the overhead of a lot of components/fibers.
-// I assume people already do this (render function returning a class component),
-// So my doing it would just unnecessarily double the wrappers.
-
-var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
- var children = _ref2.children,
- direction = _ref2.direction,
- height = _ref2.height,
- layout = _ref2.layout,
- innerTagName = _ref2.innerTagName,
- outerTagName = _ref2.outerTagName,
- width = _ref2.width;
- var instance = _ref3.instance;
-
- if (process.env.NODE_ENV !== 'production') {
- if (innerTagName != null || outerTagName != null) {
- if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
- devWarningsTagName$1.add(instance);
- console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
- }
- } // TODO Deprecate direction "horizontal"
-
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-
- switch (direction) {
- case 'horizontal':
- case 'vertical':
- if (devWarningsDirection && !devWarningsDirection.has(instance)) {
- devWarningsDirection.add(instance);
- console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
- }
-
- break;
-
- case 'ltr':
- case 'rtl':
- // Valid values
- break;
-
- default:
- throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
- }
-
- switch (layout) {
- case 'horizontal':
- case 'vertical':
- // Valid values
- break;
-
- default:
- throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
- }
-
- if (children == null) {
- throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
- }
-
- if (isHorizontal && typeof width !== 'number') {
- throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
- } else if (!isHorizontal && typeof height !== 'number') {
- throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
- }
- }
-};
-
-var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
-
-var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
- var _ref = props,
- itemSize = _ref.itemSize;
- var itemMetadataMap = instanceProps.itemMetadataMap,
- lastMeasuredIndex = instanceProps.lastMeasuredIndex;
-
- if (index > lastMeasuredIndex) {
- var offset = 0;
-
- if (lastMeasuredIndex >= 0) {
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
- offset = itemMetadata.offset + itemMetadata.size;
- }
-
- for (var i = lastMeasuredIndex + 1; i <= index; i++) {
- var size = itemSize(i);
- itemMetadataMap[i] = {
- offset: offset,
- size: size
- };
- offset += size;
- }
-
- instanceProps.lastMeasuredIndex = index;
- }
-
- return itemMetadataMap[index];
-};
-
-var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
- var itemMetadataMap = instanceProps.itemMetadataMap,
- lastMeasuredIndex = instanceProps.lastMeasuredIndex;
- var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
-
- if (lastMeasuredItemOffset >= offset) {
- // If we've already measured items within this range just use a binary search as it's faster.
- return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
- } else {
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
- // The overall complexity for this approach is O(log n).
- return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
- }
-};
-
-var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
- while (low <= high) {
- var middle = low + Math.floor((high - low) / 2);
- var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
-
- if (currentOffset === offset) {
- return middle;
- } else if (currentOffset < offset) {
- low = middle + 1;
- } else if (currentOffset > offset) {
- high = middle - 1;
- }
- }
-
- if (low > 0) {
- return low - 1;
- } else {
- return 0;
- }
-};
-
-var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
- var itemCount = props.itemCount;
- var interval = 1;
-
- while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
- index += interval;
- interval *= 2;
- }
-
- return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
-};
-
-var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
- var itemCount = _ref2.itemCount;
- var itemMetadataMap = _ref3.itemMetadataMap,
- estimatedItemSize = _ref3.estimatedItemSize,
- lastMeasuredIndex = _ref3.lastMeasuredIndex;
- var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
-
- if (lastMeasuredIndex >= itemCount) {
- lastMeasuredIndex = itemCount - 1;
- }
-
- if (lastMeasuredIndex >= 0) {
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
- totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
- }
-
- var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
- return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
-};
-
-var VariableSizeList =
-/*#__PURE__*/
-createListComponent({
- getItemOffset: function getItemOffset(props, index, instanceProps) {
- return getItemMetadata$1(props, index, instanceProps).offset;
- },
- getItemSize: function getItemSize(props, index, instanceProps) {
- return instanceProps.itemMetadataMap[index].size;
- },
- getEstimatedTotalSize: getEstimatedTotalSize,
- getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
- var direction = props.direction,
- height = props.height,
- layout = props.layout,
- width = props.width; // TODO Deprecate direction "horizontal"
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var size = isHorizontal ? width : height;
- var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
- // To ensure it reflects actual measurements instead of just estimates.
-
- var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
- var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
- var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
-
- if (align === 'smart') {
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
- },
- getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
- return findNearestItem$1(props, instanceProps, offset);
- },
- getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
- var direction = props.direction,
- height = props.height,
- itemCount = props.itemCount,
- layout = props.layout,
- width = props.width; // TODO Deprecate direction "horizontal"
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var size = isHorizontal ? width : height;
- var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
- var maxOffset = scrollOffset + size;
- var offset = itemMetadata.offset + itemMetadata.size;
- var stopIndex = startIndex;
-
- while (stopIndex < itemCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
- initInstanceProps: function initInstanceProps(props, instance) {
- var _ref4 = props,
- estimatedItemSize = _ref4.estimatedItemSize;
- var instanceProps = {
- itemMetadataMap: {},
- estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
- lastMeasuredIndex: -1
- };
-
- instance.resetAfterIndex = function (index, shouldForceUpdate) {
- if (shouldForceUpdate === void 0) {
- shouldForceUpdate = true;
- }
-
- instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
- // But since styles are only cached while scrolling is in progress-
- // It seems an unnecessary optimization.
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
-
- instance._getItemStyleCache(-1);
-
- if (shouldForceUpdate) {
- instance.forceUpdate();
- }
- };
-
- return instanceProps;
- },
- shouldResetStyleCacheOnItemSizeChange: false,
- validateProps: function validateProps(_ref5) {
- var itemSize = _ref5.itemSize;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof itemSize !== 'function') {
- throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
- }
- }
- }
-});
-
-var FixedSizeGrid =
-/*#__PURE__*/
-createGridComponent({
- getColumnOffset: function getColumnOffset(_ref, index) {
- var columnWidth = _ref.columnWidth;
- return index * columnWidth;
- },
- getColumnWidth: function getColumnWidth(_ref2, index) {
- var columnWidth = _ref2.columnWidth;
- return columnWidth;
- },
- getRowOffset: function getRowOffset(_ref3, index) {
- var rowHeight = _ref3.rowHeight;
- return index * rowHeight;
- },
- getRowHeight: function getRowHeight(_ref4, index) {
- var rowHeight = _ref4.rowHeight;
- return rowHeight;
- },
- getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
- var rowCount = _ref5.rowCount,
- rowHeight = _ref5.rowHeight;
- return rowHeight * rowCount;
- },
- getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
- var columnCount = _ref6.columnCount,
- columnWidth = _ref6.columnWidth;
- return columnWidth * columnCount;
- },
- getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
- var columnCount = _ref7.columnCount,
- columnWidth = _ref7.columnWidth,
- width = _ref7.width;
- var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
- var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
- var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
-
- if (align === 'smart') {
- if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- if (middleOffset < Math.ceil(width / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
- return lastColumnOffset; // near the end
- } else {
- return middleOffset;
- }
-
- case 'auto':
- default:
- if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
- return scrollLeft;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollLeft < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
- },
- getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
- var rowHeight = _ref8.rowHeight,
- height = _ref8.height,
- rowCount = _ref8.rowCount;
- var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
- var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
- var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
-
- if (align === 'smart') {
- if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- if (middleOffset < Math.ceil(height / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
- return lastRowOffset; // near the end
- } else {
- return middleOffset;
- }
-
- case 'auto':
- default:
- if (scrollTop >= minOffset && scrollTop <= maxOffset) {
- return scrollTop;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollTop < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
- },
- getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
- var columnWidth = _ref9.columnWidth,
- columnCount = _ref9.columnCount;
- return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
- },
- getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
- var columnWidth = _ref10.columnWidth,
- columnCount = _ref10.columnCount,
- width = _ref10.width;
- var left = startIndex * columnWidth;
- var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
- return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
- ));
- },
- getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
- var rowHeight = _ref11.rowHeight,
- rowCount = _ref11.rowCount;
- return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
- },
- getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
- var rowHeight = _ref12.rowHeight,
- rowCount = _ref12.rowCount,
- height = _ref12.height;
- var top = startIndex * rowHeight;
- var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
- return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
- ));
- },
- initInstanceProps: function initInstanceProps(props) {// Noop
- },
- shouldResetStyleCacheOnItemSizeChange: true,
- validateProps: function validateProps(_ref13) {
- var columnWidth = _ref13.columnWidth,
- rowHeight = _ref13.rowHeight;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof columnWidth !== 'number') {
- throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
- }
-
- if (typeof rowHeight !== 'number') {
- throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
- }
- }
- }
-});
-
-var FixedSizeList =
-/*#__PURE__*/
-createListComponent({
- getItemOffset: function getItemOffset(_ref, index) {
- var itemSize = _ref.itemSize;
- return index * itemSize;
- },
- getItemSize: function getItemSize(_ref2, index) {
- var itemSize = _ref2.itemSize;
- return itemSize;
- },
- getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
- var itemCount = _ref3.itemCount,
- itemSize = _ref3.itemSize;
- return itemSize * itemCount;
- },
- getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
- var direction = _ref4.direction,
- height = _ref4.height,
- itemCount = _ref4.itemCount,
- itemSize = _ref4.itemSize,
- layout = _ref4.layout,
- width = _ref4.width;
- // TODO Deprecate direction "horizontal"
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var size = isHorizontal ? width : height;
- var lastItemOffset = Math.max(0, itemCount * itemSize - size);
- var maxOffset = Math.min(lastItemOffset, index * itemSize);
- var minOffset = Math.max(0, index * itemSize - size + itemSize);
-
- if (align === 'smart') {
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- {
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- if (middleOffset < Math.ceil(size / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
- return lastItemOffset; // near the end
- } else {
- return middleOffset;
- }
- }
-
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
- },
- getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
- var itemCount = _ref5.itemCount,
- itemSize = _ref5.itemSize;
- return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
- },
- getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
- var direction = _ref6.direction,
- height = _ref6.height,
- itemCount = _ref6.itemCount,
- itemSize = _ref6.itemSize,
- layout = _ref6.layout,
- width = _ref6.width;
- // TODO Deprecate direction "horizontal"
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var offset = startIndex * itemSize;
- var size = isHorizontal ? width : height;
- var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
- return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
- ));
- },
- initInstanceProps: function initInstanceProps(props) {// Noop
- },
- shouldResetStyleCacheOnItemSizeChange: true,
- validateProps: function validateProps(_ref7) {
- var itemSize = _ref7.itemSize;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof itemSize !== 'number') {
- throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
- }
- }
- }
-});
-
-// Pulled from react-compat
-// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
-function shallowDiffers(prev, next) {
- for (var attribute in prev) {
- if (!(attribute in next)) {
- return true;
- }
- }
-
- for (var _attribute in next) {
- if (prev[_attribute] !== next[_attribute]) {
- return true;
- }
- }
-
- return false;
-}
-
-// It knows to compare individual style props and ignore the wrapper object.
-// See https://reactjs.org/docs/react-api.html#reactmemo
-
-function areEqual(prevProps, nextProps) {
- var prevStyle = prevProps.style,
- prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
-
- var nextStyle = nextProps.style,
- nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
-
- return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
-}
-
-// It knows to compare individual style props and ignore the wrapper object.
-// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
-
-function shouldComponentUpdate(nextProps, nextState) {
- return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
-}
-
-exports.VariableSizeGrid = VariableSizeGrid;
-exports.VariableSizeList = VariableSizeList;
-exports.FixedSizeGrid = FixedSizeGrid;
-exports.FixedSizeList = FixedSizeList;
-exports.areEqual = areEqual;
-exports.shouldComponentUpdate = shouldComponentUpdate;
-//# sourceMappingURL=index.cjs.js.map
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js.flow b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js.flow
deleted file mode 100644
index 6a6528bbe5384..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.cjs.js.flow
+++ /dev/null
@@ -1,3 +0,0 @@
-// @flow
-
-export * from '../src';
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js
deleted file mode 100644
index fed3a77c2cdce..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js
+++ /dev/null
@@ -1,2078 +0,0 @@
-import _extends from '@babel/runtime/helpers/esm/extends';
-import _inheritsLoose from '@babel/runtime/helpers/esm/inheritsLoose';
-import _assertThisInitialized from '@babel/runtime/helpers/esm/assertThisInitialized';
-import memoizeOne from 'memoize-one';
-import { createElement, PureComponent } from 'react';
-import { flushSync } from 'react-dom';
-import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/esm/objectWithoutPropertiesLoose';
-
-// Animation frame based implementation of setTimeout.
-// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
-var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
-var now = hasNativePerformanceNow ? function () {
- return performance.now();
-} : function () {
- return Date.now();
-};
-function cancelTimeout(timeoutID) {
- cancelAnimationFrame(timeoutID.id);
-}
-function requestTimeout(callback, delay) {
- var start = now();
-
- function tick() {
- if (now() - start >= delay) {
- callback.call(null);
- } else {
- timeoutID.id = requestAnimationFrame(tick);
- }
- }
-
- var timeoutID = {
- id: requestAnimationFrame(tick)
- };
- return timeoutID;
-}
-
-var size = -1; // This utility copied from "dom-helpers" package.
-
-function getScrollbarSize(recalculate) {
- if (recalculate === void 0) {
- recalculate = false;
- }
-
- if (size === -1 || recalculate) {
- var div = document.createElement('div');
- var style = div.style;
- style.width = '50px';
- style.height = '50px';
- style.overflow = 'scroll';
- document.body.appendChild(div);
- size = div.offsetWidth - div.clientWidth;
- document.body.removeChild(div);
- }
-
- return size;
-}
-var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
-// The safest way to check this is to intentionally set a negative offset,
-// and then verify that the subsequent "scroll" event matches the negative offset.
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
-
-function getRTLOffsetType(recalculate) {
- if (recalculate === void 0) {
- recalculate = false;
- }
-
- if (cachedRTLResult === null || recalculate) {
- var outerDiv = document.createElement('div');
- var outerStyle = outerDiv.style;
- outerStyle.width = '50px';
- outerStyle.height = '50px';
- outerStyle.overflow = 'scroll';
- outerStyle.direction = 'rtl';
- var innerDiv = document.createElement('div');
- var innerStyle = innerDiv.style;
- innerStyle.width = '100px';
- innerStyle.height = '100px';
- outerDiv.appendChild(innerDiv);
- document.body.appendChild(outerDiv);
-
- if (outerDiv.scrollLeft > 0) {
- cachedRTLResult = 'positive-descending';
- } else {
- outerDiv.scrollLeft = 1;
-
- if (outerDiv.scrollLeft === 0) {
- cachedRTLResult = 'negative';
- } else {
- cachedRTLResult = 'positive-ascending';
- }
- }
-
- document.body.removeChild(outerDiv);
- return cachedRTLResult;
- }
-
- return cachedRTLResult;
-}
-
-var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
-
-var defaultItemKey = function defaultItemKey(_ref) {
- var columnIndex = _ref.columnIndex,
- data = _ref.data,
- rowIndex = _ref.rowIndex;
- return rowIndex + ":" + columnIndex;
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
-// This avoids spamming the console every time a render happens.
-
-
-var devWarningsOverscanCount = null;
-var devWarningsOverscanRowsColumnsCount = null;
-var devWarningsTagName = null;
-
-if (process.env.NODE_ENV !== 'production') {
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
- devWarningsOverscanCount =
- /*#__PURE__*/
- new WeakSet();
- devWarningsOverscanRowsColumnsCount =
- /*#__PURE__*/
- new WeakSet();
- devWarningsTagName =
- /*#__PURE__*/
- new WeakSet();
- }
-}
-
-function createGridComponent(_ref2) {
- var _class, _temp;
-
- var getColumnOffset = _ref2.getColumnOffset,
- getColumnStartIndexForOffset = _ref2.getColumnStartIndexForOffset,
- getColumnStopIndexForStartIndex = _ref2.getColumnStopIndexForStartIndex,
- getColumnWidth = _ref2.getColumnWidth,
- getEstimatedTotalHeight = _ref2.getEstimatedTotalHeight,
- getEstimatedTotalWidth = _ref2.getEstimatedTotalWidth,
- getOffsetForColumnAndAlignment = _ref2.getOffsetForColumnAndAlignment,
- getOffsetForRowAndAlignment = _ref2.getOffsetForRowAndAlignment,
- getRowHeight = _ref2.getRowHeight,
- getRowOffset = _ref2.getRowOffset,
- getRowStartIndexForOffset = _ref2.getRowStartIndexForOffset,
- getRowStopIndexForStartIndex = _ref2.getRowStopIndexForStartIndex,
- initInstanceProps = _ref2.initInstanceProps,
- shouldResetStyleCacheOnItemSizeChange = _ref2.shouldResetStyleCacheOnItemSizeChange,
- validateProps = _ref2.validateProps;
- return _temp = _class =
- /*#__PURE__*/
- function (_PureComponent) {
- _inheritsLoose(Grid, _PureComponent);
-
- // Always use explicit constructor for React components.
- // It produces less code after transpilation. (#26)
- // eslint-disable-next-line no-useless-constructor
- function Grid(props) {
- var _this;
-
- _this = _PureComponent.call(this, props) || this;
- _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
- _this._resetIsScrollingTimeoutId = null;
- _this._outerRef = void 0;
- _this.state = {
- instance: _assertThisInitialized(_assertThisInitialized(_this)),
- isScrolling: false,
- horizontalScrollDirection: 'forward',
- scrollLeft: typeof _this.props.initialScrollLeft === 'number' ? _this.props.initialScrollLeft : 0,
- scrollTop: typeof _this.props.initialScrollTop === 'number' ? _this.props.initialScrollTop : 0,
- scrollUpdateWasRequested: false,
- verticalScrollDirection: 'forward'
- };
- _this._callOnItemsRendered = void 0;
- _this._callOnItemsRendered = memoizeOne(function (overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) {
- return _this.props.onItemsRendered({
- overscanColumnStartIndex: overscanColumnStartIndex,
- overscanColumnStopIndex: overscanColumnStopIndex,
- overscanRowStartIndex: overscanRowStartIndex,
- overscanRowStopIndex: overscanRowStopIndex,
- visibleColumnStartIndex: visibleColumnStartIndex,
- visibleColumnStopIndex: visibleColumnStopIndex,
- visibleRowStartIndex: visibleRowStartIndex,
- visibleRowStopIndex: visibleRowStopIndex
- });
- });
- _this._callOnScroll = void 0;
- _this._callOnScroll = memoizeOne(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
- return _this.props.onScroll({
- horizontalScrollDirection: horizontalScrollDirection,
- scrollLeft: scrollLeft,
- scrollTop: scrollTop,
- verticalScrollDirection: verticalScrollDirection,
- scrollUpdateWasRequested: scrollUpdateWasRequested
- });
- });
- _this._getItemStyle = void 0;
-
- _this._getItemStyle = function (rowIndex, columnIndex) {
- var _this$props = _this.props,
- columnWidth = _this$props.columnWidth,
- direction = _this$props.direction,
- rowHeight = _this$props.rowHeight;
-
- var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
-
- var key = rowIndex + ":" + columnIndex;
- var style;
-
- if (itemStyleCache.hasOwnProperty(key)) {
- style = itemStyleCache[key];
- } else {
- var _style;
-
- itemStyleCache[key] = style = (_style = {
- position: 'absolute'
- }, _style[direction === 'rtl' ? 'right' : 'left'] = getColumnOffset(_this.props, columnIndex, _this._instanceProps), _style.top = getRowOffset(_this.props, rowIndex, _this._instanceProps), _style.height = getRowHeight(_this.props, rowIndex, _this._instanceProps), _style.width = getColumnWidth(_this.props, columnIndex, _this._instanceProps), _style);
- }
-
- return style;
- };
-
- _this._getItemStyleCache = void 0;
- _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
- return {};
- });
-
- _this._onScroll = function (event) {
- var _event$currentTarget = event.currentTarget,
- clientHeight = _event$currentTarget.clientHeight,
- clientWidth = _event$currentTarget.clientWidth,
- scrollLeft = _event$currentTarget.scrollLeft,
- scrollTop = _event$currentTarget.scrollTop,
- scrollHeight = _event$currentTarget.scrollHeight,
- scrollWidth = _event$currentTarget.scrollWidth;
-
- // Force flush sync for scroll updates to reduce visual checkerboarding.
- flushSync(() => {
- _this.setState(function (prevState) {
- if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- }
-
- var direction = _this.props.direction; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
-
- var calculatedScrollLeft = scrollLeft;
-
- if (direction === 'rtl') {
- switch (getRTLOffsetType()) {
- case 'negative':
- calculatedScrollLeft = -scrollLeft;
- break;
-
- case 'positive-descending':
- calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-
-
- calculatedScrollLeft = Math.max(0, Math.min(calculatedScrollLeft, scrollWidth - clientWidth));
- var calculatedScrollTop = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
- return {
- isScrolling: true,
- horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
- scrollLeft: calculatedScrollLeft,
- scrollTop: calculatedScrollTop,
- verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward',
- scrollUpdateWasRequested: false
- };
- }, _this._resetIsScrollingDebounced);
- });
- };
-
- _this._outerRefSetter = function (ref) {
- var outerRef = _this.props.outerRef;
- _this._outerRef = ref;
-
- if (typeof outerRef === 'function') {
- outerRef(ref);
- } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
- outerRef.current = ref;
- }
- };
-
- _this._resetIsScrollingDebounced = function () {
- if (_this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(_this._resetIsScrollingTimeoutId);
- }
-
- _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL);
- };
-
- _this._resetIsScrolling = function () {
- _this._resetIsScrollingTimeoutId = null;
-
- _this.setState({
- isScrolling: false
- }, function () {
- // Clear style cache after state update has been committed.
- // This way we don't break pure sCU for items that don't use isScrolling param.
- _this._getItemStyleCache(-1);
- });
- };
-
- return _this;
- }
-
- Grid.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
- validateSharedProps(nextProps, prevState);
- validateProps(nextProps);
- return null;
- };
-
- var _proto = Grid.prototype;
-
- _proto.scrollTo = function scrollTo(_ref3) {
- var scrollLeft = _ref3.scrollLeft,
- scrollTop = _ref3.scrollTop;
-
- if (scrollLeft !== undefined) {
- scrollLeft = Math.max(0, scrollLeft);
- }
-
- if (scrollTop !== undefined) {
- scrollTop = Math.max(0, scrollTop);
- }
-
- this.setState(function (prevState) {
- if (scrollLeft === undefined) {
- scrollLeft = prevState.scrollLeft;
- }
-
- if (scrollTop === undefined) {
- scrollTop = prevState.scrollTop;
- }
-
- if (prevState.scrollLeft === scrollLeft && prevState.scrollTop === scrollTop) {
- return null;
- }
-
- return {
- horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
- scrollLeft: scrollLeft,
- scrollTop: scrollTop,
- scrollUpdateWasRequested: true,
- verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
- };
- }, this._resetIsScrollingDebounced);
- };
-
- _proto.scrollToItem = function scrollToItem(_ref4) {
- var _ref4$align = _ref4.align,
- align = _ref4$align === void 0 ? 'auto' : _ref4$align,
- columnIndex = _ref4.columnIndex,
- rowIndex = _ref4.rowIndex;
- var _this$props2 = this.props,
- columnCount = _this$props2.columnCount,
- height = _this$props2.height,
- rowCount = _this$props2.rowCount,
- width = _this$props2.width;
- var _this$state = this.state,
- scrollLeft = _this$state.scrollLeft,
- scrollTop = _this$state.scrollTop;
- var scrollbarSize = getScrollbarSize();
-
- if (columnIndex !== undefined) {
- columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
- }
-
- if (rowIndex !== undefined) {
- rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
- }
-
- var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
- var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps); // The scrollbar size should be considered when scrolling an item into view,
- // to ensure it's fully visible.
- // But we only need to account for its size when it's actually visible.
-
- var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
- var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
- this.scrollTo({
- scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
- scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
- });
- };
-
- _proto.componentDidMount = function componentDidMount() {
- var _this$props3 = this.props,
- initialScrollLeft = _this$props3.initialScrollLeft,
- initialScrollTop = _this$props3.initialScrollTop;
-
- if (this._outerRef != null) {
- var outerRef = this._outerRef;
-
- if (typeof initialScrollLeft === 'number') {
- outerRef.scrollLeft = initialScrollLeft;
- }
-
- if (typeof initialScrollTop === 'number') {
- outerRef.scrollTop = initialScrollTop;
- }
- }
-
- this._callPropsCallbacks();
- };
-
- _proto.componentDidUpdate = function componentDidUpdate() {
- var direction = this.props.direction;
- var _this$state2 = this.state,
- scrollLeft = _this$state2.scrollLeft,
- scrollTop = _this$state2.scrollTop,
- scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
-
- if (scrollUpdateWasRequested && this._outerRef != null) {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // So we need to determine which browser behavior we're dealing with, and mimic it.
- var outerRef = this._outerRef;
-
- if (direction === 'rtl') {
- switch (getRTLOffsetType()) {
- case 'negative':
- outerRef.scrollLeft = -scrollLeft;
- break;
-
- case 'positive-ascending':
- outerRef.scrollLeft = scrollLeft;
- break;
-
- default:
- var clientWidth = outerRef.clientWidth,
- scrollWidth = outerRef.scrollWidth;
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- } else {
- outerRef.scrollLeft = Math.max(0, scrollLeft);
- }
-
- outerRef.scrollTop = Math.max(0, scrollTop);
- }
-
- this._callPropsCallbacks();
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- if (this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(this._resetIsScrollingTimeoutId);
- }
- };
-
- _proto.render = function render() {
- var _this$props4 = this.props,
- children = _this$props4.children,
- className = _this$props4.className,
- columnCount = _this$props4.columnCount,
- direction = _this$props4.direction,
- height = _this$props4.height,
- innerRef = _this$props4.innerRef,
- innerElementType = _this$props4.innerElementType,
- innerTagName = _this$props4.innerTagName,
- itemData = _this$props4.itemData,
- _this$props4$itemKey = _this$props4.itemKey,
- itemKey = _this$props4$itemKey === void 0 ? defaultItemKey : _this$props4$itemKey,
- outerElementType = _this$props4.outerElementType,
- outerTagName = _this$props4.outerTagName,
- rowCount = _this$props4.rowCount,
- style = _this$props4.style,
- useIsScrolling = _this$props4.useIsScrolling,
- width = _this$props4.width;
- var isScrolling = this.state.isScrolling;
-
- var _this$_getHorizontalR = this._getHorizontalRangeToRender(),
- columnStartIndex = _this$_getHorizontalR[0],
- columnStopIndex = _this$_getHorizontalR[1];
-
- var _this$_getVerticalRan = this._getVerticalRangeToRender(),
- rowStartIndex = _this$_getVerticalRan[0],
- rowStopIndex = _this$_getVerticalRan[1];
-
- var items = [];
-
- if (columnCount > 0 && rowCount) {
- for (var _rowIndex = rowStartIndex; _rowIndex <= rowStopIndex; _rowIndex++) {
- for (var _columnIndex = columnStartIndex; _columnIndex <= columnStopIndex; _columnIndex++) {
- items.push(createElement(children, {
- columnIndex: _columnIndex,
- data: itemData,
- isScrolling: useIsScrolling ? isScrolling : undefined,
- key: itemKey({
- columnIndex: _columnIndex,
- data: itemData,
- rowIndex: _rowIndex
- }),
- rowIndex: _rowIndex,
- style: this._getItemStyle(_rowIndex, _columnIndex)
- }));
- }
- }
- } // Read this value AFTER items have been created,
- // So their actual sizes (if variable) are taken into consideration.
-
-
- var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
- var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
- return createElement(outerElementType || outerTagName || 'div', {
- className: className,
- onScroll: this._onScroll,
- ref: this._outerRefSetter,
- style: _extends({
- position: 'relative',
- height: height,
- width: width,
- overflow: 'auto',
- WebkitOverflowScrolling: 'touch',
- willChange: 'transform',
- direction: direction
- }, style)
- }, createElement(innerElementType || innerTagName || 'div', {
- children: items,
- ref: innerRef,
- style: {
- height: estimatedTotalHeight,
- pointerEvents: isScrolling ? 'none' : undefined,
- width: estimatedTotalWidth
- }
- }));
- };
-
- _proto._callPropsCallbacks = function _callPropsCallbacks() {
- var _this$props5 = this.props,
- columnCount = _this$props5.columnCount,
- onItemsRendered = _this$props5.onItemsRendered,
- onScroll = _this$props5.onScroll,
- rowCount = _this$props5.rowCount;
-
- if (typeof onItemsRendered === 'function') {
- if (columnCount > 0 && rowCount > 0) {
- var _this$_getHorizontalR2 = this._getHorizontalRangeToRender(),
- _overscanColumnStartIndex = _this$_getHorizontalR2[0],
- _overscanColumnStopIndex = _this$_getHorizontalR2[1],
- _visibleColumnStartIndex = _this$_getHorizontalR2[2],
- _visibleColumnStopIndex = _this$_getHorizontalR2[3];
-
- var _this$_getVerticalRan2 = this._getVerticalRangeToRender(),
- _overscanRowStartIndex = _this$_getVerticalRan2[0],
- _overscanRowStopIndex = _this$_getVerticalRan2[1],
- _visibleRowStartIndex = _this$_getVerticalRan2[2],
- _visibleRowStopIndex = _this$_getVerticalRan2[3];
-
- this._callOnItemsRendered(_overscanColumnStartIndex, _overscanColumnStopIndex, _overscanRowStartIndex, _overscanRowStopIndex, _visibleColumnStartIndex, _visibleColumnStopIndex, _visibleRowStartIndex, _visibleRowStopIndex);
- }
- }
-
- if (typeof onScroll === 'function') {
- var _this$state3 = this.state,
- _horizontalScrollDirection = _this$state3.horizontalScrollDirection,
- _scrollLeft = _this$state3.scrollLeft,
- _scrollTop = _this$state3.scrollTop,
- _scrollUpdateWasRequested = _this$state3.scrollUpdateWasRequested,
- _verticalScrollDirection = _this$state3.verticalScrollDirection;
-
- this._callOnScroll(_scrollLeft, _scrollTop, _horizontalScrollDirection, _verticalScrollDirection, _scrollUpdateWasRequested);
- }
- }; // Lazily create and cache item styles while scrolling,
- // So that pure component sCU will prevent re-renders.
- // We maintain this cache, and pass a style prop rather than index,
- // So that List can clear cached styles and force item re-render if necessary.
-
-
- _proto._getHorizontalRangeToRender = function _getHorizontalRangeToRender() {
- var _this$props6 = this.props,
- columnCount = _this$props6.columnCount,
- overscanColumnCount = _this$props6.overscanColumnCount,
- overscanColumnsCount = _this$props6.overscanColumnsCount,
- overscanCount = _this$props6.overscanCount,
- rowCount = _this$props6.rowCount;
- var _this$state4 = this.state,
- horizontalScrollDirection = _this$state4.horizontalScrollDirection,
- isScrolling = _this$state4.isScrolling,
- scrollLeft = _this$state4.scrollLeft;
- var overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
-
- if (columnCount === 0 || rowCount === 0) {
- return [0, 0, 0, 0];
- }
-
- var startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
- var stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
-
- var overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
- var overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
- };
-
- _proto._getVerticalRangeToRender = function _getVerticalRangeToRender() {
- var _this$props7 = this.props,
- columnCount = _this$props7.columnCount,
- overscanCount = _this$props7.overscanCount,
- overscanRowCount = _this$props7.overscanRowCount,
- overscanRowsCount = _this$props7.overscanRowsCount,
- rowCount = _this$props7.rowCount;
- var _this$state5 = this.state,
- isScrolling = _this$state5.isScrolling,
- verticalScrollDirection = _this$state5.verticalScrollDirection,
- scrollTop = _this$state5.scrollTop;
- var overscanCountResolved = overscanRowCount || overscanRowsCount || overscanCount || 1;
-
- if (columnCount === 0 || rowCount === 0) {
- return [0, 0, 0, 0];
- }
-
- var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
- var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
-
- var overscanBackward = !isScrolling || verticalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
- var overscanForward = !isScrolling || verticalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
- };
-
- return Grid;
- }(PureComponent), _class.defaultProps = {
- direction: 'ltr',
- itemData: undefined,
- useIsScrolling: false
- }, _temp;
-}
-
-var validateSharedProps = function validateSharedProps(_ref5, _ref6) {
- var children = _ref5.children,
- direction = _ref5.direction,
- height = _ref5.height,
- innerTagName = _ref5.innerTagName,
- outerTagName = _ref5.outerTagName,
- overscanColumnsCount = _ref5.overscanColumnsCount,
- overscanCount = _ref5.overscanCount,
- overscanRowsCount = _ref5.overscanRowsCount,
- width = _ref5.width;
- var instance = _ref6.instance;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof overscanCount === 'number') {
- if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
- devWarningsOverscanCount.add(instance);
- console.warn('The overscanCount prop has been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
- }
- }
-
- if (typeof overscanColumnsCount === 'number' || typeof overscanRowsCount === 'number') {
- if (devWarningsOverscanRowsColumnsCount && !devWarningsOverscanRowsColumnsCount.has(instance)) {
- devWarningsOverscanRowsColumnsCount.add(instance);
- console.warn('The overscanColumnsCount and overscanRowsCount props have been deprecated. ' + 'Please use the overscanColumnCount and overscanRowCount props instead.');
- }
- }
-
- if (innerTagName != null || outerTagName != null) {
- if (devWarningsTagName && !devWarningsTagName.has(instance)) {
- devWarningsTagName.add(instance);
- console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
- }
- }
-
- if (children == null) {
- throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
- }
-
- switch (direction) {
- case 'ltr':
- case 'rtl':
- // Valid values
- break;
-
- default:
- throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
- }
-
- if (typeof width !== 'number') {
- throw Error('An invalid "width" prop has been specified. ' + 'Grids must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
- }
-
- if (typeof height !== 'number') {
- throw Error('An invalid "height" prop has been specified. ' + 'Grids must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
- }
- }
-};
-
-var DEFAULT_ESTIMATED_ITEM_SIZE = 50;
-
-var getEstimatedTotalHeight = function getEstimatedTotalHeight(_ref, _ref2) {
- var rowCount = _ref.rowCount;
- var rowMetadataMap = _ref2.rowMetadataMap,
- estimatedRowHeight = _ref2.estimatedRowHeight,
- lastMeasuredRowIndex = _ref2.lastMeasuredRowIndex;
- var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
-
- if (lastMeasuredRowIndex >= rowCount) {
- lastMeasuredRowIndex = rowCount - 1;
- }
-
- if (lastMeasuredRowIndex >= 0) {
- var itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
- }
-
- var numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
-};
-
-var getEstimatedTotalWidth = function getEstimatedTotalWidth(_ref3, _ref4) {
- var columnCount = _ref3.columnCount;
- var columnMetadataMap = _ref4.columnMetadataMap,
- estimatedColumnWidth = _ref4.estimatedColumnWidth,
- lastMeasuredColumnIndex = _ref4.lastMeasuredColumnIndex;
- var totalSizeOfMeasuredRows = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
-
- if (lastMeasuredColumnIndex >= columnCount) {
- lastMeasuredColumnIndex = columnCount - 1;
- }
-
- if (lastMeasuredColumnIndex >= 0) {
- var itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
- }
-
- var numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
-};
-
-var getItemMetadata = function getItemMetadata(itemType, props, index, instanceProps) {
- var itemMetadataMap, itemSize, lastMeasuredIndex;
-
- if (itemType === 'column') {
- itemMetadataMap = instanceProps.columnMetadataMap;
- itemSize = props.columnWidth;
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
- } else {
- itemMetadataMap = instanceProps.rowMetadataMap;
- itemSize = props.rowHeight;
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
- }
-
- if (index > lastMeasuredIndex) {
- var offset = 0;
-
- if (lastMeasuredIndex >= 0) {
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
- offset = itemMetadata.offset + itemMetadata.size;
- }
-
- for (var i = lastMeasuredIndex + 1; i <= index; i++) {
- var size = itemSize(i);
- itemMetadataMap[i] = {
- offset: offset,
- size: size
- };
- offset += size;
- }
-
- if (itemType === 'column') {
- instanceProps.lastMeasuredColumnIndex = index;
- } else {
- instanceProps.lastMeasuredRowIndex = index;
- }
- }
-
- return itemMetadataMap[index];
-};
-
-var findNearestItem = function findNearestItem(itemType, props, instanceProps, offset) {
- var itemMetadataMap, lastMeasuredIndex;
-
- if (itemType === 'column') {
- itemMetadataMap = instanceProps.columnMetadataMap;
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
- } else {
- itemMetadataMap = instanceProps.rowMetadataMap;
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
- }
-
- var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
-
- if (lastMeasuredItemOffset >= offset) {
- // If we've already measured items within this range just use a binary search as it's faster.
- return findNearestItemBinarySearch(itemType, props, instanceProps, lastMeasuredIndex, 0, offset);
- } else {
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
- // The overall complexity for this approach is O(log n).
- return findNearestItemExponentialSearch(itemType, props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
- }
-};
-
-var findNearestItemBinarySearch = function findNearestItemBinarySearch(itemType, props, instanceProps, high, low, offset) {
- while (low <= high) {
- var middle = low + Math.floor((high - low) / 2);
- var currentOffset = getItemMetadata(itemType, props, middle, instanceProps).offset;
-
- if (currentOffset === offset) {
- return middle;
- } else if (currentOffset < offset) {
- low = middle + 1;
- } else if (currentOffset > offset) {
- high = middle - 1;
- }
- }
-
- if (low > 0) {
- return low - 1;
- } else {
- return 0;
- }
-};
-
-var findNearestItemExponentialSearch = function findNearestItemExponentialSearch(itemType, props, instanceProps, index, offset) {
- var itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
- var interval = 1;
-
- while (index < itemCount && getItemMetadata(itemType, props, index, instanceProps).offset < offset) {
- index += interval;
- interval *= 2;
- }
-
- return findNearestItemBinarySearch(itemType, props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
-};
-
-var getOffsetForIndexAndAlignment = function getOffsetForIndexAndAlignment(itemType, props, index, align, scrollOffset, instanceProps, scrollbarSize) {
- var size = itemType === 'column' ? props.width : props.height;
- var itemMetadata = getItemMetadata(itemType, props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
- // To ensure it reflects actual measurements instead of just estimates.
-
- var estimatedTotalSize = itemType === 'column' ? getEstimatedTotalWidth(props, instanceProps) : getEstimatedTotalHeight(props, instanceProps);
- var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
- var minOffset = Math.max(0, itemMetadata.offset - size + scrollbarSize + itemMetadata.size);
-
- if (align === 'smart') {
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
-};
-
-var VariableSizeGrid =
-/*#__PURE__*/
-createGridComponent({
- getColumnOffset: function getColumnOffset(props, index, instanceProps) {
- return getItemMetadata('column', props, index, instanceProps).offset;
- },
- getColumnStartIndexForOffset: function getColumnStartIndexForOffset(props, scrollLeft, instanceProps) {
- return findNearestItem('column', props, instanceProps, scrollLeft);
- },
- getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(props, startIndex, scrollLeft, instanceProps) {
- var columnCount = props.columnCount,
- width = props.width;
- var itemMetadata = getItemMetadata('column', props, startIndex, instanceProps);
- var maxOffset = scrollLeft + width;
- var offset = itemMetadata.offset + itemMetadata.size;
- var stopIndex = startIndex;
-
- while (stopIndex < columnCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
- getColumnWidth: function getColumnWidth(props, index, instanceProps) {
- return instanceProps.columnMetadataMap[index].size;
- },
- getEstimatedTotalHeight: getEstimatedTotalHeight,
- getEstimatedTotalWidth: getEstimatedTotalWidth,
- getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
- return getOffsetForIndexAndAlignment('column', props, index, align, scrollOffset, instanceProps, scrollbarSize);
- },
- getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(props, index, align, scrollOffset, instanceProps, scrollbarSize) {
- return getOffsetForIndexAndAlignment('row', props, index, align, scrollOffset, instanceProps, scrollbarSize);
- },
- getRowOffset: function getRowOffset(props, index, instanceProps) {
- return getItemMetadata('row', props, index, instanceProps).offset;
- },
- getRowHeight: function getRowHeight(props, index, instanceProps) {
- return instanceProps.rowMetadataMap[index].size;
- },
- getRowStartIndexForOffset: function getRowStartIndexForOffset(props, scrollTop, instanceProps) {
- return findNearestItem('row', props, instanceProps, scrollTop);
- },
- getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(props, startIndex, scrollTop, instanceProps) {
- var rowCount = props.rowCount,
- height = props.height;
- var itemMetadata = getItemMetadata('row', props, startIndex, instanceProps);
- var maxOffset = scrollTop + height;
- var offset = itemMetadata.offset + itemMetadata.size;
- var stopIndex = startIndex;
-
- while (stopIndex < rowCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
- initInstanceProps: function initInstanceProps(props, instance) {
- var _ref5 = props,
- estimatedColumnWidth = _ref5.estimatedColumnWidth,
- estimatedRowHeight = _ref5.estimatedRowHeight;
- var instanceProps = {
- columnMetadataMap: {},
- estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
- estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
- lastMeasuredColumnIndex: -1,
- lastMeasuredRowIndex: -1,
- rowMetadataMap: {}
- };
-
- instance.resetAfterColumnIndex = function (columnIndex, shouldForceUpdate) {
- if (shouldForceUpdate === void 0) {
- shouldForceUpdate = true;
- }
-
- instance.resetAfterIndices({
- columnIndex: columnIndex,
- shouldForceUpdate: shouldForceUpdate
- });
- };
-
- instance.resetAfterRowIndex = function (rowIndex, shouldForceUpdate) {
- if (shouldForceUpdate === void 0) {
- shouldForceUpdate = true;
- }
-
- instance.resetAfterIndices({
- rowIndex: rowIndex,
- shouldForceUpdate: shouldForceUpdate
- });
- };
-
- instance.resetAfterIndices = function (_ref6) {
- var columnIndex = _ref6.columnIndex,
- rowIndex = _ref6.rowIndex,
- _ref6$shouldForceUpda = _ref6.shouldForceUpdate,
- shouldForceUpdate = _ref6$shouldForceUpda === void 0 ? true : _ref6$shouldForceUpda;
-
- if (typeof columnIndex === 'number') {
- instanceProps.lastMeasuredColumnIndex = Math.min(instanceProps.lastMeasuredColumnIndex, columnIndex - 1);
- }
-
- if (typeof rowIndex === 'number') {
- instanceProps.lastMeasuredRowIndex = Math.min(instanceProps.lastMeasuredRowIndex, rowIndex - 1);
- } // We could potentially optimize further by only evicting styles after this index,
- // But since styles are only cached while scrolling is in progress-
- // It seems an unnecessary optimization.
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
-
-
- instance._getItemStyleCache(-1);
-
- if (shouldForceUpdate) {
- instance.forceUpdate();
- }
- };
-
- return instanceProps;
- },
- shouldResetStyleCacheOnItemSizeChange: false,
- validateProps: function validateProps(_ref7) {
- var columnWidth = _ref7.columnWidth,
- rowHeight = _ref7.rowHeight;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof columnWidth !== 'function') {
- throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
- } else if (typeof rowHeight !== 'function') {
- throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
- }
- }
- }
-});
-
-var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
-
-var defaultItemKey$1 = function defaultItemKey(index, data) {
- return index;
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
-// This avoids spamming the console every time a render happens.
-
-
-var devWarningsDirection = null;
-var devWarningsTagName$1 = null;
-
-if (process.env.NODE_ENV !== 'production') {
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
- devWarningsDirection =
- /*#__PURE__*/
- new WeakSet();
- devWarningsTagName$1 =
- /*#__PURE__*/
- new WeakSet();
- }
-}
-
-function createListComponent(_ref) {
- var _class, _temp;
-
- var getItemOffset = _ref.getItemOffset,
- getEstimatedTotalSize = _ref.getEstimatedTotalSize,
- getItemSize = _ref.getItemSize,
- getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
- getStartIndexForOffset = _ref.getStartIndexForOffset,
- getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
- initInstanceProps = _ref.initInstanceProps,
- shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
- validateProps = _ref.validateProps;
- return _temp = _class =
- /*#__PURE__*/
- function (_PureComponent) {
- _inheritsLoose(List, _PureComponent);
-
- // Always use explicit constructor for React components.
- // It produces less code after transpilation. (#26)
- // eslint-disable-next-line no-useless-constructor
- function List(props) {
- var _this;
-
- _this = _PureComponent.call(this, props) || this;
- _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_assertThisInitialized(_this)));
- _this._outerRef = void 0;
- _this._resetIsScrollingTimeoutId = null;
- _this.state = {
- instance: _assertThisInitialized(_assertThisInitialized(_this)),
- isScrolling: false,
- scrollDirection: 'forward',
- scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
- scrollUpdateWasRequested: false
- };
- _this._callOnItemsRendered = void 0;
- _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
- return _this.props.onItemsRendered({
- overscanStartIndex: overscanStartIndex,
- overscanStopIndex: overscanStopIndex,
- visibleStartIndex: visibleStartIndex,
- visibleStopIndex: visibleStopIndex
- });
- });
- _this._callOnScroll = void 0;
- _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
- return _this.props.onScroll({
- scrollDirection: scrollDirection,
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: scrollUpdateWasRequested
- });
- });
- _this._getItemStyle = void 0;
-
- _this._getItemStyle = function (index) {
- var _this$props = _this.props,
- direction = _this$props.direction,
- itemSize = _this$props.itemSize,
- layout = _this$props.layout;
-
- var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
-
- var style;
-
- if (itemStyleCache.hasOwnProperty(index)) {
- style = itemStyleCache[index];
- } else {
- var _style;
-
- var _offset = getItemOffset(_this.props, index, _this._instanceProps);
-
- var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- itemStyleCache[index] = style = (_style = {
- position: 'absolute'
- }, _style[direction === 'rtl' ? 'right' : 'left'] = isHorizontal ? _offset : 0, _style.top = !isHorizontal ? _offset : 0, _style.height = !isHorizontal ? size : '100%', _style.width = isHorizontal ? size : '100%', _style);
- }
-
- return style;
- };
-
- _this._getItemStyleCache = void 0;
- _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
- return {};
- });
-
- _this._onScrollHorizontal = function (event) {
- var _event$currentTarget = event.currentTarget,
- clientWidth = _event$currentTarget.clientWidth,
- scrollLeft = _event$currentTarget.scrollLeft,
- scrollWidth = _event$currentTarget.scrollWidth;
-
- // Force flush sync for scroll updates to reduce visual checkerboarding.
- flushSync(() => {
- _this.setState(function (prevState) {
- if (prevState.scrollOffset === scrollLeft) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- }
-
- var direction = _this.props.direction;
- var scrollOffset = scrollLeft;
-
- if (direction === 'rtl') {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
- switch (getRTLOffsetType()) {
- case 'negative':
- scrollOffset = -scrollLeft;
- break;
-
- case 'positive-descending':
- scrollOffset = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-
-
- scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
- return {
- isScrolling: true,
- scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: false
- };
- }, _this._resetIsScrollingDebounced);
- });
- };
-
- _this._onScrollVertical = function (event) {
- var _event$currentTarget2 = event.currentTarget,
- clientHeight = _event$currentTarget2.clientHeight,
- scrollHeight = _event$currentTarget2.scrollHeight,
- scrollTop = _event$currentTarget2.scrollTop;
-
- // Force flush sync for scroll updates to reduce visual checkerboarding.
- flushSync(() => {
- _this.setState(function (prevState) {
- if (prevState.scrollOffset === scrollTop) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-
-
- var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
- return {
- isScrolling: true,
- scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: false
- };
- }, _this._resetIsScrollingDebounced);
- });
- };
-
- _this._outerRefSetter = function (ref) {
- var outerRef = _this.props.outerRef;
- _this._outerRef = ref;
-
- if (typeof outerRef === 'function') {
- outerRef(ref);
- } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
- outerRef.current = ref;
- }
- };
-
- _this._resetIsScrollingDebounced = function () {
- if (_this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(_this._resetIsScrollingTimeoutId);
- }
-
- _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
- };
-
- _this._resetIsScrolling = function () {
- _this._resetIsScrollingTimeoutId = null;
-
- _this.setState({
- isScrolling: false
- }, function () {
- // Clear style cache after state update has been committed.
- // This way we don't break pure sCU for items that don't use isScrolling param.
- _this._getItemStyleCache(-1, null);
- });
- };
-
- return _this;
- }
-
- List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
- validateSharedProps$1(nextProps, prevState);
- validateProps(nextProps);
- return null;
- };
-
- var _proto = List.prototype;
-
- _proto.scrollTo = function scrollTo(scrollOffset) {
- scrollOffset = Math.max(0, scrollOffset);
- this.setState(function (prevState) {
- if (prevState.scrollOffset === scrollOffset) {
- return null;
- }
-
- return {
- scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: true
- };
- }, this._resetIsScrollingDebounced);
- };
-
- _proto.scrollToItem = function scrollToItem(index, align) {
- if (align === void 0) {
- align = 'auto';
- }
-
- var itemCount = this.props.itemCount;
- var scrollOffset = this.state.scrollOffset;
- index = Math.max(0, Math.min(index, itemCount - 1));
- this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps));
- };
-
- _proto.componentDidMount = function componentDidMount() {
- var _this$props2 = this.props,
- direction = _this$props2.direction,
- initialScrollOffset = _this$props2.initialScrollOffset,
- layout = _this$props2.layout;
-
- if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
- var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
-
- if (direction === 'horizontal' || layout === 'horizontal') {
- outerRef.scrollLeft = initialScrollOffset;
- } else {
- outerRef.scrollTop = initialScrollOffset;
- }
- }
-
- this._callPropsCallbacks();
- };
-
- _proto.componentDidUpdate = function componentDidUpdate() {
- var _this$props3 = this.props,
- direction = _this$props3.direction,
- layout = _this$props3.layout;
- var _this$state = this.state,
- scrollOffset = _this$state.scrollOffset,
- scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
-
- if (scrollUpdateWasRequested && this._outerRef != null) {
- var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
-
- if (direction === 'horizontal' || layout === 'horizontal') {
- if (direction === 'rtl') {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // So we need to determine which browser behavior we're dealing with, and mimic it.
- switch (getRTLOffsetType()) {
- case 'negative':
- outerRef.scrollLeft = -scrollOffset;
- break;
-
- case 'positive-ascending':
- outerRef.scrollLeft = scrollOffset;
- break;
-
- default:
- var clientWidth = outerRef.clientWidth,
- scrollWidth = outerRef.scrollWidth;
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
- break;
- }
- } else {
- outerRef.scrollLeft = scrollOffset;
- }
- } else {
- outerRef.scrollTop = scrollOffset;
- }
- }
-
- this._callPropsCallbacks();
- };
-
- _proto.componentWillUnmount = function componentWillUnmount() {
- if (this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(this._resetIsScrollingTimeoutId);
- }
- };
-
- _proto.render = function render() {
- var _this$props4 = this.props,
- children = _this$props4.children,
- className = _this$props4.className,
- direction = _this$props4.direction,
- height = _this$props4.height,
- innerRef = _this$props4.innerRef,
- innerElementType = _this$props4.innerElementType,
- innerTagName = _this$props4.innerTagName,
- itemCount = _this$props4.itemCount,
- itemData = _this$props4.itemData,
- _this$props4$itemKey = _this$props4.itemKey,
- itemKey = _this$props4$itemKey === void 0 ? defaultItemKey$1 : _this$props4$itemKey,
- layout = _this$props4.layout,
- outerElementType = _this$props4.outerElementType,
- outerTagName = _this$props4.outerTagName,
- style = _this$props4.style,
- useIsScrolling = _this$props4.useIsScrolling,
- width = _this$props4.width;
- var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
-
- var _this$_getRangeToRend = this._getRangeToRender(),
- startIndex = _this$_getRangeToRend[0],
- stopIndex = _this$_getRangeToRend[1];
-
- var items = [];
-
- if (itemCount > 0) {
- for (var _index = startIndex; _index <= stopIndex; _index++) {
- items.push(createElement(children, {
- data: itemData,
- key: itemKey(_index, itemData),
- index: _index,
- isScrolling: useIsScrolling ? isScrolling : undefined,
- style: this._getItemStyle(_index)
- }));
- }
- } // Read this value AFTER items have been created,
- // So their actual sizes (if variable) are taken into consideration.
-
-
- var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
- return createElement(outerElementType || outerTagName || 'div', {
- className: className,
- onScroll: onScroll,
- ref: this._outerRefSetter,
- style: _extends({
- position: 'relative',
- height: height,
- width: width,
- overflow: 'auto',
- WebkitOverflowScrolling: 'touch',
- willChange: 'transform',
- direction: direction
- }, style)
- }, createElement(innerElementType || innerTagName || 'div', {
- children: items,
- ref: innerRef,
- style: {
- height: isHorizontal ? '100%' : estimatedTotalSize,
- pointerEvents: isScrolling ? 'none' : undefined,
- width: isHorizontal ? estimatedTotalSize : '100%'
- }
- }));
- };
-
- _proto._callPropsCallbacks = function _callPropsCallbacks() {
- if (typeof this.props.onItemsRendered === 'function') {
- var itemCount = this.props.itemCount;
-
- if (itemCount > 0) {
- var _this$_getRangeToRend2 = this._getRangeToRender(),
- _overscanStartIndex = _this$_getRangeToRend2[0],
- _overscanStopIndex = _this$_getRangeToRend2[1],
- _visibleStartIndex = _this$_getRangeToRend2[2],
- _visibleStopIndex = _this$_getRangeToRend2[3];
-
- this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
- }
- }
-
- if (typeof this.props.onScroll === 'function') {
- var _this$state2 = this.state,
- _scrollDirection = _this$state2.scrollDirection,
- _scrollOffset = _this$state2.scrollOffset,
- _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
-
- this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
- }
- }; // Lazily create and cache item styles while scrolling,
- // So that pure component sCU will prevent re-renders.
- // We maintain this cache, and pass a style prop rather than index,
- // So that List can clear cached styles and force item re-render if necessary.
-
-
- _proto._getRangeToRender = function _getRangeToRender() {
- var _this$props5 = this.props,
- itemCount = _this$props5.itemCount,
- overscanCount = _this$props5.overscanCount;
- var _this$state3 = this.state,
- isScrolling = _this$state3.isScrolling,
- scrollDirection = _this$state3.scrollDirection,
- scrollOffset = _this$state3.scrollOffset;
-
- if (itemCount === 0) {
- return [0, 0, 0, 0];
- }
-
- var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
- var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
-
- var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
- var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
- return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
- };
-
- return List;
- }(PureComponent), _class.defaultProps = {
- direction: 'ltr',
- itemData: undefined,
- layout: 'vertical',
- overscanCount: 2,
- useIsScrolling: false
- }, _temp;
-} // NOTE: I considered further wrapping individual items with a pure ListItem component.
-// This would avoid ever calling the render function for the same index more than once,
-// But it would also add the overhead of a lot of components/fibers.
-// I assume people already do this (render function returning a class component),
-// So my doing it would just unnecessarily double the wrappers.
-
-var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
- var children = _ref2.children,
- direction = _ref2.direction,
- height = _ref2.height,
- layout = _ref2.layout,
- innerTagName = _ref2.innerTagName,
- outerTagName = _ref2.outerTagName,
- width = _ref2.width;
- var instance = _ref3.instance;
-
- if (process.env.NODE_ENV !== 'production') {
- if (innerTagName != null || outerTagName != null) {
- if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
- devWarningsTagName$1.add(instance);
- console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
- }
- } // TODO Deprecate direction "horizontal"
-
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-
- switch (direction) {
- case 'horizontal':
- case 'vertical':
- if (devWarningsDirection && !devWarningsDirection.has(instance)) {
- devWarningsDirection.add(instance);
- console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
- }
-
- break;
-
- case 'ltr':
- case 'rtl':
- // Valid values
- break;
-
- default:
- throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
- }
-
- switch (layout) {
- case 'horizontal':
- case 'vertical':
- // Valid values
- break;
-
- default:
- throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
- }
-
- if (children == null) {
- throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
- }
-
- if (isHorizontal && typeof width !== 'number') {
- throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
- } else if (!isHorizontal && typeof height !== 'number') {
- throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
- }
- }
-};
-
-var DEFAULT_ESTIMATED_ITEM_SIZE$1 = 50;
-
-var getItemMetadata$1 = function getItemMetadata(props, index, instanceProps) {
- var _ref = props,
- itemSize = _ref.itemSize;
- var itemMetadataMap = instanceProps.itemMetadataMap,
- lastMeasuredIndex = instanceProps.lastMeasuredIndex;
-
- if (index > lastMeasuredIndex) {
- var offset = 0;
-
- if (lastMeasuredIndex >= 0) {
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
- offset = itemMetadata.offset + itemMetadata.size;
- }
-
- for (var i = lastMeasuredIndex + 1; i <= index; i++) {
- var size = itemSize(i);
- itemMetadataMap[i] = {
- offset: offset,
- size: size
- };
- offset += size;
- }
-
- instanceProps.lastMeasuredIndex = index;
- }
-
- return itemMetadataMap[index];
-};
-
-var findNearestItem$1 = function findNearestItem(props, instanceProps, offset) {
- var itemMetadataMap = instanceProps.itemMetadataMap,
- lastMeasuredIndex = instanceProps.lastMeasuredIndex;
- var lastMeasuredItemOffset = lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
-
- if (lastMeasuredItemOffset >= offset) {
- // If we've already measured items within this range just use a binary search as it's faster.
- return findNearestItemBinarySearch$1(props, instanceProps, lastMeasuredIndex, 0, offset);
- } else {
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
- // The overall complexity for this approach is O(log n).
- return findNearestItemExponentialSearch$1(props, instanceProps, Math.max(0, lastMeasuredIndex), offset);
- }
-};
-
-var findNearestItemBinarySearch$1 = function findNearestItemBinarySearch(props, instanceProps, high, low, offset) {
- while (low <= high) {
- var middle = low + Math.floor((high - low) / 2);
- var currentOffset = getItemMetadata$1(props, middle, instanceProps).offset;
-
- if (currentOffset === offset) {
- return middle;
- } else if (currentOffset < offset) {
- low = middle + 1;
- } else if (currentOffset > offset) {
- high = middle - 1;
- }
- }
-
- if (low > 0) {
- return low - 1;
- } else {
- return 0;
- }
-};
-
-var findNearestItemExponentialSearch$1 = function findNearestItemExponentialSearch(props, instanceProps, index, offset) {
- var itemCount = props.itemCount;
- var interval = 1;
-
- while (index < itemCount && getItemMetadata$1(props, index, instanceProps).offset < offset) {
- index += interval;
- interval *= 2;
- }
-
- return findNearestItemBinarySearch$1(props, instanceProps, Math.min(index, itemCount - 1), Math.floor(index / 2), offset);
-};
-
-var getEstimatedTotalSize = function getEstimatedTotalSize(_ref2, _ref3) {
- var itemCount = _ref2.itemCount;
- var itemMetadataMap = _ref3.itemMetadataMap,
- estimatedItemSize = _ref3.estimatedItemSize,
- lastMeasuredIndex = _ref3.lastMeasuredIndex;
- var totalSizeOfMeasuredItems = 0; // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
-
- if (lastMeasuredIndex >= itemCount) {
- lastMeasuredIndex = itemCount - 1;
- }
-
- if (lastMeasuredIndex >= 0) {
- var itemMetadata = itemMetadataMap[lastMeasuredIndex];
- totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
- }
-
- var numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
- var totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
- return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
-};
-
-var VariableSizeList =
-/*#__PURE__*/
-createListComponent({
- getItemOffset: function getItemOffset(props, index, instanceProps) {
- return getItemMetadata$1(props, index, instanceProps).offset;
- },
- getItemSize: function getItemSize(props, index, instanceProps) {
- return instanceProps.itemMetadataMap[index].size;
- },
- getEstimatedTotalSize: getEstimatedTotalSize,
- getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(props, index, align, scrollOffset, instanceProps) {
- var direction = props.direction,
- height = props.height,
- layout = props.layout,
- width = props.width; // TODO Deprecate direction "horizontal"
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var size = isHorizontal ? width : height;
- var itemMetadata = getItemMetadata$1(props, index, instanceProps); // Get estimated total size after ItemMetadata is computed,
- // To ensure it reflects actual measurements instead of just estimates.
-
- var estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
- var maxOffset = Math.max(0, Math.min(estimatedTotalSize - size, itemMetadata.offset));
- var minOffset = Math.max(0, itemMetadata.offset - size + itemMetadata.size);
-
- if (align === 'smart') {
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
- },
- getStartIndexForOffset: function getStartIndexForOffset(props, offset, instanceProps) {
- return findNearestItem$1(props, instanceProps, offset);
- },
- getStopIndexForStartIndex: function getStopIndexForStartIndex(props, startIndex, scrollOffset, instanceProps) {
- var direction = props.direction,
- height = props.height,
- itemCount = props.itemCount,
- layout = props.layout,
- width = props.width; // TODO Deprecate direction "horizontal"
-
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var size = isHorizontal ? width : height;
- var itemMetadata = getItemMetadata$1(props, startIndex, instanceProps);
- var maxOffset = scrollOffset + size;
- var offset = itemMetadata.offset + itemMetadata.size;
- var stopIndex = startIndex;
-
- while (stopIndex < itemCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata$1(props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
- initInstanceProps: function initInstanceProps(props, instance) {
- var _ref4 = props,
- estimatedItemSize = _ref4.estimatedItemSize;
- var instanceProps = {
- itemMetadataMap: {},
- estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE$1,
- lastMeasuredIndex: -1
- };
-
- instance.resetAfterIndex = function (index, shouldForceUpdate) {
- if (shouldForceUpdate === void 0) {
- shouldForceUpdate = true;
- }
-
- instanceProps.lastMeasuredIndex = Math.min(instanceProps.lastMeasuredIndex, index - 1); // We could potentially optimize further by only evicting styles after this index,
- // But since styles are only cached while scrolling is in progress-
- // It seems an unnecessary optimization.
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
-
- instance._getItemStyleCache(-1);
-
- if (shouldForceUpdate) {
- instance.forceUpdate();
- }
- };
-
- return instanceProps;
- },
- shouldResetStyleCacheOnItemSizeChange: false,
- validateProps: function validateProps(_ref5) {
- var itemSize = _ref5.itemSize;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof itemSize !== 'function') {
- throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a function. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
- }
- }
- }
-});
-
-var FixedSizeGrid =
-/*#__PURE__*/
-createGridComponent({
- getColumnOffset: function getColumnOffset(_ref, index) {
- var columnWidth = _ref.columnWidth;
- return index * columnWidth;
- },
- getColumnWidth: function getColumnWidth(_ref2, index) {
- var columnWidth = _ref2.columnWidth;
- return columnWidth;
- },
- getRowOffset: function getRowOffset(_ref3, index) {
- var rowHeight = _ref3.rowHeight;
- return index * rowHeight;
- },
- getRowHeight: function getRowHeight(_ref4, index) {
- var rowHeight = _ref4.rowHeight;
- return rowHeight;
- },
- getEstimatedTotalHeight: function getEstimatedTotalHeight(_ref5) {
- var rowCount = _ref5.rowCount,
- rowHeight = _ref5.rowHeight;
- return rowHeight * rowCount;
- },
- getEstimatedTotalWidth: function getEstimatedTotalWidth(_ref6) {
- var columnCount = _ref6.columnCount,
- columnWidth = _ref6.columnWidth;
- return columnWidth * columnCount;
- },
- getOffsetForColumnAndAlignment: function getOffsetForColumnAndAlignment(_ref7, columnIndex, align, scrollLeft, instanceProps, scrollbarSize) {
- var columnCount = _ref7.columnCount,
- columnWidth = _ref7.columnWidth,
- width = _ref7.width;
- var lastColumnOffset = Math.max(0, columnCount * columnWidth - width);
- var maxOffset = Math.min(lastColumnOffset, columnIndex * columnWidth);
- var minOffset = Math.max(0, columnIndex * columnWidth - width + scrollbarSize + columnWidth);
-
- if (align === 'smart') {
- if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- if (middleOffset < Math.ceil(width / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
- return lastColumnOffset; // near the end
- } else {
- return middleOffset;
- }
-
- case 'auto':
- default:
- if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
- return scrollLeft;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollLeft < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
- },
- getOffsetForRowAndAlignment: function getOffsetForRowAndAlignment(_ref8, rowIndex, align, scrollTop, instanceProps, scrollbarSize) {
- var rowHeight = _ref8.rowHeight,
- height = _ref8.height,
- rowCount = _ref8.rowCount;
- var lastRowOffset = Math.max(0, rowCount * rowHeight - height);
- var maxOffset = Math.min(lastRowOffset, rowIndex * rowHeight);
- var minOffset = Math.max(0, rowIndex * rowHeight - height + scrollbarSize + rowHeight);
-
- if (align === 'smart') {
- if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- if (middleOffset < Math.ceil(height / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
- return lastRowOffset; // near the end
- } else {
- return middleOffset;
- }
-
- case 'auto':
- default:
- if (scrollTop >= minOffset && scrollTop <= maxOffset) {
- return scrollTop;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollTop < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
- },
- getColumnStartIndexForOffset: function getColumnStartIndexForOffset(_ref9, scrollLeft) {
- var columnWidth = _ref9.columnWidth,
- columnCount = _ref9.columnCount;
- return Math.max(0, Math.min(columnCount - 1, Math.floor(scrollLeft / columnWidth)));
- },
- getColumnStopIndexForStartIndex: function getColumnStopIndexForStartIndex(_ref10, startIndex, scrollLeft) {
- var columnWidth = _ref10.columnWidth,
- columnCount = _ref10.columnCount,
- width = _ref10.width;
- var left = startIndex * columnWidth;
- var numVisibleColumns = Math.ceil((width + scrollLeft - left) / columnWidth);
- return Math.max(0, Math.min(columnCount - 1, startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
- ));
- },
- getRowStartIndexForOffset: function getRowStartIndexForOffset(_ref11, scrollTop) {
- var rowHeight = _ref11.rowHeight,
- rowCount = _ref11.rowCount;
- return Math.max(0, Math.min(rowCount - 1, Math.floor(scrollTop / rowHeight)));
- },
- getRowStopIndexForStartIndex: function getRowStopIndexForStartIndex(_ref12, startIndex, scrollTop) {
- var rowHeight = _ref12.rowHeight,
- rowCount = _ref12.rowCount,
- height = _ref12.height;
- var top = startIndex * rowHeight;
- var numVisibleRows = Math.ceil((height + scrollTop - top) / rowHeight);
- return Math.max(0, Math.min(rowCount - 1, startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
- ));
- },
- initInstanceProps: function initInstanceProps(props) {// Noop
- },
- shouldResetStyleCacheOnItemSizeChange: true,
- validateProps: function validateProps(_ref13) {
- var columnWidth = _ref13.columnWidth,
- rowHeight = _ref13.rowHeight;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof columnWidth !== 'number') {
- throw Error('An invalid "columnWidth" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (columnWidth === null ? 'null' : typeof columnWidth) + "\" was specified."));
- }
-
- if (typeof rowHeight !== 'number') {
- throw Error('An invalid "rowHeight" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (rowHeight === null ? 'null' : typeof rowHeight) + "\" was specified."));
- }
- }
- }
-});
-
-var FixedSizeList =
-/*#__PURE__*/
-createListComponent({
- getItemOffset: function getItemOffset(_ref, index) {
- var itemSize = _ref.itemSize;
- return index * itemSize;
- },
- getItemSize: function getItemSize(_ref2, index) {
- var itemSize = _ref2.itemSize;
- return itemSize;
- },
- getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
- var itemCount = _ref3.itemCount,
- itemSize = _ref3.itemSize;
- return itemSize * itemCount;
- },
- getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset) {
- var direction = _ref4.direction,
- height = _ref4.height,
- itemCount = _ref4.itemCount,
- itemSize = _ref4.itemSize,
- layout = _ref4.layout,
- width = _ref4.width;
- // TODO Deprecate direction "horizontal"
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var size = isHorizontal ? width : height;
- var lastItemOffset = Math.max(0, itemCount * itemSize - size);
- var maxOffset = Math.min(lastItemOffset, index * itemSize);
- var minOffset = Math.max(0, index * itemSize - size + itemSize);
-
- if (align === 'smart') {
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
-
- case 'end':
- return minOffset;
-
- case 'center':
- {
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
-
- if (middleOffset < Math.ceil(size / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
- return lastItemOffset; // near the end
- } else {
- return middleOffset;
- }
- }
-
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
-
- }
- },
- getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
- var itemCount = _ref5.itemCount,
- itemSize = _ref5.itemSize;
- return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
- },
- getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
- var direction = _ref6.direction,
- height = _ref6.height,
- itemCount = _ref6.itemCount,
- itemSize = _ref6.itemSize,
- layout = _ref6.layout,
- width = _ref6.width;
- // TODO Deprecate direction "horizontal"
- var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- var offset = startIndex * itemSize;
- var size = isHorizontal ? width : height;
- var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
- return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
- ));
- },
- initInstanceProps: function initInstanceProps(props) {// Noop
- },
- shouldResetStyleCacheOnItemSizeChange: true,
- validateProps: function validateProps(_ref7) {
- var itemSize = _ref7.itemSize;
-
- if (process.env.NODE_ENV !== 'production') {
- if (typeof itemSize !== 'number') {
- throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
- }
- }
- }
-});
-
-// Pulled from react-compat
-// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
-function shallowDiffers(prev, next) {
- for (var attribute in prev) {
- if (!(attribute in next)) {
- return true;
- }
- }
-
- for (var _attribute in next) {
- if (prev[_attribute] !== next[_attribute]) {
- return true;
- }
- }
-
- return false;
-}
-
-// It knows to compare individual style props and ignore the wrapper object.
-// See https://reactjs.org/docs/react-api.html#reactmemo
-
-function areEqual(prevProps, nextProps) {
- var prevStyle = prevProps.style,
- prevRest = _objectWithoutPropertiesLoose(prevProps, ["style"]);
-
- var nextStyle = nextProps.style,
- nextRest = _objectWithoutPropertiesLoose(nextProps, ["style"]);
-
- return !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest);
-}
-
-// It knows to compare individual style props and ignore the wrapper object.
-// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
-
-function shouldComponentUpdate(nextProps, nextState) {
- return !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState);
-}
-
-export { VariableSizeGrid, VariableSizeList, FixedSizeGrid, FixedSizeList, areEqual, shouldComponentUpdate };
-//# sourceMappingURL=index.esm.js.map
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js.flow b/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js.flow
deleted file mode 100644
index 6a6528bbe5384..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/dist/index.esm.js.flow
+++ /dev/null
@@ -1,3 +0,0 @@
-// @flow
-
-export * from '../src';
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/package.json b/packages/react-devtools-shared/src/node_modules/react-window/package.json
deleted file mode 100644
index d10a25a04ffdc..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/package.json
+++ /dev/null
@@ -1,110 +0,0 @@
-{
- "name": "react-window",
- "version": "1.8.5",
- "description":
- "React components for efficiently rendering large, scrollable lists and tabular data",
- "author":
- "Brian Vaughn (https://github.com/bvaughn/)",
- "contributors": [
- "Brian Vaughn (https://github.com/bvaughn/)"
- ],
- "license": "MIT",
- "homepage": "http://react-window.now.sh/",
- "repository": {
- "type": "git",
- "url": "https://github.com/bvaughn/react-window.git"
- },
- "bugs": {
- "url": "https://github.com/bvaughn/react-window/issues"
- },
- "engines": {
- "node": ">8.0.0"
- },
- "keywords": [
- "react",
- "reactjs",
- "virtual",
- "window",
- "windowed",
- "list",
- "scrolling",
- "infinite",
- "virtualized",
- "table",
- "grid",
- "spreadsheet"
- ],
- "main": "dist/index.cjs.js",
- "module": "dist/index.esm.js",
- "files": ["dist", "src/*.js"],
- "scripts": {
- "flow": "flow check --max-warnings=0 src && flow check website",
- "precommit": "lint-staged",
- "prettier": "prettier --write '**/*.{js,json,css}'",
- "linc": "lint-staged",
- "lint": "eslint '**/*.js'",
- "test": "cross-env CI=1 react-scripts test --env=jsdom",
- "test:watch": "react-scripts test --env=jsdom",
- "build:flow":
- "cp flow-template dist/index.cjs.js.flow && cp flow-template dist/index.esm.js.flow",
- "build:source": "rollup -c",
- "build": "del dist && mkdir dist && yarn build:flow && yarn build:source",
- "start": "rollup -c -w",
- "prepare": "yarn run build",
- "website:build": "cd website && yarn build",
- "website:deploy": "cd website && yarn deploy",
- "website:run": "cd website && yarn start"
- },
- "lint-staged": {
- "{website,src}/**/*.{js,json,css}": ["prettier --write", "git add"],
- "**/*.js": "eslint --max-warnings 0"
- },
- "dependencies": {
- "@babel/runtime": "^7.0.0",
- "memoize-one": ">=3.1.1 <6"
- },
- "peerDependencies": {
- "react": "^15.0.0 || ^16.0.0",
- "react-dom": "^15.0.0 || ^16.0.0"
- },
- "devDependencies": {
- "@babel/core": "^7.0.0",
- "@babel/plugin-proposal-class-properties": "^7.0.0",
- "@babel/plugin-transform-runtime": "^7.0.0",
- "@babel/preset-env": "^7.0.0",
- "@babel/preset-flow": "^7.0.0",
- "babel-core": "^7.0.0-bridge.0",
- "babel-eslint": "^9.0.0",
- "babel-plugin-annotate-pure-calls": "^0.3.0",
- "cross-env": "^5.1.4",
- "del-cli": "^1.1.0",
- "eslint": "^4.19.1",
- "eslint-config-prettier": "^2.9.0",
- "eslint-config-react-app": "^2.1.0",
- "eslint-config-standard": "^11.0.0",
- "eslint-config-standard-react": "^6.0.0",
- "eslint-plugin-flowtype": "^2.47.1",
- "eslint-plugin-import": "^2.11.0",
- "eslint-plugin-jsx-a11y": "^5",
- "eslint-plugin-node": "^6.0.1",
- "eslint-plugin-prettier": "^2.6.0",
- "eslint-plugin-promise": "^3.7.0",
- "eslint-plugin-react": "^7.7.0",
- "eslint-plugin-standard": "^3.0.1",
- "flow-bin": "^0.103.0",
- "gh-pages": "^1.1.0",
- "lint-staged": "^7.0.5",
- "prettier": "^1.12.1",
- "react": "^16.8.4",
- "react-dom": "^16.8.4",
- "react-is": "^16.8.4",
- "react-scripts": "^1.1.1",
- "react-test-renderer": "^16.7.0",
- "rollup": "^1.4.1",
- "rollup-plugin-babel": "^4.3.2",
- "rollup-plugin-commonjs": "^9.2.1",
- "rollup-plugin-node-resolve": "^4.0.1",
- "rollup-plugin-replace": "^2.2.0",
- "rollup-plugin-terser": "^5.1.0"
- }
-}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js
deleted file mode 100644
index 3f0b9f40676b9..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeGrid.js
+++ /dev/null
@@ -1,246 +0,0 @@
-// @flow
-
-import type {ComponentType} from "react";
-
-import createGridComponent from './createGridComponent';
-
-import type { Props, ScrollToAlign } from './createGridComponent';
-
-const FixedSizeGrid: ComponentType> = createGridComponent({
- getColumnOffset: ({ columnWidth }: Props, index: number): number =>
- index * ((columnWidth: any): number),
-
- getColumnWidth: ({ columnWidth }: Props, index: number): number =>
- ((columnWidth: any): number),
-
- getRowOffset: ({ rowHeight }: Props, index: number): number =>
- index * ((rowHeight: any): number),
-
- getRowHeight: ({ rowHeight }: Props, index: number): number =>
- ((rowHeight: any): number),
-
- getEstimatedTotalHeight: ({ rowCount, rowHeight }: Props) =>
- ((rowHeight: any): number) * rowCount,
-
- getEstimatedTotalWidth: ({ columnCount, columnWidth }: Props) =>
- ((columnWidth: any): number) * columnCount,
-
- getOffsetForColumnAndAlignment: (
- { columnCount, columnWidth, width }: Props,
- columnIndex: number,
- align: ScrollToAlign,
- scrollLeft: number,
- instanceProps: typeof undefined,
- scrollbarSize: number
- ): number => {
- const lastColumnOffset = Math.max(
- 0,
- columnCount * ((columnWidth: any): number) - width
- );
- const maxOffset = Math.min(
- lastColumnOffset,
- columnIndex * ((columnWidth: any): number)
- );
- const minOffset = Math.max(
- 0,
- columnIndex * ((columnWidth: any): number) -
- width +
- scrollbarSize +
- ((columnWidth: any): number)
- );
-
- if (align === 'smart') {
- if (scrollLeft >= minOffset - width && scrollLeft <= maxOffset + width) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
- case 'end':
- return minOffset;
- case 'center':
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- const middleOffset = Math.round(
- minOffset + (maxOffset - minOffset) / 2
- );
- if (middleOffset < Math.ceil(width / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastColumnOffset + Math.floor(width / 2)) {
- return lastColumnOffset; // near the end
- } else {
- return middleOffset;
- }
- case 'auto':
- default:
- if (scrollLeft >= minOffset && scrollLeft <= maxOffset) {
- return scrollLeft;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollLeft < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
- }
- },
-
- getOffsetForRowAndAlignment: (
- { rowHeight, height, rowCount }: Props,
- rowIndex: number,
- align: ScrollToAlign,
- scrollTop: number,
- instanceProps: typeof undefined,
- scrollbarSize: number
- ): number => {
- const lastRowOffset = Math.max(
- 0,
- rowCount * ((rowHeight: any): number) - height
- );
- const maxOffset = Math.min(
- lastRowOffset,
- rowIndex * ((rowHeight: any): number)
- );
- const minOffset = Math.max(
- 0,
- rowIndex * ((rowHeight: any): number) -
- height +
- scrollbarSize +
- ((rowHeight: any): number)
- );
-
- if (align === 'smart') {
- if (scrollTop >= minOffset - height && scrollTop <= maxOffset + height) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
- case 'end':
- return minOffset;
- case 'center':
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- const middleOffset = Math.round(
- minOffset + (maxOffset - minOffset) / 2
- );
- if (middleOffset < Math.ceil(height / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastRowOffset + Math.floor(height / 2)) {
- return lastRowOffset; // near the end
- } else {
- return middleOffset;
- }
- case 'auto':
- default:
- if (scrollTop >= minOffset && scrollTop <= maxOffset) {
- return scrollTop;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollTop < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
- }
- },
-
- getColumnStartIndexForOffset: (
- { columnWidth, columnCount }: Props,
- scrollLeft: number
- ): number =>
- Math.max(
- 0,
- Math.min(
- columnCount - 1,
- Math.floor(scrollLeft / ((columnWidth: any): number))
- )
- ),
-
- getColumnStopIndexForStartIndex: (
- { columnWidth, columnCount, width }: Props,
- startIndex: number,
- scrollLeft: number
- ): number => {
- const left = startIndex * ((columnWidth: any): number);
- const numVisibleColumns = Math.ceil(
- (width + scrollLeft - left) / ((columnWidth: any): number)
- );
- return Math.max(
- 0,
- Math.min(
- columnCount - 1,
- startIndex + numVisibleColumns - 1 // -1 is because stop index is inclusive
- )
- );
- },
-
- getRowStartIndexForOffset: (
- { rowHeight, rowCount }: Props,
- scrollTop: number
- ): number =>
- Math.max(
- 0,
- Math.min(rowCount - 1, Math.floor(scrollTop / ((rowHeight: any): number)))
- ),
-
- getRowStopIndexForStartIndex: (
- { rowHeight, rowCount, height }: Props,
- startIndex: number,
- scrollTop: number
- ): number => {
- const top = startIndex * ((rowHeight: any): number);
- const numVisibleRows = Math.ceil(
- (height + scrollTop - top) / ((rowHeight: any): number)
- );
- return Math.max(
- 0,
- Math.min(
- rowCount - 1,
- startIndex + numVisibleRows - 1 // -1 is because stop index is inclusive
- )
- );
- },
-
- initInstanceProps(props: Props): any {
- // Noop
- },
-
- shouldResetStyleCacheOnItemSizeChange: true,
-
- validateProps: ({ columnWidth, rowHeight }: Props): void => {
- if (process.env.NODE_ENV !== 'production') {
- if (typeof columnWidth !== 'number') {
- throw Error(
- 'An invalid "columnWidth" prop has been specified. ' +
- 'Value should be a number. ' +
- `"${
- columnWidth === null ? 'null' : typeof columnWidth
- }" was specified.`
- );
- }
-
- if (typeof rowHeight !== 'number') {
- throw Error(
- 'An invalid "rowHeight" prop has been specified. ' +
- 'Value should be a number. ' +
- `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
- );
- }
- }
- },
-});
-
-export default FixedSizeGrid;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js b/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js
deleted file mode 100644
index 5b6dab45988fb..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/FixedSizeList.js
+++ /dev/null
@@ -1,132 +0,0 @@
-// @flow
-
-import type {ComponentType} from "react";
-
-import createListComponent from './createListComponent';
-
-import type { Props, ScrollToAlign } from './createListComponent';
-
-const FixedSizeList: ComponentType> = createListComponent({
- getItemOffset: ({ itemSize }: Props, index: number): number =>
- index * ((itemSize: any): number),
-
- getItemSize: ({ itemSize }: Props, index: number): number =>
- ((itemSize: any): number),
-
- getEstimatedTotalSize: ({ itemCount, itemSize }: Props) =>
- ((itemSize: any): number) * itemCount,
-
- getOffsetForIndexAndAlignment: (
- { direction, height, itemCount, itemSize, layout, width }: Props,
- index: number,
- align: ScrollToAlign,
- scrollOffset: number
- ): number => {
- // TODO Deprecate direction "horizontal"
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- const size = (((isHorizontal ? width : height): any): number);
- const lastItemOffset = Math.max(
- 0,
- itemCount * ((itemSize: any): number) - size
- );
- const maxOffset = Math.min(
- lastItemOffset,
- index * ((itemSize: any): number)
- );
- const minOffset = Math.max(
- 0,
- index * ((itemSize: any): number) - size + ((itemSize: any): number)
- );
-
- if (align === 'smart') {
- if (
- scrollOffset >= minOffset - size &&
- scrollOffset <= maxOffset + size
- ) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
- case 'end':
- return minOffset;
- case 'center': {
- // "Centered" offset is usually the average of the min and max.
- // But near the edges of the list, this doesn't hold true.
- const middleOffset = Math.round(
- minOffset + (maxOffset - minOffset) / 2
- );
- if (middleOffset < Math.ceil(size / 2)) {
- return 0; // near the beginning
- } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
- return lastItemOffset; // near the end
- } else {
- return middleOffset;
- }
- }
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
- }
- },
-
- getStartIndexForOffset: (
- { itemCount, itemSize }: Props,
- offset: number
- ): number =>
- Math.max(
- 0,
- Math.min(itemCount - 1, Math.floor(offset / ((itemSize: any): number)))
- ),
-
- getStopIndexForStartIndex: (
- { direction, height, itemCount, itemSize, layout, width }: Props,
- startIndex: number,
- scrollOffset: number
- ): number => {
- // TODO Deprecate direction "horizontal"
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- const offset = startIndex * ((itemSize: any): number);
- const size = (((isHorizontal ? width : height): any): number);
- const numVisibleItems = Math.ceil(
- (size + scrollOffset - offset) / ((itemSize: any): number)
- );
- return Math.max(
- 0,
- Math.min(
- itemCount - 1,
- startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
- )
- );
- },
-
- initInstanceProps(props: Props): any {
- // Noop
- },
-
- shouldResetStyleCacheOnItemSizeChange: true,
-
- validateProps: ({ itemSize }: Props): void => {
- if (process.env.NODE_ENV !== 'production') {
- if (typeof itemSize !== 'number') {
- throw Error(
- 'An invalid "itemSize" prop has been specified. ' +
- 'Value should be a number. ' +
- `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`
- );
- }
- }
- },
-});
-
-export default FixedSizeList;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
deleted file mode 100644
index 6b0d6a65e987a..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeGrid.js
+++ /dev/null
@@ -1,509 +0,0 @@
-// @flow
-
-import type {ComponentType} from "react";
-
-import createGridComponent from './createGridComponent';
-
-import type { Props, ScrollToAlign } from './createGridComponent';
-
-const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
-
-type VariableSizeProps = {|
- estimatedColumnWidth: number,
- estimatedRowHeight: number,
- ...Props,
-|};
-
-type itemSizeGetter = (index: number) => number;
-type ItemType = 'column' | 'row';
-
-type ItemMetadata = {|
- offset: number,
- size: number,
-|};
-type ItemMetadataMap = { [index: number]: ItemMetadata, ... };
-type InstanceProps = {|
- columnMetadataMap: ItemMetadataMap,
- estimatedColumnWidth: number,
- estimatedRowHeight: number,
- lastMeasuredColumnIndex: number,
- lastMeasuredRowIndex: number,
- rowMetadataMap: ItemMetadataMap,
-|};
-
-const getEstimatedTotalHeight = (
- { rowCount }: Props,
- { rowMetadataMap, estimatedRowHeight, lastMeasuredRowIndex }: InstanceProps
-) => {
- let totalSizeOfMeasuredRows = 0;
-
- // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
- if (lastMeasuredRowIndex >= rowCount) {
- lastMeasuredRowIndex = rowCount - 1;
- }
-
- if (lastMeasuredRowIndex >= 0) {
- const itemMetadata = rowMetadataMap[lastMeasuredRowIndex];
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
- }
-
- const numUnmeasuredItems = rowCount - lastMeasuredRowIndex - 1;
- const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedRowHeight;
-
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
-};
-
-const getEstimatedTotalWidth = (
- { columnCount }: Props,
- {
- columnMetadataMap,
- estimatedColumnWidth,
- lastMeasuredColumnIndex,
- }: InstanceProps
-) => {
- let totalSizeOfMeasuredRows = 0;
-
- // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
- if (lastMeasuredColumnIndex >= columnCount) {
- lastMeasuredColumnIndex = columnCount - 1;
- }
-
- if (lastMeasuredColumnIndex >= 0) {
- const itemMetadata = columnMetadataMap[lastMeasuredColumnIndex];
- totalSizeOfMeasuredRows = itemMetadata.offset + itemMetadata.size;
- }
-
- const numUnmeasuredItems = columnCount - lastMeasuredColumnIndex - 1;
- const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedColumnWidth;
-
- return totalSizeOfMeasuredRows + totalSizeOfUnmeasuredItems;
-};
-
-const getItemMetadata = (
- itemType: ItemType,
- props: Props,
- index: number,
- instanceProps: InstanceProps
-): ItemMetadata => {
- let itemMetadataMap, itemSize, lastMeasuredIndex;
- if (itemType === 'column') {
- itemMetadataMap = instanceProps.columnMetadataMap;
- itemSize = ((props.columnWidth: any): itemSizeGetter);
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
- } else {
- itemMetadataMap = instanceProps.rowMetadataMap;
- itemSize = ((props.rowHeight: any): itemSizeGetter);
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
- }
-
- if (index > lastMeasuredIndex) {
- let offset = 0;
- if (lastMeasuredIndex >= 0) {
- const itemMetadata = itemMetadataMap[lastMeasuredIndex];
- offset = itemMetadata.offset + itemMetadata.size;
- }
-
- for (let i = lastMeasuredIndex + 1; i <= index; i++) {
- let size = itemSize(i);
-
- itemMetadataMap[i] = {
- offset,
- size,
- };
-
- offset += size;
- }
-
- if (itemType === 'column') {
- instanceProps.lastMeasuredColumnIndex = index;
- } else {
- instanceProps.lastMeasuredRowIndex = index;
- }
- }
-
- return itemMetadataMap[index];
-};
-
-const findNearestItem = (
- itemType: ItemType,
- props: Props,
- instanceProps: InstanceProps,
- offset: number
-) => {
- let itemMetadataMap, lastMeasuredIndex;
- if (itemType === 'column') {
- itemMetadataMap = instanceProps.columnMetadataMap;
- lastMeasuredIndex = instanceProps.lastMeasuredColumnIndex;
- } else {
- itemMetadataMap = instanceProps.rowMetadataMap;
- lastMeasuredIndex = instanceProps.lastMeasuredRowIndex;
- }
-
- const lastMeasuredItemOffset =
- lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
-
- if (lastMeasuredItemOffset >= offset) {
- // If we've already measured items within this range just use a binary search as it's faster.
- return findNearestItemBinarySearch(
- itemType,
- props,
- instanceProps,
- lastMeasuredIndex,
- 0,
- offset
- );
- } else {
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
- // The overall complexity for this approach is O(log n).
- return findNearestItemExponentialSearch(
- itemType,
- props,
- instanceProps,
- Math.max(0, lastMeasuredIndex),
- offset
- );
- }
-};
-
-const findNearestItemBinarySearch = (
- itemType: ItemType,
- props: Props,
- instanceProps: InstanceProps,
- high: number,
- low: number,
- offset: number
-): number => {
- while (low <= high) {
- const middle = low + Math.floor((high - low) / 2);
- const currentOffset = getItemMetadata(
- itemType,
- props,
- middle,
- instanceProps
- ).offset;
-
- if (currentOffset === offset) {
- return middle;
- } else if (currentOffset < offset) {
- low = middle + 1;
- } else if (currentOffset > offset) {
- high = middle - 1;
- }
- }
-
- if (low > 0) {
- return low - 1;
- } else {
- return 0;
- }
-};
-
-const findNearestItemExponentialSearch = (
- itemType: ItemType,
- props: Props,
- instanceProps: InstanceProps,
- index: number,
- offset: number
-): number => {
- const itemCount = itemType === 'column' ? props.columnCount : props.rowCount;
- let interval = 1;
-
- while (
- index < itemCount &&
- getItemMetadata(itemType, props, index, instanceProps).offset < offset
- ) {
- index += interval;
- interval *= 2;
- }
-
- return findNearestItemBinarySearch(
- itemType,
- props,
- instanceProps,
- Math.min(index, itemCount - 1),
- Math.floor(index / 2),
- offset
- );
-};
-
-const getOffsetForIndexAndAlignment = (
- itemType: ItemType,
- props: Props,
- index: number,
- align: ScrollToAlign,
- scrollOffset: number,
- instanceProps: InstanceProps,
- scrollbarSize: number
-): number => {
- const size = itemType === 'column' ? props.width : props.height;
- const itemMetadata = getItemMetadata(itemType, props, index, instanceProps);
-
- // Get estimated total size after ItemMetadata is computed,
- // To ensure it reflects actual measurements instead of just estimates.
- const estimatedTotalSize =
- itemType === 'column'
- ? getEstimatedTotalWidth(props, instanceProps)
- : getEstimatedTotalHeight(props, instanceProps);
-
- const maxOffset = Math.max(
- 0,
- Math.min(estimatedTotalSize - size, itemMetadata.offset)
- );
- const minOffset = Math.max(
- 0,
- itemMetadata.offset - size + scrollbarSize + itemMetadata.size
- );
-
- if (align === 'smart') {
- if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
- case 'end':
- return minOffset;
- case 'center':
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (minOffset > maxOffset) {
- // Because we only take into account the scrollbar size when calculating minOffset
- // this value can be larger than maxOffset when at the end of the list
- return minOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
- }
-};
-
-const VariableSizeGrid: ComponentType> = createGridComponent({
- getColumnOffset: (
- props: Props,
- index: number,
- instanceProps: InstanceProps
- ): number => getItemMetadata('column', props, index, instanceProps).offset,
-
- getColumnStartIndexForOffset: (
- props: Props,
- scrollLeft: number,
- instanceProps: InstanceProps
- ): number => findNearestItem('column', props, instanceProps, scrollLeft),
-
- getColumnStopIndexForStartIndex: (
- props: Props,
- startIndex: number,
- scrollLeft: number,
- instanceProps: InstanceProps
- ): number => {
- const { columnCount, width } = props;
-
- const itemMetadata = getItemMetadata(
- 'column',
- props,
- startIndex,
- instanceProps
- );
- const maxOffset = scrollLeft + width;
-
- let offset = itemMetadata.offset + itemMetadata.size;
- let stopIndex = startIndex;
-
- while (stopIndex < columnCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata('column', props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
-
- getColumnWidth: (
- props: Props,
- index: number,
- instanceProps: InstanceProps
- ): number => instanceProps.columnMetadataMap[index].size,
-
- getEstimatedTotalHeight,
- getEstimatedTotalWidth,
-
- getOffsetForColumnAndAlignment: (
- props: Props,
- index: number,
- align: ScrollToAlign,
- scrollOffset: number,
- instanceProps: InstanceProps,
- scrollbarSize: number
- ): number =>
- getOffsetForIndexAndAlignment(
- 'column',
- props,
- index,
- align,
- scrollOffset,
- instanceProps,
- scrollbarSize
- ),
-
- getOffsetForRowAndAlignment: (
- props: Props,
- index: number,
- align: ScrollToAlign,
- scrollOffset: number,
- instanceProps: InstanceProps,
- scrollbarSize: number
- ): number =>
- getOffsetForIndexAndAlignment(
- 'row',
- props,
- index,
- align,
- scrollOffset,
- instanceProps,
- scrollbarSize
- ),
-
- getRowOffset: (
- props: Props,
- index: number,
- instanceProps: InstanceProps
- ): number => getItemMetadata('row', props, index, instanceProps).offset,
-
- getRowHeight: (
- props: Props,
- index: number,
- instanceProps: InstanceProps
- ): number => instanceProps.rowMetadataMap[index].size,
-
- getRowStartIndexForOffset: (
- props: Props,
- scrollTop: number,
- instanceProps: InstanceProps
- ): number => findNearestItem('row', props, instanceProps, scrollTop),
-
- getRowStopIndexForStartIndex: (
- props: Props,
- startIndex: number,
- scrollTop: number,
- instanceProps: InstanceProps
- ): number => {
- const { rowCount, height } = props;
-
- const itemMetadata = getItemMetadata(
- 'row',
- props,
- startIndex,
- instanceProps
- );
- const maxOffset = scrollTop + height;
-
- let offset = itemMetadata.offset + itemMetadata.size;
- let stopIndex = startIndex;
-
- while (stopIndex < rowCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata('row', props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
-
- initInstanceProps(props: Props, instance: any): InstanceProps {
- const {
- estimatedColumnWidth,
- estimatedRowHeight,
- } = ((props: any): VariableSizeProps);
-
- const instanceProps = {
- columnMetadataMap: {},
- estimatedColumnWidth: estimatedColumnWidth || DEFAULT_ESTIMATED_ITEM_SIZE,
- estimatedRowHeight: estimatedRowHeight || DEFAULT_ESTIMATED_ITEM_SIZE,
- lastMeasuredColumnIndex: -1,
- lastMeasuredRowIndex: -1,
- rowMetadataMap: {},
- };
-
- instance.resetAfterColumnIndex = (
- columnIndex: number,
- shouldForceUpdate?: boolean = true
- ) => {
- instance.resetAfterIndices({ columnIndex, shouldForceUpdate });
- };
-
- instance.resetAfterRowIndex = (
- rowIndex: number,
- shouldForceUpdate?: boolean = true
- ) => {
- instance.resetAfterIndices({ rowIndex, shouldForceUpdate });
- };
-
- instance.resetAfterIndices = ({
- columnIndex,
- rowIndex,
- shouldForceUpdate = true,
- }: {
- columnIndex?: number,
- rowIndex?: number,
- shouldForceUpdate: boolean,
- }) => {
- if (typeof columnIndex === 'number') {
- instanceProps.lastMeasuredColumnIndex = Math.min(
- instanceProps.lastMeasuredColumnIndex,
- columnIndex - 1
- );
- }
- if (typeof rowIndex === 'number') {
- instanceProps.lastMeasuredRowIndex = Math.min(
- instanceProps.lastMeasuredRowIndex,
- rowIndex - 1
- );
- }
-
- // We could potentially optimize further by only evicting styles after this index,
- // But since styles are only cached while scrolling is in progress-
- // It seems an unnecessary optimization.
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
- instance._getItemStyleCache(-1);
-
- if (shouldForceUpdate) {
- instance.forceUpdate();
- }
- };
-
- return instanceProps;
- },
-
- shouldResetStyleCacheOnItemSizeChange: false,
-
- validateProps: ({ columnWidth, rowHeight }: Props): void => {
- if (process.env.NODE_ENV !== 'production') {
- if (typeof columnWidth !== 'function') {
- throw Error(
- 'An invalid "columnWidth" prop has been specified. ' +
- 'Value should be a function. ' +
- `"${
- columnWidth === null ? 'null' : typeof columnWidth
- }" was specified.`
- );
- } else if (typeof rowHeight !== 'function') {
- throw Error(
- 'An invalid "rowHeight" prop has been specified. ' +
- 'Value should be a function. ' +
- `"${rowHeight === null ? 'null' : typeof rowHeight}" was specified.`
- );
- }
- }
- },
-});
-
-export default VariableSizeGrid;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js b/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
deleted file mode 100644
index fa876ad994cbf..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/VariableSizeList.js
+++ /dev/null
@@ -1,318 +0,0 @@
-// @flow
-
-import type {ComponentType} from "react";
-
-import createListComponent from './createListComponent';
-
-import type { Props, ScrollToAlign } from './createListComponent';
-
-const DEFAULT_ESTIMATED_ITEM_SIZE = 50;
-
-type VariableSizeProps = {|
- estimatedItemSize: number,
- ...Props,
-|};
-
-type itemSizeGetter = (index: number) => number;
-
-type ItemMetadata = {|
- offset: number,
- size: number,
-|};
-type InstanceProps = {|
- itemMetadataMap: { [index: number]: ItemMetadata, ... },
- estimatedItemSize: number,
- lastMeasuredIndex: number,
-|};
-
-const getItemMetadata = (
- props: Props,
- index: number,
- instanceProps: InstanceProps
-): ItemMetadata => {
- const { itemSize } = ((props: any): VariableSizeProps);
- const { itemMetadataMap, lastMeasuredIndex } = instanceProps;
-
- if (index > lastMeasuredIndex) {
- let offset = 0;
- if (lastMeasuredIndex >= 0) {
- const itemMetadata = itemMetadataMap[lastMeasuredIndex];
- offset = itemMetadata.offset + itemMetadata.size;
- }
-
- for (let i = lastMeasuredIndex + 1; i <= index; i++) {
- let size = ((itemSize: any): itemSizeGetter)(i);
-
- itemMetadataMap[i] = {
- offset,
- size,
- };
-
- offset += size;
- }
-
- instanceProps.lastMeasuredIndex = index;
- }
-
- return itemMetadataMap[index];
-};
-
-const findNearestItem = (
- props: Props,
- instanceProps: InstanceProps,
- offset: number
-) => {
- const { itemMetadataMap, lastMeasuredIndex } = instanceProps;
-
- const lastMeasuredItemOffset =
- lastMeasuredIndex > 0 ? itemMetadataMap[lastMeasuredIndex].offset : 0;
-
- if (lastMeasuredItemOffset >= offset) {
- // If we've already measured items within this range just use a binary search as it's faster.
- return findNearestItemBinarySearch(
- props,
- instanceProps,
- lastMeasuredIndex,
- 0,
- offset
- );
- } else {
- // If we haven't yet measured this high, fallback to an exponential search with an inner binary search.
- // The exponential search avoids pre-computing sizes for the full set of items as a binary search would.
- // The overall complexity for this approach is O(log n).
- return findNearestItemExponentialSearch(
- props,
- instanceProps,
- Math.max(0, lastMeasuredIndex),
- offset
- );
- }
-};
-
-const findNearestItemBinarySearch = (
- props: Props,
- instanceProps: InstanceProps,
- high: number,
- low: number,
- offset: number
-): number => {
- while (low <= high) {
- const middle = low + Math.floor((high - low) / 2);
- const currentOffset = getItemMetadata(props, middle, instanceProps).offset;
-
- if (currentOffset === offset) {
- return middle;
- } else if (currentOffset < offset) {
- low = middle + 1;
- } else if (currentOffset > offset) {
- high = middle - 1;
- }
- }
-
- if (low > 0) {
- return low - 1;
- } else {
- return 0;
- }
-};
-
-const findNearestItemExponentialSearch = (
- props: Props,
- instanceProps: InstanceProps,
- index: number,
- offset: number
-): number => {
- const { itemCount } = props;
- let interval = 1;
-
- while (
- index < itemCount &&
- getItemMetadata(props, index, instanceProps).offset < offset
- ) {
- index += interval;
- interval *= 2;
- }
-
- return findNearestItemBinarySearch(
- props,
- instanceProps,
- Math.min(index, itemCount - 1),
- Math.floor(index / 2),
- offset
- );
-};
-
-const getEstimatedTotalSize = (
- { itemCount }: Props,
- { itemMetadataMap, estimatedItemSize, lastMeasuredIndex }: InstanceProps
-) => {
- let totalSizeOfMeasuredItems = 0;
-
- // Edge case check for when the number of items decreases while a scroll is in progress.
- // https://github.com/bvaughn/react-window/pull/138
- if (lastMeasuredIndex >= itemCount) {
- lastMeasuredIndex = itemCount - 1;
- }
-
- if (lastMeasuredIndex >= 0) {
- const itemMetadata = itemMetadataMap[lastMeasuredIndex];
- totalSizeOfMeasuredItems = itemMetadata.offset + itemMetadata.size;
- }
-
- const numUnmeasuredItems = itemCount - lastMeasuredIndex - 1;
- const totalSizeOfUnmeasuredItems = numUnmeasuredItems * estimatedItemSize;
-
- return totalSizeOfMeasuredItems + totalSizeOfUnmeasuredItems;
-};
-
-const VariableSizeList: ComponentType> = createListComponent({
- getItemOffset: (
- props: Props,
- index: number,
- instanceProps: InstanceProps
- ): number => getItemMetadata(props, index, instanceProps).offset,
-
- getItemSize: (
- props: Props,
- index: number,
- instanceProps: InstanceProps
- ): number => instanceProps.itemMetadataMap[index].size,
-
- getEstimatedTotalSize,
-
- getOffsetForIndexAndAlignment: (
- props: Props,
- index: number,
- align: ScrollToAlign,
- scrollOffset: number,
- instanceProps: InstanceProps
- ): number => {
- const { direction, height, layout, width } = props;
-
- // TODO Deprecate direction "horizontal"
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- const size = (((isHorizontal ? width : height): any): number);
- const itemMetadata = getItemMetadata(props, index, instanceProps);
-
- // Get estimated total size after ItemMetadata is computed,
- // To ensure it reflects actual measurements instead of just estimates.
- const estimatedTotalSize = getEstimatedTotalSize(props, instanceProps);
-
- const maxOffset = Math.max(
- 0,
- Math.min(estimatedTotalSize - size, itemMetadata.offset)
- );
- const minOffset = Math.max(
- 0,
- itemMetadata.offset - size + itemMetadata.size
- );
-
- if (align === 'smart') {
- if (
- scrollOffset >= minOffset - size &&
- scrollOffset <= maxOffset + size
- ) {
- align = 'auto';
- } else {
- align = 'center';
- }
- }
-
- switch (align) {
- case 'start':
- return maxOffset;
- case 'end':
- return minOffset;
- case 'center':
- return Math.round(minOffset + (maxOffset - minOffset) / 2);
- case 'auto':
- default:
- if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
- return scrollOffset;
- } else if (scrollOffset < minOffset) {
- return minOffset;
- } else {
- return maxOffset;
- }
- }
- },
-
- getStartIndexForOffset: (
- props: Props,
- offset: number,
- instanceProps: InstanceProps
- ): number => findNearestItem(props, instanceProps, offset),
-
- getStopIndexForStartIndex: (
- props: Props,
- startIndex: number,
- scrollOffset: number,
- instanceProps: InstanceProps
- ): number => {
- const { direction, height, itemCount, layout, width } = props;
-
- // TODO Deprecate direction "horizontal"
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
- const size = (((isHorizontal ? width : height): any): number);
- const itemMetadata = getItemMetadata(props, startIndex, instanceProps);
- const maxOffset = scrollOffset + size;
-
- let offset = itemMetadata.offset + itemMetadata.size;
- let stopIndex = startIndex;
-
- while (stopIndex < itemCount - 1 && offset < maxOffset) {
- stopIndex++;
- offset += getItemMetadata(props, stopIndex, instanceProps).size;
- }
-
- return stopIndex;
- },
-
- initInstanceProps(props: Props, instance: any): InstanceProps {
- const { estimatedItemSize } = ((props: any): VariableSizeProps);
-
- const instanceProps = {
- itemMetadataMap: {},
- estimatedItemSize: estimatedItemSize || DEFAULT_ESTIMATED_ITEM_SIZE,
- lastMeasuredIndex: -1,
- };
-
- instance.resetAfterIndex = (
- index: number,
- shouldForceUpdate?: boolean = true
- ) => {
- instanceProps.lastMeasuredIndex = Math.min(
- instanceProps.lastMeasuredIndex,
- index - 1
- );
-
- // We could potentially optimize further by only evicting styles after this index,
- // But since styles are only cached while scrolling is in progress-
- // It seems an unnecessary optimization.
- // It's unlikely that resetAfterIndex() will be called while a user is scrolling.
- instance._getItemStyleCache(-1);
-
- if (shouldForceUpdate) {
- instance.forceUpdate();
- }
- };
-
- return instanceProps;
- },
-
- shouldResetStyleCacheOnItemSizeChange: false,
-
- validateProps: ({ itemSize }: Props): void => {
- if (process.env.NODE_ENV !== 'production') {
- if (typeof itemSize !== 'function') {
- throw Error(
- 'An invalid "itemSize" prop has been specified. ' +
- 'Value should be a function. ' +
- `"${itemSize === null ? 'null' : typeof itemSize}" was specified.`
- );
- }
- }
- },
-});
-
-export default VariableSizeList;
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/areEqual.js b/packages/react-devtools-shared/src/node_modules/react-window/src/areEqual.js
deleted file mode 100644
index 072951ef67753..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/areEqual.js
+++ /dev/null
@@ -1,18 +0,0 @@
-// @flow
-
-import shallowDiffers from './shallowDiffers';
-
-// Custom comparison function for React.memo().
-// It knows to compare individual style props and ignore the wrapper object.
-// See https://reactjs.org/docs/react-api.html#reactmemo
-export default function areEqual(
- prevProps: Object,
- nextProps: Object
-): boolean {
- const { style: prevStyle, ...prevRest } = prevProps;
- const { style: nextStyle, ...nextRest } = nextProps;
-
- return (
- !shallowDiffers(prevStyle, nextStyle) && !shallowDiffers(prevRest, nextRest)
- );
-}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
deleted file mode 100644
index a4c90eba85f32..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/createGridComponent.js
+++ /dev/null
@@ -1,921 +0,0 @@
-// @flow
-
-import memoizeOne from 'memoize-one';
-import * as React from 'react';
-import { createElement, PureComponent } from 'react';
-import { cancelTimeout, requestTimeout } from './timer';
-import { getScrollbarSize, getRTLOffsetType } from './domHelpers';
-
-import type { TimeoutID } from './timer';
-
-type Direction = 'ltr' | 'rtl';
-export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
-
-type itemSize = number | ((index: number) => number);
-
-type RenderComponentProps = {|
- columnIndex: number,
- data: T,
- isScrolling?: boolean,
- rowIndex: number,
- style: Object,
-|};
-export type RenderComponent = React$ComponentType<
- $Shape>
->;
-
-type ScrollDirection = 'forward' | 'backward';
-
-type OnItemsRenderedCallback = ({
- overscanColumnStartIndex: number,
- overscanColumnStopIndex: number,
- overscanRowStartIndex: number,
- overscanRowStopIndex: number,
- visibleColumnStartIndex: number,
- visibleColumnStopIndex: number,
- visibleRowStartIndex: number,
- visibleRowStopIndex: number,
-}) => void;
-type OnScrollCallback = ({
- horizontalScrollDirection: ScrollDirection,
- scrollLeft: number,
- scrollTop: number,
- scrollUpdateWasRequested: boolean,
- verticalScrollDirection: ScrollDirection,
-}) => void;
-
-type ScrollEvent = SyntheticEvent;
-type ItemStyleCache = { [key: string]: Object };
-
-type OuterProps = {|
- children: React$Node,
- className: string | void,
- onScroll: ScrollEvent => void,
- style: {
- [string]: mixed,
- },
-|};
-
-type InnerProps = {|
- children: React$Node,
- style: {
- [string]: mixed,
- },
-|};
-
-export type Props = {|
- children: RenderComponent,
- className?: string,
- columnCount: number,
- columnWidth: itemSize,
- direction: Direction,
- height: number,
- initialScrollLeft?: number,
- initialScrollTop?: number,
- innerRef?: any,
- innerElementType?: string | React.AbstractComponent,
- innerTagName?: string, // deprecated
- itemData: T,
- itemKey?: (params: {|
- columnIndex: number,
- data: T,
- rowIndex: number,
- |}) => any,
- onItemsRendered?: OnItemsRenderedCallback,
- onScroll?: OnScrollCallback,
- outerRef?: any,
- outerElementType?: string | React.AbstractComponent,
- outerTagName?: string, // deprecated
- overscanColumnCount?: number,
- overscanColumnsCount?: number, // deprecated
- overscanCount?: number, // deprecated
- overscanRowCount?: number,
- overscanRowsCount?: number, // deprecated
- rowCount: number,
- rowHeight: itemSize,
- style?: Object,
- useIsScrolling: boolean,
- width: number,
-|};
-
-type State = {|
- instance: any,
- isScrolling: boolean,
- horizontalScrollDirection: ScrollDirection,
- scrollLeft: number,
- scrollTop: number,
- scrollUpdateWasRequested: boolean,
- verticalScrollDirection: ScrollDirection,
-|};
-
-type getItemOffset = (
- props: Props,
- index: number,
- instanceProps: any
-) => number;
-type getItemSize = (
- props: Props,
- index: number,
- instanceProps: any
-) => number;
-type getEstimatedTotalSize = (props: Props, instanceProps: any) => number;
-type GetOffsetForItemAndAlignment = (
- props: Props,
- index: number,
- align: ScrollToAlign,
- scrollOffset: number,
- instanceProps: any,
- scrollbarSize: number
-) => number;
-type GetStartIndexForOffset = (
- props: Props,
- offset: number,
- instanceProps: any
-) => number;
-type GetStopIndexForStartIndex = (
- props: Props,
- startIndex: number,
- scrollOffset: number,
- instanceProps: any
-) => number;
-type InitInstanceProps = (props: Props, instance: any) => any;
-type ValidateProps = (props: Props) => void;
-
-const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
-
-const defaultItemKey = (
- {
- columnIndex,
- data,
- rowIndex
- }: { columnIndex: number, data: any, rowIndex: number },
-) =>
- `${rowIndex}:${columnIndex}`;
-
-// In DEV mode, this Set helps us only log a warning once per component instance.
-// This avoids spamming the console every time a render happens.
-let devWarningsOverscanCount = null;
-let devWarningsOverscanRowsColumnsCount = null;
-let devWarningsTagName = null;
-if (process.env.NODE_ENV !== 'production') {
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
- devWarningsOverscanCount = new WeakSet();
- devWarningsOverscanRowsColumnsCount = new WeakSet();
- devWarningsTagName = new WeakSet();
- }
-}
-
-export default function createGridComponent({
- getColumnOffset,
- getColumnStartIndexForOffset,
- getColumnStopIndexForStartIndex,
- getColumnWidth,
- getEstimatedTotalHeight,
- getEstimatedTotalWidth,
- getOffsetForColumnAndAlignment,
- getOffsetForRowAndAlignment,
- getRowHeight,
- getRowOffset,
- getRowStartIndexForOffset,
- getRowStopIndexForStartIndex,
- initInstanceProps,
- shouldResetStyleCacheOnItemSizeChange,
- validateProps,
-}: {|
- getColumnOffset: getItemOffset,
- getColumnStartIndexForOffset: GetStartIndexForOffset,
- getColumnStopIndexForStartIndex: GetStopIndexForStartIndex,
- getColumnWidth: getItemSize,
- getEstimatedTotalHeight: getEstimatedTotalSize,
- getEstimatedTotalWidth: getEstimatedTotalSize,
- getOffsetForColumnAndAlignment: GetOffsetForItemAndAlignment,
- getOffsetForRowAndAlignment: GetOffsetForItemAndAlignment,
- getRowOffset: getItemOffset,
- getRowHeight: getItemSize,
- getRowStartIndexForOffset: GetStartIndexForOffset,
- getRowStopIndexForStartIndex: GetStopIndexForStartIndex,
- initInstanceProps: InitInstanceProps,
- shouldResetStyleCacheOnItemSizeChange: boolean,
- validateProps: ValidateProps,
-|}): React.ComponentType> {
- return class Grid extends PureComponent, State> {
- _instanceProps: any = initInstanceProps(this.props, this);
- _resetIsScrollingTimeoutId: TimeoutID | null = null;
- _outerRef: ?HTMLDivElement;
-
- static defaultProps: { direction: string, itemData: void, useIsScrolling: boolean } = {
- direction: 'ltr',
- itemData: undefined,
- useIsScrolling: false,
- };
-
- state: State = {
- instance: this,
- isScrolling: false,
- horizontalScrollDirection: 'forward',
- scrollLeft:
- typeof this.props.initialScrollLeft === 'number'
- ? this.props.initialScrollLeft
- : 0,
- scrollTop:
- typeof this.props.initialScrollTop === 'number'
- ? this.props.initialScrollTop
- : 0,
- scrollUpdateWasRequested: false,
- verticalScrollDirection: 'forward',
- };
-
- // Always use explicit constructor for React components.
- // It produces less code after transpilation. (#26)
- // eslint-disable-next-line no-useless-constructor
- constructor(props: Props) {
- super(props);
- }
-
- static getDerivedStateFromProps(
- nextProps: Props,
- prevState: State
- ): $Shape | null {
- validateSharedProps(nextProps, prevState);
- validateProps(nextProps);
- return null;
- }
-
- scrollTo({
- scrollLeft,
- scrollTop,
- }: {
- scrollLeft: number,
- scrollTop: number,
- }): void {
- if (scrollLeft !== undefined) {
- scrollLeft = Math.max(0, scrollLeft);
- }
- if (scrollTop !== undefined) {
- scrollTop = Math.max(0, scrollTop);
- }
-
- this.setState(prevState => {
- if (scrollLeft === undefined) {
- scrollLeft = prevState.scrollLeft;
- }
- if (scrollTop === undefined) {
- scrollTop = prevState.scrollTop;
- }
-
- if (
- prevState.scrollLeft === scrollLeft &&
- prevState.scrollTop === scrollTop
- ) {
- return null;
- }
-
- return {
- horizontalScrollDirection:
- prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
- scrollLeft: scrollLeft,
- scrollTop: scrollTop,
- scrollUpdateWasRequested: true,
- verticalScrollDirection:
- prevState.scrollTop < scrollTop ? 'forward' : 'backward',
- };
- }, this._resetIsScrollingDebounced);
- }
-
- scrollToItem({
- align = 'auto',
- columnIndex,
- rowIndex,
- }: {
- align: ScrollToAlign,
- columnIndex?: number,
- rowIndex?: number,
- }): void {
- const { columnCount, height, rowCount, width } = this.props;
- const { scrollLeft, scrollTop } = this.state;
- const scrollbarSize = getScrollbarSize();
-
- if (columnIndex !== undefined) {
- columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
- }
- if (rowIndex !== undefined) {
- rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
- }
-
- const estimatedTotalHeight = getEstimatedTotalHeight(
- this.props,
- this._instanceProps
- );
- const estimatedTotalWidth = getEstimatedTotalWidth(
- this.props,
- this._instanceProps
- );
-
- // The scrollbar size should be considered when scrolling an item into view,
- // to ensure it's fully visible.
- // But we only need to account for its size when it's actually visible.
- const horizontalScrollbarSize =
- estimatedTotalWidth > width ? scrollbarSize : 0;
- const verticalScrollbarSize =
- estimatedTotalHeight > height ? scrollbarSize : 0;
-
- this.scrollTo({
- scrollLeft:
- columnIndex !== undefined
- ? getOffsetForColumnAndAlignment(
- this.props,
- columnIndex,
- align,
- scrollLeft,
- this._instanceProps,
- verticalScrollbarSize
- )
- : scrollLeft,
- scrollTop:
- rowIndex !== undefined
- ? getOffsetForRowAndAlignment(
- this.props,
- rowIndex,
- align,
- scrollTop,
- this._instanceProps,
- horizontalScrollbarSize
- )
- : scrollTop,
- });
- }
-
- componentDidMount() {
- const { initialScrollLeft, initialScrollTop } = this.props;
-
- if (this._outerRef != null) {
- const outerRef = ((this._outerRef: any): HTMLElement);
- if (typeof initialScrollLeft === 'number') {
- outerRef.scrollLeft = initialScrollLeft;
- }
- if (typeof initialScrollTop === 'number') {
- outerRef.scrollTop = initialScrollTop;
- }
- }
-
- this._callPropsCallbacks();
- }
-
- componentDidUpdate() {
- const { direction } = this.props;
- const { scrollLeft, scrollTop, scrollUpdateWasRequested } = this.state;
-
- if (scrollUpdateWasRequested && this._outerRef != null) {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // So we need to determine which browser behavior we're dealing with, and mimic it.
- const outerRef = ((this._outerRef: any): HTMLElement);
- if (direction === 'rtl') {
- switch (getRTLOffsetType()) {
- case 'negative':
- outerRef.scrollLeft = -scrollLeft;
- break;
- case 'positive-ascending':
- outerRef.scrollLeft = scrollLeft;
- break;
- default:
- const { clientWidth, scrollWidth } = outerRef;
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- } else {
- outerRef.scrollLeft = Math.max(0, scrollLeft);
- }
-
- outerRef.scrollTop = Math.max(0, scrollTop);
- }
-
- this._callPropsCallbacks();
- }
-
- componentWillUnmount() {
- if (this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(this._resetIsScrollingTimeoutId);
- }
- }
-
- render(): any {
- const {
- children,
- className,
- columnCount,
- direction,
- height,
- innerRef,
- innerElementType,
- innerTagName,
- itemData,
- itemKey = defaultItemKey,
- outerElementType,
- outerTagName,
- rowCount,
- style,
- useIsScrolling,
- width,
- } = this.props;
- const { isScrolling } = this.state;
-
- const [
- columnStartIndex,
- columnStopIndex,
- ] = this._getHorizontalRangeToRender();
- const [rowStartIndex, rowStopIndex] = this._getVerticalRangeToRender();
-
- const items = [];
- if (columnCount > 0 && rowCount) {
- for (
- let rowIndex = rowStartIndex;
- rowIndex <= rowStopIndex;
- rowIndex++
- ) {
- for (
- let columnIndex = columnStartIndex;
- columnIndex <= columnStopIndex;
- columnIndex++
- ) {
- items.push(
- createElement(children, {
- columnIndex,
- data: itemData,
- isScrolling: useIsScrolling ? isScrolling : undefined,
- key: itemKey({ columnIndex, data: itemData, rowIndex }),
- rowIndex,
- style: this._getItemStyle(rowIndex, columnIndex),
- })
- );
- }
- }
- }
-
- // Read this value AFTER items have been created,
- // So their actual sizes (if variable) are taken into consideration.
- const estimatedTotalHeight = getEstimatedTotalHeight(
- this.props,
- this._instanceProps
- );
- const estimatedTotalWidth = getEstimatedTotalWidth(
- this.props,
- this._instanceProps
- );
-
- return createElement(
- outerElementType || outerTagName || 'div',
- {
- className,
- onScroll: this._onScroll,
- ref: this._outerRefSetter,
- style: {
- position: 'relative',
- height,
- width,
- overflow: 'auto',
- WebkitOverflowScrolling: 'touch',
- willChange: 'transform',
- direction,
- ...style,
- },
- },
- createElement(innerElementType || innerTagName || 'div', {
- children: items,
- ref: innerRef,
- style: {
- height: estimatedTotalHeight,
- pointerEvents: isScrolling ? 'none' : undefined,
- width: estimatedTotalWidth,
- },
- })
- );
- }
-
- _callOnItemsRendered: ((
- overscanColumnStartIndex: number,
- overscanColumnStopIndex: number,
- overscanRowStartIndex: number,
- overscanRowStopIndex: number,
- visibleColumnStartIndex: number,
- visibleColumnStopIndex: number,
- visibleRowStartIndex: number,
- visibleRowStopIndex: number
- ) => void) = memoizeOne(
- (
- overscanColumnStartIndex: number,
- overscanColumnStopIndex: number,
- overscanRowStartIndex: number,
- overscanRowStopIndex: number,
- visibleColumnStartIndex: number,
- visibleColumnStopIndex: number,
- visibleRowStartIndex: number,
- visibleRowStopIndex: number
- ) =>
- ((this.props.onItemsRendered: any): OnItemsRenderedCallback)({
- overscanColumnStartIndex,
- overscanColumnStopIndex,
- overscanRowStartIndex,
- overscanRowStopIndex,
- visibleColumnStartIndex,
- visibleColumnStopIndex,
- visibleRowStartIndex,
- visibleRowStopIndex,
- })
- );
-
- _callOnScroll: ((
- scrollLeft: number,
- scrollTop: number,
- horizontalScrollDirection: ScrollDirection,
- verticalScrollDirection: ScrollDirection,
- scrollUpdateWasRequested: boolean
- ) => void) = memoizeOne(
- (
- scrollLeft: number,
- scrollTop: number,
- horizontalScrollDirection: ScrollDirection,
- verticalScrollDirection: ScrollDirection,
- scrollUpdateWasRequested: boolean
- ) =>
- ((this.props.onScroll: any): OnScrollCallback)({
- horizontalScrollDirection,
- scrollLeft,
- scrollTop,
- verticalScrollDirection,
- scrollUpdateWasRequested,
- })
- );
-
- _callPropsCallbacks() {
- const { columnCount, onItemsRendered, onScroll, rowCount } = this.props;
-
- if (typeof onItemsRendered === 'function') {
- if (columnCount > 0 && rowCount > 0) {
- const [
- overscanColumnStartIndex,
- overscanColumnStopIndex,
- visibleColumnStartIndex,
- visibleColumnStopIndex,
- ] = this._getHorizontalRangeToRender();
- const [
- overscanRowStartIndex,
- overscanRowStopIndex,
- visibleRowStartIndex,
- visibleRowStopIndex,
- ] = this._getVerticalRangeToRender();
- this._callOnItemsRendered(
- overscanColumnStartIndex,
- overscanColumnStopIndex,
- overscanRowStartIndex,
- overscanRowStopIndex,
- visibleColumnStartIndex,
- visibleColumnStopIndex,
- visibleRowStartIndex,
- visibleRowStopIndex
- );
- }
- }
-
- if (typeof onScroll === 'function') {
- const {
- horizontalScrollDirection,
- scrollLeft,
- scrollTop,
- scrollUpdateWasRequested,
- verticalScrollDirection,
- } = this.state;
- this._callOnScroll(
- scrollLeft,
- scrollTop,
- horizontalScrollDirection,
- verticalScrollDirection,
- scrollUpdateWasRequested
- );
- }
- }
-
- // Lazily create and cache item styles while scrolling,
- // So that pure component sCU will prevent re-renders.
- // We maintain this cache, and pass a style prop rather than index,
- // So that List can clear cached styles and force item re-render if necessary.
- _getItemStyle = (rowIndex: number, columnIndex: number): Object => {
- const { columnWidth, direction, rowHeight } = this.props;
-
- const itemStyleCache = this._getItemStyleCache(
- shouldResetStyleCacheOnItemSizeChange && columnWidth,
- shouldResetStyleCacheOnItemSizeChange && direction,
- shouldResetStyleCacheOnItemSizeChange && rowHeight
- );
-
- const key = `${rowIndex}:${columnIndex}`;
-
- let style;
- if (itemStyleCache.hasOwnProperty(key)) {
- style = itemStyleCache[key];
- } else {
- itemStyleCache[key] = style = {
- position: 'absolute',
- // $FlowFixMe computed properties are unsupported
- [direction === 'rtl' ? 'right' : 'left']: getColumnOffset(
- this.props,
- columnIndex,
- this._instanceProps
- ),
- top: getRowOffset(this.props, rowIndex, this._instanceProps),
- height: getRowHeight(this.props, rowIndex, this._instanceProps),
- width: getColumnWidth(this.props, columnIndex, this._instanceProps),
- };
- }
-
- return style;
- };
-
- _getItemStyleCache: ((_: any, __: any, ___: any) => ItemStyleCache) =
- memoizeOne((_: any, __: any, ___: any) => ({}));
-
- _getHorizontalRangeToRender(): [number, number, number, number] {
- const {
- columnCount,
- overscanColumnCount,
- overscanColumnsCount,
- overscanCount,
- rowCount,
- } = this.props;
- const { horizontalScrollDirection, isScrolling, scrollLeft } = this.state;
-
- const overscanCountResolved: number =
- overscanColumnCount || overscanColumnsCount || overscanCount || 1;
-
- if (columnCount === 0 || rowCount === 0) {
- return [0, 0, 0, 0];
- }
-
- const startIndex = getColumnStartIndexForOffset(
- this.props,
- scrollLeft,
- this._instanceProps
- );
- const stopIndex = getColumnStopIndexForStartIndex(
- this.props,
- startIndex,
- scrollLeft,
- this._instanceProps
- );
-
- // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
- const overscanBackward =
- !isScrolling || horizontalScrollDirection === 'backward'
- ? Math.max(1, overscanCountResolved)
- : 1;
- const overscanForward =
- !isScrolling || horizontalScrollDirection === 'forward'
- ? Math.max(1, overscanCountResolved)
- : 1;
-
- return [
- Math.max(0, startIndex - overscanBackward),
- Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)),
- startIndex,
- stopIndex,
- ];
- }
-
- _getVerticalRangeToRender(): [number, number, number, number] {
- const {
- columnCount,
- overscanCount,
- overscanRowCount,
- overscanRowsCount,
- rowCount,
- } = this.props;
- const { isScrolling, verticalScrollDirection, scrollTop } = this.state;
-
- const overscanCountResolved: number =
- overscanRowCount || overscanRowsCount || overscanCount || 1;
-
- if (columnCount === 0 || rowCount === 0) {
- return [0, 0, 0, 0];
- }
-
- const startIndex = getRowStartIndexForOffset(
- this.props,
- scrollTop,
- this._instanceProps
- );
- const stopIndex = getRowStopIndexForStartIndex(
- this.props,
- startIndex,
- scrollTop,
- this._instanceProps
- );
-
- // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
- const overscanBackward =
- !isScrolling || verticalScrollDirection === 'backward'
- ? Math.max(1, overscanCountResolved)
- : 1;
- const overscanForward =
- !isScrolling || verticalScrollDirection === 'forward'
- ? Math.max(1, overscanCountResolved)
- : 1;
-
- return [
- Math.max(0, startIndex - overscanBackward),
- Math.max(0, Math.min(rowCount - 1, stopIndex + overscanForward)),
- startIndex,
- stopIndex,
- ];
- }
-
- _onScroll = (event: ScrollEvent): void => {
- const {
- clientHeight,
- clientWidth,
- scrollLeft,
- scrollTop,
- scrollHeight,
- scrollWidth,
- } = event.currentTarget;
- this.setState(prevState => {
- if (
- prevState.scrollLeft === scrollLeft &&
- prevState.scrollTop === scrollTop
- ) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- }
-
- const { direction } = this.props;
-
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
- let calculatedScrollLeft = scrollLeft;
- if (direction === 'rtl') {
- switch (getRTLOffsetType()) {
- case 'negative':
- calculatedScrollLeft = -scrollLeft;
- break;
- case 'positive-descending':
- calculatedScrollLeft = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- }
-
- // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
- calculatedScrollLeft = Math.max(
- 0,
- Math.min(calculatedScrollLeft, scrollWidth - clientWidth)
- );
- const calculatedScrollTop = Math.max(
- 0,
- Math.min(scrollTop, scrollHeight - clientHeight)
- );
-
- return {
- isScrolling: true,
- horizontalScrollDirection:
- prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
- scrollLeft: calculatedScrollLeft,
- scrollTop: calculatedScrollTop,
- verticalScrollDirection:
- prevState.scrollTop < scrollTop ? 'forward' : 'backward',
- scrollUpdateWasRequested: false,
- };
- }, this._resetIsScrollingDebounced);
- };
-
- _outerRefSetter = (ref: any): void => {
- const { outerRef } = this.props;
-
- this._outerRef = ((ref: any): HTMLDivElement);
-
- if (typeof outerRef === 'function') {
- outerRef(ref);
- } else if (
- outerRef != null &&
- typeof outerRef === 'object' &&
- outerRef.hasOwnProperty('current')
- ) {
- outerRef.current = ref;
- }
- };
-
- _resetIsScrollingDebounced = () => {
- if (this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(this._resetIsScrollingTimeoutId);
- }
-
- this._resetIsScrollingTimeoutId = requestTimeout(
- this._resetIsScrolling,
- IS_SCROLLING_DEBOUNCE_INTERVAL
- );
- };
-
- _resetIsScrolling = () => {
- this._resetIsScrollingTimeoutId = null;
-
- this.setState({ isScrolling: false }, () => {
- // Clear style cache after state update has been committed.
- // This way we don't break pure sCU for items that don't use isScrolling param.
- this._getItemStyleCache(-1);
- });
- };
- };
-}
-
-const validateSharedProps = (
- {
- children,
- direction,
- height,
- innerTagName,
- outerTagName,
- overscanColumnsCount,
- overscanCount,
- overscanRowsCount,
- width,
- }: Props,
- { instance }: State
-): void => {
- if (process.env.NODE_ENV !== 'production') {
- if (typeof overscanCount === 'number') {
- if (devWarningsOverscanCount && !devWarningsOverscanCount.has(instance)) {
- devWarningsOverscanCount.add(instance);
- console.warn(
- 'The overscanCount prop has been deprecated. ' +
- 'Please use the overscanColumnCount and overscanRowCount props instead.'
- );
- }
- }
-
- if (
- typeof overscanColumnsCount === 'number' ||
- typeof overscanRowsCount === 'number'
- ) {
- if (
- devWarningsOverscanRowsColumnsCount &&
- !devWarningsOverscanRowsColumnsCount.has(instance)
- ) {
- devWarningsOverscanRowsColumnsCount.add(instance);
- console.warn(
- 'The overscanColumnsCount and overscanRowsCount props have been deprecated. ' +
- 'Please use the overscanColumnCount and overscanRowCount props instead.'
- );
- }
- }
-
- if (innerTagName != null || outerTagName != null) {
- if (devWarningsTagName && !devWarningsTagName.has(instance)) {
- devWarningsTagName.add(instance);
- console.warn(
- 'The innerTagName and outerTagName props have been deprecated. ' +
- 'Please use the innerElementType and outerElementType props instead.'
- );
- }
- }
-
- if (children == null) {
- throw Error(
- 'An invalid "children" prop has been specified. ' +
- 'Value should be a React component. ' +
- `"${children === null ? 'null' : typeof children}" was specified.`
- );
- }
-
- switch (direction) {
- case 'ltr':
- case 'rtl':
- // Valid values
- break;
- default:
- throw Error(
- 'An invalid "direction" prop has been specified. ' +
- 'Value should be either "ltr" or "rtl". ' +
- `"${direction}" was specified.`
- );
- }
-
- if (typeof width !== 'number') {
- throw Error(
- 'An invalid "width" prop has been specified. ' +
- 'Grids must specify a number for width. ' +
- `"${width === null ? 'null' : typeof width}" was specified.`
- );
- }
-
- if (typeof height !== 'number') {
- throw Error(
- 'An invalid "height" prop has been specified. ' +
- 'Grids must specify a number for height. ' +
- `"${height === null ? 'null' : typeof height}" was specified.`
- );
- }
- }
-};
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js b/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
deleted file mode 100644
index 210dba2b642bc..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/createListComponent.js
+++ /dev/null
@@ -1,727 +0,0 @@
-// @flow
-
-import memoizeOne from 'memoize-one';
-import * as React from 'react';
-import { createElement, PureComponent } from 'react';
-import { cancelTimeout, requestTimeout } from './timer';
-import { getRTLOffsetType } from './domHelpers';
-
-import type { TimeoutID } from './timer';
-
-export type ScrollToAlign = 'auto' | 'smart' | 'center' | 'start' | 'end';
-
-type itemSize = number | ((index: number) => number);
-// TODO Deprecate directions "horizontal" and "vertical"
-type Direction = 'ltr' | 'rtl' | 'horizontal' | 'vertical';
-type Layout = 'horizontal' | 'vertical';
-
-type RenderComponentProps = {|
- data: T,
- index: number,
- isScrolling?: boolean,
- style: Object,
-|};
-type RenderComponent = React$ComponentType<$Shape>>;
-
-type ScrollDirection = 'forward' | 'backward';
-
-type onItemsRenderedCallback = ({
- overscanStartIndex: number,
- overscanStopIndex: number,
- visibleStartIndex: number,
- visibleStopIndex: number,
-}) => void;
-type onScrollCallback = ({
- scrollDirection: ScrollDirection,
- scrollOffset: number,
- scrollUpdateWasRequested: boolean,
-}) => void;
-
-type ScrollEvent = SyntheticEvent;
-type ItemStyleCache = { [index: number]: Object };
-
-type OuterProps = {|
- children: React$Node,
- className: string | void,
- onScroll: ScrollEvent => void,
- style: {
- [string]: mixed,
- },
-|};
-
-type InnerProps = {|
- children: React$Node,
- style: {
- [string]: mixed,
- },
-|};
-
-export type Props = {|
- children: RenderComponent,
- className?: string,
- direction: Direction,
- height: number | string,
- initialScrollOffset?: number,
- innerRef?: any,
- innerElementType?: string | React.AbstractComponent,
- innerTagName?: string, // deprecated
- itemCount: number,
- itemData: T,
- itemKey?: (index: number, data: T) => any,
- itemSize: itemSize,
- layout: Layout,
- onItemsRendered?: onItemsRenderedCallback,
- onScroll?: onScrollCallback,
- outerRef?: any,
- outerElementType?: string | React.AbstractComponent,
- outerTagName?: string, // deprecated
- overscanCount: number,
- style?: Object,
- useIsScrolling: boolean,
- width: number | string,
-|};
-
-type State = {|
- instance: any,
- isScrolling: boolean,
- scrollDirection: ScrollDirection,
- scrollOffset: number,
- scrollUpdateWasRequested: boolean,
-|};
-
-type GetItemOffset = (
- props: Props,
- index: number,
- instanceProps: any
-) => number;
-type GetItemSize = (
- props: Props,
- index: number,
- instanceProps: any
-) => number;
-type GetEstimatedTotalSize = (props: Props, instanceProps: any) => number;
-type GetOffsetForIndexAndAlignment = (
- props: Props,
- index: number,
- align: ScrollToAlign,
- scrollOffset: number,
- instanceProps: any
-) => number;
-type GetStartIndexForOffset = (
- props: Props,
- offset: number,
- instanceProps: any
-) => number;
-type GetStopIndexForStartIndex = (
- props: Props,
- startIndex: number,
- scrollOffset: number,
- instanceProps: any
-) => number;
-type InitInstanceProps = (props: Props, instance: any) => any;
-type ValidateProps = (props: Props) => void;
-
-const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
-
-const defaultItemKey = (index: number, data: any) => index;
-
-// In DEV mode, this Set helps us only log a warning once per component instance.
-// This avoids spamming the console every time a render happens.
-let devWarningsDirection = null;
-let devWarningsTagName = null;
-if (process.env.NODE_ENV !== 'production') {
- if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
- devWarningsDirection = new WeakSet();
- devWarningsTagName = new WeakSet();
- }
-}
-
-export default function createListComponent({
- getItemOffset,
- getEstimatedTotalSize,
- getItemSize,
- getOffsetForIndexAndAlignment,
- getStartIndexForOffset,
- getStopIndexForStartIndex,
- initInstanceProps,
- shouldResetStyleCacheOnItemSizeChange,
- validateProps,
-}: {|
- getItemOffset: GetItemOffset,
- getEstimatedTotalSize: GetEstimatedTotalSize,
- getItemSize: GetItemSize,
- getOffsetForIndexAndAlignment: GetOffsetForIndexAndAlignment,
- getStartIndexForOffset: GetStartIndexForOffset,
- getStopIndexForStartIndex: GetStopIndexForStartIndex,
- initInstanceProps: InitInstanceProps,
- shouldResetStyleCacheOnItemSizeChange: boolean,
- validateProps: ValidateProps,
-|}): React.ComponentType> {
- return class List extends PureComponent, State> {
- _instanceProps: any = initInstanceProps(this.props, this);
- _outerRef: ?HTMLDivElement;
- _resetIsScrollingTimeoutId: TimeoutID | null = null;
-
- static defaultProps: {
- direction: string,
- itemData: void,
- layout: string,
- overscanCount: number,
- useIsScrolling: boolean,
- } = {
- direction: 'ltr',
- itemData: undefined,
- layout: 'vertical',
- overscanCount: 2,
- useIsScrolling: false,
- };
-
- state: State = {
- instance: this,
- isScrolling: false,
- scrollDirection: 'forward',
- scrollOffset:
- typeof this.props.initialScrollOffset === 'number'
- ? this.props.initialScrollOffset
- : 0,
- scrollUpdateWasRequested: false,
- };
-
- // Always use explicit constructor for React components.
- // It produces less code after transpilation. (#26)
- // eslint-disable-next-line no-useless-constructor
- constructor(props: Props) {
- super(props);
- }
-
- static getDerivedStateFromProps(
- nextProps: Props,
- prevState: State
- ): $Shape | null {
- validateSharedProps(nextProps, prevState);
- validateProps(nextProps);
- return null;
- }
-
- scrollTo(scrollOffset: number): void {
- scrollOffset = Math.max(0, scrollOffset);
-
- this.setState(prevState => {
- if (prevState.scrollOffset === scrollOffset) {
- return null;
- }
- return {
- scrollDirection:
- prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
- scrollOffset: scrollOffset,
- scrollUpdateWasRequested: true,
- };
- }, this._resetIsScrollingDebounced);
- }
-
- scrollToItem(index: number, align: ScrollToAlign = 'auto'): void {
- const { itemCount } = this.props;
- const { scrollOffset } = this.state;
-
- index = Math.max(0, Math.min(index, itemCount - 1));
-
- this.scrollTo(
- getOffsetForIndexAndAlignment(
- this.props,
- index,
- align,
- scrollOffset,
- this._instanceProps
- )
- );
- }
-
- componentDidMount() {
- const { direction, initialScrollOffset, layout } = this.props;
-
- if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
- const outerRef = ((this._outerRef: any): HTMLElement);
- // TODO Deprecate direction "horizontal"
- if (direction === 'horizontal' || layout === 'horizontal') {
- outerRef.scrollLeft = initialScrollOffset;
- } else {
- outerRef.scrollTop = initialScrollOffset;
- }
- }
-
- this._callPropsCallbacks();
- }
-
- componentDidUpdate() {
- const { direction, layout } = this.props;
- const { scrollOffset, scrollUpdateWasRequested } = this.state;
-
- if (scrollUpdateWasRequested && this._outerRef != null) {
- const outerRef = ((this._outerRef: any): HTMLElement);
-
- // TODO Deprecate direction "horizontal"
- if (direction === 'horizontal' || layout === 'horizontal') {
- if (direction === 'rtl') {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // So we need to determine which browser behavior we're dealing with, and mimic it.
- switch (getRTLOffsetType()) {
- case 'negative':
- outerRef.scrollLeft = -scrollOffset;
- break;
- case 'positive-ascending':
- outerRef.scrollLeft = scrollOffset;
- break;
- default:
- const { clientWidth, scrollWidth } = outerRef;
- outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
- break;
- }
- } else {
- outerRef.scrollLeft = scrollOffset;
- }
- } else {
- outerRef.scrollTop = scrollOffset;
- }
- }
-
- this._callPropsCallbacks();
- }
-
- componentWillUnmount() {
- if (this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(this._resetIsScrollingTimeoutId);
- }
- }
-
- render(): any {
- const {
- children,
- className,
- direction,
- height,
- innerRef,
- innerElementType,
- innerTagName,
- itemCount,
- itemData,
- itemKey = defaultItemKey,
- layout,
- outerElementType,
- outerTagName,
- style,
- useIsScrolling,
- width,
- } = this.props;
- const { isScrolling } = this.state;
-
- // TODO Deprecate direction "horizontal"
- const isHorizontal =
- direction === 'horizontal' || layout === 'horizontal';
-
- const onScroll = isHorizontal
- ? this._onScrollHorizontal
- : this._onScrollVertical;
-
- const [startIndex, stopIndex] = this._getRangeToRender();
-
- const items = [];
- if (itemCount > 0) {
- for (let index = startIndex; index <= stopIndex; index++) {
- items.push(
- createElement(children, {
- data: itemData,
- key: itemKey(index, itemData),
- index,
- isScrolling: useIsScrolling ? isScrolling : undefined,
- style: this._getItemStyle(index),
- })
- );
- }
- }
-
- // Read this value AFTER items have been created,
- // So their actual sizes (if variable) are taken into consideration.
- const estimatedTotalSize = getEstimatedTotalSize(
- this.props,
- this._instanceProps
- );
-
- return createElement(
- outerElementType || outerTagName || 'div',
- {
- className,
- onScroll,
- ref: this._outerRefSetter,
- style: {
- position: 'relative',
- height,
- width,
- overflow: 'auto',
- WebkitOverflowScrolling: 'touch',
- willChange: 'transform',
- direction,
- ...style,
- },
- },
- createElement(innerElementType || innerTagName || 'div', {
- children: items,
- ref: innerRef,
- style: {
- height: isHorizontal ? '100%' : estimatedTotalSize,
- pointerEvents: isScrolling ? 'none' : undefined,
- width: isHorizontal ? estimatedTotalSize : '100%',
- },
- })
- );
- }
-
- _callOnItemsRendered: ((
- overscanStartIndex: number,
- overscanStopIndex: number,
- visibleStartIndex: number,
- visibleStopIndex: number
- ) => void) = memoizeOne(
- (
- overscanStartIndex: number,
- overscanStopIndex: number,
- visibleStartIndex: number,
- visibleStopIndex: number
- ) =>
- ((this.props.onItemsRendered: any): onItemsRenderedCallback)({
- overscanStartIndex,
- overscanStopIndex,
- visibleStartIndex,
- visibleStopIndex,
- })
- );
-
- _callOnScroll: ((
- scrollDirection: ScrollDirection,
- scrollOffset: number,
- scrollUpdateWasRequested: boolean
- ) => void) = memoizeOne(
- (
- scrollDirection: ScrollDirection,
- scrollOffset: number,
- scrollUpdateWasRequested: boolean
- ) =>
- ((this.props.onScroll: any): onScrollCallback)({
- scrollDirection,
- scrollOffset,
- scrollUpdateWasRequested,
- })
- );
-
- _callPropsCallbacks() {
- if (typeof this.props.onItemsRendered === 'function') {
- const { itemCount } = this.props;
- if (itemCount > 0) {
- const [
- overscanStartIndex,
- overscanStopIndex,
- visibleStartIndex,
- visibleStopIndex,
- ] = this._getRangeToRender();
- this._callOnItemsRendered(
- overscanStartIndex,
- overscanStopIndex,
- visibleStartIndex,
- visibleStopIndex
- );
- }
- }
-
- if (typeof this.props.onScroll === 'function') {
- const {
- scrollDirection,
- scrollOffset,
- scrollUpdateWasRequested,
- } = this.state;
- this._callOnScroll(
- scrollDirection,
- scrollOffset,
- scrollUpdateWasRequested
- );
- }
- }
-
- // Lazily create and cache item styles while scrolling,
- // So that pure component sCU will prevent re-renders.
- // We maintain this cache, and pass a style prop rather than index,
- // So that List can clear cached styles and force item re-render if necessary.
- _getItemStyle = (index: number): Object => {
- const { direction, itemSize, layout } = this.props;
-
- const itemStyleCache = this._getItemStyleCache(
- shouldResetStyleCacheOnItemSizeChange && itemSize,
- shouldResetStyleCacheOnItemSizeChange && layout,
- shouldResetStyleCacheOnItemSizeChange && direction
- );
-
- let style;
- if (itemStyleCache.hasOwnProperty(index)) {
- style = itemStyleCache[index];
- } else {
- const offset = getItemOffset(this.props, index, this._instanceProps);
- const size = getItemSize(this.props, index, this._instanceProps);
-
- // TODO Deprecate direction "horizontal"
- const isHorizontal =
- direction === 'horizontal' || layout === 'horizontal';
-
- itemStyleCache[index] = style = {
- position: 'absolute',
- // $FlowFixMe computed properties are unsupported
- [direction === 'rtl' ? 'right' : 'left']: isHorizontal ? offset : 0,
- top: !isHorizontal ? offset : 0,
- height: !isHorizontal ? size : '100%',
- width: isHorizontal ? size : '100%',
- };
- }
-
- return style;
- };
-
- _getItemStyleCache: ((_: any, __: any, ___: any) => ItemStyleCache) =
- memoizeOne((_: any, __: any, ___: any) => ({}));
-
- _getRangeToRender(): [number, number, number, number] {
- const { itemCount, overscanCount } = this.props;
- const { isScrolling, scrollDirection, scrollOffset } = this.state;
-
- if (itemCount === 0) {
- return [0, 0, 0, 0];
- }
-
- const startIndex = getStartIndexForOffset(
- this.props,
- scrollOffset,
- this._instanceProps
- );
- const stopIndex = getStopIndexForStartIndex(
- this.props,
- startIndex,
- scrollOffset,
- this._instanceProps
- );
-
- // Overscan by one item in each direction so that tab/focus works.
- // If there isn't at least one extra item, tab loops back around.
- const overscanBackward =
- !isScrolling || scrollDirection === 'backward'
- ? Math.max(1, overscanCount)
- : 1;
- const overscanForward =
- !isScrolling || scrollDirection === 'forward'
- ? Math.max(1, overscanCount)
- : 1;
-
- return [
- Math.max(0, startIndex - overscanBackward),
- Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)),
- startIndex,
- stopIndex,
- ];
- }
-
- _onScrollHorizontal = (event: ScrollEvent): void => {
- const { clientWidth, scrollLeft, scrollWidth } = event.currentTarget;
- this.setState(prevState => {
- if (prevState.scrollOffset === scrollLeft) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- }
-
- const { direction } = this.props;
-
- let scrollOffset = scrollLeft;
- if (direction === 'rtl') {
- // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
- // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
- // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
- // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
- switch (getRTLOffsetType()) {
- case 'negative':
- scrollOffset = -scrollLeft;
- break;
- case 'positive-descending':
- scrollOffset = scrollWidth - clientWidth - scrollLeft;
- break;
- }
- }
-
- // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
- scrollOffset = Math.max(
- 0,
- Math.min(scrollOffset, scrollWidth - clientWidth)
- );
-
- return {
- isScrolling: true,
- scrollDirection:
- prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
- scrollOffset,
- scrollUpdateWasRequested: false,
- };
- }, this._resetIsScrollingDebounced);
- };
-
- _onScrollVertical = (event: ScrollEvent): void => {
- const { clientHeight, scrollHeight, scrollTop } = event.currentTarget;
- this.setState(prevState => {
- if (prevState.scrollOffset === scrollTop) {
- // Scroll position may have been updated by cDM/cDU,
- // In which case we don't need to trigger another render,
- // And we don't want to update state.isScrolling.
- return null;
- }
-
- // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
- const scrollOffset = Math.max(
- 0,
- Math.min(scrollTop, scrollHeight - clientHeight)
- );
-
- return {
- isScrolling: true,
- scrollDirection:
- prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
- scrollOffset,
- scrollUpdateWasRequested: false,
- };
- }, this._resetIsScrollingDebounced);
- };
-
- _outerRefSetter = (ref: any): void => {
- const { outerRef } = this.props;
-
- this._outerRef = ((ref: any): HTMLDivElement);
-
- if (typeof outerRef === 'function') {
- outerRef(ref);
- } else if (
- outerRef != null &&
- typeof outerRef === 'object' &&
- outerRef.hasOwnProperty('current')
- ) {
- outerRef.current = ref;
- }
- };
-
- _resetIsScrollingDebounced = () => {
- if (this._resetIsScrollingTimeoutId !== null) {
- cancelTimeout(this._resetIsScrollingTimeoutId);
- }
-
- this._resetIsScrollingTimeoutId = requestTimeout(
- this._resetIsScrolling,
- IS_SCROLLING_DEBOUNCE_INTERVAL
- );
- };
-
- _resetIsScrolling = () => {
- this._resetIsScrollingTimeoutId = null;
-
- this.setState({ isScrolling: false }, () => {
- // Clear style cache after state update has been committed.
- // This way we don't break pure sCU for items that don't use isScrolling param.
- this._getItemStyleCache(-1, null);
- });
- };
- };
-}
-
-// NOTE: I considered further wrapping individual items with a pure ListItem component.
-// This would avoid ever calling the render function for the same index more than once,
-// But it would also add the overhead of a lot of components/fibers.
-// I assume people already do this (render function returning a class component),
-// So my doing it would just unnecessarily double the wrappers.
-
-const validateSharedProps = (
- {
- children,
- direction,
- height,
- layout,
- innerTagName,
- outerTagName,
- width,
- }: Props,
- { instance }: State
-): void => {
- if (process.env.NODE_ENV !== 'production') {
- if (innerTagName != null || outerTagName != null) {
- if (devWarningsTagName && !devWarningsTagName.has(instance)) {
- devWarningsTagName.add(instance);
- console.warn(
- 'The innerTagName and outerTagName props have been deprecated. ' +
- 'Please use the innerElementType and outerElementType props instead.'
- );
- }
- }
-
- // TODO Deprecate direction "horizontal"
- const isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-
- switch (direction) {
- case 'horizontal':
- case 'vertical':
- if (devWarningsDirection && !devWarningsDirection.has(instance)) {
- devWarningsDirection.add(instance);
- console.warn(
- 'The direction prop should be either "ltr" (default) or "rtl". ' +
- 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.'
- );
- }
- break;
- case 'ltr':
- case 'rtl':
- // Valid values
- break;
- default:
- throw Error(
- 'An invalid "direction" prop has been specified. ' +
- 'Value should be either "ltr" or "rtl". ' +
- `"${direction}" was specified.`
- );
- }
-
- switch (layout) {
- case 'horizontal':
- case 'vertical':
- // Valid values
- break;
- default:
- throw Error(
- 'An invalid "layout" prop has been specified. ' +
- 'Value should be either "horizontal" or "vertical". ' +
- `"${layout}" was specified.`
- );
- }
-
- if (children == null) {
- throw Error(
- 'An invalid "children" prop has been specified. ' +
- 'Value should be a React component. ' +
- `"${children === null ? 'null' : typeof children}" was specified.`
- );
- }
-
- if (isHorizontal && typeof width !== 'number') {
- throw Error(
- 'An invalid "width" prop has been specified. ' +
- 'Horizontal lists must specify a number for width. ' +
- `"${width === null ? 'null' : typeof width}" was specified.`
- );
- } else if (!isHorizontal && typeof height !== 'number') {
- throw Error(
- 'An invalid "height" prop has been specified. ' +
- 'Vertical lists must specify a number for height. ' +
- `"${height === null ? 'null' : typeof height}" was specified.`
- );
- }
- }
-};
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/domHelpers.js b/packages/react-devtools-shared/src/node_modules/react-window/src/domHelpers.js
deleted file mode 100644
index 1bdc9dddc10aa..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/domHelpers.js
+++ /dev/null
@@ -1,72 +0,0 @@
-// @flow
-
-let size: number = -1;
-
-// This utility copied from "dom-helpers" package.
-export function getScrollbarSize(recalculate?: boolean = false): number {
- if (size === -1 || recalculate) {
- const div = document.createElement('div');
- const style = div.style;
- style.width = '50px';
- style.height = '50px';
- style.overflow = 'scroll';
-
- ((document.body: any): HTMLBodyElement).appendChild(div);
-
- size = div.offsetWidth - div.clientWidth;
-
- ((document.body: any): HTMLBodyElement).removeChild(div);
- }
-
- return size;
-}
-
-export type RTLOffsetType =
- | 'negative'
- | 'positive-descending'
- | 'positive-ascending';
-
-let cachedRTLResult: RTLOffsetType | null = null;
-
-// TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
-// The safest way to check this is to intentionally set a negative offset,
-// and then verify that the subsequent "scroll" event matches the negative offset.
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
-export function getRTLOffsetType(recalculate?: boolean = false): RTLOffsetType {
- if (cachedRTLResult === null || recalculate) {
- const outerDiv = document.createElement('div');
- const outerStyle = outerDiv.style;
- outerStyle.width = '50px';
- outerStyle.height = '50px';
- outerStyle.overflow = 'scroll';
- outerStyle.direction = 'rtl';
-
- const innerDiv = document.createElement('div');
- const innerStyle = innerDiv.style;
- innerStyle.width = '100px';
- innerStyle.height = '100px';
-
- outerDiv.appendChild(innerDiv);
-
- ((document.body: any): HTMLBodyElement).appendChild(outerDiv);
-
- if (outerDiv.scrollLeft > 0) {
- cachedRTLResult = 'positive-descending';
- } else {
- outerDiv.scrollLeft = 1;
- if (outerDiv.scrollLeft === 0) {
- cachedRTLResult = 'negative';
- } else {
- cachedRTLResult = 'positive-ascending';
- }
- }
-
- ((document.body: any): HTMLBodyElement).removeChild(outerDiv);
-
- return cachedRTLResult;
- }
-
- return cachedRTLResult;
-}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/index.js b/packages/react-devtools-shared/src/node_modules/react-window/src/index.js
deleted file mode 100644
index dff39bf11968e..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/index.js
+++ /dev/null
@@ -1,9 +0,0 @@
-// @flow
-
-export { default as VariableSizeGrid } from './VariableSizeGrid';
-export { default as VariableSizeList } from './VariableSizeList';
-export { default as FixedSizeGrid } from './FixedSizeGrid';
-export { default as FixedSizeList } from './FixedSizeList';
-
-export { default as areEqual } from './areEqual';
-export { default as shouldComponentUpdate } from './shouldComponentUpdate';
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/shallowDiffers.js b/packages/react-devtools-shared/src/node_modules/react-window/src/shallowDiffers.js
deleted file mode 100644
index c2395f6378f27..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/shallowDiffers.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @flow
-
-// Pulled from react-compat
-// https://github.com/developit/preact-compat/blob/7c5de00e7c85e2ffd011bf3af02899b63f699d3a/src/index.js#L349
-export default function shallowDiffers(prev: Object, next: Object): boolean {
- for (let attribute in prev) {
- if (!(attribute in next)) {
- return true;
- }
- }
- for (let attribute in next) {
- if (prev[attribute] !== next[attribute]) {
- return true;
- }
- }
- return false;
-}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js b/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js
deleted file mode 100644
index 01ca6d5071268..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/shouldComponentUpdate.js
+++ /dev/null
@@ -1,17 +0,0 @@
-// @flow
-
-import areEqual from './areEqual';
-import shallowDiffers from './shallowDiffers';
-
-// Custom shouldComponentUpdate for class components.
-// It knows to compare individual style props and ignore the wrapper object.
-// See https://reactjs.org/docs/react-component.html#shouldcomponentupdate
-export default function shouldComponentUpdate(
- this: interface { props: any, state: any },
- nextProps: Object,
- nextState: Object,
-): boolean {
- return (
- !areEqual(this.props, nextProps) || shallowDiffers(this.state, nextState)
- );
-}
diff --git a/packages/react-devtools-shared/src/node_modules/react-window/src/timer.js b/packages/react-devtools-shared/src/node_modules/react-window/src/timer.js
deleted file mode 100644
index aea75e5fd7c28..0000000000000
--- a/packages/react-devtools-shared/src/node_modules/react-window/src/timer.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// @flow
-
-// Animation frame based implementation of setTimeout.
-// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
-
-const hasNativePerformanceNow =
- typeof performance === 'object' && typeof performance.now === 'function';
-
-const now = hasNativePerformanceNow
- ? () => performance.now()
- : () => Date.now();
-
-export type TimeoutID = {|
- id: AnimationFrameID,
-|};
-
-export function cancelTimeout(timeoutID: TimeoutID) {
- cancelAnimationFrame(timeoutID.id);
-}
-
-export function requestTimeout(callback: Function, delay: number): TimeoutID {
- const start = now();
-
- function tick() {
- if (now() - start >= delay) {
- callback.call(null);
- } else {
- timeoutID.id = requestAnimationFrame(tick);
- }
- }
-
- const timeoutID: TimeoutID = {
- id: requestAnimationFrame(tick),
- };
-
- return timeoutID;
-}
diff --git a/packages/react-devtools-timeline/package.json b/packages/react-devtools-timeline/package.json
index 418e2197f9db0..9edb01f7298bf 100644
--- a/packages/react-devtools-timeline/package.json
+++ b/packages/react-devtools-timeline/package.json
@@ -9,7 +9,7 @@
"memoize-one": "^5.1.1",
"nullthrows": "^1.1.1",
"pretty-ms": "^7.0.0",
- "react-virtualized-auto-sizer": "^1.0.6",
+ "react-virtualized-auto-sizer": "^1.0.23",
"regenerator-runtime": "^0.13.7"
},
"devDependencies": {
diff --git a/yarn.lock b/yarn.lock
index 49f44b3119ff4..6d0b74396361c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1903,6 +1903,13 @@
dependencies:
regenerator-runtime "^0.13.2"
+"@babel/runtime@^7.0.0":
+ version "7.23.9"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
+ integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
+ dependencies:
+ regenerator-runtime "^0.14.0"
+
"@babel/runtime@^7.11.2", "@babel/runtime@^7.8.4":
version "7.11.2"
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736"
@@ -11071,6 +11078,11 @@ memfs@^3.4.3:
dependencies:
fs-monkey "^1.0.3"
+"memoize-one@>=3.1.1 <6":
+ version "5.2.1"
+ resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e"
+ integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q==
+
memoize-one@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-3.1.1.tgz#ef609811e3bc28970eac2884eece64d167830d17"
@@ -13019,10 +13031,18 @@ react-timer-mixin@^0.13.4:
resolved "https://registry.yarnpkg.com/react-timer-mixin/-/react-timer-mixin-0.13.4.tgz#75a00c3c94c13abe29b43d63b4c65a88fc8264d3"
integrity sha512-4+ow23tp/Tv7hBM5Az5/Be/eKKF7DIvJ09voz5LyHGQaqqz9WV8YMs31eFvcYQs7d451LSg7kDJV70XYN/Ug/Q==
-react-virtualized-auto-sizer@^1.0.6:
- version "1.0.6"
- resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
- integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+react-virtualized-auto-sizer@^1.0.23:
+ version "1.0.23"
+ resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.23.tgz#ddb18f775a00f672577f1ec01306a94ca26161b8"
+ integrity sha512-5id3UTx+fG7b7SIOKL9/7aR1vP8+MtIT84cJCf09F6pYalB/nvHlx5EQvsSk27SwHUKjgPamG/nS8ynI0uSfKA==
+
+react-window@^1.8.10:
+ version "1.8.10"
+ resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.10.tgz#9e6b08548316814b443f7002b1cf8fd3a1bdde03"
+ integrity sha512-Y0Cx+dnU6NLa5/EvoHukUD0BklJ8qITCtVEPY1C/nL8wwoZ0b5aEw8Ff1dOVHw7fCzMt55XfJDd8S8W8LCaUCg==
+ dependencies:
+ "@babel/runtime" "^7.0.0"
+ memoize-one ">=3.1.1 <6"
react@^16.13.1:
version "16.13.1"
@@ -13184,6 +13204,11 @@ regenerator-runtime@^0.13.9:
resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz#f6dca3e7ceec20590d07ada785636a90cdca17f9"
integrity sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==
+regenerator-runtime@^0.14.0:
+ version "0.14.1"
+ resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+ integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
regenerator-transform@^0.14.2:
version "0.14.5"
resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.5.tgz#c98da154683671c9c4dcb16ece736517e1b7feb4"