@elastic/eui 77.2.1 → 78.0.0

package/es/components/avatar/avatar.js

@@ -1,5 +1,6 @@
 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 = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
+var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"],
+  _excluded2 = ["casing"];
 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 _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."); }
@@ -32,6 +33,7 @@ import { euiAvatarStyles } from './avatar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['s', 'm', 'l', 'xl'];
 export var TYPES = ['space', 'user'];
+export var CASING = ['capitalize', 'uppercase', 'lowercase', 'none'];
 export var EuiAvatar = function EuiAvatar(_ref) {
   var _classNames;
   var className = _ref.className,
@@ -50,14 +52,17 @@ export var EuiAvatar = function EuiAvatar(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _props$casing = props.casing,
+    casing = _props$casing === void 0 ? type === 'space' ? 'none' : 'uppercase' : _props$casing,
+    rest = _objectWithoutProperties(props, _excluded2);
   var euiTheme = useEuiTheme();
   var styles = euiAvatarStyles(euiTheme);
   var visColors = euiPaletteColorBlindBehindText();
   var isPlain = color === 'plain';
   var isSubdued = color === 'subdued';
   var classes = classNames('euiAvatar', (_classNames = {}, _defineProperty(_classNames, "euiAvatar--".concat(size), size), _defineProperty(_classNames, "euiAvatar--".concat(type), type), _defineProperty(_classNames, 'euiAvatar-isDisabled', isDisabled), _classNames), className);
-  var cssStyles = [styles.euiAvatar, styles[size], styles[type], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
   checkValidInitials(initials);
   var avatarStyle = _objectSpread({}, style);
   var iconCustomColor = iconColor;
@@ -149,6 +154,13 @@ EuiAvatar.propTypes = {
        */
   type: PropTypes.any,
   size: PropTypes.any,
+  /**
+       * Sets the letter casing of the displayed initials.
+       * Defaults to `uppercase` for `type="user"` avatars.
+       * Defaults to `none` (uses the existing casing of the passed `name` or `initials`) for `type="space"` avatars.
+       * @default uppercase
+       */
+  casing: PropTypes.any,
   /**
        * Grays out the avatar to simulate being disabled
        */

package/es/components/avatar/avatar.styles.js

@@ -9,12 +9,44 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { logicalCSS, logicalTextAlignCSS } from '../../global_styling';
-var _avatarSize = function _avatarSize(_ref3) {
-  var size = _ref3.size,
-    fontSize = _ref3.fontSize;
+var _avatarSize = function _avatarSize(_ref7) {
+  var size = _ref7.size,
+    fontSize = _ref7.fontSize;
   return "\n    ".concat(logicalCSS('width', size), ";\n    ").concat(logicalCSS('height', size), ";\n    line-height: ").concat(size, ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "4wfy2n-none",
+  styles: "text-transform:none;label:none;"
+} : {
+  name: "4wfy2n-none",
+  styles: "text-transform:none;label:none;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "5xhpzh-lowercase",
+  styles: "text-transform:lowercase;label:lowercase;"
+} : {
+  name: "5xhpzh-lowercase",
+  styles: "text-transform:lowercase;label:lowercase;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1x2qsb1-uppercase",
+  styles: "text-transform:uppercase;label:uppercase;"
+} : {
+  name: "1x2qsb1-uppercase",
+  styles: "text-transform:uppercase;label:uppercase;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "mxeh3g-capitalize",
+  styles: "text-transform:capitalize;label:capitalize;"
+} : {
+  name: "mxeh3g-capitalize",
+  styles: "text-transform:capitalize;label:capitalize;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref5 = process.env.NODE_ENV === "production" ? {
   name: "14sj6wh-isDisabled",
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;"
 } : {
@@ -22,7 +54,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref6 = process.env.NODE_ENV === "production" ? {
   name: "ont6vs-user",
   styles: "border-radius:50%;label:user;"
 } : {
@@ -30,18 +62,18 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "border-radius:50%;label:user;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-export var euiAvatarStyles = function euiAvatarStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+export var euiAvatarStyles = function euiAvatarStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
     // Base
     euiAvatar: /*#__PURE__*/css("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;", logicalTextAlignCSS('center'), ";", logicalCSS('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref2,
+    user: _ref6,
     space: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
     // States
-    isDisabled: _ref,
+    isDisabled: _ref5,
     // Sizes
     s: /*#__PURE__*/css(_avatarSize({
       size: euiTheme.size.l,
@@ -58,6 +90,11 @@ export var euiAvatarStyles = function euiAvatarStyles(_ref4) {
     xl: /*#__PURE__*/css(_avatarSize({
       size: "calc(".concat(euiTheme.size.base, " * 4)"),
       fontSize: "calc(".concat(euiTheme.size.xl, " * 0.8)")
-    }), ";label:xl;")
+    }), ";label:xl;"),
+    // Casing
+    capitalize: _ref4,
+    uppercase: _ref3,
+    lowercase: _ref2,
+    none: _ref
   };
 };

package/es/components/focus_trap/focus_trap.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
+var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
 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); }
 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; }
@@ -28,6 +28,7 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import { FocusOn } from 'react-focus-on';
+import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { findElementBySelectorOrRef } from '../../services';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
@@ -116,17 +117,25 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
         returnFocus = _this$props3.returnFocus,
         noIsolation = _this$props3.noIsolation,
         scrollLock = _this$props3.scrollLock,
+        gapMode = _this$props3.gapMode,
         rest = _objectWithoutProperties(_this$props3, _excluded);
       var isDisabled = disabled || this.state.hasBeenDisabledByClick;
       var focusOnProps = _objectSpread(_objectSpread({
         returnFocus: returnFocus,
         noIsolation: noIsolation,
-        scrollLock: scrollLock,
         enabled: !isDisabled
       }, rest), {}, {
-        onClickOutside: this.handleOutsideClick
+        onClickOutside: this.handleOutsideClick,
+        /**
+         * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
+         * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
+         * @see https://github.com/theKashey/react-focus-on/issues/49
+         */
+        scrollLock: false
       });
-      return ___EmotionJSX(FocusOn, focusOnProps, children);
+      return ___EmotionJSX(FocusOn, focusOnProps, children, scrollLock && ___EmotionJSX(RemoveScrollBar, {
+        gapMode: gapMode
+      }));
     }
   }]);
   return EuiFocusTrap;
@@ -136,7 +145,8 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
   disabled: false,
   returnFocus: true,
   noIsolation: true,
-  scrollLock: false
+  scrollLock: false,
+  gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
 });
 EuiFocusTrap.propTypes = {
   className: PropTypes.string,
@@ -157,5 +167,11 @@ EuiFocusTrap.propTypes = {
      */
   initialFocus: PropTypes.any,
   style: PropTypes.any,
+  /**
+     * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
+     * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
+     * `margin` instead of `padding`.
+     */
+  gapMode: PropTypes.oneOf(["padding", "margin"]),
   disabled: PropTypes.bool
 };

package/es/components/form/form.styles.js

@@ -45,10 +45,10 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     inputGroupBorder: 'none'
   };
 
-  // Colors - specific for checkboxes and radios
+  // Colors - specific to checkboxes, radios, switches, and range thumbs
   var customControlColors = {
     customControlDisabledIconColor: isColorDark ? shade(euiTheme.colors.mediumShade, 0.38) : tint(euiTheme.colors.mediumShade, 0.485),
-    customControlBorderColor: isColorDark ? shade(euiTheme.colors.lightestShade, 0.18) : tint(euiTheme.colors.lightestShade, 0.3)
+    customControlBorderColor: isColorDark ? shade(euiTheme.colors.lightestShade, 0.4) : tint(euiTheme.colors.lightestShade, 0.31)
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: mathWithUnits(controlHeight, function (x) {

package/es/components/search_bar/query/ast_to_es_query_dsl.js

@@ -68,9 +68,9 @@ export var _termValuesToQuery = function _termValuesToQuery(values, options) {
   var body = {
     query: values.map(function (value) {
       if (isString(value) && value.match(/\s/)) {
-        return "\"".concat(value, "\"");
+        return "+\"".concat(value, "\"");
       }
-      return value;
+      return "+".concat(value);
     }).join(' ')
   };
   if (body.query === '') {

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

@@ -303,6 +303,13 @@ EuiSelectableTemplateSitewide.propTypes = {
            */
       type: PropTypes.any,
       size: PropTypes.any,
+      /**
+           * Sets the letter casing of the displayed initials.
+           * Defaults to `uppercase` for `type="user"` avatars.
+           * Defaults to `none` (uses the existing casing of the passed `name` or `initials`) for `type="space"` avatars.
+           * @default uppercase
+           */
+      casing: PropTypes.any,
       /**
            * Grays out the avatar to simulate being disabled
            */

package/es/test/rtl/custom_render.js

@@ -44,4 +44,14 @@ export { customRender as render };
  * @see https://github.com/testing-library/dom-testing-library/issues/516
  */
 var customScreen = _objectSpread(_objectSpread({}, screen), within(document.body, dataTestSubjQueries));
-export { customScreen as screen };
+export { customScreen as screen };
+
+/**
+ * Custom within util with EUI query helpers
+ *
+ * @see https://testing-library.com/docs/dom-testing-library/api-within/
+ */
+var customWithin = function customWithin(element) {
+  return within(element, _objectSpread(_objectSpread({}, queries), dataTestSubjQueries));
+};
+export { customWithin as within };

package/es/test/rtl/index.d.ts

@@ -1,3 +1,3 @@
 export * from './component_helpers';
 export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject, } from './data_test_subj_queries';
-export { render, screen } from './custom_render';
+export { render, screen, within } from './custom_render';

package/es/test/rtl/index.js

@@ -8,4 +8,4 @@
 
 export * from './component_helpers';
 export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject } from './data_test_subj_queries';
-export { render, screen } from './custom_render';
+export { render, screen, within } from './custom_render';

package/eui.d.ts

@@ -4266,6 +4266,12 @@ declare module '@elastic/eui/src/components/focus_trap/focus_trap' {
 	     */
 	    initialFocus?: FocusTarget;
 	    style?: CSSProperties;
+	    /**
+	     * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
+	     * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
+	     * `margin` instead of `padding`.
+	     */
+	    gapMode?: 'padding' | 'margin';
 	    disabled?: boolean;
 	}
 	export interface EuiFocusTrapProps extends CommonProps, Omit<ReactFocusOnProps, 'enabled'>, // Inverted `disabled` prop used instead
@@ -4281,6 +4287,7 @@ declare module '@elastic/eui/src/components/focus_trap/focus_trap' {
 	        returnFocus: boolean;
 	        noIsolation: boolean;
 	        scrollLock: boolean;
+	        gapMode: string;
 	    };
 	    state: State;
 	    lastInterceptedEvent: Event | null;
@@ -8387,6 +8394,10 @@ declare module '@elastic/eui/src/components/avatar/avatar.styles' {
 	    m: import("@emotion/utils").SerializedStyles;
 	    l: import("@emotion/utils").SerializedStyles;
 	    xl: import("@emotion/utils").SerializedStyles;
+	    capitalize: import("@emotion/utils").SerializedStyles;
+	    uppercase: import("@emotion/utils").SerializedStyles;
+	    lowercase: import("@emotion/utils").SerializedStyles;
+	    none: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -8397,7 +8408,9 @@ declare module '@elastic/eui/src/components/avatar/avatar' {
 	export const SIZES: readonly ["s", "m", "l", "xl"];
 	export type EuiAvatarSize = typeof SIZES[number];
 	export const TYPES: readonly ["space", "user"];
-	export type EuiAvatarType = typeof TYPES[number]; type _EuiAvatarContent = ExclusiveUnion<ExclusiveUnion<{
+	export type EuiAvatarType = typeof TYPES[number];
+	export const CASING: readonly ["capitalize", "uppercase", "lowercase", "none"];
+	export type EuiAvatarCasing = typeof CASING[number]; type _EuiAvatarContent = ExclusiveUnion<ExclusiveUnion<{
 	    /**
 	     * Custom initials (max 2 characters).
 	     * By default will take the first character (of each word).
@@ -8444,6 +8457,13 @@ declare module '@elastic/eui/src/components/avatar/avatar' {
 	     */
 	    type?: EuiAvatarType;
 	    size?: EuiAvatarSize;
+	    /**
+	     * Sets the letter casing of the displayed initials.
+	     * Defaults to `uppercase` for `type="user"` avatars.
+	     * Defaults to `none` (uses the existing casing of the passed `name` or `initials`) for `type="space"` avatars.
+	     * @default uppercase
+	     */
+	    casing?: EuiAvatarCasing;
 	    /**
 	     * Grays out the avatar to simulate being disabled
 	     */

package/lib/components/avatar/avatar.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkValidColor = exports.TYPES = exports.SIZES = exports.EuiAvatar = void 0;
+exports.checkValidColor = exports.TYPES = exports.SIZES = exports.EuiAvatar = exports.CASING = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -13,7 +13,8 @@ var _services = require("../../services");
 var _icon = require("../icon");
 var _avatar = require("./avatar.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
+var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"],
+  _excluded2 = ["casing"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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 _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
@@ -33,6 +34,8 @@ var SIZES = ['s', 'm', 'l', 'xl'];
 exports.SIZES = SIZES;
 var TYPES = ['space', 'user'];
 exports.TYPES = TYPES;
+var CASING = ['capitalize', 'uppercase', 'lowercase', 'none'];
+exports.CASING = CASING;
 var EuiAvatar = function EuiAvatar(_ref) {
   var _classNames;
   var className = _ref.className,
@@ -51,14 +54,17 @@ var EuiAvatar = function EuiAvatar(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     style = _ref.style,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _props$casing = props.casing,
+    casing = _props$casing === void 0 ? type === 'space' ? 'none' : 'uppercase' : _props$casing,
+    rest = _objectWithoutProperties(props, _excluded2);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _avatar.euiAvatarStyles)(euiTheme);
   var visColors = (0, _services.euiPaletteColorBlindBehindText)();
   var isPlain = color === 'plain';
   var isSubdued = color === 'subdued';
   var classes = (0, _classnames.default)('euiAvatar', (_classNames = {}, _defineProperty(_classNames, "euiAvatar--".concat(size), size), _defineProperty(_classNames, "euiAvatar--".concat(type), type), _defineProperty(_classNames, 'euiAvatar-isDisabled', isDisabled), _classNames), className);
-  var cssStyles = [styles.euiAvatar, styles[size], styles[type], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
+  var cssStyles = [styles.euiAvatar, styles[type], styles[size], styles[casing], isPlain && styles.plain, isSubdued && styles.subdued, isDisabled && styles.isDisabled];
   checkValidInitials(initials);
   var avatarStyle = _objectSpread({}, style);
   var iconCustomColor = iconColor;
@@ -151,6 +157,13 @@ EuiAvatar.propTypes = {
        */
   type: _propTypes.default.any,
   size: _propTypes.default.any,
+  /**
+       * Sets the letter casing of the displayed initials.
+       * Defaults to `uppercase` for `type="user"` avatars.
+       * Defaults to `none` (uses the existing casing of the passed `name` or `initials`) for `type="space"` avatars.
+       * @default uppercase
+       */
+  casing: _propTypes.default.any,
   /**
        * Grays out the avatar to simulate being disabled
        */

package/lib/components/avatar/avatar.styles.js

@@ -7,12 +7,44 @@ exports.euiAvatarStyles = void 0;
 var _react = require("@emotion/react");
 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)."; }
-var _avatarSize = function _avatarSize(_ref3) {
-  var size = _ref3.size,
-    fontSize = _ref3.fontSize;
+var _avatarSize = function _avatarSize(_ref7) {
+  var size = _ref7.size,
+    fontSize = _ref7.fontSize;
   return "\n    ".concat((0, _global_styling.logicalCSS)('width', size), ";\n    ").concat((0, _global_styling.logicalCSS)('height', size), ";\n    line-height: ").concat(size, ";\n    font-size: ").concat(fontSize, ";\n  ");
 };
 var _ref = process.env.NODE_ENV === "production" ? {
+  name: "4wfy2n-none",
+  styles: "text-transform:none;label:none;"
+} : {
+  name: "4wfy2n-none",
+  styles: "text-transform:none;label:none;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "5xhpzh-lowercase",
+  styles: "text-transform:lowercase;label:lowercase;"
+} : {
+  name: "5xhpzh-lowercase",
+  styles: "text-transform:lowercase;label:lowercase;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "1x2qsb1-uppercase",
+  styles: "text-transform:uppercase;label:uppercase;"
+} : {
+  name: "1x2qsb1-uppercase",
+  styles: "text-transform:uppercase;label:uppercase;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "mxeh3g-capitalize",
+  styles: "text-transform:capitalize;label:capitalize;"
+} : {
+  name: "mxeh3g-capitalize",
+  styles: "text-transform:capitalize;label:capitalize;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref5 = process.env.NODE_ENV === "production" ? {
   name: "14sj6wh-isDisabled",
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;"
 } : {
@@ -20,7 +52,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "cursor:not-allowed;filter:grayscale(100%);label:isDisabled;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref6 = process.env.NODE_ENV === "production" ? {
   name: "ont6vs-user",
   styles: "border-radius:50%;label:user;"
 } : {
@@ -28,18 +60,18 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "border-radius:50%;label:user;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var euiAvatarStyles = function euiAvatarStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiAvatarStyles = function euiAvatarStyles(_ref8) {
+  var euiTheme = _ref8.euiTheme;
   return {
     // Base
     euiAvatar: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;background-size:cover;", (0, _global_styling.logicalTextAlignCSS)('center'), ";", (0, _global_styling.logicalCSS)('overflow-x', 'hidden'), "font-weight:", euiTheme.font.weight.medium, ";;label:euiAvatar;"),
     // Variants
     plain: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";;label:plain;"),
     subdued: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.lightestShade, ";;label:subdued;"),
-    user: _ref2,
+    user: _ref6,
     space: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:space;"),
     // States
-    isDisabled: _ref,
+    isDisabled: _ref5,
     // Sizes
     s: /*#__PURE__*/(0, _react.css)(_avatarSize({
       size: euiTheme.size.l,
@@ -56,7 +88,12 @@ var euiAvatarStyles = function euiAvatarStyles(_ref4) {
     xl: /*#__PURE__*/(0, _react.css)(_avatarSize({
       size: "calc(".concat(euiTheme.size.base, " * 4)"),
       fontSize: "calc(".concat(euiTheme.size.xl, " * 0.8)")
-    }), ";label:xl;")
+    }), ";label:xl;"),
+    // Casing
+    capitalize: _ref4,
+    uppercase: _ref3,
+    lowercase: _ref2,
+    none: _ref
   };
 };
 exports.euiAvatarStyles = euiAvatarStyles;

package/lib/components/focus_trap/focus_trap.js

@@ -7,9 +7,10 @@ exports.EuiFocusTrap = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactFocusOn = require("react-focus-on");
+var _reactRemoveScrollBar = require("react-remove-scroll-bar");
 var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock"];
+var _excluded = ["children", "clickOutsideDisables", "disabled", "returnFocus", "noIsolation", "scrollLock", "gapMode"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -117,17 +118,25 @@ var EuiFocusTrap = /*#__PURE__*/function (_Component) {
         returnFocus = _this$props3.returnFocus,
         noIsolation = _this$props3.noIsolation,
         scrollLock = _this$props3.scrollLock,
+        gapMode = _this$props3.gapMode,
         rest = _objectWithoutProperties(_this$props3, _excluded);
       var isDisabled = disabled || this.state.hasBeenDisabledByClick;
       var focusOnProps = _objectSpread(_objectSpread({
         returnFocus: returnFocus,
         noIsolation: noIsolation,
-        scrollLock: scrollLock,
         enabled: !isDisabled
       }, rest), {}, {
-        onClickOutside: this.handleOutsideClick
+        onClickOutside: this.handleOutsideClick,
+        /**
+         * `scrollLock` should always be unset on FocusOn, as it can prevent scrolling on
+         * portals (i.e. popovers, comboboxes, dropdown menus, etc.) within modals & flyouts
+         * @see https://github.com/theKashey/react-focus-on/issues/49
+         */
+        scrollLock: false
       });
-      return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children);
+      return (0, _react2.jsx)(_reactFocusOn.FocusOn, focusOnProps, children, scrollLock && (0, _react2.jsx)(_reactRemoveScrollBar.RemoveScrollBar, {
+        gapMode: gapMode
+      }));
     }
   }]);
   return EuiFocusTrap;
@@ -138,7 +147,8 @@ _defineProperty(EuiFocusTrap, "defaultProps", {
   disabled: false,
   returnFocus: true,
   noIsolation: true,
-  scrollLock: false
+  scrollLock: false,
+  gapMode: 'padding' // EUI defaults to padding because Kibana's body/layout CSS ignores `margin`
 });
 EuiFocusTrap.propTypes = {
   className: _propTypes.default.string,
@@ -159,5 +169,11 @@ EuiFocusTrap.propTypes = {
      */
   initialFocus: _propTypes.default.any,
   style: _propTypes.default.any,
+  /**
+     * if `scrollLock` is set to true, the body's scrollbar width will be preserved on lock
+     * via the `gapMode` CSS property. Depending on your custom CSS, you may prefer to use
+     * `margin` instead of `padding`.
+     */
+  gapMode: _propTypes.default.oneOf(["padding", "margin"]),
   disabled: _propTypes.default.bool
 };

package/lib/components/form/form.styles.js

@@ -43,10 +43,10 @@ var euiFormVariables = function euiFormVariables(euiThemeContext) {
     inputGroupBorder: 'none'
   };
 
-  // Colors - specific for checkboxes and radios
+  // Colors - specific to checkboxes, radios, switches, and range thumbs
   var customControlColors = {
     customControlDisabledIconColor: isColorDark ? (0, _services.shade)(euiTheme.colors.mediumShade, 0.38) : (0, _services.tint)(euiTheme.colors.mediumShade, 0.485),
-    customControlBorderColor: isColorDark ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.18) : (0, _services.tint)(euiTheme.colors.lightestShade, 0.3)
+    customControlBorderColor: isColorDark ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.4) : (0, _services.tint)(euiTheme.colors.lightestShade, 0.31)
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: (0, _global_styling.mathWithUnits)(controlHeight, function (x) {

package/lib/components/search_bar/query/ast_to_es_query_dsl.js

@@ -66,9 +66,9 @@ var _termValuesToQuery = function _termValuesToQuery(values, options) {
   var body = {
     query: values.map(function (value) {
       if ((0, _predicate.isString)(value) && value.match(/\s/)) {
-        return "\"".concat(value, "\"");
+        return "+\"".concat(value, "\"");
       }
-      return value;
+      return "+".concat(value);
     }).join(' ')
   };
   if (body.query === '') {

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

@@ -310,6 +310,13 @@ EuiSelectableTemplateSitewide.propTypes = {
            */
       type: _propTypes.default.any,
       size: _propTypes.default.any,
+      /**
+           * Sets the letter casing of the displayed initials.
+           * Defaults to `uppercase` for `type="user"` avatars.
+           * Defaults to `none` (uses the existing casing of the passed `name` or `initials`) for `type="space"` avatars.
+           * @default uppercase
+           */
+      casing: _propTypes.default.any,
       /**
            * Grays out the avatar to simulate being disabled
            */

package/lib/test/rtl/custom_render.js

@@ -4,7 +4,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.screen = exports.render = void 0;
+exports.within = exports.screen = exports.render = void 0;
 var _react = require("@testing-library/react");
 var _components = require("../../components");
 var dataTestSubjQueries = _interopRequireWildcard(require("./data_test_subj_queries"));
@@ -42,4 +42,13 @@ exports.render = customRender;
  * @see https://github.com/testing-library/dom-testing-library/issues/516
  */
 var customScreen = _objectSpread(_objectSpread({}, _react.screen), (0, _react.within)(document.body, dataTestSubjQueries));
-exports.screen = customScreen;
+exports.screen = customScreen;
+/**
+ * Custom within util with EUI query helpers
+ *
+ * @see https://testing-library.com/docs/dom-testing-library/api-within/
+ */
+var customWithin = function customWithin(element) {
+  return (0, _react.within)(element, _objectSpread(_objectSpread({}, _react.queries), dataTestSubjQueries));
+};
+exports.within = customWithin;

package/lib/test/rtl/index.d.ts

@@ -1,3 +1,3 @@
 export * from './component_helpers';
 export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject, } from './data_test_subj_queries';
-export { render, screen } from './custom_render';
+export { render, screen, within } from './custom_render';