@elastic/eui 94.4.1 → 94.5.0

package/es/components/flyout/flyout_resizable.js

@@ -23,6 +23,8 @@ import { getPosition } from '../resizable_container/helpers';
 import { EuiFlyout } from './flyout';
 import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+// If not omitted, the correct props don't show up in the docs prop table
+
 export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var size = _ref.size,
     maxWidth = _ref.maxWidth,
@@ -57,9 +59,18 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setFlyoutRef = _useState6[1];
   var setRefs = useCombinedRefs([setFlyoutRef, ref]);
   useEffect(function () {
-    setCallOnResize(false); // Don't call `onResize` for non-user width changes
-    setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
-  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
+
+  // Update flyout width when consumers pass in a new `size`
+  useEffect(function () {
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof size === 'number' ? getFlyoutMinMaxWidth(size) : 0);
+  }, [size, getFlyoutMinMaxWidth]);
 
   // Initial numbers to calculate from, on resize drag start
   var initialWidth = useRef(0);

package/es/components/popover/input_popover.js

@@ -169,16 +169,21 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
         }
         closePopover();
       };
-      window.addEventListener('scroll', closePopoverOnScroll, {
-        passive: true,
-        // for better performance as we won't call preventDefault
-        capture: true // scroll events don't bubble, they must be captured instead
-      });
 
+      // Kibana Cypress tests trigger a scroll event in many common situations when the options list div is appended
+      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
+      var timeoutId = setTimeout(function () {
+        window.addEventListener('scroll', closePopoverOnScroll, {
+          passive: true,
+          // for better performance as we won't call preventDefault
+          capture: true // scroll events don't bubble, they must be captured instead
+        });
+      }, 500);
       return function () {
         window.removeEventListener('scroll', closePopoverOnScroll, {
           capture: true
         });
+        clearTimeout(timeoutId);
       };
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);

package/es/components/text_diff/text_diff.js

@@ -44,18 +44,21 @@ export var useEuiTextDiff = function useEuiTextDiff(_ref) {
   var rendereredHtml = useMemo(function () {
     var html = [];
     if (textDiff) for (var i = 0; i < textDiff.length; i++) {
-      var Element = void 0;
+      var _Element = void 0;
       var el = textDiff[i];
-      if (el[0] === 1) Element = insertComponent;else if (el[0] === -1) Element = deleteComponent;else if (sameComponent) Element = sameComponent;
-      if (Element) html.push(___EmotionJSX(Element, {
+      if (el[0] === 1) _Element = insertComponent;else if (el[0] === -1) _Element = deleteComponent;else if (sameComponent) _Element = sameComponent;
+      if (_Element) html.push(___EmotionJSX(_Element, {
         key: i
       }, el[1]));else html.push(el[1]);
     }
     return html;
   }, [textDiff, deleteComponent, insertComponent, sameComponent]); // produces diff array
 
-  return [___EmotionJSX("span", _extends({
+  // specifically defining the return type here as the
+  // inferred type is not correct: array vs tuple
+  var textDiffResult = [___EmotionJSX("span", _extends({
     css: styles.euiTextDiff,
     className: classes
   }, rest), rendereredHtml), textDiff];
+  return textDiffResult;
 };

package/es/components/tool_tip/tool_tip.js

@@ -27,7 +27,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { findPopoverPosition, htmlIdGenerator } from '../../services';
+import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
 import { enqueueStateChange } from '../../services/react';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
@@ -179,6 +179,14 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       });
       _this.hideToolTip();
     });
+    _defineProperty(_assertThisInitialized(_this), "onEscapeKey", function (event) {
+      if (event.key === keys.ESCAPE) {
+        _this.setState({
+          hasFocus: false
+        }); // Allows mousing over back into the tooltip to work correctly
+        _this.hideToolTip();
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onMouseOut", function (event) {
       // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
       // left the anchor for a non-child.
@@ -250,6 +258,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
         ref: this.setAnchorRef,
         onBlur: this.onBlur,
         onFocus: this.onFocus,
+        onKeyDown: this.onEscapeKey,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
         id: id,

package/eui.d.ts

@@ -6150,6 +6150,7 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	    hideToolTip: () => void;
 	    onFocus: () => void;
 	    onBlur: () => void;
+	    onEscapeKey: (event: React.KeyboardEvent<HTMLSpanElement>) => void;
 	    onMouseOut: (event: ReactMouseEvent<HTMLSpanElement, MouseEvent>) => void;
 	    render(): React.JSX.Element;
 	}
@@ -11739,14 +11740,14 @@ declare module '@elastic/eui/src/components/flyout/flyout_resizable.styles' {
 declare module '@elastic/eui/src/components/flyout/flyout_resizable' {
 	import React from 'react';
 	import { EuiFlyoutProps } from '@elastic/eui/src/components/flyout/flyout';
-	export type EuiFlyoutResizableProps = Omit<EuiFlyoutProps, 'maxWidth'> & {
+	export type EuiFlyoutResizableProps = {
 	    maxWidth?: number;
 	    minWidth?: number;
 	    /**
 	     * Optional callback that fires on user resize with the new flyout width
 	     */
 	    onResize?: (width: number) => void;
-	};
+	} & Omit<EuiFlyoutProps, 'maxWidth' | 'onResize'>;
 	export const EuiFlyoutResizable: React.ForwardRefExoticComponent<Omit<EuiFlyoutResizableProps, "ref"> & React.RefAttributes<unknown>>;
 
 }
@@ -16234,7 +16235,7 @@ declare module '@elastic/eui/src/components/tabs/tabbed_content/tabbed_content'
 	};
 	export class EuiTabbedContent extends Component<EuiTabbedContentProps, EuiTabbedContentState> {
 	    static defaultProps: {
-	        autoFocus: string;
+	        autoFocus: EuiTabbedContentProps['autoFocus'];
 	    };
 	    private readonly rootId;
 	    private readonly tabsRef;
@@ -23603,7 +23604,7 @@ declare module '@elastic/eui/src/components/text_diff/text_diff.styles' {
 
 }
 declare module '@elastic/eui/src/components/text_diff/text_diff' {
-	import React, { HTMLAttributes, ElementType } from 'react';
+	import { HTMLAttributes, ElementType } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	interface Props {
 	    /**
@@ -23635,7 +23636,7 @@ declare module '@elastic/eui/src/components/text_diff/text_diff' {
 	    timeout?: number;
 	}
 	export type EuiTextDiffProps = CommonProps & Props & HTMLAttributes<HTMLElement>;
-	export const useEuiTextDiff: ({ className, insertComponent, deleteComponent, sameComponent, beforeText, afterText, timeout, ...rest }: EuiTextDiffProps) => (React.JSX.Element | [0 | 1 | -1, string][])[];
+	export const useEuiTextDiff: ({ className, insertComponent, deleteComponent, sameComponent, beforeText, afterText, timeout, ...rest }: EuiTextDiffProps) => [JSX.Element, [0 | 1 | -1, string][]];
 	export {};
 
 }

package/lib/components/flyout/flyout_resizable.js

@@ -31,6 +31,8 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+// If not omitted, the correct props don't show up in the docs prop table
+
 var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var size = _ref.size,
     maxWidth = _ref.maxWidth,
@@ -65,9 +67,18 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     setFlyoutRef = _useState6[1];
   var setRefs = (0, _services.useCombinedRefs)([setFlyoutRef, ref]);
   (0, _react.useEffect)(function () {
-    setCallOnResize(false); // Don't call `onResize` for non-user width changes
-    setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
-  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
+
+  // Update flyout width when consumers pass in a new `size`
+  (0, _react.useEffect)(function () {
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof size === 'number' ? getFlyoutMinMaxWidth(size) : 0);
+  }, [size, getFlyoutMinMaxWidth]);
 
   // Initial numbers to calculate from, on resize drag start
   var initialWidth = (0, _react.useRef)(0);

package/lib/components/popover/input_popover.js

@@ -177,16 +177,21 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
         }
         closePopover();
       };
-      window.addEventListener('scroll', closePopoverOnScroll, {
-        passive: true,
-        // for better performance as we won't call preventDefault
-        capture: true // scroll events don't bubble, they must be captured instead
-      });
 
+      // Kibana Cypress tests trigger a scroll event in many common situations when the options list div is appended
+      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
+      var timeoutId = setTimeout(function () {
+        window.addEventListener('scroll', closePopoverOnScroll, {
+          passive: true,
+          // for better performance as we won't call preventDefault
+          capture: true // scroll events don't bubble, they must be captured instead
+        });
+      }, 500);
       return function () {
         window.removeEventListener('scroll', closePopoverOnScroll, {
           capture: true
         });
+        clearTimeout(timeoutId);
       };
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);

package/lib/components/text_diff/text_diff.js

@@ -53,19 +53,22 @@ var useEuiTextDiff = function useEuiTextDiff(_ref) {
   var rendereredHtml = (0, _react.useMemo)(function () {
     var html = [];
     if (textDiff) for (var i = 0; i < textDiff.length; i++) {
-      var Element = void 0;
+      var _Element = void 0;
       var el = textDiff[i];
-      if (el[0] === 1) Element = insertComponent;else if (el[0] === -1) Element = deleteComponent;else if (sameComponent) Element = sameComponent;
-      if (Element) html.push((0, _react2.jsx)(Element, {
+      if (el[0] === 1) _Element = insertComponent;else if (el[0] === -1) _Element = deleteComponent;else if (sameComponent) _Element = sameComponent;
+      if (_Element) html.push((0, _react2.jsx)(_Element, {
         key: i
       }, el[1]));else html.push(el[1]);
     }
     return html;
   }, [textDiff, deleteComponent, insertComponent, sameComponent]); // produces diff array
 
-  return [(0, _react2.jsx)("span", _extends({
+  // specifically defining the return type here as the
+  // inferred type is not correct: array vs tuple
+  var textDiffResult = [(0, _react2.jsx)("span", _extends({
     css: styles.euiTextDiff,
     className: classes
   }, rest), rendereredHtml), textDiff];
+  return textDiffResult;
 };
 exports.useEuiTextDiff = useEuiTextDiff;

package/lib/components/tool_tip/tool_tip.js

@@ -187,6 +187,14 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
       });
       _this.hideToolTip();
     });
+    _defineProperty(_assertThisInitialized(_this), "onEscapeKey", function (event) {
+      if (event.key === _services.keys.ESCAPE) {
+        _this.setState({
+          hasFocus: false
+        }); // Allows mousing over back into the tooltip to work correctly
+        _this.hideToolTip();
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onMouseOut", function (event) {
       // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
       // left the anchor for a non-child.
@@ -258,6 +266,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
         ref: this.setAnchorRef,
         onBlur: this.onBlur,
         onFocus: this.onFocus,
+        onKeyDown: this.onEscapeKey,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
         id: id,

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

@@ -17,6 +17,8 @@ import { getPosition } from '../resizable_container/helpers';
 import { EuiFlyout } from './flyout';
 import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+// If not omitted, the correct props don't show up in the docs prop table
+
 export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var size = _ref.size,
     maxWidth = _ref.maxWidth,
@@ -51,9 +53,18 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     setFlyoutRef = _useState6[1];
   var setRefs = useCombinedRefs([setFlyoutRef, ref]);
   useEffect(function () {
-    setCallOnResize(false); // Don't call `onResize` for non-user width changes
-    setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
-  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
+
+  // Update flyout width when consumers pass in a new `size`
+  useEffect(function () {
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof size === 'number' ? getFlyoutMinMaxWidth(size) : 0);
+  }, [size, getFlyoutMinMaxWidth]);
 
   // Initial numbers to calculate from, on resize drag start
   var initialWidth = useRef(0);

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

@@ -159,16 +159,21 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
         }
         closePopover();
       };
-      window.addEventListener('scroll', closePopoverOnScroll, {
-        passive: true,
-        // for better performance as we won't call preventDefault
-        capture: true // scroll events don't bubble, they must be captured instead
-      });
 
+      // Kibana Cypress tests trigger a scroll event in many common situations when the options list div is appended
+      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
+      var timeoutId = setTimeout(function () {
+        window.addEventListener('scroll', closePopoverOnScroll, {
+          passive: true,
+          // for better performance as we won't call preventDefault
+          capture: true // scroll events don't bubble, they must be captured instead
+        });
+      }, 500);
       return function () {
         window.removeEventListener('scroll', closePopoverOnScroll, {
           capture: true
         });
+        clearTimeout(timeoutId);
       };
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);

package/optimize/es/components/text_diff/text_diff.js

@@ -43,18 +43,21 @@ export var useEuiTextDiff = function useEuiTextDiff(_ref) {
   var rendereredHtml = useMemo(function () {
     var html = [];
     if (textDiff) for (var i = 0; i < textDiff.length; i++) {
-      var Element = void 0;
+      var _Element = void 0;
       var el = textDiff[i];
-      if (el[0] === 1) Element = insertComponent;else if (el[0] === -1) Element = deleteComponent;else if (sameComponent) Element = sameComponent;
-      if (Element) html.push(___EmotionJSX(Element, {
+      if (el[0] === 1) _Element = insertComponent;else if (el[0] === -1) _Element = deleteComponent;else if (sameComponent) _Element = sameComponent;
+      if (_Element) html.push(___EmotionJSX(_Element, {
         key: i
       }, el[1]));else html.push(el[1]);
     }
     return html;
   }, [textDiff, deleteComponent, insertComponent, sameComponent]); // produces diff array
 
-  return [___EmotionJSX("span", _extends({
+  // specifically defining the return type here as the
+  // inferred type is not correct: array vs tuple
+  var textDiffResult = [___EmotionJSX("span", _extends({
     css: styles.euiTextDiff,
     className: classes
   }, rest), rendereredHtml), textDiff];
+  return textDiffResult;
 };

package/optimize/es/components/tool_tip/tool_tip.js

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { findPopoverPosition, htmlIdGenerator } from '../../services';
+import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
 import { enqueueStateChange } from '../../services/react';
 import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
@@ -172,6 +172,14 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       });
       _this.hideToolTip();
     });
+    _defineProperty(_assertThisInitialized(_this), "onEscapeKey", function (event) {
+      if (event.key === keys.ESCAPE) {
+        _this.setState({
+          hasFocus: false
+        }); // Allows mousing over back into the tooltip to work correctly
+        _this.hideToolTip();
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "onMouseOut", function (event) {
       // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
       // left the anchor for a non-child.
@@ -243,6 +251,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
         ref: this.setAnchorRef,
         onBlur: this.onBlur,
         onFocus: this.onFocus,
+        onKeyDown: this.onEscapeKey,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
         id: id,

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

@@ -26,6 +26,8 @@ var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ch
  */
 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; }
+// If not omitted, the correct props don't show up in the docs prop table
+
 var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var size = _ref.size,
     maxWidth = _ref.maxWidth,
@@ -60,9 +62,18 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     setFlyoutRef = _useState6[1];
   var setRefs = (0, _services.useCombinedRefs)([setFlyoutRef, ref]);
   (0, _react.useEffect)(function () {
-    setCallOnResize(false); // Don't call `onResize` for non-user width changes
-    setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
-  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
+
+  // Update flyout width when consumers pass in a new `size`
+  (0, _react.useEffect)(function () {
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof size === 'number' ? getFlyoutMinMaxWidth(size) : 0);
+  }, [size, getFlyoutMinMaxWidth]);
 
   // Initial numbers to calculate from, on resize drag start
   var initialWidth = (0, _react.useRef)(0);

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

@@ -168,16 +168,21 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
         }
         closePopover();
       };
-      window.addEventListener('scroll', closePopoverOnScroll, {
-        passive: true,
-        // for better performance as we won't call preventDefault
-        capture: true // scroll events don't bubble, they must be captured instead
-      });
 
+      // Kibana Cypress tests trigger a scroll event in many common situations when the options list div is appended
+      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
+      var timeoutId = setTimeout(function () {
+        window.addEventListener('scroll', closePopoverOnScroll, {
+          passive: true,
+          // for better performance as we won't call preventDefault
+          capture: true // scroll events don't bubble, they must be captured instead
+        });
+      }, 500);
       return function () {
         window.removeEventListener('scroll', closePopoverOnScroll, {
           capture: true
         });
+        clearTimeout(timeoutId);
       };
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);

package/optimize/lib/components/text_diff/text_diff.js

@@ -52,19 +52,22 @@ var useEuiTextDiff = function useEuiTextDiff(_ref) {
   var rendereredHtml = (0, _react.useMemo)(function () {
     var html = [];
     if (textDiff) for (var i = 0; i < textDiff.length; i++) {
-      var Element = void 0;
+      var _Element = void 0;
       var el = textDiff[i];
-      if (el[0] === 1) Element = insertComponent;else if (el[0] === -1) Element = deleteComponent;else if (sameComponent) Element = sameComponent;
-      if (Element) html.push((0, _react2.jsx)(Element, {
+      if (el[0] === 1) _Element = insertComponent;else if (el[0] === -1) _Element = deleteComponent;else if (sameComponent) _Element = sameComponent;
+      if (_Element) html.push((0, _react2.jsx)(_Element, {
         key: i
       }, el[1]));else html.push(el[1]);
     }
     return html;
   }, [textDiff, deleteComponent, insertComponent, sameComponent]); // produces diff array
 
-  return [(0, _react2.jsx)("span", (0, _extends2.default)({
+  // specifically defining the return type here as the
+  // inferred type is not correct: array vs tuple
+  var textDiffResult = [(0, _react2.jsx)("span", (0, _extends2.default)({
     css: styles.euiTextDiff,
     className: classes
   }, rest), rendereredHtml), textDiff];
+  return textDiffResult;
 };
 exports.useEuiTextDiff = useEuiTextDiff;

package/optimize/lib/components/tool_tip/tool_tip.js

@@ -181,6 +181,14 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
       });
       _this.hideToolTip();
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEscapeKey", function (event) {
+      if (event.key === _services.keys.ESCAPE) {
+        _this.setState({
+          hasFocus: false
+        }); // Allows mousing over back into the tooltip to work correctly
+        _this.hideToolTip();
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseOut", function (event) {
       // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
       // left the anchor for a non-child.
@@ -252,6 +260,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
         ref: this.setAnchorRef,
         onBlur: this.onBlur,
         onFocus: this.onFocus,
+        onKeyDown: this.onEscapeKey,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
         id: id,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "94.4.1",
+  "version": "94.5.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/flyout/flyout_resizable.js

@@ -26,6 +26,8 @@ var _excluded = ["size", "maxWidth", "minWidth", "onResize", "side", "type", "ch
  */
 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; }
+// If not omitted, the correct props don't show up in the docs prop table
+
 var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var size = _ref.size,
     maxWidth = _ref.maxWidth,
@@ -60,9 +62,18 @@ var EuiFlyoutResizable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     setFlyoutRef = _useState6[1];
   var setRefs = (0, _services.useCombinedRefs)([setFlyoutRef, ref]);
   (0, _react.useEffect)(function () {
-    setCallOnResize(false); // Don't call `onResize` for non-user width changes
-    setFlyoutWidth(flyoutRef ? getFlyoutMinMaxWidth(flyoutRef.offsetWidth) : 0);
-  }, [flyoutRef, getFlyoutMinMaxWidth, size]);
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth]);
+
+  // Update flyout width when consumers pass in a new `size`
+  (0, _react.useEffect)(function () {
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof size === 'number' ? getFlyoutMinMaxWidth(size) : 0);
+  }, [size, getFlyoutMinMaxWidth]);
 
   // Initial numbers to calculate from, on resize drag start
   var initialWidth = (0, _react.useRef)(0);

package/test-env/components/popover/input_popover.js

@@ -169,16 +169,21 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
         }
         closePopover();
       };
-      window.addEventListener('scroll', closePopoverOnScroll, {
-        passive: true,
-        // for better performance as we won't call preventDefault
-        capture: true // scroll events don't bubble, they must be captured instead
-      });
 
+      // Kibana Cypress tests trigger a scroll event in many common situations when the options list div is appended
+      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
+      var timeoutId = setTimeout(function () {
+        window.addEventListener('scroll', closePopoverOnScroll, {
+          passive: true,
+          // for better performance as we won't call preventDefault
+          capture: true // scroll events don't bubble, they must be captured instead
+        });
+      }, 500);
       return function () {
         window.removeEventListener('scroll', closePopoverOnScroll, {
           capture: true
         });
+        clearTimeout(timeoutId);
       };
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);

package/test-env/components/text_diff/text_diff.js

@@ -52,19 +52,22 @@ var useEuiTextDiff = function useEuiTextDiff(_ref) {
   var rendereredHtml = (0, _react.useMemo)(function () {
     var html = [];
     if (textDiff) for (var i = 0; i < textDiff.length; i++) {
-      var Element = void 0;
+      var _Element = void 0;
       var el = textDiff[i];
-      if (el[0] === 1) Element = insertComponent;else if (el[0] === -1) Element = deleteComponent;else if (sameComponent) Element = sameComponent;
-      if (Element) html.push((0, _react2.jsx)(Element, {
+      if (el[0] === 1) _Element = insertComponent;else if (el[0] === -1) _Element = deleteComponent;else if (sameComponent) _Element = sameComponent;
+      if (_Element) html.push((0, _react2.jsx)(_Element, {
         key: i
       }, el[1]));else html.push(el[1]);
     }
     return html;
   }, [textDiff, deleteComponent, insertComponent, sameComponent]); // produces diff array
 
-  return [(0, _react2.jsx)("span", (0, _extends2.default)({
+  // specifically defining the return type here as the
+  // inferred type is not correct: array vs tuple
+  var textDiffResult = [(0, _react2.jsx)("span", (0, _extends2.default)({
     css: styles.euiTextDiff,
     className: classes
   }, rest), rendereredHtml), textDiff];
+  return textDiffResult;
 };
 exports.useEuiTextDiff = useEuiTextDiff;

package/test-env/components/tool_tip/tool_tip.js

@@ -182,6 +182,14 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
       });
       _this.hideToolTip();
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEscapeKey", function (event) {
+      if (event.key === _services.keys.ESCAPE) {
+        _this.setState({
+          hasFocus: false
+        }); // Allows mousing over back into the tooltip to work correctly
+        _this.hideToolTip();
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onMouseOut", function (event) {
       // Prevent mousing over children from hiding the tooltip by testing for whether the mouse has
       // left the anchor for a non-child.
@@ -253,6 +261,7 @@ var EuiToolTip = /*#__PURE__*/function (_Component) {
         ref: this.setAnchorRef,
         onBlur: this.onBlur,
         onFocus: this.onFocus,
+        onKeyDown: this.onEscapeKey,
         onMouseOver: this.showToolTip,
         onMouseOut: this.onMouseOut,
         id: id,

package/src/components/date_picker/react-datepicker/LICENSE

@@ -1,21 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2018 HackerOne Inc and individual contributors
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/components/date_picker/react-datepicker/README.md

@@ -1,168 +0,0 @@
-_Forked by @elastic/eui from Hacker0x01/react-datepicker for accessibility and consolidation of services._
-
-Decision to not use a more traditional "vendor" directory approach includes redundant services, unnecessary dependencies, and a separate build pipeline. Most notably, `react-datepicker` included third-party popover and focus trap service and components that do not align with EUI interaction standards and were replaced, at parity, with EUI components.
-
-Other modifications:
-
-* Changed to `.js` naming to conform to EUI build processes
-* Removed files related to repository management and publishing
-* Adjusted `babel.rc` and `package.json` naming to avoid babel configuration conflicts
-
-___
-# React Date Picker
-
-[![npm version](https://badge.fury.io/js/react-datepicker.svg)](https://badge.fury.io/js/react-datepicker)
-[![Build Status](https://travis-ci.org/Hacker0x01/react-datepicker.svg?branch=master)](https://travis-ci.org/Hacker0x01/react-datepicker)
-[![Dependency Status](https://david-dm.org/Hacker0x01/react-datepicker.svg)](https://david-dm.org/Hacker0x01/react-datepicker)
-[![codecov](https://codecov.io/gh/Hacker0x01/react-datepicker/branch/master/graph/badge.svg)](https://codecov.io/gh/Hacker0x01/react-datepicker)
-[![Downloads](http://img.shields.io/npm/dm/react-datepicker.svg)](https://npmjs.org/package/react-datepicker)
-[![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/Hacker0x01/react-datepicker.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Hacker0x01/react-datepicker/context:javascript)
-[![Total Alerts](https://img.shields.io/lgtm/alerts/g/Hacker0x01/react-datepicker.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Hacker0x01/react-datepicker/alerts)
-
-A simple and reusable Datepicker component for React ([Demo](https://reactdatepicker.com/))
-
-![](https://cloud.githubusercontent.com/assets/1412392/5339491/c40de124-7ee1-11e4-9f07-9276e2545f27.png)
-
-## Installation
-
-The package can be installed via NPM:
-
-```
-npm install react-datepicker --save
-```
-
-You’ll need to install React, PropTypes, and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
-
-```js
-import React from "react";
-import DatePicker from "react-datepicker";
-import moment from "moment";
-
-import "react-datepicker/dist/react-datepicker.css";
-
-// CSS Modules, react-datepicker-cssmodules.css
-// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
-
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      startDate: moment()
-    };
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(date) {
-    this.setState({
-      startDate: date
-    });
-  }
-
-  render() {
-    return (
-      <DatePicker
-        selected={this.state.startDate}
-        onChange={this.handleChange}
-      />
-    );
-  }
-}
-```
-
-## Configuration
-
-The most basic use of the DatePicker can be described with:
-
-```js
-<DatePicker selected={this.state.date} onChange={this.handleChange} />
-```
-
-You can use `onSelect` event handler which fires each time some calendar date has been selected
-
-```js
-<DatePicker
-  selected={this.state.date}
-  onSelect={this.handleSelect} //when day is clicked
-  onChange={this.handleChange} //only when value has changed
-/>
-```
-
-`onClickOutside` handler may be useful to close datepicker in `inline` mode
-
-See [here](https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) for a full list of props that may be passed to the component. Examples are given on the [main website](https://hacker0x01.github.io/react-datepicker).
-
-### Time picker
-
-You can also include a time picker by adding the showTimeSelect prop
-
-```js
-<DatePicker
-  selected={this.state.date}
-  onChange={this.handleChange}
-  showTimeSelect
-  dateFormat="LLL"
-/>
-```
-
-Times will be displayed at 30-minute intervals by default (default configurable via timeInterval prop)
-
-More examples of how to use the time picker are given on the [main website](https://hacker0x01.github.io/react-datepicker)
-
-### Localization
-
-The date picker relies on [moment.js internationalization](http://momentjs.com/docs/#/i18n/) to localize its display components. By default, the date picker will use the locale globally set in moment, which is English. Locales can be changed in the following ways:
-
-* **Globally** by calling `moment.locale(lang)`
-* **Picker-specific** by providing the `locale` prop
-
-Locales can be further configured in moment with various [customization options](http://momentjs.com/docs/#/customization/).
-
-_As of version 0.23, the `weekdays` and `weekStart` DatePicker props have been removed. Instead, they can be configured with the `weekdaysMin` and `week.dow` moment locale customization options._
-
-## Compatibility
-
-### React
-
-We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
-
-Latest compatible versions:
-
-* React 15.5 or newer: All above React-datepicker v.0.40.0
-* React 15.4.1: needs React-datepicker v0.40.0, newer won't work (due to react-onclickoutside dependencies)
-* React 0.14 or newer: All above React-datepicker v0.13.0
-* React 0.13: React-datepicker v0.13.0
-* pre React 0.13: React-datepicker v0.6.2
-
-### Browser Support
-
-The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
-
-Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the [classlist polyfill](https://www.npmjs.com/package/classlist-polyfill) is needed, but this may change or break at any point in the future.
-
-## Local Development
-
-The `master` branch contains the latest version of the Datepicker component. To start your example app, you can run `yarn start`. This starts a simple webserver on http://localhost:8080.
-
-You can run `yarn test` to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in `/tests`). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
-
-### The examples
-
-The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
-
-## Accessibility
-
-### Keyboard support
-
-* _Left_: Move to the previous day.
-* _Right_: Move to the next day.
-* _Up_: Move to the previous week.
-* _Down_: Move to the next week.
-* _PgUp_: Move to the previous month.
-* _PgDn_: Move to the next month.
-* _Home_: Move to the previous year.
-* _End_: Move to the next year.
-* _Enter/Esc/Tab_: close the calendar. (Enter & Esc calls preventDefault)
-
-## License
-
-Copyright (c) 2018 HackerOne Inc. and individual contributors. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.

package/src/services/theme/README.md

@@ -1,153 +0,0 @@
-# JavaScript-based theming in EUI
-
-The style system to replace Sass and Sass-based design tokens in EUI.
-
-* Theme construction via a Proxy-based system with cascading and computed values
-  * Proxy-based: allows for the theme system to reference its own values (for reuse or for computational manipulation)
-  * Cascading: conceptually similar to Sass, where variable location and order are important
-  * Extendable: allows for appending style variables to the EUI theme structure, scoped to a React context provider
-  * Override-able: all theme tokens/variables can be altered by consumers
-* Theme consumption via React hook and HOC methods
-* Color mode support as first-class consideration
-  * "Light" and "dark" mode accounting
-  * Theme consumption is scoped to the current color mode (set in the context provider)
-* Style adaptaion based on a smal set of base values
-  * Text colors are calculated with WCAG Level AA (4.5:1) in mind
-  * Scalable typographic and spacing rhythms 
-
-
-## Layers of the theme system
-
-### Unbuilt theme
-
-_See [`euiThemeDefault`](../../themes/eui/theme.ts)_
-An unbuilt theme is a composed object of style values or `computed` functions.
-
-#### Style values
-
-Think design tokens or CSS property values. Ready to be consumed as-is in an application environment, using some JavaScript method of applying styles (i.e., a CSS-in-JS library is not required).
-
-#### `computed` functions
-
-These properties specify that the value depends upon some other value in the theme, in the shape of:
-
-```js
-computed(
-  ([size]) => size * 2 // predicate. What to do with the dependency values,
-  ['sizes.euiSize'], // dependency array, referencing other properties in the theme object
-)
-```
-
-The dependency array is optional. Omitting the array gives access to the computed theme.
-
-```js
-computed(
-  (theme) => theme.sizes.euiSize * 2
-)
-```
-
-### Theme system (built theme)
-
-_See [`EuiThemeDefault`](../../themes/eui/theme.ts)_
-A built theme by way of `buildTheme`, which transforms the object containing static style values and `computed` functions into a JavaScript Proxy object with handler traps. In this state, the theme is essentially inaccessible and immutable, that is, it requires `getComputed` to correctly order and access values and dependencies, and `set()` is disabled.
-
-### Computed theme
-
-_See [`EuiThemeContext`](../../themes/eui/context.ts)_
-A consumable theme object in which all `computed` function values have been computed; all values are accessible and usable in an application environment.
-Returned from `getComputed`, in the shape of:
-
-```js
-getComputed(
-  EuiThemeDefault, // Theme system (Proxy)
-  {}, // Modifications object
-  'light' // Color mode
-)
-```
-
-#### Modifications
-
-Because the theme system (built theme) is immutable, modifications can only be made at compute time by providing overrides and extensions for theme property values. These modifications are passed to the `EuiThemeProvider` via the `modify` prop and should match the high-level object shape of the theme. 
-
-#### Color mode
-
-Think light and dark mode. A theme has built-in color mode support, using the reserved `LIGHT` and `DARK` keys as a marker:
-
-```js
-colors: {
-  LIGHT: {...}
-  DARK : {...}
-}
-```
-The reserved color mode keys can be used at any level and location in a theme.
-`getComputed` will only compute and return values in the specified current color mode.
-
-
-## React-specific context
-
-### EuiThemeProvider
-
-_See [`EuiThemeProvider`](../../themes/eui/provider.ts)_
-Umbrella provider component that holds the various top-level theme configuration option providers: theme system, color mode, modifications; as well as the primary output provider: computed theme.
-The actual computation for computed theme values takes place at this level, where the three inputs are known (theme system, color mode, modifications) and the output (computed theme) can be cached for consumption. Input changes are captured and the output is recomputed.
-
-```js
-<EuiThemeProvider
-  theme={DefaultEuiTheme}
-  colorMode="light"
-  modify={{}}
-  />
-```
-
-All three props are optional. The default values for EUI will be used in the event that no configuration is provided. Note, however that colorMode switching will require consumers to maintain that app state.
-
-### useEuiTheme
-
-_See [`useEuiTheme`](../../themes/eui/hooks.tsx)_
-A custom React hook that returns the computed theme. This hook is little more than a wrapper around the `useContext` hook, accessing three of the top-level providers: computed theme, color mode, and modifications.
-
-```js
-const { euiTheme, colorMode, modifications } = useEuiTheme();
-```
-
-The `euiTheme` variable has TypeScript support, which will result in IDE autocomplete availability.
-
-### WithEuiTheme
-A higher-order-component that wraps `useEuiTheme` for React class components.
-
-
-___
-
-
-## Emotion
-
-[Emotion](https://emotion.sh/docs/introduction) is the CSS-in-JS library currently selected for use in EUI. Nothing in the EUI theming system is dependent upon Emotion packages, but the Emotion ecosystem will have impacts on generated styles.
-
-### Composition
-
-* Prefer the use of [`css` prop](https://emotion.sh/docs/css-prop) construction over [styled-component-like](https://emotion.sh/docs/styled) component construction
-* Babel-based build accommodation
-
-### Testing
-
-Snapshot testing ([as currently configured](https://emotion.sh/docs/testing#writing-a-test)) will result in generic `emotion-${n}` class names with the generated style object as part of the snapshot.
-
-* This seems good for EUI, but it also affects consumers
-  * Consumers will need to use the `@emotion/jest` snapshot serializer to avoid class name churn.
-  * Not ideal; unsure of any other solutions
-* During the conversion process, the snapshot diffs will look less than ideal when using `shallow` (a single wrapper element; DOM itself is unchanged):
-
-```diff
--  <div
--    className="euiTableRowCell__mobileHeader euiTableRowCell--hideForDesktop"
-+  <EmotionCssPropInternal
-+    __EMOTION_LABEL_PLEASE_DO_NOT_USE__="EuiTableRowCell"
-+    __EMOTION_TYPE_PLEASE_DO_NOT_USE__="td"
-+    className="euiTableRowCell"
-+    style={
-+      Object {
-+        "width": undefined,
-+    }
-+      }
-    >
-```

package/src/test/README.md

@@ -1,44 +0,0 @@
-# Testing-related utilities
-
-EUI uses many of the utilities in this directory in its own Jest tests and, in case they are useful for consuming apps, exports them from `@elastic/eui/lib/test` (commonjs) and `@elastic/eui/es/test` (esm)
-
-### findTestSubject
-
-Provides a quick mechanism for searching an Enzyme-mounted component tree for an element with a specific `data-test-subj` attribute.
-
-```js
-// if mountedComponent contains e.g. <button data-test-subj="custom-button"/>, this would return that button
-const component = findTestSubject(mountedComponent, 'custom-button');
-```
-
-### startThrowingReactWarnings
-
-Patches `console.warn` and `console.error` to throw any warnings or errors, causing Jest to fail the test. This catches warnings emitted by React.
-
-### stopThrowingReactWarnings
-
-Must be called after `startThrowingReactWarnings`, this unpatches the console and restores normal functionality.
-
-### sleep
-
-Returns an `await`able promise that resolves after the specified duration.
-
-```js
-doSomeAction();
-await sleep(500); // wait 500ms
-expect(resultOfSomeAction);
-```
-
-### takeMountedSnapshot
-
-Use this function to generate a Jest snapshot of components that have been fully rendered using Enzyme's `mount` method. Typically, a mounted component will result in a snapshot containing both React components and HTML elements. This function removes the React components, leaving only HTML elements in the snapshot.
-
-This function takes an optional configuration as a second argument, which supports one option: `hasArrayOutput`. Enable this option if the mounted component has multiple direct children, otherwise only the first is included in the snapshot. 
-
-```js
-expect(
-  takeMountedSnapshot(mountedComponent, {
-    hasArrayOutput: true,
-  })
-).toMatchSnapshot();
-```