@elastic/eui 63.0.1 → 64.0.0

package/test-env/components/tour/tour_step_indicator.js

@@ -5,41 +5,43 @@ 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"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+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') {
@@ -90,6 +92,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);
@@ -102,5 +105,6 @@ EuiTourStepIndicator.propTypes = {
   status: _propTypes.default.oneOf(["complete", "incomplete", "active"]).isRequired,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/test-env/components/tree_view/tree_view.js

@@ -349,6 +349,7 @@ exports.EuiTreeView = EuiTreeView;
 EuiTreeView.propTypes = {
   className: _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /** An array of EuiTreeViewNodes
        */

package/test-env/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/test-env/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/test-env/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/test-env/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/test-env/services/breakpoint/current_breakpoint_hook.js

@@ -7,7 +7,9 @@ exports.useCurrentEuiBreakpoint = void 0;
 
 var _react = require("react");
 
-var _breakpoint = require("./breakpoint");
+var _common = require("../../components/common");
+
+var _breakpoint = require("../../themes/amsterdam/global_styling/variables/_breakpoint");
 
 var _current_breakpoint = require("./current_breakpoint");
 
@@ -27,7 +29,12 @@ var useCurrentEuiBreakpoint = function useCurrentEuiBreakpoint() {
   var context = (0, _react.useContext)(_current_breakpoint.CurrentEuiBreakpointContext);
   if (context !== undefined) return context; // Component has been wrapped, everything is fine.
 
-  return typeof window !== 'undefined' ? (0, _breakpoint.getBreakpoint)(window.innerWidth) : undefined;
+  if (typeof window === 'undefined') return undefined; // SSR catch
+  // Use the default Amsterdam breakpoints (which are already ordered by largest first)
+
+  return (0, _common.keysOf)(_breakpoint.breakpoint).find(function (key) {
+    return _breakpoint.breakpoint[key] <= window.innerWidth;
+  });
 };
 
 exports.useCurrentEuiBreakpoint = useCurrentEuiBreakpoint;

package/test-env/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/test-env/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];
+}

package/test-env/services/index.js

@@ -15,13 +15,9 @@ var _exportNames = {
   LEFT_ALIGNMENT: true,
   RIGHT_ALIGNMENT: true,
   CENTER_ALIGNMENT: true,
-  BREAKPOINTS: true,
-  BREAKPOINT_KEYS: true,
-  getBreakpoint: true,
-  isWithinBreakpoints: true,
   useIsWithinBreakpoints: true,
-  isWithinMaxBreakpoint: true,
-  isWithinMinBreakpoint: true,
+  useIsWithinMaxBreakpoint: true,
+  useIsWithinMinBreakpoint: true,
   CurrentEuiBreakpointContext: true,
   CurrentEuiBreakpointProvider: true,
   useCurrentEuiBreakpoint: true,
@@ -92,18 +88,6 @@ var _exportNames = {
   EuiWindowEvent: true,
   throttle: true
 };
-Object.defineProperty(exports, "BREAKPOINTS", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.BREAKPOINTS;
-  }
-});
-Object.defineProperty(exports, "BREAKPOINT_KEYS", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.BREAKPOINT_KEYS;
-  }
-});
 Object.defineProperty(exports, "CENTER_ALIGNMENT", {
   enumerable: true,
   get: function get() {
@@ -362,12 +346,6 @@ Object.defineProperty(exports, "formatText", {
     return _format.formatText;
   }
 });
-Object.defineProperty(exports, "getBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.getBreakpoint;
-  }
-});
 Object.defineProperty(exports, "getDurationAndPerformOnFrame", {
   enumerable: true,
   get: function get() {
@@ -446,24 +424,6 @@ Object.defineProperty(exports, "isValidHex", {
     return _color.isValidHex;
   }
 });
-Object.defineProperty(exports, "isWithinBreakpoints", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinBreakpoints;
-  }
-});
-Object.defineProperty(exports, "isWithinMaxBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinMaxBreakpoint;
-  }
-});
-Object.defineProperty(exports, "isWithinMinBreakpoint", {
-  enumerable: true,
-  get: function get() {
-    return _breakpoint.isWithinMinBreakpoint;
-  }
-});
 Object.defineProperty(exports, "isWithinRange", {
   enumerable: true,
   get: function get() {
@@ -597,6 +557,18 @@ Object.defineProperty(exports, "useIsWithinBreakpoints", {
     return _breakpoint.useIsWithinBreakpoints;
   }
 });
+Object.defineProperty(exports, "useIsWithinMaxBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinMaxBreakpoint;
+  }
+});
+Object.defineProperty(exports, "useIsWithinMinBreakpoint", {
+  enumerable: true,
+  get: function get() {
+    return _breakpoint.useIsWithinMinBreakpoint;
+  }
+});
 
 var keys = _interopRequireWildcard(require("./keys"));
 

package/es/services/breakpoint/breakpoint.js

@@ -1,86 +0,0 @@
-/*
- * 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.
- */
-import { keysOf } from '../../components/common';
-import { breakpoint } from '../../themes/amsterdam/global_styling/variables/_breakpoint';
-export var BREAKPOINTS = breakpoint;
-export var BREAKPOINT_KEYS = keysOf(BREAKPOINTS);
-/**
- * Given the current `width` and an object of `EuiBreakpoints`,
- * this function returns the string that is the name of the breakpoint key
- * that is less than or equal to the width
- *
- * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
- * @returns {string | undefined} Name of the breakpoint key or `undefined` if a key doesn't exist
- */
-
-export function getBreakpoint(width) {
-  var breakpoints = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : BREAKPOINTS;
-  // Find the breakpoint (key) whose value is <= windowWidth starting with largest first
-  return BREAKPOINT_KEYS.find(function (key) {
-    return breakpoints[key] <= width;
-  });
-}
-/**
- * Given the current `width` and a max breakpoint key,
- * this function returns true or false if the `width` falls within the max
- * breakpoint or any breakpoints below
- *
- * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpointSize | number} max The named breakpoint or custom number to check against
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
- * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
- */
-
-export function isWithinMaxBreakpoint(width, max) {
-  var breakpoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : BREAKPOINTS;
-
-  if (typeof max === 'number') {
-    return width <= max;
-  } else {
-    var currentBreakpoint = getBreakpoint(width, breakpoints);
-    return currentBreakpoint ? breakpoints[currentBreakpoint] <= breakpoints[max] : false;
-  }
-}
-/**
- * Given the current `width` and a min breakpoint key,
- * this function returns true or false if the `width` falls within the min
- * breakpoint or any breakpoints above
- *
- * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpointSize | number} min The named breakpoint or custom number to check against
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
- * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
- */
-
-export function isWithinMinBreakpoint(width, min) {
-  var breakpoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : BREAKPOINTS;
-
-  if (typeof min === 'number') {
-    return width >= min;
-  } else {
-    var currentBreakpoint = getBreakpoint(width, breakpoints);
-    return currentBreakpoint ? breakpoints[currentBreakpoint] >= breakpoints[min] : false;
-  }
-}
-/**
- * Given the current `width` and an array of breakpoint keys,
- * this function returns true or false if the `width` falls within
- * any of the named breakpoints
- *
- * @param {number} width Can either be the full window width or any width
- * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
- * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
- * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
- */
-
-export function isWithinBreakpoints(width, sizes) {
-  var breakpoints = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : BREAKPOINTS;
-  var currentBreakpoint = getBreakpoint(width, breakpoints);
-  return currentBreakpoint ? sizes.includes(currentBreakpoint) : false;
-}

package/es/services/breakpoint/useIsWithinBreakpoints.js

@@ -1,24 +0,0 @@
-/*
- * 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.
- */
-import { useCurrentEuiBreakpoint } from './current_breakpoint_hook';
-/**
- * Given the current window.innerWidth and an array of breakpoint keys,
- * this hook stores state and returns true or false if the window.innerWidth
- * 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`
- */
-
-export var useIsWithinBreakpoints = function useIsWithinBreakpoints(sizes) {
-  var isResponsive = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
-  var currentBreakpoint = useCurrentEuiBreakpoint();
-  return currentBreakpoint && isResponsive ? sizes.includes(currentBreakpoint) : false;
-};