@elastic/eui 89.1.0 → 91.0.0

package/optimize/lib/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiAbsoluteTab = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -16,9 +17,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _moment = _interopRequireDefault(require("moment"));
 var _datemath = _interopRequireDefault(require("@elastic/datemath"));
-var _date_picker = require("../../date_picker");
+var _services = require("../../../../services");
 var _form = require("../../../form");
+var _code = require("../../../code");
 var _i18n = require("../../../i18n");
+var _date_picker = require("../../date_picker");
 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; }
@@ -30,48 +33,92 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
                                                                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                            */ // eslint-disable-line import/named
+// Allow users to paste in and have the datepicker parse multiple common date formats,
+// in addition to the configured displayed `dateFormat` prop
+var ALLOWED_USER_DATE_FORMATS = [_moment.default.ISO_8601, _moment.default.RFC_2822, 'X' // Unix timestamp in seconds
+];
 var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(EuiAbsoluteTab, _Component);
   var _super = _createSuper(EuiAbsoluteTab);
+  // Store outside of state as a ref for faster/unbatched updates
+
   function EuiAbsoluteTab(props) {
     var _this;
     (0, _classCallCheck2.default)(this, EuiAbsoluteTab);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (date, event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isParsing", false);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (date) {
       var onChange = _this.props.onChange;
       if (date === null) {
         return;
       }
-      onChange(date.toISOString(), event);
+      onChange(date.toISOString());
       var valueAsMoment = (0, _moment.default)(date);
       _this.setState({
         valueAsMoment: valueAsMoment,
         textInputValue: valueAsMoment.format(_this.props.dateFormat),
+        hasUnparsedText: false,
         isTextInvalid: false
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTextChange", function (event) {
-      var onChange = _this.props.onChange;
-      var valueAsMoment = (0, _moment.default)(event.target.value, _this.props.dateFormat, true);
-      var dateIsValid = valueAsMoment.isValid();
-      if (dateIsValid) {
-        onChange(valueAsMoment.toISOString(), event);
-      }
+      if (_this.isParsing) return;
       _this.setState({
         textInputValue: event.target.value,
-        isTextInvalid: !dateIsValid,
-        valueAsMoment: dateIsValid ? valueAsMoment : null
+        hasUnparsedText: true,
+        isTextInvalid: false
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "parseUserDateInput", function (textInputValue) {
+      _this.isParsing = true;
+      // Wait a tick for state to finish updating (whatever gets returned),
+      // and then allow `onChange` user input to continue setting state
+      requestAnimationFrame(function () {
+        _this.isParsing = false;
+      });
+      var invalidDateState = {
+        textInputValue: textInputValue,
+        isTextInvalid: true,
+        valueAsMoment: null
+      };
+      if (!textInputValue) {
+        return _this.setState(invalidDateState);
+      }
+      var _this$props = _this.props,
+        onChange = _this$props.onChange,
+        dateFormat = _this$props.dateFormat;
+
+      // Attempt to parse with passed `dateFormat`
+      var valueAsMoment = (0, _moment.default)(textInputValue, dateFormat, true);
+      var dateIsValid = valueAsMoment.isValid();
+
+      // If not valid, try a few other other standardized formats
+      if (!dateIsValid) {
+        valueAsMoment = (0, _moment.default)(textInputValue, ALLOWED_USER_DATE_FORMATS, true);
+        dateIsValid = valueAsMoment.isValid();
+      }
+      if (dateIsValid) {
+        onChange(valueAsMoment.toISOString());
+        _this.setState({
+          textInputValue: valueAsMoment.format(_this.props.dateFormat),
+          valueAsMoment: valueAsMoment,
+          hasUnparsedText: false,
+          isTextInvalid: false
+        });
+      } else {
+        _this.setState(invalidDateState);
+      }
+    });
     var parsedValue = _datemath.default.parse(props.value, {
       roundUp: props.roundUp
     });
     var _valueAsMoment = parsedValue && parsedValue.isValid() ? parsedValue : (0, _moment.default)();
-    var textInputValue = _valueAsMoment.locale(_this.props.locale || 'en').format(_this.props.dateFormat);
+    var _textInputValue = _valueAsMoment.locale(_this.props.locale || 'en').format(_this.props.dateFormat);
     _this.state = {
+      hasUnparsedText: false,
       isTextInvalid: false,
-      textInputValue: textInputValue,
+      textInputValue: _textInputValue,
       valueAsMoment: _valueAsMoment
     };
     return _this;
@@ -80,17 +127,18 @@ var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _this$props = this.props,
-        dateFormat = _this$props.dateFormat,
-        timeFormat = _this$props.timeFormat,
-        locale = _this$props.locale,
-        utcOffset = _this$props.utcOffset,
-        labelPrefix = _this$props.labelPrefix;
+      var _this$props2 = this.props,
+        dateFormat = _this$props2.dateFormat,
+        timeFormat = _this$props2.timeFormat,
+        locale = _this$props2.locale,
+        utcOffset = _this$props2.utcOffset,
+        labelPrefix = _this$props2.labelPrefix;
       var _this$state = this.state,
         valueAsMoment = _this$state.valueAsMoment,
         isTextInvalid = _this$state.isTextInvalid,
+        hasUnparsedText = _this$state.hasUnparsedText,
         textInputValue = _this$state.textInputValue;
-      return (0, _react2.jsx)("div", null, (0, _react2.jsx)(_date_picker.EuiDatePicker, {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_date_picker.EuiDatePicker, {
         inline: true,
         showTimeSelect: true,
         shadow: false,
@@ -101,22 +149,34 @@ var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
         locale: locale,
         utcOffset: utcOffset
       }), (0, _react2.jsx)(_i18n.EuiI18n, {
-        token: "euiAbsoluteTab.dateFormatError",
-        default: "Expected format: {dateFormat}",
+        tokens: ['euiAbsoluteTab.dateFormatHint', 'euiAbsoluteTab.dateFormatError'],
+        defaults: ['Press the Enter key to parse as a date.', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.'],
         values: {
-          dateFormat: dateFormat
+          dateFormat: (0, _react2.jsx)(_code.EuiCode, null, dateFormat)
         }
-      }, function (dateFormatError) {
+      }, function (_ref) {
+        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+          dateFormatHint = _ref2[0],
+          dateFormatError = _ref2[1];
         return (0, _react2.jsx)(_form.EuiFormRow, {
           className: "euiSuperDatePicker__absoluteDateFormRow",
           isInvalid: isTextInvalid,
-          error: isTextInvalid ? dateFormatError : undefined
+          error: isTextInvalid ? dateFormatError : undefined,
+          helpText: hasUnparsedText ? isTextInvalid ? dateFormatHint : [dateFormatHint, dateFormatError] : undefined
         }, (0, _react2.jsx)(_form.EuiFieldText, {
           compressed: true,
           isInvalid: isTextInvalid,
           value: textInputValue,
           onChange: _this2.handleTextChange,
-          "data-test-subj": 'superDatePickerAbsoluteDateInput',
+          onPaste: function onPaste(event) {
+            _this2.parseUserDateInput(event.clipboardData.getData('text'));
+          },
+          onKeyDown: function onKeyDown(event) {
+            if (event.key === _services.keys.ENTER) {
+              _this2.parseUserDateInput(textInputValue);
+            }
+          },
+          "data-test-subj": "superDatePickerAbsoluteDateInput",
           prepend: (0, _react2.jsx)(_form.EuiFormLabel, null, labelPrefix)
         }));
       }));

package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -88,8 +88,7 @@ var EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
     button: quickSelectButton,
     isOpen: isOpen,
     closePopover: closePopover,
-    anchorPosition: "downLeft",
-    anchorClassName: "euiQuickSelectPopover__anchor"
+    anchorPosition: "downLeft"
   }, (0, _react2.jsx)(EuiQuickSelectPanels, (0, _extends2.default)({}, props, {
     applyTime: applyTime,
     prevQuickSelect: prevQuickSelect

package/optimize/lib/components/filter_group/filter_group.styles.js

@@ -32,7 +32,7 @@ var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
   return {
-    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
     uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
     compressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlCompressedHeight), ";};label:compressed;"),

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',