@elastic/eui 62.0.2 → 62.2.0

package/{lib/services → test-env/services/breakpoint}/breakpoint.js

@@ -9,7 +9,9 @@ exports.isWithinBreakpoints = isWithinBreakpoints;
 exports.isWithinMaxBreakpoint = isWithinMaxBreakpoint;
 exports.isWithinMinBreakpoint = isWithinMinBreakpoint;
 
-var _common = require("../components/common");
+var _common = require("../../components/common");
+
+var _breakpoint = require("../../themes/amsterdam/global_styling/variables/_breakpoint");
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -18,13 +20,7 @@ var _common = require("../components/common");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var BREAKPOINTS = {
-  xl: 1200,
-  l: 992,
-  m: 768,
-  s: 575,
-  xs: 0
-};
+var BREAKPOINTS = _breakpoint.breakpoint;
 exports.BREAKPOINTS = BREAKPOINTS;
 var BREAKPOINT_KEYS = (0, _common.keysOf)(BREAKPOINTS);
 /**
@@ -42,7 +38,7 @@ exports.BREAKPOINT_KEYS = BREAKPOINT_KEYS;
 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 (0, _common.keysOf)(BREAKPOINTS).find(function (key) {
+  return BREAKPOINT_KEYS.find(function (key) {
     return breakpoints[key] <= width;
   });
 }

package/test-env/services/breakpoint/currentEuiBreakpoint.js

@@ -0,0 +1,37 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCurrentEuiBreakpoint = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = require("react");
+
+var _breakpoint = require("./breakpoint");
+
+var _currentEuiBreakpoint = require("./currentEuiBreakpoint");
+
+/*
+ * 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.
+ */
+
+/**
+ * Jest tests *likely* will not have a wrapping EuiProvider. If they don't,
+ * this test mock mimics CurrentEuiBreakpoint logic (w/o resize observers).
+ */
+var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
+  var context = (0, _react.useContext)(_currentEuiBreakpoint.CurrentEuiBreakpointContext);
+  if (context !== undefined) return context; // Component has been wrapped, everything is fine.
+
+  return (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== undefined ? (0, _breakpoint.getBreakpoint)(window.innerWidth) : undefined;
+};
+
+exports.useCurrentEuiBreakpoint = useCurrentEuiBreakpoint;

package/test-env/services/breakpoint/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _breakpoint = require("./breakpoint");
+
+Object.keys(_breakpoint).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _breakpoint[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _breakpoint[key];
+    }
+  });
+});
+
+var _currentEuiBreakpoint = require("./currentEuiBreakpoint");
+
+Object.keys(_currentEuiBreakpoint).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _currentEuiBreakpoint[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _currentEuiBreakpoint[key];
+    }
+  });
+});
+
+var _useIsWithinBreakpoints = require("./useIsWithinBreakpoints");
+
+Object.keys(_useIsWithinBreakpoints).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useIsWithinBreakpoints[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _useIsWithinBreakpoints[key];
+    }
+  });
+});

package/test-env/services/breakpoint/useIsWithinBreakpoints.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsWithinBreakpoints = void 0;
+
+var _currentEuiBreakpoint = require("./currentEuiBreakpoint");
+
+/*
+ * 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.
+ */
+
+/**
+ * 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`
+ */
+var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
+  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var currentBreakpoint = (0, _currentEuiBreakpoint.useCurrentEuiBreakpoint)();
+  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
+};
+
+exports.useIsWithinBreakpoints = useIsWithinBreakpoints;

package/test-env/services/hooks/index.js

@@ -43,19 +43,6 @@ Object.keys(_useForceRender).forEach(function (key) {
   });
 });
 
-var _useIsWithinBreakpoints = require("./useIsWithinBreakpoints");
-
-Object.keys(_useIsWithinBreakpoints).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useIsWithinBreakpoints[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _useIsWithinBreakpoints[key];
-    }
-  });
-});
-
 var _useLatest = require("./useLatest");
 
 Object.keys(_useLatest).forEach(function (key) {

package/test-env/services/index.js

@@ -19,8 +19,12 @@ var _exportNames = {
   BREAKPOINT_KEYS: true,
   getBreakpoint: true,
   isWithinBreakpoints: true,
+  useIsWithinBreakpoints: true,
   isWithinMaxBreakpoint: true,
   isWithinMinBreakpoint: true,
+  CurrentEuiBreakpointContext: true,
+  CurrentEuiBreakpointProvider: true,
+  useCurrentEuiBreakpoint: true,
   isColorDark: true,
   isValidHex: true,
   calculateContrast: true,
@@ -112,6 +116,18 @@ Object.defineProperty(exports, "Comparators", {
     return _sort.Comparators;
   }
 });
+Object.defineProperty(exports, "CurrentEuiBreakpointContext", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.CurrentEuiBreakpointContext;
+  }
+});
+Object.defineProperty(exports, "CurrentEuiBreakpointProvider", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.CurrentEuiBreakpointProvider;
+  }
+});
 Object.defineProperty(exports, "DEFAULT_VISUALIZATION_COLOR", {
   enumerable: true,
   get: function get() {
@@ -563,12 +579,24 @@ Object.defineProperty(exports, "useColorStopsState", {
     return _color_picker.useColorStopsState;
   }
 });
+Object.defineProperty(exports, "useCurrentEuiBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useCurrentEuiBreakpoint;
+  }
+});
 Object.defineProperty(exports, "useGeneratedHtmlId", {
   enumerable: true,
   get: function get() {
     return _accessibility.useGeneratedHtmlId;
   }
 });
+Object.defineProperty(exports, "useIsWithinBreakpoints", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinBreakpoints;
+  }
+});
 
 var keys = _interopRequireWildcard(require("./keys"));
 

package/test-env/test/rtl/component_helpers.js

@@ -5,12 +5,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = void 0;
+exports.waitForEuiToolTipVisible = exports.waitForEuiToolTipHidden = exports.waitForEuiPopoverOpen = exports.waitForEuiPopoverClose = void 0;
 
 var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
 
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 
+require("@testing-library/jest-dom");
+
 var _react = require("@testing-library/react");
 
 /*
@@ -22,7 +24,7 @@ var _react = require("@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()
  */
@@ -83,5 +85,69 @@ var waitForEuiPopoverClose = /*#__PURE__*/function () {
     return _ref2.apply(this, arguments);
   };
 }();
+/**
+ * Ensure the EuiToolTip being tested is open and visible before continuing
+ */
+
+
+exports.waitForEuiPopoverClose = waitForEuiPopoverClose;
+
+var 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();
+            });
+
+          case 2:
+            return _context3.abrupt("return", _context3.sent);
+
+          case 3:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  }));
+
+  return function waitForEuiToolTipVisible() {
+    return _ref3.apply(this, arguments);
+  };
+}();
+
+exports.waitForEuiToolTipVisible = waitForEuiToolTipVisible;
+
+var 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);
+  };
+}();
 
-exports.waitForEuiPopoverClose = waitForEuiPopoverClose;
+exports.waitForEuiToolTipHidden = waitForEuiToolTipHidden;

package/lib/services/hooks/useIsWithinBreakpoints.js

@@ -1,57 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
-
-var _react = require("react");
-
-var _breakpoint = require("../breakpoint");
-
-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."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-/**
- * 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`
- */
-function useIsWithinBreakpoints(sizes) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isWithinBreakpointsValue = _useState2[0],
-      setIsWithinBreakpointsValue = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    function handleResize() {
-      setIsWithinBreakpointsValue((0, _breakpoint.isWithinBreakpoints)(window.innerWidth, sizes));
-    }
-
-    if (isActive) {
-      window.removeEventListener('resize', handleResize);
-      window.addEventListener('resize', handleResize);
-      handleResize();
-    }
-
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, [sizes, isActive]);
-  return isWithinBreakpointsValue;
-}

package/optimize/es/services/hooks/useIsWithinBreakpoints.js

@@ -1,46 +0,0 @@
-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
- * 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 { useState, useEffect } from 'react';
-import { isWithinBreakpoints } from '../breakpoint';
-/**
- * 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`
- */
-
-export function useIsWithinBreakpoints(sizes) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isWithinBreakpointsValue = _useState2[0],
-      setIsWithinBreakpointsValue = _useState2[1];
-
-  useEffect(function () {
-    function handleResize() {
-      setIsWithinBreakpointsValue(isWithinBreakpoints(window.innerWidth, sizes));
-    }
-
-    if (isActive) {
-      window.removeEventListener('resize', handleResize);
-      window.addEventListener('resize', handleResize);
-      handleResize();
-    }
-
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, [sizes, isActive]);
-  return isWithinBreakpointsValue;
-}

package/optimize/lib/services/hooks/useIsWithinBreakpoints.js

@@ -1,57 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = require("react");
-
-var _breakpoint = require("../breakpoint");
-
-/*
- * 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.
- */
-
-/**
- * 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`
- */
-function useIsWithinBreakpoints(sizes) {
-  var isActive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isWithinBreakpointsValue = _useState2[0],
-      setIsWithinBreakpointsValue = _useState2[1];
-
-  (0, _react.useEffect)(function () {
-    function handleResize() {
-      setIsWithinBreakpointsValue((0, _breakpoint.isWithinBreakpoints)(window.innerWidth, sizes));
-    }
-
-    if (isActive) {
-      window.removeEventListener('resize', handleResize);
-      window.addEventListener('resize', handleResize);
-      handleResize();
-    }
-
-    return function () {
-      return window.removeEventListener('resize', handleResize);
-    };
-  }, [sizes, isActive]);
-  return isWithinBreakpointsValue;
-}

package/src/components/breadcrumbs/_breadcrumbs.scss

@@ -1,79 +0,0 @@
-/**
- * 1. Add vertical space between breadcrumbs,
- *    but make sure the whole breadcrumb set doesn't add space below itself
- */
-
-.euiBreadcrumbs__list {
-  @include euiFontSizeS;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  min-width: 0; // Ensure it shrinks if the window is narrow
-  margin-bottom: -$euiSizeXS; /* 1 */
-}
-
-.euiBreadcrumb {
-  margin-bottom: $euiSizeXS; /* 1 */
-  display: flex;
-  align-items: center;
-
-  &:not(.euiBreadcrumb--last) {
-    color: $euiTextSubduedColor;
-
-    &::after {
-      content: '';
-      margin: $euiSizeXS $euiBreadcrumbSpacing 0;
-      width: 1px;
-      height: $euiSize;
-      transform: translateY(-1px) rotate(15deg);
-      background: $euiColorLightShade;
-      flex-shrink: 0;
-    }
-  }
-}
-
-.euiBreadcrumb--collapsed {
-  flex-shrink: 0;
-}
-
-.euiBreadcrumb--last {
-  font-weight: $euiFontWeightMedium;
-}
-
-.euiBreadcrumbs__inPopover .euiBreadcrumb--last .euiBreadcrumb__content {
-  font-weight: $euiFontWeightRegular;
-  color: $euiTextSubduedColor;
-}
-
-.euiBreadcrumbs--truncate {
-  .euiBreadcrumbs__list {
-    white-space: nowrap;
-    flex-wrap: nowrap;
-  }
-
-  .euiBreadcrumb:not(.euiBreadcrumb--collapsed) {
-    .euiBreadcrumb__content {
-      max-width: $euiBreadcrumbTruncateWidth;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &.euiBreadcrumb--last .euiBreadcrumb__content {
-      max-width: none;
-    }
-  }
-
-  .euiBreadcrumb {
-    overflow: hidden;
-  }
-}
-
-.euiBreadcrumbs--truncate,
-.euiBreadcrumb--truncate {
-  .euiBreadcrumb__content {
-    @include euiTextTruncate;
-    max-width: $euiBreadcrumbTruncateWidth;
-    text-align: center;
-    vertical-align: baseline;
-  }
-}

package/src/components/breadcrumbs/_index.scss

@@ -1,2 +0,0 @@
-@import 'variables';
-@import 'breadcrumbs';

package/src/components/breadcrumbs/_variables.scss

@@ -1,2 +0,0 @@
-$euiBreadcrumbSpacing: $euiSizeS !default;
-$euiBreadcrumbTruncateWidth: $euiSize * 10 !default;