@elastic/eui 110.0.0 → 111.1.0

package/optimize/lib/components/icon/svgs/product_robot.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M9.208 11.23a.446.446 0 0 1 .642.616l-.015.017a1.373 1.373 0 0 1-.127.11 2.326 2.326 0 0 1-.355.227c-.31.163-.763.319-1.353.319a2.89 2.89 0 0 1-1.352-.319 2.325 2.325 0 0 1-.452-.31l-.029-.027-.016-.017a.446.446 0 0 1 .643-.617l.005.005.045.039c.045.035.118.086.219.139.199.104.51.216.937.216.428 0 .74-.112.94-.216a1.417 1.417 0 0 0 .263-.179l.005-.004ZM5.964 8a1.019 1.019 0 1 1 0 2.038 1.019 1.019 0 0 1 0-2.038Zm4.073 0a1.018 1.018 0 1 1 0 2.037 1.018 1.018 0 0 1 0-2.037Z"/>
+  <path fill-rule="evenodd" d="M8 1a1.4 1.4 0 0 1 .446 2.726V5h1.845C11.767 5 13 6.27 13 7.746V8h1.11c.491 0 .89.526.89 1.018v3.055c0 .492-.399.927-.89.927L13 12.99v1.11c0 .491-.435.9-.927.9H3.928C3.436 15 3 14.601 3 14.11V13H1.89c-.46 0-.84-.386-.886-.835L1 12.072V9.018C1 8.527 1.4 8 1.89 8H3v-.254C3 6.27 4.234 5 5.71 5h1.845V3.726A1.4 1.4 0 0 1 8 1ZM5.72 6C4.734 6 4 6.762 4 7.746V14h8V7.746C12 6.762 11.285 6 10.301 6H5.719ZM2 12h1V9H2v3Zm11 0h1l-.005-3h-1L13 12ZM8 1.89a.51.51 0 1 0 .001 1.02.51.51 0 0 0 0-1.02Z" clip-rule="evenodd"/>
+</svg>

package/optimize/lib/components/link/external_link_icon.js

@@ -36,7 +36,10 @@ var EuiExternalLinkIcon = exports.EuiExternalLinkIcon = function EuiExternalLink
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   var iconCssStyle = (0, _services.useEuiMemoizedStyles)(iconStyle);
   var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
-  return (0, _react2.jsx)(_react.default.Fragment, null, showExternalLinkIcon && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
+  if (!showExternalLinkIcon) {
+    return null;
+  }
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
     css: iconCssStyle,
     size: "s",
     type: "popout",
@@ -44,8 +47,8 @@ var EuiExternalLinkIcon = exports.EuiExternalLinkIcon = function EuiExternalLink
   }, rest)), target === '_blank' ? (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiExternalLinkIcon.newTarget.screenReaderOnlyText",
     default: "(external, opens in a new tab or window)"
-  }))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
+  }))) : (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", null, (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiExternalLinkIcon.externalTarget.screenReaderOnlyText",
     default: "(external)"
-  }))))));
+  }))));
 };

package/optimize/lib/components/overlay_mask/overlay_mask.js

@@ -34,13 +34,17 @@ var EuiOverlayMask = exports.EuiOverlayMask = function EuiOverlayMask(_ref) {
     headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
     maskRef = _ref.maskRef,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var hasRendered = (0, _react.useRef)(false);
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     overlayMaskNode = _useState2[0],
     setOverlayMaskNode = _useState2[1];
   var combinedMaskRef = (0, _services.useCombinedRefs)([setOverlayMaskNode, maskRef]);
+  var handleAnimationEnd = (0, _react.useCallback)(function () {
+    hasRendered.current = true;
+  }, []);
   var styles = (0, _services.useEuiMemoizedStyles)(_overlay_mask.euiOverlayMaskStyles);
-  var cssStyles = (0, _css.cx)([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
+  var cssStyles = (0, _css.cx)([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], hasRendered.current && styles.noAnimation]);
   (0, _react.useEffect)(function () {
     if (!overlayMaskNode) return;
     (0, _common.keysOf)(rest).forEach(function (key) {
@@ -51,7 +55,13 @@ var EuiOverlayMask = exports.EuiOverlayMask = function EuiOverlayMask(_ref) {
         overlayMaskNode.setAttribute(key, rest[key]);
       }
     });
-  }, [overlayMaskNode]); // eslint-disable-line react-hooks/exhaustive-deps
+    overlayMaskNode.addEventListener('animationend', handleAnimationEnd, {
+      once: true
+    });
+    return function () {
+      overlayMaskNode.removeEventListener('animationend', handleAnimationEnd);
+    };
+  }, [overlayMaskNode, handleAnimationEnd]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Note: Use `classList.add/remove` instead of setting the entire `className`
   // so as not to override any existing classes set by `EuiPortal`

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

@@ -6,20 +6,27 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiOverlayMaskStyles = void 0;
 var _css = require("@emotion/css");
 var _global_styling = require("../../global_styling");
-/*
+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)."; } /*
  * 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 euiOverlayMaskStyles = exports.euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme,
     highContrastMode = _ref.highContrastMode;
   return {
-    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/(0, _css.css)("position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " ", (0, _global_styling.logicalCSS)('right', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", _global_styling.euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in forwards;animation-iteration-count:1;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
-    belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
+    belowHeader: /*#__PURE__*/(0, _css.css)("z-index:", euiTheme.levels.maskBelowHeader, ";", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;"),
+    noAnimation: /*#__PURE__*/(0, _css.css)(process.env.NODE_ENV === "production" ? {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;"
+    } : {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    })
   };
 };

package/optimize/lib/components/page/page_header/page_header_content.js

@@ -146,7 +146,7 @@ var EuiPageHeaderContent = exports.EuiPageHeaderContent = function EuiPageHeader
     })) === null || _tabs$find === void 0 ? void 0 : _tabs$find.label));
     tabsNode = (0, _react2.jsx)(_react.default.Fragment, null, pageTitleNode && (0, _react2.jsx)(_spacer.EuiSpacer, null), screenReaderPageTitle, (0, _react2.jsx)(_tabs.EuiTabs, (0, _extends2.default)({}, tabsProps, {
       bottomBorder: false,
-      size: "l"
+      size: "m"
     }), renderTabs()));
   }
   var childrenNode = children && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_spacer.EuiSpacer, null), children);

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

@@ -16,6 +16,7 @@ var _cache = require("./cache");
 var _system_defaults = require("./system_defaults");
 var _nested = require("./nested");
 var _component_defaults = require("./component_defaults");
+var _manager = require("../flyout/manager");
 var _react2 = require("@emotion/react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -86,5 +87,5 @@ var EuiProvider = exports.EuiProvider = function EuiProvider(_ref) {
     children: Utilities && (0, _react2.jsx)(Utilities, null)
   })), (0, _react2.jsx)(_component_defaults.EuiComponentDefaultsProvider, {
     componentDefaults: componentDefaults
-  }, children)))));
+  }, (0, _react2.jsx)(_manager.EuiFlyoutManager, null, children))))));
 };

package/optimize/lib/components/search_bar/search_bar.js

@@ -206,7 +206,7 @@ var EuiSearchBar = exports.EuiSearchBar = /*#__PURE__*/function (_Component) {
       var isHintVisible = (_hint$popoverProps$is = hint === null || hint === void 0 || (_hint$popoverProps = hint.popoverProps) === null || _hint$popoverProps === void 0 ? void 0 : _hint$popoverProps.isOpen) !== null && _hint$popoverProps$is !== void 0 ? _hint$popoverProps$is : isHintVisibleState;
       return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiTheme) {
         return (0, _react2.jsx)(_flex.EuiFlexGroup, {
-          gutterSize: "m",
+          gutterSize: "s",
           alignItems: "center",
           wrap: true
         }, toolsLeftEl, (0, _react2.jsx)(_flex.EuiFlexItem, {

package/optimize/lib/components/spacer/spacer.js

@@ -25,7 +25,7 @@ var SIZES = exports.SIZES = ['xs', 's', 'm', 'l', 'xl', 'xxl'];
 var EuiSpacer = exports.EuiSpacer = function EuiSpacer(_ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'l' : _ref$size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var styles = (0, _services.useEuiMemoizedStyles)(_spacer.euiSpacerStyles);
   var classes = (0, _classnames.default)('euiSpacer', (0, _defineProperty2.default)({}, "euiSpacer--".concat(size), size), className);

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

@@ -10,6 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@emotion/react");
+var _services = require("../../services");
 var _icon = require("../icon");
 var _i18n = require("../i18n");
 var _excluded = ["className", "number", "status"];
@@ -33,7 +34,11 @@ var EuiTourStepIndicator = exports.EuiTourStepIndicator = function EuiTourStepIn
     number = _ref2.number,
     status = _ref2.status,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    euiTheme = _useEuiTheme.euiTheme;
   var classes = (0, _classnames.default)('euiTourStepIndicator', className);
+  var inactiveColor = euiTheme.components.tourStepIndicatorInactiveColor;
+  var activeColor = euiTheme.components.tourStepIndicatorActiveColor;
   var indicatorIcon;
   if (status === 'active') {
     indicatorIcon = (0, _react2.jsx)(_i18n.EuiI18n, {
@@ -43,7 +48,7 @@ var EuiTourStepIndicator = exports.EuiTourStepIndicator = function EuiTourStepIn
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
         "aria-label": isActive,
-        color: "success",
+        color: activeColor,
         "aria-current": "step"
       });
     });
@@ -55,7 +60,7 @@ var EuiTourStepIndicator = exports.EuiTourStepIndicator = function EuiTourStepIn
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
         "aria-label": isComplete,
-        color: "subdued"
+        color: inactiveColor
       });
     });
   } else if (status === 'incomplete') {
@@ -66,7 +71,7 @@ var EuiTourStepIndicator = exports.EuiTourStepIndicator = function EuiTourStepIn
       return (0, _react2.jsx)(_icon.EuiIcon, {
         type: "dot",
         "aria-label": isIncomplete,
-        color: "subdued"
+        color: inactiveColor
       });
     });
   }

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.highContrastHoverIndicatorStyles = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.SEVERITY_COLORS = exports.EXTENDED_BUTTON_COLORS = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
+exports.useEuiButtonFocusCSS = exports.useEuiButtonColorCSS = exports.highContrastHoverIndicatorStyles = exports.getEuiFilledButtonColors = exports.getEuiButtonColors = exports.euiButtonSizeMap = exports.euiButtonFillColor = exports.euiButtonEmptyColor = exports.euiButtonColor = exports.SEVERITY_COLORS = exports.EXTENDED_BUTTON_COLORS = exports.BUTTON_DISPLAYS = exports.BUTTON_COLORS = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
@@ -40,7 +40,18 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
     color: foreground,
     background: euiTheme.components.buttons[backgroundTokenName],
     backgroundHover: euiTheme.components.buttons[backgroundHoverTokenName],
-    backgroundActive: euiTheme.components.buttons[backgroundActiveTokenName]
+    backgroundActive: euiTheme.components.buttons[backgroundActiveTokenName],
+    borderColor: highContrastMode ? foreground : color === 'text' ? euiTheme.colors.borderBasePlain : 'transparent'
+  };
+};
+var getEuiButtonColors = exports.getEuiButtonColors = function getEuiButtonColors(euiThemeContext, color) {
+  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
+  var foreground = buttonColors.color;
+  var background = buttonColors.background;
+  return {
+    color: background === 'transparent' || color === 'disabled' ? foreground : (0, _services.makeHighContrastColor)(foreground)(background),
+    backgroundColor: background,
+    borderColor: buttonColors.borderColor
   };
 };
 
@@ -51,13 +62,21 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
  * @returns Style object `{ backgroundColor, color }`
  */
 var euiButtonColor = exports.euiButtonColor = function euiButtonColor(euiThemeContext, color) {
-  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
+  var buttonColors = getEuiButtonColors(euiThemeContext, color);
+  return _objectSpread({
+    color: buttonColors.color,
+    backgroundColor: buttonColors.backgroundColor
+  }, _highContrastBorder(euiThemeContext, buttonColors.borderColor));
+};
+var getEuiFilledButtonColors = exports.getEuiFilledButtonColors = function getEuiFilledButtonColors(euiThemeContext, color) {
+  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
   var foreground = buttonColors.color;
   var background = buttonColors.background;
-  return _objectSpread({
-    color: background === 'transparent' || color === 'disabled' ? foreground : (0, _services.makeHighContrastColor)(foreground)(background),
-    backgroundColor: background
-  }, _highContrastBorder(euiThemeContext, foreground));
+  return {
+    color: foreground,
+    backgroundColor: background,
+    borderColor: color === 'disabled' ? foreground : background
+  };
 };
 
 /**
@@ -67,13 +86,13 @@ var euiButtonColor = exports.euiButtonColor = function euiButtonColor(euiThemeCo
  * @returns Style object `{ backgroundColor, color }`
  */
 var euiButtonFillColor = exports.euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
-  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
+  var buttonColors = getEuiFilledButtonColors(euiThemeContext, color);
   var foreground = buttonColors.color;
-  var background = buttonColors.background;
+  var background = buttonColors.backgroundColor;
   return _objectSpread({
     color: foreground,
     backgroundColor: background
-  }, _highContrastBorder(euiThemeContext, color === 'disabled' ? foreground : background // The border is necessary for Windows high contrast themes, which ignore background-color
+  }, _highContrastBorder(euiThemeContext, buttonColors.borderColor // The border is necessary for Windows high contrast themes, which ignore background-color
   ));
 };
 

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

@@ -0,0 +1,112 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiContainerQuery = exports.euiContainerCSS = exports.euiContainer = void 0;
+var _react = require("@emotion/react");
+/*
+ * 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 CONTAINER_TYPES = ['normal', 'size', 'inline-size'];
+
+/**
+ * Type of container context used in container queries.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type}
+ */
+
+/**
+ * Establish element as a query container.
+ * The scroll state is applied through the `scrollState` argument
+ * and not the `type` argument.
+ *
+ * @example
+ * // Export container name to use across the application
+ * export const PAGE_CONTENT_CONTAINER_NAME = 'my-app-page-content';
+ * const pageContentStyles = css`
+ *   ${euiContainer('inline-size', PAGE_CONTENT_CONTAINER_NAME)}
+ *   margin: 0 auto;
+ * `;
+ *
+ * @returns A style string to be used inside Emotion's `css` template literal
+ * @beta
+ */
+var euiContainer = exports.euiContainer = function euiContainer(type, name, scrollState) {
+  var finalType = '';
+  if (type !== 'normal') {
+    finalType += type;
+  }
+  if (scrollState) {
+    if (finalType.length) {
+      finalType += ' ';
+    }
+    finalType += 'scroll-state';
+  }
+  return [!!name && "container-name: ".concat(name), !!finalType && "container-type: ".concat(finalType)].filter(Boolean).join(';');
+};
+
+/**
+ * Establish element as a query container.
+ * The scroll state is applied through the `scrollState` argument
+ * and not the `type` argument.
+ *
+ * @example
+ * // Export container name to use across the application
+ * export const PAGE_CONTENT_CONTAINER_NAME = 'my-app-page-content';
+ * const PageContent = ({ children }: PropsWithChildren) => (
+ *   <main css={euiContainerCSS('inline-size', PAGE_CONTENT_CONTAINER_NAME)}>
+ *     {children}
+ *   </main>
+ * );
+ * @returns Emotion's `SerializedStyles` object to be passed to the `css` prop
+ *   of a React component.
+ * @beta
+ */
+var euiContainerCSS = exports.euiContainerCSS = function euiContainerCSS(type, name, scrollState) {
+  return /*#__PURE__*/(0, _react.css)(euiContainer(type, name, scrollState), ";label:euiContainerCSS;");
+};
+
+/**
+ * Get a @container rule for given conditions and an optional container name.
+ *
+ * Container queries can be used to apply conditional styles based on container
+ * size, its scroll state or even its styles.
+ *
+ * It's hugely useful to conditionally show or hide information based
+ * on the **container** dimensions instead of the **viewport** dimensions.
+ *
+ * When container name is provided, it will be used to target the containment
+ * context. When skipped, it will target the nearest ancestor with containment.
+ *
+ * @example
+ * const itemDetailsStyles = css`
+ *   background: red;
+ *
+ *   ${euiContainerQuery('(width > 250px)')} {
+ *     background: blue;
+ *   }
+ * `;
+ *
+ * @param conditions one or many conditions to query the container with.
+ *   Similarly to media queries, you can use
+ *   size queries (e.g., `(width > 300px)`),
+ *   scroll state queries (e.g., `(scroll-state(scrollable: top))`),
+ *   or even style queries.
+ *   You can use the `and`, `or` and `not` logical keywords to define container
+ *   conditions. Note that all conditions must be wrapped in parentheses.
+ *
+ * @param containerName When provided, it will be used to target
+ *   the containment context and run queries against it. Otherwise, the nearest
+ *   ancestor with containment will be queried instead.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container}
+ * @beta
+ */
+var euiContainerQuery = exports.euiContainerQuery = function euiContainerQuery(conditions, containerName) {
+  return "@container ".concat(containerName !== null && containerName !== void 0 ? containerName : '').concat(containerName ? ' ' : '').concat(conditions);
+};

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

@@ -14,6 +14,17 @@ Object.keys(_color).forEach(function (key) {
     }
   });
 });
+var _container_query = require("./_container_query");
+Object.keys(_container_query).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _container_query[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _container_query[key];
+    }
+  });
+});
 var _helpers = require("./_helpers");
 Object.keys(_helpers).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

package/optimize/lib/services/container_query/container_query_hook.js

@@ -0,0 +1,65 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiContainerQuery = useEuiContainerQuery;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _match_container = require("./match_container");
+/*
+ * 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.
+ */
+
+/**
+ * React hook that subscribes to CSS container query changes.
+ *
+ * For this to work:
+ * - a proper container (an element with e.g. `container-type: inline-size`) is needed, and
+ * - the container MUST to be a parent of the element being observed
+ *
+ * @param containerCondition - A CSS `<container-condition>` string, e.g. `(width > 400px)` or `(min-width: 600px)`
+ * @param name - Optional container name, e.g. `sidebar`
+ * @returns An object containing:
+ *   - `ref`: A ref to attach to the container element
+ *   - `matches`: `true` if the container matches the condition, `false` otherwise
+ *
+ * @example
+ * ```tsx
+ * const { ref, matches } = useEuiContainerQuery('(width > 400px)');
+ * return <div ref={ref}>{matches ? 'Wide' : 'Narrow'}</div>;
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container | MDN: @container}
+ * @beta
+ */
+function useEuiContainerQuery(containerCondition, name) {
+  var containerQueryString = name ? "".concat(name, " ").concat(containerCondition) : containerCondition;
+  var ref = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    matches = _useState2[0],
+    setMatches = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (!ref.current) return;
+    var queryList = (0, _match_container.matchContainer)(ref.current, containerQueryString);
+    var handleChange = function handleChange() {
+      setMatches(queryList.matches);
+    };
+    setMatches(queryList.matches);
+    queryList.addEventListener('change', handleChange);
+    return function () {
+      queryList.removeEventListener('change', handleChange);
+      queryList.dispose();
+    };
+  }, [ref, containerQueryString]);
+  return {
+    ref: ref,
+    matches: matches
+  };
+}

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

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _container_query_hook = require("./container_query_hook");
+Object.keys(_container_query_hook).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _container_query_hook[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _container_query_hook[key];
+    }
+  });
+});