@elastic/eui 84.0.0 → 85.0.0

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

@@ -43,22 +43,29 @@ var useFinalGridDimensions = function useFinalGridDimensions(_ref) {
 
   // Set the wrapper height on load, whenever the grid wrapper resizes, and whenever rowCount changes
   (0, _react.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
+  (0, _react.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 _utils.IS_JEST_ENVIRONMENT ? {

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

@@ -12,7 +12,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _badge = require("../badge");
 var _loading = require("../loading");
 var _inner_text = require("../inner_text");
-var _clone_element = require("../../services/theme/clone_element");
 var _services = require("../../services");
 var _facet_button = require("./facet_button.styles");
 var _button_display = require("../button/button_display/_button_display");
@@ -76,7 +75,7 @@ var EuiFacetButton = function EuiFacetButton(_ref) {
   // Add an icon to the button if one exists.
   var buttonIcon;
   if ( /*#__PURE__*/_react.default.isValidElement(icon)) {
-    buttonIcon = (0, _clone_element.cloneElementWithCss)(icon, {
+    buttonIcon = (0, _services.cloneElementWithCss)(icon, {
       css: cssIconStyles,
       className: 'euiFacetButton__icon'
     });

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

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -10,14 +9,16 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _i18n = require("../i18n");
+var _inner_text = require("../inner_text");
 var _badge = require("../badge");
 var _button_empty = require("../button/button_empty");
-var _inner_text = require("../inner_text");
+var _filter_button = require("./filter_button.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,8 +26,6 @@ var _excluded = ["children", "className", "iconType", "iconSide", "color", "badg
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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) { (0, _defineProperty2.default)(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; }
 var EuiFilterButton = function EuiFilterButton(_ref) {
@@ -50,20 +49,22 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
     grow = _ref$grow === void 0 ? true : _ref$grow,
     withNext = _ref.withNext,
     textProps = _ref.textProps,
+    contentProps = _ref.contentProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
   var numActiveFiltersDefined = numActiveFilters != null && numActiveFilters > 0;
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _filter_button.euiFilterButtonStyles)(euiTheme);
+  var cssStyles = [styles.euiFilterButton, withNext && styles.withNext, !grow && styles.noGrow, hasActiveFilters && styles.hasActiveFilters, numFiltersDefined && styles.hasNotification];
+  var _euiFilterButtonChild = (0, _filter_button.euiFilterButtonChildStyles)(euiTheme),
+    contentStyles = _euiFilterButtonChild.content,
+    textStyles = _euiFilterButtonChild.text,
+    notificationStyles = _euiFilterButtonChild.notification;
   var classes = (0, _classnames.default)('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 = (0, _classnames.default)({
-    'euiFilterButton__text-hasNotification': numFiltersDefined || numActiveFilters
-  }, textProps && textProps.className);
   var showBadge = numFiltersDefined || numActiveFiltersDefined;
   var badgeCount = numActiveFilters || numFilters;
   var activeBadgeLabel = (0, _i18n.useEuiI18n)('euiFilterButton.filterBadgeActiveAriaLabel', '{count} active filters', {
@@ -72,35 +73,42 @@ var EuiFilterButton = function EuiFilterButton(_ref) {
   var availableBadgeLabel = (0, _i18n.useEuiI18n)('euiFilterButton.filterBadgeAvailableAriaLabel', '{count} available filters', {
     count: badgeCount
   });
+  var buttonTextClassNames = (0, _classnames.default)('euiFilterButton__text', {
+    'euiFilterButton__text-hasNotification': showBadge
+  }, textProps === null || textProps === void 0 ? void 0 : textProps.className);
   var badgeContent = showBadge && (0, _react2.jsx)(_badge.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 = (0, _inner_text.useInnerText)(),
     _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
     ref = _useInnerText2[0],
     innerText = _useInnerText2[1];
-  var buttonContents = (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)("span", {
+  var dataText = children && typeof children === 'string' ? children : innerText;
+  var buttonContents = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("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 (0, _react2.jsx)(_button_empty.EuiButtonEmpty, (0, _extends2.default)({
     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/lib/components/filter_group/filter_button.styles.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFilterButtonStyles = exports.euiFilterButtonDisplay = exports.euiFilterButtonChildStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _form = require("../form/form.styles");
+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 euiFilterButtonDisplay = function euiFilterButtonDisplay(_ref5) {
+  var euiTheme = _ref5.euiTheme;
+  return {
+    flex: '1 1 auto',
+    minInlineSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 3;
+    })
+  };
+};
+exports.euiFilterButtonDisplay = euiFilterButtonDisplay;
+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__
+};
+var euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = (0, _form.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__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " ", (0, _global_styling.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__*/(0, _react.css)("&+.euiFilterButton{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "box-shadow:", bottomBoxShadow, ";};label:withNext;"),
+    noGrow: _ref4,
+    hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 6;
+    })), ";;label:hasNotification;"),
+    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+  };
+};
+exports.euiFilterButtonStyles = euiFilterButtonStyles;
+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__
+};
+var euiFilterButtonChildStyles = function euiFilterButtonChildStyles(_ref6) {
+  var euiTheme = _ref6.euiTheme;
+  return {
+    content: {
+      euiFilterButton__content: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__content;"),
+      hasIcon: _ref3
+    },
+    text: {
+      euiFilterButton__text: /*#__PURE__*/(0, _react.css)(";label:euiFilterButton__text;"),
+      hasNotification: /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;gap:", euiTheme.size.s, ";;label:hasNotification;"),
+      euiFilterButton__textShift: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), " ", (0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+        return x * 3;
+      })), ";;label:euiFilterButton__textShift;")
+    },
+    notification: {
+      euiFilterButton__notification: _ref2,
+      disabled: _ref
+    }
+  };
+};
+exports.euiFilterButtonChildStyles = euiFilterButtonChildStyles;

package/optimize/lib/components/filter_group/filter_group.js

@@ -9,6 +9,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _filter_group = require("./filter_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "fullWidth", "compressed"];
 /*
@@ -25,12 +27,13 @@ var EuiFilterGroup = function EuiFilterGroup(_ref) {
     fullWidth = _ref$fullWidth === void 0 ? false : _ref$fullWidth,
     compressed = _ref.compressed,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiFilterGroup', {
-    'euiFilterGroup--fullWidth': fullWidth,
-    'euiFilterGroup--compressed': compressed
-  }, className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _filter_group.euiFilterGroupStyles)(euiTheme);
+  var cssStyles = [styles.euiFilterGroup, fullWidth && styles.fullWidth, compressed ? styles.compressed : styles.uncompressed];
+  var classes = (0, _classnames.default)('euiFilterGroup', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };
 exports.EuiFilterGroup = EuiFilterGroup;

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiFilterGroupStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _form = require("../form/form.styles");
+var _filter_button = require("./filter_button.styles");
+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 _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__
+};
+var euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    backgroundColor = _euiFormVariables.backgroundColor,
+    borderColor = _euiFormVariables.borderColor,
+    controlBorderRadius = _euiFormVariables.controlBorderRadius,
+    controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  return {
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)("display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", borderColor, ";>*:not(.euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover__anchor{display:block;.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 's'), "{flex-wrap:wrap;}", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'xs'), "{display:flex;.euiFilterButton{flex-grow:1;}};label:euiFilterGroup;"),
+    fullWidth: _ref,
+    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlBorderRadius, ";", buttonChildrenBorderRadii(controlBorderRadius), ";;label:uncompressed;"),
+    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", controlCompressedBorderRadius, ";", buttonChildrenBorderRadii(controlCompressedBorderRadius), " .euiFilterButton{", (0, _global_styling.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.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
+ */
+exports.euiFilterGroupStyles = euiFilterGroupStyles;
+var buttonChildrenBorderRadii = function buttonChildrenBorderRadii(radiusSize) {
+  return "\n  > :first-child,\n  > :first-child .euiFilterButton {\n    ".concat((0, _global_styling.logicalCSS)('border-top-left-radius', radiusSize), "\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', radiusSize), "\n  }\n\n  > :last-child,\n  > :last-child .euiFilterButton {\n    ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', radiusSize), "\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', radiusSize), "\n  }\n");
+};

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconAt = function EuiIconAt(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("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"
+  }));
+};
+var icon = EuiIconAt;
+exports.icon = icon;

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconKey = function EuiIconKey(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("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"
+  }), (0, _react2.jsx)("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"
+  }));
+};
+var icon = EuiIconKey;
+exports.icon = icon;

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

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

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="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"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="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"/>
+  <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"/>
+</svg>

package/optimize/lib/components/list_group/list_group.js

@@ -12,7 +12,6 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _list_group_item = require("./list_group_item");
 var _services = require("../../services");
-var _clone_element = require("../../services/theme/clone_element");
 var _global_styling = require("../../global_styling");
 var _list_group = require("./list_group.styles");
 var _react2 = require("@emotion/react");
@@ -77,7 +76,7 @@ var EuiListGroup = function EuiListGroup(_ref) {
     };
     childrenOrListItems = _react.default.Children.map(children, function (child) {
       if ( /*#__PURE__*/_react.default.isValidElement(child)) {
-        return (0, _clone_element.cloneElementWithCss)(child, _objectSpread(_objectSpread({
+        return (0, _services.cloneElementWithCss)(child, _objectSpread(_objectSpread({
           // we're passing the parent `color` and `size` down to the children
           // so that they can inherit it if they don't have one
           color: color,

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

@@ -16,7 +16,6 @@ var _tool_tip = require("../tool_tip");
 var _inner_text = require("../inner_text");
 var _list_group_item_extra_action = require("./list_group_item_extra_action");
 var _services = require("../../services");
-var _clone_element = require("../../services/theme/clone_element");
 var _href_validator = require("../../services/security/href_validator");
 var _list_group_item = require("./list_group_item.styles");
 var _react2 = require("@emotion/react");
@@ -80,7 +79,7 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
       console.warn('Both `iconType` and `icon` were passed to EuiListGroupItem but only one can exist. The `iconType` was used.');
     }
   } else if (icon) {
-    iconNode = (0, _clone_element.cloneElementWithCss)(icon, {
+    iconNode = (0, _services.cloneElementWithCss)(icon, {
       css: cssIconStyles,
       className: (0, _classnames.default)('euiListGroupItem__icon', icon.props.className)
     });

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

@@ -19,7 +19,7 @@ var _services = require("../../services");
 var _form = require("../form/form.styles");
 var _react2 = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-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
@@ -34,6 +34,7 @@ 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,
@@ -105,10 +106,10 @@ var EuiInputPopover = function EuiInputPopover(_ref) {
     buttonRef: inputRef,
     panelRef: panelRef,
     className: classes
-  }, props), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
+  }, props), (0, _react2.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
     clickOutsideDisables: true,
     disabled: disableFocusTrap
-  }, (0, _react2.jsx)("div", {
+  }, focusTrapProps), (0, _react2.jsx)("div", {
     onKeyDown: onKeyDown
   }, children)));
 };

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

@@ -35,7 +35,7 @@ var _outside_click_detector = require("../outside_click_detector");
 var _popover_arrow = require("./popover_arrow");
 var _popover2 = require("./popover.styles");
 var _popover_panel = require("./popover_panel");
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "hasDragDrop", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -374,7 +374,6 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
         display = _this$props.display,
         offset = _this$props.offset,
         onPositionChange = _this$props.onPositionChange,
-        onTrapDeactivation = _this$props.onTrapDeactivation,
         buffer = _this$props.buffer,
         ariaLabel = _this$props['aria-label'],
         ariaLabelledBy = _this$props['aria-labelledby'],
@@ -427,15 +426,13 @@ var EuiPopover = /*#__PURE__*/function (_Component) {
           insert: insert
         }, (0, _react.jsx)(_focus_trap.EuiFocusTrap, (0, _extends2.default)({
           clickOutsideDisables: true,
-          onClickOutside: this.onClickOutside
-        }, focusTrapProps, {
+          onClickOutside: this.onClickOutside,
           returnFocus: returnFocus // Ignore temporary state of indecisive focus
           ,
           initialFocus: initialFocus,
-          onDeactivation: onTrapDeactivation,
           onEscapeKey: this.onEscapeKey,
           disabled: !ownFocus || !this.state.isOpenStable || this.state.isClosing
-        }), (0, _react.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
+        }, focusTrapProps), (0, _react.jsx)(_popover_panel.EuiPopoverPanel, (0, _extends2.default)({}, panelProps, {
           panelRef: this.panelRef,
           isOpen: this.state.isOpening,
           position: this.state.arrowPosition,

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

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