@elastic/eui 114.3.0 → 115.0.0

package/optimize/es/test/rtl/component_helpers.js

@@ -63,81 +63,59 @@ export var waitForEuiPopoverClose = /*#__PURE__*/function () {
 }();
 
 /**
- * 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.
  */
-export var 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 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);
+export var 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();
   };
-}();
-export var 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 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.
+ */
+export var focusEuiToolTipTrigger = function focusEuiToolTipTrigger(element) {
+  var cleanup = simulateFocusVisible(element);
+  fireEvent.focus(element);
+  return cleanup;
+};
 
 /**
  * EuiComboBox
  */
 
 export var 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:
           fireEvent.click(screen.getByTestSubject('comboBoxToggleListButton'));
-          _context5.next = 3;
+          _context3.next = 3;
           return waitForEuiPopoverOpen();
         case 3:
-          _context5.next = 5;
+          _context3.next = 5;
           return waitFor(function () {
             expect(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);
   };
 }();
 
@@ -146,16 +124,16 @@ export var showEuiComboBoxOptions = /*#__PURE__*/function () {
  */
 
 export var 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 waitFor(function () {
             expect(getPanels().length).toEqual(2);
           });
@@ -170,11 +148,11 @@ export var waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
           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/lib/components/basic_table/collapsed_item_actions.js

@@ -89,7 +89,6 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
           },
           toolTipContent: toolTipContent,
           toolTipProps: {
-            delay: 'long',
             // Avoid screen-readers announcing the same text twice
             disableScreenReaderOutput: typeof buttonContent === 'string' && buttonContent === toolTipContent
           }
@@ -113,8 +112,7 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
     "data-test-subj": "euiCollapsedItemActionsButton"
   });
   var withTooltip = !actionsDisabled && (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-    content: allActionsTooltip,
-    delay: "long"
+    content: allActionsTooltip
   }, popoverButton);
   return (0, _react2.jsx)(_popover.EuiPopover, {
     className: className,

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

@@ -41,7 +41,6 @@ var DefaultItemAction = exports.DefaultItemAction = function DefaultItemAction(_
   var tooltipContent = (0, _action_types.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/lib/components/datagrid/controls/display_selector.js

@@ -361,8 +361,7 @@ var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function u
       },
       panelClassName: "euiDataGrid__displayPopoverPanel",
       button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-        content: buttonLabel,
-        delay: "long"
+        content: buttonLabel
       }, (0, _react2.jsx)(_button.EuiButtonIcon, {
         size: "xs",
         iconType: "controls",

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

@@ -42,8 +42,7 @@ var useDataGridFullScreenSelector = exports.useDataGridFullScreenSelector = func
     fullScreenButtonActive = _useEuiI18n2[1];
   var fullScreenSelector = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-      content: isFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, fullScreenButtonActive, " (", (0, _react2.jsx)("kbd", null, "esc"), ")") : fullScreenButton,
-      delay: "long"
+      content: isFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, fullScreenButtonActive, " (", (0, _react2.jsx)("kbd", null, "esc"), ")") : fullScreenButton
     }, (0, _react2.jsx)(_button.EuiButtonIcon, {
       size: "xs",
       iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',

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

@@ -45,8 +45,7 @@ var useDataGridKeyboardShortcuts = exports.useDataGridKeyboardShortcuts = functi
       anchorPosition: "downRight",
       panelPaddingSize: "none",
       button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-        content: title,
-        delay: "long"
+        content: title
       }, (0, _react2.jsx)(_button.EuiButtonIcon, {
         size: "xs",
         iconType: "keyboard",

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

@@ -95,6 +95,18 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
   }
   (0, _inherits2.default)(EuiFilterSelectItemClass, _Component);
   return (0, _createClass2.default)(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__*/(0, _react.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) {
@@ -103,31 +115,39 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
           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__*/(0, _react.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 = (0, _objectWithoutProperties2.default)(_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 = (0, _objectWithoutProperties2.default)(_this$props4, _excluded);
       var styles = (0, _filter_select_item.euiFilterSelectItemStyles)(theme);
       var cssStyles = [styles.euiFilterSelectItem, isFocused && styles.isFocused];
       var classes = (0, _classnames.default)('euiFilterSelectItem', className);
       var hasToolTip =
       // we're using isValidElement here as EuiToolTipAnchor uses
       // cloneElement to enhance the element with required attributes
-      /*#__PURE__*/_react.default.isValidElement(children) && !disabled && toolTipContent;
+      /*#__PURE__*/(0, _react.isValidElement)(children) && !disabled && toolTipContent;
       var anchorProps = undefined;
       if (hasToolTip) {
         var _toolTipProps$anchorP, _toolTipProps$anchorP2;
@@ -137,7 +157,6 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
         }) : {
           style: style
         };
-        this.toggleToolTip(isFocused !== null && isFocused !== void 0 ? isFocused : false);
       }
       var iconNode;
       if (showIcons) {

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

@@ -135,7 +135,6 @@ var EuiKeyPadMenuItem = exports.EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_
   }, label)));
   return betaBadgeLabel ? (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({}, betaBadgeTooltipProps, {
     title: betaBadgeLabel,
-    content: betaBadgeTooltipContent,
-    delay: "long"
+    content: betaBadgeTooltipContent
   }), button) : button;
 };

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

@@ -177,8 +177,7 @@ var EuiListGroupItem = exports.EuiListGroupItem = function EuiListGroupItem(_ref
       style: style
     }, (0, _react2.jsx)(_tool_tip.EuiToolTip, (0, _extends2.default)({
       content: toolTipText !== null && toolTipText !== void 0 ? toolTipText : label,
-      position: "right",
-      delay: "long"
+      position: "right"
     }, toolTipProps, {
       anchorClassName: anchorClasses,
       anchorProps: anchorPropsAndCss

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

@@ -171,8 +171,11 @@ var EuiMarkdownEditorDropZone = exports.EuiMarkdownEditorDropZone = function Eui
     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 (0, _react2.jsx)("div", (0, _extends2.default)({}, rootProps, {
     css: cssStyles,
     className: classes

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

@@ -27,6 +27,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Side Public License, v 1.
  */
 
+/**
+ * A helper type to ensure the `button` property is defined
+ * on an ` EuiMarkdownEditorUiPlugin ` object.
+ */
+
 var boldItalicButtons = [{
   id: 'mdBold',
   label: 'Bold',
@@ -101,7 +106,7 @@ var EuiMarkdownEditorToolbar = exports.EuiMarkdownEditorToolbar = /*#__PURE__*/(
     markdownActions = _ref2.markdownActions,
     viewMode = _ref2.viewMode,
     onClickPreview = _ref2.onClickPreview,
-    uiPlugins = _ref2.uiPlugins,
+    _uiPlugins = _ref2.uiPlugins,
     selectedNode = _ref2.selectedNode,
     right = _ref2.right;
   var _useContext = (0, _react.useContext)(_markdown_context.EuiMarkdownContext),
@@ -115,6 +120,9 @@ var EuiMarkdownEditorToolbar = exports.EuiMarkdownEditorToolbar = /*#__PURE__*/(
   var isPreviewing = viewMode === _markdown_modes.MODE_VIEWING;
   var isEditable = !isPreviewing && !readOnly;
   var styles = (0, _services.useEuiMemoizedStyles)(_markdown_editor_toolbar.euiMarkdownEditorToolbarStyles);
+  var uiPlugins = _uiPlugins.filter(function (uiPlugin) {
+    return !!uiPlugin.button;
+  });
   return (0, _react2.jsx)("div", {
     ref: ref,
     css: styles.euiMarkdownEditorToolbar,
@@ -126,8 +134,7 @@ var EuiMarkdownEditorToolbar = exports.EuiMarkdownEditorToolbar = /*#__PURE__*/(
   }, boldItalicButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       key: item.id,
-      content: item.label,
-      delay: "long"
+      content: item.label
     }, (0, _react2.jsx)(EuiMarkdownEditorToolbarButton, {
       selectedNode: selectedNode,
       handleMdButtonClick: handleMdButtonClick,
@@ -143,8 +150,7 @@ var EuiMarkdownEditorToolbar = exports.EuiMarkdownEditorToolbar = /*#__PURE__*/(
   }), listButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       key: item.id,
-      content: item.label,
-      delay: "long"
+      content: item.label
     }, (0, _react2.jsx)(EuiMarkdownEditorToolbarButton, {
       selectedNode: selectedNode,
       handleMdButtonClick: handleMdButtonClick,
@@ -160,8 +166,7 @@ var EuiMarkdownEditorToolbar = exports.EuiMarkdownEditorToolbar = /*#__PURE__*/(
   }), quoteCodeLinkButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       key: item.id,
-      content: item.label,
-      delay: "long"
+      content: item.label
     }, (0, _react2.jsx)(EuiMarkdownEditorToolbarButton, {
       selectedNode: selectedNode,
       handleMdButtonClick: handleMdButtonClick,
@@ -179,8 +184,7 @@ var EuiMarkdownEditorToolbar = exports.EuiMarkdownEditorToolbar = /*#__PURE__*/(
       button = _ref3.button;
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       key: name,
-      content: button.label,
-      delay: "long"
+      content: button.label
     }, (0, _react2.jsx)(EuiMarkdownEditorToolbarButton, {
       selectedNode: selectedNode,
       handleMdButtonClick: handleMdButtonClick,

package/optimize/lib/components/portal/portal.js

@@ -1,118 +1,93 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiPortalClass = exports.EuiPortal = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+exports.EuiPortal = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
 var _reactDom = require("react-dom");
 var _services = require("../../services");
 var _component_defaults = require("../provider/component_defaults");
-var _react2 = require("@emotion/react");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); } /*
+/*
  * 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.
- */ /**
- * NOTE: We can't test this component because Enzyme doesn't support rendering
- * into portals.
  */
+
+var usePortalEffect = typeof document === 'undefined' ? _react.useEffect : _react.useLayoutEffect;
 var INSERT_POSITIONS = ['after', 'before'];
 var insertPositions = {
   after: 'afterend',
   before: 'beforebegin'
 };
-var EuiPortal = exports.EuiPortal = function EuiPortal(props) {
-  var propsWithDefaults = (0, _component_defaults.usePropsWithComponentDefaults)('EuiPortal', props);
-  return (0, _react2.jsx)(EuiPortalClass, propsWithDefaults);
-};
-var EuiPortalClass = exports.EuiPortalClass = /*#__PURE__*/function (_Component) {
-  function EuiPortalClass(props) {
-    var _this;
-    (0, _classCallCheck2.default)(this, EuiPortalClass);
-    _this = _callSuper(this, EuiPortalClass, [props]);
-    _this.state = {
-      portalNode: null
-    };
-    return _this;
-  }
-  (0, _inherits2.default)(EuiPortalClass, _Component);
-  return (0, _createClass2.default)(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);
+var EuiPortal = exports.EuiPortal = /*#__PURE__*/(0, _react.memo)(function (_props) {
+  var props = (0, _component_defaults.usePropsWithComponentDefaults)('EuiPortal', _props);
+  var children = props.children,
+    insert = props.insert,
+    setPortalRef = props.portalRef;
+  var portalRef = (0, _react.useRef)(setPortalRef);
+  var _useContext = (0, _react.useContext)(_services.EuiNestedThemeContext),
+    hasDifferentColorFromGlobalTheme = _useContext.hasDifferentColorFromGlobalTheme,
+    colorClassName = _useContext.colorClassName;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_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);
+  };
+  (0, _react.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);
-        }
-      }
+  /* 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: "updatePortalRef",
-    value: function updatePortalRef(ref) {
-      if (this.props.portalRef) {
-        this.props.portalRef(ref);
-      }
-    }
-  }, {
-    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__*/(0, _reactDom.createPortal)(this.props.children, portalNode);
-    }
-  }]);
-}(_react.Component);
-(0, _defineProperty2.default)(EuiPortalClass, "contextType", _services.EuiNestedThemeContext);
+      updatePortalRef(null);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- on mount only
+  }, []);
+  if (!portalNode) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _reactDom.createPortal)(children, portalNode);
+});
+EuiPortal.displayName = 'EuiPortal';