@elastic/eui 62.0.3 → 62.2.1

package/lib/components/page/page_header/page_header_content.js

@@ -23,7 +23,7 @@ var _title = require("../../title");
 
 var _text = require("../../text");
 
-var _hooks = require("../../../services/hooks");
+var _services = require("../../../services");
 
 var _accessibility = require("../../accessibility");
 
@@ -66,7 +66,7 @@ var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
       children = _ref.children,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var isResponsiveBreakpoint = (0, _hooks.useIsWithinBreakpoints)(['xs', 's'], !!responsive);
+  var isResponsiveBreakpoint = (0, _services.useIsWithinBreakpoints)(['xs', 's'], !!responsive);
   var classes = (0, _classnames.default)('euiPageHeaderContent');
   var descriptionNode;
 
@@ -254,6 +254,7 @@ EuiPageHeaderContent.propTypes = {
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
     href: _propTypes.default.string,
+    rel: _propTypes.default.string,
     onClick: _propTypes.default.func,
 
     /**

package/lib/components/page/page_template.js

@@ -465,6 +465,7 @@ EuiPageTemplate.propTypes = {
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
       href: _propTypes.default.string,
+      rel: _propTypes.default.string,
       onClick: _propTypes.default.func,
 
       /**

package/lib/components/pagination/pagination.js

@@ -283,7 +283,7 @@ EuiPagination.propTypes = {
      * Automatically reduces to the `compressed` version on smaller screens.
      * Remove completely with `false` or provide your own list of responsive breakpoints.
      */
-  responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired])
+  responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
 };
 
 var PaginationButtonWrapper = function PaginationButtonWrapper(_ref2) {

package/lib/components/panel/split_panel/split_panel.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _panel = require("../panel");
 
-var _hooks = require("../../../services/hooks");
+var _breakpoint = require("../../../services/breakpoint");
 
 var _react2 = require("@emotion/react");
 
@@ -86,7 +86,7 @@ var _EuiSplitPanelOuter = function _EuiSplitPanelOuter(_ref2) {
       responsive = _ref2$responsive === void 0 ? ['xs', 's'] : _ref2$responsive,
       rest = _objectWithoutProperties(_ref2, _excluded2);
 
-  var isResponsive = (0, _hooks.useIsWithinBreakpoints)(responsive, !!responsive);
+  var isResponsive = (0, _breakpoint.useIsWithinBreakpoints)(responsive, !!responsive);
   var classes = (0, _classnames.default)('euiSplitPanel', {
     'euiSplitPanel--row': direction === 'row',
     'euiSplitPanel-isResponsive': isResponsive
@@ -114,7 +114,7 @@ _EuiSplitPanelOuter.propTypes = {
      * Stacks row display on small screens.
      * Remove completely with `false` or provide your own list of breakpoint sizes to stack on.
      */
-  responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired])
+  responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
 };
 var EuiSplitPanel = {
   Outer: _EuiSplitPanelOuter,

package/lib/components/provider/provider.js

@@ -69,7 +69,7 @@ var EuiProvider = function EuiProvider(_ref) {
   }), (0, _react2.jsx)(_cache.EuiCacheProvider, {
     cache: utilityCache,
     children: Utilities && (0, _react2.jsx)(Utilities, null)
-  })), children));
+  })), (0, _react2.jsx)(_services.CurrentEuiBreakpointProvider, null, children)));
 };
 
 exports.EuiProvider = EuiProvider;

package/lib/components/responsive/hide_for.js

@@ -1,66 +1,34 @@
 "use strict";
 
-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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiHideFor = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _services = require("../../services");
 
-var _breakpoint = require("../../services/breakpoint");
-
 var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 || _typeof(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; }
-
-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; }
-
+/*
+ * 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 EuiHideFor = function EuiHideFor(_ref) {
   var children = _ref.children,
       sizes = _ref.sizes;
+  var currentBreakpoint = (0, _services.useCurrentEuiBreakpoint)();
+  var isWithinBreakpointSizes = currentBreakpoint && sizes.includes(currentBreakpoint);
 
-  var _useState = (0, _react.useState)((0, _breakpoint.getBreakpoint)(typeof window === 'undefined' ? -Infinity : window.innerWidth)),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentBreakpoint = _useState2[0],
-      setCurrentBreakpoint = _useState2[1];
-
-  var functionToCallOnWindowResize = (0, _services.throttle)(function () {
-    var newBreakpoint = (0, _breakpoint.getBreakpoint)(window.innerWidth);
-
-    if (newBreakpoint !== currentBreakpoint) {
-      setCurrentBreakpoint(newBreakpoint);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50); // Add window resize handlers
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener('resize', functionToCallOnWindowResize);
-    return function () {
-      window.removeEventListener('resize', functionToCallOnWindowResize);
-    };
-  }, [functionToCallOnWindowResize]);
-
-  if (sizes === 'all' || sizes.includes(currentBreakpoint)) {
+  if (sizes === 'all' || isWithinBreakpointSizes) {
     return null;
   }
 
@@ -78,5 +46,5 @@ EuiHideFor.propTypes = {
      * List of all the responsive sizes to hide the children for.
      * Array of #EuiBreakpointSize
      */
-  sizes: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired, _propTypes.default.oneOf(["all", "none"])]).isRequired
+  sizes: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired, _propTypes.default.oneOf(["all", "none"])]).isRequired
 };

package/lib/components/responsive/show_for.js

@@ -1,66 +1,34 @@
 "use strict";
 
-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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiShowFor = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _services = require("../../services");
 
-var _breakpoint = require("../../services/breakpoint");
-
 var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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 || _typeof(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; }
-
-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; }
-
+/*
+ * 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 EuiShowFor = function EuiShowFor(_ref) {
   var children = _ref.children,
       sizes = _ref.sizes;
+  var currentBreakpoint = (0, _services.useCurrentEuiBreakpoint)();
+  var isWithinBreakpointSizes = currentBreakpoint && sizes.includes(currentBreakpoint);
 
-  var _useState = (0, _react.useState)((0, _breakpoint.getBreakpoint)(typeof window === 'undefined' ? -Infinity : window.innerWidth)),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentBreakpoint = _useState2[0],
-      setCurrentBreakpoint = _useState2[1];
-
-  var functionToCallOnWindowResize = (0, _services.throttle)(function () {
-    var newBreakpoint = (0, _breakpoint.getBreakpoint)(window.innerWidth);
-
-    if (newBreakpoint !== currentBreakpoint) {
-      setCurrentBreakpoint(newBreakpoint);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50); // Add window resize handlers
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener('resize', functionToCallOnWindowResize);
-    return function () {
-      window.removeEventListener('resize', functionToCallOnWindowResize);
-    };
-  }, [sizes, functionToCallOnWindowResize]);
-
-  if (sizes === 'all' || sizes.includes(currentBreakpoint)) {
+  if (sizes === 'all' || isWithinBreakpointSizes) {
     return (0, _react2.jsx)(_react.default.Fragment, null, children);
   }
 
@@ -78,5 +46,5 @@ EuiShowFor.propTypes = {
      * List of all the responsive sizes to show the children for.
      * Array of #EuiBreakpointSize
      */
-  sizes: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired, _propTypes.default.oneOf(["all", "none"])]).isRequired
+  sizes: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired, _propTypes.default.oneOf(["all", "none"])]).isRequired
 };

package/lib/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -29,8 +29,6 @@ var _loading = require("../../loading");
 
 var _selectable_template_sitewide_option = require("./selectable_template_sitewide_option");
 
-var _breakpoint = require("../../../services/breakpoint");
-
 var _spacer = require("../../spacer");
 
 var _keys = require("../../../services/keys");
@@ -84,33 +82,9 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
       popoverButtonBreakpoints = _ref.popoverButtonBreakpoints,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  /**
-   * Breakpoint management
-   */
-  var _useState = (0, _react.useState)(typeof window !== 'undefined' && popoverButtonBreakpoints ? (0, _breakpoint.isWithinBreakpoints)(window.innerWidth, popoverButtonBreakpoints) : true),
-      _useState2 = _slicedToArray(_useState, 2),
-      canShowPopoverButton = _useState2[0],
-      setCanShowPopoverButton = _useState2[1];
-
-  var functionToCallOnWindowResize = (0, _services.throttle)(function () {
-    var newWidthIsWithinBreakpoint = popoverButtonBreakpoints ? (0, _breakpoint.isWithinBreakpoints)(window.innerWidth, popoverButtonBreakpoints) : true;
-
-    if (newWidthIsWithinBreakpoint !== canShowPopoverButton) {
-      setCanShowPopoverButton(newWidthIsWithinBreakpoint);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50); // Add window resize handlers
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener('resize', functionToCallOnWindowResize);
-    return function () {
-      window.removeEventListener('resize', functionToCallOnWindowResize);
-    };
-  }, [functionToCallOnWindowResize]);
   /**
    * i18n text
    */
-
   var _useEuiI18n = (0, _i18n.useEuiI18n)(['euiSelectableTemplateSitewide.searchPlaceholder'], ['Search for anything...']),
       _useEuiI18n2 = _slicedToArray(_useEuiI18n, 1),
       searchPlaceholder = _useEuiI18n2[0];
@@ -119,15 +93,15 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
    */
 
 
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      popoverRef = _useState4[0],
-      setPopoverRef = _useState4[1];
+  var _useState = (0, _react.useState)(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      popoverRef = _useState2[0],
+      setPopoverRef = _useState2[1];
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      popoverIsOpen = _useState6[0],
-      setPopoverIsOpen = _useState6[1];
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      popoverIsOpen = _useState4[0],
+      setPopoverIsOpen = _useState4[1];
 
   var _popoverProps = _objectSpread({}, popoverProps),
       _closePopover = _popoverProps.closePopover,
@@ -221,6 +195,12 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
    * and use the passed `popoverButton` as the popover trigger.
    */
 
+  var currentBreakpoint = (0, _services.useCurrentEuiBreakpoint)();
+  var canShowPopoverButton = (0, _react.useMemo)(function () {
+    if (!popoverButtonBreakpoints) return true;
+    if (!currentBreakpoint) return false;
+    return popoverButtonBreakpoints.includes(currentBreakpoint);
+  }, [currentBreakpoint, popoverButtonBreakpoints]);
   var popoverTrigger;
 
   if (popoverButton && canShowPopoverButton) {
@@ -505,5 +485,5 @@ EuiSelectableTemplateSitewide.propTypes = {
      * Pass an array of named breakpoints for which to show the `popoverButton`.
      * If `undefined`, the `popoverButton` will always show (if provided)
      */
-  popoverButtonBreakpoints: _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired)
+  popoverButtonBreakpoints: _propTypes.default.arrayOf(_propTypes.default.any.isRequired)
 };

package/lib/components/side_nav/side_nav.js

@@ -302,7 +302,7 @@ EuiSideNav.propTypes = {
        * Array of breakpoint names for when to show the mobile version.
        * Set to `undefined` to remove responsive behavior
        */
-  mobileBreakpoints: _propTypes.default.arrayOf(_propTypes.default.oneOf(["xs", "s", "m", "l", "xl"]).isRequired),
+  mobileBreakpoints: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
 
   /**
        *  An array of #EuiSideNavItem objects. Lists navigation menu items.

package/lib/components/table/table_row_cell.js

@@ -17,8 +17,6 @@ var _services = require("../../services");
 
 var _utils = require("./utils");
 
-var _useIsWithinBreakpoints = require("../../services/hooks/useIsWithinBreakpoints");
-
 var _react2 = require("@emotion/react");
 
 var _excluded = ["align", "children", "className", "truncateText", "setScopeRow", "showOnHover", "textOnly", "hasActions", "isExpander", "style", "width", "valign", "mobileOptions"];
@@ -93,7 +91,7 @@ var EuiTableRowCell = function EuiTableRowCell(_ref) {
     euiTableCellContent__text: textOnly === true,
     euiTableCellContent__hoverItem: showOnHover
   });
-  var widthValue = (0, _useIsWithinBreakpoints.useIsWithinBreakpoints)(['xs', 's']) && mobileOptions.width ? mobileOptions.width : width;
+  var widthValue = (0, _services.useIsWithinBreakpoints)(['xs', 's']) && mobileOptions.width ? mobileOptions.width : width;
   var styleObj = (0, _utils.resolveWidthAsStyle)(style, widthValue);
 
   function modifyChildren(children) {