baseui 10.8.0 → 10.9.0

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,
@@ -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]}

package/data-table/filter-shell.js

@@ -17,6 +17,8 @@ var _index3 = require("../styles/index.js");
 
 var _index4 = require("../locale/index.js");
 
+var _constants = require("./constants.js");
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -40,6 +42,21 @@ function FilterShell(props) {
       theme = _useStyletron2[1];
 
   var locale = React.useContext(_index4.LocaleContext);
+  var excludeText;
+
+  switch (props.excludeKind) {
+    case 'value':
+      excludeText = locale.datatable.filterExcludeValue;
+      break;
+
+    case 'range':
+      excludeText = locale.datatable.filterExcludeRange;
+      break;
+
+    default:
+      excludeText = locale.datatable.filterExclude;
+  }
+
   return /*#__PURE__*/React.createElement("form", {
     className: css({
       backgroundColor: theme.colors.backgroundPrimary,
@@ -47,7 +64,7 @@ function FilterShell(props) {
       paddingRight: theme.sizing.scale600,
       paddingBottom: theme.sizing.scale600,
       paddingLeft: theme.sizing.scale600,
-      width: '320px'
+      width: _constants.FILTER_SHELL_WIDTH
     }),
     onSubmit: function onSubmit(event) {
       event.preventDefault();
@@ -55,17 +72,23 @@ function FilterShell(props) {
     }
   }, props.children, /*#__PURE__*/React.createElement("div", {
     className: css({
-      alignItems: 'center',
       display: 'flex',
+      flexDirection: 'column',
       justifyContent: 'space-between',
-      marginTop: theme.sizing.scale600
+      alignItems: 'flex-end',
+      marginTop: theme.sizing.scale600,
+      gap: theme.sizing.scale200
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignSelf: 'flex-start'
     })
   }, /*#__PURE__*/React.createElement(_index2.Checkbox, {
     checked: props.exclude,
     onChange: props.onExcludeChange,
     checkmarkType: _index2.STYLE_TYPE.toggle_round,
     labelPlacement: "right"
-  }, locale.datatable.filterExclude), /*#__PURE__*/React.createElement(_index.Button, {
+  }, excludeText)), /*#__PURE__*/React.createElement(_index.Button, {
     size: _index.SIZE.compact,
     type: "submit"
   }, locale.datatable.filterApply)));

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

@@ -12,10 +12,14 @@ import {Button, SIZE as BUTTON_SIZE} from '../button/index.js';
 import {Checkbox, STYLE_TYPE} from '../checkbox/index.js';
 import {useStyletron} from '../styles/index.js';
 import {LocaleContext} from '../locale/index.js';
+import {FILTER_SHELL_WIDTH} from './constants.js';
+
+export type ExcludeKind = 'value' | 'range';
 
 type PropsT = {
   children: React.Node,
   exclude: boolean,
+  excludeKind?: ExcludeKind,
   onExcludeChange: () => void,
   onApply: () => void,
 };
@@ -23,6 +27,17 @@ type PropsT = {
 function FilterShell(props: PropsT) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
+  let excludeText;
+  switch (props.excludeKind) {
+    case 'value':
+      excludeText = locale.datatable.filterExcludeValue;
+      break;
+    case 'range':
+      excludeText = locale.datatable.filterExcludeRange;
+      break;
+    default:
+      excludeText = locale.datatable.filterExclude;
+  }
   return (
     <form
       className={css({
@@ -31,7 +46,7 @@ function FilterShell(props: PropsT) {
         paddingRight: theme.sizing.scale600,
         paddingBottom: theme.sizing.scale600,
         paddingLeft: theme.sizing.scale600,
-        width: '320px',
+        width: FILTER_SHELL_WIDTH,
       })}
       onSubmit={event => {
         event.preventDefault();
@@ -41,20 +56,29 @@ function FilterShell(props: PropsT) {
       {props.children}
       <div
         className={css({
-          alignItems: 'center',
           display: 'flex',
+          flexDirection: 'column',
           justifyContent: 'space-between',
+          alignItems: 'flex-end',
           marginTop: theme.sizing.scale600,
+          gap: theme.sizing.scale200,
         })}
       >
-        <Checkbox
-          checked={props.exclude}
-          onChange={props.onExcludeChange}
-          checkmarkType={STYLE_TYPE.toggle_round}
-          labelPlacement="right"
+        <div
+          className={css({
+            alignSelf: 'flex-start',
+          })}
         >
-          {locale.datatable.filterExclude}
-        </Checkbox>
+          <Checkbox
+            checked={props.exclude}
+            onChange={props.onExcludeChange}
+            checkmarkType={STYLE_TYPE.toggle_round}
+            labelPlacement="right"
+          >
+            {excludeText}
+          </Checkbox>
+        </div>
+
         <Button size={BUTTON_SIZE.compact} type="submit">
           {locale.datatable.filterApply}
         </Button>

package/data-table/locale.js

@@ -13,18 +13,20 @@ LICENSE file in the root directory of this source tree.
 */
 var locale = {
   emptyState: 'No rows match the filter criteria defined. Please remove one or more filters to view more data.',
-  loadingState: 'Loading Rows.',
+  loadingState: 'Loading rows.',
   searchAriaLabel: 'Search by text',
   filterAdd: 'Add Filter',
   filterExclude: 'Exclude',
   filterApply: 'Apply',
+  filterExcludeRange: 'Exclude range',
+  filterExcludeValue: 'Exclude value',
   filterAppliedTo: 'filter applied to',
   optionsLabel: 'Select column to filter by',
   optionsSearch: 'Search for a column to filter by...',
   optionsEmpty: 'No columns available.',
   categoricalFilterSelectAll: 'Select All',
   categoricalFilterSelectClear: 'Clear',
-  categoricalFilterEmpty: 'No Categories Found',
+  categoricalFilterEmpty: 'No categories found',
   datetimeFilterRange: 'Range',
   datetimeFilterRangeDatetime: 'Date, Time',
   datetimeFilterRangeDate: 'Date',

package/data-table/locale.js.flow

@@ -12,6 +12,8 @@ export type DataTableLocaleT = {|
   searchAriaLabel: string,
   filterAdd: string,
   filterExclude: string,
+  filterExcludeRange: string,
+  filterExcludeValue: string,
   filterApply: string,
   filterAppliedTo: string,
   optionsLabel: string,
@@ -43,18 +45,20 @@ export type DataTableLocaleT = {|
 const locale = {
   emptyState:
     'No rows match the filter criteria defined. Please remove one or more filters to view more data.',
-  loadingState: 'Loading Rows.',
+  loadingState: 'Loading rows.',
   searchAriaLabel: 'Search by text',
   filterAdd: 'Add Filter',
   filterExclude: 'Exclude',
   filterApply: 'Apply',
+  filterExcludeRange: 'Exclude range',
+  filterExcludeValue: 'Exclude value',
   filterAppliedTo: 'filter applied to',
   optionsLabel: 'Select column to filter by',
   optionsSearch: 'Search for a column to filter by...',
   optionsEmpty: 'No columns available.',
   categoricalFilterSelectAll: 'Select All',
   categoricalFilterSelectClear: 'Clear',
-  categoricalFilterEmpty: 'No Categories Found',
+  categoricalFilterEmpty: 'No categories found',
   datetimeFilterRange: 'Range',
   datetimeFilterRangeDatetime: 'Date, Time',
   datetimeFilterRangeDate: 'Date',