@beppla/tapas-ui 1.0.70 → 1.0.71

package/module/Grid/Grid.base.js

@@ -1,61 +1,24 @@
-"use strict";
+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;
 
-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
-var defaultItemKey = function (_a) {
-  var columnIndex = _a.columnIndex,
-    _data = _a.data,
-    rowIndex = _a.rowIndex;
-  return "".concat(rowIndex, ":").concat(columnIndex);
-};
+const defaultItemKey = ({
+  columnIndex,
+  data: _data,
+  rowIndex
+}) => `${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;
+let devWarningsOverscanCount = null;
+let devWarningsOverscanRowsColumnsCount = null;
+let devWarningsTagName = null;
 if (process.env.NODE_ENV !== 'production') {
   if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
     devWarningsOverscanCount = new WeakSet();
@@ -63,175 +26,63 @@ if (process.env.NODE_ENV !== 'production') {
     devWarningsTagName = new WeakSet();
   }
 }
-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);
+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'
+    };
+
     // 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 = _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;
+    constructor(props) {
+      super(props);
     }
-    Grid.getDerivedStateFromProps = function (nextProps, prevState) {
+    static getDerivedStateFromProps(nextProps, prevState) {
       validateSharedProps(nextProps, prevState);
       validateProps(nextProps);
       return null;
-    };
-    Grid.prototype.scrollTo = function (_a) {
-      var scrollLeft = _a.scrollLeft,
-        scrollTop = _a.scrollTop;
+    }
+    scrollTo({
+      scrollLeft,
+      scrollTop
+    }) {
       if (scrollLeft !== undefined) {
         scrollLeft = Math.max(0, scrollLeft);
       }
       if (scrollTop !== undefined) {
         scrollTop = Math.max(0, scrollTop);
       }
-      this.setState(function (prevState) {
+      this.setState(prevState => {
         if (scrollLeft === undefined) {
           scrollLeft = prevState.scrollLeft;
         }
@@ -243,51 +94,55 @@ function createGridComponent(_a) {
         }
         return {
           horizontalScrollDirection: prevState.scrollLeft < scrollLeft ? 'forward' : 'backward',
-          scrollLeft: scrollLeft,
-          scrollTop: scrollTop,
+          scrollLeft,
+          scrollTop,
           scrollUpdateWasRequested: true,
           verticalScrollDirection: prevState.scrollTop < scrollTop ? 'forward' : 'backward'
         };
       }, this._resetIsScrollingDebounced);
-    };
-    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)();
+    }
+    scrollToItem({
+      align = 'auto',
+      columnIndex,
+      rowIndex
+    }) {
+      const {
+        columnCount,
+        height,
+        rowCount,
+        width
+      } = this.props;
+      const {
+        scrollLeft,
+        scrollTop
+      } = this.state;
+      const scrollbarSize = getScrollbarSize();
       if (columnIndex !== undefined) {
         columnIndex = Math.max(0, Math.min(columnIndex, columnCount - 1));
       }
       if (rowIndex !== undefined) {
         rowIndex = Math.max(0, Math.min(rowIndex, rowCount - 1));
       }
-      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
-      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+      const estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      const estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+
       // The scrollbar size should be considered when scrolling an item into view,
       // to ensure it's fully visible.
       // But we only need to account for its size when it's actually visible.
-      var horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
-      var verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
+      const horizontalScrollbarSize = estimatedTotalWidth > width ? scrollbarSize : 0;
+      const verticalScrollbarSize = estimatedTotalHeight > height ? scrollbarSize : 0;
       this.scrollTo({
         scrollLeft: columnIndex !== undefined ? getOffsetForColumnAndAlignment(this.props, columnIndex, align, scrollLeft, this._instanceProps, verticalScrollbarSize) : scrollLeft,
         scrollTop: rowIndex !== undefined ? getOffsetForRowAndAlignment(this.props, rowIndex, align, scrollTop, this._instanceProps, horizontalScrollbarSize) : scrollTop
       });
-    };
-    Grid.prototype.componentDidMount = function () {
-      var _a = this.props,
-        initialScrollLeft = _a.initialScrollLeft,
-        initialScrollTop = _a.initialScrollTop;
+    }
+    componentDidMount() {
+      const {
+        initialScrollLeft,
+        initialScrollTop
+      } = this.props;
       if (this._outerRef != null) {
-        var outerRef = this._outerRef;
+        const outerRef = this._outerRef;
         if (typeof initialScrollLeft === 'number') {
           outerRef.scrollLeft = initialScrollLeft;
         }
@@ -296,20 +151,23 @@ function createGridComponent(_a) {
         }
       }
       this._callPropsCallbacks();
-    };
-    Grid.prototype.componentDidUpdate = function () {
-      var direction = this.props.direction;
-      var _a = this.state,
-        scrollLeft = _a.scrollLeft,
-        scrollTop = _a.scrollTop,
-        scrollUpdateWasRequested = _a.scrollUpdateWasRequested;
+    }
+    componentDidUpdate() {
+      const {
+        direction
+      } = this.props;
+      const {
+        scrollLeft,
+        scrollTop,
+        scrollUpdateWasRequested
+      } = this.state;
       if (scrollUpdateWasRequested && this._outerRef != null) {
         // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
         // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
         // So we need to determine which browser behavior we're dealing with, and mimic it.
-        var outerRef = this._outerRef;
+        const outerRef = this._outerRef;
         if (direction === 'rtl') {
-          switch ((0, helper_1.getRTLOffsetType)()) {
+          switch (getRTLOffsetType()) {
             case 'negative':
               outerRef.scrollLeft = -scrollLeft;
               break;
@@ -318,8 +176,10 @@ function createGridComponent(_a) {
               break;
             default:
               {
-                var clientWidth = outerRef.clientWidth,
-                  scrollWidth = outerRef.scrollWidth;
+                const {
+                  clientWidth,
+                  scrollWidth
+                } = outerRef;
                 outerRef.scrollLeft = scrollWidth - clientWidth - scrollLeft;
                 break;
               }
@@ -330,80 +190,81 @@ function createGridComponent(_a) {
         outerRef.scrollTop = Math.max(0, scrollTop);
       }
       this._callPropsCallbacks();
-    };
-    Grid.prototype.componentWillUnmount = function () {
+    }
+    componentWillUnmount() {
       if (this._resetIsScrollingTimeoutId !== null) {
-        (0, timer_1.cancelTimeout)(this._resetIsScrollingTimeoutId);
+        cancelTimeout(this._resetIsScrollingTimeoutId);
       }
-    };
-    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 = [];
+    }
+    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 = [];
       if (columnCount > 0 && rowCount) {
-        for (var rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
-          for (var columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
-            items.push((0, react_1.createElement)(children, {
-              columnIndex: columnIndex,
+        for (let rowIndex = rowStartIndex; rowIndex <= rowStopIndex; rowIndex++) {
+          for (let columnIndex = columnStartIndex; columnIndex <= columnStopIndex; columnIndex++) {
+            items.push(/*#__PURE__*/createElement(children, {
+              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.
-      var estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
-      var estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
-      var outerRefSetter = __assign({
-        className: className,
+      const estimatedTotalHeight = getEstimatedTotalHeight(this.props, this._instanceProps);
+      const estimatedTotalWidth = getEstimatedTotalWidth(this.props, this._instanceProps);
+      const outerRefSetter = {
+        className,
         onScroll: this._onScroll,
         ref: this._outerRefSetter,
-        style: __assign({
+        style: {
           position: 'relative',
-          height: height,
-          width: width,
+          height,
+          width,
           overflow: 'auto',
           WebkitOverflowScrolling: 'touch',
           willChange: 'transform',
-          direction: direction
-        }, style),
-        children: undefined
-      }, testID && {
-        testID: testID
-      });
-      var innerElement = {
+          direction,
+          ...style
+        },
+        children: undefined,
+        ...(testID && {
+          testID
+        })
+      };
+      const innerElement = {
         children: items,
         ref: innerRef,
         style: {
@@ -412,57 +273,258 @@ function createGridComponent(_a) {
           width: estimatedTotalWidth || 0
         }
       };
-      return (0, react_1.createElement)(outerElementType || outerTagName || 'div', outerRefSetter, (0, react_1.createElement)(innerElementType || innerTagName || 'div', innerElement));
+      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;
+      }
     };
-    Grid.prototype._callPropsCallbacks = function () {
-      var _a = this.props,
-        columnCount = _a.columnCount,
-        onItemsRendered = _a.onItemsRendered,
-        onScroll = _a.onScroll,
-        rowCount = _a.rowCount;
+    _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;
       if (typeof onItemsRendered === 'function') {
         if (columnCount > 0 && rowCount > 0) {
-          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];
+          const [overscanColumnStartIndex, overscanColumnStopIndex, visibleColumnStartIndex, visibleColumnStopIndex] = this._getHorizontalRangeToRender();
+          const [overscanRowStartIndex, overscanRowStopIndex, visibleRowStartIndex, visibleRowStopIndex] = this._getVerticalRangeToRender();
           this._callOnItemsRendered(overscanColumnStartIndex, overscanColumnStopIndex, overscanRowStartIndex, overscanRowStopIndex, visibleColumnStartIndex, visibleColumnStopIndex, visibleRowStartIndex, visibleRowStopIndex);
         }
       }
       if (typeof onScroll === 'function') {
-        var _e = this.state,
-          horizontalScrollDirection = _e.horizontalScrollDirection,
-          scrollLeft = _e.scrollLeft,
-          scrollTop = _e.scrollTop,
-          scrollUpdateWasRequested = _e.scrollUpdateWasRequested,
-          verticalScrollDirection = _e.verticalScrollDirection;
+        const {
+          horizontalScrollDirection,
+          scrollLeft,
+          scrollTop,
+          scrollUpdateWasRequested,
+          verticalScrollDirection
+        } = this.state;
         this._callOnScroll(scrollLeft, scrollTop, horizontalScrollDirection, verticalScrollDirection, scrollUpdateWasRequested);
       }
-    };
-    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;
+    }
+    _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];
       }
-      var startIndex = getRowStartIndexForOffset(this.props, scrollTop, this._instanceProps);
-      var stopIndex = getRowStopIndexForStartIndex(this.props, startIndex, scrollTop, this._instanceProps);
+      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;
+      if (columnCount === 0 || rowCount === 0) {
+        return [0, 0, 0, 0];
+      }
+      const startIndex = getColumnStartIndexForOffset(this.props, scrollLeft, this._instanceProps);
+      const stopIndex = getColumnStopIndexForStartIndex(this.props, startIndex, scrollLeft, this._instanceProps);
+
+      // Overscan by one item in each direction so that tab/focus works.
+      // If there isn't at least one extra item, tab loops back around.
+      const overscanBackward = !isScrolling || horizontalScrollDirection === 'backward' ? Math.max(1, overscanCountResolved) : 1;
+      const overscanForward = !isScrolling || horizontalScrollDirection === 'forward' ? Math.max(1, overscanCountResolved) : 1;
+      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(columnCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
+    }
+    _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;