@elastic/eui 91.3.1 → 92.0.0

package/optimize/es/components/flyout/flyout.js

@@ -98,18 +98,18 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
      */
     if (isPushed) {
       if (side === 'right') {
-        document.body.style.paddingRight = "".concat(dimensions.width, "px");
+        document.body.style.paddingInlineEnd = "".concat(dimensions.width, "px");
       } else if (side === 'left') {
-        document.body.style.paddingLeft = "".concat(dimensions.width, "px");
+        document.body.style.paddingInlineStart = "".concat(dimensions.width, "px");
       }
     }
     return function () {
       document.body.classList.remove('euiBody--hasFlyout');
       if (isPushed) {
         if (side === 'right') {
-          document.body.style.paddingRight = '';
+          document.body.style.paddingInlineEnd = '';
         } else if (side === 'left') {
-          document.body.style.paddingLeft = '';
+          document.body.style.paddingInlineStart = '';
         }
       }
     };

package/optimize/es/components/flyout/flyout_resizable.js

@@ -0,0 +1,121 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["size", "maxWidth", "minWidth", "side", "children"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { keys, useCombinedRefs, useEuiTheme } from '../../services';
+import { EuiResizableButton } from '../resizable_container';
+import { EuiFlyout } from './flyout';
+import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var size = _ref.size,
+    maxWidth = _ref.maxWidth,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? 'right' : _ref$side,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = useEuiTheme();
+  var styles = euiFlyoutResizableButtonStyles(euiTheme);
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[side]];
+  var getFlyoutMinMaxWidth = useCallback(function (width) {
+    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
+    );
+  }, [minWidth, maxWidth]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    flyoutWidth = _useState2[0],
+    setFlyoutWidth = _useState2[1];
+
+  // Must use state for the flyout ref in order for the useEffect to be correctly called after render
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    flyoutRef = _useState4[0],
+    setFlyoutRef = _useState4[1];
+  var setRefs = useCombinedRefs([setFlyoutRef, ref]);
+  useEffect(function () {
+    setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
+  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
+
+  // Initial numbers to calculate from, on resize drag start
+  var initialWidth = useRef(0);
+  var initialMouseX = useRef(0);
+
+  // Account for flyout side and logical property direction
+  var direction = useMemo(function () {
+    var modifier = side === 'right' ? -1 : 1;
+    if (flyoutRef) {
+      var languageDirection = window.getComputedStyle(flyoutRef).direction;
+      if (languageDirection === 'rtl') modifier *= -1;
+    }
+    return modifier;
+  }, [side, flyoutRef]);
+  var onMouseMove = useCallback(function (e) {
+    var mouseOffset = getMouseOrTouchX(e) - initialMouseX.current;
+    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
+    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
+  }, [getFlyoutMinMaxWidth, direction]);
+  var onMouseUp = useCallback(function () {
+    initialMouseX.current = 0;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('touchmove', onMouseMove);
+    window.removeEventListener('touchend', onMouseUp);
+  }, [onMouseMove]);
+  var onMouseDown = useCallback(function (e) {
+    var _flyoutRef$offsetWidt;
+    initialMouseX.current = getMouseOrTouchX(e);
+    initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
+
+    // Window event listeners instead of React events are used
+    // in case the user's mouse leaves the component
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchmove', onMouseMove);
+    window.addEventListener('touchend', onMouseUp);
+  }, [flyoutRef, onMouseMove, onMouseUp]);
+  var onKeyDown = useCallback(function (e) {
+    var KEYBOARD_OFFSET = 10;
+    switch (e.key) {
+      case keys.ARROW_RIGHT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth + KEYBOARD_OFFSET * direction);
+        });
+        break;
+      case keys.ARROW_LEFT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth - KEYBOARD_OFFSET * direction);
+        });
+    }
+  }, [getFlyoutMinMaxWidth, direction]);
+  return ___EmotionJSX(EuiFlyout, _extends({}, rest, {
+    size: flyoutWidth || size,
+    maxWidth: maxWidth,
+    side: side,
+    ref: setRefs
+  }), ___EmotionJSX(EuiResizableButton, {
+    isHorizontal: true,
+    css: cssStyles,
+    onMouseDown: onMouseDown,
+    onTouchStart: onMouseDown,
+    onKeyDown: onKeyDown
+  }), children);
+});
+EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';
+var getMouseOrTouchX = function getMouseOrTouchX(e) {
+  // Some Typescript fooling is needed here
+  var x = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
+  return x;
+};

package/optimize/es/components/flyout/flyout_resizable.styles.js

@@ -0,0 +1,27 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "6syi0e-euiFlyoutResizableButton",
+  styles: "position:absolute;&::before,&::after{background-color:transparent;};label:euiFlyoutResizableButton;"
+} : {
+  name: "6syi0e-euiFlyoutResizableButton",
+  styles: "position:absolute;&::before,&::after{background-color:transparent;};label:euiFlyoutResizableButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    euiFlyoutResizableButton: _ref,
+    left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+  };
+};

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

@@ -10,4 +10,5 @@ export { EuiFlyout } from './flyout';
 export { EuiFlyoutBody } from './flyout_body';
 export { EuiFlyoutFooter } from './flyout_footer';
 export { EuiFlyoutHeader } from './flyout_header';
-export { euiFlyoutSlideInRight, euiFlyoutSlideInLeft } from './flyout.styles';
+export { euiFlyoutSlideInRight, euiFlyoutSlideInLeft } from './flyout.styles';
+export { EuiFlyoutResizable } from './flyout_resizable';

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

@@ -54,38 +54,10 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     _this = _super.call.apply(_super, [this].concat(args));
     _defineProperty(_assertThisInitialized(_this), "state", {
       id: _this.props.id || htmlIdGenerator()(),
-      rangeSliderRefAvailable: false,
       isPopoverOpen: false,
-      rangeWidth: 0,
-      isVisible: true // used to trigger a rerender if initial element width is 0
+      rangeWidth: 0
     });
     _defineProperty(_assertThisInitialized(_this), "preventPopoverClose", false);
-    _defineProperty(_assertThisInitialized(_this), "rangeSliderRef", null);
-    _defineProperty(_assertThisInitialized(_this), "handleRangeSliderRefUpdate", function (ref) {
-      _this.rangeSliderRef = ref;
-      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);
     _defineProperty(_assertThisInitialized(_this), "_determineInvalidThumbMovement", function (newVal, lower, upper, e) {
@@ -276,14 +248,11 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         isPopoverOpen: false
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "onResize", function (width) {
-      var _this$props$inputPopo, _this$props$inputPopo2;
-      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), "setRangeWidth", function (_ref) {
+      var width = _ref.width;
+      _this.setState({
+        rangeWidth: width
+      });
     });
     _defineProperty(_assertThisInitialized(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -306,7 +275,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var delta = _this.leftPosition - x;
       _this.leftPosition = x;
       _this.dragAcc = _this.dragAcc + delta;
-      var percentageOfArea = _this.dragAcc / _this.rangeSliderRef.clientWidth;
+      var percentageOfArea = _this.dragAcc / _this.state.rangeWidth;
       var percentageOfRange = percentageOfArea * (max - min);
       var newLower = _this.getNearestStep(lowerValue - percentageOfRange);
       var newUpper = _this.getNearestStep(upperValue - percentageOfRange);
@@ -350,32 +319,12 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
     get: function get() {
       return this.lowerValueIsValid && this.upperValueIsValid;
     }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$rangeSliderRef;
-      if (((_this$rangeSliderRef = this.rangeSliderRef) === null || _this$rangeSliderRef === void 0 ? void 0 : _this$rangeSliderRef.clientWidth) === 0) {
-        this.setState({
-          isVisible: false
-        });
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate() {
-      var _this$rangeSliderRef2;
-      if ((_this$rangeSliderRef2 = this.rangeSliderRef) !== null && _this$rangeSliderRef2 !== void 0 && _this$rangeSliderRef2.clientWidth && !this.state.isVisible) {
-        this.setState({
-          isVisible: true
-        });
-      }
-    }
   }, {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _ref = this.context,
-        defaultFullWidth = _ref.defaultFullWidth;
+      var _ref2 = this.context,
+        defaultFullWidth = _ref2.defaultFullWidth;
       var _this$props = this.props,
         className = _this$props.className,
         customCss = _this$props.css,
@@ -531,10 +480,10 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       var classes = classNames('euiDualRange', className);
       var dualRangeStyles = euiDualRangeStyles();
       var cssStyles = [dualRangeStyles.euiDualRange, customCss];
-      var leftThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.lowerValue) || min, this.state.rangeWidth) : {
+      var leftThumbPosition = this.state.rangeWidth ? this.calculateThumbPositionStyle(Number(this.lowerValue) || min, this.state.rangeWidth) : {
         left: '0'
       };
-      var rightThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
+      var rightThumbPosition = this.state.rangeWidth ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
         left: '0'
       };
       var leftThumbColor = levels && getLevelColor(levels, Number(this.lowerValue));
@@ -578,7 +527,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       }, ___EmotionJSX(EuiRangeSlider, _extends({
         className: "euiDualRange__slider",
         css: dualRangeStyles.euiDualRange__slider,
-        ref: this.handleRangeSliderRefUpdate,
         id: id,
         name: name,
         min: min,
@@ -592,7 +540,9 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         showRange: showRange,
         onFocus: _onFocus,
         onBlur: _onBlur
-      }, rest)), this.state.rangeSliderRefAvailable && ___EmotionJSX(React.Fragment, null, isDraggable && this.isValid && ___EmotionJSX(EuiRangeDraggable, {
+      }, rest, {
+        onResize: this.setRangeWidth
+      })), isDraggable && this.isValid && ___EmotionJSX(EuiRangeDraggable, {
         min: min,
         max: max,
         value: [this.lowerValue, this.upperValue],
@@ -632,7 +582,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         style: logicalStyles(rightThumbStyles),
         "aria-describedby": showInputOnly ? undefined : this.props['aria-describedby'],
         "aria-label": showInputOnly ? undefined : this.props['aria-label']
-      })), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
+      }), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
         showTicks: showTicks,
         min: Number(min),
         max: Number(max),
@@ -664,7 +614,6 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         isOpen: this.state.isPopoverOpen,
         closePopover: this.closePopover,
         disableFocusTrap: true,
-        onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
       }), theRange) : undefined;
       return thePopover || theRange;

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

@@ -57,9 +57,10 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         _this.props.onChange(e, isValid);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "rangeSliderRef", function (ref) {
+    _defineProperty(_assertThisInitialized(_this), "setTrackWidth", function (_ref) {
+      var width = _ref.width;
       _this.setState({
-        trackWidth: (ref === null || ref === void 0 ? void 0 : ref.clientWidth) || 0
+        trackWidth: width
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onInputFocus", function (e) {
@@ -103,8 +104,8 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this2 = this;
-      var _ref = this.context,
-        defaultFullWidth = _ref.defaultFullWidth;
+      var _ref2 = this.context,
+        defaultFullWidth = _ref2.defaultFullWidth;
       var _this$props = this.props,
         className = _this$props.className,
         compressed = _this$props.compressed,
@@ -210,7 +211,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         "aria-hidden": !!showInput,
         thumbColor: thumbColor
       }, rest, {
-        ref: this.rangeSliderRef
+        onResize: this.setTrackWidth
       })), showRange && this.isValid && ___EmotionJSX(EuiRangeHighlight, {
         showTicks: showTicks,
         min: Number(min),

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "disabled", "id", "max", "min", "name", "step", "onChange", "tabIndex", "value", "style", "showTicks", "showRange", "thumbColor"];
+var _excluded = ["className", "disabled", "id", "max", "min", "name", "step", "onChange", "tabIndex", "value", "style", "showTicks", "showRange", "thumbColor", "onResize"];
 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; }
 /*
@@ -12,14 +12,15 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
 import { logicalStyles } from '../../../global_styling';
+import { EuiResizeObserver } from '../../observer/resize_observer';
 import { euiRangeLevelColor } from './range_levels_colors';
 import { euiRangeSliderStyles, euiRangeSliderThumbStyles } from './range_slider.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiRangeSlider = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var EuiRangeSlider = function EuiRangeSlider(_ref) {
   var className = _ref.className,
     disabled = _ref.disabled,
     id = _ref.id,
@@ -34,6 +35,7 @@ export var EuiRangeSlider = /*#__PURE__*/forwardRef(function (_ref, ref) {
     showTicks = _ref.showTicks,
     showRange = _ref.showRange,
     thumbColor = _ref.thumbColor,
+    onResize = _ref.onResize,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiRangeSlider', className);
   var euiTheme = useEuiTheme();
@@ -45,21 +47,24 @@ export var EuiRangeSlider = /*#__PURE__*/forwardRef(function (_ref, ref) {
       color: thumbColor && euiRangeLevelColor(thumbColor, euiTheme.euiTheme)
     }, style));
   }, [thumbColor, euiTheme, style]);
-  return ___EmotionJSX("input", _extends({
-    ref: ref,
-    type: "range",
-    id: id,
-    name: name,
-    className: classes,
-    css: cssStyles,
-    min: min,
-    max: max,
-    step: step,
-    value: value,
-    disabled: disabled,
-    onChange: onChange,
-    style: sliderStyle,
-    tabIndex: tabIndex
-  }, rest));
-});
-EuiRangeSlider.displayName = 'EuiRangeSlider';
+  return ___EmotionJSX(EuiResizeObserver, {
+    onResize: onResize
+  }, function (resizeRef) {
+    return ___EmotionJSX("input", _extends({
+      ref: resizeRef,
+      type: "range",
+      id: id,
+      name: name,
+      className: classes,
+      css: cssStyles,
+      min: min,
+      max: max,
+      step: step,
+      value: value,
+      disabled: disabled,
+      onChange: onChange,
+      style: sliderStyle,
+      tabIndex: tabIndex
+    }, rest));
+  });
+};

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inputRef", "isLoading", "isInvalid", "name", "placeholder", "resize", "rows"];
+var _excluded = ["children", "className", "compressed", "fullWidth", "id", "icon", "inputRef", "isLoading", "isInvalid", "isClearable", "name", "placeholder", "resize", "rows"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -9,8 +9,9 @@ var _excluded = ["children", "className", "compressed", "fullWidth", "id", "inpu
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useRef, useMemo } from 'react';
 import classNames from 'classnames';
+import { useCombinedRefs } from '../../../services';
 import { EuiFormControlLayout } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
 import { useFormContext } from '../eui_form_context';
@@ -31,9 +32,11 @@ export var EuiTextArea = function EuiTextArea(props) {
     _props$fullWidth = props.fullWidth,
     fullWidth = _props$fullWidth === void 0 ? defaultFullWidth : _props$fullWidth,
     id = props.id,
+    icon = props.icon,
     inputRef = props.inputRef,
     isLoading = props.isLoading,
     isInvalid = props.isInvalid,
+    isClearable = props.isClearable,
     name = props.name,
     placeholder = props.placeholder,
     _props$resize = props.resize,
@@ -52,10 +55,33 @@ export var EuiTextArea = function EuiTextArea(props) {
   } else {
     definedRows = 6;
   }
+  var ref = useRef(null);
+  var refs = useCombinedRefs([ref, inputRef]);
+  var clear = useMemo(function () {
+    if (isClearable) {
+      return {
+        onClick: function onClick() {
+          if (ref.current) {
+            ref.current.value = '';
+            var event = new Event('input', {
+              bubbles: true,
+              cancelable: false
+            });
+            ref.current.dispatchEvent(event);
+            ref.current.focus(); // set focus back to the textarea
+          }
+        },
+
+        'data-test-subj': 'clearTextAreaButton'
+      };
+    }
+  }, [isClearable]);
   return ___EmotionJSX(EuiFormControlLayout, {
     fullWidth: fullWidth,
     isLoading: isLoading,
     isInvalid: isInvalid,
+    clear: clear,
+    icon: icon,
     className: "euiFormControlLayout--euiTextArea"
   }, ___EmotionJSX(EuiValidatableControl, {
     isInvalid: isInvalid
@@ -65,7 +91,7 @@ export var EuiTextArea = function EuiTextArea(props) {
     rows: definedRows,
     name: name,
     id: id,
-    ref: inputRef,
+    ref: refs,
     placeholder: placeholder
   }), children)));
 };

package/optimize/es/components/index.js

@@ -26,7 +26,6 @@ export * from './combo_box';
 export * from './comment_list';
 export * from './context';
 export * from './context_menu';
-export * from './control_bar';
 export * from './copy';
 export * from './datagrid';
 export * from './date_picker';
@@ -60,7 +59,6 @@ export * from './markdown_editor';
 export * from './mark';
 export * from './modal';
 export * from './observer/mutation_observer';
-export * from './notification';
 export * from './outside_click_detector';
 export * from './overlay_mask';
 export * from './page';

package/optimize/es/components/markdown_editor/markdown_editor.js

@@ -258,20 +258,19 @@ export var EuiMarkdownEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setEditorToolbarHeight(editorToolbarRef.current.offsetHeight);
   }, [setEditorToolbarHeight]);
   useEffect(function () {
-    if (isPreviewing && autoExpandPreview && height !== 'full') {
-      if (previewRef.current.scrollHeight > currentHeight) {
-        // scrollHeight does not include the border or margin
-        // so we ask for the computed value for those,
-        // which is always in pixels because getComputedValue
-        // returns the resolved values
-        var elementComputedStyle = window.getComputedStyle(previewRef.current);
-        var borderWidth = parseFloat(elementComputedStyle.borderTopWidth) + parseFloat(elementComputedStyle.borderBottomWidth);
-        var marginWidth = parseFloat(elementComputedStyle.marginTop) + parseFloat(elementComputedStyle.marginBottom);
+    if (height === 'full' || currentHeight === 'full') return;
+    if (isPreviewing && autoExpandPreview && previewRef.current.scrollHeight > currentHeight) {
+      // scrollHeight does not include the border or margin
+      // so we ask for the computed value for those,
+      // which is always in pixels because getComputedValue
+      // returns the resolved values
+      var elementComputedStyle = window.getComputedStyle(previewRef.current);
+      var borderWidth = parseFloat(elementComputedStyle.borderTopWidth) + parseFloat(elementComputedStyle.borderBottomWidth);
+      var marginWidth = parseFloat(elementComputedStyle.marginTop) + parseFloat(elementComputedStyle.marginBottom);
 
-        // then add an extra pixel for safety and because the scrollHeight value is rounded
-        var extraHeight = borderWidth + marginWidth + 1;
-        setCurrentHeight(previewRef.current.scrollHeight + extraHeight);
-      }
+      // then add an extra pixel for safety and because the scrollHeight value is rounded
+      var extraHeight = borderWidth + marginWidth + 1;
+      setCurrentHeight(previewRef.current.scrollHeight + extraHeight);
     }
   }, [currentHeight, isPreviewing, height, autoExpandPreview]);
   var previewHeight = height === 'full' ? "calc(100% - ".concat(editorFooterHeight, "px)") : currentHeight;

package/optimize/es/components/page_template/bottom_bar/page_bottom_bar.js

@@ -55,7 +55,7 @@ export var _EuiPageBottomBar = function _EuiPageBottomBar(_ref2) {
     // Hide the overflow in case of larger flex margins than padding
     ,
     css: _ref
-    // Using unknown here because of the possible conflict with overriding props and position `sticky`
+    // Using object here because of the possible conflict with overriding props and position `sticky`
   }, rest), ___EmotionJSX(EuiPageSection, {
     paddingSize: paddingSize,
     restrictWidth: restrictWidth

package/optimize/es/components/selectable/selectable_list/selectable_list_item.js

@@ -208,7 +208,7 @@ export var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
           onFocusBadgeNode = ___EmotionJSX(EuiBadge, _extends({
             className: "euiSelectableListItem__onFocusBadge"
           }, defaultOnFocusBadgeProps));
-        } else if (!!onFocusBadge && onFocusBadge !== false) {
+        } else if (typeof onFocusBadge !== 'boolean' && !!onFocusBadge) {
           var _children = onFocusBadge.children,
             _className = onFocusBadge.className,
             restBadgeProps = _objectWithoutProperties(onFocusBadge, _excluded2);

package/optimize/es/components/tree_view/tree_view.js

@@ -42,34 +42,12 @@ var displayToClassNameMap = {
 export var EuiTreeView = /*#__PURE__*/function (_Component) {
   _inherits(EuiTreeView, _Component);
   var _super = _createSuper(EuiTreeView);
-  function EuiTreeView() {
+  function EuiTreeView(props, context) {
     var _this;
     _classCallCheck(this, EuiTreeView);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props, context);
     _defineProperty(_assertThisInitialized(_this), "treeIdGenerator", htmlIdGenerator('euiTreeView'));
-    _defineProperty(_assertThisInitialized(_this), "isNested", !!_this.context);
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      openItems: _this.props.expandByDefault ? _this.props.items.map(function (_ref) {
-        var id = _ref.id,
-          children = _ref.children;
-        return children ? id : null;
-      }).filter(function (x) {
-        return x != null;
-      }) : _this.props.items.map(function (_ref2) {
-        var id = _ref2.id,
-          children = _ref2.children,
-          isExpanded = _ref2.isExpanded;
-        return children && isExpanded ? id : null;
-      }).filter(function (x) {
-        return x != null;
-      }),
-      activeItem: '',
-      treeID: getTreeId(_this.props.id, _this.context, _this.treeIdGenerator),
-      expandChildNodes: _this.props.expandByDefault || false
-    });
+    _defineProperty(_assertThisInitialized(_this), "isNested", void 0);
     _defineProperty(_assertThisInitialized(_this), "buttonRef", []);
     _defineProperty(_assertThisInitialized(_this), "setButtonRef", function (ref, index) {
       _this.buttonRef[index] = ref;
@@ -164,6 +142,26 @@ export var EuiTreeView = /*#__PURE__*/function (_Component) {
         _this.buttonRef[index].focus();
       }
     });
+    _this.isNested = !!_this.context;
+    _this.state = {
+      openItems: _this.props.expandByDefault ? _this.props.items.map(function (_ref) {
+        var id = _ref.id,
+          children = _ref.children;
+        return children ? id : null;
+      }).filter(function (x) {
+        return x != null;
+      }) : _this.props.items.map(function (_ref2) {
+        var id = _ref2.id,
+          children = _ref2.children,
+          isExpanded = _ref2.isExpanded;
+        return children && isExpanded ? id : null;
+      }).filter(function (x) {
+        return x != null;
+      }),
+      activeItem: '',
+      treeID: getTreeId(_this.props.id, context, _this.treeIdGenerator),
+      expandChildNodes: _this.props.expandByDefault || false
+    };
     return _this;
   }
   _createClass(EuiTreeView, [{