@elastic/eui 63.0.1 → 64.0.0

package/optimize/lib/components/popover/popover.js

@@ -64,7 +64,7 @@ var _popover2 = require("./popover.styles");
 
 var _popover_panel = require("./popover_panel");
 
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "attachToAnchor", "display", "offset", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 
 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); }
 
@@ -278,6 +278,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
       var willRenderArrow = !_this.props.attachToAnchor && _this.props.hasArrow;
       var arrowStyles = willRenderArrow ? arrow : undefined;
       var arrowPosition = foundPosition;
+      _this.props.onPositionChange && _this.props.onPositionChange(arrowPosition);
 
       _this.setState({
         popoverStyles: popoverStyles,
@@ -427,6 +428,7 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           attachToAnchor = _this$props.attachToAnchor,
           display = _this$props.display,
           offset = _this$props.offset,
+          onPositionChange = _this$props.onPositionChange,
           onTrapDeactivation = _this$props.onTrapDeactivation,
           buffer = _this$props.buffer,
           ariaLabel = _this$props['aria-label'],

package/optimize/lib/components/popover/popover_panel/_popover_panel.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiPopoverPanelStyles = void 0;
+exports.openAnimationTiming = exports.euiPopoverPanelStyles = void 0;
 
 var _react = require("@emotion/react");
 
@@ -18,6 +18,8 @@ var _global_styling = require("../../../global_styling");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var openAnimationTiming = 'slow';
+exports.openAnimationTiming = openAnimationTiming;
 var translateDistance = 's';
 /**
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
@@ -33,7 +35,7 @@ var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
       property: 'filter'
     }), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
     // Is visible / open
-    isOpen: /*#__PURE__*/(0, _react.css)("opacity:1;pointer-events:auto;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation.slow, ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation.slow, " + 100ms);};label:isOpen;"),
+    isOpen: /*#__PURE__*/(0, _react.css)("opacity:1;pointer-events:auto;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation[openAnimationTiming], " + 100ms);};label:isOpen;"),
     // Positions
     top: /*#__PURE__*/(0, _react.css)("transform:translateY(", euiTheme.size[translateDistance], ") translateZ(0);;label:top;"),
     bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(-", euiTheme.size[translateDistance], ") translateZ(0);;label:bottom;"),
@@ -41,7 +43,7 @@ var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
     right: /*#__PURE__*/(0, _react.css)("transform:translateX(-", euiTheme.size[translateDistance], ") translateZ(0);;label:right;"),
     // Attached version overrides
     attached: {
-      isOpen: /*#__PURE__*/(0, _react.css)("filter:none;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation.slow, ";};label:isOpen;"),
+      isOpen: /*#__PURE__*/(0, _react.css)("filter:none;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ";};label:isOpen;"),
       top: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), ";;label:top;"),
       bottom: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:bottom;"),
       // Satisfies TS

package/optimize/lib/components/provider/cache/cache_provider.js

@@ -9,6 +9,8 @@ exports.EuiCacheProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+
 var _react2 = require("@emotion/react");
 
 /*
@@ -18,12 +20,18 @@ var _react2 = require("@emotion/react");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var defaultCache = (0, _cache.default)({
+  key: 'css'
+});
+defaultCache.compat = true;
+
 var EuiCacheProvider = function EuiCacheProvider(_ref) {
-  var cache = _ref.cache,
+  var _ref$cache = _ref.cache,
+      cache = _ref$cache === void 0 ? defaultCache : _ref$cache,
       children = _ref.children;
-  return children && cache ? (0, _react2.jsx)(_react2.CacheProvider, {
+  return (0, _react2.jsx)(_react2.CacheProvider, {
     value: cache
-  }, children) : (0, _react2.jsx)(_react.default.Fragment, null, children);
+  }, children);
 };
 
 exports.EuiCacheProvider = EuiCacheProvider;

package/optimize/lib/components/tour/tour.styles.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiTourStyles = exports.euiTourHeaderStyles = exports.euiTourFooterStyles = exports.euiTourBeaconStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _services = require("../../services");
+
+var _global_styling = require("../../global_styling");
+
+var _popover_panel = require("../popover/popover_panel/_popover_panel.styles");
+
+var _popover_arrow = require("../popover/popover_arrow/_popover_arrow.styles");
+
+/*
+ * 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 backgroundColor = function backgroundColor(color, colorMode) {
+  return colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(color, 0.45) : (0, _services.tint)(color, 0.5);
+};
+
+var euiTourStyles = function euiTourStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+      colorMode = _ref.colorMode;
+  return {
+    // Targets EuiPopoverPanel
+    euiTour: /*#__PURE__*/(0, _react.css)("&[data-popover-open='true']{[class*='euiTourBeacon']{opacity:1;}}[data-popover-arrow='top']{&:before{", (0, _global_styling.logicalCSS)('border-top-color', backgroundColor(euiTheme.colors.lightestShade, colorMode)), ";}};label:euiTour;")
+  };
+};
+
+exports.euiTourStyles = euiTourStyles;
+
+var euiTourBeaconStyles = function euiTourBeaconStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  var arrowSize = euiTheme.size[_popover_arrow.popoverArrowSize];
+  var arrowSizeInt = parseInt(arrowSize, 10);
+  return {
+    // Base
+    euiTourBeacon: /*#__PURE__*/(0, _react.css)("pointer-events:none;position:absolute;opacity:0;transition:opacity 0s ", euiTheme.animation[_popover_panel.openAnimationTiming], ";;label:euiTourBeacon;"),
+    // Positions
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt / 2, "px")), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt * -2, "px")), ";;label:right;"),
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt / 2, "px")), ";", (0, _global_styling.logicalCSS)('left', arrowSize), ";;label:left;"),
+    top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', arrowSize), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt / 2, "px")), ";;label:top;"),
+    bottom: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', "".concat(arrowSizeInt * -2, "px")), ";", (0, _global_styling.logicalCSS)('left', "".concat(arrowSizeInt / 2, "px")), ";;label:bottom;")
+  };
+};
+
+exports.euiTourBeaconStyles = euiTourBeaconStyles;
+
+var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    // Base
+    euiTourHeader: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom', 'none'), ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
+    // Elements
+    euiTourHeader__title: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', 0), ";;label:euiTourHeader__title;"),
+    euiTourHeader__subtitle: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.subduedText, ";;label:euiTourHeader__subtitle;")
+  };
+};
+
+exports.euiTourHeaderStyles = euiTourHeaderStyles;
+
+var euiTourFooterStyles = function euiTourFooterStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
+  return {
+    // Base
+    euiTourFooter: /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor(euiTheme.colors.lightestShade, colorMode), ";", (0, _global_styling.logicalCSS)('border-bottom-left-radius', euiTheme.border.radius.medium), ";", (0, _global_styling.logicalCSS)('border-bottom-right-radius', euiTheme.border.radius.medium), ";;label:euiTourFooter;")
+  };
+};
+
+exports.euiTourFooterStyles = euiTourFooterStyles;

package/optimize/lib/components/tour/tour_step.js

@@ -39,6 +39,8 @@ var _tour_step_indicator = require("./tour_step_indicator");
 
 var _services = require("../../services");
 
+var _tour = require("./tour.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["anchorPosition", "anchor", "children", "className", "closePopover", "content", "isStepOpen", "minWidth", "maxWidth", "onFinish", "step", "stepsTotal", "style", "subtitle", "title", "decoration", "footerAction"];
@@ -90,6 +92,16 @@ var EuiTourStep = function EuiTourStep(_ref) {
 
   var animationFrameId = (0, _react.useRef)();
   var anchorNode = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      popoverPosition = _useState4[0],
+      setPopoverPosition = _useState4[1];
+
+  var onPositionChange = function onPositionChange(position) {
+    setPopoverPosition(position);
+  };
+
   (0, _react.useEffect)(function () {
     if (anchor) {
       animationFrameId.current = window.requestAnimationFrame(function () {
@@ -103,6 +115,12 @@ var EuiTourStep = function EuiTourStep(_ref) {
     };
   }, [anchor]);
   var classes = (0, _classnames.default)('euiTour', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var tourStyles = (0, _tour.euiTourStyles)(euiTheme);
+  var headerStyles = (0, _tour.euiTourHeaderStyles)(euiTheme);
+  var footerStyles = (0, _tour.euiTourFooterStyles)(euiTheme);
+  var beaconStyles = (0, _tour.euiTourBeaconStyles)(euiTheme);
+  var beaconCss = [beaconStyles.euiTourBeacon, popoverPosition && beaconStyles[popoverPosition]];
   var finishButtonProps = {
     color: 'text',
     flush: 'right',
@@ -161,11 +179,16 @@ var EuiTourStep = function EuiTourStep(_ref) {
     ownFocus: false,
     panelClassName: classes,
     panelStyle: style,
+    panelProps: {
+      css: tourStyles.euiTour
+    },
     offset: hasBeacon ? 10 : 0,
     'aria-labelledby': titleId,
     arrowChildren: hasBeacon && (0, _react2.jsx)(_beacon.EuiBeacon, {
+      css: beaconCss,
       className: "euiTour__beacon"
-    })
+    }),
+    onPositionChange: onPositionChange
   }, rest);
 
   var layout = (0, _react2.jsx)("div", {
@@ -174,17 +197,19 @@ var EuiTourStep = function EuiTourStep(_ref) {
       maxWidth: maxWidth
     }
   }, (0, _react2.jsx)(_popover.EuiPopoverTitle, {
+    css: headerStyles.euiTourHeader,
     className: "euiTourHeader",
     id: titleId
   }, subtitle && (0, _react2.jsx)(_title.EuiTitle, {
-    size: "xxxs",
-    className: "euiTourHeader__subtitle"
+    css: headerStyles.euiTourHeader__subtitle,
+    size: "xxxs"
   }, (0, _react2.jsx)("h2", null, subtitle)), (0, _react2.jsx)(_title.EuiTitle, {
-    size: "xxs",
-    className: "euiTourHeader__title"
+    css: headerStyles.euiTourHeader__title,
+    size: "xxs"
   }, subtitle ? (0, _react2.jsx)("h3", null, title) : (0, _react2.jsx)("h2", null, title))), (0, _react2.jsx)("div", {
     className: "euiTour__content"
   }, content), (0, _react2.jsx)(_popover.EuiPopoverFooter, {
+    css: footerStyles.euiTourFooter,
     className: "euiTourFooter"
   }, footer));
 

package/optimize/lib/components/tour/tour_step_indicator.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STATUS = exports.EuiTourStepIndicator = void 0;
+exports.EuiTourStepIndicator = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,29 +15,31 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _common = require("../common");
+var _react2 = require("@emotion/react");
 
 var _icon = require("../icon");
 
 var _i18n = require("../i18n");
 
-var _react2 = require("@emotion/react");
-
 var _excluded = ["className", "number", "status"];
-var statusToClassNameMap = {
-  complete: 'euiTourStepIndicator--complete',
-  incomplete: 'euiTourStepIndicator--incomplete',
-  active: 'euiTourStepIndicator--active'
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1v4nm53-EuiTourStepIndicator",
+  styles: "display:inline-block;label:EuiTourStepIndicator;"
+} : {
+  name: "1v4nm53-EuiTourStepIndicator",
+  styles: "display:inline-block;label:EuiTourStepIndicator;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var STATUS = (0, _common.keysOf)(statusToClassNameMap);
-exports.STATUS = STATUS;
-
-var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
-  var className = _ref.className,
-      number = _ref.number,
-      status = _ref.status,
-      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiTourStepIndicator', status ? statusToClassNameMap[status] : undefined, className);
+
+var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
+  var className = _ref2.className,
+      number = _ref2.number,
+      status = _ref2.status,
+      rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var classes = (0, _classnames.default)('euiTourStepIndicator', className);
   var indicatorIcon;
 
   if (status === 'active') {
@@ -88,6 +90,7 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
     }
   }, function (ariaLabel) {
     return (0, _react2.jsx)("li", (0, _extends2.default)({
+      css: _ref,
       className: classes,
       "aria-label": ariaLabel
     }, rest), indicatorIcon);

package/optimize/lib/global_styling/mixins/_responsive.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useEuiBreakpoint = exports.euiBreakpoint = void 0;
 
-var _hooks = require("../../services/theme/hooks");
+var _sorting = require("../../services/breakpoint/_sorting");
 
-var _variables = require("../variables");
+var _hooks = require("../../services/theme/hooks");
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -19,34 +19,38 @@ var _variables = require("../variables");
 
 /**
  * Generates a CSS media query rule string based on the input breakpoint ranges.
- * Examples:
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
  * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
  *
- * Use the `xs` and `xl` sizes to generate media queries with only min/max-width.
- * Examples:
+ * Use the smallest and largest sizes to generate media queries with only min/max-width.
+ * Examples with default theme breakpoints:
+ *
  * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
  * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
  */
 var euiBreakpoint = function euiBreakpoint(_ref, sizes) {
   var euiTheme = _ref.euiTheme;
-  // Ensure the array is in the correct ascending size order
+  // Ensure we inherit any theme breakpoint overrides & sort by small to large
+  var orderedBreakpoints = Object.keys((0, _sorting.sortMapBySmallToLargeValues)(euiTheme.breakpoint)); // Ensure the sizes array is in the correct ascending size order
+
   var orderedSizes = sizes.sort(function (a, b) {
-    return _variables.EuiThemeBreakpoints.indexOf(a) - _variables.EuiThemeBreakpoints.indexOf(b);
+    return orderedBreakpoints.indexOf(a) - orderedBreakpoints.indexOf(b);
   });
   var firstBreakpoint = orderedSizes[0];
   var minBreakpointSize = euiTheme.breakpoint[firstBreakpoint];
   var lastBreakpoint = orderedSizes[sizes.length - 1];
-  var maxBreakpointSize; // To get the correct screen range, we set the max-width
-  // to the next breakpoint size in the sizes array
+  var maxBreakpointSize; // To get the correct screen range, we set the max-width to the next breakpoint
+  // size in the sizes array (unless the size is already the largest breakpoint)
 
-  if (lastBreakpoint !== 'xl') {
-    var nextBreakpoint = _variables.EuiThemeBreakpoints.indexOf(lastBreakpoint) + 1;
-    maxBreakpointSize = euiTheme.breakpoint[_variables.EuiThemeBreakpoints[nextBreakpoint]];
+  if (lastBreakpoint !== orderedBreakpoints[orderedBreakpoints.length - 1]) {
+    var nextBreakpoint = orderedBreakpoints.indexOf(lastBreakpoint) + 1;
+    maxBreakpointSize = euiTheme.breakpoint[orderedBreakpoints[nextBreakpoint]];
   }
 
-  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If xs/0, don't render a min-width
-  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If xl/undefined, don't render a max-width
+  return ['@media only screen', minBreakpointSize ? "(min-width: ".concat(minBreakpointSize, "px)") : false, // If 0, don't render a min-width
+  maxBreakpointSize ? "(max-width: ".concat(maxBreakpointSize - 1, "px)") : false // If undefined, don't render a max-width
   ].filter(Boolean).join(' and ');
 };
 

package/optimize/lib/global_styling/variables/breakpoint.js

@@ -12,5 +12,7 @@ exports.EuiThemeBreakpoints = void 0;
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
+var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl']; // This type cannot be a string enum / must be a generic string
+// in case consumers add custom breakpoint sizes, such as xxl or xxs
+
 exports.EuiThemeBreakpoints = EuiThemeBreakpoints;

package/optimize/lib/services/breakpoint/_sorting.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortMapBySmallToLargeValues = exports.sortMapByLargeToSmallValues = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+/*
+ * 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 sortMapByLargeToSmallValues = function sortMapByLargeToSmallValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref, _ref2) {
+    var _ref3 = (0, _slicedToArray2.default)(_ref, 2),
+        a = _ref3[1];
+
+    var _ref4 = (0, _slicedToArray2.default)(_ref2, 2),
+        b = _ref4[1];
+
+    return b - a;
+  }));
+};
+
+exports.sortMapByLargeToSmallValues = sortMapByLargeToSmallValues;
+
+var sortMapBySmallToLargeValues = function sortMapBySmallToLargeValues(breakpointsMap) {
+  return Object.fromEntries(Object.entries(breakpointsMap).sort(function (_ref5, _ref6) {
+    var _ref7 = (0, _slicedToArray2.default)(_ref5, 2),
+        a = _ref7[1];
+
+    var _ref8 = (0, _slicedToArray2.default)(_ref6, 2),
+        b = _ref8[1];
+
+    return a - b;
+  }));
+};
+
+exports.sortMapBySmallToLargeValues = sortMapBySmallToLargeValues;

package/optimize/lib/services/breakpoint/current_breakpoint.js

@@ -13,11 +13,13 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _common = require("../../components/common");
+
 var _theme = require("../theme");
 
 var _throttle = require("../throttle");
 
-var _breakpoint = require("./breakpoint");
+var _sorting = require("./_sorting");
 
 var _react2 = require("@emotion/react");
 
@@ -43,23 +45,35 @@ exports.CurrentEuiBreakpointContext = CurrentEuiBreakpointContext;
 var CurrentEuiBreakpointProvider = function CurrentEuiBreakpointProvider(_ref) {
   var children = _ref.children;
 
+  // Obtain the breakpoints map from the EUI theme
   var _useEuiTheme = (0, _theme.useEuiTheme)(),
-      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+      breakpoints = _useEuiTheme.euiTheme.breakpoint; // Ensure the breakpoints map is sorted from largest value to smallest
+
+
+  var sortedBreakpoints = (0, _react.useMemo)(function () {
+    return (0, _sorting.sortMapByLargeToSmallValues)(breakpoints);
+  }, [breakpoints]); // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
+
+  var getBreakpoint = (0, _react.useCallback)(function (width) {
+    return (0, _common.keysOf)(sortedBreakpoints).find(function (key) {
+      return sortedBreakpoints[key] <= width;
+    });
+  }, [sortedBreakpoints]);
 
-  var _useState = (0, _react.useState)(typeof window !== 'undefined' ? (0, _breakpoint.getBreakpoint)(window.innerWidth, breakpoints) : undefined),
+  var _useState = (0, _react.useState)(typeof window !== 'undefined' ? getBreakpoint(window.innerWidth) : undefined),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       currentBreakpoint = _useState2[0],
       setCurrentBreakpoint = _useState2[1];
 
   (0, _react.useEffect)(function () {
     var onWindowResize = (0, _throttle.throttle)(function () {
-      setCurrentBreakpoint((0, _breakpoint.getBreakpoint)(window.innerWidth, breakpoints));
+      setCurrentBreakpoint(getBreakpoint(window.innerWidth));
     }, 50);
     window.addEventListener('resize', onWindowResize);
     return function () {
       return window.removeEventListener('resize', onWindowResize);
     };
-  }, [breakpoints]);
+  }, [getBreakpoint]);
   return (0, _react2.jsx)(CurrentEuiBreakpointContext.Provider, {
     value: currentBreakpoint
   }, children);

package/optimize/lib/services/breakpoint/index.js

@@ -4,19 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _breakpoint = require("./breakpoint");
-
-Object.keys(_breakpoint).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _breakpoint[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _breakpoint[key];
-    }
-  });
-});
-
 var _current_breakpoint = require("./current_breakpoint");
 
 Object.keys(_current_breakpoint).forEach(function (key) {
@@ -43,15 +30,15 @@ Object.keys(_current_breakpoint_hook).forEach(function (key) {
   });
 });
 
-var _useIsWithinBreakpoints = require("./useIsWithinBreakpoints");
+var _is_within_hooks = require("./is_within_hooks");
 
-Object.keys(_useIsWithinBreakpoints).forEach(function (key) {
+Object.keys(_is_within_hooks).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _useIsWithinBreakpoints[key]) return;
+  if (key in exports && exports[key] === _is_within_hooks[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _useIsWithinBreakpoints[key];
+      return _is_within_hooks[key];
     }
   });
 });

package/optimize/lib/services/breakpoint/is_within_hooks.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsWithinBreakpoints = void 0;
+exports.useIsWithinMaxBreakpoint = useIsWithinMaxBreakpoint;
+exports.useIsWithinMinBreakpoint = useIsWithinMinBreakpoint;
+
+var _theme = require("../theme");
+
+var _current_breakpoint_hook = require("./current_breakpoint_hook");
+
+/*
+ * 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.
+ */
+
+/**
+ * Given an array of breakpoint keys, this hook returns true or false
+ * if the breakpoint size of the current window width falls within
+ * any of the named breakpoints.
+ *
+ * @param {EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
+ * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
+ *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
+ * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+ */
+var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
+  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+  var currentBreakpoint = (0, _current_breakpoint_hook.useCurrentEuiBreakpoint)();
+  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
+};
+/**
+ * Given a max breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the max breakpoint or any below,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} max The named max breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
+ */
+
+
+exports.useIsWithinBreakpoints = useIsWithinBreakpoints;
+
+function useIsWithinMaxBreakpoint(max) {
+  var _useEuiTheme = (0, _theme.useEuiTheme)(),
+      breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  var currentBreakpoint = (0, _current_breakpoint_hook.useCurrentEuiBreakpoint)();
+
+  if (currentBreakpoint == null || breakpoints[max] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] <= breakpoints[max];
+}
+/**
+ * Given a min breakpoint key, this hook returns true if the breakpoint size
+ * of the current window width falls within the min breakpoint or any above,
+ * and false otherwise
+ *
+ * @param {EuiThemeBreakpoint} min The named min breakpoint to check against
+ * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
+ */
+
+
+function useIsWithinMinBreakpoint(min) {
+  var _useEuiTheme2 = (0, _theme.useEuiTheme)(),
+      breakpoints = _useEuiTheme2.euiTheme.breakpoint;
+
+  var currentBreakpoint = (0, _current_breakpoint_hook.useCurrentEuiBreakpoint)();
+
+  if (currentBreakpoint == null || breakpoints[min] == null) {
+    return false;
+  }
+
+  return breakpoints[currentBreakpoint] >= breakpoints[min];
+}