react-ui89 0.7.1 → 0.7.2

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState, useMemo } from 'react';
+import React__default, { useState, useMemo, createElement, PureComponent, Component, forwardRef } from 'react';
 
 var Ui89Theme;
 (function (Ui89Theme) {
@@ -16,18 +16,18 @@ var Ui89Look;
     Ui89Look["side"] = "side";
 })(Ui89Look || (Ui89Look = {}));
 
-var styles$a = {"container":"Ui89Button-module_container__V4tWM","button":"Ui89Button-module_button__wl9cp","block":"Ui89Button-module_block__3sGjT","disabled":"Ui89Button-module_disabled__I5nOu","active":"Ui89Button-module_active__ZN0AN","size--normal":"Ui89Button-module_size--normal__Pht3J","size--small":"Ui89Button-module_size--small__-4-4v","click":"Ui89Button-module_click__INMSh"};
+var styles$b = {"container":"Ui89Button-module_container__V4tWM","button":"Ui89Button-module_button__wl9cp","block":"Ui89Button-module_block__3sGjT","disabled":"Ui89Button-module_disabled__I5nOu","active":"Ui89Button-module_active__ZN0AN","size--normal":"Ui89Button-module_size--normal__Pht3J","size--small":"Ui89Button-module_size--small__-4-4v","click":"Ui89Button-module_click__INMSh"};
 
 var typoStyles = {"big":"typo-module_big__NWXQv","normal":"typo-module_normal__a1-s-","normalBold":"typo-module_normalBold__6Mx0C","small":"typo-module_small__cdnMc","smallBold":"typo-module_smallBold__BRDCu","special":"typo-module_special__PiPuc"};
 
 var chosenThemeStyles = {"primary":"chosen-theme-module_primary__GwEqU","secondary":"chosen-theme-module_secondary__DI5Gk","info":"chosen-theme-module_info__KYP2h","success":"chosen-theme-module_success__l3hFS","warning":"chosen-theme-module_warning__A7IOL","danger":"chosen-theme-module_danger__CZ3Iq"};
 
-var styles$9 = {"hoverShadow":"HoverShadow-module_hoverShadow__-cRBn","hoverShadowRight":"HoverShadow-module_hoverShadowRight__u1rW-","hoverShadowBottom":"HoverShadow-module_hoverShadowBottom__mTTdA"};
+var styles$a = {"hoverShadow":"HoverShadow-module_hoverShadow__-cRBn","hoverShadowRight":"HoverShadow-module_hoverShadowRight__u1rW-","hoverShadowBottom":"HoverShadow-module_hoverShadowBottom__mTTdA"};
 
 function HoverShadow({ children, }) {
-    return (React__default.createElement("span", { className: styles$9.hoverShadow },
-        React__default.createElement("span", { className: styles$9.hoverShadowBottom }),
-        React__default.createElement("span", { className: styles$9.hoverShadowRight }),
+    return (React__default.createElement("span", { className: styles$a.hoverShadow },
+        React__default.createElement("span", { className: styles$a.hoverShadowBottom }),
+        React__default.createElement("span", { className: styles$a.hoverShadowRight }),
         children));
 }
 
@@ -81,39 +81,39 @@ function Ui89Button({ theme = Ui89Theme.primary, size = "normal", block, onClick
         }
     }
     let buttonClass = [
-        styles$a.button,
+        styles$b.button,
         typoStyles.special,
         chosenThemeStyles[theme],
-        styles$a["size--" + size],
-        activated ? styles$a.active : undefined,
-        block ? styles$a.block : undefined,
-        disabled ? styles$a.disabled : undefined,
-        clicking ? styles$a.active : undefined,
+        styles$b["size--" + size],
+        activated ? styles$b.active : undefined,
+        block ? styles$b.block : undefined,
+        disabled ? styles$b.disabled : undefined,
+        clicking ? styles$b.active : undefined,
     ].join(" ");
     if (href) {
-        return (React__default.createElement("span", { className: styles$a.container },
+        return (React__default.createElement("span", { className: styles$b.container },
             React__default.createElement(HoverShadow, null,
                 React__default.createElement("a", { className: buttonClass, href: href, onClick: onAnchorClick },
-                    React__default.createElement("span", { className: styles$a.click }),
+                    React__default.createElement("span", { className: styles$b.click }),
                     children))));
     }
     else {
-        return (React__default.createElement("span", { className: styles$a.container },
+        return (React__default.createElement("span", { className: styles$b.container },
             React__default.createElement(HoverShadow, null,
                 React__default.createElement("button", { className: buttonClass, type: "button", onClick: onButtonClick, disabled: localDisabled },
-                    React__default.createElement("span", { className: styles$a.click }),
+                    React__default.createElement("span", { className: styles$b.click }),
                     children))));
     }
 }
 
-var styles$8 = {"container":"Ui89Card-module_container__-8hhJ","containerHasTop":"Ui89Card-module_containerHasTop__UsQUD","inside":"Ui89Card-module_inside__91GoJ","topLeftCenter":"Ui89Card-module_topLeftCenter__r9PD6","topCenter":"Ui89Card-module_topCenter__SZWfR"};
+var styles$9 = {"container":"Ui89Card-module_container__-8hhJ","containerHasTop":"Ui89Card-module_containerHasTop__UsQUD","inside":"Ui89Card-module_inside__91GoJ","topLeftCenter":"Ui89Card-module_topLeftCenter__r9PD6","topCenter":"Ui89Card-module_topCenter__SZWfR"};
 
 function Ui89Card({ topLeftCenter, topCenter, children, }) {
     const hasTopContent = topLeftCenter || topCenter;
-    return (React__default.createElement("div", { className: `${styles$8.container} ${hasTopContent ? styles$8.containerHasTop : ""}` },
-        React__default.createElement("div", { className: styles$8.inside },
-            topLeftCenter && (React__default.createElement("div", { className: styles$8.topLeftCenter }, topLeftCenter)),
-            topCenter && React__default.createElement("div", { className: styles$8.topCenter }, topCenter),
+    return (React__default.createElement("div", { className: `${styles$9.container} ${hasTopContent ? styles$9.containerHasTop : ""}` },
+        React__default.createElement("div", { className: styles$9.inside },
+            topLeftCenter && (React__default.createElement("div", { className: styles$9.topLeftCenter }, topLeftCenter)),
+            topCenter && React__default.createElement("div", { className: styles$9.topCenter }, topCenter),
             hasTopContent && React__default.createElement("div", { className: "space-vertical-1" }),
             children,
             hasTopContent && React__default.createElement("div", { className: "space-vertical-1" }))));
@@ -34212,39 +34212,39 @@ function requireLib () {
 var libExports = requireLib();
 var ReactModal = /*@__PURE__*/getDefaultExportFromCjs(libExports);
 
-var styles$7 = {"container":"Ui89ModalDialog-module_container__-azd7","appear":"Ui89ModalDialog-module_appear__Xt-kk","backdrop":"Ui89ModalDialog-module_backdrop__Hg1Dn","spacer":"Ui89ModalDialog-module_spacer__fS17b","container--size-big":"Ui89ModalDialog-module_container--size-big__03rgP","container--size-medium":"Ui89ModalDialog-module_container--size-medium__A3TJY","container--size-small":"Ui89ModalDialog-module_container--size-small__mxNgm"};
+var styles$8 = {"container":"Ui89ModalDialog-module_container__-azd7","appear":"Ui89ModalDialog-module_appear__Xt-kk","backdrop":"Ui89ModalDialog-module_backdrop__Hg1Dn","spacer":"Ui89ModalDialog-module_spacer__fS17b","container--size-big":"Ui89ModalDialog-module_container--size-big__03rgP","container--size-medium":"Ui89ModalDialog-module_container--size-medium__A3TJY","container--size-small":"Ui89ModalDialog-module_container--size-small__mxNgm"};
 
-var styles$6 = {"scene":"Ui89Scene-module_scene__5uNRp"};
+var styles$7 = {"scene":"Ui89Scene-module_scene__5uNRp"};
 
 var lookStyles = {"main":"look-module_main__dCtZk","side":"look-module_side__bCbry"};
 
 var scrollbarStyles = {"container":"scrollbar-module_container__q4x0n"};
 
 function Ui89Scene({ look = Ui89Look.main, children, }) {
-    return (React__default.createElement("div", { className: `${styles$6.scene} ${lookStyles[look]} ${typoStyles.normal} ${scrollbarStyles.container}` }, children));
+    return (React__default.createElement("div", { className: `${styles$7.scene} ${lookStyles[look]} ${typoStyles.normal} ${scrollbarStyles.container}` }, children));
 }
 
-var styles$5 = {"gridExpandTrick":"GridExpandTrick-module_gridExpandTrick__10Eg5"};
+var styles$6 = {"gridExpandTrick":"GridExpandTrick-module_gridExpandTrick__10Eg5"};
 
 function GridExpandTrick({ children, }) {
-    return React__default.createElement("span", { className: styles$5.gridExpandTrick }, children);
+    return React__default.createElement("span", { className: styles$6.gridExpandTrick }, children);
 }
 
-var styles$4 = {"scrollContainer":"ScrollContainer-module_scrollContainer__J82cj"};
+var styles$5 = {"scrollContainer":"ScrollContainer-module_scrollContainer__J82cj"};
 
 function ScrollContainer({ children, }) {
-    return React__default.createElement("span", { className: styles$4.scrollContainer }, children);
+    return React__default.createElement("span", { className: styles$5.scrollContainer }, children);
 }
 
 // @ts-ignore
 function Ui89ModalDialog({ open, size = "medium", children, topCenter, onClose, onRequestClose, }) {
     const className = useMemo(() => {
-        return [styles$7.container, styles$7[`container--size-${size}`]].join(" ");
+        return [styles$8.container, styles$8[`container--size-${size}`]].join(" ");
     }, [size]);
-    return (React__default.createElement(ReactModal, { className: className, overlayClassName: styles$7.backdrop, isOpen: open, onAfterClose: onClose, onRequestClose: onRequestClose, 
+    return (React__default.createElement(ReactModal, { className: className, overlayClassName: styles$8.backdrop, isOpen: open, onAfterClose: onClose, onRequestClose: onRequestClose, 
         // So it shuts up.
         ariaHideApp: false },
-        React__default.createElement("div", { className: styles$7.spacer }),
+        React__default.createElement("div", { className: styles$8.spacer }),
         React__default.createElement(HoverShadow, null,
             React__default.createElement(GridExpandTrick, null,
                 React__default.createElement(Ui89Scene, { look: "side" },
@@ -34253,8 +34253,8 @@ function Ui89ModalDialog({ open, size = "medium", children, topCenter, onClose,
 }
 
 var _path, _path2;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-const SvgShortcut = props => /*#__PURE__*/React.createElement("svg", _extends({
+function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
+const SvgShortcut = props => /*#__PURE__*/React.createElement("svg", _extends$1({
   xmlns: "http://www.w3.org/2000/svg",
   width: 100,
   height: 100
@@ -34269,15 +34269,15 @@ const SvgShortcut = props => /*#__PURE__*/React.createElement("svg", _extends({
   d: "M20 20h30M20 20v30"
 })));
 
-var styles$3 = {"container":"Ui89Shortcut-module_container__L07CL","image":"Ui89Shortcut-module_image__f4Hsg","shortcutIcon":"Ui89Shortcut-module_shortcutIcon__SjZkr"};
+var styles$4 = {"container":"Ui89Shortcut-module_container__L07CL","image":"Ui89Shortcut-module_image__f4Hsg","shortcutIcon":"Ui89Shortcut-module_shortcutIcon__SjZkr"};
 
 function Ui89Shortcut({ imageUrl, label, onClick = () => { }, }) {
     function onNativeClick() {
         onClick();
     }
-    return (React__default.createElement("div", { className: styles$3.container },
-        React__default.createElement("img", { className: styles$3.image, src: imageUrl, onClick: onNativeClick }),
-        React__default.createElement(SvgShortcut, { className: styles$3.shortcutIcon, width: 16, height: 16 }),
+    return (React__default.createElement("div", { className: styles$4.container },
+        React__default.createElement("img", { className: styles$4.image, src: imageUrl, onClick: onNativeClick }),
+        React__default.createElement(SvgShortcut, { className: styles$4.shortcutIcon, width: 16, height: 16 }),
         React__default.createElement("div", { className: `${typoStyles.smallBold}` }, label)));
 }
 
@@ -34288,16 +34288,16 @@ function Ui89SpaceVertical({ gap = 1 }) {
     return React__default.createElement("div", { style: style });
 }
 
-var styles$2 = {"navigation":"Ui89Tabs-module_navigation__y1WSG","navigationItem":"Ui89Tabs-module_navigationItem__keX-1","navigationItemSelected":"Ui89Tabs-module_navigationItemSelected__R7dba"};
+var styles$3 = {"navigation":"Ui89Tabs-module_navigation__y1WSG","navigationItem":"Ui89Tabs-module_navigationItem__keX-1","navigationItemSelected":"Ui89Tabs-module_navigationItemSelected__R7dba"};
 
 function Ui89Tabs({ selected, onChange = () => { }, items = [], }) {
     function handleOnChange(value) {
         onChange(value);
     }
-    return (React__default.createElement("div", { className: styles$2.navigation }, items.map((item) => (React__default.createElement("div", { className: [
-            styles$2.navigationItem,
+    return (React__default.createElement("div", { className: styles$3.navigation }, items.map((item) => (React__default.createElement("div", { className: [
+            styles$3.navigationItem,
             typoStyles.smallBold,
-            selected === item.value ? styles$2.navigationItemSelected : "",
+            selected === item.value ? styles$3.navigationItemSelected : "",
         ].join(" "), key: item.value, onClick: () => handleOnChange(item.value) }, item.label)))));
 }
 
@@ -34318,21 +34318,1534 @@ function Ui89TagBox({ theme, children, }) {
     return (React__default.createElement("div", { className: `${style.container} ${typoStyles.special} ${chosenThemeStyles[theme]}` }, children));
 }
 
-var styles$1 = {"container":"Ui89TitleBox-module_container__M-b7J","inside":"Ui89TitleBox-module_inside__GWTlP"};
+var styles$2 = {"container":"Ui89TitleBox-module_container__M-b7J","inside":"Ui89TitleBox-module_inside__GWTlP"};
 
 var textStyles = {"unbreakable":"text-module_unbreakable__3eDe3","ellipsis":"text-module_ellipsis__3-f-B","singleLine":"text-module_singleLine__X6pYL"};
 
 function Ui89TitleBox({ children }) {
+    return (React__default.createElement("div", { className: `${styles$2.container} ${typoStyles.special}` },
+        React__default.createElement("div", { className: `${styles$2.inside} ${textStyles.singleLine}` }, children)));
+}
+
+var styles$1 = {"container":"Ui89TitleUnderline-module_container__EaGZi","inside":"Ui89TitleUnderline-module_inside__uwwxa"};
+
+function Ui89TitleUnderline({ children, }) {
     return (React__default.createElement("div", { className: `${styles$1.container} ${typoStyles.special}` },
         React__default.createElement("div", { className: `${styles$1.inside} ${textStyles.singleLine}` }, children)));
 }
 
-var styles = {"container":"Ui89TitleUnderline-module_container__EaGZi","inside":"Ui89TitleUnderline-module_inside__uwwxa"};
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
 
-function Ui89TitleUnderline({ children, }) {
-    return (React__default.createElement("div", { className: `${styles.container} ${typoStyles.special}` },
-        React__default.createElement("div", { className: `${styles.inside} ${textStyles.singleLine}` }, children)));
+function _assertThisInitialized(e) {
+  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+  return e;
+}
+
+function _setPrototypeOf(t, e) {
+  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
+    return t.__proto__ = e, t;
+  }, _setPrototypeOf(t, e);
+}
+
+function _inheritsLoose(t, o) {
+  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
+}
+
+var safeIsNaN = Number.isNaN ||
+    function ponyfill(value) {
+        return typeof value === 'number' && value !== value;
+    };
+function isEqual(first, second) {
+    if (first === second) {
+        return true;
+    }
+    if (safeIsNaN(first) && safeIsNaN(second)) {
+        return true;
+    }
+    return false;
+}
+function areInputsEqual(newInputs, lastInputs) {
+    if (newInputs.length !== lastInputs.length) {
+        return false;
+    }
+    for (var i = 0; i < newInputs.length; i++) {
+        if (!isEqual(newInputs[i], lastInputs[i])) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function memoizeOne(resultFn, isEqual) {
+    if (isEqual === void 0) { isEqual = areInputsEqual; }
+    var lastThis;
+    var lastArgs = [];
+    var lastResult;
+    var calledOnce = false;
+    function memoized() {
+        var newArgs = [];
+        for (var _i = 0; _i < arguments.length; _i++) {
+            newArgs[_i] = arguments[_i];
+        }
+        if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
+            return lastResult;
+        }
+        lastResult = resultFn.apply(this, newArgs);
+        calledOnce = true;
+        lastThis = this;
+        lastArgs = newArgs;
+        return lastResult;
+    }
+    return memoized;
+}
+
+// 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;
+      _ref.data;
+      var 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;
+
+  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 _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(_this));
+      _this._resetIsScrollingTimeoutId = null;
+      _this._outerRef = void 0;
+      _this.state = {
+        instance: _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 _offset = getColumnOffset(_this.props, columnIndex, _this._instanceProps);
+
+          var isRtl = direction === 'rtl';
+          itemStyleCache[key] = style = {
+            position: 'absolute',
+            left: isRtl ? undefined : _offset,
+            right: isRtl ? _offset : undefined,
+            top: getRowOffset(_this.props, rowIndex, _this._instanceProps),
+            height: getRowHeight(_this.props, rowIndex, _this._instanceProps),
+            width: getColumnWidth(_this.props, columnIndex, _this._instanceProps)
+          };
+        }
+
+        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(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
+  }, _class;
+}
+
+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."));
+      }
+    }
+  }
+});
+
+if (process.env.NODE_ENV !== 'production') ;
+
+/**
+ * Detect Element Resize.
+ * https://github.com/sdecima/javascript-detect-element-resize
+ * Sebastian Decima
+ *
+ * Forked from version 0.5.3; includes the following modifications:
+ * 1) Guard against unsafe 'window' and 'document' references (to support SSR).
+ * 2) Defer initialization code via a top-level function wrapper (to support SSR).
+ * 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
+ * 4) Add nonce for style element.
+ * 5) Use 'export' statement over 'module.exports' assignment
+ **/
+
+// Check `document` and `window` in case of server-side rendering
+let windowObject;
+if (typeof window !== "undefined") {
+  windowObject = window;
+
+  // eslint-disable-next-line no-restricted-globals
+} else if (typeof self !== "undefined") {
+  // eslint-disable-next-line no-restricted-globals
+  windowObject = self;
+} else {
+  windowObject = global;
+}
+let cancelFrame = null;
+let requestFrame = null;
+const TIMEOUT_DURATION = 20;
+const clearTimeoutFn = windowObject.clearTimeout;
+const setTimeoutFn = windowObject.setTimeout;
+const cancelAnimationFrameFn = windowObject.cancelAnimationFrame || windowObject.mozCancelAnimationFrame || windowObject.webkitCancelAnimationFrame;
+const requestAnimationFrameFn = windowObject.requestAnimationFrame || windowObject.mozRequestAnimationFrame || windowObject.webkitRequestAnimationFrame;
+if (cancelAnimationFrameFn == null || requestAnimationFrameFn == null) {
+  // For environments that don't support animation frame,
+  // fallback to a setTimeout based approach.
+  cancelFrame = clearTimeoutFn;
+  requestFrame = function requestAnimationFrameViaSetTimeout(callback) {
+    return setTimeoutFn(callback, TIMEOUT_DURATION);
+  };
+} else {
+  // Counter intuitively, environments that support animation frames can be trickier.
+  // Chrome's "Throttle non-visible cross-origin iframes" flag can prevent rAFs from being called.
+  // In this case, we should fallback to a setTimeout() implementation.
+  cancelFrame = function cancelFrame([animationFrameID, timeoutID]) {
+    cancelAnimationFrameFn(animationFrameID);
+    clearTimeoutFn(timeoutID);
+  };
+  requestFrame = function requestAnimationFrameWithSetTimeoutFallback(callback) {
+    const animationFrameID = requestAnimationFrameFn(function animationFrameCallback() {
+      clearTimeoutFn(timeoutID);
+      callback();
+    });
+    const timeoutID = setTimeoutFn(function timeoutCallback() {
+      cancelAnimationFrameFn(animationFrameID);
+      callback();
+    }, TIMEOUT_DURATION);
+    return [animationFrameID, timeoutID];
+  };
+}
+function createDetectElementResize(nonce) {
+  let animationKeyframes;
+  let animationName;
+  let animationStartEvent;
+  let animationStyle;
+  let checkTriggers;
+  let resetTriggers;
+  let scrollListener;
+  const attachEvent = typeof document !== "undefined" && document.attachEvent;
+  if (!attachEvent) {
+    resetTriggers = function (element) {
+      const triggers = element.__resizeTriggers__,
+        expand = triggers.firstElementChild,
+        contract = triggers.lastElementChild,
+        expandChild = expand.firstElementChild;
+      contract.scrollLeft = contract.scrollWidth;
+      contract.scrollTop = contract.scrollHeight;
+      expandChild.style.width = expand.offsetWidth + 1 + "px";
+      expandChild.style.height = expand.offsetHeight + 1 + "px";
+      expand.scrollLeft = expand.scrollWidth;
+      expand.scrollTop = expand.scrollHeight;
+    };
+    checkTriggers = function (element) {
+      return element.offsetWidth !== element.__resizeLast__.width || element.offsetHeight !== element.__resizeLast__.height;
+    };
+    scrollListener = function (e) {
+      // Don't measure (which forces) reflow for scrolls that happen inside of children!
+      if (e.target.className && typeof e.target.className.indexOf === "function" && e.target.className.indexOf("contract-trigger") < 0 && e.target.className.indexOf("expand-trigger") < 0) {
+        return;
+      }
+      const element = this;
+      resetTriggers(this);
+      if (this.__resizeRAF__) {
+        cancelFrame(this.__resizeRAF__);
+      }
+      this.__resizeRAF__ = requestFrame(function animationFrame() {
+        if (checkTriggers(element)) {
+          element.__resizeLast__.width = element.offsetWidth;
+          element.__resizeLast__.height = element.offsetHeight;
+          element.__resizeListeners__.forEach(function forEachResizeListener(fn) {
+            fn.call(element, e);
+          });
+        }
+      });
+    };
+
+    /* Detect CSS Animations support to detect element display/re-attach */
+    let animation = false;
+    let keyframeprefix = "";
+    animationStartEvent = "animationstart";
+    const domPrefixes = "Webkit Moz O ms".split(" ");
+    let startEvents = "webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" ");
+    let pfx = "";
+    {
+      const elm = document.createElement("fakeelement");
+      if (elm.style.animationName !== undefined) {
+        animation = true;
+      }
+      if (animation === false) {
+        for (let i = 0; i < domPrefixes.length; i++) {
+          if (elm.style[domPrefixes[i] + "AnimationName"] !== undefined) {
+            pfx = domPrefixes[i];
+            keyframeprefix = "-" + pfx.toLowerCase() + "-";
+            animationStartEvent = startEvents[i];
+            animation = true;
+            break;
+          }
+        }
+      }
+    }
+    animationName = "resizeanim";
+    animationKeyframes = "@" + keyframeprefix + "keyframes " + animationName + " { from { opacity: 0; } to { opacity: 0; } } ";
+    animationStyle = keyframeprefix + "animation: 1ms " + animationName + "; ";
+  }
+  const createStyles = function (doc) {
+    if (!doc.getElementById("detectElementResize")) {
+      //opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
+      const css = (animationKeyframes ? animationKeyframes : "") + ".resize-triggers { " + (animationStyle ? animationStyle : "") + "visibility: hidden; opacity: 0; } " + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
+        head = doc.head || doc.getElementsByTagName("head")[0],
+        style = doc.createElement("style");
+      style.id = "detectElementResize";
+      style.type = "text/css";
+      if (nonce != null) {
+        style.setAttribute("nonce", nonce);
+      }
+      if (style.styleSheet) {
+        style.styleSheet.cssText = css;
+      } else {
+        style.appendChild(doc.createTextNode(css));
+      }
+      head.appendChild(style);
+    }
+  };
+  const addResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.attachEvent("onresize", fn);
+    } else {
+      if (!element.__resizeTriggers__) {
+        const doc = element.ownerDocument;
+        const elementStyle = windowObject.getComputedStyle(element);
+        if (elementStyle && elementStyle.position === "static") {
+          element.style.position = "relative";
+        }
+        createStyles(doc);
+        element.__resizeLast__ = {};
+        element.__resizeListeners__ = [];
+        (element.__resizeTriggers__ = doc.createElement("div")).className = "resize-triggers";
+        const expandTrigger = doc.createElement("div");
+        expandTrigger.className = "expand-trigger";
+        expandTrigger.appendChild(doc.createElement("div"));
+        const contractTrigger = doc.createElement("div");
+        contractTrigger.className = "contract-trigger";
+        element.__resizeTriggers__.appendChild(expandTrigger);
+        element.__resizeTriggers__.appendChild(contractTrigger);
+        element.appendChild(element.__resizeTriggers__);
+        resetTriggers(element);
+        element.addEventListener("scroll", scrollListener, true);
+
+        /* Listen for a css animation to detect element display/re-attach */
+        if (animationStartEvent) {
+          element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
+            if (e.animationName === animationName) {
+              resetTriggers(element);
+            }
+          };
+          element.__resizeTriggers__.addEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
+        }
+      }
+      element.__resizeListeners__.push(fn);
+    }
+  };
+  const removeResizeListener = function (element, fn) {
+    if (attachEvent) {
+      element.detachEvent("onresize", fn);
+    } else {
+      element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
+      if (!element.__resizeListeners__.length) {
+        element.removeEventListener("scroll", scrollListener, true);
+        if (element.__resizeTriggers__.__animationListener__) {
+          element.__resizeTriggers__.removeEventListener(animationStartEvent, element.__resizeTriggers__.__animationListener__);
+          element.__resizeTriggers__.__animationListener__ = null;
+        }
+        try {
+          element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
+        } catch (e) {
+          // Preact compat; see developit/preact-compat/issues/228
+        }
+      }
+    }
+  };
+  return {
+    addResizeListener,
+    removeResizeListener
+  };
+}
+
+class AutoSizer extends Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      height: this.props.defaultHeight || 0,
+      scaledHeight: this.props.defaultHeight || 0,
+      scaledWidth: this.props.defaultWidth || 0,
+      width: this.props.defaultWidth || 0
+    };
+    this._autoSizer = null;
+    this._detectElementResize = null;
+    this._parentNode = null;
+    this._resizeObserver = null;
+    this._timeoutId = null;
+    this._onResize = () => {
+      this._timeoutId = null;
+      const {
+        disableHeight,
+        disableWidth,
+        onResize
+      } = this.props;
+      if (this._parentNode) {
+        // Guard against AutoSizer component being removed from the DOM immediately after being added.
+        // This can result in invalid style values which can result in NaN values if we don't handle them.
+        // See issue #150 for more context.
+
+        const style = window.getComputedStyle(this._parentNode) || {};
+        const paddingLeft = parseFloat(style.paddingLeft || "0");
+        const paddingRight = parseFloat(style.paddingRight || "0");
+        const paddingTop = parseFloat(style.paddingTop || "0");
+        const paddingBottom = parseFloat(style.paddingBottom || "0");
+        const rect = this._parentNode.getBoundingClientRect();
+        const scaledHeight = rect.height - paddingTop - paddingBottom;
+        const scaledWidth = rect.width - paddingLeft - paddingRight;
+        const height = this._parentNode.offsetHeight - paddingTop - paddingBottom;
+        const width = this._parentNode.offsetWidth - paddingLeft - paddingRight;
+        if (!disableHeight && (this.state.height !== height || this.state.scaledHeight !== scaledHeight) || !disableWidth && (this.state.width !== width || this.state.scaledWidth !== scaledWidth)) {
+          this.setState({
+            height,
+            width,
+            scaledHeight,
+            scaledWidth
+          });
+          if (typeof onResize === "function") {
+            onResize({
+              height,
+              scaledHeight,
+              scaledWidth,
+              width
+            });
+          }
+        }
+      }
+    };
+    this._setRef = autoSizer => {
+      this._autoSizer = autoSizer;
+    };
+  }
+  componentDidMount() {
+    const {
+      nonce
+    } = this.props;
+    const parentNode = this._autoSizer ? this._autoSizer.parentNode : null;
+    if (parentNode != null && parentNode.ownerDocument && parentNode.ownerDocument.defaultView && parentNode instanceof parentNode.ownerDocument.defaultView.HTMLElement) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = parentNode;
+
+      // Use ResizeObserver from the same context where parentNode (which we will observe) was defined
+      // Using just global can result into onResize events not being emitted in cases with multiple realms
+      const ResizeObserverInstance = parentNode.ownerDocument.defaultView.ResizeObserver;
+      if (ResizeObserverInstance != null) {
+        this._resizeObserver = new ResizeObserverInstance(() => {
+          // Guard against "ResizeObserver loop limit exceeded" error;
+          // could be triggered if the state update causes the ResizeObserver handler to run long.
+          // See https://github.com/bvaughn/react-virtualized-auto-sizer/issues/55
+          this._timeoutId = setTimeout(this._onResize, 0);
+        });
+        this._resizeObserver.observe(parentNode);
+      } else {
+        // Defer requiring resize handler in order to support server-side rendering.
+        // See issue #41
+        this._detectElementResize = createDetectElementResize(nonce);
+        this._detectElementResize.addResizeListener(parentNode, this._onResize);
+      }
+      this._onResize();
+    }
+  }
+  componentWillUnmount() {
+    if (this._parentNode) {
+      if (this._detectElementResize) {
+        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
+      }
+      if (this._timeoutId !== null) {
+        clearTimeout(this._timeoutId);
+      }
+      if (this._resizeObserver) {
+        this._resizeObserver.disconnect();
+      }
+    }
+  }
+  render() {
+    const {
+      children,
+      defaultHeight,
+      defaultWidth,
+      disableHeight = false,
+      disableWidth = false,
+      doNotBailOutOnEmptyChildren = false,
+      nonce,
+      onResize,
+      style = {},
+      tagName = "div",
+      ...rest
+    } = this.props;
+    const {
+      height,
+      scaledHeight,
+      scaledWidth,
+      width
+    } = this.state;
+
+    // Outer div should not force width/height since that may prevent containers from shrinking.
+    // Inner component should overflow and use calculated width/height.
+    // See issue #68 for more information.
+    const outerStyle = {
+      overflow: "visible"
+    };
+    const childParams = {};
+
+    // Avoid rendering children before the initial measurements have been collected.
+    // At best this would just be wasting cycles.
+    let bailoutOnChildren = false;
+    if (!disableHeight) {
+      if (height === 0) {
+        bailoutOnChildren = true;
+      }
+      outerStyle.height = 0;
+      childParams.height = height;
+      childParams.scaledHeight = scaledHeight;
+    }
+    if (!disableWidth) {
+      if (width === 0) {
+        bailoutOnChildren = true;
+      }
+      outerStyle.width = 0;
+      childParams.width = width;
+      childParams.scaledWidth = scaledWidth;
+    }
+    if (doNotBailOutOnEmptyChildren) {
+      bailoutOnChildren = false;
+    }
+    return createElement(tagName, {
+      ref: this._setRef,
+      style: {
+        ...outerStyle,
+        ...style
+      },
+      ...rest
+    }, !bailoutOnChildren && children(childParams));
+  }
+}
+
+var styles = {"table":"Ui89VirtualTable-module_table__TkJv-","tableBody":"Ui89VirtualTable-module_tableBody__S53mE","empty":"Ui89VirtualTable-module_empty__0TQZA","tableHeader":"Ui89VirtualTable-module_tableHeader__gK1W1","cell":"Ui89VirtualTable-module_cell__yecQB","cell--column-first":"Ui89VirtualTable-module_cell--column-first__ymIC-","cell--column-last":"Ui89VirtualTable-module_cell--column-last__fEGx6"};
+
+const HEADER_HEIGHT = 30;
+function Ui89VirtualTable(props) {
+    const rows = useMemo(() => {
+        return props.rows !== undefined ? props.rows : [];
+    }, [props.rows]);
+    const columns = useMemo(() => {
+        return props.columns !== undefined ? props.columns : [];
+    }, [props.columns]);
+    function getRowHeight(index) {
+        if (index === 0) {
+            // Header.
+            return HEADER_HEIGHT;
+        }
+        else {
+            // Body
+            return props.rowHeight ?? 50;
+        }
+    }
+    function getColumnWidth(index) {
+        return columns[index].width ?? 100;
+    }
+    function getColumnHorizontalOffset(columnIndex) {
+        let offset = 0;
+        for (let i = 0; i < columnIndex; i++) {
+            offset += getColumnWidth(columnIndex);
+        }
+        return offset;
+    }
+    function getColumnClass(columnIndex, rowIndex) {
+        const classes = [styles.cell];
+        if (rowIndex === 0) {
+            classes.push(styles["cell--header"]);
+        }
+        if (columnIndex === 0) {
+            classes.push(styles["cell--column-first"]);
+        }
+        if (columnIndex === columns.length - 1) {
+            classes.push(styles["cell--column-last"]);
+        }
+        return classes.join(" ");
+    }
+    // This is the secret to having sticky headers.
+    const innerElementType = forwardRef(({ children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, ...rest },
+        React__default.createElement("div", { className: styles.tableHeader }, columns.map((column, index) => (React__default.createElement("div", { className: getColumnClass(index, 0), style: {
+                left: getColumnHorizontalOffset(index),
+                width: getColumnWidth(index) + "px",
+                height: getRowHeight(0) + "px",
+            } }, column.renderHeader !== undefined && (React__default.createElement(column.renderHeader, { index: index, column: column })))))),
+        children)));
+    return (React__default.createElement("div", { className: styles.table }, rows.length > 0 ? (React__default.createElement("div", { className: styles.tableBody },
+        React__default.createElement(AutoSizer, null, ({ height, width }) => (React__default.createElement(VariableSizeGrid, { columnCount: columns.length, columnWidth: getColumnWidth, rowCount: rows.length + 1, rowHeight: getRowHeight, width: width, height: height, innerElementType: innerElementType }, ({ columnIndex, rowIndex, style }) => (React__default.createElement("div", { className: getColumnClass(columnIndex, rowIndex), style: style }, rowIndex !== 0 &&
+            [columns[columnIndex].renderBody].map((BodyContent) => (React__default.createElement(BodyContent, { index: rowIndex - 1, row: rows[rowIndex - 1] })))))))))) : (React__default.createElement("div", { className: styles.empty },
+        React__default.createElement(Ui89TagBox, { theme: "warn" }, "Empty")))));
 }
 
-export { Ui89Button, Ui89Card, Ui89HighlightText, Ui89Look, Ui89ModalDialog, Ui89Scene, Ui89Shortcut, Ui89SpaceVertical, Ui89TabbedCard, Ui89Tabs, Ui89TagBox, Ui89Theme, Ui89TitleBox, Ui89TitleUnderline };
+export { Ui89Button, Ui89Card, Ui89HighlightText, Ui89Look, Ui89ModalDialog, Ui89Scene, Ui89Shortcut, Ui89SpaceVertical, Ui89TabbedCard, Ui89Tabs, Ui89TagBox, Ui89Theme, Ui89TitleBox, Ui89TitleUnderline, Ui89VirtualTable };
 //# sourceMappingURL=index.js.map