@elastic/eui 89.1.0 → 91.0.0

package/test-env/components/combo_box/combo_box_input/combo_box_pill.js

@@ -20,8 +20,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _badge = require("../../badge");
 var _i18n = require("../../i18n");
+var _utils = require("../utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["asPlainText", "children", "className", "color", "onClick", "onClickAriaLabel", "onClose", "option"];
+var _excluded = ["children", "className", "color", "onClick", "onClickAriaLabel", "onClose", "option"];
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -57,7 +58,6 @@ var EuiComboBoxPill = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
       var _this$props2 = this.props,
-        asPlainText = _this$props2.asPlainText,
         children = _this$props2.children,
         className = _this$props2.className,
         color = _this$props2.color,
@@ -66,20 +66,17 @@ var EuiComboBoxPill = /*#__PURE__*/function (_Component) {
         onClose = _this$props2.onClose,
         option = _this$props2.option,
         rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded);
-      var classes = (0, _classnames.default)('euiComboBoxPill', {
-        'euiComboBoxPill--plainText': asPlainText
-      }, className);
+      var classes = (0, _classnames.default)('euiComboBoxPill', className);
       var onClickProps = onClick && onClickAriaLabel ? {
         onClick: onClick,
         onClickAriaLabel: onClickAriaLabel
       } : {};
-      var content = (0, _react2.jsx)(_react.default.Fragment, null, option.prepend && (0, _react2.jsx)("span", {
-        className: "euiComboBoxPill__prepend"
-      }, option.prepend), (0, _react2.jsx)("span", {
+      var content = (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
+        option: option,
+        classNamePrefix: "euiComboBoxPill"
+      }, (0, _react2.jsx)("span", {
         className: "eui-textTruncate"
-      }, children), option.append && (0, _react2.jsx)("span", {
-        className: "euiComboBoxPill__append"
-      }, option.append));
+      }, children));
       if (onClose) {
         return (0, _react2.jsx)(_i18n.EuiI18n, {
           token: "euiComboBoxPill.removeSelection",
@@ -100,12 +97,6 @@ var EuiComboBoxPill = /*#__PURE__*/function (_Component) {
           }, onClickProps, rest), content);
         });
       }
-      if (asPlainText) {
-        return (0, _react2.jsx)("span", (0, _extends2.default)({
-          className: classes,
-          "data-test-subj": "euiComboBoxPill"
-        }, rest), content);
-      }
       return (0, _react2.jsx)(_badge.EuiBadge, (0, _extends2.default)({
         className: classes,
         color: color,
@@ -121,7 +112,6 @@ exports.EuiComboBoxPill = EuiComboBoxPill;
   color: 'hollow'
 });
 EuiComboBoxPill.propTypes = {
-  asPlainText: _propTypes.default.bool,
   children: _propTypes.default.string,
   className: _propTypes.default.string,
   color: _propTypes.default.string,

package/test-env/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -30,6 +30,7 @@ var _filter_select_item = require("../../filter_group/filter_select_item");
 var _badge = require("../../badge");
 var _text_truncate = require("../../text_truncate");
 var _input_popover = require("../../popover/input_popover");
+var _utils = require("../utils");
 var _react2 = require("@emotion/react");
 var _excluded = ["children"],
   _excluded2 = ["key", "isGroupLabelOption", "label", "value", "prepend", "append", "truncationProps"],
@@ -128,13 +129,12 @@ var EuiComboBoxOptionsList = /*#__PURE__*/function (_Component) {
         title: label
       }, rest), (0, _react2.jsx)("span", {
         className: "euiComboBoxOption__contentWrapper"
-      }, prepend && (0, _react2.jsx)("span", {
-        className: "euiComboBoxOption__prepend"
-      }, prepend), (0, _react2.jsx)("span", {
+      }, (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
+        option: option,
+        classNamePrefix: "euiComboBoxOption"
+      }, (0, _react2.jsx)("span", {
         className: "euiComboBoxOption__content"
-      }, renderOption ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption') : _this.renderTruncatedOption(label, truncationProps)), append && (0, _react2.jsx)("span", {
-        className: "euiComboBoxOption__append"
-      }, append), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
+      }, renderOption ? renderOption(option, searchValue, 'euiComboBoxOption__renderOption') : _this.renderTruncatedOption(label, truncationProps))), optionIsFocused && !optionIsDisabled ? hitEnterBadge : null));
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "optionWidth", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setOptionWidth", function (width) {

package/test-env/components/combo_box/utils.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiComboBoxOptionAppendPrepend = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = 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.
+ */
+
+/**
+ * DRY util for rendering an option with its prepend and append properties
+ */
+var EuiComboBoxOptionAppendPrepend = function EuiComboBoxOptionAppendPrepend(_ref) {
+  var children = _ref.children,
+    option = _ref.option,
+    classNamePrefix = _ref.classNamePrefix;
+  return (0, _react2.jsx)(_react.default.Fragment, null, (option === null || option === void 0 ? void 0 : option.prepend) && (0, _react2.jsx)("span", {
+    className: "".concat(classNamePrefix, "__prepend")
+  }, option.prepend), children, (option === null || option === void 0 ? void 0 : option.append) && (0, _react2.jsx)("span", {
+    className: "".concat(classNamePrefix, "__append")
+  }, option.append));
+};
+exports.EuiComboBoxOptionAppendPrepend = EuiComboBoxOptionAppendPrepend;

package/test-env/components/comment_list/comment_event.js

@@ -1,18 +1,21 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiCommentEvent = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _services = require("../../services");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _panel = require("../panel");
 var _avatar = require("../avatar");
 var _comment_event = require("./comment_event.styles");
 var _react2 = require("@emotion/react");
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -33,6 +36,9 @@ var EuiCommentEvent = function EuiCommentEvent(_ref) {
     eventColor = _ref.eventColor;
   var classes = (0, _classnames.default)('euiCommentEvent', className);
 
+  /**
+   * Branching logic
+   */
   // the username is required so we only check if other elements are define
   var hasEventElements = eventIcon || timestamp || event || actions;
   var isTypeRegular = children && hasEventElements;
@@ -45,27 +51,36 @@ var EuiCommentEvent = function EuiCommentEvent(_ref) {
   } else {
     type = 'custom';
   }
+  if (isTypeRegular && !eventColor) {
+    eventColor = 'subdued';
+  }
+  if (isTypeUpdate && !eventColor) {
+    eventColor = 'transparent';
+  }
+  var showEventBorders = isTypeRegular;
+  var panelProps = (0, _react.useMemo)(function () {
+    return {
+      color: type === 'custom' ? 'transparent' : eventColor,
+      paddingSize: type === 'custom' ? 'none' : 's',
+      borderRadius: type === 'regular' ? 'none' : 'm',
+      hasShadow: false // `plain` color needs this
+    };
+  }, [type, eventColor]);
+  var isFigure = isTypeRegular;
+  var Element = isFigure ? 'figure' : 'div';
+  var HeaderElement = isFigure ? 'figcaption' : 'div';
+
+  /**
+   * Styles
+   */
   var euiTheme = (0, _services.useEuiTheme)();
+  var borderStyles = (0, _comment_event.euiCommentEventBorderColors)(euiTheme);
   var styles = (0, _comment_event.euiCommentEventStyles)(euiTheme);
-  var cssStyles = [styles.euiCommentEvent, styles[type]];
+  var cssStyles = [styles.euiCommentEvent, showEventBorders && styles.border, showEventBorders && borderStyles[eventColor]];
   var headerStyles = (0, _comment_event.euiCommentEventHeaderStyles)(euiTheme);
-  var cssHeaderStyles = [headerStyles.euiCommentEvent__header, eventColor && headerStyles.hasEventColor, isTypeRegular && headerStyles.regular];
+  var cssHeaderStyles = [headerStyles.euiCommentEvent__header, showEventBorders && headerStyles.border, showEventBorders && borderStyles[eventColor]];
   var bodyStyles = (0, _comment_event.euiCommentEventBodyStyles)(euiTheme);
   var cssBodyStyles = [bodyStyles.euiCommentEvent__body, bodyStyles[type]];
-  var isFigure = isTypeRegular;
-  var Element = isFigure ? 'figure' : 'div';
-  var HeaderElement = isFigure ? 'figcaption' : 'div';
-
-  // The 'plain' color creates a shadow and adds a border radius that we don't want.
-  // So for these cases we use the transparent color instead.
-  var finalEventColor = eventColor === 'plain' ? 'transparent' : eventColor;
-  var panelProps = finalEventColor ? {
-    color: finalEventColor,
-    paddingSize: 's'
-  } : {
-    color: 'transparent',
-    paddingSize: 'none'
-  };
   return (0, _react2.jsx)(Element, {
     className: classes,
     css: cssStyles,

package/test-env/components/comment_list/comment_event.styles.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiCommentEventStyles = exports.euiCommentEventHeaderStyles = exports.euiCommentEventBodyStyles = void 0;
+exports.euiCommentEventStyles = exports.euiCommentEventHeaderStyles = exports.euiCommentEventBorderColors = exports.euiCommentEventBodyStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 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
@@ -13,7 +14,23 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var euiCommentEventBorderColors = function euiCommentEventBorderColors(_ref3) {
+  var euiTheme = _ref3.euiTheme,
+    colorMode = _ref3.colorMode;
+  var ratio = 0.6;
+  return {
+    warning: /*#__PURE__*/(0, _react.css)("border-color:", (0, _services.tintOrShade)(euiTheme.colors.warning, 0.4, colorMode), ";;label:warning;"),
+    accent: /*#__PURE__*/(0, _react.css)("border-color:", (0, _services.tintOrShade)(euiTheme.colors.accent, ratio, colorMode), ";;label:accent;"),
+    primary: /*#__PURE__*/(0, _react.css)("border-color:", (0, _services.tintOrShade)(euiTheme.colors.primary, ratio, colorMode), ";;label:primary;"),
+    success: /*#__PURE__*/(0, _react.css)("border-color:", (0, _services.tintOrShade)(euiTheme.colors.success, ratio, colorMode), ";;label:success;"),
+    danger: /*#__PURE__*/(0, _react.css)("border-color:", (0, _services.tintOrShade)(euiTheme.colors.danger, ratio, colorMode), ";;label:danger;"),
+    subdued: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.border.color, ";;label:subdued;"),
+    transparent: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.border.color, ";;label:transparent;"),
+    plain: /*#__PURE__*/(0, _react.css)("border-color:", euiTheme.border.color, ";;label:plain;")
+  };
+};
+exports.euiCommentEventBorderColors = euiCommentEventBorderColors;
+var _ref2 = process.env.NODE_ENV === "production" ? {
   name: "yoyozp-euiCommentEvent",
   styles: "overflow:hidden;label:euiCommentEvent;"
 } : {
@@ -21,14 +38,11 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
   styles: "overflow:hidden;label:euiCommentEvent;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiCommentEventStyles = function euiCommentEventStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiCommentEventStyles = function euiCommentEventStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCommentEvent: _ref3,
-    // types
-    regular: /*#__PURE__*/(0, _react.css)("border:", euiTheme.border.thin, ";border-radius:", euiTheme.border.radius.medium, ";;label:regular;"),
-    update: /*#__PURE__*/(0, _react.css)(";label:update;"),
-    custom: /*#__PURE__*/(0, _react.css)(";label:custom;")
+    euiCommentEvent: _ref2,
+    border: /*#__PURE__*/(0, _react.css)("border-width:", euiTheme.border.width.thin, ";border-style:solid;border-radius:", euiTheme.border.radius.medium, ";;label:border;")
   };
 };
 exports.euiCommentEventStyles = euiCommentEventStyles;
@@ -40,22 +54,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "align-items:center;display:inline-flex;white-space:pre-wrap;flex-wrap:wrap;label:euiCommentEvent__headerEvent;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "bqgcpj-hasEventColor",
-  styles: "padding:0;label:hasEventColor;"
-} : {
-  name: "bqgcpj-hasEventColor",
-  styles: "padding:0;label:hasEventColor;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(_ref5) {
-  var euiTheme = _ref5.euiTheme;
+var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiCommentEvent__header: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__header;"),
-    // types
-    regular: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.lightestShade, ";", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), " padding:", euiTheme.size.s, ";;label:regular;"),
-    // variants
-    hasEventColor: _ref2,
+    border: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-bottom-style', 'solid'), " ", (0, _global_styling.logicalCSS)('border-bottom-width', euiTheme.border.width.thin), ";;label:border;"),
     // Children
     euiCommentEvent__headerMain: /*#__PURE__*/(0, _react.css)("display:flex;flex:1;gap:", euiTheme.size.s, ";;label:euiCommentEvent__headerMain;"),
     euiCommentEvent__headerData: /*#__PURE__*/(0, _react.css)("display:flex;flex:1;align-items:center;flex-wrap:wrap;gap:", euiTheme.size.xs, ";;label:euiCommentEvent__headerData;"),
@@ -66,8 +69,8 @@ var euiCommentEventHeaderStyles = function euiCommentEventHeaderStyles(_ref5) {
   };
 };
 exports.euiCommentEventHeaderStyles = euiCommentEventHeaderStyles;
-var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref6) {
-  var euiTheme = _ref6.euiTheme;
+var euiCommentEventBodyStyles = function euiCommentEventBodyStyles(_ref4) {
+  var euiTheme = _ref4.euiTheme;
   return {
     euiCommentEvent__body: /*#__PURE__*/(0, _react.css)(";label:euiCommentEvent__body;"),
     // types

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZES = exports.EuiContextMenu = void 0;
+exports.SIZES = exports.EuiContextMenuClass = exports.EuiContextMenu = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -18,14 +18,15 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _common = require("../common");
+var _services = require("../../services");
+var _horizontal_rule = require("../horizontal_rule");
 var _context_menu_panel = require("./context_menu_panel");
 var _context_menu_item = require("./context_menu_item");
-var _horizontal_rule = require("../horizontal_rule");
+var _context_menu = require("./context_menu.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["isSeparator", "key"],
   _excluded2 = ["panel", "name", "key", "icon", "onClick", "toolTipTitle", "toolTipContent"],
-  _excluded3 = ["panels", "onPanelChange", "className", "initialPanelId", "size"];
+  _excluded3 = ["theme", "panels", "onPanelChange", "className", "initialPanelId", "size"];
 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 _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -36,11 +37,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
                                                                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                                                                            */
-var sizeToClassNameMap = {
-  s: 'euiContextMenu--small',
-  m: null
-};
-var SIZES = (0, _common.keysOf)(sizeToClassNameMap);
+var SIZES = ['s', 'm'];
 exports.SIZES = SIZES;
 var isItemSeparator = function isItemSeparator(item) {
   return item.isSeparator === true;
@@ -82,12 +79,12 @@ function mapPanelItemsToPanels(panels) {
   });
   return idAndItemIndexToPanelIdMap;
 }
-var EuiContextMenu = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(EuiContextMenu, _Component);
-  var _super = _createSuper(EuiContextMenu);
-  function EuiContextMenu(props) {
+var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(EuiContextMenuClass, _Component);
+  var _super = _createSuper(EuiContextMenuClass);
+  function EuiContextMenuClass(props) {
     var _this;
-    (0, _classCallCheck2.default)(this, EuiContextMenu);
+    (0, _classCallCheck2.default)(this, EuiContextMenuClass);
     _this = _super.call(this, props);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "hasPreviousPanel", function (panelId) {
       var previousPanelId = _this.state.idToPreviousPanelIdMap[panelId];
@@ -179,7 +176,7 @@ var EuiContextMenu = /*#__PURE__*/function (_Component) {
     };
     return _this;
   }
-  (0, _createClass2.default)(EuiContextMenu, [{
+  (0, _createClass2.default)(EuiContextMenuClass, [{
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (prevProps.panels !== this.props.panels) {
@@ -267,10 +264,14 @@ var EuiContextMenu = /*#__PURE__*/function (_Component) {
           return window.requestAnimationFrame(_this3.showPreviousPanel);
         };
       }
+      var cssStyles = {
+        position: 'absolute',
+        label: 'euiContextMenu__panel'
+      };
       return (0, _react2.jsx)(_context_menu_panel.EuiContextMenuPanel, {
         key: panelId,
         size: this.props.size,
-        className: "euiContextMenu__panel",
+        css: cssStyles,
         onHeightChange: transitionType === 'in' ? this.onIncomingPanelHeightChange : undefined,
         onTransitionComplete: transitionType === 'out' ? this.onOutGoingPanelTransitionComplete : undefined,
         title: panel.title,
@@ -288,6 +289,7 @@ var EuiContextMenu = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var _this$props2 = this.props,
+        theme = _this$props2.theme,
         panels = _this$props2.panels,
         onPanelChange = _this$props2.onPanelChange,
         className = _this$props2.className,
@@ -300,8 +302,11 @@ var EuiContextMenu = /*#__PURE__*/function (_Component) {
         outgoingPanel = this.renderPanel(this.state.outgoingPanelId, 'out');
       }
       var width = this.state.idToPanelMap[this.state.incomingPanelId] && this.state.idToPanelMap[this.state.incomingPanelId].width ? this.state.idToPanelMap[this.state.incomingPanelId].width : undefined;
-      var classes = (0, _classnames.default)('euiContextMenu', size && sizeToClassNameMap[size], className);
+      var classes = (0, _classnames.default)('euiContextMenu', className);
+      var styles = (0, _context_menu.euiContextMenuStyles)(theme);
+      var cssStyles = [styles.euiContextMenu];
       return (0, _react2.jsx)("div", (0, _extends2.default)({
+        css: cssStyles,
         className: classes,
         style: {
           height: this.state.height,
@@ -326,14 +331,14 @@ var EuiContextMenu = /*#__PURE__*/function (_Component) {
       return null;
     }
   }]);
-  return EuiContextMenu;
+  return EuiContextMenuClass;
 }(_react.Component);
-exports.EuiContextMenu = EuiContextMenu;
-(0, _defineProperty2.default)(EuiContextMenu, "defaultProps", {
+exports.EuiContextMenuClass = EuiContextMenuClass;
+(0, _defineProperty2.default)(EuiContextMenuClass, "defaultProps", {
   panels: [],
   size: 'm'
 });
-EuiContextMenu.propTypes = {
+EuiContextMenuClass.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
@@ -362,7 +367,7 @@ EuiContextMenu.propTypes = {
     /**
        * Alters the size of the items and the title
        */
-    size: _propTypes.default.oneOf(["s", "m"])
+    size: _propTypes.default.any
   }).isRequired),
   /**
        * Optional callback that fires on every panel change. Passes back
@@ -373,5 +378,7 @@ EuiContextMenu.propTypes = {
   /**
        * Alters the size of the items and the title
        */
-  size: _propTypes.default.oneOf(["s", "m"])
-};
+  size: _propTypes.default.any
+};
+var EuiContextMenu = (0, _services.withEuiTheme)(EuiContextMenuClass);
+exports.EuiContextMenu = EuiContextMenu;

package/test-env/components/context_menu/context_menu.styles.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiContextMenuVariables = exports.euiContextMenuStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+/*
+ * 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 euiContextMenuVariables = function euiContextMenuVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    panelWidth: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x * 16;
+    })
+  };
+};
+exports.euiContextMenuVariables = euiContextMenuVariables;
+var euiContextMenuStyles = function euiContextMenuStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiContextMenuVariab = euiContextMenuVariables(euiThemeContext),
+    panelWidth = _euiContextMenuVariab.panelWidth;
+  return {
+    euiContextMenu: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', panelWidth), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;overflow:hidden;border-radius:", euiTheme.border.radius.medium, ";", _global_styling.euiCanAnimate, "{transition:height ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:euiContextMenu;")
+  };
+};
+exports.euiContextMenuStyles = euiContextMenuStyles;