@elastic/eui 62.0.3 → 63.0.0

package/optimize/lib/services/breakpoint/currentEuiBreakpoint.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof3 = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCurrentEuiBreakpoint = exports.CurrentEuiBreakpointProvider = exports.CurrentEuiBreakpointContext = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _theme = require("../theme");
+
+var _throttle = require("../throttle");
+
+var _breakpoint = require("./breakpoint");
+
+var _react2 = require("@emotion/react");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/*
+ * 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.
+ */
+var CurrentEuiBreakpointContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+/**
+ * Top level provider (nested within EuiProvider) which provides a single
+ * resize listener that returns the current breakpoint based on window width
+ */
+
+exports.CurrentEuiBreakpointContext = CurrentEuiBreakpointContext;
+
+var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
+  var children = _ref.children;
+
+  var _useEuiTheme = (0, _theme.useEuiTheme)(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var _useState = (0, _react.useState)((typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== undefined ? (0, _breakpoint.getBreakpoint)(window.innerWidth, breakpoints) : undefined),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      currentBreakpoint = _useState2[0],
+      setCurrentBreakpoint = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    var onWindowResize = (0, _throttle.throttle)(function () {
+      setCurrentBreakpoint((0, _breakpoint.getBreakpoint)(window.innerWidth, breakpoints));
+    }, 50);
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      return window.removeEventListener('resize', onWindowResize);
+    };
+  }, [breakpoints]);
+  return (0, _react2.jsx)(CurrentEuiBreakpointContext.Provider, {
+    value: currentBreakpoint
+  }, children);
+};
+/**
+ * Hook util / syntactical sugar
+ */
+
+
+exports.CurrentEuiBreakpointProvider = CurrentEuiBreakpointProvider;
+
+var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
+  var currentBreakpoint = (0, _react.useContext)(CurrentEuiBreakpointContext);
+  return currentBreakpoint;
+};
+
+exports.useCurrentEuiBreakpoint = useCurrentEuiBreakpoint;

package/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/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/optimize/lib/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "62.0.3",
+  "version": "63.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -115,7 +115,7 @@
     "@cypress/code-coverage": "^3.9.12",
     "@cypress/react": "^5.10.3",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^47.0.0",
+    "@elastic/charts": "^47.2.0",
     "@elastic/datemath": "^5.0.3",
     "@elastic/eslint-config-kibana": "^0.15.0",
     "@emotion/babel-preset-css-prop": "^11.2.0",

package/src/components/control_bar/_control_bar.scss

@@ -105,7 +105,7 @@
 
 .euiControlBar__breadcrumbs {
   .euiBreadcrumb {
-    &:not(.euiBreadcrumb--last) .euiBreadcrumb__content {
+    &:not(:last-of-type) .euiBreadcrumb__content {
       color: makeHighContrastColor($euiTextSubduedColor, $euiControlBarBackground);
     }
 

package/src/components/header/_index.scss

@@ -6,5 +6,4 @@
 @import 'header_links/index';
 @import 'header_logo';
 @import 'header_alert/index';
-@import 'header_breadcrumbs/index';
 @import 'header_section/index';

package/src/components/index.scss

@@ -4,7 +4,6 @@
 @import 'badge/index';
 @import 'basic_table/index';
 @import 'button/index';
-@import 'breadcrumbs/index';
 @import 'call_out/index';
 @import 'card/index';
 @import 'code/index';
@@ -15,7 +14,6 @@
 @import 'control_bar/index';
 @import 'date_picker/index';
 @import 'datagrid/index';
-@import 'description_list/index';
 @import 'drag_and_drop/index';
 @import 'empty_prompt/index';
 @import 'filter_group/index';
@@ -32,7 +30,6 @@
 @import 'pagination/index';
 @import 'panel/index';
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
-@import 'portal/index';
 @import 'tree_view/index';
 @import 'resizable_container/index';
 @import 'side_nav/index';
@@ -42,7 +39,5 @@
 @import 'suggest/index';
 @import 'table/index';
 @import 'tabs/index';
-@import 'toast/index';
-@import 'token/index';
 @import 'tool_tip/index';
 @import 'tour/index';

package/src/components/page/_index.scss

@@ -1,7 +1,2 @@
-@import 'mixins';
-
-@import 'page';
-@import 'page_body/index';
 @import 'page_content/index';
 @import 'page_side_bar/index';
-@import 'page_header/index';

package/src/components/page/page_content/_page_content_body.scss

@@ -1,5 +1,14 @@
 .euiPageContentBody {
-  @include euiPageRestrictWidth;
+  &--restrictWidth-default,
+  &--restrictWidth-custom {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+  }
+
+  &--restrictWidth-default {
+    max-width: $euiPageDefaultMaxWidth;
+  }
 }
 
 // Uses the same values as EuiPanel

package/src/components/tabs/_tabs.scss

@@ -84,6 +84,8 @@
 
   .euiTabs--xlarge & {
     padding: $euiSizeS $euiSizeL;
+    line-height: $euiSize * 4.5;
+    height: $euiSize * 4.5;
 
     .euiTab__content {
       @include euiFontSizeL;

package/src/themes/amsterdam/overrides/_breadcrumbs.scss

@@ -1,12 +0,0 @@
-
-// Inset outline otherwise the truncation cuts it off
-.euiBreadcrumb__content.euiLink:focus {
-  outline-offset: -1px;
-}
-
-// Fix all the font-weights to be consistent
-.euiBreadcrumb--last,
-.euiBreadcrumb__content,
-.euiBreadcrumbs__inPopover .euiBreadcrumb--last .euiBreadcrumb__content {
-  font-weight: $euiButtonFontWeight;
-}

package/src/themes/amsterdam/overrides/_index.scss

@@ -1,4 +1,3 @@
-@import 'breadcrumbs';
 @import 'button';
 @import 'button_empty';
 @import 'button_group';
@@ -14,7 +13,6 @@
 @import 'form_control_layout';
 @import 'form_control_layout_delimited';
 @import 'form_controls';
-@import 'header_breadcrumbs';
 @import 'header';
 @import 'hue';
 @import 'list_group_item';
@@ -35,6 +33,4 @@
 @import 'side_nav';
 @import 'steps';
 @import 'tabs';
-@import 'toast';
-@import 'token';
 @import 'tooltip';

package/test-env/components/bottom_bar/bottom_bar.js

@@ -153,7 +153,7 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     token: "euiBottomBar.screenReaderAnnouncement",
     default: "There is a new region landmark with page level controls at the end of the document."
   }))));
-  return usePortal ? (0, _react2.jsx)(_portal.EuiPortal, null, bar) : bar;
+  return usePortal ? (0, _react2.jsx)(_portal.EuiPortal, typeof usePortal !== 'boolean' ? usePortal : undefined, bar) : bar;
 });
 
 _EuiBottomBar.propTypes = {
@@ -170,7 +170,17 @@ _EuiBottomBar.propTypes = {
        * Whether to wrap in an EuiPortal which appends the component to the body element.
        * Only works if `position` is `fixed`.
        */
-  usePortal: _propTypes.default.bool,
+  usePortal: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
+    /**
+       * ReactNode to render as this component's content
+       */
+    children: _propTypes.default.node.isRequired,
+    insert: _propTypes.default.shape({
+      sibling: _propTypes.default.any.isRequired,
+      position: _propTypes.default.oneOf(["before", "after"]).isRequired
+    }),
+    portalRef: _propTypes.default.func
+  }).isRequired]),
 
   /**
        * Whether the component should apply padding on the document body element to afford for its own displacement height.
@@ -242,7 +252,14 @@ EuiBottomBar.propTypes = {
        * Whether to wrap in an EuiPortal which appends the component to the body element.
        * Only works if `position` is `fixed`.
        */
-  usePortal: _propTypes.default.bool,
+  usePortal: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.shape({
+    children: _propTypes.default.node.isRequired,
+    insert: _propTypes.default.shape({
+      sibling: _propTypes.default.any.isRequired,
+      position: _propTypes.default.oneOf(["before", "after"]).isRequired
+    }),
+    portalRef: _propTypes.default.func
+  }).isRequired]),
 
   /**
        * Whether the component should apply padding on the document body element to afford for its own displacement height.