@elastic/eui 62.0.3 → 62.2.1

package/es/services/{hooks/useIsWithinBreakpoints.js → breakpoint/current_breakpoint.js}

@@ -17,40 +17,38 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { useState, useEffect } from 'react';
-import { isWithinBreakpoints } from '../breakpoint';
+import React, { createContext, useState, useEffect } from 'react';
+import { useEuiTheme } from '../theme';
+import { throttle } from '../throttle';
+import { getBreakpoint } from './breakpoint';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var CurrentEuiBreakpointContext = /*#__PURE__*/createContext(undefined);
 /**
- * Given the current window.innerWidth and an array of breakpoint keys,
- * this hook stores state and returns true or false if the window.innerWidth
- * falls within any of the named breakpoints.
- *
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
- * @param {boolean} isActive Manages whether the resize handler should be active
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ * Top level provider (nested within EuiProvider) which provides a single
+ * resize listener that returns the current breakpoint based on window width
  */
 
-export function useIsWithinBreakpoints(sizes) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+export var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
+  var children = _ref.children;
 
-  var _useState = useState(false),
+  var _useEuiTheme = useEuiTheme(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var _useState = useState(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth, breakpoints) : undefined),
       _useState2 = _slicedToArray(_useState, 2),
-      isWithinBreakpointsValue = _useState2[0],
-      setIsWithinBreakpointsValue = _useState2[1];
+      currentBreakpoint = _useState2[0],
+      setCurrentBreakpoint = _useState2[1];
 
   useEffect(function () {
-    function handleResize() {
-      setIsWithinBreakpointsValue(isWithinBreakpoints(window.innerWidth, sizes));
-    }
-
-    if (isActive) {
-      window.removeEventListener('resize', handleResize);
-      window.addEventListener('resize', handleResize);
-      handleResize();
-    }
-
+    var onWindowResize = throttle(function () {
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth, breakpoints));
+    }, 50);
+    window.addEventListener('resize', onWindowResize);
     return function () {
-      return window.removeEventListener('resize', handleResize);
+      return window.removeEventListener('resize', onWindowResize);
     };
-  }, [sizes, isActive]);
-  return isWithinBreakpointsValue;
-}
+  }, [breakpoints]);
+  return ___EmotionJSX(CurrentEuiBreakpointContext.Provider, {
+    value: currentBreakpoint
+  }, children);
+};

package/es/services/breakpoint/current_breakpoint_hook.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useContext } from 'react';
+import { CurrentEuiBreakpointContext } from './current_breakpoint';
+/**
+ * Hook util / syntactical sugar for useContext()
+ *
+ * This hook is in its own separate file to make mocking it
+ * as a testenv easy for Jest unit tests
+ */
+
+export var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
+  var currentBreakpoint = useContext(CurrentEuiBreakpointContext);
+  return currentBreakpoint;
+};

package/es/services/breakpoint/index.js

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+export * from './breakpoint';
+export * from './current_breakpoint';
+export * from './current_breakpoint_hook';
+export * from './useIsWithinBreakpoints';

package/es/services/breakpoint/useIsWithinBreakpoints.js

@@ -0,0 +1,24 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { useCurrentEuiBreakpoint } from './current_breakpoint_hook';
+/**
+ * Given the current window.innerWidth and an array of breakpoint keys,
+ * this hook stores state and returns true or false if the window.innerWidth
+ * falls within any of the named breakpoints.
+ *
+ * @param {_EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
+ * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
+ *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
+ * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ */
+
+export var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
+  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
+};

package/es/services/hooks/index.js

@@ -8,7 +8,6 @@
 export * from './useDependentState';
 export * from './useCombinedRefs';
 export * from './useForceRender';
-export * from './useIsWithinBreakpoints';
 export * from './useLatest';
 export * from './useMouseMove';
 export * from './useUpdateEffect';

package/es/services/index.js

@@ -10,7 +10,7 @@ import * as keys from './keys';
 export { keys };
 export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from './alignment';
-export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint } from './breakpoint';
+export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, useIsWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint } from './breakpoint';
 export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, makeHighContrastColor, makeDisabledContrastColor } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';

package/es/test/rtl/component_helpers.js

@@ -9,9 +9,10 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+import '@testing-library/jest-dom';
 import { waitFor } from '@testing-library/react';
 /**
- * Ensure the EuiPopover being tested is open/closed before contiuning
+ * Ensure the EuiPopover being tested is open/closed before continuing
  * Note: Because EuiPopover is portalled, we want to query `document`
  * instead of the `container` returned by RTL's render()
  */
@@ -69,4 +70,62 @@ export var waitForEuiPopoverClose = /*#__PURE__*/function () {
   return function waitForEuiPopoverClose() {
     return _ref2.apply(this, arguments);
   };
+}();
+/**
+ * Ensure the EuiToolTip being tested is open and visible before continuing
+ */
+
+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();
+            });
+
+          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 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);
+  };
 }();