baseui 10.9.2 → 10.10.0

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

@@ -6,14 +6,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -37,11 +29,12 @@ 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 { ParagraphXSmall } from '../typography/index.js';
 import Column from './column.js';
-import { COLUMNS, NUMERICAL_FORMATS, NUMERICAL_OPERATIONS } from './constants.js';
+import { COLUMNS, NUMERICAL_FORMATS, MAX_BIN_COUNT, HISTOGRAM_SIZE } from './constants.js';
 import FilterShell from './filter-shell.js';
 import { LocaleContext } from '../locale/index.js';
+import { bin, max as maxFunc, extent, scaleLinear, median, bisector } from 'd3';
+import { Slider } from '../slider/index.js';
 
 function roundToFixed(value, precision) {
   var k = Math.pow(10, precision);
@@ -88,291 +81,231 @@ function validateInput(input) {
   return Boolean(parseFloat(input)) || input === '' || input === '-';
 }
 
-function filterParamsToInitialState(filterParams) {
-  if (filterParams) {
-    if (filterParams.comparisons.length > 1) {
-      if (filterParams.comparisons[0].operation === NUMERICAL_OPERATIONS.LT && filterParams.comparisons[1].operation === NUMERICAL_OPERATIONS.GT) {
-        return {
-          exclude: !filterParams.exclude,
-          comparatorIndex: 0,
-          operatorIndex: 4,
-          right: filterParams.comparisons[1].value.toString(),
-          left: filterParams.comparisons[0].value.toString()
-        };
-      }
-    } else {
-      var comparison = filterParams.comparisons[0];
-
-      if (comparison.operation === NUMERICAL_OPERATIONS.LT) {
-        return {
-          exclude: filterParams.exclude,
-          comparatorIndex: 0,
-          operatorIndex: 0,
-          left: '',
-          right: comparison.value.toString()
-        };
-      } else if (comparison.operation === NUMERICAL_OPERATIONS.GT) {
-        return {
-          exclude: filterParams.exclude,
-          comparatorIndex: 0,
-          operatorIndex: 1,
-          left: comparison.value.toString(),
-          right: ''
-        };
-      } else if (comparison.operation === NUMERICAL_OPERATIONS.LTE) {
-        return {
-          exclude: filterParams.exclude,
-          comparatorIndex: 0,
-          operatorIndex: 2,
-          left: '',
-          right: comparison.value.toString()
-        };
-      } else if (comparison.operation === NUMERICAL_OPERATIONS.GTE) {
-        return {
-          exclude: filterParams.exclude,
-          comparatorIndex: 0,
-          operatorIndex: 3,
-          left: comparison.value.toString(),
-          right: ''
-        };
-      } else if (comparison.operation === NUMERICAL_OPERATIONS.EQ) {
-        return {
-          exclude: filterParams.exclude,
-          comparatorIndex: 1,
-          operatorIndex: 0,
-          left: comparison.value.toString(),
-          right: ''
-        };
-      }
-    }
-  }
-
-  return {
-    exclude: false,
-    comparatorIndex: 0,
-    operatorIndex: 0,
-    left: '',
-    right: ''
-  };
-}
+var bisect = bisector(function (d) {
+  return d.x0;
+});
+var Histogram = /*#__PURE__*/React.memo(function Histogram(_ref) {
+  var data = _ref.data,
+      lower = _ref.lower,
+      upper = _ref.upper,
+      isRange = _ref.isRange,
+      exclude = _ref.exclude,
+      precision = _ref.precision;
 
-function NumericalFilter(props) {
   var _useStyletron = useStyletron(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),
       css = _useStyletron2[0],
       theme = _useStyletron2[1];
 
+  var _React$useMemo = React.useMemo(function () {
+    var bins = bin().thresholds(Math.min(data.length, MAX_BIN_COUNT))(data);
+    var xScale = scaleLinear().domain([bins[0].x0, bins[bins.length - 1].x1]).range([0, HISTOGRAM_SIZE.width]).clamp(true);
+    var yScale = scaleLinear().domain([0, maxFunc(bins, function (d) {
+      return d.length;
+    })]).nice().range([HISTOGRAM_SIZE.height, 0]);
+    return {
+      bins: bins,
+      xScale: xScale,
+      yScale: yScale
+    };
+  }, [data]),
+      bins = _React$useMemo.bins,
+      xScale = _React$useMemo.xScale,
+      yScale = _React$useMemo.yScale; // We need to find the index of bar which is nearest to the given single value
+
+
+  var singleIndexNearest = React.useMemo(function () {
+    if (isRange) {
+      return null;
+    }
+
+    return bisect.center(bins, lower);
+  }, [isRange, data, lower, upper]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: css({
+      display: 'flex',
+      marginTop: theme.sizing.scale600,
+      marginLeft: theme.sizing.scale200,
+      marginRight: 0,
+      marginBottom: theme.sizing.scale400,
+      justifyContent: 'space-between',
+      overflow: 'visible'
+    })
+  }, /*#__PURE__*/React.createElement("svg", HISTOGRAM_SIZE, bins.map(function (d, index) {
+    var x = xScale(d.x0) + 1;
+    var y = yScale(d.length);
+    var width = Math.max(0, xScale(d.x1) - xScale(d.x0) - 1);
+    var height = yScale(0) - yScale(d.length);
+    var included;
+
+    if (singleIndexNearest != null) {
+      included = index === singleIndexNearest;
+    } else {
+      var withinLower = d.x1 > lower;
+      var withinUpper = d.x0 <= upper;
+      included = withinLower && withinUpper;
+    }
+
+    if (exclude) {
+      included = !included;
+    }
+
+    return /*#__PURE__*/React.createElement("rect", {
+      key: "bar-".concat(index),
+      fill: included ? theme.colors.primary : theme.colors.mono400,
+      x: x,
+      y: y,
+      width: width,
+      height: height
+    });
+  })));
+});
+
+function NumericalFilter(props) {
+  var _useStyletron3 = useStyletron(),
+      _useStyletron4 = _slicedToArray(_useStyletron3, 2),
+      css = _useStyletron4[0],
+      theme = _useStyletron4[1];
+
   var locale = React.useContext(LocaleContext);
-  var initialState = filterParamsToInitialState(props.filterParams);
+  var precision = props.options.precision; // The state handling of this component could be refactored and cleaned up if we used useReducer.
+
+  var initialState = React.useMemo(function () {
+    return props.filterParams || {
+      exclude: false,
+      excludeKind: 'range',
+      comparatorIndex: 0,
+      lowerValue: null,
+      upperValue: null
+    };
+  }, [props.filterParams]);
 
   var _React$useState = React.useState(initialState.exclude),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       exclude = _React$useState2[0],
-      setExclude = _React$useState2[1];
-
-  var _React$useState3 = React.useState(initialState.comparatorIndex),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      comparatorIndex = _React$useState4[0],
-      setComparatorIndex = _React$useState4[1];
+      setExclude = _React$useState2[1]; // the api of our ButtonGroup forces these numerical indexes...
+  // TODO look into allowing semantic names, similar to the radio component. Tricky part would be backwards compat
 
-  var _React$useState5 = React.useState(initialState.operatorIndex),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      operatorIndex = _React$useState6[0],
-      setOperatorIndex = _React$useState6[1];
 
-  var _React$useState7 = React.useState(initialState.left),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      left = _React$useState8[0],
-      setLeft = _React$useState8[1];
-
-  var _React$useState9 = React.useState(initialState.right),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      right = _React$useState10[0],
-      setRight = _React$useState10[1];
+  var _React$useState3 = React.useState(function () {
+    switch (initialState.excludeKind) {
+      case 'value':
+        return 1;
 
-  var isRange = comparatorIndex === 0;
-  var min = React.useMemo(function () {
-    return Math.min.apply(Math, _toConsumableArray(props.data));
-  }, [props.data]);
-  var max = React.useMemo(function () {
-    return Math.max.apply(Math, _toConsumableArray(props.data));
-  }, [props.data]);
-  React.useEffect(function () {
-    if (!left) {
-      setLeft(min.toString());
+      case 'range':
+      default:
+        // fallthrough
+        return 0;
     }
+  }),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      comparatorIndex = _React$useState4[0],
+      setComparatorIndex = _React$useState4[1]; // We use the d3 function to get the extent as it's a little more robust to null, -Infinity, etc.
 
-    if (!right) {
-      setRight(max.toString());
-    }
-  }, []);
 
-  var _React$useMemo = React.useMemo(function () {
-    if (!isRange) return [false, false];
+  var _React$useMemo2 = React.useMemo(function () {
+    return extent(props.data);
+  }, [props.data]),
+      _React$useMemo3 = _slicedToArray(_React$useMemo2, 2),
+      min = _React$useMemo3[0],
+      max = _React$useMemo3[1];
 
-    switch (operatorIndex) {
-      case 4:
-        return [false, false];
+  var _React$useState5 = React.useState(function () {
+    return roundToFixed(initialState.lowerValue || min, precision);
+  }),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      lv = _React$useState6[0],
+      setLower = _React$useState6[1];
 
-      case 0:
-      case 2:
-        return [true, false];
+  var _React$useState7 = React.useState(function () {
+    return roundToFixed(initialState.upperValue || max, precision);
+  }),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      uv = _React$useState8[0],
+      setUpper = _React$useState8[1]; // We keep a separate value for the single select, to give a user the ability to toggle between
+  // the range and single values without losing their previous input.
 
-      case 1:
-      case 3:
-        return [false, true];
 
-      default:
-        return [true, true];
-    }
-  }, [operatorIndex, isRange]),
-      _React$useMemo2 = _slicedToArray(_React$useMemo, 2),
-      leftDisabled = _React$useMemo2[0],
-      rightDisabled = _React$useMemo2[1];
-
-  var leftInputRef = React.useRef(null);
-  var rightInputRef = React.useRef(null);
-  React.useEffect(function () {
-    if (!leftDisabled && leftInputRef.current) {
-      leftInputRef.current.focus({
-        preventScroll: true
-      });
-    } else if (!rightDisabled && rightInputRef.current) {
-      rightInputRef.current.focus({
-        preventScroll: true
-      });
-    }
-  }, [leftDisabled, rightDisabled, comparatorIndex]);
-  React.useEffect(function () {
-    switch (operatorIndex) {
-      case 4:
-      default:
-        break;
+  var _React$useState9 = React.useState(function () {
+    return roundToFixed(initialState.lowerValue || median(props.data), precision);
+  }),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      sv = _React$useState10[0],
+      setSingle = _React$useState10[1]; // This is the only conditional which we want to use to determine
+  // if we are in range or single value mode.
+  // Don't derive it via something else, e.g. lowerValue === upperValue, etc.
 
-      case 1:
-      case 3:
-        setRight(max.toString());
-        break;
 
-      case 0:
-      case 2:
-        setLeft(min.toString());
-        break;
-    }
-  }, [operatorIndex]);
+  var isRange = comparatorIndex === 0;
+  var excludeKind = isRange ? 'range' : 'value'; // while the user is inputting values, we take their input at face value,
+  // if we don't do this, a user can't input partial numbers, e.g. "-", or "3."
+
+  var _React$useState11 = React.useState(false),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      focused = _React$useState12[0],
+      setFocus = _React$useState12[1];
+
+  var _React$useMemo4 = React.useMemo(function () {
+    if (focused) {
+      return [isRange ? lv : sv, uv];
+    } // once the user is done inputting.
+    // we validate then format to the given precision
+
+
+    var l = isRange ? lv : sv;
+    l = validateInput(l) ? l : min;
+    var h = validateInput(uv) ? uv : max;
+    return [roundToFixed(l, precision), roundToFixed(h, precision)];
+  }, [isRange, focused, sv, lv, uv, precision]),
+      _React$useMemo5 = _slicedToArray(_React$useMemo4, 2),
+      inputValueLower = _React$useMemo5[0],
+      inputValueUpper = _React$useMemo5[1]; // We have our slider values range from 1 to the bin size, so we have a scale which
+  // takes in the data driven range and maps it to values the scale can always handle
+
+
+  var sliderScale = React.useMemo(function () {
+    return scaleLinear().domain([min, max]).rangeRound([1, MAX_BIN_COUNT]) // We clamp the values within our min and max even if a user enters a huge number
+    .clamp(true);
+  }, [min, max]);
+  var sliderValue = isRange ? [sliderScale(inputValueLower), sliderScale(inputValueUpper)] : [sliderScale(inputValueLower)]; // keep the slider happy by sorting the two values
+
+  if (isRange && sliderValue[0] > sliderValue[1]) {
+    sliderValue = [sliderValue[1], sliderValue[0]];
+  }
+
   return /*#__PURE__*/React.createElement(FilterShell, {
     exclude: exclude,
     onExcludeChange: function onExcludeChange() {
       return setExclude(!exclude);
     },
+    excludeKind: excludeKind,
     onApply: function onApply() {
       if (isRange) {
-        switch (operatorIndex) {
-          case 0:
-            {
-              var _value = parseFloat(right);
-
-              var operation = NUMERICAL_OPERATIONS.LT;
-              props.setFilter({
-                comparisons: [{
-                  value: _value,
-                  operation: operation
-                }],
-                description: "< ".concat(_value),
-                exclude: exclude
-              });
-              break;
-            }
-
-          case 1:
-            {
-              var _value2 = parseFloat(left);
-
-              var _operation = NUMERICAL_OPERATIONS.GT;
-              props.setFilter({
-                comparisons: [{
-                  value: _value2,
-                  operation: _operation
-                }],
-                description: "> ".concat(_value2),
-                exclude: exclude
-              });
-              break;
-            }
-
-          case 2:
-            {
-              var _value3 = parseFloat(right);
-
-              var _operation2 = NUMERICAL_OPERATIONS.LTE;
-              props.setFilter({
-                comparisons: [{
-                  value: _value3,
-                  operation: _operation2
-                }],
-                description: "\u2264 ".concat(_value3),
-                exclude: exclude
-              });
-              break;
-            }
-
-          case 3:
-            {
-              var _value4 = parseFloat(left);
-
-              var _operation3 = NUMERICAL_OPERATIONS.GTE;
-              props.setFilter({
-                comparisons: [{
-                  value: _value4,
-                  operation: _operation3
-                }],
-                description: "\u2265 ".concat(_value4),
-                exclude: exclude
-              });
-              break;
-            }
-
-          case 4:
-            {
-              // 'between' case is interesting since if we want less than 10 plus greater than 5
-              // comparators, the filter will include _all_ numbers.
-              var leftValue = parseFloat(left);
-              var rightValue = parseFloat(right);
-              props.setFilter({
-                comparisons: [{
-                  value: leftValue,
-                  operation: NUMERICAL_OPERATIONS.LT
-                }, {
-                  value: rightValue,
-                  operation: NUMERICAL_OPERATIONS.GT
-                }],
-                description: "\u2265 ".concat(leftValue, " & \u2264 ").concat(rightValue),
-                exclude: !exclude
-              });
-              break;
-            }
-
-          default:
-            break;
-        }
+        var lowerValue = parseFloat(inputValueLower);
+        var upperValue = parseFloat(inputValueUpper);
+        props.setFilter({
+          description: "\u2265 ".concat(lowerValue, " and \u2264 ").concat(upperValue),
+          exclude: exclude,
+          lowerValue: lowerValue,
+          upperValue: upperValue,
+          excludeKind: excludeKind
+        });
       } else {
-        var _value5 = parseFloat(left);
+        var _value = parseFloat(inputValueLower);
 
-        var _operation4 = NUMERICAL_OPERATIONS.EQ;
         props.setFilter({
-          comparisons: [{
-            value: _value5,
-            operation: _operation4
-          }],
-          description: "= ".concat(_value5),
-          exclude: exclude
+          description: "= ".concat(_value),
+          exclude: exclude,
+          lowerValue: inputValueLower,
+          upperValue: inputValueLower,
+          excludeKind: excludeKind
         });
       }
 
       props.close();
     }
   }, /*#__PURE__*/React.createElement(ButtonGroup, {
-    size: SIZE.compact,
+    size: SIZE.mini,
     mode: MODE.radio,
     selected: comparatorIndex,
     onClick: function onClick(_, index) {
@@ -380,8 +313,8 @@ function NumericalFilter(props) {
     },
     overrides: {
       Root: {
-        style: function style(_ref) {
-          var $theme = _ref.$theme;
+        style: function style(_ref2) {
+          var $theme = _ref2.$theme;
           return {
             marginBottom: $theme.sizing.scale300
           };
@@ -396,7 +329,8 @@ function NumericalFilter(props) {
           width: '100%'
         }
       }
-    }
+    },
+    "aria-label": locale.datatable.numericalFilterRange
   }, locale.datatable.numericalFilterRange), /*#__PURE__*/React.createElement(Button, {
     type: "button",
     overrides: {
@@ -405,123 +339,168 @@ function NumericalFilter(props) {
           width: '100%'
         }
       }
-    }
-  }, locale.datatable.numericalFilterSingleValue)), isRange && /*#__PURE__*/React.createElement(ButtonGroup, {
-    size: SIZE.compact,
-    mode: MODE.radio,
-    selected: operatorIndex,
-    onClick: function onClick(_, index) {
-      return setOperatorIndex(index);
+    },
+    "aria-label": locale.datatable.numericalFilterSingleValue
+  }, locale.datatable.numericalFilterSingleValue)), /*#__PURE__*/React.createElement(Histogram, {
+    data: props.data,
+    lower: inputValueLower,
+    upper: inputValueUpper,
+    isRange: isRange,
+    exclude: exclude,
+    precision: props.options.precision
+  }), /*#__PURE__*/React.createElement("div", {
+    className: css({
+      display: 'flex',
+      justifyContent: 'space-between'
+    })
+  }, /*#__PURE__*/React.createElement(Slider // The slider throws errors when switching between single and two values
+  // when it tries to read getThumbDistance on a thumb which is not there anymore
+  // if we create a new instance these errors are prevented.
+  , {
+    key: isRange.toString(),
+    min: 1,
+    max: MAX_BIN_COUNT,
+    value: sliderValue,
+    onChange: function onChange(_ref3) {
+      var value = _ref3.value;
+
+      if (!value) {
+        return;
+      } // we convert back from the slider scale to the actual data's scale
+
+
+      if (isRange) {
+        var _value2 = _slicedToArray(value, 2),
+            lowerValue = _value2[0],
+            upperValue = _value2[1];
+
+        setLower(sliderScale.invert(lowerValue));
+        setUpper(sliderScale.invert(upperValue));
+      } else {
+        var _value3 = _slicedToArray(value, 1),
+            singleValue = _value3[0];
+
+        setSingle(sliderScale.invert(singleValue));
+      }
     },
     overrides: {
+      InnerThumb: function InnerThumb(_ref4) {
+        var $value = _ref4.$value,
+            $thumbIndex = _ref4.$thumbIndex;
+        return /*#__PURE__*/React.createElement(React.Fragment, null, $value[$thumbIndex]);
+      },
+      TickBar: function TickBar(_ref5) {
+        var $min = _ref5.$min,
+            $max = _ref5.$max;
+        return null;
+      },
+      // we don't want the ticks
+      ThumbValue: function ThumbValue() {
+        return null;
+      },
       Root: {
-        style: function style(_ref2) {
-          var $theme = _ref2.$theme;
+        style: function style() {
           return {
-            marginBottom: $theme.sizing.scale500
+            // Aligns the center of the slider handles with the histogram bars
+            width: 'calc(100% + 14px)',
+            margin: '0 -7px'
           };
         }
-      }
-    }
-  }, /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    overrides: {
-      BaseButton: {
-        style: {
-          width: '100%'
-        }
-      }
-    }
-  }, "<"), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    overrides: {
-      BaseButton: {
-        style: {
-          width: '100%'
-        }
-      }
-    }
-  }, ">"), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    overrides: {
-      BaseButton: {
-        style: {
-          width: '100%'
-        }
-      }
-    }
-  }, "\u2264"), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    overrides: {
-      BaseButton: {
-        style: {
-          width: '100%'
+      },
+      InnerTrack: {
+        style: function style(_ref6) {
+          var $theme = _ref6.$theme;
+
+          if (!isRange) {
+            return {
+              // For range selection we use the color as is, but when selecting the single value,
+              // we don't want the track standing out, so mute its color
+              background: theme.colors.mono400
+            };
+          }
         }
-      }
-    }
-  }, "\u2265"), /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    overrides: {
-      BaseButton: {
-        style: {
-          width: '100%'
+      },
+      Thumb: {
+        style: function style() {
+          return {
+            // Slider handles are small enough to visually be centered within each histogram bar
+            height: '18px',
+            width: '18px',
+            fontSize: '0px'
+          };
         }
       }
     }
-  }, "=")), /*#__PURE__*/React.createElement("div", {
-    className: css({
-      display: 'flex',
-      justifyContent: 'space-between',
-      marginLeft: theme.sizing.scale300,
-      marginRight: theme.sizing.scale300
-    })
-  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
+      marginTop: theme.sizing.scale400,
+      // This % gap is visually appealing given the filter box width
+      gap: '30%',
       justifyContent: 'space-between'
     })
   }, /*#__PURE__*/React.createElement(Input, {
-    size: INPUT_SIZE.compact,
+    min: min,
+    max: max,
+    size: INPUT_SIZE.mini,
     overrides: {
       Root: {
         style: {
-          width: isRange ? '152px' : '100%'
+          width: '100%'
         }
       }
     },
-    disabled: leftDisabled,
-    inputRef: leftInputRef,
-    value: left,
+    value: inputValueLower,
     onChange: function onChange(event) {
       if (validateInput(event.target.value)) {
-        setLeft(event.target.value);
+        isRange ? // $FlowFixMe - we know it is a number by now
+        setLower(event.target.value) : // $FlowFixMe - we know it is a number by now
+        setSingle(event.target.value);
       }
+    },
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
     }
   }), isRange && /*#__PURE__*/React.createElement(Input, {
-    size: INPUT_SIZE.compact,
+    min: min,
+    max: max,
+    size: INPUT_SIZE.mini,
     overrides: {
+      Input: {
+        style: {
+          textAlign: 'right'
+        }
+      },
       Root: {
         style: {
-          width: '152px'
+          width: '100%'
         }
       }
     },
-    disabled: rightDisabled,
-    inputRef: rightInputRef,
-    value: right,
+    value: inputValueUpper,
     onChange: function onChange(event) {
       if (validateInput(event.target.value)) {
-        setRight(event.target.value);
+        // $FlowFixMe - we know it is a number by now
+        setUpper(event.target.value);
       }
+    },
+    onFocus: function onFocus() {
+      return setFocus(true);
+    },
+    onBlur: function onBlur() {
+      return setFocus(false);
     }
   })));
 }
 
 function NumericalCell(props) {
-  var _useStyletron3 = useStyletron(),
-      _useStyletron4 = _slicedToArray(_useStyletron3, 2),
-      css = _useStyletron4[0],
-      theme = _useStyletron4[1];
+  var _useStyletron5 = useStyletron(),
+      _useStyletron6 = _slicedToArray(_useStyletron5, 2),
+      css = _useStyletron6[0],
+      theme = _useStyletron6[1];
 
   return /*#__PURE__*/React.createElement("div", {
     className: css(_objectSpread(_objectSpread({}, theme.typography.MonoParagraphXSmall), {}, {
@@ -564,30 +543,8 @@ function NumericalColumn(options) {
     kind: COLUMNS.NUMERICAL,
     buildFilter: function buildFilter(params) {
       return function (data) {
-        var included = params.comparisons.some(function (c) {
-          var left = roundToFixed(data, normalizedOptions.precision);
-          var right = roundToFixed(c.value, normalizedOptions.precision);
-
-          switch (c.operation) {
-            case NUMERICAL_OPERATIONS.EQ:
-              return left === right;
-
-            case NUMERICAL_OPERATIONS.GT:
-              return left > right;
-
-            case NUMERICAL_OPERATIONS.GTE:
-              return left >= right;
-
-            case NUMERICAL_OPERATIONS.LT:
-              return left < right;
-
-            case NUMERICAL_OPERATIONS.LTE:
-              return left <= right;
-
-            default:
-              return true;
-          }
-        });
+        var value = roundToFixed(data, normalizedOptions.precision);
+        var included = value >= params.lowerValue && value <= params.upperValue;
         return params.exclude ? !included : included;
       };
     },