@elastic/eui 98.0.0 → 98.1.0

package/optimize/lib/components/badge/beta_badge/beta_badge.js

@@ -23,7 +23,7 @@ var _excluded = ["className", "label", "color", "tooltipContent", "tooltipPositi
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var COLORS = exports.COLORS = ['accent', 'subdued', 'hollow'];
+var COLORS = exports.COLORS = ['accent', 'subdued', 'hollow', 'warning'];
 var SIZES = exports.SIZES = ['s', 'm'];
 var ALIGNMENTS = exports.ALIGNMENTS = ['baseline', 'middle'];
 

package/optimize/lib/components/badge/beta_badge/beta_badge.styles.js

@@ -50,6 +50,7 @@ var euiBetaBadgeStyles = exports.euiBetaBadgeStyles = function euiBetaBadgeStyle
     accent: /*#__PURE__*/(0, _react.css)(badgeColors.accentText, ";label:accent;"),
     subdued: /*#__PURE__*/(0, _react.css)(badgeColors.subdued, ";label:subdued;"),
     hollow: /*#__PURE__*/(0, _react.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__*/(0, _react.css)(badgeColors.warning, ";label:warning;"),
     // Font sizes
     m: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";line-height:", euiTheme.size.l, ";;label:m;"),
     s: /*#__PURE__*/(0, _react.css)("font-size:0.625rem;line-height:", (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {

package/optimize/lib/components/card/card.styles.js

@@ -128,7 +128,7 @@ var euiCardTextStyles = exports.euiCardTextStyles = function euiCardTextStyles(e
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiCard__text: _ref,
-    interactive: /*#__PURE__*/(0, _react.css)("outline-offset:", euiTheme.size.xxs, ";.euiCard:hover &,.euiCard:focus &,&:hover,&:focus{text-decoration:underline;}", _global_styling.euiSupportsHas, "{outline:none!important;};label:interactive;"),
+    interactive: /*#__PURE__*/(0, _react.css)("outline-offset:", euiTheme.size.xxs, ";.euiCard:hover &,.euiCard:focus &,&:hover,&:focus{text-decoration:underline;};label:interactive;"),
     aligned: {
       center: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('center'), ";;label:center;"),
       left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('left'), ";;label:left;"),
@@ -142,7 +142,7 @@ var euiCardBetaBadgeStyles = exports.euiCardBetaBadgeStyles = function euiCardBe
   var padding = (0, _global_styling.euiPaddingSize)(euiThemeContext, paddingSize);
   return {
     hasBetaBadge: /*#__PURE__*/(0, _react.css)("position:relative;overflow:visible;", (0, _global_styling.logicalCSS)('padding-top', "calc(".concat(padding, " + ").concat(euiTheme.size.s, ")")), ";;label:hasBetaBadge;"),
-    euiCard__betaBadgeAnchor: /*#__PURE__*/(0, _react.css)("line-height:0;position:absolute;", (0, _global_styling.logicalCSS)('top', '0'), " ", (0, _global_styling.logicalCSS)('left', '50%'), " transform:translateX(-50%) translateY(-50%);z-index:3;", (0, _global_styling.logicalCSS)('min-width', 'min(30%, 112px)'), " ", (0, _global_styling.logicalCSS)('max-width', "calc(100% - (".concat(padding, " * 2))")), ";;label:euiCard__betaBadgeAnchor;"),
+    euiCard__betaBadgeAnchor: /*#__PURE__*/(0, _react.css)("line-height:0;position:absolute;", (0, _global_styling.logicalCSS)('top', '0'), " ", (0, _global_styling.logicalCSS)('left', '50%'), " transform:translateX(-50%) translateY(-50%);z-index:3;", (0, _global_styling.logicalCSS)('min-width', "min(30%, ".concat(euiTheme.base * 7, "px)")), " ", (0, _global_styling.logicalCSS)('max-width', "calc(100% - (".concat(padding, " * 2))")), ";;label:euiCard__betaBadgeAnchor;"),
     euiCard__betaBadge: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiCard__betaBadge;")
   };
 };

package/optimize/lib/components/code/code_block.js

@@ -22,7 +22,7 @@ var _code_block_controls = require("./code_block_controls");
 var _code_block_virtualized = require("./code_block_virtualized");
 var _code_block = require("./code_block.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -56,6 +56,7 @@ var EuiCodeBlock = exports.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,
@@ -96,6 +97,7 @@ var EuiCodeBlock = exports.EuiCodeBlock = function EuiCodeBlock(_ref) {
     return !!(_isVirtualized && Array.isArray(data));
   }, [_isVirtualized, data]);
   var _useCopy = (0, _code_block_copy.useCopy)({
+      copyAriaLabel: copyAriaLabel,
       isCopyable: isCopyable,
       isVirtualized: isVirtualized,
       children: children

package/optimize/lib/components/code/code_block_copy.js

@@ -28,7 +28,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  * Hook that returns copy-related state/logic/utils
  */
 var useCopy = exports.useCopy = function useCopy(_ref) {
-  var isCopyable = _ref.isCopyable,
+  var copyAriaLabel = _ref.copyAriaLabel,
+    isCopyable = _ref.isCopyable,
     isVirtualized = _ref.isVirtualized,
     children = _ref.children;
   var _useInnerText = (0, _inner_text.useInnerText)(''),
@@ -51,7 +52,7 @@ var useCopy = exports.useCopy = function useCopy(_ref) {
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
   var showCopyButton = isCopyable && textToCopy;
-  var copyAriaLabel = (0, _i18n.useEuiI18n)('euiCodeBlockCopy.copy', 'Copy');
+  var copyDefaultAriaLabel = (0, _i18n.useEuiI18n)('euiCodeBlockCopy.copy', 'Copy');
   var copyButton = (0, _react.useMemo)(function () {
     return showCopyButton ? (0, _react2.jsx)("div", {
       className: "euiCodeBlock__copyButton"
@@ -62,11 +63,11 @@ var useCopy = exports.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/optimize/lib/components/drag_and_drop/draggable.js

@@ -52,8 +52,7 @@ var EuiDraggable = exports.EuiDraggable = function EuiDraggable(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_droppable.EuiDroppableContext),
     cloneItems = _useContext.cloneItems;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _draggable.euiDraggableStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_draggable.euiDraggableStyles);
   var hasCustomDragHandle = customDragHandle !== false;
   return (0, _react2.jsx)(_dnd.Draggable, (0, _extends2.default)({
     draggableId: draggableId,

package/optimize/lib/components/drag_and_drop/droppable.js

@@ -54,8 +54,7 @@ var EuiDroppable = exports.EuiDroppable = function EuiDroppable(_ref) {
   var _useContext = (0, _react.useContext)(_drag_drop_context.EuiDragDropContextContext),
     isDraggingType = _useContext.isDraggingType;
   var dropIsDisabled = cloneDraggables ? true : isDropDisabled;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _droppable.euiDroppableStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_droppable.euiDroppableStyles);
   return (0, _react2.jsx)(_dnd.Droppable, (0, _extends2.default)({
     isDropDisabled: dropIsDisabled,
     droppableId: droppableId,

package/optimize/lib/components/error_boundary/error_boundary.js

@@ -15,10 +15,10 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _title = require("../title");
 var _code = require("../code");
 var _i18n = require("../i18n");
-var _services = require("../../services");
 var _error_boundary = require("./error_boundary.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children"],
@@ -94,8 +94,7 @@ var EuiErrorMessage = exports.EuiErrorMessage = function EuiErrorMessage(_ref) {
     className = _ref.className,
     dataTestSubj = _ref['data-test-subj'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded2);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _error_boundary.euiErrorBoundaryStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_error_boundary.euiErrorBoundaryStyles);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: styles.euiErrorBoundary,
     className: (0, _classnames.default)('euiErrorBoundary', className),

package/optimize/lib/components/form/range/range_draggable.js

@@ -53,9 +53,9 @@ var EuiRangeDraggable = exports.EuiRangeDraggable = function EuiRangeDraggable(_
     handleMouseDown = _useMouseMove2[0],
     handleInteraction = _useMouseMove2[1];
   var classes = (0, _classnames.default)('euiRangeDraggable', className);
-  var styles = (0, _range_draggable.euiRangeDraggableStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_range_draggable.euiRangeDraggableStyles);
   var cssStyles = [styles.euiRangeDraggable, showTicks && styles.hasTicks, disabled && styles.disabled];
-  var innerStyles = (0, _range_draggable.euiRangeDraggableInnerStyles)(euiTheme);
+  var innerStyles = (0, _services.useEuiMemoizedStyles)(_range_draggable.euiRangeDraggableInnerStyles);
   var cssInnerStyles = [innerStyles.euiRangeDraggable__inner, disabled ? styles.disabled : innerStyles.enabled];
   var commonProps = {
     className: classes,

package/optimize/lib/components/health/health.js

@@ -10,9 +10,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
-var _health = require("./health.styles");
 var _icon = require("../icon");
 var _flex = require("../flex");
+var _health = require("./health.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "color", "textSize"];
 /*
@@ -30,8 +30,7 @@ var EuiHealth = exports.EuiHealth = function EuiHealth(_ref) {
     _ref$textSize = _ref.textSize,
     textSize = _ref$textSize === void 0 ? 's' : _ref$textSize,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _health.euiHealthStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_health.euiHealthStyles);
   var cssStyles = [styles.euiHealth, styles[textSize]];
   var classes = (0, _classnames.default)('euiHealth', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({

package/optimize/lib/components/inline_edit/inline_edit_form.js

@@ -69,10 +69,9 @@ var EuiInlineEditForm = exports.EuiInlineEditForm = function EuiInlineEditForm(_
     isReadOnly = _ref.isReadOnly,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiInlineEdit', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var _euiFormVariables = (0, _form2.euiFormVariables)(euiTheme),
-    controlHeight = _euiFormVariables.controlHeight,
-    controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
+  var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_form2.euiFormVariables),
+    controlHeight = _useEuiMemoizedStyles.controlHeight,
+    controlCompressedHeight = _useEuiMemoizedStyles.controlCompressedHeight;
   var loadingSkeletonSize = sizes.compressed ? controlCompressedHeight : controlHeight;
   var defaultSaveButtonAriaLabel = (0, _i18n.useEuiI18n)('euiInlineEditForm.saveButtonAriaLabel', 'Save edit');
   var defaultCancelButtonAriaLabel = (0, _i18n.useEuiI18n)('euiInlineEditForm.cancelButtonAriaLabel', 'Cancel edit');
@@ -107,7 +106,7 @@ var EuiInlineEditForm = exports.EuiInlineEditForm = function EuiInlineEditForm(_
       return isEditing ? editModeValue : readModeValue || placeholder;
     }
   }, [controlledValue, editModeValue, readModeValue, isEditing, placeholder]);
-  var readModeStyles = (0, _inline_edit_form.euiInlineEditReadModeStyles)(euiTheme);
+  var readModeStyles = (0, _services.useEuiMemoizedStyles)(_inline_edit_form.euiInlineEditReadModeStyles);
   var readModeCssStyles = [readModeStyles.euiInlineEditReadMode, isReadOnly && readModeStyles.isReadOnly, placeholder && !readModeValue && readModeStyles.hasPlaceholder];
   var activateEditMode = function activateEditMode() {
     setIsEditing(true);

package/optimize/lib/components/inline_edit/inline_edit_text.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _text = require("../text");
 var _inline_edit_form = require("./inline_edit_form");
-var _services = require("../../services");
 var _inline_edit_text = require("./inline_edit_text.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "size", "readModeProps", "isReadOnly"];
@@ -36,8 +36,7 @@ var EuiInlineEditText = exports.EuiInlineEditText = function EuiInlineEditText(_
     isReadOnly = _ref.isReadOnly,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiInlineEditText', className);
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _inline_edit_text.euiInlineEditTextStyles)(theme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_inline_edit_text.euiInlineEditTextStyles);
   var cssStyles = [styles.euiInlineEditText, styles.fontSize[size]];
   var isSmallSize = ['xs', 's'].includes(size);
   var sizes = isSmallSize ? _inline_edit_form.SMALL_SIZE_FORM : _inline_edit_form.MEDIUM_SIZE_FORM;

package/optimize/lib/components/inline_edit/inline_edit_title.js

@@ -11,9 +11,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _title = require("../title");
 var _inline_edit_form = require("./inline_edit_form");
-var _services = require("../../services");
 var _inline_edit_title = require("./inline_edit_title.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "size", "heading", "readModeProps", "isReadOnly"];
@@ -38,8 +38,7 @@ var EuiInlineEditTitle = exports.EuiInlineEditTitle = function EuiInlineEditTitl
     isReadOnly = _ref.isReadOnly,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiInlineEditTitle', className);
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _inline_edit_title.euiInlineEditTitleStyles)(theme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_inline_edit_title.euiInlineEditTitleStyles);
   var cssStyles = [styles.euiInlineEditTitle, styles.fontSize[size]];
   var H = heading;
   var isSmallSize = ['xxxs', 'xxs', 'xs', 's'].includes(size);

package/optimize/lib/components/key_pad_menu/key_pad_menu.js

@@ -10,8 +10,8 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _form_label = require("../form/form_label/form_label");
 var _services = require("../../services");
+var _form_label = require("../form/form_label/form_label");
 var _key_pad_menu = require("./key_pad_menu.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "checkable"];
@@ -30,8 +30,7 @@ var EuiKeyPadMenu = exports.EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var hasCheckableConfig = (0, _typeof2.default)(checkable) === 'object';
   var classes = (0, _classnames.default)('euiKeyPadMenu', className);
-  var theme = (0, _services.useEuiTheme)();
-  var styles = (0, _key_pad_menu.euiKeyPadMenuStyles)(theme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_key_pad_menu.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 ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({}, checkable.legendProps, {

package/optimize/lib/components/key_pad_menu/key_pad_menu_item.js

@@ -50,8 +50,7 @@ var EuiKeyPadMenuItem = exports.EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var isDisabled = disabled || _isDisabled || !isHrefValid;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _key_pad_menu_item.euiKeyPadMenuItemStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_key_pad_menu_item.euiKeyPadMenuItemStyles);
   var cssStyles = [styles.euiKeyPadMenuItem, !isDisabled ? styles.enabled : styles.disabled.disabled, isSelected && (!isDisabled ? styles.selected : styles.disabled.selected)];
   var classes = (0, _classnames.default)('euiKeyPadMenuItem', className);
   var Element = href && !isDisabled ? 'a' : 'button';
@@ -59,9 +58,7 @@ var EuiKeyPadMenuItem = exports.EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_
   var itemId = (0, _services.useGeneratedHtmlId)({
     conditionalId: id
   });
-  var childStyles = (0, _react.useMemo)(function () {
-    return (0, _key_pad_menu_item.euiKeyPadMenuItemChildStyles)(euiTheme);
-  }, [euiTheme]);
+  var childStyles = (0, _services.useEuiMemoizedStyles)(_key_pad_menu_item.euiKeyPadMenuItemChildStyles);
   var checkableElement = (0, _react.useMemo)(function () {
     if (!checkable) return;
     var cssStyles = [childStyles.euiKeyPadMenuItem__checkableInput, !isSelected && isDisabled && childStyles.hideCheckableInput, !isSelected && !isDisabled && childStyles.showCheckableInputOnInteraction];

package/optimize/lib/components/mark/mark.js

@@ -10,8 +10,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _i18n = require("../i18n");
 var _services = require("../../services");
+var _i18n = require("../i18n");
 var _mark = require("./mark.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "hasScreenReaderHelpText"];
@@ -31,8 +31,7 @@ var EuiMark = exports.EuiMark = function EuiMark(_ref) {
     hasScreenReaderHelpText = _ref$hasScreenReaderH === void 0 ? true : _ref$hasScreenReaderH,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiMark', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _mark.euiMarkStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_mark.euiMarkStyles);
   var highlightStart = (0, _i18n.useEuiI18n)('euiMark.highlightStart', 'highlight start');
   var highlightEnd = (0, _i18n.useEuiI18n)('euiMark.highlightEnd', 'highlight end');
   var screenReaderStyles = (0, _react.useMemo)(function () {

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

@@ -39,8 +39,7 @@ var EuiOverlayMask = exports.EuiOverlayMask = function EuiOverlayMask(_ref) {
     overlayMaskNode = _useState2[0],
     setOverlayMaskNode = _useState2[1];
   var combinedMaskRef = (0, _services.useCombinedRefs)([setOverlayMaskNode, maskRef]);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _overlay_mask.euiOverlayMaskStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_overlay_mask.euiOverlayMaskStyles);
   var cssStyles = (0, _css.cx)([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
   (0, _react.useEffect)(function () {
     if (!overlayMaskNode) return;

package/optimize/lib/components/popover/popover.js

@@ -119,11 +119,13 @@ var EuiPopover = exports.EuiPopover = /*#__PURE__*/function (_Component) {
     });
     (0, _defineProperty2.default)(_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 = (0, _tabbable.focusable)(_this.button);
           if (!focusableItems.length) return;

package/optimize/lib/components/search_bar/filters/field_value_selection_filter.js

@@ -23,6 +23,7 @@ var _popover = require("../../popover");
 var _filter_group = require("../../filter_group");
 var _filter_group2 = require("../../filter_group/filter_group.styles");
 var _selectable = require("../../selectable");
+var _i18n = require("../../i18n");
 var _query4 = require("../query");
 var _ast = require("../query/ast");
 var _react2 = require("@emotion/react");
@@ -283,14 +284,21 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
       }) : false;
       var activeItemsCount = this.state.activeItemsCount;
       var active = (activeTop || activeItem) && activeItemsCount > 0;
-      var button = (0, _react2.jsx)(_filter_group.EuiFilterButton, {
-        iconType: "arrowDown",
-        iconSide: "right",
-        onClick: this.onButtonClick.bind(this),
-        hasActiveFilters: active,
-        numActiveFilters: active ? activeItemsCount : undefined,
-        grow: true
-      }, config.name);
+      var button = (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiFieldValueSelectionFilter.buttonLabelHint",
+        default: "Selection"
+      }, function (buttonLabelHint) {
+        var ariaLabel = "".concat(config.name, " ").concat(buttonLabelHint);
+        return (0, _react2.jsx)(_filter_group.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;
@@ -348,7 +356,8 @@ var FieldValueSelectionFilter = exports.FieldValueSelectionFilter = /*#__PURE__*
           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/optimize/lib/components/search_bar/search_bar.a11y.js

@@ -207,7 +207,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/optimize/lib/components/selectable/selectable_list/selectable_list.js

@@ -28,7 +28,7 @@ var _selectable_list = require("./selectable_list.styles");
 var _react2 = require("@emotion/react");
 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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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; }
@@ -70,6 +70,7 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         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'];
@@ -90,6 +91,13 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         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
@@ -543,6 +551,7 @@ var EuiSelectableList = exports.EuiSelectableList = /*#__PURE__*/function (_Comp
         isVirtualized = _this$props11.isVirtualized,
         textWrap = _this$props11.textWrap,
         truncationProps = _this$props11.truncationProps,
+        autoFocus = _this$props11.autoFocus,
         rest = (0, _objectWithoutProperties2.default)(_this$props11, _excluded3);
       var heightIsFull = forcedHeight === 'full';
       var classes = (0, _classnames.default)('euiSelectableList', className);

package/optimize/lib/components/side_nav/side_nav_item.js

@@ -92,7 +92,6 @@ var EuiSideNavItem = exports.EuiSideNavItem = function EuiSideNavItem(_ref2) {
     buttonClassName = _ref2.buttonClassName,
     childrenOnly = _ref2.childrenOnly,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var euiTheme = (0, _services.useEuiTheme)();
   var isHrefValid = !_href || (0, _href_validator.validateHref)(_href);
   var href = isHrefValid ? _href : '';
 
@@ -121,14 +120,14 @@ var EuiSideNavItem = exports.EuiSideNavItem = function EuiSideNavItem(_ref2) {
     'euiSideNavItem--emphasized': emphasize,
     'euiSideNavItem-hasChildItems': hasChildItems
   }, className);
-  var styles = (0, _side_nav_item.euiSideNavItemStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_side_nav_item.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 = (0, _classnames.default)('euiSideNavItemButton', {
     'euiSideNavItemButton-isOpen': depth > 0 && itemIsOpen && !isSelected,
     'euiSideNavItemButton-isSelected': isSelected
   }, buttonClassName);
-  var buttonStyles = (0, _side_nav_item.euiSideNavItemButtonStyles)(euiTheme);
+  var buttonStyles = (0, _services.useEuiMemoizedStyles)(_side_nav_item.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 (0, _react2.jsx)("div", {

package/optimize/lib/components/tabs/tab.js

@@ -68,6 +68,7 @@ var EuiTab = exports.EuiTab = function EuiTab(_ref) {
     return (0, _react2.jsx)("a", (0, _extends2.default)({
       role: "tab",
       "aria-selected": !!isSelected,
+      tabIndex: isSelected ? 0 : -1,
       className: classes,
       css: cssTabStyles,
       href: href,
@@ -81,6 +82,7 @@ var EuiTab = exports.EuiTab = function EuiTab(_ref) {
   return (0, _react2.jsx)("button", (0, _extends2.default)({
     role: "tab",
     "aria-selected": !!isSelected,
+    tabIndex: isSelected ? 0 : -1,
     type: "button",
     className: classes,
     css: cssTabStyles,

package/optimize/lib/components/tabs/tabs.js

@@ -38,10 +38,26 @@ var EuiTabs = exports.EuiTabs = /*#__PURE__*/(0, _react.forwardRef)(function (_r
   var classes = (0, _classnames.default)('euiTabs', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_tabs.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 === _services.keys.ARROW_LEFT) {
+      var previousIndex = (currentIndex === 0 ? tabs.length : currentIndex) - 1;
+      tabs[previousIndex].focus();
+    } else if (event.key === _services.keys.ARROW_RIGHT) {
+      var nextIndex = currentIndex === tabs.length - 1 ? 0 : currentIndex + 1;
+      tabs[nextIndex].focus();
+    }
+  };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     ref: ref,
     className: classes,
-    css: cssStyles
+    css: cssStyles,
+    onKeyDown: handleKeyDown
   }, children && {
     role: 'tablist'
   }, rest), (0, _react2.jsx)(_tabs_context.EuiTabsContext.Provider, {

package/optimize/lib/components/text_diff/text_diff.js

@@ -46,8 +46,7 @@ var useEuiTextDiff = exports.useEuiTextDiff = function useEuiTextDiff(_ref) {
     return diff.main(beforeText, afterText);
   }, [beforeText, afterText, timeout]); // produces diff array
 
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _text_diff.euiTextDiffStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_text_diff.euiTextDiffStyles);
   var classes = (0, _classnames.default)('euiTextDiff', className);
   var rendereredHtml = (0, _react.useMemo)(function () {
     var html = [];

package/optimize/lib/components/toast/global_toast_list_item.js

@@ -21,11 +21,8 @@ var EuiGlobalToastListItem = exports.EuiGlobalToastListItem = function EuiGlobal
   var children = _ref.children,
     className = _ref.className,
     isDismissed = _ref.isDismissed;
-  var euiTheme = (0, _services.useEuiTheme)();
-  if (!children) {
-    return null;
-  }
-  var styles = (0, _global_toast_list.euiGlobalToastListItemStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_global_toast_list.euiGlobalToastListItemStyles);
+  if (!children) return null;
   var cssStyles = [styles.euiGlobalToastListItem, isDismissed && styles.dismissed];
   var classes = (0, _classnames.default)('euiGlobalToastListItem', children.props.className, className);
   return (0, _services.cloneElementWithCss)(children, _objectSpread(_objectSpread({}, children.props), {

package/optimize/lib/components/tour/_tour_footer.js

@@ -32,8 +32,7 @@ var EuiTourFooter = exports.EuiTourFooter = /*#__PURE__*/(0, _react.memo)(functi
     step = _ref.step,
     stepsTotal = _ref.stepsTotal,
     onFinish = _ref.onFinish;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var footerStyles = (0, _tour_footer.euiTourFooterStyles)(euiTheme);
+  var footerStyles = (0, _services.useEuiMemoizedStyles)(_tour_footer.euiTourFooterStyles);
   var customFooterAction = (0, _react.useMemo)(function () {
     if (!footerAction) return null;
     return Array.isArray(footerAction) ? (0, _react2.jsx)(_flex.EuiFlexGroup, {

package/optimize/lib/components/tour/_tour_header.js

@@ -25,8 +25,7 @@ var EuiTourHeader = exports.EuiTourHeader = /*#__PURE__*/(0, _react.memo)(functi
   var id = _ref.id,
     title = _ref.title,
     subtitle = _ref.subtitle;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var headerStyles = (0, _tour_header.euiTourHeaderStyles)(euiTheme);
+  var headerStyles = (0, _services.useEuiMemoizedStyles)(_tour_header.euiTourHeaderStyles);
   return (0, _react2.jsx)(_popover.EuiPopoverTitle, {
     css: headerStyles.euiTourHeader,
     className: "euiTourHeader",

package/optimize/lib/components/tour/tour_step.js

@@ -12,10 +12,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
-var _beacon = require("../beacon");
 var _popover = require("../popover");
-var _services = require("../../services");
+var _beacon = require("../beacon");
 var _tour_header = require("./_tour_header");
 var _tour_footer = require("./_tour_footer");
 var _tour = require("./tour.styles");
@@ -93,9 +93,8 @@ var EuiTourStep = exports.EuiTourStep = function EuiTourStep(_ref) {
   }, [anchor]);
   var anchorClasses = (0, _classnames.default)('euiTourAnchor', className);
   var popoverClasses = (0, _classnames.default)('euiTour', panelClassName);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var tourStyles = (0, _tour.euiTourStyles)(euiTheme);
-  var beaconStyles = (0, _tour.euiTourBeaconStyles)(euiTheme);
+  var tourStyles = (0, _services.useEuiMemoizedStyles)(_tour.euiTourStyles);
+  var beaconStyles = (0, _services.useEuiMemoizedStyles)(_tour.euiTourBeaconStyles);
   var beaconCss = [beaconStyles.euiTourBeacon, isStepOpen && beaconStyles.isOpen, popoverPosition && beaconStyles[popoverPosition]];
   var hasBeacon = decoration === 'beacon';
   var widthStyles = (0, _react.useMemo)(function () {

package/optimize/lib/components/tree_view/tree_view_item.js

@@ -38,8 +38,7 @@ var EuiTreeViewItem = exports.EuiTreeViewItem = /*#__PURE__*/(0, _react.memo)(fu
     buttonRef = _ref.buttonRef,
     wrapperProps = _ref.wrapperProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _tree_view_item.euiTreeViewItemStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_tree_view_item.euiTreeViewItemStyles);
   var wrapperClasses = (0, _classnames.default)('euiTreeView__node', {
     'euiTreeView__node--expanded': isExpanded
   }, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);