@elastic/eui 79.0.1 → 81.0.0

package/optimize/lib/components/context_menu/context_menu.js

@@ -24,7 +24,7 @@ var _horizontal_rule = require("../horizontal_rule");
 var _react2 = require("@emotion/react");
 var _excluded = ["isSeparator", "key"],
   _excluded2 = ["panel", "name", "key", "icon", "onClick", "toolTipTitle", "toolTipContent"],
-  _excluded3 = ["panels", "className", "initialPanelId", "size"];
+  _excluded3 = ["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); }; }
@@ -185,12 +185,17 @@ var EuiContextMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "showPanel",
     value: function showPanel(panelId, direction) {
+      var _this$props$onPanelCh, _this$props;
       this.setState({
         outgoingPanelId: this.state.incomingPanelId,
         incomingPanelId: panelId,
         transitionDirection: direction,
         isOutgoingPanelVisible: true
       });
+      (_this$props$onPanelCh = (_this$props = this.props).onPanelChange) === null || _this$props$onPanelCh === void 0 ? void 0 : _this$props$onPanelCh.call(_this$props, {
+        panelId: panelId,
+        direction: direction
+      });
     }
   }, {
     key: "renderItems",
@@ -276,12 +281,13 @@ var EuiContextMenu = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props = this.props,
-        panels = _this$props.panels,
-        className = _this$props.className,
-        initialPanelId = _this$props.initialPanelId,
-        size = _this$props.size,
-        rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded3);
+      var _this$props2 = this.props,
+        panels = _this$props2.panels,
+        onPanelChange = _this$props2.onPanelChange,
+        className = _this$props2.className,
+        initialPanelId = _this$props2.initialPanelId,
+        size = _this$props2.size,
+        rest = (0, _objectWithoutProperties2.default)(_this$props2, _excluded3);
       var incomingPanel = this.renderPanel(this.state.incomingPanelId, 'in');
       var outgoingPanel;
       if (this.state.isOutgoingPanelVisible) {

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

@@ -239,10 +239,10 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 3);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich - Selected option. To exclude this option, press enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich - Checked option. To exclude this option, press Enter.');
       cy.realPress('ArrowDown');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press Enter.');
       cy.checkAxe();
     });
     it('has zero violations when filtering by searchbox', function () {

package/optimize/lib/components/form/field_number/field_number.js

@@ -16,7 +16,7 @@ var _form_control_layout = require("../form_control_layout");
 var _num_icons = require("../form_control_layout/_num_icons");
 var _eui_form_context = require("../eui_form_context");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp"];
+var _excluded = ["className", "icon", "id", "placeholder", "name", "min", "max", "step", "value", "isInvalid", "fullWidth", "isLoading", "compressed", "prepend", "append", "inputRef", "readOnly", "controlOnly", "onKeyUp", "onBlur"];
 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 EuiFieldNumber = function EuiFieldNumber(props) {
@@ -29,6 +29,8 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     name = props.name,
     min = props.min,
     max = props.max,
+    _props$step = props.step,
+    step = _props$step === void 0 ? 'any' : _props$step,
     value = props.value,
     isInvalid = props.isInvalid,
     _props$fullWidth = props.fullWidth,
@@ -43,6 +45,7 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     readOnly = props.readOnly,
     controlOnly = props.controlOnly,
     _onKeyUp = props.onKeyUp,
+    _onBlur = props.onBlur,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   // Attempt to determine additional invalid state. The native number input
@@ -53,17 +56,11 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isNativelyInvalid = _useState2[0],
     setIsNativelyInvalid = _useState2[1];
-
-  // Note that we can't use hook into `onChange` because browsers don't emit change events
-  // for invalid values - see https://github.com/facebook/react/issues/16554
-  var onKeyUp = (0, _react.useCallback)(function (e) {
-    _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
-    var _ref = e.target,
-      validity = _ref.validity;
+  var checkNativeValidity = (0, _react.useCallback)(function (inputEl) {
     // Prefer `undefined` over `false` so that the `aria-invalid` prop unsets completely
-    var isInvalid = !validity.valid || undefined;
+    var isInvalid = !inputEl.validity.valid || undefined;
     setIsNativelyInvalid(isInvalid);
-  }, [_onKeyUp]);
+  }, []);
   var numIconsClass = controlOnly ? false : (0, _num_icons.getFormControlClassNameForIconCount)({
     isInvalid: isInvalid || isNativelyInvalid,
     isLoading: isLoading
@@ -80,16 +77,27 @@ var EuiFieldNumber = function EuiFieldNumber(props) {
   }, (0, _react2.jsx)("input", (0, _extends2.default)({
     type: "number",
     id: id,
+    name: name,
     min: min,
     max: max,
-    name: name,
+    step: step,
     value: value,
     placeholder: placeholder,
     readOnly: readOnly,
     className: classes,
     ref: inputRef,
-    onKeyUp: onKeyUp,
-    "aria-invalid": isInvalid == null ? isNativelyInvalid : isInvalid
+    "aria-invalid": isInvalid || isNativelyInvalid,
+    onKeyUp: function onKeyUp(e) {
+      // Note that we can't use `onChange` because browsers don't emit change events
+      // for invalid text - see https://github.com/facebook/react/issues/16554
+      _onKeyUp === null || _onKeyUp === void 0 ? void 0 : _onKeyUp(e);
+      checkNativeValidity(e.currentTarget);
+    },
+    onBlur: function onBlur(e) {
+      // Browsers can also set/determine validity (e.g. when `step` is undefined) on focus blur
+      _onBlur === null || _onBlur === void 0 ? void 0 : _onBlur(e);
+      checkNativeValidity(e.currentTarget);
+    }
   }, rest)));
   if (controlOnly) {
     return control;

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

@@ -0,0 +1,36 @@
+"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"];
+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 EuiIconAppVulnerabilityManagement = function EuiIconAppVulnerabilityManagement(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    width: 32,
+    height: 32,
+    viewBox: "0 0 32 32",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    className: "euiIcon__fillSecondary",
+    d: "M5.394 6.192L11.05.536 16 5.486l4.95-4.95 5.657 5.656L16 16.8 5.394 6.192zm2.828 0L16 13.971l7.778-7.779-2.828-2.828L16 8.314l-4.95-4.95-2.828 2.828z"
+  }), (0, _react2.jsx)("path", {
+    d: "M16 30.941L4.686 19.627A8.004 8.004 0 013.45 9.905a8.011 8.011 0 011.236-1.591L16 19.539 27.313 8.314l.045.045a8.003 8.003 0 01-.045 11.268L16 30.942zm0-2.828l9.899-9.9a6.002 6.002 0 001.169-6.838L16 22.357 4.932 11.375A6.003 6.003 0 006.1 18.213l9.9 9.9z"
+  }));
+};
+var icon = EuiIconAppVulnerabilityManagement;
+exports.icon = icon;

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

@@ -0,0 +1,41 @@
+"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"];
+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 EuiIconLogoVulnerabilityManagement = function EuiIconLogoVulnerabilityManagement(_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: 32,
+    height: 32,
+    viewBox: "0 0 32 32",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("g", null, (0, _react2.jsx)("path", {
+    d: "M11.0503 1.94977L6.80762 6.19241L16 15.3848L25.1924 6.19241L20.9498 1.94977L16 6.89952L11.0503 1.94977Z",
+    fill: "#00BFB3"
+  }), (0, _react2.jsx)("path", {
+    d: "M4.68592 19.6273C1.56172 16.5031 1.56173 11.4378 4.68592 8.3136L15.9996 19.6273V30.941L4.68592 19.6273Z",
+    fill: "#FA744E"
+  }), (0, _react2.jsx)("path", {
+    className: "euiIcon__fillNegative",
+    d: "M27.3137 8.31372C30.4379 11.4379 30.4379 16.5032 27.3137 19.6274L16 30.9411L16 19.6274L27.3137 8.31372Z",
+    fill: "#343741"
+  })));
+};
+var icon = EuiIconLogoVulnerabilityManagement;
+exports.icon = icon;

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

@@ -266,6 +266,7 @@ var typeToPathMap = {
   logoSketch: 'logo_sketch',
   logoSlack: 'logo_slack',
   logoUptime: 'logo_uptime',
+  logoVulnerabilityManagement: 'logo_vulnerability_management',
   logoWebhook: 'logo_webhook',
   logoWindows: 'logo_windows',
   logoWorkplaceSearch: 'logo_workplace_search',
@@ -421,6 +422,7 @@ var typeToPathMap = {
   visVega: 'vis_vega',
   visVisualBuilder: 'vis_visual_builder',
   visualizeApp: 'app_visualize',
+  vulnerabilityManagementApp: 'app_vulnerability_management',
   warning: 'warning',
   alert: 'warning',
   // NOTE: This is an undocumented alias for `warning`, added for legacy compatability with Elastic Charts

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

@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<path class="euiIcon__fillSecondary" d="M5.39355 6.19238L11.0504 0.535522L16.0002 5.48527L20.9499 0.535522L26.6068 6.19238L16.0002 16.799L5.39355 6.19238ZM8.22198 6.19238L16.0002 13.9706L23.7783 6.19238L20.9499 3.36395L16.0002 8.3137L11.0504 3.36395L8.22198 6.19238Z" />
+<path  d="M15.9996 30.9411L4.68592 19.6274C2.0498 16.9912 1.63798 12.9731 3.45043 9.90517C3.77564 9.3547 4.17245 8.83482 4.64087 8.359C4.65582 8.34382 4.67083 8.32869 4.68592 8.3136L15.9996 19.5391L27.3132 8.31371C27.3284 8.32883 27.3434 8.34399 27.3584 8.3592C27.8268 8.835 28.2236 9.35485 28.5487 9.90529C30.3612 12.9732 29.9494 16.9914 27.3132 19.6275L15.9996 30.9411ZM15.9996 28.1127L25.899 18.2133C27.7487 16.3636 28.1383 13.6066 27.0676 11.3748L15.9996 22.3565L4.93152 11.3747C3.86091 13.6065 4.25045 16.3634 6.10013 18.2131L15.9996 28.1127Z" />
+</svg>

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

@@ -0,0 +1,7 @@
+<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+<g>
+<path d="M11.0503 1.94977L6.80762 6.19241L16 15.3848L25.1924 6.19241L20.9498 1.94977L16 6.89952L11.0503 1.94977Z" fill="#00BFB3"/>
+<path d="M4.68592 19.6273C1.56172 16.5031 1.56173 11.4378 4.68592 8.3136L15.9996 19.6273V30.941L4.68592 19.6273Z" fill="#FA744E"/>
+<path d="M27.3137 8.31372C30.4379 11.4379 30.4379 16.5032 27.3137 19.6274L16 30.9411L16 19.6274L27.3137 8.31372Z" fill="#343741"/>
+</g>
+</svg>

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

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiOverlayMask = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
@@ -46,11 +47,28 @@ var EuiOverlayMask = function EuiOverlayMask(_ref) {
     });
   }, [overlayMaskNode]); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // Note: Use `classList.add/remove` instead of setting the entire `className`
+  // so as not to override any existing classes set by `EuiPortal`
   (0, _react.useEffect)(function () {
-    if (!overlayMaskNode) return;
-    overlayMaskNode.className = (0, _css.cx)('euiOverlayMask', cssStyles, className);
-    overlayMaskNode.dataset.relativeToHeader = headerZindexLocation;
-  }, [overlayMaskNode, className, cssStyles, headerZindexLocation]);
+    if (overlayMaskNode) {
+      overlayMaskNode.classList.add('euiOverlayMask', cssStyles);
+      overlayMaskNode.dataset.relativeToHeader = headerZindexLocation;
+      return function () {
+        return overlayMaskNode.classList.remove(cssStyles);
+      };
+    }
+  }, [overlayMaskNode, cssStyles, headerZindexLocation]);
+  (0, _react.useEffect)(function () {
+    if (className && overlayMaskNode) {
+      var _overlayMaskNode$clas;
+      var classNameArgs = className.split(' '); // The `classList` API doesn't support multiple classes in the same string
+      (_overlayMaskNode$clas = overlayMaskNode.classList).add.apply(_overlayMaskNode$clas, (0, _toConsumableArray2.default)(classNameArgs));
+      return function () {
+        var _overlayMaskNode$clas2;
+        return (_overlayMaskNode$clas2 = overlayMaskNode.classList).remove.apply(_overlayMaskNode$clas2, (0, _toConsumableArray2.default)(classNameArgs));
+      };
+    }
+  }, [overlayMaskNode, className]);
   return (0, _react2.jsx)(_portal.EuiPortal, {
     portalRef: combinedMaskRef
   }, (0, _react2.jsx)(_react2.Global, {

package/optimize/lib/components/portal/portal.js

@@ -14,6 +14,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _reactDom = require("react-dom");
+var _services = require("../../services");
 var _common = require("../common");
 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); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
@@ -51,6 +52,7 @@ var EuiPortal = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(EuiPortal, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.setThemeColor();
       this.updatePortalRef(this.portalNode);
     }
   }, {
@@ -62,6 +64,20 @@ var EuiPortal = /*#__PURE__*/function (_Component) {
       }
       this.updatePortalRef(null);
     }
+
+    // Set the inherited color of the portal based on the wrapping EuiThemeProvider
+  }, {
+    key: "setThemeColor",
+    value: function setThemeColor() {
+      if (this.portalNode && this.context) {
+        var _this$context = this.context,
+          hasDifferentColorFromGlobalTheme = _this$context.hasDifferentColorFromGlobalTheme,
+          colorClassName = _this$context.colorClassName;
+        if (hasDifferentColorFromGlobalTheme && this.props.insert == null) {
+          this.portalNode.classList.add(colorClassName);
+        }
+      }
+    }
   }, {
     key: "updatePortalRef",
     value: function updatePortalRef(ref) {
@@ -77,4 +93,5 @@ var EuiPortal = /*#__PURE__*/function (_Component) {
   }]);
   return EuiPortal;
 }(_react.Component);
-exports.EuiPortal = EuiPortal;
+exports.EuiPortal = EuiPortal;
+(0, _defineProperty2.default)(EuiPortal, "contextType", _services.EuiNestedThemeContext);

package/optimize/lib/components/selectable/selectable.a11y.js

@@ -3,7 +3,6 @@
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _button = require("../button");
 var _popover = require("../popover");
@@ -31,27 +30,27 @@ var options = [{
 }, {
   label: "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
 }];
-var EuiSelectableListboxOnly = function EuiSelectableListboxOnly(args) {
-  return (0, _react2.jsx)(_selectable.EuiSelectable, (0, _extends2.default)({
-    options: options
-  }, args), function (list) {
-    return (0, _react2.jsx)(_react.default.Fragment, null, list);
-  });
-};
-var EuiSelectableWithSearchInput = function EuiSelectableWithSearchInput(args) {
-  return (0, _react2.jsx)(_selectable.EuiSelectable, (0, _extends2.default)({
-    searchable: true,
-    options: options
-  }, args), function (list, search) {
-    return (0, _react2.jsx)(_react.default.Fragment, null, search, list);
-  });
-};
+var excludedOptions = [{
+  label: 'Titan',
+  'data-test-subj': 'titanOption',
+  checked: 'on'
+}, {
+  label: 'Enceladus',
+  checked: 'off'
+}, {
+  label: "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+  checked: 'mixed'
+}];
 describe('EuiSelectable', function () {
   describe('with a `searchable` configuration', function () {
     it('has no accessibility errors', function () {
       var onChange = cy.stub();
-      cy.realMount((0, _react2.jsx)(EuiSelectableWithSearchInput, {
-        onChange: onChange
+      cy.realMount((0, _react2.jsx)(_selectable.EuiSelectable, {
+        options: options,
+        onChange: onChange,
+        searchable: true
+      }, function (list, search) {
+        return (0, _react2.jsx)(_react.default.Fragment, null, search, list);
       }));
       cy.checkAxe();
     });
@@ -59,9 +58,25 @@ describe('EuiSelectable', function () {
   describe('without a `searchable` configuration', function () {
     it('has no accessibility errors', function () {
       var onChange = cy.stub();
-      cy.realMount((0, _react2.jsx)(EuiSelectableListboxOnly, {
+      cy.realMount((0, _react2.jsx)(_selectable.EuiSelectable, {
         "aria-label": "No search box",
+        options: options,
         onChange: onChange
+      }, function (list) {
+        return (0, _react2.jsx)(_react.default.Fragment, null, list);
+      }));
+      cy.checkAxe();
+    });
+  });
+  describe('with excluded and mixed options configuration', function () {
+    it('has no accessibility errors', function () {
+      var onChange = cy.stub();
+      cy.realMount((0, _react2.jsx)(_selectable.EuiSelectable, {
+        "aria-label": "Excluded and mixed options",
+        options: excludedOptions,
+        onChange: onChange
+      }, function (list) {
+        return (0, _react2.jsx)(_react.default.Fragment, null, list);
       }));
       cy.checkAxe();
     });
@@ -88,12 +103,13 @@ describe('EuiSelectable', function () {
         button: button,
         isOpen: isPopoverOpen,
         closePopover: onClosePopover
-      }, (0, _react2.jsx)(EuiSelectableWithSearchInput, {
+      }, (0, _react2.jsx)(_selectable.EuiSelectable, {
         "aria-label": "With popover",
         options: options,
-        onChange: onChange
-      }, function (list) {
-        return (0, _react2.jsx)(_react.default.Fragment, null, list);
+        onChange: onChange,
+        searchable: true
+      }, function (list, search) {
+        return (0, _react2.jsx)(_react.default.Fragment, null, search, list);
       }));
     };
     it('has no accessibility errors', function () {