baseui 10.9.0 → 10.9.1

package/data-table/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.MAX_BIN_COUNT = exports.HISTOGRAM_SIZE = exports.FILTER_SHELL_WIDTH = exports.SORT_DIRECTIONS = exports.DATETIME_OPERATIONS = exports.NUMERICAL_FORMATS = exports.COLUMNS = void 0;
+exports.SORT_DIRECTIONS = exports.DATETIME_OPERATIONS = exports.NUMERICAL_OPERATIONS = exports.NUMERICAL_FORMATS = exports.COLUMNS = void 0;
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -28,6 +28,14 @@ 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',
@@ -42,19 +50,5 @@ exports.DATETIME_OPERATIONS = DATETIME_OPERATIONS;
 var SORT_DIRECTIONS = Object.freeze({
   ASC: 'ASC',
   DESC: 'DESC'
-}); // 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;
+});
+exports.SORT_DIRECTIONS = SORT_DIRECTIONS;

package/data-table/constants.js.flow

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

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

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

package/data-table/filter-shell.js

@@ -17,8 +17,6 @@ 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; }
@@ -42,21 +40,6 @@ 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,
@@ -64,7 +47,7 @@ function FilterShell(props) {
       paddingRight: theme.sizing.scale600,
       paddingBottom: theme.sizing.scale600,
       paddingLeft: theme.sizing.scale600,
-      width: _constants.FILTER_SHELL_WIDTH
+      width: '320px'
     }),
     onSubmit: function onSubmit(event) {
       event.preventDefault();
@@ -72,23 +55,17 @@ function FilterShell(props) {
     }
   }, props.children, /*#__PURE__*/React.createElement("div", {
     className: css({
+      alignItems: 'center',
       display: 'flex',
-      flexDirection: 'column',
       justifyContent: 'space-between',
-      alignItems: 'flex-end',
-      marginTop: theme.sizing.scale600,
-      gap: theme.sizing.scale200
-    })
-  }, /*#__PURE__*/React.createElement("div", {
-    className: css({
-      alignSelf: 'flex-start'
+      marginTop: theme.sizing.scale600
     })
   }, /*#__PURE__*/React.createElement(_index2.Checkbox, {
     checked: props.exclude,
     onChange: props.onExcludeChange,
     checkmarkType: _index2.STYLE_TYPE.toggle_round,
     labelPlacement: "right"
-  }, excludeText)), /*#__PURE__*/React.createElement(_index.Button, {
+  }, locale.datatable.filterExclude), /*#__PURE__*/React.createElement(_index.Button, {
     size: _index.SIZE.compact,
     type: "submit"
   }, locale.datatable.filterApply)));

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

@@ -12,14 +12,10 @@ 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,
 };
@@ -27,17 +23,6 @@ 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({
@@ -46,7 +31,7 @@ function FilterShell(props: PropsT) {
         paddingRight: theme.sizing.scale600,
         paddingBottom: theme.sizing.scale600,
         paddingLeft: theme.sizing.scale600,
-        width: FILTER_SHELL_WIDTH,
+        width: '320px',
       })}
       onSubmit={event => {
         event.preventDefault();
@@ -56,29 +41,20 @@ 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,
         })}
       >
-        <div
-          className={css({
-            alignSelf: 'flex-start',
-          })}
+        <Checkbox
+          checked={props.exclude}
+          onChange={props.onExcludeChange}
+          checkmarkType={STYLE_TYPE.toggle_round}
+          labelPlacement="right"
         >
-          <Checkbox
-            checked={props.exclude}
-            onChange={props.onExcludeChange}
-            checkmarkType={STYLE_TYPE.toggle_round}
-            labelPlacement="right"
-          >
-            {excludeText}
-          </Checkbox>
-        </div>
-
+          {locale.datatable.filterExclude}
+        </Checkbox>
         <Button size={BUTTON_SIZE.compact} type="submit">
           {locale.datatable.filterApply}
         </Button>

package/data-table/locale.js

@@ -13,20 +13,18 @@ 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,8 +12,6 @@ export type DataTableLocaleT = {|
   searchAriaLabel: string,
   filterAdd: string,
   filterExclude: string,
-  filterExcludeRange: string,
-  filterExcludeValue: string,
   filterApply: string,
   filterAppliedTo: string,
   optionsLabel: string,
@@ -45,20 +43,18 @@ 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',