@elastic/eui 63.0.1 → 64.0.1

package/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/lib/components/tour/tour_step.js

@@ -29,6 +29,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"];
@@ -111,6 +113,16 @@ var EuiTourStep = function EuiTourStep(_ref) {
 
   var animationFrameId = (0, _react.useRef)();
   var anchorNode = (0, _react.useRef)(null);
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = _slicedToArray(_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 () {
@@ -124,6 +136,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',
@@ -182,11 +200,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", {
@@ -195,17 +218,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));
 
@@ -225,6 +250,7 @@ EuiTourStep.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Element to which the tour step popover attaches when open

package/lib/components/tour/tour_step_indicator.js

@@ -3,22 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STATUS = exports.EuiTourStepIndicator = void 0;
-
-var _react = _interopRequireDefault(require("react"));
+exports.EuiTourStepIndicator = void 0;
 
 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"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,21 +27,24 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-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 = _objectWithoutProperties(_ref, _excluded);
+var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
+  var className = _ref2.className,
+      number = _ref2.number,
+      status = _ref2.status,
+      rest = _objectWithoutProperties(_ref2, _excluded);
 
-  var classes = (0, _classnames.default)('euiTourStepIndicator', status ? statusToClassNameMap[status] : undefined, className);
+  var classes = (0, _classnames.default)('euiTourStepIndicator', className);
   var indicatorIcon;
 
   if (status === 'active') {
@@ -94,6 +95,7 @@ var EuiTourStepIndicator = function EuiTourStepIndicator(_ref) {
     }
   }, function (ariaLabel) {
     return (0, _react2.jsx)("li", _extends({
+      css: _ref,
       className: classes,
       "aria-label": ariaLabel
     }, rest), indicatorIcon);
@@ -106,5 +108,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/lib/components/tree_view/tree_view.js

@@ -379,6 +379,7 @@ _defineProperty(EuiTreeView, "contextType", EuiTreeViewContext);
 EuiTreeView.propTypes = {
   className: _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /** An array of EuiTreeViewNodes
        */

package/lib/global_styling/functions/logicals.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
+exports.logicals = exports.logicalTextAlignStyle = exports.logicalTextAlignCSS = exports.logicalText = exports.logicalStyle = exports.logicalSizeStyle = exports.logicalSizeCSS = exports.logicalSide = exports.logicalCSSWithFallback = exports.logicalCSS = exports.LOGICAL_TEXT_ALIGNMENT = exports.LOGICAL_SIDES = exports.LOGICAL_PROPERTIES = void 0;
 
 var _common = require("../../components/common");
 
@@ -64,8 +64,8 @@ var logicalSize = {
   'min-width': 'min-inline-size'
 };
 var logicalOverflow = {
-  'overflow-x': 'overflow-block',
-  'overflow-y': 'overflow-inline'
+  'overflow-x': 'overflow-inline',
+  'overflow-y': 'overflow-block'
 };
 var logicalBorders = {
   'border-horizontal': 'border-inline',
@@ -113,6 +113,23 @@ exports.LOGICAL_PROPERTIES = LOGICAL_PROPERTIES;
 var logicalCSS = function logicalCSS(property, value) {
   return "".concat(logicals[property], ": ").concat(value, ";");
 };
+/**
+ * Some logical properties are not yet fully supported by all browsers.
+ * For those cases, we should use the old property as a fallback for
+ * browsers missing support, while allowing supporting browsers to use
+ * the logical properties.
+ *
+ * Examples:
+ * https://caniuse.com/?search=overflow-block
+ * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+ */
+
+
+exports.logicalCSS = logicalCSS;
+
+var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
+  return "\n  ".concat(property, ": ").concat(value, ";\n  ").concat(logicalCSS(property, value), "\n");
+};
 /**
  *
  * @param property A string that is a valid CSS logical property
@@ -121,7 +138,7 @@ var logicalCSS = function logicalCSS(property, value) {
  */
 
 
-exports.logicalCSS = logicalCSS;
+exports.logicalCSSWithFallback = logicalCSSWithFallback;
 
 var logicalStyle = function logicalStyle(property, value) {
   // Strip hyphens and camelCase the CSS logical property so React doesn't throw errors

package/lib/global_styling/mixins/_helpers.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
 
 var _theme = require("../../services/theme");
 
 var _color = require("../../services/color");
 
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,7 +40,7 @@ var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
 
   var firefoxSupport = "scrollbar-color: ".concat(thumbColor, " ").concat(trackColor, ";");
-  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      width: ").concat(scrollBarSize, ";\n      height: ").concat(scrollBarSize, ";\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
+  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      ").concat((0, _functions.logicalCSS)('width', scrollBarSize), "\n      ").concat((0, _functions.logicalCSS)('height', scrollBarSize), "\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
 };
 
 exports.euiScrollBarStyles = euiScrollBarStyles;
@@ -92,12 +94,11 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  */
 
 
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 var euiYScroll = function euiYScroll(euiTheme) {
   var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       height = _ref5.height;
 
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat((0, _functions.logicalCSS)('height', height || '100%'), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-y', 'auto'), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-x', 'hidden'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 
 exports.euiYScroll = euiYScroll;
@@ -140,7 +141,7 @@ var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
 exports.useEuiYScrollWithShadows = useEuiYScrollWithShadows;
 
 var euiXScroll = function euiXScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat((0, _functions.logicalCSSWithFallback)('overflow-x', 'auto'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 
 exports.euiXScroll = euiXScroll;
@@ -196,5 +197,15 @@ var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
     mask: mask
   });
 };
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+
+
+exports.useEuiOverflowScroll = useEuiOverflowScroll;
+
+var euiFullHeight = function euiFullHeight() {
+  return "\n  ".concat((0, _functions.logicalCSS)('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
+};
 
-exports.useEuiOverflowScroll = useEuiOverflowScroll;
+exports.euiFullHeight = euiFullHeight;

package/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/lib/global_styling/mixins/_states.js

@@ -23,7 +23,8 @@ var _services = require("../../services");
  * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
  * @param color Accepts any CSS color, **Note: only works in -webkit-**
  */
-var euiFocusRing = function euiFocusRing(euiTheme) {
+var euiFocusRing = function euiFocusRing(_ref) {
+  var euiTheme = _ref.euiTheme;
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
   var options = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
@@ -51,9 +52,7 @@ var euiFocusRing = function euiFocusRing(euiTheme) {
 exports.euiFocusRing = euiFocusRing;
 
 var useEuiFocusRing = function useEuiFocusRing(offset, color) {
-  var _useEuiTheme = (0, _services.useEuiTheme)(),
-      euiTheme = _useEuiTheme.euiTheme;
-
+  var euiTheme = (0, _services.useEuiTheme)();
   return euiFocusRing(euiTheme, offset, {
     color: color
   });

package/lib/global_styling/mixins/_typography.js

@@ -9,6 +9,8 @@ var _typography = require("../functions/typography");
 
 var _hooks = require("../../services/theme/hooks");
 
+var _functions = require("../functions");
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -54,7 +56,8 @@ exports.euiTextBreakWord = euiTextBreakWord;
 
 var euiTextTruncate = function euiTextTruncate() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
-  return "\n  max-width: ".concat(maxWidth, "; // Ensure that the node has a maximum width after which truncation can occur\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
+  return "\n  ".concat((0, _functions.logicalCSS)('max-width', maxWidth) // Ensure that the node has a maximum width after which truncation can occur
+  , "\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
 };
 /**
  * Fixed-width numbers for tabular data

package/lib/global_styling/reset/global_styles.js

@@ -49,7 +49,7 @@ var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiTheme), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  var styles = /*#__PURE__*/(0, _react2.css)(_reset.resetStyles, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", (0, _mixins.euiFocusRing)(euiThemeContext), ";}::selection{background:", (0, _color.transparentize)(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return (0, _react2.jsx)(_react2.Global, {
     styles: styles
   });

package/lib/global_styling/utility/utility.js

@@ -3,14 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiUtilityClasses = void 0;
+exports.globalStyles = exports.EuiUtilityClasses = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@emotion/react");
 
+var _hooks = require("../../services/theme/hooks");
+
 var _screen_reader_only = require("../../components/accessibility/screen_reader_only/screen_reader_only.styles");
 
+var _mixins = require("../mixins");
+
+var _functions = require("../functions");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /*
@@ -20,11 +26,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var globalStyles = /*#__PURE__*/(0, _react2.css)(".euiScreenReaderOnly{", (0, _screen_reader_only.euiScreenReaderOnly)(), ";};label:globalStyles;");
+var globalStyles = function globalStyles(euiThemeContext) {
+  return /*#__PURE__*/(0, _react2.css)(".euiScreenReaderOnly{", (0, _screen_reader_only.euiScreenReaderOnly)(), ";}.eui-alignBaseline{vertical-align:baseline!important;}.eui-alignBottom{vertical-align:bottom!important;}.eui-alignMiddle{vertical-align:middle!important;}.eui-alignTop{vertical-align:top!important;}.eui-displayBlock{display:block!important;}.eui-displayInline{display:inline!important;}.eui-displayInlineBlock{display:inline-block!important;}.eui-fullWidth{display:block!important;", (0, _functions.logicalCSS)('width', '100% !important'), ";}.eui-fullHeight{", (0, _mixins.euiFullHeight)(), ";}.eui-textCenter{text-align:center!important;}.eui-textLeft{text-align:start!important;}.eui-textRight{text-align:end!important;}.eui-textNoWrap{white-space:nowrap!important;}.eui-textInheritColor{color:inherit!important;}.eui-textBreakWord{", (0, _mixins.euiTextBreakWord)(), ";}.eui-textBreakAll{overflow-wrap:break-word!important;word-break:break-all!important;}.eui-textBreakNormal{overflow-wrap:normal!important;word-wrap:normal!important;word-break:normal!important;}.eui-textTruncate{", (0, _mixins.euiTextTruncate)(), ";}.eui-textNumber{", (0, _mixins.euiNumberFormat)(euiThemeContext), ";}.eui-scrollBar{", (0, _mixins.euiScrollBarStyles)(euiThemeContext), ";}.eui-yScroll{", (0, _mixins.euiYScroll)(euiThemeContext), ";}.eui-xScroll{", (0, _mixins.euiXScroll)(euiThemeContext), ";}.eui-yScrollWithShadows{", (0, _mixins.euiYScrollWithShadows)(euiThemeContext), ";}.eui-xScrollWithShadows{", (0, _mixins.euiXScrollWithShadows)(euiThemeContext), ";}[class*='eui-showFor']{display:none!important;}", Object.keys(euiThemeContext.euiTheme.breakpoint).map(function (size) {
+    return "\n      .eui-hideFor--".concat(size, " {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: none !important;\n        }\n      }\n      .eui-showFor--").concat(size, " {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: inline !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--block {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--inlineBlock {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: inline-block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--flex {\n        ").concat((0, _mixins.euiBreakpoint)(euiThemeContext, [size]), " {\n          display: flex !important;\n        }\n      }");
+  }), ";;label:globalStyles;");
+};
+
+exports.globalStyles = globalStyles;
 
 var EuiUtilityClasses = function EuiUtilityClasses() {
+  var euiTheme = (0, _hooks.useEuiTheme)();
   return (0, _react2.jsx)(_react2.Global, {
-    styles: globalStyles
+    styles: globalStyles(euiTheme)
   });
 };
 

package/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/lib/services/breakpoint/_sorting.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.sortMapBySmallToLargeValues = exports.sortMapByLargeToSmallValues = void 0;
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * 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 = _slicedToArray(_ref, 2),
+        a = _ref3[1];
+
+    var _ref4 = _slicedToArray(_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 = _slicedToArray(_ref5, 2),
+        a = _ref7[1];
+
+    var _ref8 = _slicedToArray(_ref6, 2),
+        b = _ref8[1];
+
+    return a - b;
+  }));
+};
+
+exports.sortMapBySmallToLargeValues = sortMapBySmallToLargeValues;