@elastic/eui 84.0.0 → 85.0.0

package/lib/services/theme/index.js

@@ -84,7 +84,7 @@ Object.defineProperty(exports, "getComputed", {
 Object.defineProperty(exports, "getEuiDevProviderWarning", {
   enumerable: true,
   get: function get() {
-    return _provider.getEuiDevProviderWarning;
+    return _warning.getEuiDevProviderWarning;
   }
 });
 Object.defineProperty(exports, "getOn", {
@@ -108,7 +108,7 @@ Object.defineProperty(exports, "mergeDeep", {
 Object.defineProperty(exports, "setEuiDevProviderWarning", {
   enumerable: true,
   get: function get() {
-    return _provider.setEuiDevProviderWarning;
+    return _warning.setEuiDevProviderWarning;
   }
 });
 Object.defineProperty(exports, "setOn", {
@@ -132,5 +132,6 @@ Object.defineProperty(exports, "withEuiTheme", {
 var _context = require("./context");
 var _hooks = require("./hooks");
 var _provider = require("./provider");
+var _warning = require("./warning");
 var _utils = require("./utils");
 var _types = require("./types");

package/lib/services/theme/provider.js

@@ -4,12 +4,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.EuiThemeProvider = void 0;
+exports.EuiThemeProvider = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _css = require("@emotion/css");
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 var _context = require("./context");
+var _emotion = require("./emotion");
 var _utils = require("./utils");
 var _react2 = require("@emotion/react");
 var _excluded = ["cloneElement", "className"];
@@ -36,15 +37,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } /*
                                                                        * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                        * Side Public License, v 1.
                                                                        */
-var providerWarning = undefined;
-var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
-  return providerWarning = level;
-};
-exports.setEuiDevProviderWarning = setEuiDevProviderWarning;
-var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
-  return providerWarning;
-};
-exports.getEuiDevProviderWarning = getEuiDevProviderWarning;
 var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
@@ -149,6 +141,6 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: theme
   }, (0, _react2.jsx)(_context.EuiNestedThemeContext.Provider, {
     value: nestedThemeContext
-  }, renderedChildren)))));
+  }, (0, _react2.jsx)(_emotion.EuiEmotionThemeProvider, null, renderedChildren))))));
 };
 exports.EuiThemeProvider = EuiThemeProvider;

package/lib/services/theme/warning.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.emitEuiProviderWarning = void 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.
+ */
+
+var providerWarning = undefined;
+var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
+  return providerWarning = level;
+};
+exports.setEuiDevProviderWarning = setEuiDevProviderWarning;
+var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
+  return providerWarning;
+};
+
+// Not a public top-level EUI export, currently for internal use
+exports.getEuiDevProviderWarning = getEuiDevProviderWarning;
+var emitEuiProviderWarning = function emitEuiProviderWarning(providerMessage) {
+  switch (providerWarning) {
+    case 'log':
+      console.log(providerMessage);
+      break;
+    case 'warn':
+      console.warn(providerMessage);
+      break;
+    case 'error':
+      throw new Error(providerMessage);
+    case undefined:
+    default:
+      break;
+  }
+};
+exports.emitEuiProviderWarning = emitEuiProviderWarning;

package/optimize/es/components/accessibility/screen_reader_only/screen_reader_only.js

@@ -7,7 +7,7 @@
  */
 
 import classNames from 'classnames';
-import { cloneElementWithCss } from '../../../services/theme/clone_element';
+import { cloneElementWithCss } from '../../../services';
 import { euiScreenReaderOnlyStyles } from './screen_reader_only.styles';
 export var EuiScreenReaderOnly = function EuiScreenReaderOnly(_ref) {
   var children = _ref.children,

package/optimize/es/components/card/card.js

@@ -15,8 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { isValidElement } from 'react';
 import classNames from 'classnames';
-import { getSecureRelForTarget, useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { getSecureRelForTarget, useEuiTheme, cloneElementWithCss } from '../../services';
 import { EuiText } from '../text';
 import { EuiTitle } from '../title';
 import { EuiBetaBadge } from '../badge/beta_badge';

package/optimize/es/components/datagrid/utils/grid_height_width.js

@@ -36,22 +36,29 @@ export var useFinalGridDimensions = function useFinalGridDimensions(_ref) {
 
   // Set the wrapper height on load, whenever the grid wrapper resizes, and whenever rowCount changes
   useEffect(function () {
-    var boundingRect = wrapperRef.current.getBoundingClientRect();
+    if (!wrapperRef.current) return;
+    var wrapperHeight = wrapperRef.current.getBoundingClientRect().height;
     if (isFullScreen) {
-      setFullScreenHeight(boundingRect.height);
+      setFullScreenHeight(wrapperHeight);
     } else {
-      if (boundingRect.height !== unconstrainedHeight) {
-        setHeight(boundingRect.height);
+      // NOTE: Math.round() is necessary here to account for browser zoom level
+      // Otherwise, both `wrapperHeight` and `unconstrainedHeight` can return values
+      // that are slightly off by small decimal rounding, which are essentially
+      // equivalent but causes the wrapper height to get set when it shouldn't
+      if (Math.round(wrapperHeight) !== Math.round(unconstrainedHeight)) {
+        setHeight(wrapperHeight);
       }
     }
-    if (boundingRect.width !== unconstrainedWidth) {
-      setWidth(boundingRect.width);
+  }, [rowCount, isFullScreen, wrapperDimensions.height, unconstrainedHeight, wrapperRef]);
+
+  // Set the wrapper width on load and whenever the grid wrapper resizes
+  useEffect(function () {
+    if (!wrapperRef.current) return;
+    var wrapperWidth = wrapperRef.current.getBoundingClientRect().width;
+    if (wrapperWidth !== unconstrainedWidth) {
+      setWidth(wrapperWidth);
     }
-  }, [
-  // Effects that should cause recalculations
-  rowCount, isFullScreen, wrapperDimensions,
-  // Dependencies
-  wrapperRef, unconstrainedHeight, unconstrainedWidth]);
+  }, [wrapperDimensions.width, unconstrainedWidth, wrapperRef]);
   var finalHeight = isFullScreen ? fullScreenHeight : height || unconstrainedHeight;
   var finalWidth = width || unconstrainedWidth;
   return IS_JEST_ENVIRONMENT ? {

package/optimize/es/components/facet/facet_button.js

@@ -14,8 +14,7 @@ import classNames from 'classnames';
 import { EuiNotificationBadge } from '../badge';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiInnerText } from '../inner_text';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
-import { useEuiTheme } from '../../services';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { euiFacetButtonStyles, euiFacetButtonTextStyles, euiFacetButtonIconStyles, euiFacetButtonQuantityStyles, euiFacetButtonLoadingSpinnerStyles } from './facet_button.styles';
 import { EuiButtonDisplay, isButtonDisabled } from '../button/button_display/_button_display';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/optimize/es/components/filter_group/filter_button.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps"];
+var _excluded = ["children", "className", "iconType", "iconSide", "color", "badgeColor", "hasActiveFilters", "numFilters", "numActiveFilters", "isDisabled", "isSelected", "type", "grow", "withNext", "textProps", "contentProps"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -13,12 +13,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { Fragment } from 'react';
+import React from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
 import { useEuiI18n } from '../i18n';
+import { useInnerText } from '../inner_text';
 import { EuiNotificationBadge } from '../badge';
 import { EuiButtonEmpty } from '../button/button_empty';
-import { useInnerText } from '../inner_text';
+import { euiFilterButtonStyles, euiFilterButtonChildStyles } from './filter_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFilterButton = function EuiFilterButton(_ref) {
   var children = _ref.children,
@@ -41,20 +43,22 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
     grow = _ref$grow === void 0 ? true : _ref$grow,
     withNext = _ref.withNext,
     textProps = _ref.textProps,
+    contentProps = _ref.contentProps,
     rest = _objectWithoutProperties(_ref, _excluded);
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
+  var euiTheme = useEuiTheme();
+  var styles = euiFilterButtonStyles(euiTheme);
+  var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
+  var _euiFilterButtonChild = euiFilterButtonChildStyles(euiTheme),
+    contentStyles = _euiFilterButtonChild.content,
+    textStyles = _euiFilterButtonChild.text,
+    notificationStyles = _euiFilterButtonChild.notification;
   var classes = classNames('euiFilterButton', {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
-    'euiFilterButton-hasNotification': numFiltersDefined,
-    'euiFilterButton--hasIcon': iconType,
-    'euiFilterButton--noGrow': !grow,
-    'euiFilterButton--withNext': withNext
+    'euiFilterButton-hasNotification': numFiltersDefined
   }, className);
-  var buttonTextClassNames = classNames({
-    'euiFilterButton__text-hasNotification': numFiltersDefined || numActiveFilters
-  }, textProps && textProps.className);
   var showBadge = numFiltersDefined || numActiveFiltersDefined;
   var badgeCount = numActiveFilters || numFilters;
   var activeBadgeLabel = useEuiI18n('euiFilterButton.filterBadgeActiveAriaLabel', '{count} active filters', {
@@ -63,35 +67,42 @@ export var EuiFilterButton = function EuiFilterButton(_ref) {
   var availableBadgeLabel = useEuiI18n('euiFilterButton.filterBadgeAvailableAriaLabel', '{count} available filters', {
     count: badgeCount
   });
+  var buttonTextClassNames = classNames('euiFilterButton__text', {
+    'euiFilterButton__text-hasNotification': showBadge
+  }, textProps === null || textProps === void 0 ? void 0 : textProps.className);
   var badgeContent = showBadge && ___EmotionJSX(EuiNotificationBadge, {
     className: "euiFilterButton__notification",
+    css: [notificationStyles.euiFilterButton__notification, isDisabled && notificationStyles.disabled, ";label:badgeContent;"],
     "aria-label": hasActiveFilters ? activeBadgeLabel : availableBadgeLabel,
     color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
     role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
   }, badgeCount);
-  var dataText;
-  if (typeof children === 'string') {
-    dataText = children;
-  }
   var _useInnerText = useInnerText(),
     _useInnerText2 = _slicedToArray(_useInnerText, 2),
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
-  var buttonContents = ___EmotionJSX(Fragment, null, ___EmotionJSX("span", {
+  var dataText = children && typeof children === 'string' ? children : innerText;
+  var buttonContents = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("span", {
     ref: ref,
     className: "euiFilterButton__textShift",
-    "data-text": dataText || innerText,
-    title: dataText || innerText
+    css: textStyles.euiFilterButton__textShift,
+    "data-text": dataText,
+    title: dataText
   }, children), badgeContent);
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
+    css: cssStyles,
     color: color,
     isDisabled: isDisabled,
     iconSide: iconSide,
     iconType: iconType,
     type: type,
     textProps: _objectSpread(_objectSpread({}, textProps), {}, {
-      className: buttonTextClassNames
+      className: buttonTextClassNames,
+      css: [textStyles.euiFilterButton__text, showBadge && textStyles.hasNotification, textProps === null || textProps === void 0 ? void 0 : textProps.css]
+    }),
+    contentProps: _objectSpread(_objectSpread({}, contentProps), {}, {
+      css: [contentStyles.euiFilterButton__content, iconType && contentStyles.hasIcon, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css]
     })
   }, rest), buttonContents);
 };

package/optimize/es/components/filter_group/filter_button.styles.js

@@ -0,0 +1,93 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits, euiTextShift, euiTextTruncate } from '../../global_styling';
+import { euiFormVariables } from '../form/form.styles';
+export var euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref5) {
+  var euiTheme = _ref5.euiTheme;
+  return {
+    flex: '1 1 auto',
+    minInlineSize: mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 3;
+    })
+  };
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "jkp921-noGrow",
+  styles: "flex-grow:0;label:noGrow;"
+} : {
+  name: "jkp921-noGrow",
+  styles: "flex-grow:0;label:noGrow;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlHeight = _euiFormVariables.controlHeight,
+    borderColor = _euiFormVariables.borderColor;
+
+  // Box shadow simulates borders without affecting width
+  var leftBoxShadow = "-".concat(euiTheme.border.width.thin, " 0 0 0 ").concat(borderColor);
+  // Bottom borders are needed for responsive flex-wrap behavior
+  var bottomBoxShadow = "0 ".concat(euiTheme.border.width.thin, " 0 0 ").concat(borderColor);
+  return {
+    euiFilterButton: /*#__PURE__*/css(euiFilterButtonDisplay(euiThemeContext), " ", logicalCSS('height', controlHeight), " border-radius:0;box-shadow:", leftBoxShadow, ",", bottomBoxShadow, ";&:hover:not(:disabled),&:focus:not(:disabled){text-decoration:none;.euiFilterButton__textShift{text-decoration:underline;}}&:focus-visible{outline-offset:-", euiTheme.focus.width, ";};label:euiFilterButton;"),
+    withNext: /*#__PURE__*/css("&+.euiFilterButton{", logicalCSS('margin-left', "-".concat(euiTheme.size.xs)), "box-shadow:", bottomBoxShadow, ";};label:withNext;"),
+    noGrow: _ref4,
+    hasNotification: /*#__PURE__*/css(logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 6;
+    })), ";;label:hasNotification;"),
+    hasActiveFilters: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+  };
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1w3amc7-disabled",
+  styles: "opacity:0.5;label:disabled;"
+} : {
+  name: "1w3amc7-disabled",
+  styles: "opacity:0.5;label:disabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "nd1u8j-euiFilterButton__notification",
+  styles: "cursor:inherit;label:euiFilterButton__notification;"
+} : {
+  name: "nd1u8j-euiFilterButton__notification",
+  styles: "cursor:inherit;label:euiFilterButton__notification;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "f0jxzj-hasIcon",
+  styles: "justify-content:space-between;label:hasIcon;"
+} : {
+  name: "f0jxzj-hasIcon",
+  styles: "justify-content:space-between;label:hasIcon;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref6) {
+  var euiTheme = _ref6.euiTheme;
+  return {
+    content: {
+      euiFilterButton__content: /*#__PURE__*/css(";label:euiFilterButton__content;"),
+      hasIcon: _ref3
+    },
+    text: {
+      euiFilterButton__text: /*#__PURE__*/css(";label:euiFilterButton__text;"),
+      hasNotification: /*#__PURE__*/css("display:flex;align-items:center;gap:", euiTheme.size.s, ";;label:hasNotification;"),
+      euiFilterButton__textShift: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), " ", euiTextTruncate(), " ", logicalCSS('min-width', mathWithUnits(euiTheme.size.base, function (x) {
+        return x * 3;
+      })), ";;label:euiFilterButton__textShift;")
+    },
+    notification: {
+      euiFilterButton__notification: _ref2,
+      disabled: _ref
+    }
+  };
+};

package/optimize/es/components/filter_group/filter_group.js

@@ -11,6 +11,8 @@ var _excluded = ["children", "className", "fullWidth", "compressed"];
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiFilterGroupStyles } from './filter_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFilterGroup = function EuiFilterGroup(_ref) {
   var children = _ref.children,
@@ -19,11 +21,12 @@ export var EuiFilterGroup = function EuiFilterGroup(_ref) {
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     compressed = _ref.compressed,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiFilterGroup', {
-    'euiFilterGroup--fullWidth': fullWidth,
-    'euiFilterGroup--compressed': compressed
-  }, className);
+  var euiTheme = useEuiTheme();
+  var styles = euiFilterGroupStyles(euiTheme);
+  var cssStyles = [styles.euiFilterGroup, fullWidth && styles.fullWidth, compressed ? styles.compressed : styles.uncompressed];
+  var classes = classNames('euiFilterGroup', className);
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };

package/optimize/es/components/filter_group/filter_group.styles.js

@@ -0,0 +1,55 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits, euiMaxBreakpoint } from '../../global_styling';
+import { euiFormVariables } from '../form/form.styles';
+import { euiFilterButtonDisplay } from './filter_button.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ejknuq-fullWidth",
+  styles: "display:flex;label:fullWidth;"
+} : {
+  name: "ejknuq-fullWidth",
+  styles: "display:flex;label:fullWidth;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    backgroundColor = _euiFormVariables.backgroundColor,
+    borderColor = _euiFormVariables.borderColor,
+    controlBorderRadius = _euiFormVariables.controlBorderRadius,
+    controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  return {
+    euiFilterGroup: /*#__PURE__*/css("display:inline-flex;", logicalCSS('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", euiFilterButtonDisplay(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", logicalCSS('width', '100%'), ";}}", euiMaxBreakpoint(euiThemeContext, 's'), "{flex-wrap:wrap;}", euiMaxBreakpoint(euiThemeContext, 'xs'), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    fullWidth: _ref,
+    uncompressed: /*#__PURE__*/css("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
+    compressed: /*#__PURE__*/css("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", logicalCSS('height', controlCompressedHeight), ";};label:compressed;"),
+    /**
+     * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
+     * A fixed width is required because of the shift in widths that can be caused
+     * by the loading animation that precedes the results.
+     */
+    euiFilterGroup__popoverPanel: /*#__PURE__*/css(logicalCSS('width', mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 18;
+    })), ";;label:euiFilterGroup__popoverPanel;")
+  };
+};
+
+/**
+ * Small util for manually rounding the borders of the first and last EuiFilterButtons
+ * - this makes their focus rings appear nicely instead of being cutt off.
+ * 2nd selector accounts for EuiFilterButtons nested within popover/tooltip wrappers.
+ *
+ * NOTE: Do not use `logicalShorthandCSS()` here, as that will cause single buttons to not be rounded
+ */
+var buttonChildrenBorderRadii = function buttonChildrenBorderRadii(radiusSize) {
+  return "\n  > :first-child,\n  > :first-child .euiFilterButton {\n    ".concat(logicalCSS('border-top-left-radius', radiusSize), "\n    ").concat(logicalCSS('border-bottom-left-radius', radiusSize), "\n  }\n\n  > :last-child,\n  > :last-child .euiFilterButton {\n    ").concat(logicalCSS('border-top-right-radius', radiusSize), "\n    ").concat(logicalCSS('border-bottom-right-radius', radiusSize), "\n  }\n");
+};

package/optimize/es/components/icon/assets/at.js

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconAt = function EuiIconAt(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M3 8a5 5 0 1 1 9.812 1.364.78.78 0 0 1-.341.476c-.16.1-.382.16-.659.16-.507 0-.668-.18-.73-.274a.53.53 0 0 1-.082-.23V5h-1v.764a3 3 0 1 0 .146 4.333c.028.057.06.117.1.177.267.407.761.726 1.566.726.412 0 .83-.088 1.189-.311.367-.23.64-.583.773-1.053a6 6 0 1 0-2.501 3.393l-.546-.837A5 5 0 0 1 3 8Zm7 0a2 2 0 1 0-4 0 2 2 0 0 0 4 0Z"
+  }));
+};
+export var icon = EuiIconAt;

package/optimize/es/components/icon/assets/key.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconKey = function EuiIconKey(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M14 5a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm-1 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+  }), ___EmotionJSX("path", {
+    d: "M6 6a5 5 0 1 1 3.086 4.62l-1.232 1.234A.5.5 0 0 1 7.5 12H6v1.5a.5.5 0 0 1-.5.5H4v1.5a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-3a.5.5 0 0 1 .175-.38l5.932-5.085A5.019 5.019 0 0 1 6 6Zm5-4a4 4 0 0 0-3.853 5.08.5.5 0 0 1-.156.515L1 12.73V15h2v-1.5a.5.5 0 0 1 .5-.5H5v-1.5a.5.5 0 0 1 .5-.5h1.793l.877-.877a5.033 5.033 0 0 1-.503-.396.5.5 0 1 1 .666-.745A3.983 3.983 0 0 0 11 10h.005A4 4 0 0 0 11 2Z"
+  }));
+};
+export var icon = EuiIconKey;

package/optimize/es/components/icon/icon_map.js

@@ -26,6 +26,7 @@ export var typeToPathMap = {
   arrowEnd: 'arrowEnd',
   article: 'article',
   asterisk: 'asterisk',
+  at: 'at',
   auditbeatApp: 'app_auditbeat',
   beaker: 'beaker',
   bell: 'bell',
@@ -186,6 +187,7 @@ export var typeToPathMap = {
   inspect: 'inspect',
   invert: 'invert',
   ip: 'ip',
+  key: 'key',
   keyboard: 'keyboard',
   kqlField: 'kql_field',
   kqlFunction: 'kql_function',

package/optimize/es/components/list_group/list_group.js

@@ -15,8 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import classNames from 'classnames';
 import { EuiListGroupItem } from './list_group_item';
-import { useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { useEuiTheme, cloneElementWithCss } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { euiListGroupStyles } from './list_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/optimize/es/components/list_group/list_group_item.js

@@ -17,8 +17,7 @@ import { EuiIcon } from '../icon';
 import { EuiToolTip } from '../tool_tip';
 import { useInnerText } from '../inner_text';
 import { EuiListGroupItemExtraAction } from './list_group_item_extra_action';
-import { getSecureRelForTarget, useEuiTheme } from '../../services';
-import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { getSecureRelForTarget, useEuiTheme, cloneElementWithCss } from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 import { euiListGroupItemStyles, euiListGroupItemIconStyles, euiListGroupItemInnerStyles, euiListGroupItemTooltipStyles, euiListGroupItemLabelStyles } from './list_group_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";

package/optimize/es/components/popover/input_popover.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "disableFocusTrap", "input", "fullWidth", "onPanelResize", "inputRef", "panelRef"];
+var _excluded = ["children", "className", "disableFocusTrap", "focusTrapProps", "input", "fullWidth", "onPanelResize", "inputRef", "panelRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,6 +26,7 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     className = _ref.className,
     _ref$disableFocusTrap = _ref.disableFocusTrap,
     disableFocusTrap = _ref$disableFocusTrap === void 0 ? false : _ref$disableFocusTrap,
+    focusTrapProps = _ref.focusTrapProps,
     input = _ref.input,
     _ref$fullWidth = _ref.fullWidth,
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
@@ -97,10 +98,10 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
     buttonRef: inputRef,
     panelRef: panelRef,
     className: classes
-  }, props), ___EmotionJSX(EuiFocusTrap, {
+  }, props), ___EmotionJSX(EuiFocusTrap, _extends({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
-  }, ___EmotionJSX("div", {
+  }, focusTrapProps), ___EmotionJSX("div", {
     onKeyDown: onKeyDown
   }, children)));
 };