@elastic/eui 80.0.0 → 81.1.0

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

@@ -35,31 +35,64 @@ 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,
   s: 'euiSelectableListItem--paddingSmall'
 };
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
-// eslint-disable-next-line react/prefer-stateless-function
 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 +131,70 @@ 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;
+          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 +231,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 +263,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 +338,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/components/selectable/selectable_templates/selectable_template_sitewide_option.js

@@ -21,6 +21,11 @@ import classNames from 'classnames';
 import { EuiIcon } from '../../../components/icon';
 import { EuiAvatar } from '../../../components/avatar/avatar';
 import { EuiHighlight } from '../../../components/highlight';
+
+/**
+ * The generic extension allows consumers to keep their data objects
+ * intact without needing to do key lookups when using `renderOption`
+ */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var euiSelectableTemplateSitewideFormatOptions = function euiSelectableTemplateSitewideFormatOptions(options) {
   return options.map(function (item) {

package/es/components/title/title.styles.js

@@ -16,6 +16,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { useEuiTheme } from '../../services';
 import { euiTextBreakWord, euiFontSize, logicalCSS } from '../../global_styling';
+
+/**
+ * Mixin
+ */
+
 export var euiTitle = function euiTitle(euiThemeContext) {
   var scale = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'm';
   var options = arguments.length > 2 ? arguments[2] : undefined;

package/es/components/tree_view/tree_view.js

@@ -182,7 +182,6 @@ export var EuiTreeView = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (this.props.id !== prevProps.id) {
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           treeID: getTreeId(this.props.id, this.context, this.treeIdGenerator)
         });

package/es/global_styling/variables/breakpoint.js

@@ -9,4 +9,5 @@
 export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
 
 // This type cannot be a string enum / must be a generic string
-// in case consumers add custom breakpoint sizes, such as xxl or xxs
+// in case consumers add custom breakpoint sizes, such as xxl or xxs
+// Set the minimum window width at which to start to the breakpoint

package/es/global_styling/variables/typography.js

@@ -16,8 +16,25 @@ export var EuiThemeFontSizeMeasurements = ['rem', 'px', 'em'];
  */
 
 export var EuiThemeFontScales = ['xxxs', 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
+
+/*
+ * Font base settings
+ */
+
 /*
  * Font weights
  */
 
-export var EuiThemeFontWeights = ['light', 'regular', 'medium', 'semiBold', 'bold'];
+export var EuiThemeFontWeights = ['light', 'regular', 'medium', 'semiBold', 'bold'];
+
+/**
+ * Body / Base styles
+ */
+
+/**
+ * Title styles
+ */
+
+/*
+ * Font
+ */

package/es/services/sort/sortable_properties.js

@@ -28,7 +28,6 @@ import { Comparators } from './comparators';
  * @property {boolean} sortableProperty.isAscending - The direction of the last sort by this property. Used to preserve
  * past sort orders.
  */
-
 /**
  * Stores sort information for a set of SortableProperties, including which property is currently being sorted on, as
  * well as the last sort order for each property.

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';

package/es/services/theme/provider.js

@@ -1,4 +1,8 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["cloneElement", "className"];
+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); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -18,9 +22,11 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import { css } from '@emotion/css';
 import isEqual from 'lodash/isEqual';
-import { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
+import { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { buildTheme, getColorMode, getComputed, mergeDeep } from './utils';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var providerWarning = undefined;
@@ -34,7 +40,11 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
     _colorMode = _ref.colorMode,
     _modifications = _ref.modify,
-    children = _ref.children;
+    children = _ref.children,
+    wrapperProps = _ref.wrapperProps;
+  var _useContext = useContext(EuiNestedThemeContext),
+    isGlobalTheme = _useContext.isGlobalTheme,
+    bodyColor = _useContext.bodyColor;
   var parentSystem = useContext(EuiSystemContext);
   var parentModifications = useContext(EuiModificationsContext);
   var parentColorMode = useContext(EuiColorModeContext);
@@ -89,6 +99,37 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
       setTheme(getComputed(system, buildTheme(modifications, "_".concat(system.key)), colorMode));
     }
   }, [colorMode, system, modifications]);
+  var nestedThemeContext = useMemo(function () {
+    return {
+      isGlobalTheme: false,
+      // The theme that determines the global body styles
+      bodyColor: isGlobalTheme ? theme.colors.text : bodyColor,
+      hasDifferentColorFromGlobalTheme: isGlobalTheme ? false : bodyColor !== theme.colors.text,
+      colorClassName: /*#__PURE__*/css("label:euiColorMode-", _colorMode, ";color:", theme.colors.text, ";;label:colorClassName;")
+    };
+  }, [theme, isGlobalTheme, bodyColor, _colorMode]);
+  var renderedChildren = useMemo(function () {
+    if (isGlobalTheme) {
+      return children; // No wrapper
+    }
+
+    var _ref2 = wrapperProps || {},
+      cloneElement = _ref2.cloneElement,
+      className = _ref2.className,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+    var props = _objectSpread(_objectSpread({}, rest), {}, {
+      className: classNames(className, nestedThemeContext.colorClassName)
+    });
+    if (cloneElement) {
+      return /*#__PURE__*/React.cloneElement(children, _objectSpread(_objectSpread({}, props), {}, {
+        className: classNames(children.props.className, props.className)
+      }));
+    } else {
+      return ___EmotionJSX("span", _extends({}, props, {
+        className: classNames('euiThemeProvider', props.className)
+      }), children);
+    }
+  }, [isGlobalTheme, nestedThemeContext, wrapperProps, children]);
   return ___EmotionJSX(EuiColorModeContext.Provider, {
     value: colorMode
   }, ___EmotionJSX(EuiSystemContext.Provider, {
@@ -97,5 +138,7 @@ export var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: modifications
   }, ___EmotionJSX(EuiThemeContext.Provider, {
     value: theme
-  }, children))));
+  }, ___EmotionJSX(EuiNestedThemeContext.Provider, {
+    value: nestedThemeContext
+  }, renderedChildren)))));
 };

package/es/services/utils.js

@@ -11,7 +11,6 @@ import _memoize from 'lodash/memoize';
 
 // wrap the lodash functions to avoid having lodash's TS type definition from being
 // exported, which can conflict with the lodash namespace if other versions are used
-
 export function times(count, iteratee) {
   if (iteratee === undefined) {
     return _times(count);

package/es/test/index.d.ts

@@ -23,7 +23,7 @@ declare module '@elastic/eui/es/test/take_mounted_snapshot' {
 
 }
 declare module '@elastic/eui/es/test/find_test_subject' {
-	import { ReactWrapper, ShallowWrapper } from 'enzyme'; const MATCHERS: readonly ["=", "~=", "|=", "^=", "$=", "*="]; type FindTestSubject<T extends ShallowWrapper | ReactWrapper> = (mountedComponent: T, testSubjectSelector: string, matcher?: typeof MATCHERS[number]) => ReturnType<T['find']>;
+	import { ReactWrapper, ShallowWrapper } from 'enzyme'; const MATCHERS: readonly ["=", "~=", "|=", "^=", "$=", "*="]; type FindTestSubject<T extends ShallowWrapper | ReactWrapper> = (mountedComponent: T, testSubjectSelector: string, matcher?: (typeof MATCHERS)[number]) => ReturnType<T['find']>;
 	export const findTestSubject: FindTestSubject<ShallowWrapper<any> | ReactWrapper<any>>;
 	export {};