@elastic/eui 70.3.0 → 71.0.0

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

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiRange = void 0;
+exports.EuiRangeClass = exports.EuiRange = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -35,7 +35,11 @@ var _number = require("../../../services/number");
 
 var _popover = require("../../popover");
 
-var _accessibility = require("../../../services/accessibility");
+var _services = require("../../../services/");
+
+var _eui_form_context = require("../eui_form_context");
+
+var _range_levels_colors = require("./range_levels_colors");
 
 var _range_highlight = require("./range_highlight");
 
@@ -51,11 +55,11 @@ var _range_track = require("./range_track");
 
 var _range_wrapper = require("./range_wrapper");
 
-var _eui_form_context = require("../eui_form_context");
+var _range = require("./range.styles");
 
 var _react2 = require("@emotion/react");
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -65,15 +69,15 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-var EuiRange = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EuiRange, _Component);
+var EuiRangeClass = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EuiRangeClass, _Component);
 
-  var _super = _createSuper(EuiRange);
+  var _super = _createSuper(EuiRangeClass);
 
-  function EuiRange() {
+  function EuiRangeClass() {
     var _this;
 
-    (0, _classCallCheck2.default)(this, EuiRange);
+    (0, _classCallCheck2.default)(this, EuiRangeClass);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
@@ -82,7 +86,7 @@ var EuiRange = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preventPopoverClose", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      id: _this.props.id || (0, _accessibility.htmlIdGenerator)()(),
+      id: _this.props.id || (0, _services.htmlIdGenerator)()(),
       isPopoverOpen: false
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (e) {
@@ -129,7 +133,7 @@ var EuiRange = /*#__PURE__*/function (_Component) {
     return _this;
   }
 
-  (0, _createClass2.default)(EuiRange, [{
+  (0, _createClass2.default)(EuiRangeClass, [{
     key: "isValid",
     get: function get() {
       return (0, _number.isWithinRange)(this.props.min, this.props.max, this.props.value || '');
@@ -168,9 +172,9 @@ 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 = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       var id = this.state.id;
       var digitTolerance = Math.max(String(min).length, String(max).length);
@@ -195,11 +199,13 @@ var EuiRange = /*#__PURE__*/function (_Component) {
         isInvalid: isInvalid,
         autoSize: !showInputOnly
       }, rest)) : null;
-      var classes = (0, _classnames.default)('euiRange', {
-        'euiRange--hasInput': showInput
-      }, className);
+      var classes = (0, _classnames.default)('euiRange', className);
+      var styles = (0, _range.euiRangeStyles)(theme);
+      var cssStyles = [styles.euiRange, showInput && styles.hasInput];
+      var thumbColor = levels && (0, _range_levels_colors.getLevelColor)(levels, Number(value));
       var theRange = (0, _react2.jsx)(_range_wrapper.EuiRangeWrapper, {
         className: classes,
+        css: cssStyles,
         fullWidth: fullWidth,
         compressed: compressed
       }, showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
@@ -217,49 +223,52 @@ var EuiRange = /*#__PURE__*/function (_Component) {
         levels: levels,
         onChange: this.handleOnChange,
         value: value,
-        "aria-hidden": showInput === true
-      }, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
-        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 && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
-        compressed: compressed,
-        showTicks: showTicks,
-        min: Number(min),
-        max: Number(max),
-        lowerValue: Number(min),
-        upperValue: Number(value)
-      }), showValue && !!String(value).length && (0, _react2.jsx)(_range_tooltip.EuiRangeTooltip, {
-        compressed: compressed,
-        value: value,
-        max: max,
-        min: min,
-        name: name,
-        showTicks: showTicks,
-        valuePrepend: valuePrepend,
-        valueAppend: valueAppend
-      })), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
+        "aria-hidden": showInput === true,
+        showRange: showRange
+      }, function (trackWidth) {
+        return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
+          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 && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
+          showTicks: showTicks,
+          min: Number(min),
+          max: Number(max),
+          lowerValue: Number(min),
+          upperValue: Number(value),
+          levels: levels,
+          trackWidth: trackWidth
+        }), showValue && !!String(value).length && (0, _react2.jsx)(_range_tooltip.EuiRangeTooltip, {
+          value: value,
+          max: max,
+          min: min,
+          name: name,
+          showTicks: showTicks,
+          valuePrepend: valuePrepend,
+          valueAppend: valueAppend
+        }));
+      }), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
         side: "max",
         disabled: disabled
       }, max), showInput && !showInputOnly && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("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 ? (0, _react2.jsx)(_popover.EuiInputPopover, {
         className: "euiRange__popover",
@@ -273,12 +282,12 @@ var EuiRange = /*#__PURE__*/function (_Component) {
       return thePopover ? thePopover : theRange;
     }
   }]);
-  return EuiRange;
+  return EuiRangeClass;
 }(_react.Component);
 
-exports.EuiRange = EuiRange;
-(0, _defineProperty2.default)(EuiRange, "contextType", _eui_form_context.FormContext);
-(0, _defineProperty2.default)(EuiRange, "defaultProps", {
+exports.EuiRangeClass = EuiRangeClass;
+(0, _defineProperty2.default)(EuiRangeClass, "contextType", _eui_form_context.FormContext);
+(0, _defineProperty2.default)(EuiRangeClass, "defaultProps", {
   min: 0,
   max: 100,
   step: 1,
@@ -290,4 +299,6 @@ exports.EuiRange = EuiRange;
   showTicks: false,
   showValue: false,
   levels: []
-});
+});
+var EuiRange = (0, _services.withEuiTheme)(EuiRangeClass);
+exports.EuiRange = EuiRange;

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

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeVariables = exports.euiRangeTrackPerBrowser = exports.euiRangeThumbStyle = exports.euiRangeThumbPerBrowser = exports.euiRangeThumbFocusBoxShadow = exports.euiRangeThumbFocus = exports.euiRangeThumbBoxShadow = exports.euiRangeThumbBorder = exports.euiRangeStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
+
+var _form = require("../form.styles");
+
+/*
+ * 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.
+ */
+var euiRangeVariables = function euiRangeVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var trackHeight = '6px';
+  var thumbHeight = euiTheme.size.base;
+  var thumbWidth = euiTheme.size.base;
+  var form = (0, _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: (0, _global_styling.mathWithUnits)([thumbHeight, trackHeight], function (x, y) {
+      return (x - y) / 2;
+    }),
+    trackBottomPositionWithTicks: (0, _global_styling.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
+  };
+};
+
+exports.euiRangeVariables = euiRangeVariables;
+
+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  ");
+};
+
+exports.euiRangeTrackPerBrowser = euiRangeTrackPerBrowser;
+
+var euiRangeThumbBorder = function euiRangeThumbBorder(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    border: ".concat(range.thumbBorderWidth, " solid ").concat(range.thumbBorderColor, ";\n  ");
+};
+
+exports.euiRangeThumbBorder = euiRangeThumbBorder;
+
+var euiRangeThumbBoxShadow = function euiRangeThumbBoxShadow(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var shadowColor = "rgba(".concat((0, _services.hexToRgb)(euiTheme.colors.shadow), ", .2)");
+  var range = euiRangeVariables(euiThemeContext);
+  var borderWidth = range.thumbBorderWidth;
+  var halfBorderWidth = (0, _global_styling.mathWithUnits)(borderWidth, function (x) {
+    return x / 2;
+  });
+  var largeBorderWidth = (0, _global_styling.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  ");
+};
+
+exports.euiRangeThumbBoxShadow = euiRangeThumbBoxShadow;
+
+var euiRangeThumbFocusBoxShadow = function euiRangeThumbFocusBoxShadow(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return "\n    box-shadow: 0 0 0 ".concat(range.thumbBorderWidth, " ").concat(range.focusColor, ";\n  ");
+};
+
+exports.euiRangeThumbFocusBoxShadow = euiRangeThumbFocusBoxShadow;
+
+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  ");
+};
+
+exports.euiRangeThumbStyle = euiRangeThumbStyle;
+
+var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
+  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb  { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
+};
+
+exports.euiRangeThumbPerBrowser = euiRangeThumbPerBrowser;
+
+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  ");
+};
+
+exports.euiRangeThumbFocus = euiRangeThumbFocus;
+
+var euiRangeStyles = function euiRangeStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    // Base
+    euiRange: /*#__PURE__*/(0, _react.css)(";label:euiRange;"),
+    hasInput: /*#__PURE__*/(0, _react.css)(";label:hasInput;"),
+    euiRange__horizontalSpacer: /*#__PURE__*/(0, _react.css)("inline-size:", euiTheme.size.base, ";;label:euiRange__horizontalSpacer;"),
+    euiRange__slimHorizontalSpacer: /*#__PURE__*/(0, _react.css)("inline-size:", euiTheme.size.s, ";;label:euiRange__slimHorizontalSpacer;")
+  };
+};
+
+exports.euiRangeStyles = euiRangeStyles;

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,55 +15,65 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _services = require("../../../services");
 
+var _global_styling = require("../../../global_styling");
+
+var _range_draggable = require("./range_draggable.styles");
+
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "compressed", "onChange", "min", "max", "disabled", "value"];
+var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "onChange", "min", "max", "disabled", "value"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 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,
       disabled = _ref.disabled,
       value = _ref.value,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var outerStyle = {
-    left: "calc(".concat(lowerPosition, ")"),
-    right: "calc(100% - ".concat(upperPosition, " - 16px)")
-  };
-  var classes = (0, _classnames.default)('euiRangeDraggable', {
-    'euiRangeDraggable--hasTicks': showTicks,
-    'euiRangeDraggable--compressed': compressed,
-    'euiRangeDraggable--disabled': disabled
-  }, className);
-
-  var handleChange = function handleChange(_ref2, isFirstInteraction) {
+  var euiTheme = (0, _services.useEuiTheme)();
+  var outerStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)({
+      left: lowerPosition,
+      right: "calc(100% - ".concat(upperPosition, " - ").concat(euiTheme.euiTheme.size.base, ")")
+    });
+  }, [lowerPosition, upperPosition, euiTheme.euiTheme.size.base]);
+  var handleChange = (0, _react.useCallback)(function (_ref2, isFirstInteraction) {
     var x = _ref2.x;
     if (disabled) return;
     onChange(x, isFirstInteraction);
-  };
+  }, [disabled, onChange]);
 
   var _useMouseMove = (0, _services.useMouseMove)(handleChange),
       _useMouseMove2 = (0, _slicedToArray2.default)(_useMouseMove, 2),
       handleMouseDown = _useMouseMove2[0],
       handleInteraction = _useMouseMove2[1];
 
+  var classes = (0, _classnames.default)('euiRangeDraggable', className);
+  var styles = (0, _range_draggable.euiRangeDraggableStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeDraggable, showTicks && styles.hasTicks, disabled && styles.disabled];
+  var innerStyles = (0, _range_draggable.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
@@ -69,7 +81,8 @@ var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     style: outerStyle
   }, commonProps, rest), (0, _react2.jsx)("div", {
-    className: "euiRangeDraggle__inner",
+    className: "euiRangeDraggable__inner",
+    css: cssInnerStyles,
     onMouseDown: handleMouseDown,
     onTouchStart: handleInteraction,
     onTouchMove: handleInteraction

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

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeDraggableStyles = exports.euiRangeDraggableInnerStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../../global_styling");
+
+var _range = require("./range.styles");
+
+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)."; }
+
+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__
+};
+
+var euiRangeDraggableStyles = function euiRangeDraggableStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeDraggable: /*#__PURE__*/(0, _react.css)("block-size:", (0, _global_styling.mathWithUnits)(range.height, function (x) {
+      return x / 2;
+    }), ";position:absolute;inset-block-start:", (0, _global_styling.mathWithUnits)(range.height, function (x) {
+      return x / 4;
+    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{outline:none;~.euiRangeThumb{", (0, _range.euiRangeThumbFocus)(euiThemeContext), ";}};label:euiRangeDraggable;"),
+    hasTicks: _ref2,
+    disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;")
+  };
+};
+
+exports.euiRangeDraggableStyles = euiRangeDraggableStyles;
+
+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__
+};
+
+var euiRangeDraggableInnerStyles = function euiRangeDraggableInnerStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeDraggable__inner: /*#__PURE__*/(0, _react.css)("position:absolute;inset-inline:", range.thumbWidth, ";inset-block:0;;label:euiRangeDraggable__inner;"),
+    enabled: _ref,
+    disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;")
+  };
+};
+
+exports.euiRangeDraggableInnerStyles = euiRangeDraggableInnerStyles;

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

@@ -2,17 +2,31 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiRangeHighlight = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
+
+var _range_highlight = require("./range_highlight.styles");
+
+var _range_levels = require("./range_levels");
+
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -22,38 +36,71 @@ var _react2 = require("@emotion/react");
  */
 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 = (0, _classnames.default)('euiRangeHighlight', {
-    'euiRangeHighlight--hasTicks': showTicks,
-    'euiRangeHighlight--compressed': compressed
-  }, className);
-  var progressClasses = (0, _classnames.default)('euiRangeHighlight__progress', {
-    'euiRangeHighlight__progress--hasFocus': hasFocus
-  });
+      onClick = _ref.onClick,
+      levels = _ref.levels;
+  // Calculate the width of the range based on value
+  var leftPosition = (0, _react.useMemo)(function () {
+    return (lowerValue - min) / (max - min);
+  }, [lowerValue, min, max]);
+  var rangeWidth = (0, _react.useMemo)(function () {
+    return (upperValue - lowerValue) / (max - min);
+  }, [upperValue, lowerValue, min, max]);
+  var classes = (0, _classnames.default)('euiRangeHighlight', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _range_highlight.euiRangeHighlightStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeHighlight, showTicks && styles.hasTicks];
+  var progressStyles = (0, _range_highlight.euiRangeHighlightProgressStyles)(euiTheme);
+  var cssProgressStyles = [progressStyles.euiRangeHighlight__progress];
+  var progressStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)({
+      background: background,
+      marginLeft: "".concat(leftPosition * 100, "%"),
+      width: "".concat(rangeWidth * 100, "%")
+    });
+  }, [background, leftPosition, rangeWidth]);
+  var levelsWrapperStyles = (0, _range_highlight.euiRangeHighlightLevelsWrapperStyles)(euiTheme);
+  var cssLevelsWrapperStyles = [levelsWrapperStyles.euiRangeHighlight__levelsWrapper];
+  var levelsWrapperStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)({
+      marginLeft: "".concat(leftPosition * 100, "%"),
+      width: "".concat(rangeWidth * 100, "%")
+    });
+  }, [leftPosition, rangeWidth]);
+  var levelsStyles = (0, _range_highlight.euiRangeHighlightLevelsStyles)(euiTheme);
+  var cssLevelsStyles = [levelsStyles.euiRangeHighlight__levels];
+  var levelsStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)({
+      left: "-".concat(trackWidth * leftPosition, "px"),
+      width: "".concat(trackWidth, "px")
+    });
+  }, [trackWidth, leftPosition]);
   return (0, _react2.jsx)("div", {
     className: classes,
+    css: cssStyles,
     onClick: onClick
-  }, (0, _react2.jsx)("div", {
-    className: progressClasses,
-    style: rangeWidthStyle
-  }));
+  }, (levels && levels.length === 0 || !levels) && (0, _react2.jsx)("div", {
+    className: "euiRangeHighlight__progress",
+    css: cssProgressStyles,
+    style: progressStyle
+  }), levels && !!levels.length && (0, _react2.jsx)("div", {
+    css: cssLevelsWrapperStyles,
+    style: levelsWrapperStyle
+  }, (0, _react2.jsx)(_range_levels.EuiRangeLevels, {
+    css: cssLevelsStyles,
+    style: levelsStyle,
+    levels: levels,
+    max: max,
+    min: min,
+    showTicks: showTicks,
+    trackWidth: trackWidth
+  })));
 };
 
 exports.EuiRangeHighlight = EuiRangeHighlight;