@elastic/eui 62.0.2 → 62.2.0

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) {