@elastic/eui 70.4.0 → 71.0.0

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

@@ -7,7 +7,7 @@ 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", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "style", "tabIndex", "isInvalid"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 
 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); }; }
 
@@ -24,7 +24,9 @@ import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isWithinRange } from '../../../services/number';
 import { EuiInputPopover } from '../../popover';
-import { htmlIdGenerator } from '../../../services/accessibility';
+import { htmlIdGenerator, withEuiTheme } from '../../../services/';
+import { FormContext } from '../eui_form_context';
+import { getLevelColor } from './range_levels_colors';
 import { EuiRangeHighlight } from './range_highlight';
 import { EuiRangeInput } from './range_input';
 import { EuiRangeLabel } from './range_label';
@@ -32,17 +34,17 @@ import { EuiRangeSlider } from './range_slider';
 import { EuiRangeTooltip } from './range_tooltip';
 import { EuiRangeTrack } from './range_track';
 import { EuiRangeWrapper } from './range_wrapper';
-import { FormContext } from '../eui_form_context';
+import { euiRangeStyles } from './range.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiRange = /*#__PURE__*/function (_Component) {
-  _inherits(EuiRange, _Component);
+export var EuiRangeClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiRangeClass, _Component);
 
-  var _super = _createSuper(EuiRange);
+  var _super = _createSuper(EuiRangeClass);
 
-  function EuiRange() {
+  function EuiRangeClass() {
     var _this;
 
-    _classCallCheck(this, EuiRange);
+    _classCallCheck(this, EuiRangeClass);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -105,7 +107,7 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  _createClass(EuiRange, [{
+  _createClass(EuiRangeClass, [{
     key: "isValid",
     get: function get() {
       return isWithinRange(this.props.min, this.props.max, this.props.value || '');
@@ -145,9 +147,9 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
           onChange = _this$props.onChange,
           onFocus = _this$props.onFocus,
           value = _this$props.value,
-          style = _this$props.style,
           tabIndex = _this$props.tabIndex,
           isInvalid = _this$props.isInvalid,
+          theme = _this$props.theme,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
       var id = this.state.id;
@@ -173,12 +175,14 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
         isInvalid: isInvalid,
         autoSize: !showInputOnly
       }, rest)) : null;
-      var classes = classNames('euiRange', {
-        'euiRange--hasInput': showInput
-      }, className);
+      var classes = classNames('euiRange', className);
+      var styles = euiRangeStyles(theme);
+      var cssStyles = [styles.euiRange, showInput && styles.hasInput];
+      var thumbColor = levels && getLevelColor(levels, Number(value));
 
       var theRange = ___EmotionJSX(EuiRangeWrapper, {
         className: classes,
+        css: cssStyles,
         fullWidth: fullWidth,
         compressed: compressed
       }, showLabels && ___EmotionJSX(EuiRangeLabel, {
@@ -196,49 +200,52 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleOnChange,
         value: value,
-        "aria-hidden": showInput === true
-      }, ___EmotionJSX(EuiRangeSlider, _extends({
-        id: showInput ? undefined : id // Attach id only to the input if there is one
-        ,
-        name: name,
-        min: min,
-        max: max,
-        step: step,
-        value: value,
-        disabled: disabled,
-        compressed: compressed,
-        onChange: this.handleOnChange,
-        style: style,
-        showTicks: showTicks,
-        showRange: showRange,
-        tabIndex: showInput ? -1 : tabIndex,
-        onMouseDown: showInputOnly ? function () {
-          return _this2.preventPopoverClose = true;
-        } : undefined,
-        onFocus: showInput === true ? undefined : onFocus,
-        onBlur: showInputOnly ? this.onInputBlur : onBlur,
-        "aria-hidden": showInput === true ? true : false
-      }, rest)), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
-        compressed: compressed,
-        showTicks: showTicks,
-        min: Number(min),
-        max: Number(max),
-        lowerValue: Number(min),
-        upperValue: Number(value)
-      }), showValue && !!String(value).length && ___EmotionJSX(EuiRangeTooltip, {
-        compressed: compressed,
-        value: value,
-        max: max,
-        min: min,
-        name: name,
-        showTicks: showTicks,
-        valuePrepend: valuePrepend,
-        valueAppend: valueAppend
-      })), showLabels && ___EmotionJSX(EuiRangeLabel, {
+        "aria-hidden": showInput === true,
+        showRange: showRange
+      }, function (trackWidth) {
+        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiRangeSlider, _extends({
+          id: showInput ? undefined : id // Attach id only to the input if there is one
+          ,
+          name: name,
+          min: min,
+          max: max,
+          step: step,
+          value: value,
+          disabled: disabled,
+          onChange: _this2.handleOnChange,
+          showTicks: showTicks,
+          showRange: showRange,
+          tabIndex: showInput ? -1 : tabIndex,
+          onMouseDown: showInputOnly ? function () {
+            return _this2.preventPopoverClose = true;
+          } : undefined,
+          onFocus: showInput === true ? undefined : onFocus,
+          onBlur: showInputOnly ? _this2.onInputBlur : onBlur,
+          "aria-hidden": showInput === true ? true : false,
+          thumbColor: thumbColor
+        }, rest)), showRange && _this2.isValid && ___EmotionJSX(EuiRangeHighlight, {
+          showTicks: showTicks,
+          min: Number(min),
+          max: Number(max),
+          lowerValue: Number(min),
+          upperValue: Number(value),
+          levels: levels,
+          trackWidth: trackWidth
+        }), showValue && !!String(value).length && ___EmotionJSX(EuiRangeTooltip, {
+          value: value,
+          max: max,
+          min: min,
+          name: name,
+          showTicks: showTicks,
+          valuePrepend: valuePrepend,
+          valueAppend: valueAppend
+        }));
+      }), showLabels && ___EmotionJSX(EuiRangeLabel, {
         side: "max",
         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 ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
 
       var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, {
@@ -254,12 +261,12 @@ export var EuiRange = /*#__PURE__*/function (_Component) {
     }
   }]);
 
-  return EuiRange;
+  return EuiRangeClass;
 }(Component);
 
-_defineProperty(EuiRange, "contextType", FormContext);
+_defineProperty(EuiRangeClass, "contextType", FormContext);
 
-_defineProperty(EuiRange, "defaultProps", {
+_defineProperty(EuiRangeClass, "defaultProps", {
   min: 0,
   max: 100,
   step: 1,
@@ -271,4 +278,6 @@ _defineProperty(EuiRange, "defaultProps", {
   showTicks: false,
   showValue: false,
   levels: []
-});
+});
+
+export var EuiRange = withEuiTheme(EuiRangeClass);

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

@@ -0,0 +1,98 @@
+/*
+ * 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 { hexToRgb } from '../../../services';
+import { mathWithUnits } from '../../../global_styling';
+import { euiFormVariables } from '../form.styles';
+export var euiRangeVariables = function euiRangeVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var trackHeight = '6px';
+  var thumbHeight = euiTheme.size.base;
+  var thumbWidth = euiTheme.size.base;
+  var form = euiFormVariables(euiThemeContext);
+  return {
+    trackColor: euiTheme.colors.lightShade,
+    highlightColor: euiTheme.colors.darkShade,
+    focusColor: euiTheme.colors.primary,
+    thumbHeight: thumbHeight,
+    thumbWidth: thumbWidth,
+    thumbBorderWidth: euiTheme.border.width.thick,
+    thumbBorderColor: euiTheme.colors.emptyShade,
+    thumbBackgroundColor: euiTheme.colors.darkShade,
+    // same as highlightColor
+    trackWidth: '100%',
+    trackHeight: trackHeight,
+    trackBorderWidth: '0px',
+    trackBorderColor: euiTheme.colors.lightShade,
+    // same as trackColor
+    trackBorderRadius: euiTheme.border.radius.medium,
+    tickHeight: trackHeight,
+    tickWidth: euiTheme.size.xs,
+    disabledOpacity: 0.5,
+    highlightHeight: trackHeight,
+    height: form.controlHeight,
+    compressedHeight: form.controlCompressedHeight,
+    // position of the track and highlight relative to the parent container
+    trackTopPositionWithTicks: mathWithUnits([thumbHeight, trackHeight], function (x, y) {
+      return (x - y) / 2;
+    }),
+    trackBottomPositionWithTicks: mathWithUnits([thumbHeight, trackHeight], function (x, y) {
+      return x - (x - y) / 2;
+    }),
+    trackTopPositionWithoutTicks: "calc(50% - (".concat(trackHeight, " / 2))"),
+    // Z-indexes
+    levelsZIndex: 1,
+    highlightZIndex: 2,
+    thumbZIndex: 3
+  };
+};
+export var euiRangeTrackPerBrowser = function euiRangeTrackPerBrowser(content) {
+  return "\n    &::-webkit-slider-runnable-track { ".concat(content, "; }\n    &::-moz-range-track { ").concat(content, "; }\n    &::-ms-fill-lower {").concat(content, "; }\n    &::-ms-fill-upper { ").concat(content, "; }\n  ");
+};
+export var euiRangeThumbBorder = function euiRangeThumbBorder(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    border: ".concat(range.thumbBorderWidth, " solid ").concat(range.thumbBorderColor, ";\n  ");
+};
+export var euiRangeThumbBoxShadow = function euiRangeThumbBoxShadow(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var shadowColor = "rgba(".concat(hexToRgb(euiTheme.colors.shadow), ", .2)");
+  var range = euiRangeVariables(euiThemeContext);
+  var borderWidth = range.thumbBorderWidth;
+  var halfBorderWidth = mathWithUnits(borderWidth, function (x) {
+    return x / 2;
+  });
+  var largeBorderWidth = mathWithUnits(borderWidth, function (x) {
+    return x * 2.5;
+  });
+  return "\n    box-shadow:\n      0 0 0 ".concat(halfBorderWidth, " ").concat(range.thumbBorderColor, ",\n      0 ").concat(borderWidth, " ").concat(borderWidth, " -").concat(halfBorderWidth, " ").concat(shadowColor, ",\n      0 ").concat(halfBorderWidth, " ").concat(largeBorderWidth, " -").concat(borderWidth, " ").concat(shadowColor, ";\n  ");
+};
+export var euiRangeThumbFocusBoxShadow = function euiRangeThumbFocusBoxShadow(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    box-shadow: 0 0 0 ".concat(range.thumbBorderWidth, " ").concat(range.focusColor, ";\n  ");
+};
+export var euiRangeThumbStyle = function euiRangeThumbStyle(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
+};
+export var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
+  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb  { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
+};
+export var euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext, color) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n   ".concat(euiRangeThumbBorder(euiThemeContext), ";\n   ").concat(euiRangeThumbFocusBoxShadow(euiThemeContext), ";\n   background-color: ").concat(color || range.focusColor, ";\n  ");
+};
+export var euiRangeStyles = function euiRangeStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    // Base
+    euiRange: /*#__PURE__*/css(";label:euiRange;"),
+    hasInput: /*#__PURE__*/css(";label:hasInput;"),
+    euiRange__horizontalSpacer: /*#__PURE__*/css("inline-size:", euiTheme.size.base, ";;label:euiRange__horizontalSpacer;"),
+    euiRange__slimHorizontalSpacer: /*#__PURE__*/css("inline-size:", euiTheme.size.s, ";;label:euiRange__slimHorizontalSpacer;")
+  };
+};

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "compressed", "onChange", "min", "max", "disabled", "value"];
+var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "onChange", "min", "max", "disabled", "value"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -10,16 +10,17 @@ var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "co
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import classNames from 'classnames';
-import { useMouseMove } from '../../../services';
+import { useMouseMove, useEuiTheme } from '../../../services';
+import { logicalStyles } from '../../../global_styling';
+import { euiRangeDraggableStyles, euiRangeDraggableInnerStyles } from './range_draggable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
   var className = _ref.className,
       showTicks = _ref.showTicks,
       lowerPosition = _ref.lowerPosition,
       upperPosition = _ref.upperPosition,
-      compressed = _ref.compressed,
       onChange = _ref.onChange,
       min = _ref.min,
       max = _ref.max,
@@ -27,33 +28,36 @@ export var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
       value = _ref.value,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var outerStyle = {
-    left: "calc(".concat(lowerPosition, ")"),
-    right: "calc(100% - ".concat(upperPosition, " - 16px)")
-  };
-  var classes = classNames('euiRangeDraggable', {
-    'euiRangeDraggable--hasTicks': showTicks,
-    'euiRangeDraggable--compressed': compressed,
-    'euiRangeDraggable--disabled': disabled
-  }, className);
-
-  var handleChange = function handleChange(_ref2, isFirstInteraction) {
+  var euiTheme = useEuiTheme();
+  var outerStyle = useMemo(function () {
+    return logicalStyles({
+      left: lowerPosition,
+      right: "calc(100% - ".concat(upperPosition, " - ").concat(euiTheme.euiTheme.size.base, ")")
+    });
+  }, [lowerPosition, upperPosition, euiTheme.euiTheme.size.base]);
+  var handleChange = useCallback(function (_ref2, isFirstInteraction) {
     var x = _ref2.x;
     if (disabled) return;
     onChange(x, isFirstInteraction);
-  };
+  }, [disabled, onChange]);
 
   var _useMouseMove = useMouseMove(handleChange),
       _useMouseMove2 = _slicedToArray(_useMouseMove, 2),
       handleMouseDown = _useMouseMove2[0],
       handleInteraction = _useMouseMove2[1];
 
+  var classes = classNames('euiRangeDraggable', className);
+  var styles = euiRangeDraggableStyles(euiTheme);
+  var cssStyles = [styles.euiRangeDraggable, showTicks && styles.hasTicks, disabled && styles.disabled];
+  var innerStyles = euiRangeDraggableInnerStyles(euiTheme);
+  var cssInnerStyles = [innerStyles.euiRangeDraggable__inner, disabled ? styles.disabled : innerStyles.enabled];
   var commonProps = {
     className: classes,
+    css: cssStyles,
     role: 'slider',
     'aria-valuemin': min,
     'aria-valuemax': max,
-    'aria-valuenow': value[0],
+    'aria-valuenow': Number(value[0]),
     'aria-valuetext': "".concat(value[0], ", ").concat(value[1]),
     'aria-disabled': !!disabled,
     tabIndex: !!disabled ? -1 : 0
@@ -61,7 +65,8 @@ export var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
   return ___EmotionJSX("div", _extends({
     style: outerStyle
   }, commonProps, rest), ___EmotionJSX("div", {
-    className: "euiRangeDraggle__inner",
+    className: "euiRangeDraggable__inner",
+    css: cssInnerStyles,
     onMouseDown: handleMouseDown,
     onTouchStart: handleInteraction,
     onTouchMove: handleInteraction

package/optimize/es/components/form/range/range_draggable.styles.js

@@ -0,0 +1,52 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * 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 { mathWithUnits } from '../../../global_styling';
+import { euiRangeVariables, euiRangeThumbFocus } from './range.styles';
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "bpru7n-hasTicks",
+  styles: "inset-block-start:0;label:hasTicks;"
+} : {
+  name: "bpru7n-hasTicks",
+  styles: "inset-block-start:0;label:hasTicks;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiRangeDraggableStyles = function euiRangeDraggableStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return {
+    euiRangeDraggable: /*#__PURE__*/css("block-size:", mathWithUnits(range.height, function (x) {
+      return x / 2;
+    }), ";position:absolute;inset-block-start:", mathWithUnits(range.height, function (x) {
+      return x / 4;
+    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{outline:none;~.euiRangeThumb{", euiRangeThumbFocus(euiThemeContext), ";}};label:euiRangeDraggable;"),
+    hasTicks: _ref2,
+    disabled: /*#__PURE__*/css(";label:disabled;")
+  };
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ndov1k-enabled",
+  styles: "cursor:grab;pointer-events:all;&:active{cursor:grabbing;};label:enabled;"
+} : {
+  name: "ndov1k-enabled",
+  styles: "cursor:grab;pointer-events:all;&:active{cursor:grabbing;};label:enabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiRangeDraggableInnerStyles = function euiRangeDraggableInnerStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return {
+    euiRangeDraggable__inner: /*#__PURE__*/css("position:absolute;inset-inline:", range.thumbWidth, ";inset-block:0;;label:euiRangeDraggable__inner;"),
+    enabled: _ref,
+    disabled: /*#__PURE__*/css(";label:disabled;")
+  };
+};

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

@@ -5,41 +5,78 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
+import { logicalStyles } from '../../../global_styling';
+import { euiRangeHighlightStyles, euiRangeHighlightProgressStyles, euiRangeHighlightLevelsWrapperStyles, euiRangeHighlightLevelsStyles } from './range_highlight.styles';
+import { EuiRangeLevels } from './range_levels';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRangeHighlight = function EuiRangeHighlight(_ref) {
   var className = _ref.className,
-      hasFocus = _ref.hasFocus,
       showTicks = _ref.showTicks,
+      trackWidth = _ref.trackWidth,
       lowerValue = _ref.lowerValue,
       upperValue = _ref.upperValue,
       max = _ref.max,
       min = _ref.min,
-      compressed = _ref.compressed,
       background = _ref.background,
-      onClick = _ref.onClick;
-  // Calculate the width the range based on value
-  // const rangeWidth = (value - min) / (max - min);
-  var leftPosition = (lowerValue - min) / (max - min);
-  var rangeWidth = (upperValue - lowerValue) / (max - min);
-  var rangeWidthStyle = {
-    background: background,
-    marginLeft: "".concat(leftPosition * 100, "%"),
-    width: "".concat(rangeWidth * 100, "%")
-  };
-  var classes = classNames('euiRangeHighlight', {
-    'euiRangeHighlight--hasTicks': showTicks,
-    'euiRangeHighlight--compressed': compressed
-  }, className);
-  var progressClasses = classNames('euiRangeHighlight__progress', {
-    'euiRangeHighlight__progress--hasFocus': hasFocus
-  });
+      onClick = _ref.onClick,
+      levels = _ref.levels;
+  // Calculate the width of the range based on value
+  var leftPosition = useMemo(function () {
+    return (lowerValue - min) / (max - min);
+  }, [lowerValue, min, max]);
+  var rangeWidth = useMemo(function () {
+    return (upperValue - lowerValue) / (max - min);
+  }, [upperValue, lowerValue, min, max]);
+  var classes = classNames('euiRangeHighlight', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiRangeHighlightStyles(euiTheme);
+  var cssStyles = [styles.euiRangeHighlight, showTicks && styles.hasTicks];
+  var progressStyles = euiRangeHighlightProgressStyles(euiTheme);
+  var cssProgressStyles = [progressStyles.euiRangeHighlight__progress];
+  var progressStyle = useMemo(function () {
+    return logicalStyles({
+      background: background,
+      marginLeft: "".concat(leftPosition * 100, "%"),
+      width: "".concat(rangeWidth * 100, "%")
+    });
+  }, [background, leftPosition, rangeWidth]);
+  var levelsWrapperStyles = euiRangeHighlightLevelsWrapperStyles(euiTheme);
+  var cssLevelsWrapperStyles = [levelsWrapperStyles.euiRangeHighlight__levelsWrapper];
+  var levelsWrapperStyle = useMemo(function () {
+    return logicalStyles({
+      marginLeft: "".concat(leftPosition * 100, "%"),
+      width: "".concat(rangeWidth * 100, "%")
+    });
+  }, [leftPosition, rangeWidth]);
+  var levelsStyles = euiRangeHighlightLevelsStyles(euiTheme);
+  var cssLevelsStyles = [levelsStyles.euiRangeHighlight__levels];
+  var levelsStyle = useMemo(function () {
+    return logicalStyles({
+      left: "-".concat(trackWidth * leftPosition, "px"),
+      width: "".concat(trackWidth, "px")
+    });
+  }, [trackWidth, leftPosition]);
   return ___EmotionJSX("div", {
     className: classes,
+    css: cssStyles,
     onClick: onClick
-  }, ___EmotionJSX("div", {
-    className: progressClasses,
-    style: rangeWidthStyle
-  }));
+  }, (levels && levels.length === 0 || !levels) && ___EmotionJSX("div", {
+    className: "euiRangeHighlight__progress",
+    css: cssProgressStyles,
+    style: progressStyle
+  }), levels && !!levels.length && ___EmotionJSX("div", {
+    css: cssLevelsWrapperStyles,
+    style: levelsWrapperStyle
+  }, ___EmotionJSX(EuiRangeLevels, {
+    css: cssLevelsStyles,
+    style: levelsStyle,
+    levels: levels,
+    max: max,
+    min: min,
+    showTicks: showTicks,
+    trackWidth: trackWidth
+  })));
 };

package/optimize/es/components/form/range/range_highlight.styles.js

@@ -0,0 +1,34 @@
+/*
+ * 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 { euiRangeVariables } from './range.styles';
+export var euiRangeHighlightStyles = function euiRangeHighlightStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return {
+    euiRangeHighlight: /*#__PURE__*/css("position:absolute;block-size:", range.highlightHeight, ";inset-inline-start:0;inline-size:100%;overflow:hidden;z-index:", range.highlightZIndex, ";pointer-events:none;inset-block-start:", range.trackTopPositionWithoutTicks, ";;label:euiRangeHighlight;"),
+    hasTicks: /*#__PURE__*/css("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
+  };
+};
+export var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return {
+    euiRangeHighlight__progress: /*#__PURE__*/css("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";border-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
+  };
+};
+export var euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {
+  var euiRangeVars = euiRangeVariables(euiThemeContext);
+  return {
+    euiRangeHighlight__levelsWrapper: /*#__PURE__*/css("block-size:", euiRangeVars.trackHeight, ";position:relative;overflow:hidden;;label:euiRangeHighlight__levelsWrapper;")
+  };
+};
+export var euiRangeHighlightLevelsStyles = function euiRangeHighlightLevelsStyles(euiThemeContext) {
+  var euiRangeVars = euiRangeVariables(euiThemeContext);
+  return {
+    euiRangeHighlight__levels: /*#__PURE__*/css("background:transparent;block-size:", euiRangeVars.trackHeight, ";inset-block-start:0;;label:euiRangeHighlight__levels;")
+  };
+};

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

@@ -9,8 +9,11 @@ var _excluded = ["min", "max", "step", "value", "disabled", "compressed", "onCha
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useEuiTheme } from '../../../services';
+import { logicalStyles } from '../../../global_styling';
 import { EuiFieldNumber } from '../field_number';
+import { euiRangeInputStyles } from './range_input.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRangeInput = function EuiRangeInput(_ref) {
   var min = _ref.min,
@@ -32,12 +35,18 @@ export var EuiRangeInput = function EuiRangeInput(_ref) {
   // Chrome will properly size the input based on the max value, but FF does not.
   // Calculate the width of the input based on highest number of characters.
   // Add 2 to accommodate for input stepper
-  var widthStyle = autoSize ? {
-    width: "".concat(digitTolerance / 1.25 + 2, "em")
-  } : undefined;
+  var widthStyle = useMemo(function () {
+    return autoSize ? logicalStyles({
+      width: "".concat(digitTolerance / 1.25 + 2, "em")
+    }) : {};
+  }, [autoSize, digitTolerance]);
+  var euiTheme = useEuiTheme();
+  var styles = euiRangeInputStyles(euiTheme);
+  var cssStyles = [styles.euiRangeInput];
   return ___EmotionJSX(EuiFieldNumber, _extends({
     name: name,
     className: "euiRangeInput euiRangeInput--".concat(side),
+    css: cssStyles,
     min: Number(min),
     max: Number(max),
     step: step,

package/optimize/es/components/form/range/range_input.styles.js

@@ -0,0 +1,14 @@
+/*
+ * 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';
+export var euiRangeInputStyles = function euiRangeInputStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiRangeInput: /*#__PURE__*/css("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &{margin:0;inline-size:100%;};label:euiRangeInput;")
+  };
+};