@elastic/eui 62.0.2 → 62.1.0

package/test-env/components/responsive/show_for.js

@@ -2,29 +2,19 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiShowFor = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-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 _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; }
-
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,29 +25,10 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 = (0, _slicedToArray2.default)(_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);
   }
 
@@ -75,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/test-env/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -39,8 +39,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");
@@ -72,33 +70,9 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
       popoverButtonBreakpoints = _ref.popoverButtonBreakpoints,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
-  /**
-   * Breakpoint management
-   */
-  var _useState = (0, _react.useState)(typeof window !== 'undefined' && popoverButtonBreakpoints ? (0, _breakpoint.isWithinBreakpoints)(window.innerWidth, popoverButtonBreakpoints) : true),
-      _useState2 = (0, _slicedToArray2.default)(_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 = (0, _slicedToArray2.default)(_useEuiI18n, 1),
       searchPlaceholder = _useEuiI18n2[0];
@@ -107,15 +81,15 @@ var EuiSelectableTemplateSitewide = function EuiSelectableTemplateSitewide(_ref)
    */
 
 
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      popoverRef = _useState4[0],
-      setPopoverRef = _useState4[1];
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      popoverRef = _useState2[0],
+      setPopoverRef = _useState2[1];
 
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      popoverIsOpen = _useState6[0],
-      setPopoverIsOpen = _useState6[1];
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      popoverIsOpen = _useState4[0],
+      setPopoverIsOpen = _useState4[1];
 
   var _popoverProps = _objectSpread({}, popoverProps),
       _closePopover = _popoverProps.closePopover,
@@ -209,6 +183,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) {
@@ -493,5 +473,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/test-env/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.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/test-env/components/table/table_row_cell.js

@@ -25,8 +25,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"];
@@ -90,7 +88,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) {