@elastic/eui 62.0.3 → 63.0.0

package/es/global_styling/mixins/_helpers.js

@@ -80,24 +80,42 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
  *    Others like Safari, won't show anything at all.
  */
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 
 
+// TODO: How do we use Emotion to output the CSS class utilities instead?
 export var euiYScroll = function euiYScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      height = _ref5.height;
+
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiYScroll = function useEuiYScroll() {
+  var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      height = _ref6.height;
+
   var euiTheme = useEuiTheme();
-  return euiYScroll(euiTheme);
+  return euiYScroll(euiTheme, {
+    height: height
+  });
 };
 export var euiYScrollWithShadows = function euiYScrollWithShadows(euiTheme) {
-  return "\n  ".concat(euiYScroll(euiTheme), "\n  ").concat(euiOverflowShadowStyles(euiTheme, {
+  var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      height = _ref7.height;
+
+  return "\n  ".concat(euiYScroll(euiTheme, {
+    height: height
+  }), "\n  ").concat(euiOverflowShadowStyles(euiTheme, {
     direction: 'y'
   }), "\n");
 };
 export var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
+  var _ref8 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+      height = _ref8.height;
+
   var euiTheme = useEuiTheme();
-  return euiYScrollWithShadows(euiTheme);
+  return euiYScrollWithShadows(euiTheme, {
+    height: height
+  });
 };
 export var euiXScroll = function euiXScroll(euiTheme) {
   return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
@@ -116,10 +134,10 @@ export var useEuiXScrollWithShadows = function useEuiXScrollWithShadows() {
   return euiXScrollWithShadows(euiTheme);
 };
 export var euiOverflowScroll = function euiOverflowScroll(euiTheme) {
-  var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      direction = _ref5.direction,
-      _ref5$mask = _ref5.mask,
-      mask = _ref5$mask === void 0 ? false : _ref5$mask;
+  var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      direction = _ref9.direction,
+      _ref9$mask = _ref9.mask,
+      mask = _ref9$mask === void 0 ? false : _ref9$mask;
 
   switch (direction) {
     case 'y':

package/es/global_styling/reset/global_styles.js

@@ -42,7 +42,7 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiTheme), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}};label:styles;");
+  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiTheme), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return ___EmotionJSX(Global, {
     styles: styles
   });

package/es/services/{breakpoint.js → breakpoint/breakpoint.js}

@@ -5,14 +5,9 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import { keysOf } from '../components/common';
-export var BREAKPOINTS = {
-  xl: 1200,
-  l: 992,
-  m: 768,
-  s: 575,
-  xs: 0
-};
+import { keysOf } from '../../components/common';
+import { breakpoint } from '../../themes/amsterdam/global_styling/variables/_breakpoint';
+export var BREAKPOINTS = breakpoint;
 export var BREAKPOINT_KEYS = keysOf(BREAKPOINTS);
 /**
  * Given the current `width` and an object of `EuiBreakpoints`,
@@ -27,7 +22,7 @@ export var BREAKPOINT_KEYS = keysOf(BREAKPOINTS);
 export function getBreakpoint(width) {
   var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BREAKPOINTS;
   // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
-  return keysOf(BREAKPOINTS).find(function (key) {
+  return BREAKPOINT_KEYS.find(function (key) {
     return breakpoints[key] <= width;
   });
 }

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

@@ -1,3 +1,5 @@
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -17,40 +19,46 @@ 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, useContext, 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 _useEuiTheme = useEuiTheme(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
 
-  var _useState = useState(false),
+  var _useState = useState((typeof window === "undefined" ? "undefined" : _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);
+};
+/**
+ * Hook util / syntactical sugar
+ */
+
+export var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
+  var currentBreakpoint = useContext(CurrentEuiBreakpointContext);
+  return currentBreakpoint;
+};

package/es/services/breakpoint/index.js

@@ -0,0 +1,10 @@
+/*
+ * 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 './currentEuiBreakpoint';
+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 './currentEuiBreakpoint';
+/**
+ * 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);
+  };
 }();