@beppla/tapas-ui 1.0.67 → 1.0.68

package/module/Grid/Grid.base.js

@@ -1,24 +1,61 @@
-import memoize from 'memoize-one';
-import { createElement, PureComponent } from 'react';
-import { cancelTimeout, requestTimeout } from './timer';
-import { getScrollbarSize, getRTLOffsetType } from './helper';
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/* eslint-disable no-console */
-
-const IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
+"use strict";
 
+var __extends = this && this.__extends || function () {
+  var extendStatics = function (d, b) {
+    extendStatics = Object.setPrototypeOf || {
+      __proto__: []
+    } instanceof Array && function (d, b) {
+      d.__proto__ = b;
+    } || function (d, b) {
+      for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p];
+    };
+    return extendStatics(d, b);
+  };
+  return function (d, b) {
+    if (typeof b !== "function" && b !== null) throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() {
+      this.constructor = d;
+    }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+  };
+}();
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __importDefault = this && this.__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = createGridComponent;
+var memoize_one_1 = __importDefault(require("memoize-one"));
+var react_1 = require("react");
+var timer_1 = require("./timer");
+var helper_1 = require("./helper");
+var IS_SCROLLING_DEBOUNCE_INTERVAL = 150;
 // @ts-ignore
-const defaultItemKey = ({
-  columnIndex,
-  data: _data,
-  rowIndex
-}) => `${rowIndex}:${columnIndex}`;
+var defaultItemKey = function (_a) {
+  var columnIndex = _a.columnIndex,
+    _data = _a.data,
+    rowIndex = _a.rowIndex;
+  return "".concat(rowIndex, ":").concat(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;
+var devWarningsOverscanCount = null;
+var devWarningsOverscanRowsColumnsCount = null;
+var devWarningsTagName = null;
 if (process.env.NODE_ENV !== 'production') {
   if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
     devWarningsOverscanCount = new WeakSet();
@@ -26,63 +63,175 @@ if (process.env.NODE_ENV !== 'production') {
     devWarningsTagName = new WeakSet();
   }
 }
-export default function createGridComponent({
-  getColumnOffset,
-  getColumnStartIndexForOffset,
-  getColumnStopIndexForStartIndex,
-  getColumnWidth,
-  getEstimatedTotalHeight,
-  getEstimatedTotalWidth,
-  getOffsetForColumnAndAlignment,
-  getOffsetForRowAndAlignment,
-  getRowHeight,
-  getRowOffset,
-  getRowStartIndexForOffset,
-  getRowStopIndexForStartIndex,
-  initInstanceProps,
-  shouldResetStyleCacheOnItemSizeChange,
-  validateProps
-}) {
-  return class Grid extends PureComponent {
-    _instanceProps = initInstanceProps(this.props, this);
-    _resetIsScrollingTimeoutId = null;
-    static defaultProps = {
-      direction: 'ltr',
-      itemData: undefined,
-      useIsScrolling: false
-    };
-    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'
-    };
-
+function createGridComponent(_a) {
+  var _b;
+  var getColumnOffset = _a.getColumnOffset,
+    getColumnStartIndexForOffset = _a.getColumnStartIndexForOffset,
+    getColumnStopIndexForStartIndex = _a.getColumnStopIndexForStartIndex,
+    getColumnWidth = _a.getColumnWidth,
+    getEstimatedTotalHeight = _a.getEstimatedTotalHeight,
+    getEstimatedTotalWidth = _a.getEstimatedTotalWidth,
+    getOffsetForColumnAndAlignment = _a.getOffsetForColumnAndAlignment,
+    getOffsetForRowAndAlignment = _a.getOffsetForRowAndAlignment,
+    getRowHeight = _a.getRowHeight,
+    getRowOffset = _a.getRowOffset,
+    getRowStartIndexForOffset = _a.getRowStartIndexForOffset,
+    getRowStopIndexForStartIndex = _a.getRowStopIndexForStartIndex,
+    initInstanceProps = _a.initInstanceProps,
+    shouldResetStyleCacheOnItemSizeChange = _a.shouldResetStyleCacheOnItemSizeChange,
+    validateProps = _a.validateProps;
+  return _b = /** @class */function (_super) {
+    __extends(Grid, _super);
     // Always use explicit constructor for React components.
     // It produces less code after transpilation. (#26)
     // eslint-disable-next-line no-useless-constructor
-    constructor(props) {
-      super(props);
+    function Grid(props) {
+      var _this = _super.call(this, props) || this;
+      _this._instanceProps = initInstanceProps(_this.props, _this);
+      _this._resetIsScrollingTimeoutId = null;
+      _this.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'
+      };
+      _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' && Object.prototype.hasOwnProperty.call(outerRef, 'current')) {
+          outerRef.current = ref;
+        }
+      };
+      _this._onScroll = function (event) {
+        var _a = event.currentTarget,
+          clientHeight = _a.clientHeight,
+          clientWidth = _a.clientWidth,
+          scrollLeft = _a.scrollLeft,
+          scrollTop = _a.scrollTop,
+          scrollHeight = _a.scrollHeight,
+          scrollWidth = _a.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 ((0, helper_1.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._getItemStyle = function (rowIndex, columnIndex) {
+        var _a = _this.props,
+          columnWidth = _a.columnWidth,
+          direction = _a.direction,
+          rowHeight = _a.rowHeight;
+        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
+        var key = "".concat(rowIndex, ":").concat(columnIndex);
+        var style;
+        if (Object.prototype.hasOwnProperty.call(itemStyleCache, 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._callOnScroll = (0, memoize_one_1.default)(function (scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) {
+        return _this.props.onScroll({
+          horizontalScrollDirection: horizontalScrollDirection,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
+          verticalScrollDirection: verticalScrollDirection,
+          scrollUpdateWasRequested: scrollUpdateWasRequested
+        });
+      });
+      _this._callOnItemsRendered = (0, memoize_one_1.default)(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._resetIsScrollingDebounced = function () {
+        if (_this._resetIsScrollingTimeoutId !== null) {
+          (0, timer_1.cancelTimeout)(_this._resetIsScrollingTimeoutId);
+        }
+        _this._resetIsScrollingTimeoutId = (0, timer_1.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);
+        });
+      };
+      _this._getItemStyleCache = (0, memoize_one_1.default)(function (_, __, ___) {
+        return {};
+      });
+      return _this;
     }
-    static getDerivedStateFromProps(nextProps, prevState) {
+    Grid.getDerivedStateFromProps = function (nextProps, prevState) {
       validateSharedProps(nextProps, prevState);
       validateProps(nextProps);
       return null;
-    }
-    scrollTo({
-      scrollLeft,
-      scrollTop
-    }) {
+    };
+    Grid.prototype.scrollTo = function (_a) {
+      var scrollLeft = _a.scrollLeft,
+        scrollTop = _a.scrollTop;
       if (scrollLeft !== undefined) {
         scrollLeft = Math.max(0, scrollLeft);
       }
       if (scrollTop !== undefined) {
         scrollTop = Math.max(0, scrollTop);
       }
-      this.setState(prevState => {
+      this.setState(function (prevState) {
         if (scrollLeft === undefined) {
           scrollLeft = prevState.scrollLeft;
         }
@@ -94,55 +243,51 @@ export default function createGridComponent({
         }
         return {
           horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
-          scrollLeft,
-          scrollTop,
+          scrollLeft: scrollLeft,
+          scrollTop: scrollTop,
           scrollUpdateWasRequested: true,
           verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
         };
       }, this._resetIsScrollingDebounced);
-    }
-    scrollToItem({
-      align = 'auto',
-      columnIndex,
-      rowIndex
-    }) {
-      const {
-        columnCount,
-        height,
-        rowCount,
-        width
-      } = this.props;
-      const {
-        scrollLeft,
-        scrollTop
-      } = this.state;
-      const scrollbarSize = getScrollbarSize();
+    };
+    Grid.prototype.scrollToItem = function (_a) {
+      var _c = _a.align,
+        align = _c === void 0 ? 'auto' : _c,
+        columnIndex = _a.columnIndex,
+        rowIndex = _a.rowIndex;
+      var _d = this.props,
+        columnCount = _d.columnCount,
+        height = _d.height,
+        rowCount = _d.rowCount,
+        width = _d.width;
+      var _e = this.state,
+        scrollLeft = _e.scrollLeft,
+        scrollTop = _e.scrollTop;
+      var scrollbarSize = (0, helper_1.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);
-
+      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.
-      const horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
-      const verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
+      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
       });
-    }
-    componentDidMount() {
-      const {
-        initialScrollLeft,
-        initialScrollTop
-      } = this.props;
+    };
+    Grid.prototype.componentDidMount = function () {
+      var _a = this.props,
+        initialScrollLeft = _a.initialScrollLeft,
+        initialScrollTop = _a.initialScrollTop;
       if (this._outerRef != null) {
-        const outerRef = this._outerRef;
+        var outerRef = this._outerRef;
         if (typeof initialScrollLeft === 'number') {
           outerRef.scrollLeft = initialScrollLeft;
         }
@@ -151,23 +296,20 @@ export default function createGridComponent({
         }
       }
       this._callPropsCallbacks();
-    }
-    componentDidUpdate() {
-      const {
-        direction
-      } = this.props;
-      const {
-        scrollLeft,
-        scrollTop,
-        scrollUpdateWasRequested
-      } = this.state;
+    };
+    Grid.prototype.componentDidUpdate = function () {
+      var direction = this.props.direction;
+      var _a = this.state,
+        scrollLeft = _a.scrollLeft,
+        scrollTop = _a.scrollTop,
+        scrollUpdateWasRequested = _a.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.
-        const outerRef = this._outerRef;
+        var outerRef = this._outerRef;
         if (direction === 'rtl') {
-          switch (getRTLOffsetType()) {
+          switch ((0, helper_1.getRTLOffsetType)()) {
             case 'negative':
               outerRef.scrollLeft = -scrollLeft;
               break;
@@ -176,10 +318,8 @@ export default function createGridComponent({
               break;
             default:
               {
-                const {
-                  clientWidth,
-                  scrollWidth
-                } = outerRef;
+                var clientWidth = outerRef.clientWidth,
+                  scrollWidth = outerRef.scrollWidth;
                 outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
                 break;
               }
@@ -190,81 +330,80 @@ export default function createGridComponent({
         outerRef.scrollTop = Math.max(0, scrollTop);
       }
       this._callPropsCallbacks();
-    }
-    componentWillUnmount() {
+    };
+    Grid.prototype.componentWillUnmount = function () {
       if (this._resetIsScrollingTimeoutId !== null) {
-        cancelTimeout(this._resetIsScrollingTimeoutId);
+        (0, timer_1.cancelTimeout)(this._resetIsScrollingTimeoutId);
       }
-    }
-    render() {
-      const {
-        children,
-        className,
-        columnCount,
-        direction,
-        height,
-        innerRef,
-        innerElementType,
-        innerTagName,
-        itemData,
-        itemKey = defaultItemKey,
-        outerElementType,
-        outerTagName,
-        rowCount,
-        style,
-        testID,
-        useIsScrolling,
-        width
-      } = this.props;
-      const {
-        isScrolling
-      } = this.state;
-      const [columnStartIndex, columnStopIndex] = this._getHorizontalRangeToRender();
-      const [rowStartIndex, rowStopIndex] = this._getVerticalRangeToRender();
-      const items = [];
+    };
+    Grid.prototype.render = function () {
+      var _a = this.props,
+        children = _a.children,
+        className = _a.className,
+        columnCount = _a.columnCount,
+        direction = _a.direction,
+        height = _a.height,
+        innerRef = _a.innerRef,
+        innerElementType = _a.innerElementType,
+        innerTagName = _a.innerTagName,
+        itemData = _a.itemData,
+        _c = _a.itemKey,
+        itemKey = _c === void 0 ? defaultItemKey : _c,
+        outerElementType = _a.outerElementType,
+        outerTagName = _a.outerTagName,
+        rowCount = _a.rowCount,
+        style = _a.style,
+        testID = _a.testID,
+        useIsScrolling = _a.useIsScrolling,
+        width = _a.width;
+      var isScrolling = this.state.isScrolling;
+      var _d = this._getHorizontalRangeToRender(),
+        columnStartIndex = _d[0],
+        columnStopIndex = _d[1];
+      var _e = this._getVerticalRangeToRender(),
+        rowStartIndex = _e[0],
+        rowStopIndex = _e[1];
+      var items = [];
       if (columnCount > 0 && rowCount) {
-        for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
-          for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
-            items.push(/*#__PURE__*/createElement(children, {
-              columnIndex,
+        for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+          for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+            items.push((0, react_1.createElement)(children, {
+              columnIndex: columnIndex,
               data: itemData,
               isScrolling: useIsScrolling ? isScrolling : undefined,
               key: itemKey({
-                columnIndex,
+                columnIndex: columnIndex,
                 data: itemData,
-                rowIndex
+                rowIndex: 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.
-      const estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
-      const estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
-      const outerRefSetter = {
-        className,
+      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+      var outerRefSetter = __assign({
+        className: className,
         onScroll: this._onScroll,
         ref: this._outerRefSetter,
-        style: {
+        style: __assign({
           position: 'relative',
-          height,
-          width,
+          height: height,
+          width: width,
           overflow: 'auto',
           WebkitOverflowScrolling: 'touch',
           willChange: 'transform',
-          direction,
-          ...style
-        },
-        children: undefined,
-        ...(testID && {
-          testID
-        })
-      };
-      const innerElement = {
+          direction: direction
+        }, style),
+        children: undefined
+      }, testID && {
+        testID: testID
+      });
+      var innerElement = {
         children: items,
         ref: innerRef,
         style: {
@@ -273,258 +412,57 @@ export default function createGridComponent({
           width: estimatedTotalWidth || 0
         }
       };
-      return /*#__PURE__*/createElement(outerElementType || outerTagName || 'div', outerRefSetter, /*#__PURE__*/createElement(innerElementType || innerTagName || 'div', innerElement));
-    }
-    _outerRefSetter = ref => {
-      const {
-        outerRef
-      } = this.props;
-      this._outerRef = ref;
-      if (typeof outerRef === 'function') {
-        outerRef(ref);
-      } else if (outerRef != null && typeof outerRef === 'object' && Object.prototype.hasOwnProperty.call(outerRef, 'current')) {
-        outerRef.current = ref;
-      }
+      return (0, react_1.createElement)(outerElementType || outerTagName || 'div', outerRefSetter, (0, react_1.createElement)(innerElementType || innerTagName || 'div', innerElement));
     };
-    _onScroll = event => {
-      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);
-    };
-    _getItemStyle = (rowIndex, columnIndex) => {
-      const {
-        columnWidth,
-        direction,
-        rowHeight
-      } = this.props;
-      const itemStyleCache = this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && columnWidth, shouldResetStyleCacheOnItemSizeChange && direction, shouldResetStyleCacheOnItemSizeChange && rowHeight);
-      const key = `${rowIndex}:${columnIndex}`;
-      let style;
-      if (Object.prototype.hasOwnProperty.call(itemStyleCache, key)) {
-        style = itemStyleCache[key];
-      } else {
-        const offset = getColumnOffset(this.props, columnIndex, this._instanceProps);
-        const 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 || {};
-    };
-    _callPropsCallbacks() {
-      const {
-        columnCount,
-        onItemsRendered,
-        onScroll,
-        rowCount
-      } = this.props;
+    Grid.prototype._callPropsCallbacks = function () {
+      var _a = this.props,
+        columnCount = _a.columnCount,
+        onItemsRendered = _a.onItemsRendered,
+        onScroll = _a.onScroll,
+        rowCount = _a.rowCount;
       if (typeof onItemsRendered === 'function') {
         if (columnCount > 0 && rowCount > 0) {
-          const [overscanColumnStartIndex, overscanColumnStopIndex, visibleColumnStartIndex, visibleColumnStopIndex] = this._getHorizontalRangeToRender();
-          const [overscanRowStartIndex, overscanRowStopIndex, visibleRowStartIndex, visibleRowStopIndex] = this._getVerticalRangeToRender();
+          var _c = this._getHorizontalRangeToRender(),
+            overscanColumnStartIndex = _c[0],
+            overscanColumnStopIndex = _c[1],
+            visibleColumnStartIndex = _c[2],
+            visibleColumnStopIndex = _c[3];
+          var _d = this._getVerticalRangeToRender(),
+            overscanRowStartIndex = _d[0],
+            overscanRowStopIndex = _d[1],
+            visibleRowStartIndex = _d[2],
+            visibleRowStopIndex = _d[3];
           this._callOnItemsRendered(overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex);
         }
       }
       if (typeof onScroll === 'function') {
-        const {
-          horizontalScrollDirection,
-          scrollLeft,
-          scrollTop,
-          scrollUpdateWasRequested,
-          verticalScrollDirection
-        } = this.state;
+        var _e = this.state,
+          horizontalScrollDirection = _e.horizontalScrollDirection,
+          scrollLeft = _e.scrollLeft,
+          scrollTop = _e.scrollTop,
+          scrollUpdateWasRequested = _e.scrollUpdateWasRequested,
+          verticalScrollDirection = _e.verticalScrollDirection;
         this._callOnScroll(scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested);
       }
-    }
-    _callOnScroll = memoize((scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested) => this.props.onScroll({
-      horizontalScrollDirection,
-      scrollLeft,
-      scrollTop,
-      verticalScrollDirection,
-      scrollUpdateWasRequested
-    }));
-    _callOnItemsRendered = memoize((overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex) => this.props.onItemsRendered({
-      overscanColumnStartIndex,
-      overscanColumnStopIndex,
-      overscanRowStartIndex,
-      overscanRowStopIndex,
-      visibleColumnStartIndex,
-      visibleColumnStopIndex,
-      visibleRowStartIndex,
-      visibleRowStopIndex
-    }));
-    _getVerticalRangeToRender() {
-      const {
-        columnCount,
-        overscanCount,
-        overscanRowCount,
-        overscanRowsCount,
-        rowCount
-      } = this.props;
-      const {
-        isScrolling,
-        verticalScrollDirection,
-        scrollTop
-      } = this.state;
-      const overscanCountResolved = 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];
-    }
-    _getHorizontalRangeToRender() {
-      const {
-        columnCount,
-        overscanColumnCount,
-        overscanColumnsCount,
-        overscanCount,
-        rowCount
-      } = this.props;
-      const {
-        horizontalScrollDirection,
-        isScrolling,
-        scrollLeft
-      } = this.state;
-      const overscanCountResolved = overscanColumnCount || overscanColumnsCount || overscanCount || 1;
+    };
+    Grid.prototype._getVerticalRangeToRender = function () {
+      var _a = this.props,
+        columnCount = _a.columnCount,
+        overscanCount = _a.overscanCount,
+        overscanRowCount = _a.overscanRowCount,
+        overscanRowsCount = _a.overscanRowsCount,
+        rowCount = _a.rowCount;
+      var _c = this.state,
+        isScrolling = _c.isScrolling,
+        verticalScrollDirection = _c.verticalScrollDirection,
+        scrollTop = _c.scrollTop;
+      var overscanCountResolved = overscanRowCount || overscanRowsCount || 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);
-
+      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.
-      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];
-    }
-    _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);
-      });
-    };
-    _getItemStyleCache = memoize((_, __, ___) => ({}));
-  };
-}
-const validateSharedProps = ({
-  children,
-  direction,
-  height,
-  innerTagName,
-  outerTagName,
-  overscanColumnsCount,
-  overscanCount,
-  overscanRowsCount,
-  width
-}, {
-  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.`);
-    }
-  }
-};
-//# sourceMappingURL=Grid.base.js.mapdirection 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;