baseui 0.0.0-alpha-fd35cbd → 0.0.0-alpha-2158d09

package/a11y/a11y.js

@@ -140,8 +140,8 @@ function Violation(props) {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
-  }, /*#__PURE__*/React.createElement(_index2.Caption1, null, props.target), props.violations.map(function (violation, index) {
-    return /*#__PURE__*/React.createElement(_index2.Paragraph3, {
+  }, /*#__PURE__*/React.createElement(_index2.ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
+    return /*#__PURE__*/React.createElement(_index2.ParagraphSmall, {
       key: index
     }, violation.description);
   }))));

package/a11y/a11y.js.flow

@@ -11,7 +11,7 @@ import * as React from 'react';
 import axe from 'axe-core';
 
 import {Layer, TetherBehavior, TETHER_PLACEMENT} from '../layer/index.js';
-import {Paragraph3, Caption1} from '../typography/index.js';
+import {ParagraphSmall, ParagraphXSmall} from '../typography/index.js';
 import {styled} from '../styles/index.js';
 import {ThemeContext} from '../styles/theme-provider.js';
 
@@ -101,9 +101,9 @@ function Violation(props: ViolationPropsT) {
           $top={`${offset.top}px` || '0px'}
           $left={`${offset.left}px` || '0px'}
         >
-          <Caption1>{props.target}</Caption1>
+          <ParagraphXSmall>{props.target}</ParagraphXSmall>
           {props.violations.map((violation, index) => (
-            <Paragraph3 key={index}>{violation.description}</Paragraph3>
+            <ParagraphSmall key={index}>{violation.description}</ParagraphSmall>
           ))}
         </ViolationContainer>
       </TetherBehavior>

package/button/styled-components.js

@@ -46,11 +46,14 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     transitionDuration: $theme.animation.timing200,
     transitionTimingFunction: $theme.animation.linearCurve,
     cursor: 'pointer',
-    ':disabled': {
-      cursor: 'not-allowed',
-      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText
-    },
+    ':disabled': _objectSpread({
+      cursor: 'not-allowed'
+    }, getDisabledStyles({
+      $theme: $theme,
+      $kind: $kind,
+      $disabled: $disabled,
+      $isSelected: $isSelected
+    })),
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,
@@ -275,10 +278,36 @@ function getFontStyles(_ref10) {
   }
 }
 
-function getPaddingStyles(_ref11) {
+function getDisabledStyles(_ref11) {
   var $theme = _ref11.$theme,
-      $size = _ref11.$size,
-      $shape = _ref11.$shape;
+      $kind = _ref11.$kind,
+      $isSelected = _ref11.$isSelected,
+      $disabled = _ref11.$disabled;
+
+  if ($disabled && $isSelected) {
+    if ($kind === _constants.KIND.primary || $kind === _constants.KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
+function getPaddingStyles(_ref12) {
+  var $theme = _ref12.$theme,
+      $size = _ref12.$size,
+      $shape = _ref12.$shape;
   var iconShape = $shape === _constants.SHAPE.square || $shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round;
 
   switch ($size) {
@@ -316,12 +345,12 @@ function getPaddingStyles(_ref11) {
   }
 }
 
-function getKindStyles(_ref12) {
-  var $theme = _ref12.$theme,
-      $isLoading = _ref12.$isLoading,
-      $isSelected = _ref12.$isSelected,
-      $kind = _ref12.$kind,
-      $disabled = _ref12.$disabled;
+function getKindStyles(_ref13) {
+  var $theme = _ref13.$theme,
+      $isLoading = _ref13.$isLoading,
+      $isSelected = _ref13.$isSelected,
+      $kind = _ref13.$kind,
+      $disabled = _ref13.$disabled;
 
   if ($disabled) {
     return Object.freeze({});
@@ -409,10 +438,10 @@ function getKindStyles(_ref12) {
   }
 }
 
-function getShapeStyles(_ref13) {
-  var $theme = _ref13.$theme,
-      $shape = _ref13.$shape,
-      $size = _ref13.$size;
+function getShapeStyles(_ref14) {
+  var $theme = _ref14.$theme,
+      $shape = _ref14.$shape,
+      $size = _ref14.$size;
 
   if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {
     var height, width;

package/button/styled-components.js.flow

@@ -46,11 +46,7 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor:
-        $kind === KIND.minimal || $kind === KIND.tertiary
-          ? 'transparent'
-          : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText,
+      ...getDisabledStyles({$theme, $kind, $disabled, $isSelected}),
     },
     marginLeft: 0,
     marginTop: 0,
@@ -229,6 +225,30 @@ function getFontStyles({$theme, $size}) {
   }
 }
 
+function getDisabledStyles({$theme, $kind, $isSelected, $disabled}) {
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill,
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText,
+      };
+    }
+  }
+
+  return {
+    backgroundColor:
+      $kind === KIND.minimal || $kind === KIND.tertiary
+        ? 'transparent'
+        : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText,
+  };
+}
+
 function getPaddingStyles({$theme, $size, $shape}) {
   const iconShape =
     $shape === SHAPE.square ||

package/combobox/combobox.js

@@ -60,6 +60,7 @@ function Combobox(props) {
       onChange = props.onChange,
       onFocus = props.onFocus,
       onSubmit = props.onSubmit,
+      listBoxLabel = props.listBoxLabel,
       mapOptionToNode = props.mapOptionToNode,
       mapOptionToString = props.mapOptionToString,
       id = props.id,
@@ -322,6 +323,7 @@ function Combobox(props) {
       ,
       ref: listboxRef,
       role: "listbox",
+      "aria-label": listBoxLabel,
       $width: listboxWidth
     }, listBoxProps), options.map(function (option, index) {
       var isSelected = selectionIndex === index;
@@ -360,9 +362,8 @@ function Combobox(props) {
     role: "combobox"
   }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
     inputRef: handleInputRef,
-    "aria-activedescendant": selectionIndex >= 0 ? activeDescendantId : undefined,
+    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
     "aria-autocomplete": "list",
-    "aria-controls": listboxId,
     disabled: disabled,
     error: error,
     name: name,
@@ -375,7 +376,9 @@ function Combobox(props) {
     positive: positive,
     size: size,
     value: tempValue ? tempValue : value
-  }, restInputProps)))));
+  }, isOpen ? {
+    'aria-controls': listboxId
+  } : {}, restInputProps)))));
 }
 
 var _default = Combobox;

package/combobox/combobox.js.flow

@@ -38,6 +38,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
     onChange,
     onFocus,
     onSubmit,
+    listBoxLabel,
     mapOptionToNode,
     mapOptionToString,
     id,
@@ -274,6 +275,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             // eslint-disable-next-line flowtype/no-weak-types
             ref={(listboxRef: any)}
             role="listbox"
+            aria-label={listBoxLabel}
             $width={listboxWidth}
             {...listBoxProps}
           >
@@ -322,10 +324,9 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
           <OverriddenInput
             inputRef={handleInputRef}
             aria-activedescendant={
-              selectionIndex >= 0 ? activeDescendantId : undefined
+              isOpen && selectionIndex >= 0 ? activeDescendantId : undefined
             }
             aria-autocomplete="list"
-            aria-controls={listboxId}
             disabled={disabled}
             error={error}
             name={name}
@@ -338,6 +339,7 @@ function Combobox<OptionT>(props: PropsT<OptionT>) {
             positive={positive}
             size={size}
             value={tempValue ? tempValue : value}
+            {...(isOpen ? {'aria-controls': listboxId} : {})}
             {...restInputProps}
           />
         </InputContainer>

package/combobox/types.js.flow

@@ -18,6 +18,8 @@ export type PropsT<OptionT = mixed> = {|
   disabled?: boolean,
   // Proxies value through to Input component.
   error?: boolean,
+  // Label used for the listbox/popup with options
+  listBoxLabel?: string,
   // Used to render a custom node besides the default.
   mapOptionToNode?: React.AbstractComponent<{|
     isSelected: boolean,

package/data-table/column-categorical.js

@@ -208,7 +208,7 @@ function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
     return /*#__PURE__*/React.createElement("div", {
       className: checkboxStyles,
       key: i

package/data-table/column-categorical.js.flow

@@ -14,7 +14,7 @@ import {Checkbox, StyledLabel} from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron, withStyle} from '../styles/index.js';
-import {Label3} from '../typography/index.js';
+import {LabelSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS} from './constants.js';
@@ -184,7 +184,7 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
         })}
       >
         {!filteredCategories.length && (
-          <Label3>{locale.datatable.categoricalFilterEmpty}</Label3>
+          <LabelSmall>{locale.datatable.categoricalFilterEmpty}</LabelSmall>
         )}
 
         {Boolean(filteredCategories.length) &&

package/data-table/column-datetime.js

@@ -456,7 +456,7 @@ function DatetimeFilter(props) {
       if (Array.isArray(date)) {
         if (!date.length) return;
         var nextDates = date.map(function (d, i) {
-          return d ? (0, _index13.applyDateToTime)(rangeDates[i], d) : null;
+          return (0, _index13.applyDateToTime)(rangeDates[i], d);
         });
         setRangeDates(nextDates);
       }

package/data-table/column-datetime.js.flow

@@ -410,7 +410,7 @@ function DatetimeFilter(props) {
                     if (Array.isArray(date)) {
                       if (!date.length) return;
                       const nextDates = date.map((d, i) =>
-                        d ? applyDateToTime(rangeDates[i], d) : null,
+                        applyDateToTime(rangeDates[i], d),
                       );
                       setRangeDates(nextDates);
                     }

package/data-table/column-numerical.js

@@ -493,7 +493,7 @@ function NumericalFilter(props) {
       marginLeft: theme.sizing.scale300,
       marginRight: theme.sizing.scale300
     })
-  }, /*#__PURE__*/React.createElement(_index5.Paragraph4, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.Paragraph4, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
       justifyContent: 'space-between'

package/data-table/column-numerical.js.flow

@@ -12,7 +12,7 @@ import {Button, SIZE} from '../button/index.js';
 import {ButtonGroup, MODE} from '../button-group/index.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron} from '../styles/index.js';
-import {Paragraph4} from '../typography/index.js';
+import {ParagraphXSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS, NUMERICAL_FORMATS, NUMERICAL_OPERATIONS} from './constants.js';
@@ -388,8 +388,8 @@ function NumericalFilter(props) {
           marginRight: theme.sizing.scale300,
         })}
       >
-        <Paragraph4>{format(min, props.options)}</Paragraph4>{' '}
-        <Paragraph4>{format(max, props.options)}</Paragraph4>
+        <ParagraphXSmall>{format(min, props.options)}</ParagraphXSmall>{' '}
+        <ParagraphXSmall>{format(max, props.options)}</ParagraphXSmall>
       </div>
 
       <div className={css({display: 'flex', justifyContent: 'space-between'})}>

package/data-table/data-table.js

@@ -62,6 +62,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 // consider pulling this out to a prop if useful.
 var HEADER_ROW_HEIGHT = 48;
 
+var sum = function sum(ns) {
+  return ns.reduce(function (s, n) {
+    return s + n;
+  }, 0);
+};
+
 function CellPlacement(_ref) {
   var columnIndex = _ref.columnIndex,
       rowIndex = _ref.rowIndex,
@@ -320,7 +326,7 @@ function Header(props) {
   }))));
 }
 
-function Headers(props) {
+function Headers() {
   var _useStyletron5 = (0, _index2.useStyletron)(),
       _useStyletron6 = _slicedToArray(_useStyletron5, 2),
       css = _useStyletron6[0],
@@ -339,9 +345,7 @@ function Headers(props) {
       position: 'sticky',
       top: 0,
       left: 0,
-      width: "".concat(ctx.widths.reduce(function (sum, w) {
-        return sum + w;
-      }, 0), "px"),
+      width: "".concat(sum(ctx.widths), "px"),
       height: "".concat(HEADER_ROW_HEIGHT, "px"),
       display: 'flex',
       // this feels bad.. the absolutely positioned children elements
@@ -564,22 +568,27 @@ function DataTable(_ref2) {
     }
 
     return rowHeight;
-  }, [rowHeight]);
-  var gridRef = React.useRef(null);
+  }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
+  // eslint-disable-next-line flowtype/no-weak-types
 
-  var _React$useState7 = React.useState(columns.map(function () {
-    return 0;
-  })),
+  var _React$useState7 = React.useState(null),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      measuredWidths = _React$useState8[0],
-      setMeasuredWidths = _React$useState8[1];
+      gridRef = _React$useState8[0],
+      setGridRef = _React$useState8[1];
 
   var _React$useState9 = React.useState(columns.map(function () {
     return 0;
   })),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      resizeDeltas = _React$useState10[0],
-      setResizeDeltas = _React$useState10[1];
+      measuredWidths = _React$useState10[0],
+      setMeasuredWidths = _React$useState10[1];
+
+  var _React$useState11 = React.useState(columns.map(function () {
+    return 0;
+  })),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      resizeDeltas = _React$useState12[0],
+      setResizeDeltas = _React$useState12[1];
 
   React.useEffect(function () {
     setMeasuredWidths(function (prev) {
@@ -594,11 +603,11 @@ function DataTable(_ref2) {
     });
   }, [columns]);
   var resetAfterColumnIndex = React.useCallback(function (columnIndex) {
-    if (gridRef.current) {
+    if (gridRef) {
       // $FlowFixMe trigger react-window to layout the elements again
-      gridRef.current.resetAfterColumnIndex(columnIndex, true);
+      gridRef.resetAfterColumnIndex(columnIndex, true);
     }
-  }, [gridRef.current]);
+  }, [gridRef]);
   var handleWidthsChange = React.useCallback(function (nextWidths) {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -611,20 +620,20 @@ function DataTable(_ref2) {
     resetAfterColumnIndex(columnIndex);
   }, [setResizeDeltas, resetAfterColumnIndex]);
 
-  var _React$useState11 = React.useState(0),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      scrollLeft = _React$useState12[0],
-      setScrollLeft = _React$useState12[1];
-
-  var _React$useState13 = React.useState(false),
+  var _React$useState13 = React.useState(0),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      isScrollingX = _React$useState14[0],
-      setIsScrollingX = _React$useState14[1];
+      scrollLeft = _React$useState14[0],
+      setScrollLeft = _React$useState14[1];
 
   var _React$useState15 = React.useState(false),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      recentlyScrolledX = _React$useState16[0],
-      setRecentlyScrolledX = _React$useState16[1];
+      isScrollingX = _React$useState16[0],
+      setIsScrollingX = _React$useState16[1];
+
+  var _React$useState17 = React.useState(false),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      recentlyScrolledX = _React$useState18[0],
+      setRecentlyScrolledX = _React$useState18[1];
 
   React.useLayoutEffect(function () {
     if (recentlyScrolledX !== isScrollingX) {
@@ -746,25 +755,18 @@ function DataTable(_ref2) {
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
 
-  var _React$useState17 = React.useState(0),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      browserScrollbarWidth = _React$useState18[0],
-      setBrowserScrollbarWidth = _React$useState18[1];
+  var _React$useState19 = React.useState(0),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      browserScrollbarWidth = _React$useState20[0],
+      setBrowserScrollbarWidth = _React$useState20[1];
 
   var normalizedWidths = React.useMemo(function () {
-    var sum = function sum(ns) {
-      return ns.reduce(function (s, n) {
-        return s + n;
-      }, 0);
-    };
-
     var resizedWidths = measuredWidths.map(function (w, i) {
       return Math.floor(w) + Math.floor(resizeDeltas[i]);
     });
 
-    if (gridRef.current) {
-      // $FlowFixMe
-      var gridProps = gridRef.current.props;
+    if (gridRef) {
+      var gridProps = gridRef.props;
       var isContentTallerThanContainer = false;
       var visibleRowHeight = 0;
 
@@ -801,7 +803,7 @@ function DataTable(_ref2) {
     }
 
     return resizedWidths;
-  }, [measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   var isSelectable = batchActions ? !!batchActions.length : false;
   var isSelectedAll = React.useMemo(function () {
     if (!selectedRowIds) {
@@ -845,23 +847,23 @@ function DataTable(_ref2) {
     }
   }, [onSort]);
 
-  var _React$useState19 = React.useState(-1),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      columnHighlightIndex = _React$useState20[0],
-      setColumnHighlightIndex = _React$useState20[1];
-
   var _React$useState21 = React.useState(-1),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      rowHighlightIndex = _React$useState22[0],
-      setRowHighlightIndex = _React$useState22[1];
+      columnHighlightIndex = _React$useState22[0],
+      setColumnHighlightIndex = _React$useState22[1];
+
+  var _React$useState23 = React.useState(-1),
+      _React$useState24 = _slicedToArray(_React$useState23, 2),
+      rowHighlightIndex = _React$useState24[0],
+      setRowHighlightIndex = _React$useState24[1];
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
 
-    if (gridRef.current) {
+    if (gridRef) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.current.scrollToItem({
+        gridRef.scrollToItem({
           rowIndex: nextIndex
         });
       }
@@ -952,8 +954,9 @@ function DataTable(_ref2) {
       }
     }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
     , {
-      ref: gridRef,
+      ref: setGridRef,
       overscanRowCount: 10,
+      overscanColumnCount: 5,
       innerElementType: InnerTableElement,
       columnCount: columns.length,
       columnWidth: function columnWidth(columnIndex) {

package/data-table/data-table.js.flow

@@ -87,6 +87,8 @@ type CellPlacementPropsT = {
   },
 };
 
+const sum = ns => ns.reduce((s, n) => s + n, 0);
+
 function CellPlacement({columnIndex, rowIndex, data, style}) {
   const [css, theme] = useStyletron();
 
@@ -411,7 +413,7 @@ function Header(props: HeaderProps) {
   );
 }
 
-function Headers(props: {||}) {
+function Headers() {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
   const ctx = React.useContext(HeaderContext);
@@ -423,7 +425,7 @@ function Headers(props: {||}) {
         position: 'sticky',
         top: 0,
         left: 0,
-        width: `${ctx.widths.reduce((sum, w) => sum + w, 0)}px`,
+        width: `${sum(ctx.widths)}px`,
         height: `${HEADER_ROW_HEIGHT}px`,
         display: 'flex',
         // this feels bad.. the absolutely positioned children elements
@@ -696,7 +698,10 @@ export function DataTable({
     },
     [rowHeight],
   );
-  const gridRef = React.useRef<typeof VariableSizeGrid | null>(null);
+
+  // We use state for our ref, to allow hooks to  update when the ref changes.
+  // eslint-disable-next-line flowtype/no-weak-types
+  const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
   const [measuredWidths, setMeasuredWidths] = React.useState(
     columns.map(() => 0),
   );
@@ -712,12 +717,12 @@ export function DataTable({
 
   const resetAfterColumnIndex = React.useCallback(
     columnIndex => {
-      if (gridRef.current) {
+      if (gridRef) {
         // $FlowFixMe trigger react-window to layout the elements again
-        gridRef.current.resetAfterColumnIndex(columnIndex, true);
+        gridRef.resetAfterColumnIndex(columnIndex, true);
       }
     },
-    [gridRef.current],
+    [gridRef],
   );
   const handleWidthsChange = React.useCallback(
     nextWidths => {
@@ -843,13 +848,11 @@ export function DataTable({
 
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
-    const sum = ns => ns.reduce((s, n) => s + n, 0);
     const resizedWidths = measuredWidths.map(
       (w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]),
     );
-    if (gridRef.current) {
-      // $FlowFixMe
-      const gridProps = gridRef.current.props;
+    if (gridRef) {
+      const gridProps = gridRef.props;
 
       let isContentTallerThanContainer = false;
       let visibleRowHeight = 0;
@@ -886,6 +889,7 @@ export function DataTable({
     }
     return resizedWidths;
   }, [
+    gridRef,
     measuredWidths,
     resizeDeltas,
     browserScrollbarWidth,
@@ -948,10 +952,10 @@ export function DataTable({
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
-    if (gridRef.current) {
+    if (gridRef) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.current.scrollToItem({rowIndex: nextIndex});
+        gridRef.scrollToItem({rowIndex: nextIndex});
       }
       if (onRowHighlightChange) {
         onRowHighlightChange(nextIndex, rows[nextIndex - 1]);
@@ -1051,8 +1055,9 @@ export function DataTable({
           >
             <VariableSizeGrid
               // eslint-disable-next-line flowtype/no-weak-types
-              ref={(gridRef: any)}
+              ref={(setGridRef: any)}
               overscanRowCount={10}
+              overscanColumnCount={5}
               innerElementType={InnerTableElement}
               columnCount={columns.length}
               columnWidth={columnIndex => normalizedWidths[columnIndex]}