@elastic/eui 70.3.0 → 71.0.0

package/es/components/form/range/dual_range.js

@@ -1,6 +1,10 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "style", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -39,33 +43,35 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  */
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
-import { css } from '@emotion/react';
 import classNames from 'classnames';
-import { keys } from '../../../services';
+import { keys, htmlIdGenerator, withEuiTheme } from '../../../services';
 import { isWithinRange } from '../../../services/number';
+import { logicalStyles } from '../../../global_styling';
 import { EuiInputPopover } from '../../popover';
 import { EuiFormControlLayoutDelimited } from '../form_control_layout';
-import { htmlIdGenerator } from '../../../services/accessibility';
+import { FormContext } from '../eui_form_context';
 import { EuiRangeDraggable } from './range_draggable';
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
 import { EuiRangeLabel } from './range_label';
+import { getLevelColor, euiRangeLevelColor } from './range_levels_colors';
 import { EuiRangeSlider } from './range_slider';
 import { EuiRangeThumb } from './range_thumb';
 import { EuiRangeTrack } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
 import { calculateThumbPosition } from './utils';
-import { FormContext } from '../eui_form_context';
+import { euiRangeStyles } from './range.styles';
+import { euiDualRangeStyles } from './dual_range.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiDualRange = /*#__PURE__*/function (_Component) {
-  _inherits(EuiDualRange, _Component);
+export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiDualRangeClass, _Component);
 
-  var _super = _createSuper(EuiDualRange);
+  var _super = _createSuper(EuiDualRangeClass);
 
-  function EuiDualRange() {
+  function EuiDualRangeClass() {
     var _this;
 
-    _classCallCheck(this, EuiDualRange);
+    _classCallCheck(this, EuiDualRangeClass);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -75,7 +81,6 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       id: _this.props.id || htmlIdGenerator()(),
-      hasFocus: false,
       rangeSliderRefAvailable: false,
       isPopoverOpen: false,
       rangeWidth: undefined,
@@ -104,15 +109,16 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
       // If the values are invalid, find whether the new value is in the upper
       // or lower half and move the appropriate handle to the new value,
       // while the other handle gets moved to the opposite bound (if invalid)
-      var lowerHalf = Math.abs(_this.props.max - _this.props.min) / 2 + _this.props.min;
-
-      var newValIsLow = isWithinRange(_this.props.min, lowerHalf, newVal);
+      var min = _this.props.min;
+      var max = _this.props.max;
+      var lowerHalf = Math.abs(max - min) / 2 + min;
+      var newValIsLow = isWithinRange(min, lowerHalf, newVal);
 
       if (newValIsLow) {
         lower = newVal;
-        upper = !_this.upperValueIsValid ? _this.props.max : upper;
+        upper = !_this.upperValueIsValid ? max : upper;
       } else {
-        lower = !_this.lowerValueIsValid ? _this.props.min : lower;
+        lower = !_this.lowerValueIsValid ? min : lower;
         upper = newVal;
       }
 
@@ -182,13 +188,14 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
       var newVal = Number(value);
       var stepRemainder = 0;
       var step = _this.props.step || 1;
+      var min = _this.props.min;
 
       switch (event.key) {
         case keys.ARROW_UP:
         case keys.ARROW_RIGHT:
           event.preventDefault();
           newVal += step;
-          stepRemainder = (newVal - _this.props.min) % step;
+          stepRemainder = (newVal - min) % step;
 
           if (step !== 1 && stepRemainder > 0) {
             newVal = newVal - stepRemainder;
@@ -200,7 +207,7 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
         case keys.ARROW_LEFT:
           event.preventDefault();
           newVal -= step;
-          stepRemainder = (newVal - _this.props.min) % step;
+          stepRemainder = (newVal - min) % step;
 
           if (step !== 1 && stepRemainder > 0) {
             newVal = newVal + (step - stepRemainder);
@@ -289,28 +296,16 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
       };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "toggleHasFocus", function () {
-      var shouldFocused = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : !_this.state.hasFocus;
-
-      _this.setState({
-        hasFocus: shouldFocused
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "onThumbFocus", function (e) {
       if (_this.props.onFocus) {
         _this.props.onFocus(e);
       }
-
-      _this.toggleHasFocus(true);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onThumbBlur", function (e) {
       if (_this.props.onBlur) {
         _this.props.onBlur(e);
       }
-
-      _this.toggleHasFocus(false);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onInputFocus", function (e) {
@@ -359,10 +354,12 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "getNearestStep", function (value) {
+      var min = _this.props.min;
+      var max = _this.props.max;
       var steps = (_this.props.max - _this.props.min) / _this.props.step;
-      var approx = Math.round((value - _this.props.min) * steps / (_this.props.max - _this.props.min)) / steps;
+      var approx = Math.round((value - min) * steps / (max - min)) / steps;
       var bound = Math.min(Math.max(approx, 0), 1);
-      var nearest = bound * (_this.props.max - _this.props.min) + _this.props.min;
+      var nearest = bound * (max - min) + min;
       return Number(nearest.toPrecision(10)) * 100 / 100;
     });
 
@@ -372,9 +369,8 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
         _this.dragAcc = 0;
       }
 
-      var _this$props = _this.props,
-          min = _this$props.min,
-          max = _this$props.max;
+      var min = _this.props.min;
+      var max = _this.props.max;
       var lowerValue = Number(_this.lowerValue);
       var upperValue = Number(_this.upperValue);
       var delta = _this.leftPosition - x;
@@ -401,7 +397,7 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(EuiDualRange, [{
+  _createClass(EuiDualRangeClass, [{
     key: "lowerValue",
     get: function get() {
       return this.props.value ? this.props.value[0] : this.props.min;
@@ -460,44 +456,47 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
       var _ref = this.context,
           defaultFullWidth = _ref.defaultFullWidth;
 
-      var _this$props2 = this.props,
-          className = _this$props2.className,
-          customCss = _this$props2.css,
-          compressed = _this$props2.compressed,
-          disabled = _this$props2.disabled,
-          _this$props2$fullWidt = _this$props2.fullWidth,
-          fullWidth = _this$props2$fullWidt === void 0 ? defaultFullWidth : _this$props2$fullWidt,
-          isLoading = _this$props2.isLoading,
-          readOnly = _this$props2.readOnly,
-          propsId = _this$props2.id,
-          max = _this$props2.max,
-          min = _this$props2.min,
-          name = _this$props2.name,
-          step = _this$props2.step,
-          showLabels = _this$props2.showLabels,
-          showInput = _this$props2.showInput,
-          showTicks = _this$props2.showTicks,
-          tickInterval = _this$props2.tickInterval,
-          ticks = _this$props2.ticks,
-          levels = _this$props2.levels,
-          onBlur = _this$props2.onBlur,
-          onChange = _this$props2.onChange,
-          onFocus = _this$props2.onFocus,
-          showRange = _this$props2.showRange,
-          value = _this$props2.value,
-          style = _this$props2.style,
-          isInvalid = _this$props2.isInvalid,
-          append = _this$props2.append,
-          prepend = _this$props2.prepend,
-          minInputProps = _this$props2.minInputProps,
-          maxInputProps = _this$props2.maxInputProps,
-          isDraggable = _this$props2.isDraggable,
-          rest = _objectWithoutProperties(_this$props2, _excluded);
-
+      var _this$props = this.props,
+          className = _this$props.className,
+          customCss = _this$props.css,
+          compressed = _this$props.compressed,
+          disabled = _this$props.disabled,
+          _this$props$fullWidth = _this$props.fullWidth,
+          fullWidth = _this$props$fullWidth === void 0 ? defaultFullWidth : _this$props$fullWidth,
+          isLoading = _this$props.isLoading,
+          readOnly = _this$props.readOnly,
+          propsId = _this$props.id,
+          maxProps = _this$props.max,
+          minProps = _this$props.min,
+          name = _this$props.name,
+          step = _this$props.step,
+          showLabels = _this$props.showLabels,
+          showInput = _this$props.showInput,
+          showTicks = _this$props.showTicks,
+          tickInterval = _this$props.tickInterval,
+          ticks = _this$props.ticks,
+          levels = _this$props.levels,
+          onBlur = _this$props.onBlur,
+          onChange = _this$props.onChange,
+          onFocus = _this$props.onFocus,
+          showRange = _this$props.showRange,
+          value = _this$props.value,
+          isInvalid = _this$props.isInvalid,
+          append = _this$props.append,
+          prepend = _this$props.prepend,
+          minInputProps = _this$props.minInputProps,
+          maxInputProps = _this$props.maxInputProps,
+          isDraggable = _this$props.isDraggable,
+          theme = _this$props.theme,
+          rest = _objectWithoutProperties(_this$props, _excluded);
+
+      var min = minProps;
+      var max = maxProps;
       var id = this.state.id;
       var digitTolerance = Math.max(String(min).length, String(max).length);
       var showInputOnly = showInput === 'inputWithPopover';
       var canShowDropdown = showInputOnly && !readOnly && !disabled;
+      var rangeStyles = euiRangeStyles(theme);
       var minInput = !!showInput ? ___EmotionJSX(EuiRangeInput // Overridable props
       , _extends({
         "aria-describedby": this.props['aria-describedby'],
@@ -555,17 +554,22 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
         } : undefined
       })) : undefined;
       var classes = classNames('euiDualRange', className);
+      var dualRangeStyles = euiDualRangeStyles();
+      var cssStyles = [dualRangeStyles.euiDualRange, customCss];
       var leftThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.lowerValue) || min, this.state.rangeWidth) : {
         left: '0'
       };
       var rightThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
         left: '0'
       };
-      var styles = {
-        euiDualRange: /*#__PURE__*/css(";label:euiDualRange;")
-      }; // TODO: Emotion conversion
-
-      var cssStyles = [styles.euiDualRange, customCss];
+      var leftThumbColor = levels && getLevelColor(levels, Number(this.lowerValue));
+      var rightThumbColor = levels && getLevelColor(levels, Number(this.upperValue));
+      var leftThumbStyles = leftThumbColor ? _objectSpread(_objectSpread({}, leftThumbPosition), {}, {
+        backgroundColor: euiRangeLevelColor(leftThumbColor, theme.euiTheme)
+      }) : leftThumbPosition;
+      var rightThumbStyles = rightThumbColor ? _objectSpread(_objectSpread({}, rightThumbPosition), {}, {
+        backgroundColor: euiRangeLevelColor(rightThumbColor, theme.euiTheme)
+      }) : rightThumbPosition;
 
       var theRange = ___EmotionJSX(EuiRangeWrapper, {
         css: cssStyles,
@@ -573,7 +577,8 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
         fullWidth: fullWidth,
         compressed: compressed
       }, showInput && !showInputOnly && ___EmotionJSX(React.Fragment, null, minInput, ___EmotionJSX("div", {
-        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer'
+        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
+        css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       })), showLabels && ___EmotionJSX(EuiRangeLabel, {
         side: "min",
         disabled: disabled
@@ -589,79 +594,80 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleSliderChange,
         value: value,
-        "aria-hidden": showInput === true
-      }, ___EmotionJSX(EuiRangeSlider, _extends({
-        className: "euiDualRange__slider",
-        ref: this.handleRangeSliderRefUpdate,
-        id: id,
-        name: name,
-        min: min,
-        max: max,
-        step: step,
-        disabled: disabled,
-        compressed: compressed,
-        onChange: this.handleSliderChange,
-        style: style,
-        showTicks: showTicks,
-        hasFocus: this.state.hasFocus,
-        "aria-hidden": true,
-        tabIndex: -1,
-        showRange: showRange,
-        onFocus: onFocus,
-        onBlur: onBlur
-      }, rest)), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
-        compressed: compressed,
-        hasFocus: this.state.hasFocus,
-        showTicks: showTicks,
-        min: Number(min),
-        max: Number(max),
-        lowerValue: Number(this.lowerValue),
-        upperValue: Number(this.upperValue)
-      }), this.state.rangeSliderRefAvailable && ___EmotionJSX(React.Fragment, null, isDraggable && this.isValid && ___EmotionJSX(EuiRangeDraggable, {
-        min: min,
-        max: max,
-        value: [Number(this.lowerValue), Number(this.upperValue)],
-        disabled: disabled,
-        lowerPosition: leftThumbPosition.left,
-        upperPosition: rightThumbPosition.left,
-        showTicks: showTicks,
-        compressed: compressed,
-        onChange: this.handleDrag,
-        onFocus: this.onThumbFocus,
-        onBlur: this.onThumbBlur,
-        onKeyDown: this.handleDraggableKeyDown,
-        "aria-describedby": this.props['aria-describedby'],
-        "aria-label": this.props['aria-label']
-      }), ___EmotionJSX(EuiRangeThumb, {
-        min: min,
-        max: Number(this.upperValue),
-        value: this.lowerValue,
-        disabled: disabled,
-        showTicks: showTicks,
-        showInput: !!showInput,
-        onKeyDown: this.handleLowerKeyDown,
-        onFocus: this.onThumbFocus,
-        onBlur: this.onThumbBlur,
-        style: leftThumbPosition,
-        "aria-describedby": this.props['aria-describedby'],
-        "aria-label": this.props['aria-label']
-      }), ___EmotionJSX(EuiRangeThumb, {
-        min: Number(this.lowerValue),
-        max: max,
-        value: this.upperValue,
-        disabled: disabled,
-        showTicks: showTicks,
-        showInput: !!showInput,
-        onKeyDown: this.handleUpperKeyDown,
-        onFocus: this.onThumbFocus,
-        onBlur: this.onThumbBlur,
-        style: rightThumbPosition,
-        "aria-describedby": this.props['aria-describedby'],
-        "aria-label": this.props['aria-label']
-      }))), showLabels && ___EmotionJSX(EuiRangeLabel, {
+        "aria-hidden": showInput === true,
+        showRange: showRange
+      }, function (trackWidth) {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiRangeSlider, _extends({
+          className: "euiDualRange__slider",
+          css: dualRangeStyles.euiDualRange__slider,
+          ref: _this2.handleRangeSliderRefUpdate,
+          id: id,
+          name: name,
+          min: min,
+          max: max,
+          step: step,
+          disabled: disabled,
+          onChange: _this2.handleSliderChange,
+          showTicks: showTicks,
+          "aria-hidden": true,
+          tabIndex: -1,
+          showRange: showRange,
+          onFocus: onFocus,
+          onBlur: onBlur
+        }, rest)), _this2.state.rangeSliderRefAvailable && ___EmotionJSX(React.Fragment, null, isDraggable && _this2.isValid && ___EmotionJSX(EuiRangeDraggable, {
+          min: min,
+          max: max,
+          value: [_this2.lowerValue, _this2.upperValue],
+          disabled: disabled,
+          lowerPosition: leftThumbPosition.left,
+          upperPosition: rightThumbPosition.left,
+          showTicks: showTicks,
+          onChange: _this2.handleDrag,
+          onFocus: _this2.onThumbFocus,
+          onBlur: _this2.onThumbBlur,
+          onKeyDown: _this2.handleDraggableKeyDown,
+          "aria-describedby": _this2.props['aria-describedby'],
+          "aria-label": _this2.props['aria-label']
+        }), ___EmotionJSX(EuiRangeThumb, {
+          min: min,
+          max: Number(_this2.upperValue),
+          value: _this2.lowerValue,
+          disabled: disabled,
+          showTicks: showTicks,
+          showInput: !!showInput,
+          onKeyDown: _this2.handleLowerKeyDown,
+          onFocus: _this2.onThumbFocus,
+          onBlur: _this2.onThumbBlur,
+          style: logicalStyles(leftThumbStyles),
+          "aria-describedby": _this2.props['aria-describedby'],
+          "aria-label": _this2.props['aria-label']
+        }), ___EmotionJSX(EuiRangeThumb, {
+          min: Number(_this2.lowerValue),
+          max: max,
+          value: _this2.upperValue,
+          disabled: disabled,
+          showTicks: showTicks,
+          showInput: !!showInput,
+          onKeyDown: _this2.handleUpperKeyDown,
+          onFocus: _this2.onThumbFocus,
+          onBlur: _this2.onThumbBlur,
+          style: logicalStyles(rightThumbStyles),
+          "aria-describedby": _this2.props['aria-describedby'],
+          "aria-label": _this2.props['aria-label']
+        })), showRange && _this2.isValid && ___EmotionJSX(EuiRangeHighlight, {
+          showTicks: showTicks,
+          min: Number(min),
+          max: Number(max),
+          lowerValue: Number(_this2.lowerValue),
+          upperValue: Number(_this2.upperValue),
+          levels: levels,
+          trackWidth: trackWidth
+        }));
+      }), showLabels && ___EmotionJSX(EuiRangeLabel, {
         disabled: disabled
       }, max), showInput && !showInputOnly && ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
-        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer'
+        className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
+        css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       }), maxInput));
 
       var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, {
@@ -687,12 +693,12 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return EuiDualRange;
+  return EuiDualRangeClass;
 }(Component);
 
-_defineProperty(EuiDualRange, "contextType", FormContext);
+_defineProperty(EuiDualRangeClass, "contextType", FormContext);
 
-_defineProperty(EuiDualRange, "defaultProps", {
+_defineProperty(EuiDualRangeClass, "defaultProps", {
   min: 0,
   max: 100,
   step: 1,
@@ -705,31 +711,72 @@ _defineProperty(EuiDualRange, "defaultProps", {
   levels: []
 });
 
-EuiDualRange.propTypes = {
-  value: PropTypes.any.isRequired,
+EuiDualRangeClass.propTypes = {
+  /**
+     * Creates a draggble highlighted range area
+     */
+  isDraggable: PropTypes.bool,
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
+
+  /**
+     * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`.
+     * `string` | `ReactElement` or an array of these
+     */
+  prepend: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
+
+  /**
+     * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`.
+     * `string` | `ReactElement` or an array of these
+     */
+  append: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
+
+  /**
+     * Intended to be used with aria attributes. Some attributes may be overwritten.
+     */
+  minInputProps: PropTypes.any,
+
+  /**
+     *  Intended to be used with aria attributes. Some attributes may be overwritten.
+     */
+  maxInputProps: PropTypes.any,
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
+  value: PropTypes.any.isRequired,
   onChange: PropTypes.func.isRequired,
+  max: PropTypes.number.isRequired,
+  min: PropTypes.number.isRequired,
 
   /**
-     * Expand to fill 100% of the parent.
-     * Defaults to `fullWidth` prop of `<EuiForm>`.
-     * @default false
+     * The number to increment or decrement between each interval
+     * @default 1
      */
-  fullWidth: PropTypes.bool,
-  isInvalid: PropTypes.bool,
+  step: PropTypes.number,
 
   /**
-     * Create colored indicators for certain intervals
+     * Specified ticks at specified values
      */
-  levels: PropTypes.arrayOf(PropTypes.shape({
-    min: PropTypes.number.isRequired,
-    max: PropTypes.number.isRequired,
+  ticks: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.number.isRequired,
+    label: PropTypes.node.isRequired
+  }).isRequired),
 
+  /**
+     * Modifies the number of tick marks and at what interval
+     */
+  tickInterval: PropTypes.number,
+
+  /**
+     * Create colored indicators for certain intervals.
+     * An array of #EuiRangeLevel objects
+     */
+  levels: PropTypes.arrayOf(PropTypes.shape({
     /**
        * Accepts one of `["primary", "success", "warning", "danger"]` or a valid CSS color value.
        */
-    color: PropTypes.oneOfType([PropTypes.oneOf(["primary", "success", "warning", "danger"]).isRequired, PropTypes.any.isRequired]).isRequired,
+    color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]).isRequired,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
@@ -737,58 +784,59 @@ EuiDualRange.propTypes = {
   }).isRequired),
 
   /**
-     * Shows static min/max labels on the sides of the range slider
+     * Pass `true` to displays an extra input control for direct manipulation.
+     * Pass `"inputWithPopover"` to only show the input but show the range in a dropdown.
      */
-  showLabels: PropTypes.bool,
+  showInput: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["inputWithPopover"])]),
 
   /**
-     * Pass `true` to displays an extra input control for direct manipulation.
-     * Pass `'inputWithPopover'` to only show the input but show the range in a dropdown.
+     * Shows static min/max labels on the sides of the range slider
      */
-  showInput: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.oneOf(["inputWithPopover"])]),
+  showLabels: PropTypes.bool,
 
   /**
-     * Modifies the number of tick marks and at what interval
+     * Shows a thick line from min to value
      */
-  tickInterval: PropTypes.number,
+  showRange: PropTypes.bool,
 
   /**
-     * Specified ticks at specified values
+     * Shows clickable tick marks and labels at the given interval (`step`/`tickInterval`)
      */
-  ticks: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.number.isRequired,
-    label: PropTypes.node.isRequired
-  }).isRequired),
+  showTicks: PropTypes.bool,
+  id: PropTypes.string,
+  name: PropTypes.string,
 
   /**
-     * Creates an input group with element(s) coming before input.  Will only show if `showInput = inputWithPopover`.
-     * `string` | `ReactElement` or an array of these
+     * Only impacts ticks rendered by `showTicks` or inputs rendered by `showInput`.
      */
-  prepend: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
+  compressed: PropTypes.bool,
 
   /**
-     * Creates an input group with element(s) coming after input. Will only show if `showInput = inputWithPopover`.
-     * `string` | `ReactElement` or an array of these
+     * Only impacts inputs rendered by the `showInput` prop.
+     * The range slider itself remains interactable unless `disabled` is applied.
      */
-  append: PropTypes.oneOfType([PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.element.isRequired]).isRequired).isRequired]),
+  readOnly: PropTypes.bool,
 
   /**
-     *  Intended to be uses with aria attributes. Some attributes may be overwritten.
+     * Disables both the range track and any input(s)
      */
-  minInputProps: PropTypes.any,
+  disabled: PropTypes.bool,
 
   /**
-     *  Intended to be uses with aria attributes. Some attributes may be overwritten.
+     * Expand to fill 100% of the parent.
+     * Defaults to `fullWidth` prop of `<EuiForm>`.
+     * @default false
      */
-  maxInputProps: PropTypes.any,
+  fullWidth: PropTypes.bool,
 
   /**
-     *  Creates a draggble highlighted range area
+     * Only impacts inputs rendered when the `showInput` prop is set to `"inputWithPopover"`
      */
-  isDraggable: PropTypes.bool,
+  isLoading: PropTypes.bool,
 
   /**
-     * Will only show if `showInput = inputWithPopover`
+     * Only impacts inputs rendered by the `showInput` prop
      */
-  isLoading: PropTypes.bool
-};
+  isInvalid: PropTypes.bool
+};
+export var EuiDualRange = withEuiTheme(EuiDualRangeClass);

package/es/components/form/range/dual_range.styles.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { euiRangeThumbPerBrowser } from './range.styles';
+export var euiDualRangeStyles = function euiDualRangeStyles() {
+  return {
+    euiDualRange: /*#__PURE__*/css(";label:euiDualRange;"),
+    euiDualRange__slider: /*#__PURE__*/css(euiRangeThumbPerBrowser('visibility: hidden'), ";;label:euiDualRange__slider;")
+  };
+};