@elastic/eui 98.0.0 → 98.1.0

package/es/components/badge/beta_badge/beta_badge.js

@@ -19,7 +19,7 @@ import { EuiToolTip } from '../../tool_tip';
 import { EuiIcon } from '../../icon';
 import { euiBetaBadgeStyles } from './beta_badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var COLORS = ['accent', 'subdued', 'hollow'];
+export var COLORS = ['accent', 'subdued', 'hollow', 'warning'];
 export var SIZES = ['s', 'm'];
 export var ALIGNMENTS = ['baseline', 'middle'];
 
@@ -172,7 +172,7 @@ EuiBetaBadge.propTypes = {
      */
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.string])]),
   /**
-     * Accepts accent, subdued and hollow.
+     * Accepts accent, subdued, hollow and warning.
      */
   color: PropTypes.any,
   size: PropTypes.any,

package/es/components/badge/beta_badge/beta_badge.styles.js

@@ -46,6 +46,7 @@ export var euiBetaBadgeStyles = function euiBetaBadgeStyles(euiThemeContext) {
     accent: /*#__PURE__*/css(badgeColors.accentText, ";label:accent;"),
     subdued: /*#__PURE__*/css(badgeColors.subdued, ";label:subdued;"),
     hollow: /*#__PURE__*/css("color:", badgeColors.hollow.color, ";background-color:", badgeColors.hollow.backgroundColor, ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", badgeColors.hollow.borderColor, ";;label:hollow;"),
+    warning: /*#__PURE__*/css(badgeColors.warning, ";label:warning;"),
     // Font sizes
     m: /*#__PURE__*/css("font-size:", euiFontSizeFromScale('xs', euiTheme), ";line-height:", euiTheme.size.l, ";;label:m;"),
     s: /*#__PURE__*/css("font-size:0.625rem;line-height:", mathWithUnits(euiTheme.size.xs, function (x) {

package/es/components/card/card.js

@@ -381,7 +381,7 @@ EuiCard.propTypes = {
        */
     title: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.string])]),
     /**
-       * Accepts accent, subdued and hollow.
+       * Accepts accent, subdued, hollow and warning.
        */
     color: PropTypes.any,
     size: PropTypes.any,

package/es/components/card/card.styles.js

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiPaddingSize, euiSupportsHas, logicalCSS, logicals, logicalTextAlignCSS } from '../../global_styling';
+import { euiPaddingSize, logicalCSS, logicals, logicalTextAlignCSS } from '../../global_styling';
 import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
 var paddingKey = 'm';
 var halfPaddingKey = 's';
@@ -124,7 +124,7 @@ export var euiCardTextStyles = function euiCardTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiCard__text: _ref,
-    interactive: /*#__PURE__*/css("outline-offset:", euiTheme.size.xxs, ";.euiCard:hover &,.euiCard:focus &,&:hover,&:focus{text-decoration:underline;}", euiSupportsHas, "{outline:none!important;};label:interactive;"),
+    interactive: /*#__PURE__*/css("outline-offset:", euiTheme.size.xxs, ";.euiCard:hover &,.euiCard:focus &,&:hover,&:focus{text-decoration:underline;};label:interactive;"),
     aligned: {
       center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";;label:center;"),
       left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";;label:left;"),
@@ -138,7 +138,7 @@ export var euiCardBetaBadgeStyles = function euiCardBetaBadgeStyles(euiThemeCont
   var padding = euiPaddingSize(euiThemeContext, paddingSize);
   return {
     hasBetaBadge: /*#__PURE__*/css("position:relative;overflow:visible;", logicalCSS('padding-top', "calc(".concat(padding, " + ").concat(euiTheme.size.s, ")")), ";;label:hasBetaBadge;"),
-    euiCard__betaBadgeAnchor: /*#__PURE__*/css("line-height:0;position:absolute;", logicalCSS('top', '0'), " ", logicalCSS('left', '50%'), " transform:translateX(-50%) translateY(-50%);z-index:3;", logicalCSS('min-width', 'min(30%, 112px)'), " ", logicalCSS('max-width', "calc(100% - (".concat(padding, " * 2))")), ";;label:euiCard__betaBadgeAnchor;"),
+    euiCard__betaBadgeAnchor: /*#__PURE__*/css("line-height:0;position:absolute;", logicalCSS('top', '0'), " ", logicalCSS('left', '50%'), " transform:translateX(-50%) translateY(-50%);z-index:3;", logicalCSS('min-width', "min(30%, ".concat(euiTheme.base * 7, "px)")), " ", logicalCSS('max-width', "calc(100% - (".concat(padding, " * 2))")), ";;label:euiCard__betaBadgeAnchor;"),
     euiCard__betaBadge: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:euiCard__betaBadge;")
   };
 };

package/es/components/code/code_block.js

@@ -1,4 +1,4 @@
-var _excluded = ["language", "transparentBackground", "paddingSize", "fontSize", "isCopyable", "whiteSpace", "children", "className", "overflowHeight", "isVirtualized", "lineNumbers"];
+var _excluded = ["language", "transparentBackground", "paddingSize", "fontSize", "isCopyable", "copyAriaLabel", "whiteSpace", "children", "className", "overflowHeight", "isVirtualized", "lineNumbers"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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."); }
@@ -57,6 +57,7 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     fontSize = _ref$fontSize === void 0 ? 's' : _ref$fontSize,
     _ref$isCopyable = _ref.isCopyable,
     isCopyable = _ref$isCopyable === void 0 ? false : _ref$isCopyable,
+    copyAriaLabel = _ref.copyAriaLabel,
     _ref$whiteSpace = _ref.whiteSpace,
     whiteSpace = _ref$whiteSpace === void 0 ? 'pre-wrap' : _ref$whiteSpace,
     children = _ref.children,
@@ -97,6 +98,7 @@ export var EuiCodeBlock = function EuiCodeBlock(_ref) {
     return !!(_isVirtualized && Array.isArray(data));
   }, [_isVirtualized, data]);
   var _useCopy = useCopy({
+      copyAriaLabel: copyAriaLabel,
       isCopyable: isCopyable,
       isVirtualized: isVirtualized,
       children: children
@@ -200,6 +202,12 @@ EuiCodeBlock.propTypes = {
      * Displays an icon button to copy the code snippet to the clipboard.
      */
   isCopyable: PropTypes.bool,
+  /**
+     * Customizes the aria-label for the copy button.
+     *
+     * @default 'Copy'
+     */
+  copyAriaLabel: PropTypes.string,
   /**
      * Displays line numbers.
      * Optionally accepts a configuration object for setting the starting number,

package/es/components/code/code_block_copy.js

@@ -24,7 +24,8 @@ import { NEW_LINE_REGEX_GLOBAL } from './utils';
  */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useCopy = function useCopy(_ref) {
-  var isCopyable = _ref.isCopyable,
+  var copyAriaLabel = _ref.copyAriaLabel,
+    isCopyable = _ref.isCopyable,
     isVirtualized = _ref.isVirtualized,
     children = _ref.children;
   var _useInnerText = useInnerText(''),
@@ -47,7 +48,7 @@ export var useCopy = function useCopy(_ref) {
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
   var showCopyButton = isCopyable && textToCopy;
-  var copyAriaLabel = useEuiI18n('euiCodeBlockCopy.copy', 'Copy');
+  var copyDefaultAriaLabel = useEuiI18n('euiCodeBlockCopy.copy', 'Copy');
   var copyButton = useMemo(function () {
     return showCopyButton ? ___EmotionJSX("div", {
       className: "euiCodeBlock__copyButton"
@@ -58,11 +59,11 @@ export var useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel,
+        "aria-label": copyAriaLabel || copyDefaultAriaLabel,
         "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
-  }, [showCopyButton, textToCopy, copyAriaLabel]);
+  }, [copyAriaLabel, copyDefaultAriaLabel, showCopyButton, textToCopy]);
   return {
     innerTextRef: innerTextRef,
     copyButton: copyButton

package/es/components/drag_and_drop/draggable.js

@@ -20,7 +20,7 @@ import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import { Draggable } from '@hello-pangea/dnd';
 import classNames from 'classnames';
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { EuiDroppableContext } from './droppable';
 import { euiDraggableStyles, euiDraggableItemStyles } from './draggable.styles';
 import { EuiPortal } from '../portal';
@@ -48,8 +48,7 @@ export var EuiDraggable = function EuiDraggable(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = useContext(EuiDroppableContext),
     cloneItems = _useContext.cloneItems;
-  var euiTheme = useEuiTheme();
-  var styles = euiDraggableStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiDraggableStyles);
   var hasCustomDragHandle = customDragHandle !== false;
   return ___EmotionJSX(Draggable, _extends({
     draggableId: draggableId,

package/es/components/drag_and_drop/droppable.js

@@ -14,7 +14,7 @@ import React, { useContext } from 'react';
 import PropTypes from "prop-types";
 import { Droppable } from '@hello-pangea/dnd';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiPanel } from '../panel';
 import { EuiDragDropContextContext } from './drag_drop_context';
 import { euiDroppableStyles } from './droppable.styles';
@@ -47,8 +47,7 @@ export var EuiDroppable = function EuiDroppable(_ref) {
   var _useContext = useContext(EuiDragDropContextContext),
     isDraggingType = _useContext.isDraggingType;
   var dropIsDisabled = cloneDraggables ? true : isDropDisabled;
-  var euiTheme = useEuiTheme();
-  var styles = euiDroppableStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiDroppableStyles);
   return ___EmotionJSX(Droppable, _extends({
     isDropDisabled: dropIsDisabled,
     droppableId: droppableId,

package/es/components/error_boundary/error_boundary.js

@@ -27,10 +27,10 @@ function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiTitle } from '../title';
 import { EuiCodeBlock } from '../code';
 import { EuiI18n } from '../i18n';
-import { useEuiTheme } from '../../services';
 import { euiErrorBoundaryStyles } from './error_boundary.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiErrorBoundary = /*#__PURE__*/function (_Component) {
@@ -109,8 +109,7 @@ export var EuiErrorMessage = function EuiErrorMessage(_ref) {
     className = _ref.className,
     dataTestSubj = _ref['data-test-subj'],
     rest = _objectWithoutProperties(_ref, _excluded2);
-  var euiTheme = useEuiTheme();
-  var styles = euiErrorBoundaryStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiErrorBoundaryStyles);
   return ___EmotionJSX("div", _extends({
     css: styles.euiErrorBoundary,
     className: classNames('euiErrorBoundary', className),

package/es/components/form/range/range_draggable.js

@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useCallback, useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useMouseMove, useEuiTheme } from '../../../services';
+import { useMouseMove, useEuiTheme, useEuiMemoizedStyles } from '../../../services';
 import { logicalStyles } from '../../../global_styling';
 import { euiRangeDraggableStyles, euiRangeDraggableInnerStyles } from './range_draggable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -51,9 +51,9 @@ export var EuiRangeDraggable = function EuiRangeDraggable(_ref) {
     handleMouseDown = _useMouseMove2[0],
     handleInteraction = _useMouseMove2[1];
   var classes = classNames('euiRangeDraggable', className);
-  var styles = euiRangeDraggableStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiRangeDraggableStyles);
   var cssStyles = [styles.euiRangeDraggable, showTicks && styles.hasTicks, disabled && styles.disabled];
-  var innerStyles = euiRangeDraggableInnerStyles(euiTheme);
+  var innerStyles = useEuiMemoizedStyles(euiRangeDraggableInnerStyles);
   var cssInnerStyles = [innerStyles.euiRangeDraggable__inner, disabled ? styles.disabled : innerStyles.enabled];
   var commonProps = {
     className: classes,

package/es/components/health/health.js

@@ -13,10 +13,10 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
-import { euiHealthStyles } from './health.styles';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiIcon } from '../icon';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { euiHealthStyles } from './health.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TEXT_SIZES = ['xs', 's', 'm', 'inherit'];
 export var EuiHealth = function EuiHealth(_ref) {
@@ -26,8 +26,7 @@ export var EuiHealth = function EuiHealth(_ref) {
     _ref$textSize = _ref.textSize,
     textSize = _ref$textSize === void 0 ? 's' : _ref$textSize,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiHealthStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiHealthStyles);
   var cssStyles = [styles.euiHealth, styles[textSize]];
   var classes = classNames('euiHealth', className);
   return ___EmotionJSX("div", _extends({

package/es/components/inline_edit/inline_edit_form.js

@@ -28,7 +28,7 @@ import { euiFormVariables } from '../form/form.styles';
 import { EuiButtonIcon, EuiButtonEmpty } from '../button';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { EuiSkeletonLoading, EuiSkeletonRectangle } from '../skeleton';
-import { useEuiTheme, useCombinedRefs, keys } from '../../services';
+import { useEuiMemoizedStyles, useCombinedRefs, keys } from '../../services';
 import { EuiI18n, useEuiI18n } from '../i18n';
 import { useGeneratedHtmlId } from '../../services/accessibility';
 import { euiInlineEditReadModeStyles } from './inline_edit_form.styles';
@@ -71,10 +71,9 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     isReadOnly = _ref.isReadOnly,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiInlineEdit', className);
-  var euiTheme = useEuiTheme();
-  var _euiFormVariables = euiFormVariables(euiTheme),
-    controlHeight = _euiFormVariables.controlHeight,
-    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  var _useEuiMemoizedStyles = useEuiMemoizedStyles(euiFormVariables),
+    controlHeight = _useEuiMemoizedStyles.controlHeight,
+    controlCompressedHeight = _useEuiMemoizedStyles.controlCompressedHeight;
   var loadingSkeletonSize = sizes.compressed ? controlCompressedHeight : controlHeight;
   var defaultSaveButtonAriaLabel = useEuiI18n('euiInlineEditForm.saveButtonAriaLabel', 'Save edit');
   var defaultCancelButtonAriaLabel = useEuiI18n('euiInlineEditForm.cancelButtonAriaLabel', 'Cancel edit');
@@ -109,7 +108,7 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
       return isEditing ? editModeValue : readModeValue || placeholder;
     }
   }, [controlledValue, editModeValue, readModeValue, isEditing, placeholder]);
-  var readModeStyles = euiInlineEditReadModeStyles(euiTheme);
+  var readModeStyles = useEuiMemoizedStyles(euiInlineEditReadModeStyles);
   var readModeCssStyles = [readModeStyles.euiInlineEditReadMode, isReadOnly && readModeStyles.isReadOnly, placeholder && !readModeValue && readModeStyles.hasPlaceholder];
   var activateEditMode = function activateEditMode() {
     setIsEditing(true);

package/es/components/inline_edit/inline_edit_text.js

@@ -19,9 +19,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiText } from '../text';
 import { EuiInlineEditForm, SMALL_SIZE_FORM, MEDIUM_SIZE_FORM } from './inline_edit_form';
-import { useEuiTheme } from '../../services';
 import { euiInlineEditTextStyles } from './inline_edit_text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiInlineEditText = function EuiInlineEditText(_ref) {
@@ -32,8 +32,7 @@ export var EuiInlineEditText = function EuiInlineEditText(_ref) {
     isReadOnly = _ref.isReadOnly,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiInlineEditText', className);
-  var theme = useEuiTheme();
-  var styles = euiInlineEditTextStyles(theme);
+  var styles = useEuiMemoizedStyles(euiInlineEditTextStyles);
   var cssStyles = [styles.euiInlineEditText, styles.fontSize[size]];
   var isSmallSize = ['xs', 's'].includes(size);
   var sizes = isSmallSize ? SMALL_SIZE_FORM : MEDIUM_SIZE_FORM;

package/es/components/inline_edit/inline_edit_title.js

@@ -19,9 +19,9 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiTitle } from '../title';
 import { EuiInlineEditForm, SMALL_SIZE_FORM, MEDIUM_SIZE_FORM } from './inline_edit_form';
-import { useEuiTheme } from '../../services';
 import { euiInlineEditTitleStyles } from './inline_edit_title.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span'];
@@ -34,8 +34,7 @@ export var EuiInlineEditTitle = function EuiInlineEditTitle(_ref) {
     isReadOnly = _ref.isReadOnly,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiInlineEditTitle', className);
-  var theme = useEuiTheme();
-  var styles = euiInlineEditTitleStyles(theme);
+  var styles = useEuiMemoizedStyles(euiInlineEditTitleStyles);
   var cssStyles = [styles.euiInlineEditTitle, styles.fontSize[size]];
   var H = heading;
   var isSmallSize = ['xxxs', 'xxs', 'xs', 's'].includes(size);

package/es/components/key_pad_menu/key_pad_menu.js

@@ -14,8 +14,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiFormLabel } from '../form/form_label/form_label';
-import { useEuiTheme } from '../../services';
 import { euiKeyPadMenuStyles } from './key_pad_menu.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
@@ -26,8 +26,7 @@ export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var hasCheckableConfig = _typeof(checkable) === 'object';
   var classes = classNames('euiKeyPadMenu', className);
-  var theme = useEuiTheme();
-  var styles = euiKeyPadMenuStyles(theme);
+  var styles = useEuiMemoizedStyles(euiKeyPadMenuStyles);
   var cssStyles = [styles.euiKeyPadMenu];
   var legendCssStyles = [styles.euiKeyPadMenu__legend, hasCheckableConfig && (checkable === null || checkable === void 0 || (_checkable$legendProp = checkable.legendProps) === null || _checkable$legendProp === void 0 ? void 0 : _checkable$legendProp.css)];
   var legend = hasCheckableConfig && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({}, checkable.legendProps, {

package/es/components/key_pad_menu/key_pad_menu_item.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme, getSecureRelForTarget, useGeneratedHtmlId } from '../../services';
+import { useEuiMemoizedStyles, getSecureRelForTarget, useGeneratedHtmlId } from '../../services';
 import { EuiBetaBadge } from '../badge/beta_badge';
 import { EuiRadio, EuiCheckbox } from '../form';
 import { validateHref } from '../../services/security/href_validator';
@@ -43,8 +43,7 @@ export var EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var isHrefValid = !href || validateHref(href);
   var isDisabled = disabled || _isDisabled || !isHrefValid;
-  var euiTheme = useEuiTheme();
-  var styles = euiKeyPadMenuItemStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiKeyPadMenuItemStyles);
   var cssStyles = [styles.euiKeyPadMenuItem, !isDisabled ? styles.enabled : styles.disabled.disabled, isSelected && (!isDisabled ? styles.selected : styles.disabled.selected)];
   var classes = classNames('euiKeyPadMenuItem', className);
   var Element = href && !isDisabled ? 'a' : 'button';
@@ -52,9 +51,7 @@ export var EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_ref) {
   var itemId = useGeneratedHtmlId({
     conditionalId: id
   });
-  var childStyles = useMemo(function () {
-    return euiKeyPadMenuItemChildStyles(euiTheme);
-  }, [euiTheme]);
+  var childStyles = useEuiMemoizedStyles(euiKeyPadMenuItemChildStyles);
   var checkableElement = useMemo(function () {
     if (!checkable) return;
     var cssStyles = [childStyles.euiKeyPadMenuItem__checkableInput, !isSelected && isDisabled && childStyles.hideCheckableInput, !isSelected && !isDisabled && childStyles.showCheckableInputOnInteraction];

package/es/components/mark/mark.js

@@ -13,8 +13,8 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
-import { useEuiTheme } from '../../services';
 import { euiMarkStyles, euiMarkScreenReaderStyles } from './mark.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiMark = function EuiMark(_ref) {
@@ -24,8 +24,7 @@ export var EuiMark = function EuiMark(_ref) {
     hasScreenReaderHelpText = _ref$hasScreenReaderH === void 0 ? true : _ref$hasScreenReaderH,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiMark', className);
-  var euiTheme = useEuiTheme();
-  var styles = euiMarkStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiMarkStyles);
   var highlightStart = useEuiI18n('euiMark.highlightStart', 'highlight start');
   var highlightEnd = useEuiI18n('euiMark.highlightEnd', 'highlight end');
   var screenReaderStyles = useMemo(function () {

package/es/components/overlay_mask/overlay_mask.js

@@ -24,7 +24,7 @@ import PropTypes from "prop-types";
 import { cx } from '@emotion/css';
 import { Global } from '@emotion/react';
 import { keysOf } from '../common';
-import { useCombinedRefs, useEuiTheme } from '../../services';
+import { useCombinedRefs, useEuiMemoizedStyles } from '../../services';
 import { EuiPortal } from '../portal';
 import { euiOverlayMaskStyles } from './overlay_mask.styles';
 import { euiOverlayMaskBodyStyles } from './overlay_mask_body.styles';
@@ -41,8 +41,7 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
     overlayMaskNode = _useState2[0],
     setOverlayMaskNode = _useState2[1];
   var combinedMaskRef = useCombinedRefs([setOverlayMaskNode, maskRef]);
-  var euiTheme = useEuiTheme();
-  var styles = euiOverlayMaskStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiOverlayMaskStyles);
   var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
   useEffect(function () {
     if (!overlayMaskNode) return;

package/es/components/popover/popover.js

@@ -125,11 +125,13 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
     });
     _defineProperty(_this, "handleStrandedFocus", function () {
       _this.strandedFocusTimeout = window.setTimeout(function () {
+        var _this$panel;
         // If `returnFocus` failed and focus was stranded,
         // attempt to manually restore focus to the toggle button.
         // The stranded focus is either in most cases on body but
         // it will be on the panel instead on mount when isOpen=true
-        if (document.activeElement === document.body || document.activeElement === _this.panel) {
+        if (document.activeElement === document.body || (_this$panel = _this.panel) !== null && _this$panel !== void 0 && _this$panel.contains(document.activeElement) // if focus is on OR within this.panel
+        ) {
           if (!_this.button) return;
           var focusableItems = focusable(_this.button);
           if (!focusableItems.length) return;

package/es/components/search_bar/filters/field_value_selection_filter.js

@@ -38,6 +38,7 @@ import { EuiPopover, EuiPopoverTitle } from '../../popover';
 import { EuiFilterButton } from '../../filter_group';
 import { euiFilterGroupStyles } from '../../filter_group/filter_group.styles';
 import { EuiSelectable } from '../../selectable';
+import { EuiI18n } from '../../i18n';
 import { Query } from '../query';
 import { Operator } from '../query/ast';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -288,14 +289,21 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
       }) : false;
       var activeItemsCount = this.state.activeItemsCount;
       var active = (activeTop || activeItem) && activeItemsCount > 0;
-      var button = ___EmotionJSX(EuiFilterButton, {
-        iconType: "arrowDown",
-        iconSide: "right",
-        onClick: this.onButtonClick.bind(this),
-        hasActiveFilters: active,
-        numActiveFilters: active ? activeItemsCount : undefined,
-        grow: true
-      }, config.name);
+      var button = ___EmotionJSX(EuiI18n, {
+        token: "euiFieldValueSelectionFilter.buttonLabelHint",
+        default: "Selection"
+      }, function (buttonLabelHint) {
+        var ariaLabel = "".concat(config.name, " ").concat(buttonLabelHint);
+        return ___EmotionJSX(EuiFilterButton, {
+          iconType: "arrowDown",
+          iconSide: "right",
+          hasActiveFilters: active,
+          numActiveFilters: active ? activeItemsCount : undefined,
+          grow: true,
+          "aria-label": ariaLabel,
+          onClick: _this3.onButtonClick.bind(_this3)
+        }, config.name);
+      });
       var items = options ? options.map(function (option) {
         var _option$view;
         var optionField = option.field || config.field;
@@ -353,7 +361,8 @@ export var FieldValueSelectionFilter = /*#__PURE__*/function (_Component) {
           errorMessage: _this3.state.error,
           noMatchesMessage: config.noOptionsMessage,
           listProps: {
-            isVirtualized: isOverSearchThreshold || false
+            isVirtualized: isOverSearchThreshold || false,
+            autoFocus: true
           },
           onChange: function onChange(options, event, changedOption) {
             if (changedOption.data) {

package/es/components/search_bar/search_bar.a11y.js

@@ -202,7 +202,6 @@ describe('EuiSearchBar', function () {
     it('has zero violations after filtering by Tags', function () {
       cy.get('button.euiButtonEmpty').last().focus();
       cy.realPress('Enter');
-      cy.realPress('Tab');
       cy.realPress('ArrowDown');
       cy.realPress('Enter');
       cy.realPress('Escape');

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

@@ -1,6 +1,6 @@
 var _excluded = ["data"],
   _excluded2 = ["label", "isGroupLabel", "checked", "disabled", "prepend", "append", "ref", "key", "searchableLabel", "data", "truncationProps"],
-  _excluded3 = ["className", "options", "searchValue", "onOptionClick", "renderOption", "height", "windowProps", "rowHeight", "activeOptionIndex", "makeOptionId", "showIcons", "singleSelection", "visibleOptions", "allowExclusions", "bordered", "paddingSize", "searchable", "onFocusBadge", "listId", "setActiveOptionIndex", "aria-label", "aria-labelledby", "aria-describedby", "role", "isPreFiltered", "isVirtualized", "textWrap", "truncationProps"];
+  _excluded3 = ["className", "options", "searchValue", "onOptionClick", "renderOption", "height", "windowProps", "rowHeight", "activeOptionIndex", "makeOptionId", "showIcons", "singleSelection", "visibleOptions", "allowExclusions", "bordered", "paddingSize", "searchable", "onFocusBadge", "listId", "setActiveOptionIndex", "aria-label", "aria-labelledby", "aria-describedby", "role", "isPreFiltered", "isVirtualized", "textWrap", "truncationProps", "autoFocus"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
@@ -71,6 +71,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         listId = _this$props.listId,
         searchable = _this$props.searchable,
         singleSelection = _this$props.singleSelection,
+        autoFocus = _this$props.autoFocus,
         ariaLabel = _this$props['aria-label'],
         ariaLabelledby = _this$props['aria-labelledby'],
         ariaDescribedby = _this$props['aria-describedby'];
@@ -91,6 +92,13 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         if (typeof ariaDescribedby === 'string') {
           ref.setAttribute('aria-describedby', ariaDescribedby);
         }
+        if (autoFocus === true) {
+          // manually focus listbox once available
+          // use last stack execution to prevent potential focus order issues
+          setTimeout(function () {
+            return ref.focus();
+          });
+        }
       }
     });
     // This utility is necessary to exclude group labels from the aria set count
@@ -544,6 +552,7 @@ export var EuiSelectableList = /*#__PURE__*/function (_Component) {
         isVirtualized = _this$props11.isVirtualized,
         textWrap = _this$props11.textWrap,
         truncationProps = _this$props11.truncationProps,
+        autoFocus = _this$props11.autoFocus,
         rest = _objectWithoutProperties(_this$props11, _excluded3);
       var heightIsFull = forcedHeight === 'full';
       var classes = classNames('euiSelectableList', className);

package/es/components/side_nav/side_nav_item.js

@@ -19,7 +19,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React, { useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme, getSecureRelForTarget } from '../../services';
+import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../services';
 import { validateHref } from '../../services/security/href_validator';
 import { EuiInnerText } from '../inner_text';
 import { EuiIcon } from '../icon';
@@ -90,7 +90,6 @@ export var EuiSideNavItem = function EuiSideNavItem(_ref2) {
     buttonClassName = _ref2.buttonClassName,
     childrenOnly = _ref2.childrenOnly,
     rest = _objectWithoutProperties(_ref2, _excluded2);
-  var euiTheme = useEuiTheme();
   var isHrefValid = !_href || validateHref(_href);
   var href = isHrefValid ? _href : '';
 
@@ -119,14 +118,14 @@ export var EuiSideNavItem = function EuiSideNavItem(_ref2) {
     'euiSideNavItem--emphasized': emphasize,
     'euiSideNavItem-hasChildItems': hasChildItems
   }, className);
-  var styles = euiSideNavItemStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiSideNavItemStyles);
   var cssStyles = [styles.euiSideNavItem, isRoot && styles.root, isTrunk && styles.trunk, isBranch && styles.branch, emphasize && styles.emphasized, css];
   var itemsStyles = hasChildItems && [styles.items.euiSideNavItem__items, isRoot && icon && styles.items.rootWithIcon, isTrunk && styles.items.trunk, isBranch && styles.items.branch];
   var buttonClasses = classNames('euiSideNavItemButton', {
     'euiSideNavItemButton-isOpen': depth > 0 && itemIsOpen && !isSelected,
     'euiSideNavItemButton-isSelected': isSelected
   }, buttonClassName);
-  var buttonStyles = euiSideNavItemButtonStyles(euiTheme);
+  var buttonStyles = useEuiMemoizedStyles(euiSideNavItemButtonStyles);
   var buttonCssStyles = [buttonStyles.euiSideNavItemButton, isSelected && buttonStyles.selected, emphasize && buttonStyles.emphasized, isRoot && buttonStyles.root, isTrunk && buttonStyles.trunk, isBranch && buttonStyles.branch];
   var labelCssStyles = [buttonStyles.label.euiSideNavItemButton__label, isRoot && buttonStyles.label.root];
   return ___EmotionJSX("div", {

package/es/components/tabs/tab.js

@@ -61,6 +61,7 @@ export var EuiTab = function EuiTab(_ref) {
     return ___EmotionJSX("a", _extends({
       role: "tab",
       "aria-selected": !!isSelected,
+      tabIndex: isSelected ? 0 : -1,
       className: classes,
       css: cssTabStyles,
       href: href,
@@ -74,6 +75,7 @@ export var EuiTab = function EuiTab(_ref) {
   return ___EmotionJSX("button", _extends({
     role: "tab",
     "aria-selected": !!isSelected,
+    tabIndex: isSelected ? 0 : -1,
     type: "button",
     className: classes,
     css: cssTabStyles,

package/es/components/tabs/tabs.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 import React, { forwardRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiMemoizedStyles } from '../../services';
+import { keys, useEuiMemoizedStyles } from '../../services';
 import { euiTabsStyles } from './tabs.styles';
 import { EuiTabsContext } from './tabs_context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -31,10 +31,26 @@ export var EuiTabs = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var classes = classNames('euiTabs', className);
   var styles = useEuiMemoizedStyles(euiTabsStyles);
   var cssStyles = [styles.euiTabs, styles[size], bottomBorder && styles.bottomBorder];
+  var handleKeyDown = function handleKeyDown(event) {
+    var tablist = event.currentTarget;
+    var tabs = tablist === null || tablist === void 0 ? void 0 : tablist.querySelectorAll('[role="tab"]:not(:disabled, [inert])');
+    if (!(tabs !== null && tabs !== void 0 && tabs.length)) return;
+    var currentIndex = Array.from(tabs).findIndex(function (tab) {
+      return tab.matches(':focus');
+    });
+    if (event.key === keys.ARROW_LEFT) {
+      var previousIndex = (currentIndex === 0 ? tabs.length : currentIndex) - 1;
+      tabs[previousIndex].focus();
+    } else if (event.key === keys.ARROW_RIGHT) {
+      var nextIndex = currentIndex === tabs.length - 1 ? 0 : currentIndex + 1;
+      tabs[nextIndex].focus();
+    }
+  };
   return ___EmotionJSX("div", _extends({
     ref: ref,
     className: classes,
-    css: cssStyles
+    css: cssStyles,
+    onKeyDown: handleKeyDown
   }, children && {
     role: 'tablist'
   }, rest), ___EmotionJSX(EuiTabsContext.Provider, {