@elastic/eui 89.1.0 → 90.0.0

package/optimize/es/components/control_bar/control_bar.js

@@ -27,6 +27,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import classNames from 'classnames';
 import React, { Component } from 'react';
+import { EuiThemeProvider } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiBreadcrumbs } from '../breadcrumbs';
 import { EuiButton, EuiButtonIcon } from '../button';
@@ -161,8 +162,7 @@ export 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 = _objectWithoutProperties(control, _excluded2);
@@ -180,8 +180,8 @@ export 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 = _objectWithoutProperties(control, _excluded3);
@@ -257,25 +257,30 @@ export 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
-          ___EmotionJSX("section", _extends({
-            className: classes,
-            "aria-label": landmarkHeading ? landmarkHeading : screenReaderHeading
-          }, rest, {
-            style: styles
-          }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("h2", null, landmarkHeading ? landmarkHeading : screenReaderHeading)), ___EmotionJSX("div", {
-            className: "euiControlBar__controls",
-            ref: function ref(node) {
-              _this2.bar = node;
-            }
-          }, controls.map(function (control, index) {
-            return controlItem(control, index);
-          })), _this2.props.showContent ? ___EmotionJSX("div", {
-            className: "euiControlBar__content"
-          }, children) : null)
-        );
+        return ___EmotionJSX(EuiThemeProvider, {
+          colorMode: "dark",
+          wrapperProps: {
+            cloneElement: true
+          }
+        }, ___EmotionJSX("section", _extends({
+          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
+        }), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("h2", null, landmarkHeading ? landmarkHeading : screenReaderHeading)), ___EmotionJSX("div", {
+          className: "euiControlBar__controls",
+          ref: function ref(node) {
+            _this2.bar = node;
+          }
+        }, controls.map(function (control, index) {
+          return controlItem(control, index);
+        })), _this2.props.showContent ? ___EmotionJSX("div", {
+          className: "euiControlBar__content"
+        }, children) : null));
       });
       return position === 'fixed' ? ___EmotionJSX(EuiPortal, null, controlBar, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
         "aria-live": "assertive"

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

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,7 +7,8 @@
  * Side Public License, v 1.
  */
 
-import { useRef, useCallback, useEffect } from 'react';
+import { useRef, useCallback } from 'react';
+import { useUpdateEffect } from '../../../services';
 export var useRowManager = function useRowManager(_ref) {
   var innerGridRef = _ref.innerGridRef,
     rowClasses = _ref.rowClasses;
@@ -20,14 +22,12 @@ export 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, _toConsumableArray(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';
@@ -56,6 +56,17 @@ export 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");
@@ -63,13 +74,16 @@ export var useRowManager = function useRowManager(_ref) {
   }, [rowClasses, innerGridRef]);
 
   // Update row classes dynamically whenever a new prop is passed in
-  useEffect(function () {
+  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/es/components/form/field_number/field_number.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", "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
@@ -10,8 +10,9 @@ var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max",
  * Side Public License, v 1.
  */
 
-import React, { useState, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import classNames from 'classnames';
+import { useCombinedRefs } from '../../../services';
 import { EuiValidatableControl } from '../validatable_control';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { getFormControlClassNameForIconCount } from '../form_control_layout/_num_icons';
@@ -43,8 +44,9 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
     _onKeyUp = props.onKeyUp,
-    _onBlur = props.onBlur,
     rest = _objectWithoutProperties(props, _excluded);
+  var _inputRef = useRef(null);
+  var combinedRefs = useCombinedRefs([_inputRef, inputRef]);
 
   // Attempt to determine additional invalid state. The native number input
   // will set :invalid state automatically, but we need to also set
@@ -59,6 +61,13 @@ export var EuiFieldNumber = function EuiFieldNumber(props) {
     var isInvalid = !inputEl.validity.valid || undefined;
     setIsNativelyInvalid(isInvalid);
   }, []);
+
+  // Re-check validity whenever props that might affect validity are updated
+  useEffect(function () {
+    if (_inputRef.current) {
+      checkNativeValidity(_inputRef.current);
+    }
+  }, [value, min, max, step, checkNativeValidity]);
   var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -83,18 +92,13 @@ export 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/es/components/form/field_password/field_password.js

@@ -32,8 +32,10 @@ export 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,
@@ -121,9 +123,4 @@ export var EuiFieldPassword = function EuiFieldPassword(props) {
     value: value,
     ref: setInputRef
   }, rest))));
-};
-EuiFieldPassword.defaultProps = {
-  value: undefined,
-  isLoading: false,
-  compressed: false
 };

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

@@ -56,17 +56,35 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       id: _this.props.id || htmlIdGenerator()(),
       rangeSliderRefAvailable: false,
       isPopoverOpen: false,
-      rangeWidth: undefined,
+      rangeWidth: 0,
       isVisible: true // used to trigger a rerender if initial element width is 0
     });
     _defineProperty(_assertThisInitialized(_this), "preventPopoverClose", false);
     _defineProperty(_assertThisInitialized(_this), "rangeSliderRef", null);
     _defineProperty(_assertThisInitialized(_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
+        });
+      }
     });
     _defineProperty(_assertThisInitialized(_this), "leftPosition", 0);
     _defineProperty(_assertThisInitialized(_this), "dragAcc", 0);
@@ -176,7 +194,7 @@ export 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);
     });
     _defineProperty(_assertThisInitialized(_this), "handleUpperKeyDown", function (event) {
@@ -193,7 +211,7 @@ export 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);
     });
     _defineProperty(_assertThisInitialized(_this), "handleDraggableKeyDown", function (event) {
@@ -206,12 +224,12 @@ export 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);
     });
     _defineProperty(_assertThisInitialized(_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 = calculateThumbPosition(value, _this.props.min, _this.props.max, trackWidth);
       return {
         left: "".concat(position, "%")
@@ -260,9 +278,11 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_assertThisInitialized(_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);
     });
     _defineProperty(_assertThisInitialized(_this), "getNearestStep", function (value) {
@@ -301,6 +321,11 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     return _this;
   }
   _createClass(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;
@@ -328,7 +353,8 @@ export 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
         });
@@ -337,8 +363,8 @@ export 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
         });
@@ -387,7 +413,7 @@ export 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 = euiRangeStyles(theme);
       var minInput = !!showInput ? ___EmotionJSX(EuiRangeInput
@@ -535,6 +561,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         side: "min",
         disabled: disabled
       }, min), ___EmotionJSX(EuiRangeTrack, {
+        trackWidth: this.state.rangeWidth,
         compressed: compressed,
         disabled: disabled,
         max: max,
@@ -548,74 +575,72 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         value: value,
         "aria-hidden": showInput === true,
         showRange: showRange
-      }, function (trackWidth) {
-        return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiRangeSlider, _extends({
-          className: "euiDualRange__slider",
-          css: dualRangeStyles.euiDualRange__slider,
-          ref: _this2.handleRangeSliderRefUpdate,
-          id: id,
-          name: name,
-          min: min,
-          max: max,
-          step: step,
-          disabled: disabled,
-          onChange: _this2.handleSliderChange,
-          showTicks: showTicks,
-          "aria-hidden": true,
-          tabIndex: -1,
-          showRange: showRange,
-          onFocus: _onFocus,
-          onBlur: _onBlur
-        }, rest)), _this2.state.rangeSliderRefAvailable && ___EmotionJSX(React.Fragment, null, isDraggable && _this2.isValid && ___EmotionJSX(EuiRangeDraggable, {
-          min: min,
-          max: max,
-          value: [_this2.lowerValue, _this2.upperValue],
-          disabled: disabled,
-          lowerPosition: leftThumbPosition.left,
-          upperPosition: rightThumbPosition.left,
-          showTicks: showTicks,
-          onChange: _this2.handleDrag,
-          onFocus: _this2.onThumbFocus,
-          onBlur: _this2.onThumbBlur,
-          onKeyDown: _this2.handleDraggableKeyDown,
-          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
-          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
-        }), ___EmotionJSX(EuiRangeThumb, {
-          min: min,
-          max: Number(_this2.upperValue),
-          value: _this2.lowerValue,
-          disabled: disabled,
-          showTicks: showTicks,
-          showInput: !!showInput,
-          onKeyDown: _this2.handleLowerKeyDown,
-          onFocus: _this2.onThumbFocus,
-          onBlur: _this2.onThumbBlur,
-          style: logicalStyles(leftThumbStyles),
-          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
-          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
-        }), ___EmotionJSX(EuiRangeThumb, {
-          min: Number(_this2.lowerValue),
-          max: max,
-          value: _this2.upperValue,
-          disabled: disabled,
-          showTicks: showTicks,
-          showInput: !!showInput,
-          onKeyDown: _this2.handleUpperKeyDown,
-          onFocus: _this2.onThumbFocus,
-          onBlur: _this2.onThumbBlur,
-          style: logicalStyles(rightThumbStyles),
-          "aria-describedby": showInputOnly ? undefined : _this2.props['aria-describedby'],
-          "aria-label": showInputOnly ? undefined : _this2.props['aria-label']
-        })), showRange && _this2.isValid && ___EmotionJSX(EuiRangeHighlight, {
-          showTicks: showTicks,
-          min: Number(min),
-          max: Number(max),
-          lowerValue: Number(_this2.lowerValue),
-          upperValue: Number(_this2.upperValue),
-          levels: levels,
-          trackWidth: trackWidth
-        }));
-      }), showLabels && ___EmotionJSX(EuiRangeLabel, {
+      }, ___EmotionJSX(EuiRangeSlider, _extends({
+        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 && ___EmotionJSX(React.Fragment, null, isDraggable && this.isValid && ___EmotionJSX(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']
+      }), ___EmotionJSX(EuiRangeThumb, {
+        min: min,
+        max: Number(this.upperValue),
+        value: this.lowerValue,
+        disabled: disabled,
+        showTicks: showTicks,
+        showInput: !!showInput,
+        onKeyDown: this.handleLowerKeyDown,
+        onFocus: this.onThumbFocus,
+        onBlur: this.onThumbBlur,
+        style: logicalStyles(leftThumbStyles),
+        "aria-describedby": showInputOnly ? undefined : this.props['aria-describedby'],
+        "aria-label": showInputOnly ? undefined : this.props['aria-label']
+      }), ___EmotionJSX(EuiRangeThumb, {
+        min: Number(this.lowerValue),
+        max: max,
+        value: this.upperValue,
+        disabled: disabled,
+        showTicks: showTicks,
+        showInput: !!showInput,
+        onKeyDown: this.handleUpperKeyDown,
+        onFocus: this.onThumbFocus,
+        onBlur: this.onThumbBlur,
+        style: logicalStyles(rightThumbStyles),
+        "aria-describedby": showInputOnly ? undefined : this.props['aria-describedby'],
+        "aria-label": showInputOnly ? undefined : this.props['aria-label']
+      })), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
+        showTicks: showTicks,
+        min: Number(min),
+        max: Number(max),
+        lowerValue: Number(this.lowerValue),
+        upperValue: Number(this.upperValue),
+        levels: levels,
+        trackWidth: this.state.rangeWidth
+      })), showLabels && ___EmotionJSX(EuiRangeLabel, {
         disabled: disabled
       }, max), showInput && !showInputOnly && ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',

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

@@ -48,7 +48,8 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "preventPopoverClose", false);
     _defineProperty(_assertThisInitialized(_this), "state", {
       id: _this.props.id || htmlIdGenerator()(),
-      isPopoverOpen: false
+      isPopoverOpen: false,
+      trackWidth: 0
     });
     _defineProperty(_assertThisInitialized(_this), "handleOnChange", function (e) {
       var isValid = isWithinRange(_this.props.min, _this.props.max, e.currentTarget.value);
@@ -56,6 +57,11 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         _this.props.onChange(e, isValid);
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "rangeSliderRef", function (ref) {
+      _this.setState({
+        trackWidth: (ref === null || ref === void 0 ? void 0 : ref.clientWidth) || 0
+      });
+    });
     _defineProperty(_assertThisInitialized(_this), "onInputFocus", function (e) {
       if (_this.props.onFocus) {
         _this.props.onFocus(e);
@@ -169,6 +175,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         side: "min",
         disabled: disabled
       }, min), ___EmotionJSX(EuiRangeTrack, {
+        trackWidth: this.state.trackWidth,
         disabled: disabled,
         compressed: compressed,
         max: max,
@@ -182,45 +189,45 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         value: value,
         "aria-hidden": !!showInput,
         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,
-          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, {
+      }, ___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: 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 && ___EmotionJSX(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 && ___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", {