@elastic/eui 62.0.3 → 62.2.1

package/es/components/responsive/hide_for.js

@@ -1,15 +1,3 @@
-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
@@ -17,37 +5,17 @@ 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 React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from "prop-types";
-import { throttle } from '../../services';
-import { getBreakpoint } from '../../services/breakpoint';
+import { useCurrentEuiBreakpoint } from '../../services';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHideFor = function EuiHideFor(_ref) {
   var children = _ref.children,
       sizes = _ref.sizes;
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+  var isWithinBreakpointSizes = currentBreakpoint && sizes.includes(currentBreakpoint);
 
-  var _useState = useState(getBreakpoint(typeof window === 'undefined' ? -Infinity : window.innerWidth)),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentBreakpoint = _useState2[0],
-      setCurrentBreakpoint = _useState2[1];
-
-  var functionToCallOnWindowResize = throttle(function () {
-    var newBreakpoint = 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
-
-  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;
   }
 
@@ -63,5 +31,5 @@ EuiHideFor.propTypes = {
      * List of all the responsive sizes to hide the children for.
      * Array of #EuiBreakpointSize
      */
-  sizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired, PropTypes.oneOf(["all", "none"])]).isRequired
+  sizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any.isRequired).isRequired, PropTypes.oneOf(["all", "none"])]).isRequired
 };

package/es/components/responsive/show_for.js

@@ -1,15 +1,3 @@
-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
@@ -17,37 +5,17 @@ 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 React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from "prop-types";
-import { throttle } from '../../services';
-import { getBreakpoint } from '../../services/breakpoint';
+import { useCurrentEuiBreakpoint } from '../../services';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiShowFor = function EuiShowFor(_ref) {
   var children = _ref.children,
       sizes = _ref.sizes;
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+  var isWithinBreakpointSizes = currentBreakpoint && sizes.includes(currentBreakpoint);
 
-  var _useState = useState(getBreakpoint(typeof window === 'undefined' ? -Infinity : window.innerWidth)),
-      _useState2 = _slicedToArray(_useState, 2),
-      currentBreakpoint = _useState2[0],
-      setCurrentBreakpoint = _useState2[1];
-
-  var functionToCallOnWindowResize = throttle(function () {
-    var newBreakpoint = 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
-
-  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 ___EmotionJSX(React.Fragment, null, children);
   }
 
@@ -63,5 +31,5 @@ EuiShowFor.propTypes = {
      * List of all the responsive sizes to show the children for.
      * Array of #EuiBreakpointSize
      */
-  sizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOf(["xs", "s", "m", "l", "xl"]).isRequired).isRequired, PropTypes.oneOf(["all", "none"])]).isRequired
+  sizes: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.any.isRequired).isRequired, PropTypes.oneOf(["all", "none"])]).isRequired
 };

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

@@ -32,10 +32,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useState, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useCombinedRefs, throttle } from '../../../services';
+import { useCombinedRefs, useCurrentEuiBreakpoint } from '../../../services';
 import { EuiSelectable } from '../selectable';
 import { EuiPopoverTitle, EuiPopoverFooter } from '../../popover';
 import { EuiPopover } from '../../popover/popover';
@@ -43,7 +43,6 @@ import { useEuiI18n, EuiI18n } from '../../i18n';
 import { EuiSelectableMessage } from '../selectable_message';
 import { EuiLoadingSpinner } from '../../loading';
 import { euiSelectableTemplateSitewideFormatOptions, euiSelectableTemplateSitewideRenderOptions } from './selectable_template_sitewide_option';
-import { isWithinBreakpoints } from '../../../services/breakpoint';
 import { EuiSpacer } from '../../spacer';
 import { ENTER } from '../../../services/keys';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -61,33 +60,9 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
       popoverButtonBreakpoints = _ref.popoverButtonBreakpoints,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  /**
-   * Breakpoint management
-   */
-  var _useState = useState(typeof window !== 'undefined' && popoverButtonBreakpoints ? isWithinBreakpoints(window.innerWidth, popoverButtonBreakpoints) : true),
-      _useState2 = _slicedToArray(_useState, 2),
-      canShowPopoverButton = _useState2[0],
-      setCanShowPopoverButton = _useState2[1];
-
-  var functionToCallOnWindowResize = throttle(function () {
-    var newWidthIsWithinBreakpoint = popoverButtonBreakpoints ? 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
-
-  useEffect(function () {
-    window.addEventListener('resize', functionToCallOnWindowResize);
-    return function () {
-      window.removeEventListener('resize', functionToCallOnWindowResize);
-    };
-  }, [functionToCallOnWindowResize]);
   /**
    * i18n text
    */
-
   var _useEuiI18n = useEuiI18n(['euiSelectableTemplateSitewide.searchPlaceholder'], ['Search for anything...']),
       _useEuiI18n2 = _slicedToArray(_useEuiI18n, 1),
       searchPlaceholder = _useEuiI18n2[0];
@@ -96,15 +71,15 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
    */
 
 
-  var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      popoverRef = _useState4[0],
-      setPopoverRef = _useState4[1];
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      popoverRef = _useState2[0],
+      setPopoverRef = _useState2[1];
 
-  var _useState5 = useState(false),
-      _useState6 = _slicedToArray(_useState5, 2),
-      popoverIsOpen = _useState6[0],
-      setPopoverIsOpen = _useState6[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      popoverIsOpen = _useState4[0],
+      setPopoverIsOpen = _useState4[1];
 
   var _popoverProps = _objectSpread({}, popoverProps),
       _closePopover = _popoverProps.closePopover,
@@ -201,6 +176,12 @@ export var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewid
    */
 
 
+  var currentBreakpoint = useCurrentEuiBreakpoint();
+  var canShowPopoverButton = useMemo(function () {
+    if (!popoverButtonBreakpoints) return true;
+    if (!currentBreakpoint) return false;
+    return popoverButtonBreakpoints.includes(currentBreakpoint);
+  }, [currentBreakpoint, popoverButtonBreakpoints]);
   var popoverTrigger;
 
   if (popoverButton && canShowPopoverButton) {
@@ -477,5 +458,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.arrayOf(PropTypes.oneOf(["xs", "s", "m", "l", "xl"]).isRequired)
+  popoverButtonBreakpoints: PropTypes.arrayOf(PropTypes.any.isRequired)
 };

package/es/components/side_nav/side_nav.js

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

package/es/components/table/table_row_cell.js

@@ -22,9 +22,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { Fragment } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '../../services';
+import { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT, useIsWithinBreakpoints } from '../../services';
 import { resolveWidthAsStyle } from './utils';
-import { useIsWithinBreakpoints } from '../../services/hooks/useIsWithinBreakpoints';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiTableRowCell = function EuiTableRowCell(_ref) {
   var _mobileOptions$showOn, _mobileOptions$trunca;