@elastic/eui 70.3.0 → 71.0.0

package/optimize/es/components/flyout/flyout.styles.js

@@ -10,12 +10,12 @@ var _templateObject, _templateObject2;
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiCanAnimate, euiBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiCanAnimate, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
 import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
 import { transparentize } from '../../services/color';
 import { euiFormVariables } from '../form/form.styles';
 export var euiFlyoutSlideInRight = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
-export var euiFlyoutSlideInLeft = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n}\n"])));
+export var euiFlyoutSlideInLeft = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n    transform: translateX(-100%);\n  }\n  75% {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
 export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
@@ -25,15 +25,15 @@ export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiT
     outsideSide: {
       // `transforms` pull in close buttons a little
       // `!important` is necessary here to override the hover/focus transitions of buttons
-      right: /*#__PURE__*/css(logicalCSS('left', 0), " ", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;};label:right;"),
-      left: /*#__PURE__*/css(logicalCSS('right', 0), " ", euiBreakpoint(euiThemeContext, ['m', 'xl']), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;};label:left;")
+      right: /*#__PURE__*/css(logicalCSS('left', 0), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.xs, "))!important;}", euiMinBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(-100% - ", euiTheme.size.l, "))!important;};label:right;"),
+      left: /*#__PURE__*/css(logicalCSS('right', 0), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.xs, "))!important;}", euiMinBreakpoint(euiThemeContext, 'm'), "{transform:translateX(calc(100% + ", euiTheme.size.l, "))!important;};label:left;")
     }
   };
 };
 export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{", logicalCSS('max-width', '90vw !important'), ";};label:euiFlyout;"),
+    euiFlyout: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('height', '100%'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('max-width', '90vw !important'), ";};label:euiFlyout;"),
     // Flyout sizes
     s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
     m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
@@ -42,7 +42,7 @@ export var euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
     // Side
     right: /*#__PURE__*/css("clip-path:polygon(-50% 0, 100% 0, 100% 100%, -50% 100%);", logicalCSS('right', 0), " ", euiCanAnimate, "{animation:", euiFlyoutSlideInRight, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:right;"),
     // Left-side flyouts should only be used for navigation
-    left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, ";};label:left;"),
+    left: /*#__PURE__*/css(logicalCSS('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext), ";;label:overlay;"),
     push: /*#__PURE__*/css("clip-path:none;animation-duration:0s!important;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),
@@ -86,7 +86,7 @@ var composeFlyoutSizing = function composeFlyoutSizing(euiThemeContext, size) {
       max: "".concat(euiTheme.breakpoint.l, "px")
     }
   };
-  return "\n    ".concat(logicalCSS('max-width', flyoutSizes[size].max), "\n\n    ").concat(euiBreakpoint(euiThemeContext, ['m', 'xl']), " {\n      ").concat(logicalCSS('min-width', flyoutSizes[size].min), "\n      ").concat(logicalCSS('width', flyoutSizes[size].width), "\n    }\n    ").concat(euiBreakpoint(euiThemeContext, ['xs', 's']), " {\n      ").concat(logicalCSS('min-width', 0), "\n      ").concat(logicalCSS('width', flyoutSizes[size].min), "\n    }\n  ");
+  return "\n    ".concat(logicalCSS('max-width', flyoutSizes[size].max), "\n\n    ").concat(euiMaxBreakpoint(euiThemeContext, 'm'), " {\n      ").concat(logicalCSS('min-width', 0), "\n      ").concat(logicalCSS('width', flyoutSizes[size].min), "\n    }\n    ").concat(euiMinBreakpoint(euiThemeContext, 'm'), " {\n      ").concat(logicalCSS('min-width', flyoutSizes[size].min), "\n      ").concat(logicalCSS('width', flyoutSizes[size].width), "\n    }\n  ");
 };
 
 var composeFlyoutPadding = function composeFlyoutPadding(euiThemeContext, paddingSize) {

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

@@ -7,7 +7,11 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -21,33 +25,35 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Side Public License, v 1.
  */
 import React, { Component } from 'react';
-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];
@@ -57,7 +63,6 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "state", {
       id: _this.props.id || htmlIdGenerator()(),
-      hasFocus: false,
       rangeSliderRefAvailable: false,
       isPopoverOpen: false,
       rangeWidth: undefined,
@@ -86,15 +91,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;
       }
 
@@ -164,13 +170,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;
@@ -182,7 +189,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);
@@ -271,28 +278,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) {
@@ -341,10 +336,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;
     });
 
@@ -354,9 +351,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;
@@ -383,7 +379,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;
@@ -442,44 +438,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'],
@@ -537,17 +536,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,
@@ -555,7 +559,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
@@ -571,79 +576,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, {
@@ -669,12 +675,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,
@@ -685,4 +691,6 @@ _defineProperty(EuiDualRange, "defaultProps", {
   showRange: true,
   showTicks: false,
   levels: []
-});
+});
+
+export var EuiDualRange = withEuiTheme(EuiDualRangeClass);

package/optimize/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;")
+  };
+};