@elastic/eui 98.0.0 → 98.1.0

package/lib/components/error_boundary/error_boundary.js

@@ -8,10 +8,10 @@ exports.EuiErrorMessage = exports.EuiErrorBoundary = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"],
@@ -115,8 +115,7 @@ var EuiErrorMessage = exports.EuiErrorMessage = function EuiErrorMessage(_ref) {
     className = _ref.className,
     dataTestSubj = _ref['data-test-subj'],
     rest = _objectWithoutProperties(_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", _extends({
     css: styles.euiErrorBoundary,
     className: (0, _classnames.default)('euiErrorBoundary', className),

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

@@ -60,9 +60,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/lib/components/health/health.js

@@ -8,9 +8,9 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"];
 /*
@@ -32,8 +32,7 @@ var EuiHealth = exports.EuiHealth = function EuiHealth(_ref) {
     _ref$textSize = _ref.textSize,
     textSize = _ref$textSize === void 0 ? 's' : _ref$textSize,
     rest = _objectWithoutProperties(_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", _extends({

package/lib/components/inline_edit/inline_edit_form.js

@@ -77,10 +77,9 @@ var EuiInlineEditForm = exports.EuiInlineEditForm = function EuiInlineEditForm(_
     isReadOnly = _ref.isReadOnly,
     rest = _objectWithoutProperties(_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');
@@ -115,7 +114,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/lib/components/inline_edit/inline_edit_text.js

@@ -8,9 +8,9 @@ exports.EuiInlineEditText = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"];
@@ -40,8 +40,7 @@ var EuiInlineEditText = exports.EuiInlineEditText = function EuiInlineEditText(_
     isReadOnly = _ref.isReadOnly,
     rest = _objectWithoutProperties(_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/lib/components/inline_edit/inline_edit_title.js

@@ -8,9 +8,9 @@ exports.HEADINGS = exports.EuiInlineEditTitle = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"];
@@ -42,8 +42,7 @@ var EuiInlineEditTitle = exports.EuiInlineEditTitle = function EuiInlineEditTitl
     isReadOnly = _ref.isReadOnly,
     rest = _objectWithoutProperties(_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/lib/components/key_pad_menu/key_pad_menu.js

@@ -7,8 +7,8 @@ exports.EuiKeyPadMenu = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"];
@@ -32,8 +32,7 @@ var EuiKeyPadMenu = exports.EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var hasCheckableConfig = _typeof(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, _extends({}, checkable.legendProps, {

package/lib/components/key_pad_menu/key_pad_menu_item.js

@@ -52,8 +52,7 @@ var EuiKeyPadMenuItem = exports.EuiKeyPadMenuItem = function EuiKeyPadMenuItem(_
     rest = _objectWithoutProperties(_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';
@@ -61,9 +60,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/lib/components/mark/mark.js

@@ -8,8 +8,8 @@ exports.EuiMark = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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"];
@@ -33,8 +33,7 @@ var EuiMark = exports.EuiMark = function EuiMark(_ref) {
     hasScreenReaderHelpText = _ref$hasScreenReaderH === void 0 ? true : _ref$hasScreenReaderH,
     rest = _objectWithoutProperties(_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/lib/components/overlay_mask/overlay_mask.js

@@ -49,8 +49,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/lib/components/popover/popover.js

@@ -134,11 +134,13 @@ var EuiPopover = exports.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 = (0, _tabbable.focusable)(_this.button);
           if (!focusableItems.length) return;

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

@@ -12,6 +12,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");
@@ -295,14 +296,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;
@@ -360,7 +368,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/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/lib/components/selectable/selectable_list/selectable_list.js

@@ -18,7 +18,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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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" != _typeof(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; }
@@ -76,6 +76,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'];
@@ -96,6 +97,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
@@ -549,6 +557,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 = _objectWithoutProperties(_this$props11, _excluded3);
       var heightIsFull = forcedHeight === 'full';
       var classes = (0, _classnames.default)('euiSelectableList', className);

package/lib/components/side_nav/side_nav_item.js

@@ -98,7 +98,6 @@ var EuiSideNavItem = exports.EuiSideNavItem = function EuiSideNavItem(_ref2) {
     buttonClassName = _ref2.buttonClassName,
     childrenOnly = _ref2.childrenOnly,
     rest = _objectWithoutProperties(_ref2, _excluded2);
-  var euiTheme = (0, _services.useEuiTheme)();
   var isHrefValid = !_href || (0, _href_validator.validateHref)(_href);
   var href = isHrefValid ? _href : '';
 
@@ -127,14 +126,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/lib/components/tabs/tab.js

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

package/lib/components/tabs/tabs.js

@@ -40,10 +40,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", _extends({
     ref: ref,
     className: classes,
-    css: cssStyles
+    css: cssStyles,
+    onKeyDown: handleKeyDown
   }, children && {
     role: 'tablist'
   }, rest), (0, _react2.jsx)(_tabs_context.EuiTabsContext.Provider, {

package/lib/components/text_diff/text_diff.js

@@ -47,8 +47,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/lib/components/toast/global_toast_list_item.js

@@ -25,11 +25,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/lib/components/tour/_tour_footer.js

@@ -37,8 +37,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/lib/components/tour/_tour_header.js

@@ -27,8 +27,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/lib/components/tour/tour_step.js

@@ -8,10 +8,10 @@ exports.EuiTourStep = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 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");
@@ -102,9 +102,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/lib/components/tree_view/tree_view_item.js

@@ -40,8 +40,7 @@ var EuiTreeViewItem = exports.EuiTreeViewItem = /*#__PURE__*/(0, _react.memo)(fu
     buttonRef = _ref.buttonRef,
     wrapperProps = _ref.wrapperProps,
     rest = _objectWithoutProperties(_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);

package/lib/global_styling/mixins/_helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiSupportsHas = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
+exports.useEuiYScrollWithShadows = exports.useEuiYScroll = exports.useEuiXScrollWithShadows = exports.useEuiXScroll = exports.useEuiScrollBar = exports.useEuiOverflowScroll = exports.euiYScrollWithShadows = exports.euiYScroll = exports.euiXScrollWithShadows = exports.euiXScroll = exports.euiScrollBarStyles = exports.euiOverflowScroll = exports.euiFullHeight = void 0;
 var _theme = require("../../services/theme");
 var _color = require("../../services/color");
 var _functions = require("../functions");
@@ -171,10 +171,4 @@ var useEuiOverflowScroll = exports.useEuiOverflowScroll = function useEuiOverflo
  */
 var euiFullHeight = exports.euiFullHeight = function euiFullHeight() {
   return "\n  ".concat((0, _functions.logicalCSS)('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
-};
-
-/**
- * A constant storing the support for the `:has()` selector through a
- * media query that will only apply the content it is supported.
- */
-var euiSupportsHas = exports.euiSupportsHas = '@supports(selector(:has(p)))';
+};

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

@@ -17,7 +17,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'];
 

package/optimize/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/optimize/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/optimize/es/components/code/code_block.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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; }
 /*
@@ -48,6 +48,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,
@@ -88,6 +89,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

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

@@ -19,7 +19,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(''),
@@ -42,7 +43,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"
@@ -53,11 +54,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