@elastic/eui 62.0.3 → 63.0.0

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;