@elastic/eui 89.1.0 → 90.0.0

package/optimize/lib/components/control_bar/control_bar.js

@@ -17,6 +17,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../services");
 var _accessibility = require("../accessibility");
 var _breadcrumbs = require("../breadcrumbs");
 var _button = require("../button");
@@ -153,8 +154,7 @@ var EuiControlBar = /*#__PURE__*/function (_Component) {
             {
               var controlType = control.controlType,
                 id = control.id,
-                _control$color = control.color,
-                color = _control$color === void 0 ? 'ghost' : _control$color,
+                color = control.color,
                 label = control.label,
                 _className = control.className,
                 _rest = (0, _objectWithoutProperties2.default)(control, _excluded2);
@@ -172,8 +172,8 @@ var EuiControlBar = /*#__PURE__*/function (_Component) {
                 _id = control.id,
                 iconType = control.iconType,
                 _className2 = control.className,
-                _control$color2 = control.color,
-                _color = _control$color2 === void 0 ? 'ghost' : _control$color2,
+                _control$color = control.color,
+                _color = _control$color === void 0 ? 'text' : _control$color,
                 onClick = control.onClick,
                 href = control.href,
                 _rest2 = (0, _objectWithoutProperties2.default)(control, _excluded3);
@@ -249,25 +249,30 @@ var EuiControlBar = /*#__PURE__*/function (_Component) {
         token: "euiControlBar.screenReaderHeading",
         default: "Page level controls"
       }, function (screenReaderHeading) {
-        return (
-          // Though it would be better to use aria-labelledby than aria-label and not repeat the same string twice
-          // A bug in voiceover won't list some landmarks in the rotor without an aria-label
-          (0, _react2.jsx)("section", (0, _extends2.default)({
-            className: classes,
-            "aria-label": landmarkHeading ? landmarkHeading : screenReaderHeading
-          }, rest, {
-            style: styles
-          }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("h2", null, landmarkHeading ? landmarkHeading : screenReaderHeading)), (0, _react2.jsx)("div", {
-            className: "euiControlBar__controls",
-            ref: function ref(node) {
-              _this2.bar = node;
-            }
-          }, controls.map(function (control, index) {
-            return controlItem(control, index);
-          })), _this2.props.showContent ? (0, _react2.jsx)("div", {
-            className: "euiControlBar__content"
-          }, children) : null)
-        );
+        return (0, _react2.jsx)(_services.EuiThemeProvider, {
+          colorMode: "dark",
+          wrapperProps: {
+            cloneElement: true
+          }
+        }, (0, _react2.jsx)("section", (0, _extends2.default)({
+          className: classes
+          // Though it would be better to use aria-labelledby than aria-label
+          // and not repeat the same string twice, a bug in voiceover won't list
+          // some landmarks in the rotor without an aria-label
+          ,
+          "aria-label": landmarkHeading ? landmarkHeading : screenReaderHeading
+        }, rest, {
+          style: styles
+        }), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("h2", null, landmarkHeading ? landmarkHeading : screenReaderHeading)), (0, _react2.jsx)("div", {
+          className: "euiControlBar__controls",
+          ref: function ref(node) {
+            _this2.bar = node;
+          }
+        }, controls.map(function (control, index) {
+          return controlItem(control, index);
+        })), _this2.props.showContent ? (0, _react2.jsx)("div", {
+          className: "euiControlBar__content"
+        }, children) : null));
       });
       return position === 'fixed' ? (0, _react2.jsx)(_portal.EuiPortal, null, controlBar, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
         "aria-live": "assertive"

package/optimize/lib/components/datagrid/body/data_grid_row_manager.js

@@ -1,10 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useRowManager = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = require("react");
+var _services = require("../../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,14 +29,12 @@ var useRowManager = function useRowManager(_ref) {
     if (rowElement == null) {
       rowElement = document.createElement('div');
       rowElement.setAttribute('role', 'row');
-      rowElement.dataset.gridRowIndex = String(rowIndex); // Row index from data, affected by sorting/pagination
-      rowElement.dataset.gridVisibleRowIndex = String(visibleRowIndex); // Affected by sorting/pagination
+      rowElement.dataset.gridRowIndex = String(rowIndex); // Row index from data, not affected by sorting/pagination
       rowElement.classList.add('euiDataGridRow');
       if (rowClasses !== null && rowClasses !== void 0 && rowClasses[rowIndex]) {
-        rowElement.classList.add(rowClasses[rowIndex]);
+        var _rowElement$classList;
+        (_rowElement$classList = rowElement.classList).add.apply(_rowElement$classList, (0, _toConsumableArray2.default)(rowClasses[rowIndex].split(' ')));
       }
-      var isOddRow = visibleRowIndex % 2 !== 0;
-      if (isOddRow) rowElement.classList.add('euiDataGridRow--striped');
       rowElement.style.position = 'absolute';
       rowElement.style.left = '0';
       rowElement.style.right = '0';
@@ -62,6 +63,17 @@ var useRowManager = function useRowManager(_ref) {
       });
     }
 
+    // Ensure the row's visible row index & striping update correctly on sort & pagination
+    if (rowElement.dataset.gridVisibleRowIndex !== String(visibleRowIndex)) {
+      rowElement.dataset.gridVisibleRowIndex = String(visibleRowIndex);
+      var isOddRow = visibleRowIndex % 2 !== 0;
+      if (isOddRow) {
+        rowElement.classList.add('euiDataGridRow--striped');
+      } else {
+        rowElement.classList.remove('euiDataGridRow--striped');
+      }
+    }
+
     // Ensure that the row's dimensions are always correct by having each cell update position styles
     rowElement.style.top = top;
     rowElement.style.height = "".concat(height, "px");
@@ -69,13 +81,16 @@ var useRowManager = function useRowManager(_ref) {
   }, [rowClasses, innerGridRef]);
 
   // Update row classes dynamically whenever a new prop is passed in
-  (0, _react.useEffect)(function () {
+  (0, _services.useUpdateEffect)(function () {
     if (rowClasses) {
       rowIdToElements.current.forEach(function (rowElement, rowIndex) {
+        var euiClasses = Array.from(rowElement.classList).filter(function (className) {
+          return className.startsWith('euiDataGridRow');
+        }).join(' ');
         if (rowClasses[rowIndex]) {
-          rowElement.classList.value = "euiDataGridRow ".concat(rowClasses[rowIndex]);
+          rowElement.classList.value = "".concat(euiClasses, " ").concat(rowClasses[rowIndex]);
         } else {
-          rowElement.classList.value = 'euiDataGridRow'; // Clear any added classes
+          rowElement.classList.value = euiClasses; // Clear any added classes
         }
       });
     }

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

@@ -11,12 +11,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _validatable_control = require("../validatable_control");
 var _form_control_layout = require("../form_control_layout");
 var _num_icons = require("../form_control_layout/_num_icons");
 var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "step", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp", "onBlur"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "step", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -52,8 +53,9 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
     _onKeyUp = props.onKeyUp,
-    _onBlur = props.onBlur,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var _inputRef = (0, _react.useRef)(null);
+  var combinedRefs = (0, _services.useCombinedRefs)([_inputRef, inputRef]);
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
@@ -68,6 +70,13 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     var isInvalid = !inputEl.validity.valid || undefined;
     setIsNativelyInvalid(isInvalid);
   }, []);
+
+  // Re-check validity whenever props that might affect validity are updated
+  (0, _react.useEffect)(function () {
+    if (_inputRef.current) {
+      checkNativeValidity(_inputRef.current);
+    }
+  }, [value, min, max, step, checkNativeValidity]);
   var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -92,18 +101,13 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
-    ref: inputRef,
+    ref: combinedRefs,
     "aria-invalid": isInvalid || isNativelyInvalid,
     onKeyUp: function onKeyUp(e) {
       // Note that we can't use `onChange` because browsers don't emit change events
       // for invalid text - see https://github.com/facebook/react/issues/16554
       _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
       checkNativeValidity(e.currentTarget);
-    },
-    onBlur: function onBlur(e) {
-      // Browsers can also set/determine validity (e.g. when `step` is undefined) on focus blur
-      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
-      checkNativeValidity(e.currentTarget);
     }
   }, rest)));
   if (controlOnly) {

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

@@ -41,8 +41,10 @@ var EuiFieldPassword = function EuiFieldPassword(props) {
     isInvalid = props.isInvalid,
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
-    isLoading = props.isLoading,
-    compressed = props.compressed,
+    _props$isLoading = props.isLoading,
+    isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
+    _props$compressed = props.compressed,
+    compressed = _props$compressed === void 0 ? false : _props$compressed,
     _inputRef = props.inputRef,
     prepend = props.prepend,
     append = props.append,
@@ -131,9 +133,4 @@ var EuiFieldPassword = function EuiFieldPassword(props) {
     ref: setInputRef
   }, rest))));
 };
-exports.EuiFieldPassword = EuiFieldPassword;
-EuiFieldPassword.defaultProps = {
-  value: undefined,
-  isLoading: false,
-  compressed: false
-};
+exports.EuiFieldPassword = EuiFieldPassword;

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

@@ -64,17 +64,35 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       id: _this.props.id || (0, _services.htmlIdGenerator)()(),
       rangeSliderRefAvailable: false,
       isPopoverOpen: false,
-      rangeWidth: undefined,
+      rangeWidth: 0,
       isVisible: true // used to trigger a rerender if initial element width is 0
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preventPopoverClose", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rangeSliderRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleRangeSliderRefUpdate", function (ref) {
       _this.rangeSliderRef = ref;
-      _this.setState({
-        rangeSliderRefAvailable: !!ref,
-        rangeWidth: !!ref ? ref.clientWidth : null
-      });
+      if (ref) {
+        if (_this.isInPopover) {
+          // Wait a tick for popover rendering to settle
+          requestAnimationFrame(function () {
+            _this.setState({
+              rangeSliderRefAvailable: true,
+              rangeWidth: ref.clientWidth
+            });
+          });
+        } else {
+          // If not in a popover, no need to wait
+          _this.setState({
+            rangeSliderRefAvailable: true,
+            rangeWidth: ref.clientWidth
+          });
+        }
+      } else {
+        _this.setState({
+          rangeSliderRefAvailable: false,
+          rangeWidth: 0
+        });
+      }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "leftPosition", 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dragAcc", 0);
@@ -184,7 +202,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           }
           lower = _this._handleKeyDown(lower, event);
       }
-      if (lower >= _this.upperValue || lower < _this.props.min) return;
+      if (lower >= Number(_this.upperValue) || lower < _this.props.min) return;
       _this._handleOnChange(lower, _this.upperValue, event);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleUpperKeyDown", function (event) {
@@ -201,7 +219,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           }
           upper = _this._handleKeyDown(upper, event);
       }
-      if (upper <= _this.lowerValue || upper > _this.props.max) return;
+      if (upper <= Number(_this.lowerValue) || upper > _this.props.max) return;
       _this._handleOnChange(_this.lowerValue, upper, event);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleDraggableKeyDown", function (event) {
@@ -214,12 +232,12 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
           lower = _this._handleKeyDown(lower, event);
           upper = _this._handleKeyDown(upper, event);
       }
-      if (lower >= _this.upperValue || lower < _this.props.min) return;
-      if (upper <= _this.lowerValue || upper > _this.props.max) return;
+      if (lower >= Number(_this.upperValue) || lower < _this.props.min) return;
+      if (upper <= Number(_this.lowerValue) || upper > _this.props.max) return;
       _this._handleOnChange(lower, upper, event);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calculateThumbPositionStyle", function (value, width) {
-      var trackWidth = _this.props.showInput === 'inputWithPopover' && !!width ? width : _this.rangeSliderRef.clientWidth;
+      var trackWidth = _this.isInPopover && !!width ? width : _this.state.rangeWidth;
       var position = (0, _utils.calculateThumbPosition)(value, _this.props.min, _this.props.max, trackWidth);
       return {
         left: "".concat(position, "%")
@@ -268,9 +286,11 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onResize", function (width) {
       var _this$props$inputPopo, _this$props$inputPopo2;
-      _this.setState({
-        rangeWidth: width
-      });
+      if (_this.rangeSliderRef) {
+        _this.setState({
+          rangeWidth: _this.rangeSliderRef.clientWidth
+        });
+      }
       (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNearestStep", function (value) {
@@ -309,6 +329,11 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     return _this;
   }
   (0, _createClass2.default)(EuiDualRangeClass, [{
+    key: "isInPopover",
+    get: function get() {
+      return this.props.showInput === 'inputWithPopover';
+    }
+  }, {
     key: "lowerValue",
     get: function get() {
       return this.props.value ? this.props.value[0] : this.props.min;
@@ -336,7 +361,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.rangeSliderRef && this.rangeSliderRef.clientWidth === 0) {
+      var _this$rangeSliderRef;
+      if (((_this$rangeSliderRef = this.rangeSliderRef) === null || _this$rangeSliderRef === void 0 ? void 0 : _this$rangeSliderRef.clientWidth) === 0) {
         this.setState({
           isVisible: false
         });
@@ -345,8 +371,8 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate() {
-      var _this$rangeSliderRef;
-      if ((_this$rangeSliderRef = this.rangeSliderRef) !== null && _this$rangeSliderRef !== void 0 && _this$rangeSliderRef.clientWidth && !this.state.isVisible) {
+      var _this$rangeSliderRef2;
+      if ((_this$rangeSliderRef2 = this.rangeSliderRef) !== null && _this$rangeSliderRef2 !== void 0 && _this$rangeSliderRef2.clientWidth && !this.state.isVisible) {
         this.setState({
           isVisible: true
         });
@@ -395,7 +421,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var min = minProps;
       var max = maxProps;
       var id = this.state.id;
-      var showInputOnly = showInput === 'inputWithPopover';
+      var showInputOnly = this.isInPopover;
       var canShowDropdown = showInputOnly && !readOnly && !disabled;
       var rangeStyles = (0, _range.euiRangeStyles)(theme);
       var minInput = !!showInput ? (0, _react2.jsx)(_range_input.EuiRangeInput
@@ -543,6 +569,7 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         side: "min",
         disabled: disabled
       }, min), (0, _react2.jsx)(_range_track.EuiRangeTrack, {
+        trackWidth: this.state.rangeWidth,
         compressed: compressed,
         disabled: disabled,
         max: max,
@@ -556,74 +583,72 @@ var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         value: value,
         "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)({
-          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 && (0, _react2.jsx)(_react.default.Fragment, null, isDraggable && _this2.isValid && (0, _react2.jsx)(_range_draggable.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": showInputOnly ? undefined : _this2.props['aria-describedby'],
-          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
-        }), (0, _react2.jsx)(_range_thumb.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: (0, _global_styling.logicalStyles)(leftThumbStyles),
-          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
-          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
-        }), (0, _react2.jsx)(_range_thumb.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: (0, _global_styling.logicalStyles)(rightThumbStyles),
-          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
-          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
-        })), showRange && _this2.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
-          showTicks: showTicks,
-          min: Number(min),
-          max: Number(max),
-          lowerValue: Number(_this2.lowerValue),
-          upperValue: Number(_this2.upperValue),
-          levels: levels,
-          trackWidth: trackWidth
-        }));
-      }), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
+      }, (0, _react2.jsx)(_range_slider.EuiRangeSlider, (0, _extends2.default)({
+        className: "euiDualRange__slider",
+        css: dualRangeStyles.euiDualRange__slider,
+        ref: this.handleRangeSliderRefUpdate,
+        id: id,
+        name: name,
+        min: min,
+        max: max,
+        step: step,
+        disabled: disabled,
+        onChange: this.handleSliderChange,
+        showTicks: showTicks,
+        "aria-hidden": true,
+        tabIndex: -1,
+        showRange: showRange,
+        onFocus: _onFocus,
+        onBlur: _onBlur
+      }, rest)), this.state.rangeSliderRefAvailable && (0, _react2.jsx)(_react.default.Fragment, null, isDraggable && this.isValid && (0, _react2.jsx)(_range_draggable.EuiRangeDraggable, {
+        min: min,
+        max: max,
+        value: [this.lowerValue, this.upperValue],
+        disabled: disabled,
+        lowerPosition: leftThumbPosition.left,
+        upperPosition: rightThumbPosition.left,
+        showTicks: showTicks,
+        onChange: this.handleDrag,
+        onFocus: this.onThumbFocus,
+        onBlur: this.onThumbBlur,
+        onKeyDown: this.handleDraggableKeyDown,
+        "aria-describedby": showInputOnly ? undefined : this.props['aria-describedby'],
+        "aria-label": showInputOnly ? undefined : this.props['aria-label']
+      }), (0, _react2.jsx)(_range_thumb.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: (0, _global_styling.logicalStyles)(leftThumbStyles),
+        "aria-describedby": showInputOnly ? undefined : this.props['aria-describedby'],
+        "aria-label": showInputOnly ? undefined : this.props['aria-label']
+      }), (0, _react2.jsx)(_range_thumb.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: (0, _global_styling.logicalStyles)(rightThumbStyles),
+        "aria-describedby": showInputOnly ? undefined : this.props['aria-describedby'],
+        "aria-label": showInputOnly ? undefined : this.props['aria-label']
+      })), showRange && this.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
+        showTicks: showTicks,
+        min: Number(min),
+        max: Number(max),
+        lowerValue: Number(this.lowerValue),
+        upperValue: Number(this.upperValue),
+        levels: levels,
+        trackWidth: this.state.rangeWidth
+      })), showLabels && (0, _react2.jsx)(_range_label.EuiRangeLabel, {
         disabled: disabled
       }, max), showInput && !showInputOnly && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',

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

@@ -56,7 +56,8 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preventPopoverClose", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       id: _this.props.id || (0, _services.htmlIdGenerator)()(),
-      isPopoverOpen: false
+      isPopoverOpen: false,
+      trackWidth: 0
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnChange", function (e) {
       var isValid = (0, _number.isWithinRange)(_this.props.min, _this.props.max, e.currentTarget.value);
@@ -64,6 +65,11 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         _this.props.onChange(e, isValid);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "rangeSliderRef", function (ref) {
+      _this.setState({
+        trackWidth: (ref === null || ref === void 0 ? void 0 : ref.clientWidth) || 0
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputFocus", function (e) {
       if (_this.props.onFocus) {
         _this.props.onFocus(e);
@@ -177,6 +183,7 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         side: "min",
         disabled: disabled
       }, min), (0, _react2.jsx)(_range_track.EuiRangeTrack, {
+        trackWidth: this.state.trackWidth,
         disabled: disabled,
         compressed: compressed,
         max: max,
@@ -190,45 +197,45 @@ var EuiRangeClass = /*#__PURE__*/function (_Component) {
         value: value,
         "aria-hidden": !!showInput,
         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,
-          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, {
+      }, (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: this.handleOnChange,
+        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,
+        thumbColor: thumbColor
+      }, rest, {
+        ref: this.rangeSliderRef
+      })), showRange && this.isValid && (0, _react2.jsx)(_range_highlight.EuiRangeHighlight, {
+        showTicks: showTicks,
+        min: Number(min),
+        max: Number(max),
+        lowerValue: Number(min),
+        upperValue: Number(value),
+        levels: levels,
+        trackWidth: this.state.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", {