@elastic/eui 114.3.0 → 115.0.0

package/lib/components/tool_tip/tool_tip_popover.js

@@ -33,23 +33,23 @@ var EuiToolTipPopover = exports.EuiToolTipPopover = function EuiToolTipPopover(_
     popoverRef = _ref.popoverRef,
     calculatedPosition = _ref.calculatedPosition,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var popover = (0, _react.useRef)();
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _tool_tip.euiToolTipStyles)(euiTheme);
+  var popover = (0, _react.useRef)(null);
+  var styles = (0, _services.useEuiMemoizedStyles)(_tool_tip.euiToolTipStyles);
   var cssStyles = [styles.euiToolTip, calculatedPosition && styles[calculatedPosition]];
   var updateDimensions = (0, _react.useCallback)(function () {
     requestAnimationFrame(function () {
-      // Because of this delay, sometimes `positionToolTip` becomes unavailable.
+      // Because of this delay, the popover may have unmounted by the time the RAF fires.
       if (popover.current) {
         positionToolTip();
       }
     });
   }, [positionToolTip]);
-  var setPopoverRef = function setPopoverRef(ref) {
+  var setPopoverRef = (0, _react.useCallback)(function (ref) {
+    popover.current = ref;
     if (popoverRef) {
       popoverRef(ref);
     }
-  };
+  }, [popoverRef]);
   (0, _react.useEffect)(function () {
     document.body.classList.add('euiBody-hasPortalContent');
     window.addEventListener('resize', updateDimensions);

package/lib/test/rtl/component_helpers.d.ts

@@ -6,9 +6,6 @@
 export declare const waitForEuiPopoverOpen: () => Promise<void>;
 export declare const waitForEuiPopoverClose: () => Promise<void>;
 
-export declare const waitForEuiToolTipVisible: () => Promise<void>;
-export declare const waitForEuiToolTipHidden: () => Promise<void>;
-
 export declare const showEuiComboBoxOptions: () => Promise<void>;
 
 export declare const waitForEuiContextMenuPanelTransition: () => Promise<void>;

package/lib/test/rtl/component_helpers.js

@@ -4,7 +4,7 @@ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" ==
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.waitForEuiContextMenuPanelTransition = exports.showEuiComboBoxOptions = void 0;
+exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = exports.waitForEuiContextMenuPanelTransition = exports.simulateFocusVisible = exports.showEuiComboBoxOptions = exports.focusEuiToolTipTrigger = void 0;
 require("@testing-library/jest-dom");
 var _react = require("@testing-library/react");
 var _custom_render = require("./custom_render");
@@ -68,81 +68,59 @@ var waitForEuiPopoverClose = exports.waitForEuiPopoverClose = /*#__PURE__*/funct
 }();
 
 /**
- * Ensure the EuiToolTip being tested is open and visible before continuing
+ * jsdom does not track keyboard vs. mouse input modality, so `:focus-visible`
+ * always returns false. Call this before `fireEvent.focus()` on an element that
+ * should be treated as keyboard-focused.
+ *
+ * Returns a cleanup function, call it after test assertions to restore the spy.
  */
-var waitForEuiToolTipVisible = exports.waitForEuiToolTipVisible = /*#__PURE__*/function () {
-  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-      while (1) switch (_context3.prev = _context3.next) {
-        case 0:
-          _context3.next = 2;
-          return (0, _react.waitFor)(function () {
-            var tooltip = document.querySelector('.euiToolTipPopover');
-            expect(tooltip).toBeVisible();
-          }, {
-            timeout: 3000
-          } // Account for long delay on tooltips
-          );
-        case 2:
-          return _context3.abrupt("return", _context3.sent);
-        case 3:
-        case "end":
-          return _context3.stop();
-      }
-    }, _callee3);
-  }));
-  return function waitForEuiToolTipVisible() {
-    return _ref3.apply(this, arguments);
+var simulateFocusVisible = exports.simulateFocusVisible = function simulateFocusVisible(element) {
+  var originalMatches = Element.prototype.matches.bind(element);
+  var spy = jest.spyOn(element, 'matches').mockImplementation(function (selector) {
+    return selector === ':focus-visible' ? true : originalMatches(selector);
+  });
+  return function () {
+    return spy.mockRestore();
   };
-}();
-var waitForEuiToolTipHidden = exports.waitForEuiToolTipHidden = /*#__PURE__*/function () {
-  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
-        case 0:
-          _context4.next = 2;
-          return (0, _react.waitFor)(function () {
-            var tooltip = document.querySelector('.euiToolTipPopover');
-            expect(tooltip).toBeNull();
-          });
-        case 2:
-          return _context4.abrupt("return", _context4.sent);
-        case 3:
-        case "end":
-          return _context4.stop();
-      }
-    }, _callee4);
-  }));
-  return function waitForEuiToolTipHidden() {
-    return _ref4.apply(this, arguments);
-  };
-}();
+};
+
+/**
+ * Prefer this over `fireEvent.focus()` in tooltip tests. Plain `fireEvent.focus`
+ * does not set `:focus-visible` in jsdom and will not trigger the tooltip.
+ *
+ * Returns a cleanup function to restore the mock after assertions.
+ */
+var focusEuiToolTipTrigger = exports.focusEuiToolTipTrigger = function focusEuiToolTipTrigger(element) {
+  var cleanup = simulateFocusVisible(element);
+  _react.fireEvent.focus(element);
+  return cleanup;
+};
 
 /**
  * EuiComboBox
  */
 
 var showEuiComboBoxOptions = exports.showEuiComboBoxOptions = /*#__PURE__*/function () {
-  var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
-    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+  var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
           _react.fireEvent.click(_custom_render.screen.getByTestSubject('comboBoxToggleListButton'));
-          _context5.next = 3;
+          _context3.next = 3;
           return waitForEuiPopoverOpen();
         case 3:
-          _context5.next = 5;
+          _context3.next = 5;
           return (0, _react.waitFor)(function () {
             expect(_custom_render.screen.getByRole('listbox')).toBeInTheDocument();
           });
         case 5:
         case "end":
-          return _context5.stop();
+          return _context3.stop();
       }
-    }, _callee5);
+    }, _callee3);
   }));
   return function showEuiComboBoxOptions() {
-    return _ref5.apply(this, arguments);
+    return _ref3.apply(this, arguments);
   };
 }();
 
@@ -151,16 +129,16 @@ var showEuiComboBoxOptions = exports.showEuiComboBoxOptions = /*#__PURE__*/funct
  */
 
 var waitForEuiContextMenuPanelTransition = exports.waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
-  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
+  var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
     var getPanels;
-    return _regeneratorRuntime().wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
         case 0:
           // Used document instead of container or screen due to context menus living in portals
           getPanels = function getPanels() {
             return document.querySelectorAll('.euiContextMenuPanel');
           }; // 2 panels will appear for the transition animation
-          _context6.next = 3;
+          _context4.next = 3;
           return (0, _react.waitFor)(function () {
             expect(getPanels().length).toEqual(2);
           });
@@ -175,11 +153,11 @@ var waitForEuiContextMenuPanelTransition = exports.waitForEuiContextMenuPanelTra
           expect(getPanels().length).toEqual(1);
         case 6:
         case "end":
-          return _context6.stop();
+          return _context4.stop();
       }
-    }, _callee6);
+    }, _callee4);
   }));
   return function waitForEuiContextMenuPanelTransition() {
-    return _ref6.apply(this, arguments);
+    return _ref4.apply(this, arguments);
   };
 }();

package/optimize/es/components/basic_table/collapsed_item_actions.js

@@ -79,7 +79,6 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
           },
           toolTipContent: toolTipContent,
           toolTipProps: {
-            delay: 'long',
             // Avoid screen-readers announcing the same text twice
             disableScreenReaderOutput: typeof buttonContent === 'string' && buttonContent === toolTipContent
           }
@@ -103,8 +102,7 @@ export var CollapsedItemActions = function CollapsedItemActions(_ref) {
     "data-test-subj": "euiCollapsedItemActionsButton"
   });
   var withTooltip = !actionsDisabled && ___EmotionJSX(EuiToolTip, {
-    content: allActionsTooltip,
-    delay: "long"
+    content: allActionsTooltip
   }, popoverButton);
   return ___EmotionJSX(EuiPopover, {
     className: className,

package/optimize/es/components/basic_table/default_item_action.js

@@ -32,7 +32,6 @@ export var DefaultItemAction = function DefaultItemAction(_ref) {
   var tooltipContent = callWithItemIfFunction(item)(action.description);
   var tooltipProps = {
     content: tooltipContent,
-    delay: 'long',
     // Avoid screen-readers announcing the same text twice
     disableScreenReaderOutput: typeof actionContent === 'string' && actionContent === tooltipContent
   };

package/optimize/es/components/datagrid/controls/display_selector.js

@@ -353,8 +353,7 @@ export var useDataGridDisplaySelector = function useDataGridDisplaySelector(show
       },
       panelClassName: "euiDataGrid__displayPopoverPanel",
       button: ___EmotionJSX(EuiToolTip, {
-        content: buttonLabel,
-        delay: "long"
+        content: buttonLabel
       }, ___EmotionJSX(EuiButtonIcon, {
         size: "xs",
         iconType: "controls",

package/optimize/es/components/datagrid/controls/fullscreen_selector.js

@@ -32,8 +32,7 @@ export var useDataGridFullScreenSelector = function useDataGridFullScreenSelecto
     fullScreenButtonActive = _useEuiI18n2[1];
   var fullScreenSelector = useMemo(function () {
     return ___EmotionJSX(EuiToolTip, {
-      content: isFullScreen ? ___EmotionJSX(React.Fragment, null, fullScreenButtonActive, " (", ___EmotionJSX("kbd", null, "esc"), ")") : fullScreenButton,
-      delay: "long"
+      content: isFullScreen ? ___EmotionJSX(React.Fragment, null, fullScreenButtonActive, " (", ___EmotionJSX("kbd", null, "esc"), ")") : fullScreenButton
     }, ___EmotionJSX(EuiButtonIcon, {
       size: "xs",
       iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',

package/optimize/es/components/datagrid/controls/keyboard_shortcuts.js

@@ -35,8 +35,7 @@ export var useDataGridKeyboardShortcuts = function useDataGridKeyboardShortcuts(
       anchorPosition: "downRight",
       panelPaddingSize: "none",
       button: ___EmotionJSX(EuiToolTip, {
-        content: title,
-        delay: "long"
+        content: title
       }, ___EmotionJSX(EuiButtonIcon, {
         size: "xs",
         iconType: "keyboard",

package/optimize/es/components/filter_group/filter_select_item.js

@@ -19,7 +19,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-import React, { Component, createRef } from 'react';
+import React, { Component, createRef, isValidElement } from 'react';
 import classNames from 'classnames';
 import { withEuiTheme } from '../../services';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
@@ -87,6 +87,18 @@ export var EuiFilterSelectItemClass = /*#__PURE__*/function (_Component) {
   }
   _inherits(EuiFilterSelectItemClass, _Component);
   return _createClass(EuiFilterSelectItemClass, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props2 = this.props,
+        isFocused = _this$props2.isFocused,
+        toolTipContent = _this$props2.toolTipContent,
+        disabled = _this$props2.disabled,
+        children = _this$props2.children;
+      if ( /*#__PURE__*/isValidElement(children) && !disabled && toolTipContent) {
+        this.toggleToolTip(isFocused !== null && isFocused !== void 0 ? isFocused : false);
+      }
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (this.props.isFocused && !prevProps.isFocused) {
@@ -95,31 +107,39 @@ export var EuiFilterSelectItemClass = /*#__PURE__*/function (_Component) {
           block: 'nearest'
         });
       }
+      var _this$props3 = this.props,
+        isFocused = _this$props3.isFocused,
+        toolTipContent = _this$props3.toolTipContent,
+        disabled = _this$props3.disabled,
+        children = _this$props3.children;
+      if ( /*#__PURE__*/isValidElement(children) && !disabled && toolTipContent && isFocused !== prevProps.isFocused) {
+        this.toggleToolTip(isFocused !== null && isFocused !== void 0 ? isFocused : false);
+      }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        theme = _this$props2.theme,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        disabled = _this$props2.disabled,
-        checked = _this$props2.checked,
-        isFocused = _this$props2.isFocused,
-        showIcons = _this$props2.showIcons,
-        toolTipContent = _this$props2.toolTipContent,
-        toolTipProps = _this$props2.toolTipProps,
-        style = _this$props2.style,
-        truncateContent = _this$props2.truncateContent,
-        forwardRef = _this$props2.forwardRef,
-        rest = _objectWithoutProperties(_this$props2, _excluded);
+      var _this$props4 = this.props,
+        theme = _this$props4.theme,
+        children = _this$props4.children,
+        className = _this$props4.className,
+        disabled = _this$props4.disabled,
+        checked = _this$props4.checked,
+        isFocused = _this$props4.isFocused,
+        showIcons = _this$props4.showIcons,
+        toolTipContent = _this$props4.toolTipContent,
+        toolTipProps = _this$props4.toolTipProps,
+        style = _this$props4.style,
+        truncateContent = _this$props4.truncateContent,
+        forwardRef = _this$props4.forwardRef,
+        rest = _objectWithoutProperties(_this$props4, _excluded);
       var styles = euiFilterSelectItemStyles(theme);
       var cssStyles = [styles.euiFilterSelectItem, isFocused && styles.isFocused];
       var classes = classNames('euiFilterSelectItem', className);
       var hasToolTip =
       // we're using isValidElement here as EuiToolTipAnchor uses
       // cloneElement to enhance the element with required attributes
-      /*#__PURE__*/React.isValidElement(children) && !disabled && toolTipContent;
+      /*#__PURE__*/isValidElement(children) && !disabled && toolTipContent;
       var anchorProps = undefined;
       if (hasToolTip) {
         var _toolTipProps$anchorP, _toolTipProps$anchorP2;
@@ -129,7 +149,6 @@ export var EuiFilterSelectItemClass = /*#__PURE__*/function (_Component) {
         }) : {
           style: style
         };
-        this.toggleToolTip(isFocused !== null && isFocused !== void 0 ? isFocused : false);
       }
       var iconNode;
       if (showIcons) {

package/optimize/es/components/key_pad_menu/key_pad_menu_item.js

@@ -126,7 +126,6 @@ export var EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_ref) {
   }, label)));
   return betaBadgeLabel ? ___EmotionJSX(EuiToolTip, _extends({}, betaBadgeTooltipProps, {
     title: betaBadgeLabel,
-    content: betaBadgeTooltipContent,
-    delay: "long"
+    content: betaBadgeTooltipContent
   }), button) : button;
 };

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

@@ -171,8 +171,7 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
       style: style
     }, ___EmotionJSX(EuiToolTip, _extends({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
-      position: "right",
-      delay: "long"
+      position: "right"
     }, toolTipProps, {
       anchorClassName: anchorClasses,
       anchorProps: anchorPropsAndCss

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

@@ -163,8 +163,11 @@ export var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props)
     getInputProps = _useDropzone.getInputProps,
     open = _useDropzone.open;
   var rootProps = _objectSpread({}, getRootProps());
-  if (readOnly) rootProps.role = undefined; // Unset the default `role="button"` attribute which sets a misleading pointer icon
-
+  /* Unset the default `role="button"` attribute to prevent invalid nested interactive elements.
+  The dropzone has `noClick=true` and `noKeyboard=true` set via `useDropzone`.
+  Keyboard drop interactions expect the drop zone element to have `role="button` but we're supporting
+  adding files via a standalone footer button instead." */
+  rootProps.role = undefined;
   return ___EmotionJSX("div", _extends({}, rootProps, {
     css: cssStyles,
     className: classes

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

@@ -16,6 +16,11 @@ import { EuiToolTip } from '../tool_tip';
 import { MODE_VIEWING } from './markdown_modes';
 import { EuiMarkdownContext } from './markdown_context';
 import { euiMarkdownEditorToolbarStyles } from './markdown_editor_toolbar.styles';
+
+/**
+ * A helper type to ensure the `button` property is defined
+ * on an ` EuiMarkdownEditorUiPlugin ` object.
+ */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var boldItalicButtons = [{
   id: 'mdBold',
@@ -91,7 +96,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
     markdownActions = _ref2.markdownActions,
     viewMode = _ref2.viewMode,
     onClickPreview = _ref2.onClickPreview,
-    uiPlugins = _ref2.uiPlugins,
+    _uiPlugins = _ref2.uiPlugins,
     selectedNode = _ref2.selectedNode,
     right = _ref2.right;
   var _useContext = useContext(EuiMarkdownContext),
@@ -105,6 +110,9 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
   var isPreviewing = viewMode === MODE_VIEWING;
   var isEditable = !isPreviewing && !readOnly;
   var styles = useEuiMemoizedStyles(euiMarkdownEditorToolbarStyles);
+  var uiPlugins = _uiPlugins.filter(function (uiPlugin) {
+    return !!uiPlugin.button;
+  });
   return ___EmotionJSX("div", {
     ref: ref,
     css: styles.euiMarkdownEditorToolbar,
@@ -116,8 +124,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
   }, boldItalicButtons.map(function (item) {
     return ___EmotionJSX(EuiToolTip, {
       key: item.id,
-      content: item.label,
-      delay: "long"
+      content: item.label
     }, ___EmotionJSX(EuiMarkdownEditorToolbarButton, {
       selectedNode: selectedNode,
       handleMdButtonClick: handleMdButtonClick,
@@ -133,8 +140,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
   }), listButtons.map(function (item) {
     return ___EmotionJSX(EuiToolTip, {
       key: item.id,
-      content: item.label,
-      delay: "long"
+      content: item.label
     }, ___EmotionJSX(EuiMarkdownEditorToolbarButton, {
       selectedNode: selectedNode,
       handleMdButtonClick: handleMdButtonClick,
@@ -150,8 +156,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
   }), quoteCodeLinkButtons.map(function (item) {
     return ___EmotionJSX(EuiToolTip, {
       key: item.id,
-      content: item.label,
-      delay: "long"
+      content: item.label
     }, ___EmotionJSX(EuiMarkdownEditorToolbarButton, {
       selectedNode: selectedNode,
       handleMdButtonClick: handleMdButtonClick,
@@ -169,8 +174,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
       button = _ref3.button;
     return ___EmotionJSX(EuiToolTip, {
       key: name,
-      content: button.label,
-      delay: "long"
+      content: button.label
     }, ___EmotionJSX(EuiMarkdownEditorToolbarButton, {
       selectedNode: selectedNode,
       handleMdButtonClick: handleMdButtonClick,

package/optimize/es/components/portal/portal.js

@@ -1,11 +1,4 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,99 +7,80 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * Side Public License, v 1.
  */
 
-/**
- * NOTE: We can't test this component because Enzyme doesn't support rendering
- * into portals.
- */
-
-import React, { Component } from 'react';
+import { memo, useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { EuiNestedThemeContext } from '../../services';
 import { usePropsWithComponentDefaults } from '../provider/component_defaults';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+var usePortalEffect = typeof document === 'undefined' ? useEffect : useLayoutEffect;
 var INSERT_POSITIONS = ['after', 'before'];
 var insertPositions = {
   after: 'afterend',
   before: 'beforebegin'
 };
-export var EuiPortal = function EuiPortal(props) {
-  var propsWithDefaults = usePropsWithComponentDefaults('EuiPortal', props);
-  return ___EmotionJSX(EuiPortalClass, propsWithDefaults);
-};
-export var EuiPortalClass = /*#__PURE__*/function (_Component) {
-  function EuiPortalClass(props) {
-    var _this;
-    _classCallCheck(this, EuiPortalClass);
-    _this = _callSuper(this, EuiPortalClass, [props]);
-    _this.state = {
-      portalNode: null
-    };
-    return _this;
-  }
-  _inherits(EuiPortalClass, _Component);
-  return _createClass(EuiPortalClass, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var insert = this.props.insert;
-      var portalNode = document.createElement('div');
-      portalNode.dataset.euiportal = 'true';
-      if (insert == null) {
-        // no insertion defined, append to body
-        document.body.appendChild(portalNode);
-      } else {
-        // inserting before or after an element
-        var sibling = insert.sibling,
-          position = insert.position;
-        sibling.insertAdjacentElement(insertPositions[position], portalNode);
-      }
-      this.setThemeColor(portalNode);
-      this.updatePortalRef(portalNode);
+export var EuiPortal = /*#__PURE__*/memo(function (_props) {
+  var props = usePropsWithComponentDefaults('EuiPortal', _props);
+  var children = props.children,
+    insert = props.insert,
+    setPortalRef = props.portalRef;
+  var portalRef = useRef(setPortalRef);
+  var _useContext = useContext(EuiNestedThemeContext),
+    hasDifferentColorFromGlobalTheme = _useContext.hasDifferentColorFromGlobalTheme,
+    colorClassName = _useContext.colorClassName;
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    portalNode = _useState2[0],
+    setPortalNode = _useState2[1];
 
-      // Update state with portalNode to intentionally trigger component rerender
-      // and call createPortal with correct root element in render()
-      this.setState({
-        portalNode: portalNode
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var portalNode = this.state.portalNode;
-      if (portalNode !== null && portalNode !== void 0 && portalNode.parentNode) {
-        portalNode.parentNode.removeChild(portalNode);
-      }
-      this.updatePortalRef(null);
+  // Set the inherited color of the portal based on the wrapping EuiThemeProvider
+  var setThemeColor = function setThemeColor(portalNode) {
+    if (hasDifferentColorFromGlobalTheme && insert == null) {
+      portalNode.classList.add(colorClassName);
     }
+  };
+  var updatePortalRef = function updatePortalRef(ref) {
+    var _portalRef$current;
+    (_portalRef$current = portalRef.current) === null || _portalRef$current === void 0 || _portalRef$current.call(portalRef, ref);
+  };
+  useEffect(function () {
+    portalRef.current = setPortalRef;
+  }, [setPortalRef]);
 
-    // Set the inherited color of the portal based on the wrapping EuiThemeProvider
-  }, {
-    key: "setThemeColor",
-    value: function setThemeColor(portalNode) {
-      if (this.context) {
-        var _this$context = this.context,
-          hasDifferentColorFromGlobalTheme = _this$context.hasDifferentColorFromGlobalTheme,
-          colorClassName = _this$context.colorClassName;
-        if (hasDifferentColorFromGlobalTheme && this.props.insert == null) {
-          portalNode.classList.add(colorClassName);
-        }
-      }
-    }
-  }, {
-    key: "updatePortalRef",
-    value: function updatePortalRef(ref) {
-      if (this.props.portalRef) {
-        this.props.portalRef(ref);
-      }
+  /* Uses `useLayoutEffect` on client-side instead of `useEffect` to ensure the portal
+  node is created and inserted into the DOM synchronously. This matches the same timing
+  as the previous class component `componentDidMount` behavior.
+  Using `useEffect` would add an additional render cycle that would break expected
+  behavior of e.g. `@hello-pangea/dnd` which handles keyboard focus and doesn't expect
+  a rerender. This falls back to `useEffect` for SSR to avoid console errors. `useEffect` will
+  be a no-op, same as `componentDidMount` */
+  usePortalEffect(function () {
+    var node = document.createElement('div');
+    node.dataset.euiportal = 'true';
+    if (insert == null) {
+      // no insertion defined, append to body
+      document.body.appendChild(node);
+    } else {
+      // inserting before or after an element
+      var sibling = insert.sibling,
+        position = insert.position;
+      sibling.insertAdjacentElement(insertPositions[position], node);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var portalNode = this.state.portalNode;
-      if (!portalNode) {
-        return null;
+    setThemeColor(node);
+    updatePortalRef(node);
+
+    // Update state with portalNode to intentionally trigger component rerender
+    // and call createPortal with the correct root element
+    setPortalNode(node);
+    return function () {
+      if (node !== null && node !== void 0 && node.parentNode) {
+        node.parentNode.removeChild(node);
       }
-      return /*#__PURE__*/createPortal(this.props.children, portalNode);
-    }
-  }]);
-}(Component);
-_defineProperty(EuiPortalClass, "contextType", EuiNestedThemeContext);
+      updatePortalRef(null);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- on mount only
+  }, []);
+  if (!portalNode) {
+    return null;
+  }
+  return /*#__PURE__*/createPortal(children, portalNode);
+});
+EuiPortal.displayName = 'EuiPortal';