@elastic/eui 89.1.0 → 90.0.1

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", {

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

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiRangeTrack = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,7 +16,7 @@ var _range_levels = require("./range_levels");
 var _range_ticks = require("./range_ticks");
 var _range_track = require("./range_track.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
+var _excluded = ["children", "trackWidth", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,6 +28,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiRangeTrack = function EuiRangeTrack(_ref) {
   var children = _ref.children,
+    trackWidth = _ref.trackWidth,
     disabled = _ref.disabled,
     max = _ref.max,
     min = _ref.min,
@@ -50,10 +50,6 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
-  var _useState = (0, _react.useState)(0),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var tickSequence = (0, _react.useMemo)(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -100,12 +96,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
     css: cssStyles
-  }, rest, {
-    ref: function ref(node) {
-      var _node$clientWidth;
-      setTrackWidth((_node$clientWidth = node === null || node === void 0 ? void 0 : node.clientWidth) !== null && _node$clientWidth !== void 0 ? _node$clientWidth : 0);
-    }
-  }), levels && !!levels.length && (0, _react2.jsx)(_range_levels.EuiRangeLevels, {
+  }, rest), levels && !!levels.length && (0, _react2.jsx)(_range_levels.EuiRangeLevels, {
     levels: levels,
     max: max,
     min: min,
@@ -123,7 +114,7 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
     min: min,
     max: max,
     trackWidth: trackWidth
-  }), typeof children === 'function' ? children(trackWidth) : children);
+  }), children);
 };
 exports.EuiRangeTrack = EuiRangeTrack;
 var validateValueIsInStep = function validateValueIsInStep(value, _ref2) {

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

@@ -14,14 +14,13 @@ exports.calculateThumbPosition = exports.EUI_THUMB_SIZE = void 0;
 
 var EUI_THUMB_SIZE = 16;
 exports.EUI_THUMB_SIZE = EUI_THUMB_SIZE;
-var calculateThumbPosition = function calculateThumbPosition(value, min, max, width) {
+var calculateThumbPosition = function calculateThumbPosition(value, min, max, trackWidth) {
   var thumbSize = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : EUI_THUMB_SIZE;
   // Calculate the left position based on value
   var decimal = (value - min) / (max - min);
   // Must be between 0-100%
   var valuePosition = decimal <= 1 ? decimal : 1;
   valuePosition = valuePosition >= 0 ? valuePosition : 0;
-  var trackWidth = width !== null && width !== void 0 ? width : 0;
   var thumbToTrackRatio = thumbSize / trackWidth;
   var trackPositionScale = (1 - thumbToTrackRatio) * 100;
   return valuePosition * trackPositionScale;

package/optimize/lib/components/list_group/list_group_item.js

@@ -20,7 +20,7 @@ var _services = require("../../services");
 var _href_validator = require("../../services/security/href_validator");
 var _list_group_item = require("./list_group_item.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
+var _excluded = ["label", "isActive", "isDisabled", "href", "target", "rel", "className", "css", "style", "iconType", "icon", "iconProps", "extraAction", "onClick", "size", "color", "showToolTip", "wrapText", "buttonRef", "toolTipText", "toolTipProps"],
   _excluded2 = ["iconType", "alwaysShow", "isDisabled"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -48,6 +48,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
     rel = _ref.rel,
     className = _ref.className,
     customCss = _ref.css,
+    style = _ref.style,
     iconType = _ref.iconType,
     icon = _ref.icon,
     iconProps = _ref.iconProps,
@@ -173,7 +174,8 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
     });
     itemContent = (0, _react2.jsx)("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
@@ -185,7 +187,8 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
   } else {
     itemContent = (0, _react2.jsx)("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, itemContent, extraActionNode);
   }
   return (0, _react2.jsx)(_react.Fragment, null, itemContent);

package/optimize/lib/components/list_group/list_group_item_extra_action.styles.js

@@ -32,7 +32,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 var euiListGroupItemExtraActionStyles = function euiListGroupItemExtraActionStyles(_ref3) {
   var euiTheme = _ref3.euiTheme;
   return {
-    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";};label:euiListGroupItemExtraAction;"),
+    euiListGroupItemExtraAction: /*#__PURE__*/(0, _react.css)("flex-shrink:0;opacity:0;", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, ";&&:hover,&&:focus{transform:translateY(0);}};label:euiListGroupItemExtraAction;"),
     hoverStyles: _ref2,
     alwaysShow: _ref
   };

package/optimize/lib/components/page/index.js

@@ -15,30 +15,6 @@ Object.defineProperty(exports, "EuiPageBody", {
     return _page_body.EuiPageBody;
   }
 });
-Object.defineProperty(exports, "EuiPageContentBody_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentBody_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContentHeaderSection_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentHeaderSection_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContentHeader_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContentHeader_Deprecated;
-  }
-});
-Object.defineProperty(exports, "EuiPageContent_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_content.EuiPageContent_Deprecated;
-  }
-});
 Object.defineProperty(exports, "EuiPageHeader", {
   enumerable: true,
   get: function get() {
@@ -63,29 +39,14 @@ Object.defineProperty(exports, "EuiPageSection", {
     return _page_section.EuiPageSection;
   }
 });
-Object.defineProperty(exports, "EuiPageSideBar_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_side_bar.EuiPageSideBar_Deprecated;
-  }
-});
 Object.defineProperty(exports, "EuiPageSidebar", {
   enumerable: true,
   get: function get() {
     return _page_sidebar.EuiPageSidebar;
   }
 });
-Object.defineProperty(exports, "EuiPageTemplate_Deprecated", {
-  enumerable: true,
-  get: function get() {
-    return _page_template.EuiPageTemplate_Deprecated;
-  }
-});
 var _page = require("./page");
 var _page_body = require("./page_body");
-var _page_content = require("./page_content");
 var _page_header = require("./page_header");
 var _page_section = require("./page_section");
-var _page_side_bar = require("./page_side_bar");
-var _page_sidebar = require("./page_sidebar");
-var _page_template = require("./page_template");
+var _page_sidebar = require("./page_sidebar");