@elastic/eui 114.3.0 → 115.0.0

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

@@ -32,23 +32,23 @@ var EuiToolTipPopover = exports.EuiToolTipPopover = function EuiToolTipPopover(_
     popoverRef = _ref.popoverRef,
     calculatedPosition = _ref.calculatedPosition,
     rest = (0, _objectWithoutProperties2.default)(_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/test-env/test/rtl/component_helpers.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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;
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 require("@testing-library/jest-dom");
@@ -69,81 +69,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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-    return _regenerator.default.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
-    return _regenerator.default.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee5() {
-    return _regenerator.default.wrap(function _callee5$(_context5) {
-      while (1) switch (_context5.prev = _context5.next) {
+  var _ref3 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
+    return _regenerator.default.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);
   };
 }();
 
@@ -152,16 +130,16 @@ var showEuiComboBoxOptions = exports.showEuiComboBoxOptions = /*#__PURE__*/funct
  */
 
 var waitForEuiContextMenuPanelTransition = exports.waitForEuiContextMenuPanelTransition = /*#__PURE__*/function () {
-  var _ref6 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee6() {
+  var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4() {
     var getPanels;
-    return _regenerator.default.wrap(function _callee6$(_context6) {
-      while (1) switch (_context6.prev = _context6.next) {
+    return _regenerator.default.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);
           });
@@ -176,11 +154,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);
   };
 }();