baseui 10.9.0 → 10.9.1

package/data-table/column-numerical.js

@@ -17,17 +17,15 @@ var _index3 = require("../input/index.js");
 
 var _index4 = require("../styles/index.js");
 
+var _index5 = require("../typography/index.js");
+
 var _column = _interopRequireDefault(require("./column.js"));
 
 var _constants = require("./constants.js");
 
 var _filterShell = _interopRequireDefault(require("./filter-shell.js"));
 
-var _index5 = require("../locale/index.js");
-
-var _d2 = require("d3");
-
-var _index6 = require("../slider/index.js");
+var _index6 = require("../locale/index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,6 +41,14 @@ 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."); }
@@ -100,226 +106,291 @@ function validateInput(input) {
   return Boolean(parseFloat(input)) || input === '' || input === '-';
 }
 
-var bisect = (0, _d2.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;
-
-  var _useStyletron = (0, _index4.useStyletron)(),
-      _useStyletron2 = _slicedToArray(_useStyletron, 2),
-      css = _useStyletron2[0],
-      theme = _useStyletron2[1];
-
-  var _React$useMemo = React.useMemo(function () {
-    var bins = (0, _d2.bin)().thresholds(Math.min(data.length, _constants.MAX_BIN_COUNT))(data);
-    var xScale = (0, _d2.scaleLinear)().domain([bins[0].x0, bins[bins.length - 1].x1]).range([0, _constants.HISTOGRAM_SIZE.width]).clamp(true);
-    var yScale = (0, _d2.scaleLinear)().domain([0, (0, _d2.max)(bins, function (d) {
-      return d.length;
-    })]).nice().range([_constants.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", _constants.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;
+function filterParamsToInitialState(filterParams) {
+  if (filterParams) {
+    if (filterParams.comparisons.length > 1) {
+      if (filterParams.comparisons[0].operation === _constants.NUMERICAL_OPERATIONS.LT && filterParams.comparisons[1].operation === _constants.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 withinLower = d.x1 > lower;
-      var withinUpper = d.x0 <= upper;
-      included = withinLower && withinUpper;
-    }
-
-    if (exclude) {
-      included = !included;
+      var comparison = filterParams.comparisons[0];
+
+      if (comparison.operation === _constants.NUMERICAL_OPERATIONS.LT) {
+        return {
+          exclude: filterParams.exclude,
+          comparatorIndex: 0,
+          operatorIndex: 0,
+          left: '',
+          right: comparison.value.toString()
+        };
+      } else if (comparison.operation === _constants.NUMERICAL_OPERATIONS.GT) {
+        return {
+          exclude: filterParams.exclude,
+          comparatorIndex: 0,
+          operatorIndex: 1,
+          left: comparison.value.toString(),
+          right: ''
+        };
+      } else if (comparison.operation === _constants.NUMERICAL_OPERATIONS.LTE) {
+        return {
+          exclude: filterParams.exclude,
+          comparatorIndex: 0,
+          operatorIndex: 2,
+          left: '',
+          right: comparison.value.toString()
+        };
+      } else if (comparison.operation === _constants.NUMERICAL_OPERATIONS.GTE) {
+        return {
+          exclude: filterParams.exclude,
+          comparatorIndex: 0,
+          operatorIndex: 3,
+          left: comparison.value.toString(),
+          right: ''
+        };
+      } else if (comparison.operation === _constants.NUMERICAL_OPERATIONS.EQ) {
+        return {
+          exclude: filterParams.exclude,
+          comparatorIndex: 1,
+          operatorIndex: 0,
+          left: comparison.value.toString(),
+          right: ''
+        };
+      }
     }
+  }
 
-    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
-    });
-  })));
-});
+  return {
+    exclude: false,
+    comparatorIndex: 0,
+    operatorIndex: 0,
+    left: '',
+    right: ''
+  };
+}
 
 function NumericalFilter(props) {
-  var _useStyletron3 = (0, _index4.useStyletron)(),
-      _useStyletron4 = _slicedToArray(_useStyletron3, 2),
-      css = _useStyletron4[0],
-      theme = _useStyletron4[1];
-
-  var locale = React.useContext(_index5.LocaleContext);
-  var precision = props.options.precision; // The state handling of this component could be refactored and cleaned up if we used useReducer.
+  var _useStyletron = (0, _index4.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      css = _useStyletron2[0],
+      theme = _useStyletron2[1];
 
-  var initialState = React.useMemo(function () {
-    return props.filterParams || {
-      exclude: false,
-      excludeKind: 'range',
-      comparatorIndex: 0,
-      lowerValue: null,
-      upperValue: null
-    };
-  }, [props.filterParams]);
+  var locale = React.useContext(_index6.LocaleContext);
+  var initialState = filterParamsToInitialState(props.filterParams);
 
   var _React$useState = React.useState(initialState.exclude),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       exclude = _React$useState2[0],
-      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
-
+      setExclude = _React$useState2[1];
 
-  var _React$useState3 = React.useState(function () {
-    switch (initialState.excludeKind) {
-      case 'value':
-        return 1;
-
-      case 'range':
-      default:
-        // fallthrough
-        return 0;
-    }
-  }),
+  var _React$useState3 = React.useState(initialState.comparatorIndex),
       _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.
-
-
-  var _React$useMemo2 = React.useMemo(function () {
-    return (0, _d2.extent)(props.data);
-  }, [props.data]),
-      _React$useMemo3 = _slicedToArray(_React$useMemo2, 2),
-      min = _React$useMemo3[0],
-      max = _React$useMemo3[1];
+      setComparatorIndex = _React$useState4[1];
 
-  var _React$useState5 = React.useState(function () {
-    return roundToFixed(initialState.lowerValue || min, precision);
-  }),
+  var _React$useState5 = React.useState(initialState.operatorIndex),
       _React$useState6 = _slicedToArray(_React$useState5, 2),
-      lv = _React$useState6[0],
-      setLower = _React$useState6[1];
+      operatorIndex = _React$useState6[0],
+      setOperatorIndex = _React$useState6[1];
 
-  var _React$useState7 = React.useState(function () {
-    return roundToFixed(initialState.upperValue || max, precision);
-  }),
+  var _React$useState7 = React.useState(initialState.left),
       _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.
+      left = _React$useState8[0],
+      setLeft = _React$useState8[1];
 
-
-  var _React$useState9 = React.useState(function () {
-    return roundToFixed(initialState.lowerValue || (0, _d2.median)(props.data), precision);
-  }),
+  var _React$useState9 = React.useState(initialState.right),
       _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.
-
+      right = _React$useState10[0],
+      setRight = _React$useState10[1];
 
   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 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());
+    }
 
-  var _React$useState11 = React.useState(false),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      focused = _React$useState12[0],
-      setFocus = _React$useState12[1];
+    if (!right) {
+      setRight(max.toString());
+    }
+  }, []);
 
-  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 _React$useMemo = React.useMemo(function () {
+    if (!isRange) return [false, false];
 
+    switch (operatorIndex) {
+      case 4:
+        return [false, false];
 
-    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 bound the values within our min and max even if a user enters a huge number
+      case 0:
+      case 2:
+        return [true, false];
 
+      case 1:
+      case 3:
+        return [false, true];
 
-  var sliderValue = isRange ? [Math.max(inputValueLower, min), Math.min(inputValueUpper, max)] : [Math.min(Math.max(inputValueLower, min), max)]; // keep the slider happy by sorting the two values
+      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;
 
-  if (isRange && sliderValue[0] > sliderValue[1]) {
-    sliderValue = [sliderValue[1], sliderValue[0]];
-  }
+      case 1:
+      case 3:
+        setRight(max.toString());
+        break;
 
+      case 0:
+      case 2:
+        setLeft(min.toString());
+        break;
+    }
+  }, [operatorIndex]);
   return /*#__PURE__*/React.createElement(_filterShell.default, {
     exclude: exclude,
     onExcludeChange: function onExcludeChange() {
       return setExclude(!exclude);
     },
-    excludeKind: excludeKind,
     onApply: function onApply() {
       if (isRange) {
-        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
-        });
+        switch (operatorIndex) {
+          case 0:
+            {
+              var _value = parseFloat(right);
+
+              var operation = _constants.NUMERICAL_OPERATIONS.LT;
+              props.setFilter({
+                comparisons: [{
+                  value: _value,
+                  operation: operation
+                }],
+                description: "< ".concat(_value),
+                exclude: exclude
+              });
+              break;
+            }
+
+          case 1:
+            {
+              var _value2 = parseFloat(left);
+
+              var _operation = _constants.NUMERICAL_OPERATIONS.GT;
+              props.setFilter({
+                comparisons: [{
+                  value: _value2,
+                  operation: _operation
+                }],
+                description: "> ".concat(_value2),
+                exclude: exclude
+              });
+              break;
+            }
+
+          case 2:
+            {
+              var _value3 = parseFloat(right);
+
+              var _operation2 = _constants.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 = _constants.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: _constants.NUMERICAL_OPERATIONS.LT
+                }, {
+                  value: rightValue,
+                  operation: _constants.NUMERICAL_OPERATIONS.GT
+                }],
+                description: "\u2265 ".concat(leftValue, " & \u2264 ").concat(rightValue),
+                exclude: !exclude
+              });
+              break;
+            }
+
+          default:
+            break;
+        }
       } else {
-        var _value = parseFloat(inputValueLower);
+        var _value5 = parseFloat(left);
 
+        var _operation4 = _constants.NUMERICAL_OPERATIONS.EQ;
         props.setFilter({
-          description: "= ".concat(_value),
-          exclude: exclude,
-          lowerValue: inputValueLower,
-          upperValue: inputValueLower,
-          excludeKind: excludeKind
+          comparisons: [{
+            value: _value5,
+            operation: _operation4
+          }],
+          description: "= ".concat(_value5),
+          exclude: exclude
         });
       }
 
       props.close();
     }
   }, /*#__PURE__*/React.createElement(_index2.ButtonGroup, {
-    size: _index.SIZE.mini,
+    size: _index.SIZE.compact,
     mode: _index2.MODE.radio,
     selected: comparatorIndex,
     onClick: function onClick(_, index) {
@@ -327,8 +398,8 @@ function NumericalFilter(props) {
     },
     overrides: {
       Root: {
-        style: function style(_ref2) {
-          var $theme = _ref2.$theme;
+        style: function style(_ref) {
+          var $theme = _ref.$theme;
           return {
             marginBottom: $theme.sizing.scale300
           };
@@ -343,8 +414,7 @@ function NumericalFilter(props) {
           width: '100%'
         }
       }
-    },
-    "aria-label": locale.datatable.numericalFilterRange
+    }
   }, locale.datatable.numericalFilterRange), /*#__PURE__*/React.createElement(_index.Button, {
     type: "button",
     overrides: {
@@ -353,167 +423,123 @@ function NumericalFilter(props) {
           width: '100%'
         }
       }
-    },
-    "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(_index6.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: min,
-    max: max,
-    value: sliderValue,
-    onChange: function onChange(_ref3) {
-      var value = _ref3.value;
-
-      if (!value) {
-        return;
-      }
-
-      if (isRange) {
-        var _value2 = _slicedToArray(value, 2),
-            lowerValue = _value2[0],
-            upperValue = _value2[1];
-
-        setLower(lowerValue);
-        setUpper(upperValue);
-      } else {
-        var _value3 = _slicedToArray(value, 1),
-            singleValue = _value3[0];
-
-        setSingle(singleValue);
-      }
+    }
+  }, locale.datatable.numericalFilterSingleValue)), isRange && /*#__PURE__*/React.createElement(_index2.ButtonGroup, {
+    size: _index.SIZE.compact,
+    mode: _index2.MODE.radio,
+    selected: operatorIndex,
+    onClick: function onClick(_, index) {
+      return setOperatorIndex(index);
     },
     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() {
+        style: function style(_ref2) {
+          var $theme = _ref2.$theme;
           return {
-            // Aligns the center of the slider handles with the histogram bars
-            width: 'calc(100% + 14px)',
-            margin: '0 -7px'
+            marginBottom: $theme.sizing.scale500
           };
         }
-      },
-      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
-            };
-          }
+      }
+    }
+  }, /*#__PURE__*/React.createElement(_index.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(_index.Button, {
+    type: "button",
+    overrides: {
+      BaseButton: {
+        style: {
+          width: '100%'
         }
       }
     }
-  })), /*#__PURE__*/React.createElement("div", {
+  }, ">"), /*#__PURE__*/React.createElement(_index.Button, {
+    type: "button",
+    overrides: {
+      BaseButton: {
+        style: {
+          width: '100%'
+        }
+      }
+    }
+  }, "\u2264"), /*#__PURE__*/React.createElement(_index.Button, {
+    type: "button",
+    overrides: {
+      BaseButton: {
+        style: {
+          width: '100%'
+        }
+      }
+    }
+  }, "\u2265"), /*#__PURE__*/React.createElement(_index.Button, {
+    type: "button",
+    overrides: {
+      BaseButton: {
+        style: {
+          width: '100%'
+        }
+      }
+    }
+  }, "=")), /*#__PURE__*/React.createElement("div", {
+    className: css({
+      display: 'flex',
+      justifyContent: 'space-between',
+      marginLeft: theme.sizing.scale300,
+      marginRight: theme.sizing.scale300
+    })
+  }, /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(max, props.options))), /*#__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(_index3.Input, {
-    min: min,
-    max: max,
-    size: _index3.SIZE.mini,
+    size: _index3.SIZE.compact,
     overrides: {
       Root: {
         style: {
-          width: '100%'
+          width: isRange ? '152px' : '100%'
         }
       }
     },
-    value: inputValueLower,
+    disabled: leftDisabled,
+    inputRef: leftInputRef,
+    value: left,
     onChange: function onChange(event) {
       if (validateInput(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);
+        setLeft(event.target.value);
       }
-    },
-    onFocus: function onFocus() {
-      return setFocus(true);
-    },
-    onBlur: function onBlur() {
-      return setFocus(false);
     }
   }), isRange && /*#__PURE__*/React.createElement(_index3.Input, {
-    min: min,
-    max: max,
-    size: _index3.SIZE.mini,
+    size: _index3.SIZE.compact,
     overrides: {
-      Input: {
-        style: {
-          textAlign: 'right'
-        }
-      },
       Root: {
         style: {
-          width: '100%'
+          width: '152px'
         }
       }
     },
-    value: inputValueUpper,
+    disabled: rightDisabled,
+    inputRef: rightInputRef,
+    value: right,
     onChange: function onChange(event) {
       if (validateInput(event.target.value)) {
-        // $FlowFixMe - we know it is a number by now
-        setUpper(event.target.value);
+        setRight(event.target.value);
       }
-    },
-    onFocus: function onFocus() {
-      return setFocus(true);
-    },
-    onBlur: function onBlur() {
-      return setFocus(false);
     }
   })));
 }
 
 function NumericalCell(props) {
-  var _useStyletron5 = (0, _index4.useStyletron)(),
-      _useStyletron6 = _slicedToArray(_useStyletron5, 2),
-      css = _useStyletron6[0],
-      theme = _useStyletron6[1];
+  var _useStyletron3 = (0, _index4.useStyletron)(),
+      _useStyletron4 = _slicedToArray(_useStyletron3, 2),
+      css = _useStyletron4[0],
+      theme = _useStyletron4[1];
 
   return /*#__PURE__*/React.createElement("div", {
     className: css(_objectSpread(_objectSpread({}, theme.typography.MonoParagraphXSmall), {}, {
@@ -556,8 +582,30 @@ function NumericalColumn(options) {
     kind: _constants.COLUMNS.NUMERICAL,
     buildFilter: function buildFilter(params) {
       return function (data) {
-        var value = roundToFixed(data, normalizedOptions.precision);
-        var included = value >= params.lowerValue && value <= params.upperValue;
+        var included = params.comparisons.some(function (c) {
+          var left = roundToFixed(data, normalizedOptions.precision);
+          var right = roundToFixed(c.value, normalizedOptions.precision);
+
+          switch (c.operation) {
+            case _constants.NUMERICAL_OPERATIONS.EQ:
+              return left === right;
+
+            case _constants.NUMERICAL_OPERATIONS.GT:
+              return left > right;
+
+            case _constants.NUMERICAL_OPERATIONS.GTE:
+              return left >= right;
+
+            case _constants.NUMERICAL_OPERATIONS.LT:
+              return left < right;
+
+            case _constants.NUMERICAL_OPERATIONS.LTE:
+              return left <= right;
+
+            default:
+              return true;
+          }
+        });
         return params.exclude ? !included : included;
       };
     },