baseui 10.9.2 → 10.11.1

package/data-table/column-row-index.js.flow

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {useStyletron} from '../styles/index.js';
+import { useStyletron } from '../styles/index.js';
 
 import Column from './column.js';
-import {COLUMNS} from './constants.js';
-import type {ColumnT} from './types.js';
+import { COLUMNS } from './constants.js';
+import type { ColumnT } from './types.js';
 
 type ValueT = null;
 type FilterParametersT = {};

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

@@ -8,12 +8,12 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {useStyletron} from '../styles/index.js';
+import { useStyletron } from '../styles/index.js';
 
 import Column from './column.js';
-import {COLUMNS} from './constants.js';
-import {HighlightCellText} from './text-search.js';
-import type {ColumnT, SharedColumnOptionsT} from './types.js';
+import { COLUMNS } from './constants.js';
+import { HighlightCellText } from './text-search.js';
+import type { ColumnT, SharedColumnOptionsT } from './types.js';
 
 type OptionsT = {|
   ...SharedColumnOptionsT<string>,
@@ -55,8 +55,8 @@ function StringColumn(options: OptionsT): StringColumnT {
   return Column({
     kind: COLUMNS.STRING,
     cellBlockAlign: options.cellBlockAlign,
-    buildFilter: function(params) {
-      return function(data) {
+    buildFilter: function (params) {
+      return function (data) {
         return true;
       };
     },
@@ -70,10 +70,10 @@ function StringColumn(options: OptionsT): StringColumnT {
     },
     renderFilter: StringFilter,
     sortable: options.sortable === undefined ? true : options.sortable,
-    sortFn: function(a, b) {
+    sortFn: function (a, b) {
       return a.localeCompare(b);
     },
-    textQueryFilter: function(textQuery, data) {
+    textQueryFilter: function (textQuery, data) {
       return data.toLowerCase().includes(textQuery.toLowerCase());
     },
     title: options.title,

package/data-table/column.js

@@ -49,6 +49,7 @@ function Column(options) {
     mapDataToValue: options.mapDataToValue,
     maxWidth: options.maxWidth,
     minWidth: options.minWidth,
+    // eslint-disable-next-line react/display-name
     renderCell: /*#__PURE__*/React.forwardRef(function (props, ref) {
       var _useStyletron = (0, _index2.useStyletron)(),
           _useStyletron2 = _slicedToArray(_useStyletron, 2),

package/data-table/column.js.flow

@@ -8,13 +8,13 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {Checkbox} from '../checkbox/index.js';
-import {useStyletron} from '../styles/index.js';
+import { Checkbox } from '../checkbox/index.js';
+import { useStyletron } from '../styles/index.js';
 
-import type {ColumnT} from './types.js';
+import type { ColumnT } from './types.js';
 
 function Column<ValueT, FilterParamsT>(
-  options: ColumnT<ValueT, FilterParamsT>,
+  options: ColumnT<ValueT, FilterParamsT>
 ): ColumnT<ValueT, FilterParamsT> {
   return {
     kind: options.kind,
@@ -22,12 +22,11 @@ function Column<ValueT, FilterParamsT>(
     textQueryFilter: options.textQueryFilter,
     fillWidth: options.fillWidth === undefined ? true : options.fillWidth,
     filterable:
-      Boolean(options.filterable) &&
-      Boolean(options.renderFilter) &&
-      Boolean(options.buildFilter),
+      Boolean(options.filterable) && Boolean(options.renderFilter) && Boolean(options.buildFilter),
     mapDataToValue: options.mapDataToValue,
     maxWidth: options.maxWidth,
     minWidth: options.minWidth,
+    // eslint-disable-next-line react/display-name
     renderCell: React.forwardRef((props, ref) => {
       const [css, theme] = useStyletron();
       const ProvidedCell = options.renderCell;
@@ -67,7 +66,7 @@ function Column<ValueT, FilterParamsT>(
                 onChange={props.onSelect}
                 checked={props.isSelected}
                 overrides={{
-                  Checkmark: {style: {marginTop: null, marginBottom: null}},
+                  Checkmark: { style: { marginTop: null, marginBottom: null } },
                 }}
               />
             )}

package/data-table/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SORT_DIRECTIONS = exports.DATETIME_OPERATIONS = exports.NUMERICAL_OPERATIONS = exports.NUMERICAL_FORMATS = exports.COLUMNS = void 0;
+exports.MAX_BIN_COUNT = exports.HISTOGRAM_SIZE = exports.FILTER_SHELL_WIDTH = exports.SORT_DIRECTIONS = exports.DATETIME_OPERATIONS = exports.NUMERICAL_FORMATS = exports.COLUMNS = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -28,14 +28,6 @@ var NUMERICAL_FORMATS = Object.freeze({
   PERCENTAGE: 'PERCENTAGE'
 });
 exports.NUMERICAL_FORMATS = NUMERICAL_FORMATS;
-var NUMERICAL_OPERATIONS = Object.freeze({
-  EQ: 'EQ',
-  GT: 'GT',
-  GTE: 'GTE',
-  LT: 'LT',
-  LTE: 'LTE'
-});
-exports.NUMERICAL_OPERATIONS = NUMERICAL_OPERATIONS;
 var DATETIME_OPERATIONS = Object.freeze({
   RANGE_DATETIME: 'RANGE_DATETIME',
   RANGE_DATE: 'RANGE_DATE',
@@ -50,5 +42,19 @@ exports.DATETIME_OPERATIONS = DATETIME_OPERATIONS;
 var SORT_DIRECTIONS = Object.freeze({
   ASC: 'ASC',
   DESC: 'DESC'
-});
-exports.SORT_DIRECTIONS = SORT_DIRECTIONS;
+}); // If modifying this, take a look at the histogram and adjust. see HISTOGRAM_SIZE
+
+exports.SORT_DIRECTIONS = SORT_DIRECTIONS;
+var FILTER_SHELL_WIDTH = '320px'; // Depends on FILTER_SHELL_WIDTH
+
+exports.FILTER_SHELL_WIDTH = FILTER_SHELL_WIDTH;
+var HISTOGRAM_SIZE = {
+  width: 308,
+  height: 120
+}; // Arguably visually appealing within the given width.
+// Smaller and we don't have enough detail per bar.
+// Larger and the bars are too granular and don't align well with the slider steps
+
+exports.HISTOGRAM_SIZE = HISTOGRAM_SIZE;
+var MAX_BIN_COUNT = 50;
+exports.MAX_BIN_COUNT = MAX_BIN_COUNT;

package/data-table/constants.js.flow

@@ -23,14 +23,6 @@ export const NUMERICAL_FORMATS = Object.freeze({
   PERCENTAGE: 'PERCENTAGE',
 });
 
-export const NUMERICAL_OPERATIONS = Object.freeze({
-  EQ: 'EQ',
-  GT: 'GT',
-  GTE: 'GTE',
-  LT: 'LT',
-  LTE: 'LTE',
-});
-
 export const DATETIME_OPERATIONS = Object.freeze({
   RANGE_DATETIME: 'RANGE_DATETIME',
   RANGE_DATE: 'RANGE_DATE',
@@ -47,6 +39,17 @@ export const SORT_DIRECTIONS = Object.freeze({
   DESC: 'DESC',
 });
 
+// If modifying this, take a look at the histogram and adjust. see HISTOGRAM_SIZE
+export const FILTER_SHELL_WIDTH = '320px';
+
+// Depends on FILTER_SHELL_WIDTH
+export const HISTOGRAM_SIZE = { width: 308, height: 120 };
+
+// Arguably visually appealing within the given width.
+// Smaller and we don't have enough detail per bar.
+// Larger and the bars are too granular and don't align well with the slider steps
+export const MAX_BIN_COUNT = 50;
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

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,
@@ -80,7 +86,7 @@ function CellPlacement(_ref) {
 
   var backgroundColor = theme.colors.backgroundPrimary;
 
-  if (rowIndex % 2 && columnIndex === data.columnHighlightIndex || rowIndex === data.rowHighlightIndex) {
+  if (Boolean(rowIndex % 2) && columnIndex === data.columnHighlightIndex || rowIndex === data.rowHighlightIndex) {
     backgroundColor = theme.colors.backgroundTertiary;
   } else if (rowIndex % 2 || columnIndex === data.columnHighlightIndex) {
     backgroundColor = theme.colors.backgroundSecondary;
@@ -191,7 +197,7 @@ function Header(props) {
   var _React$useState3 = React.useState(0),
       _React$useState4 = _slicedToArray(_React$useState3, 2),
       endResizePos = _React$useState4[0],
-      setEndResizePos = _React$useState4[1]; // eslint-disable-next-line flowtype/no-weak-types
+      setEndResizePos = _React$useState4[1]; // flowlint-next-line unclear-type:off
 
 
   var headerCellRef = React.useRef(null);
@@ -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.
+  // flowlint-next-line unclear-type:off
 
-  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
         });
       }
@@ -950,10 +952,11 @@ function DataTable(_ref2) {
         tableHeight: height,
         widths: normalizedWidths
       }
-    }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
+    }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // flowlint-next-line unclear-type:off
     , {
-      ref: gridRef,
+      ref: setGridRef,
       overscanRowCount: 10,
+      overscanColumnCount: 5,
       innerElementType: InnerTableElement,
       columnCount: columns.length,
       columnWidth: function columnWidth(columnIndex) {