baseui 12.0.0 → 12.1.0

package/combobox/combobox.js

@@ -215,6 +215,7 @@ function Combobox(props) {
     if (listboxRef.current && event.relatedTarget && // NOTE(chase): Contains method expects a Node type, but relatedTarget is
     // EventTarget which is a super type of Node. Passing an EventTarget seems
     // to work fine, assuming the flow type is too strict.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     listboxRef.current.contains(event.relatedTarget)) {
       return;
     }
@@ -307,78 +308,84 @@ function Combobox(props) {
       popoverOverrides = _getOverrides12$$over === void 0 ? {} : _getOverrides12$$over,
       restPopoverProps = _objectWithoutProperties(_getOverrides12$, _excluded2);
 
-  return /*#__PURE__*/React.createElement(Root, _extends({
-    ref: rootRef
-  }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
-  // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
-  // Select Component does the same thing
-  , _extends({
-    autoFocus: false,
-    isOpen: isOpen,
-    overrides: popoverOverrides,
-    placement: _popover.PLACEMENT.bottomLeft,
-    onClick: handleInputClick,
-    content: /*#__PURE__*/React.createElement(ListBox // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(Root, _extends({
+      ref: rootRef
+    }, rootProps), /*#__PURE__*/React.createElement(OverriddenPopover // React-focus-lock used in Popover used to skip non-tabbable elements (`tabIndex=-1`) elements for focus, we had ListBox with tabIndex to disable focus on
+    // the ListBox, but we can just disable autoFocus (as ListBox / ListItem should not be focusable) (and input is also not autoFocused).
+    // Select Component does the same thing
     , _extends({
-      tabIndex: "-1",
-      id: listboxId,
-      ref: listboxRef,
-      role: "listbox",
-      "aria-label": listBoxLabel,
-      $width: listboxWidth
-    }, listBoxProps), options.map(function (option, index) {
-      var isSelected = selectionIndex === index;
-      var ReplacementNode = mapOptionToNode;
-      return (
-        /*#__PURE__*/
-        // List items are not focusable, therefore will never trigger a key event from it.
-        // Secondly, key events are handled from the input element.
-        // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-        React.createElement(ListItem, _extends({
-          "aria-selected": isSelected,
-          id: isSelected ? activeDescendantId : null,
-          key: index,
-          onClick: function onClick() {
-            return handleOptionClick(index);
-          },
-          ref: isSelected ? selectedOptionRef : null,
-          role: "option",
-          $isSelected: isSelected,
-          $size: size
-        }, listItemProps), ReplacementNode ? /*#__PURE__*/React.createElement(ReplacementNode, {
-          isSelected: isSelected,
-          option: option
-        }) : mapOptionToString(option))
-      );
-    }))
-  }, restPopoverProps), /*#__PURE__*/React.createElement(InputContainer, _extends({
-    "aria-expanded": isOpen,
-    "aria-haspopup": "listbox",
-    "aria-owns": listboxId // a11y linter implements the older 1.0 spec, suppressing to use updated 1.1
-    // https://github.com/A11yance/aria-query/issues/43
-    // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/442
-    // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
-    ,
-    role: "combobox"
-  }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
-    inputRef: handleInputRef,
-    "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
-    "aria-autocomplete": "list",
-    disabled: disabled,
-    error: error,
-    name: name,
-    id: id,
-    onBlur: handleBlur,
-    onChange: handleInputChange,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    overrides: inputOverrides,
-    positive: positive,
-    size: size,
-    value: tempValue ? tempValue : value
-  }, isOpen ? {
-    'aria-controls': listboxId
-  } : {}, restInputProps)))));
+      autoFocus: false,
+      isOpen: isOpen,
+      overrides: popoverOverrides,
+      placement: _popover.PLACEMENT.bottomLeft,
+      onClick: handleInputClick,
+      content: /*#__PURE__*/React.createElement(ListBox // TabIndex attribute exists to exclude option clicks from triggering onBlur event actions.
+      , _extends({
+        tabIndex: "-1",
+        id: listboxId // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ,
+        ref: listboxRef,
+        role: "listbox",
+        "aria-label": listBoxLabel,
+        $width: listboxWidth
+      }, listBoxProps), options.map(function (option, index) {
+        var isSelected = selectionIndex === index;
+        var ReplacementNode = mapOptionToNode;
+        return (
+          /*#__PURE__*/
+          // List items are not focusable, therefore will never trigger a key event from it.
+          // Secondly, key events are handled from the input element.
+          // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+          React.createElement(ListItem, _extends({
+            "aria-selected": isSelected,
+            id: isSelected ? activeDescendantId : null,
+            key: index,
+            onClick: function onClick() {
+              return handleOptionClick(index);
+            } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            ,
+            ref: isSelected ? selectedOptionRef : null,
+            role: "option",
+            $isSelected: isSelected,
+            $size: size
+          }, listItemProps), ReplacementNode ? /*#__PURE__*/React.createElement(ReplacementNode, {
+            isSelected: isSelected,
+            option: option
+          }) : mapOptionToString(option))
+        );
+      }))
+    }, restPopoverProps), /*#__PURE__*/React.createElement(InputContainer, _extends({
+      "aria-expanded": isOpen,
+      "aria-haspopup": "listbox",
+      "aria-owns": listboxId // a11y linter implements the older 1.0 spec, suppressing to use updated 1.1
+      // https://github.com/A11yance/aria-query/issues/43
+      // https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/442
+      // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
+      ,
+      role: "combobox"
+    }, inputContainerProps), /*#__PURE__*/React.createElement(OverriddenInput, _extends({
+      inputRef: handleInputRef,
+      "aria-activedescendant": isOpen && selectionIndex >= 0 ? activeDescendantId : undefined,
+      "aria-autocomplete": "list",
+      disabled: disabled,
+      error: error,
+      name: name,
+      id: id,
+      onBlur: handleBlur,
+      onChange: handleInputChange,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown,
+      overrides: inputOverrides,
+      positive: positive,
+      size: size,
+      value: tempValue ? tempValue : value
+    }, isOpen ? {
+      'aria-controls': listboxId
+    } : {}, restInputProps)))))
+  );
 }
 
 var _default = Combobox;

package/combobox/styled-components.js

@@ -18,9 +18,11 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var StyledRoot = (0, _styles.styled)('div', {});
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 var StyledInputContainer = (0, _styles.styled)('div', {});
 exports.StyledInputContainer = StyledInputContainer;
 StyledInputContainer.displayName = "StyledInputContainer";
+StyledInputContainer.displayName = 'StyledInputContainer';
 var StyledListBox = (0, _styles.styled)('ul', function (_ref) {
   var $theme = _ref.$theme,
       $width = _ref.$width;
@@ -37,6 +39,7 @@ var StyledListBox = (0, _styles.styled)('ul', function (_ref) {
 });
 exports.StyledListBox = StyledListBox;
 StyledListBox.displayName = "StyledListBox";
+StyledListBox.displayName = 'StyledListBox';
 
 function buildStylesForSize(size, theme) {
   var paddingDir = theme.direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
@@ -81,4 +84,5 @@ var StyledListItem = (0, _styles.styled)('li', function (_ref2) {
   });
 });
 exports.StyledListItem = StyledListItem;
-StyledListItem.displayName = "StyledListItem";
+StyledListItem.displayName = "StyledListItem";
+StyledListItem.displayName = 'StyledListItem';

package/combobox/types.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
+import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-import { SIZE } from '../input';
-import type { ChangeEvent } from 'react';
+import type { SIZE } from '../input';
 export declare type ComboboxOverrides = {
     Root?: Override;
     InputContainer?: Override;
@@ -23,9 +22,9 @@ export declare type ComboboxProps<Option = unknown> = {
     id?: string;
     name?: string;
     inputRef?: React.Ref<HTMLElement>;
-    onBlur?: (a: ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (a: React.ChangeEvent<HTMLInputElement>) => unknown;
     onChange: (b: string, a: Option | null) => unknown;
-    onFocus?: (a: ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (a: React.ChangeEvent<HTMLInputElement>) => unknown;
     onSubmit?: (a: {
         closeListbox: () => void;
         value: string;

package/data-table/column-anchor.js

@@ -37,6 +37,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function AnchorFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for anchor column");
 }
@@ -62,7 +63,9 @@ function AnchorCell(props) {
 function AnchorColumn(options) {
   return (0, _column.default)({
     kind: _constants.COLUMNS.ANCHOR,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     buildFilter: function buildFilter(params) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       return function (data) {
         return true;
       };

package/data-table/column-datetime.js

@@ -264,7 +264,8 @@ function DatetimeFilter(props) {
   var _React$useState7 = React.useState([initialState.categoricalOperator]),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
       categoricalOperator = _React$useState8[0],
-      setCategoricalOperator = _React$useState8[1];
+      setCategoricalOperator = _React$useState8[1]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
   var _React$useState9 = React.useState(initialState.rangeDates.length ? initialState.rangeDates : [new Date(datesSorted[0]), new Date(datesSorted[datesSorted.length - 1])]),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
@@ -305,6 +306,7 @@ function DatetimeFilter(props) {
     },
     onApply: function onApply() {
       if (isRange) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var op = rangeOperator[0].id;
         var description = '';
 
@@ -336,6 +338,7 @@ function DatetimeFilter(props) {
       }
 
       if (isCategorical) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         var _op = categoricalOperator[0].id;
         var selection = [];
         var operatorLocaleLabelKey = '';
@@ -428,7 +431,8 @@ function DatetimeFilter(props) {
     value: rangeOperator,
     onChange: function onChange(params) {
       return setRangeOperator(params.value);
-    },
+    } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ,
     mountNode: mountNode.current,
     options: RANGE_OPERATIONS.map(function (op) {
       return {
@@ -442,7 +446,8 @@ function DatetimeFilter(props) {
     className: css({
       paddingTop: theme.sizing.scale600
     })
-  }, (rangeOperator[0].id === _constants.DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === _constants.DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(_datepicker.Datepicker, {
+  }, (rangeOperator[0].id === _constants.DATETIME_OPERATIONS.RANGE_DATETIME || rangeOperator[0].id === _constants.DATETIME_OPERATIONS.RANGE_DATE) && /*#__PURE__*/React.createElement(_datepicker.Datepicker // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , {
     mountNode: mountNode.current,
     value: rangeDates,
     onChange: function onChange(_ref2) {
@@ -513,7 +518,8 @@ function DatetimeFilter(props) {
         label: locale.datatable[op.localeLabelKey],
         id: op.id
       };
-    }),
+    }) // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ,
     mountNode: mountNode.current,
     size: "compact",
     clearable: false

package/data-table/column-numerical.js

@@ -103,6 +103,7 @@ function validateInput(input) {
 var bisect = (0, _d2.bisector)(function (d) {
   return d.x0;
 });
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 var Histogram = /*#__PURE__*/React.memo(function Histogram(_ref) {
   var data = _ref.data,
       lower = _ref.lower,
@@ -411,6 +412,7 @@ function NumericalFilter(props) {
             $thumbIndex = _ref4.$thumbIndex;
         return /*#__PURE__*/React.createElement(React.Fragment, null, $value[$thumbIndex]);
       },
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       TickBar: function TickBar(_ref5) {
         var $min = _ref5.$min,
             $max = _ref5.$max;
@@ -430,9 +432,7 @@ function NumericalFilter(props) {
         }
       },
       InnerTrack: {
-        style: function style(_ref6) {
-          var $theme = _ref6.$theme;
-
+        style: function style() {
           if (!isRange) {
             return {
               // For range selection we use the color as is, but when selecting the single value,
@@ -542,7 +542,7 @@ var defaultOptions = {
   sortable: true,
   filterable: true,
   format: _constants.NUMERICAL_FORMATS.DEFAULT,
-  highlight: function (n) {
+  highlight: function () {
     return false;
   },
   precision: 0

package/data-table/column-string.js

@@ -37,6 +37,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 function StringFilter(props) {
   return /*#__PURE__*/React.createElement("div", null, "not implemented for string column");
 }
@@ -63,7 +64,9 @@ function StringColumn(options) {
   return (0, _column.default)({
     kind: _constants.COLUMNS.STRING,
     cellBlockAlign: options.cellBlockAlign,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     buildFilter: function buildFilter(params) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       return function (data) {
         return true;
       };

package/data-table/column.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _checkbox = require("../checkbox");
 
+var _locale = require("../locale");
+
 var _styles = require("../styles");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -50,8 +52,10 @@ function Column(options) {
     maxWidth: options.maxWidth,
     minWidth: options.minWidth,
     // todo(flow->ts) add proper type annotation
-    // eslint-disable-next-line react/display-name
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     renderCell: /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var locale = React.useContext(_locale.LocaleContext);
+
       var _useStyletron = (0, _styles.useStyletron)(),
           _useStyletron2 = _slicedToArray(_useStyletron, 2),
           css = _useStyletron2[0],
@@ -90,6 +94,7 @@ function Column(options) {
           paddingRight: theme.sizing.scale300
         })
       }, /*#__PURE__*/React.createElement(_checkbox.Checkbox, {
+        "aria-label": locale.datatable.selectRow,
         onChange: props.onSelect,
         checked: props.isSelected,
         overrides: {

package/data-table/data-table.js

@@ -197,7 +197,8 @@ function Header(props) {
   var _React$useState3 = React.useState(0),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       endResizePos = _React$useState4[0],
-      setEndResizePos = _React$useState4[1];
+      setEndResizePos = _React$useState4[1]; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
   var headerCellRef = React.useRef(null);
   var RULER_OFFSET = 2;
@@ -241,7 +242,8 @@ function Header(props) {
           }
         }
       }
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
     function handleMouseUp(event) {
       props.onResize(props.index, endResizePos - startResizePos);
@@ -958,7 +960,8 @@ function DataTable(_ref2) {
         tableHeight: height,
         widths: normalizedWidths
       }
-    }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid, {
+    }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    , {
       ref: setGridRef,
       overscanRowCount: 10,
       overscanColumnCount: 5,

package/data-table/filter-menu.js

@@ -98,7 +98,8 @@ function Options(props) {
     if ((0, _focusVisible.isFocusVisible)(event)) {
       setFocusVisible(true);
     }
-  };
+  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   var handleBlur = function handleBlur(event) {
     if (focusVisible !== false) {

package/data-table/header-cell.js

@@ -11,6 +11,8 @@ var React = _interopRequireWildcard(require("react"));
 
 var _checkbox = require("../checkbox");
 
+var _locale = require("../locale");
+
 var _styles = require("../styles");
 
 var _chevronDown = _interopRequireDefault(require("../icon/chevron-down"));
@@ -46,6 +48,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var locale = React.useContext(_locale.LocaleContext);
+
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       css = _useStyletron2[0],
@@ -64,7 +68,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   };
 
-  var handleBlur = function handleBlur(event) {
+  var handleBlur = function handleBlur() {
     if (focusVisible !== false) {
       setFocusVisible(false);
     }
@@ -73,59 +77,64 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var backgroundColor = props.isHovered ? theme.colors.backgroundSecondary : theme.colors.backgroundPrimary;
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    role: "button",
-    tabIndex: 0,
     className: css(_objectSpread(_objectSpread({}, theme.typography.font350), {}, {
       alignItems: 'center',
       backgroundColor: backgroundColor,
-      boxSizing: 'border-box',
       color: theme.colors.contentPrimary,
-      cursor: props.sortable ? 'pointer' : null,
       display: props.isMeasured ? 'inline-flex' : 'flex',
       flexGrow: 1,
       height: '100%',
-      paddingLeft: theme.sizing.scale500,
-      paddingRight: theme.sizing.scale500,
-      flexWrap: 'nowrap',
-      whiteSpace: 'nowrap',
-      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
-      outlineOffset: '-3px'
-    })),
-    onMouseEnter: props.onMouseEnter,
-    onMouseLeave: props.onMouseLeave,
-    onKeyUp: function onKeyUp(event) {
-      if (event.key === 'Enter') {
-        props.onSort(props.index);
-      }
-    },
-    onClick: function onClick(event) {
-      // Avoid column sort if select-all checkbox click.
-      if (checkboxRef.current && checkboxRef.current.contains(event.target)) {
-        return;
-      }
-
-      if (props.sortable) {
-        props.onSort(props.index);
-      }
-    },
-    onFocus: handleFocus,
-    onBlur: handleBlur
+      paddingLeft: theme.sizing.scale500
+    }))
   }, props.isSelectable && /*#__PURE__*/React.createElement("span", {
     className: css({
       paddingRight: theme.sizing.scale300
     }),
     ref: checkboxRef
   }, /*#__PURE__*/React.createElement(_checkbox.Checkbox, {
-    onChange: function onChange(e) {
+    onChange: function onChange() {
       if (props.isSelectedAll || props.isSelectedIndeterminate) {
         props.onSelectNone();
       } else {
         props.onSelectAll();
       }
     },
+    "aria-label": locale.datatable.selectAllRows,
     checked: props.isSelectedAll || props.isSelectedIndeterminate,
     isIndeterminate: props.isSelectedIndeterminate
-  })), props.title, /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignItems: 'center',
+      backgroundColor: 'transparent',
+      border: 'none',
+      boxSizing: 'border-box',
+      cursor: props.sortable ? 'pointer' : null,
+      display: 'flex',
+      flexGrow: 1,
+      height: '100%',
+      outline: focusVisible ? "3px solid ".concat(theme.colors.accent) : 'none',
+      outlineOffset: '-3px',
+      // paddingLeft: theme.sizing.scale500,
+      paddingRight: theme.sizing.scale500,
+      whiteSpace: 'nowrap'
+    }),
+    onMouseEnter: props.onMouseEnter,
+    onMouseLeave: props.onMouseLeave,
+    onKeyUp: function onKeyUp(event) {
+      if (event.key === 'Enter') {
+        props.onSort(props.index);
+      }
+    },
+    onClick: function onClick() {
+      if (props.sortable) {
+        props.onSort(props.index);
+      }
+    },
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    role: "button",
+    tabIndex: 0
+  }, props.title, /*#__PURE__*/React.createElement("div", {
     className: css({
       position: 'relative',
       width: '100%',
@@ -144,7 +153,7 @@ var HeaderCell = /*#__PURE__*/React.forwardRef(function (props, ref) {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
   }), (props.sortDirection === _constants.SORT_DIRECTIONS.ASC || !props.sortDirection) && /*#__PURE__*/React.createElement(_chevronUp.default, {
     color: props.sortDirection ? theme.colors.contentPrimary : theme.colors.contentSecondary
-  }))));
+  })))));
 });
 HeaderCell.displayName = 'HeaderCell';
 var _default = HeaderCell;

package/data-table/locale.d.ts

@@ -32,6 +32,8 @@ export declare type DataTableLocale = {
     booleanFilterFalse: string;
     booleanColumnTrueShort: string;
     booleanColumnFalseShort: string;
+    selectRow: string;
+    selectAllRows: string;
 };
 declare const locale: {
     emptyState: string;
@@ -67,5 +69,7 @@ declare const locale: {
     booleanFilterFalse: string;
     booleanColumnTrueShort: string;
     booleanColumnFalseShort: string;
+    selectRow: string;
+    selectAllRows: string;
 };
 export default locale;

package/data-table/locale.js

@@ -44,7 +44,9 @@ var locale = {
   booleanFilterTrue: 'true',
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
-  booleanColumnFalseShort: 'F'
+  booleanColumnFalseShort: 'F',
+  selectRow: 'Select row',
+  selectAllRows: 'Select all rows'
 };
 var _default = locale;
 exports.default = _default;

package/data-table/locale.js.flow

@@ -40,6 +40,8 @@ export type DataTableLocaleT = {|
   booleanFilterFalse: string,
   booleanColumnTrueShort: string,
   booleanColumnFalseShort: string,
+  selectRow: string,
+  selectAllRows: string,
 |};
 
 const locale = {
@@ -77,6 +79,9 @@ const locale = {
   booleanFilterFalse: 'false',
   booleanColumnTrueShort: 'T',
   booleanColumnFalseShort: 'F',
+  selectRow: 'Select row',
+  selectAllRows: 'Select all rows',
+
 };
 
 export default locale;

package/data-table/measure-column-widths.js

@@ -51,7 +51,7 @@ function MeasureColumn(_ref) {
         onLayout(columnIndex, ref.current.getBoundingClientRect());
       }
     }
-  }, []);
+  }, [onLayout]);
   return /*#__PURE__*/React.createElement("div", {
     ref: ref,
     className: css({
@@ -68,7 +68,8 @@ function MeasureColumn(_ref) {
     onMouseEnter: function onMouseEnter() {},
     onMouseLeave: function onMouseLeave() {},
     onSelectAll: function onSelectAll() {},
-    onSelectNone: function onSelectNone() {},
+    onSelectNone: function onSelectNone() {} // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ,
     onSort: function onSort(i) {},
     sortable: column.sortable,
     sortDirection: null,
@@ -132,7 +133,7 @@ function MeasureColumnWidths(_ref2) {
 
   var widthMap = React.useMemo(function () {
     return new Map();
-  }, []);
+  }, [rows]);
   var sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   var finishedMeasurementCount = (sampleSize + 1) * columns.length;
   var sampleIndexes = React.useMemo(function () {
@@ -151,7 +152,7 @@ function MeasureColumnWidths(_ref2) {
     widthMap.size === Math.floor(columns.length / 4)) {
       onWidthsChange(Array.from(widthMap.values()));
     }
-  }, [columns, finishedMeasurementCount, onWidthsChange]);
+  }, [columns, rows, finishedMeasurementCount, onWidthsChange]);
   var hiddenStyle = css({
     position: 'absolute',
     overflow: 'hidden',

package/data-table/stateful-container.js

@@ -182,7 +182,8 @@ var StatefulContainer = function StatefulContainer(props) {
     selectedRowIds: selectedRowIds,
     sortIndex: sortIndex,
     sortDirection: sortDirection,
-    textQuery: textQuery
+    textQuery: textQuery // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   });
 };
 

package/data-table/stateful-data-table.js

@@ -277,12 +277,12 @@ function StatefulDataTable(props) {
         title: title
       });
     }))), Boolean(selectedRowIds.size) && props.batchActions && /*#__PURE__*/React.createElement("div", {
-      style: {
+      className: css({
         display: 'flex',
         alignItems: 'center',
-        paddingTop: theme.sizing.scale400,
-        paddingBottom: theme.sizing.scale400
-      }
+        paddingTop: theme.sizing.scale300,
+        paddingBottom: theme.sizing.scale300
+      })
     }, props.batchActions.map(function (action) {
       function onClick(event) {
         action.onClick({