@elastic/eui 89.1.0 → 91.0.0

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

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

@@ -1,7 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -10,7 +9,7 @@ var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tic
  * Side Public License, v 1.
  */
 
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useMemo, useEffect } from 'react';
 import classNames from 'classnames';
 import range from 'lodash/range';
 import { useEuiTheme, isEvenlyDivisibleBy } from '../../../services';
@@ -20,6 +19,7 @@ import { euiRangeTrackStyles } from './range_track.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiRangeTrack = function EuiRangeTrack(_ref) {
   var children = _ref.children,
+    trackWidth = _ref.trackWidth,
     disabled = _ref.disabled,
     max = _ref.max,
     min = _ref.min,
@@ -41,10 +41,6 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var tickSequence = useMemo(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -91,12 +87,7 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
   return ___EmotionJSX("div", _extends({
     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 && ___EmotionJSX(EuiRangeLevels, {
+  }, rest), levels && !!levels.length && ___EmotionJSX(EuiRangeLevels, {
     levels: levels,
     max: max,
     min: min,
@@ -114,7 +105,7 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
     min: min,
     max: max,
     trackWidth: trackWidth
-  }), typeof children === 'function' ? children(trackWidth) : children);
+  }), children);
 };
 var validateValueIsInStep = function validateValueIsInStep(value, _ref2) {
   var min = _ref2.min,

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

@@ -7,14 +7,13 @@
  */
 
 export var EUI_THUMB_SIZE = 16;
-export var calculateThumbPosition = function calculateThumbPosition(value, min, max, width) {
+export 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/es/components/i18n/i18n.js

@@ -70,6 +70,7 @@ var EuiI18n = function EuiI18n(props) {
           i18nMapping: mapping,
           i18nMappingFunc: mappingFunc,
           valueDefault: props.defaults[idx],
+          values: props.values,
           render: render
         });
       }));

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

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -37,6 +37,7 @@ export 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,
@@ -162,7 +163,8 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
     });
     itemContent = ___EmotionJSX("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, ___EmotionJSX(EuiToolTip, _extends({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
       position: "right",
@@ -174,7 +176,8 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
   } else {
     itemContent = ___EmotionJSX("li", {
       className: classes,
-      css: cssStyles
+      css: cssStyles,
+      style: style
     }, itemContent, extraActionNode);
   }
   return ___EmotionJSX(Fragment, null, itemContent);

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

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

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

@@ -8,9 +8,6 @@
 
 export { EuiPage } from './page';
 export { EuiPageBody } from './page_body';
-export { EuiPageContent_Deprecated, EuiPageContentBody_Deprecated, EuiPageContentHeader_Deprecated, EuiPageContentHeaderSection_Deprecated } from './page_content';
 export { EuiPageHeader, EuiPageHeaderContent, EuiPageHeaderSection } from './page_header';
 export { EuiPageSection } from './page_section';
-export { EuiPageSideBar_Deprecated } from './page_side_bar';
-export { EuiPageSidebar } from './page_sidebar';
-export { EuiPageTemplate_Deprecated } from './page_template';
+export { EuiPageSidebar } from './page_sidebar';

package/optimize/es/components/popover/input_popover.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "closePopover", "closeOnScroll", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "closePopover", "anchorPosition", "attachToAnchor", "repositionToCrossAxis", "display", "panelPaddingSize", "closeOnScroll", "ownFocus", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "panelMinWidth", "onPanelResize", "inputRef", "panelRef"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -31,8 +31,20 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   var children = _ref.children,
     className = _ref.className,
     closePopover = _ref.closePopover,
+    _ref$anchorPosition = _ref.anchorPosition,
+    anchorPosition = _ref$anchorPosition === void 0 ? 'downLeft' : _ref$anchorPosition,
+    _ref$attachToAnchor = _ref.attachToAnchor,
+    attachToAnchor = _ref$attachToAnchor === void 0 ? true : _ref$attachToAnchor,
+    _ref$repositionToCros = _ref.repositionToCrossAxis,
+    repositionToCrossAxis = _ref$repositionToCros === void 0 ? false : _ref$repositionToCros,
+    _ref$display = _ref.display,
+    display = _ref$display === void 0 ? 'block' : _ref$display,
+    _ref$panelPaddingSize = _ref.panelPaddingSize,
+    panelPaddingSize = _ref$panelPaddingSize === void 0 ? 's' : _ref$panelPaddingSize,
     _ref$closeOnScroll = _ref.closeOnScroll,
     closeOnScroll = _ref$closeOnScroll === void 0 ? false : _ref$closeOnScroll,
+    _ref$ownFocus = _ref.ownFocus,
+    ownFocus = _ref$ownFocus === void 0 ? false : _ref$ownFocus,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
     focusTrapProps = _ref.focusTrapProps,
@@ -75,6 +87,11 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   var panelWidth = useMemo(function () {
     return inputWidth < panelMinWidth ? panelMinWidth : inputWidth;
   }, [panelMinWidth, inputWidth]);
+
+  // Resize callback
+  useEffect(function () {
+    onPanelResize === null || onPanelResize === void 0 ? void 0 : onPanelResize(panelWidth);
+  }, [panelWidth, onPanelResize]);
   useEffect(function () {
     if (panelEl) {
       // We have to modify the popover panel DOM node directly instead of using
@@ -148,15 +165,19 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);
   return ___EmotionJSX(EuiPopover, _extends({
+    className: classes,
     css: /*#__PURE__*/css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth), ";label:EuiInputPopover;"),
-    repositionToCrossAxis: false,
-    ownFocus: false,
+    display: display,
     button: input,
-    buttonRef: inputRef,
+    popoverRef: inputRef,
     panelRef: panelRef,
-    className: classes,
     ref: popoverClassRef,
-    closePopover: closePopover
+    closePopover: closePopover,
+    anchorPosition: anchorPosition,
+    attachToAnchor: attachToAnchor,
+    repositionToCrossAxis: repositionToCrossAxis,
+    panelPaddingSize: panelPaddingSize,
+    ownFocus: ownFocus
   }, props, {
     panelProps: _objectSpread(_objectSpread({}, props.panelProps), {}, {
       onKeyDown: onKeyDown
@@ -167,10 +188,4 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   }, focusTrapProps), ___EmotionJSX(EuiInputPopoverWidthContext.Provider, {
     value: panelWidth
   }, children)));
-};
-EuiInputPopover.defaultProps = {
-  anchorPosition: 'downLeft',
-  attachToAnchor: true,
-  display: 'block',
-  panelPaddingSize: 's'
 };