@elastic/eui 80.0.0 → 81.0.0

package/es/components/bottom_bar/bottom_bar.js

@@ -199,7 +199,10 @@ _EuiBottomBar.propTypes = {
 export var EuiBottomBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var BottomBar = _EuiBottomBar;
   return ___EmotionJSX(EuiThemeProvider, {
-    colorMode: 'dark'
+    colorMode: 'dark',
+    wrapperProps: {
+      cloneElement: true
+    }
   }, ___EmotionJSX(BottomBar, _extends({
     ref: ref
   }, props)));

package/es/components/bottom_bar/bottom_bar.styles.js

@@ -17,8 +17,8 @@ export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    // Text color needs to be reapplied to properly scope the forced `colorMode`
-    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";background:", shade(euiTheme.colors.lightestShade, 0.5), ";color:", euiTheme.colors.text, ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
+    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";background:", shade(euiTheme.colors.lightestShade, 0.5), ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/css(";label:static;"),
     fixed: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),
     sticky: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 2, ";;label:sticky;"),

package/es/components/button/button.js

@@ -59,7 +59,10 @@ export var EuiButton = function EuiButton(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return ___EmotionJSX(EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, ___EmotionJSX(EuiButton, _extends({}, props, {
       color: "text"
     })));

package/es/components/button/button_empty/button_empty.js

@@ -83,7 +83,10 @@ export var EuiButtonEmpty = function EuiButtonEmpty(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return ___EmotionJSX(EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, ___EmotionJSX(EuiButtonEmpty, _extends({}, props, {
       color: "text"
     })));

package/es/components/button/button_icon/button_icon.js

@@ -82,7 +82,10 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return ___EmotionJSX(EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, ___EmotionJSX(EuiButtonIcon, _extends({}, props, {
       color: "text"
     })));

package/es/components/filter_group/filter_group.a11y.js

@@ -238,10 +238,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/es/components/overlay_mask/overlay_mask.js

@@ -1,4 +1,8 @@
 var _excluded = ["className", "children", "headerZindexLocation", "maskRef"];
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -15,11 +19,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-/**
- * NOTE: We can't test this component because Enzyme doesn't support rendering
- * into portals.
- */
-
 import React, { useEffect, useState } from 'react';
 import PropTypes from "prop-types";
 import { cx } from '@emotion/css';
@@ -57,11 +56,28 @@ export 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`
   useEffect(function () {
-    if (!overlayMaskNode) return;
-    overlayMaskNode.className = 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]);
+  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, _toConsumableArray(classNameArgs));
+      return function () {
+        var _overlayMaskNode$clas2;
+        return (_overlayMaskNode$clas2 = overlayMaskNode.classList).remove.apply(_overlayMaskNode$clas2, _toConsumableArray(classNameArgs));
+      };
+    }
+  }, [overlayMaskNode, className]);
   return ___EmotionJSX(EuiPortal, {
     portalRef: combinedMaskRef
   }, ___EmotionJSX(Global, {

package/es/components/portal/portal.js

@@ -28,6 +28,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import { Component } from 'react';
 import PropTypes from "prop-types";
 import { createPortal } from 'react-dom';
+import { EuiNestedThemeContext } from '../../services';
 import { keysOf } from '../common';
 export var insertPositions = {
   after: 'afterend',
@@ -61,6 +62,7 @@ export var EuiPortal = /*#__PURE__*/function (_Component) {
   _createClass(EuiPortal, [{
     key: "componentDidMount",
     value: function componentDidMount() {
+      this.setThemeColor();
       this.updatePortalRef(this.portalNode);
     }
   }, {
@@ -72,6 +74,20 @@ export 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) {
@@ -87,6 +103,7 @@ export var EuiPortal = /*#__PURE__*/function (_Component) {
   }]);
   return EuiPortal;
 }(Component);
+_defineProperty(EuiPortal, "contextType", EuiNestedThemeContext);
 EuiPortal.propTypes = {
   /**
      * ReactNode to render as this component's content

package/es/components/selectable/selectable.a11y.js

@@ -4,7 +4,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,27 +29,27 @@ var options = [{
 }, {
   label: "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
 }];
-var EuiSelectableListboxOnly = function EuiSelectableListboxOnly(args) {
-  return ___EmotionJSX(EuiSelectable, _extends({
-    options: options
-  }, args), function (list) {
-    return ___EmotionJSX(React.Fragment, null, list);
-  });
-};
-var EuiSelectableWithSearchInput = function EuiSelectableWithSearchInput(args) {
-  return ___EmotionJSX(EuiSelectable, _extends({
-    searchable: true,
-    options: options
-  }, args), function (list, search) {
-    return ___EmotionJSX(React.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(___EmotionJSX(EuiSelectableWithSearchInput, {
-        onChange: onChange
+      cy.realMount(___EmotionJSX(EuiSelectable, {
+        options: options,
+        onChange: onChange,
+        searchable: true
+      }, function (list, search) {
+        return ___EmotionJSX(React.Fragment, null, search, list);
       }));
       cy.checkAxe();
     });
@@ -58,9 +57,25 @@ describe('EuiSelectable', function () {
   describe('without a `searchable` configuration', function () {
     it('has no accessibility errors', function () {
       var onChange = cy.stub();
-      cy.realMount(___EmotionJSX(EuiSelectableListboxOnly, {
+      cy.realMount(___EmotionJSX(EuiSelectable, {
         "aria-label": "No search box",
+        options: options,
         onChange: onChange
+      }, function (list) {
+        return ___EmotionJSX(React.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(___EmotionJSX(EuiSelectable, {
+        "aria-label": "Excluded and mixed options",
+        options: excludedOptions,
+        onChange: onChange
+      }, function (list) {
+        return ___EmotionJSX(React.Fragment, null, list);
       }));
       cy.checkAxe();
     });
@@ -87,12 +102,13 @@ describe('EuiSelectable', function () {
         button: button,
         isOpen: isPopoverOpen,
         closePopover: onClosePopover
-      }, ___EmotionJSX(EuiSelectableWithSearchInput, {
+      }, ___EmotionJSX(EuiSelectable, {
         "aria-label": "With popover",
         options: options,
-        onChange: onChange
-      }, function (list) {
-        return ___EmotionJSX(React.Fragment, null, list);
+        onChange: onChange,
+        searchable: true
+      }, function (list, search) {
+        return ___EmotionJSX(React.Fragment, null, search, list);
       }));
     };
     it('has no accessibility errors', function () {

package/es/components/selectable/selectable.js

@@ -596,11 +596,11 @@ EuiSelectable.propTypes = {
        */
     key: PropTypes.string,
     /**
-       * Leave `undefined` to indicate not selected,
-       * 'on' to indicate inclusion and
-       * 'off' to indicate exclusion
+       * Leave `undefined` to indicate not selected. Pass a string of
+       * 'on' to indicate inclusion, 'off' to indicate exclusion,
+       * or 'mixed' to indicate inclusion for some.
        */
-    checked: PropTypes.oneOf(["on", "off", undefined]),
+    checked: PropTypes.oneOf(["on", "off", "mixed", undefined]),
     disabled: PropTypes.bool,
     /**
        * Node to add between the selection icon and the label

package/es/components/selectable/selectable_list/selectable_list.js

@@ -474,11 +474,11 @@ EuiSelectableList.propTypes = {
        */
     key: PropTypes.string,
     /**
-       * Leave `undefined` to indicate not selected,
-       * 'on' to indicate inclusion and
-       * 'off' to indicate exclusion
+       * Leave `undefined` to indicate not selected. Pass a string of
+       * 'on' to indicate inclusion, 'off' to indicate exclusion,
+       * or 'mixed' to indicate inclusion for some.
        */
-    checked: PropTypes.oneOf(["on", "off", undefined]),
+    checked: PropTypes.oneOf(["on", "off", "mixed", undefined]),
     disabled: PropTypes.bool,
     /**
        * Node to add between the selection icon and the label
@@ -507,7 +507,7 @@ EuiSelectableList.propTypes = {
     label: PropTypes.string,
     searchableLabel: PropTypes.string,
     key: PropTypes.string,
-    checked: PropTypes.oneOf(["on", "off", undefined]),
+    checked: PropTypes.oneOf(["on", "off", "mixed", undefined]),
     disabled: PropTypes.bool,
     prepend: PropTypes.node,
     append: PropTypes.node,

package/es/components/selectable/selectable_list/selectable_list_item.js

@@ -35,18 +35,28 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiBadge } from '../../badge';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 function resolveIconAndColor(checked) {
-  if (!checked) {
-    return {
-      icon: 'empty'
-    };
+  switch (checked) {
+    case 'on':
+      return {
+        icon: 'check',
+        color: 'text'
+      };
+    case 'off':
+      return {
+        icon: 'cross',
+        color: 'text'
+      };
+    case 'mixed':
+      return {
+        icon: 'minus',
+        color: 'text'
+      };
+    case undefined:
+    default:
+      return {
+        icon: 'empty'
+      };
   }
-  return checked === 'on' ? {
-    icon: 'check',
-    color: 'text'
-  } : {
-    icon: 'cross',
-    color: 'text'
-  };
 }
 var paddingSizeToClassNameMap = {
   none: null,
@@ -58,8 +68,32 @@ export var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
   _inherits(EuiSelectableListItem, _Component);
   var _super = _createSuper(EuiSelectableListItem);
   function EuiSelectableListItem(props) {
+    var _this;
     _classCallCheck(this, EuiSelectableListItem);
-    return _super.call(this, props);
+    _this = _super.call(this, props);
+    // aria-checked is intended to be used with role="checkbox" but
+    // the MDN documentation lists it as a possibility for role="option".
+    // See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
+    // and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/option_role
+    _defineProperty(_assertThisInitialized(_this), "isChecked", function (role, checked) {
+      var rolesThatCanBeMixed = ['option', 'checkbox', 'menuitemcheckbox'];
+      var rolesThatCanBeChecked = [].concat(rolesThatCanBeMixed, ['radio', 'menuitemradio', 'switch']);
+      if (!rolesThatCanBeChecked.includes(role)) return undefined;
+      switch (checked) {
+        case 'on':
+        case 'off':
+          return true;
+        case 'mixed':
+          if (rolesThatCanBeMixed.includes(role)) {
+            return 'mixed';
+          } else {
+            return false;
+          }
+        default:
+          return false;
+      }
+    });
+    return _this;
   }
   _createClass(EuiSelectableListItem, [{
     key: "render",
@@ -98,41 +132,71 @@ export var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
         });
       }
       var state;
-      var instruction;
-      if (allowExclusions && checked === 'on') {
-        state = ___EmotionJSX(EuiI18n, {
-          token: "euiSelectableListItem.includedOption",
-          default: "Selected option."
-        });
-        instruction = ___EmotionJSX(EuiI18n, {
-          token: "euiSelectableListItem.includedOptionInstructions",
-          default: "To exclude this option, press enter."
-        });
-      } else if (allowExclusions && checked === 'off') {
-        state = ___EmotionJSX(EuiI18n, {
-          token: "euiSelectableListItem.excludedOption",
-          default: "Excluded option."
-        });
-        instruction = ___EmotionJSX(EuiI18n, {
-          token: "euiSelectableListItem.excludedOptionInstructions",
-          default: "To uncheck this option, press enter."
-        });
-      } else if (allowExclusions && !checked) {
-        instruction = ___EmotionJSX(EuiI18n, {
-          token: "euiSelectableListItem.unckeckedOptionInstructions",
-          default: "To select this option, press enter."
-        });
-      }
-      var isChecked = !disabled && typeof checked === 'string';
-      if (!allowExclusions && isChecked) {
-        state = ___EmotionJSX(EuiI18n, {
-          token: "euiSelectableListItem.checkedOption",
-          default: "Checked option."
-        });
-        instruction = searchable ? ___EmotionJSX(EuiI18n, {
-          token: "euiSelectableListItem.checkedOptionInstructions",
-          default: "To uncheck this option, press enter."
-        }) : undefined;
+      var instructions;
+      var screenReaderStrings = {
+        checked: {
+          state: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.checkedOption",
+            default: "Checked option."
+          }),
+          instructions: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.checkOptionInstructions",
+            default: "To check this option, press Enter."
+          })
+        },
+        unchecked: {
+          instructions: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.uncheckOptionInstructions",
+            default: "To uncheck this option, press Enter."
+          })
+        },
+        excluded: {
+          state: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.excludedOption",
+            default: "Excluded option."
+          }),
+          instructions: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.excludeOptionInstructions",
+            default: "To exclude this option, press Enter."
+          })
+        },
+        mixed: {
+          state: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.mixedOption",
+            default: "Mixed (indeterminate) option."
+          }),
+          instructions: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.mixedOptionInstructions",
+            default: "To check this option for all, press Enter once."
+          }),
+          uncheckInstructions: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.mixedOptionUncheckInstructions",
+            default: "To uncheck this option for all, press Enter twice."
+          }),
+          excludeInstructions: ___EmotionJSX(EuiI18n, {
+            token: "euiSelectableListItem.mixedOptionExcludeInstructions",
+            default: "To exclude this option for all, press Enter twice."
+          })
+        }
+      };
+      switch (checked) {
+        case 'on':
+          state = screenReaderStrings.checked.state;
+          // eslint-disable-next-line no-nested-ternary
+          instructions = allowExclusions ? screenReaderStrings.excluded.instructions : searchable ? screenReaderStrings.unchecked.instructions : undefined;
+          break;
+        case 'off':
+          state = screenReaderStrings.excluded.state;
+          instructions = screenReaderStrings.unchecked.instructions;
+          break;
+        case 'mixed':
+          state = screenReaderStrings.mixed.state;
+          instructions = ___EmotionJSX(React.Fragment, null, screenReaderStrings.mixed.instructions, ' ', allowExclusions ? screenReaderStrings.mixed.excludeInstructions : screenReaderStrings.mixed.uncheckInstructions);
+          break;
+        case undefined:
+        default:
+          instructions = allowExclusions || searchable ? screenReaderStrings.checked.instructions : undefined;
+          break;
       }
       var prependNode;
       if (prepend) {
@@ -169,22 +233,20 @@ export var EuiSelectableListItem = /*#__PURE__*/function (_Component) {
           }, append, " ", isFocused && !disabled ? onFocusBadgeNode : null);
         }
       }
-      var instructions = (instruction || state) && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", null, state || instruction ? ' - ' : null, state, state && instruction ? ' ' : null, instruction));
+      var screenReaderText = (state || instructions) && ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("div", null, state || instructions ? '. ' : null, state, state && instructions ? ' ' : null, instructions));
       return ___EmotionJSX("li", _extends({
         role: role,
-        "data-test-selected": isChecked // Whether the item is checked/selected
-        ,
-        "aria-checked": role === 'option' ? isChecked : undefined // Whether the item is "checked"
+        "aria-disabled": disabled,
+        "aria-checked": this.isChecked(role, checked) // Whether the item is "checked"
         ,
         "aria-selected": !disabled && isFocused // Whether the item has keyboard focus per W3 spec
         ,
-        className: classes,
-        "aria-disabled": disabled
+        className: classes
       }, rest), ___EmotionJSX("span", {
         className: "euiSelectableListItem__content"
       }, optionIcon, prependNode, ___EmotionJSX("span", {
         className: textClasses
-      }, children, instructions), appendNode));
+      }, children, screenReaderText), appendNode));
     }
   }]);
   return EuiSelectableListItem;
@@ -203,7 +265,7 @@ EuiSelectableListItem.propTypes = {
   /**
        * Applies an icon and visual styling to activated items
        */
-  checked: PropTypes.oneOf(["on", "off", undefined]),
+  checked: PropTypes.oneOf(["on", "off", "mixed", undefined]),
   /**
        * Shows icons based on `checked` type
        */
@@ -278,8 +340,8 @@ EuiSelectableListItem.propTypes = {
   searchable: PropTypes.bool,
   /**
        * Attribute applied the option `<li>`.
-       * If configured to something besides the default value of `option`,
-       * other ARIA attributes such as `aria-checked` will not be automatically configured.
+       * If set to a role that allows [aria-checked](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked),
+       * `aria-checked` will be automatically configured.
        */
   role: PropTypes.any,
   /**

package/es/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -364,11 +364,11 @@ EuiSelectableTemplateSitewide.propTypes = {
        */
     key: PropTypes.string,
     /**
-       * Leave `undefined` to indicate not selected,
-       * 'on' to indicate inclusion and
-       * 'off' to indicate exclusion
+       * Leave `undefined` to indicate not selected. Pass a string of
+       * 'on' to indicate inclusion, 'off' to indicate exclusion,
+       * or 'mixed' to indicate inclusion for some.
        */
-    checked: PropTypes.oneOf(["on", "off", undefined]),
+    checked: PropTypes.oneOf(["on", "off", "mixed", undefined]),
     disabled: PropTypes.bool,
     /**
        * Node to add between the selection icon and the label

package/es/services/theme/context.js

@@ -13,4 +13,10 @@ export var EuiSystemContext = /*#__PURE__*/createContext(EuiThemeAmsterdam);
 export var EuiModificationsContext = /*#__PURE__*/createContext({});
 export var EuiColorModeContext = /*#__PURE__*/createContext(DEFAULT_COLOR_MODE);
 export var defaultComputedTheme = getComputed(EuiThemeAmsterdam, {}, DEFAULT_COLOR_MODE);
-export var EuiThemeContext = /*#__PURE__*/createContext(defaultComputedTheme);
+export var EuiThemeContext = /*#__PURE__*/createContext(defaultComputedTheme);
+export var EuiNestedThemeContext = /*#__PURE__*/createContext({
+  isGlobalTheme: true,
+  hasDifferentColorFromGlobalTheme: false,
+  bodyColor: '',
+  colorClassName: ''
+});

package/es/services/theme/index.js

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
+export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from './hooks';
 export { EuiThemeProvider, getEuiDevProviderWarning, setEuiDevProviderWarning } from './provider';
 export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed } from './utils';