@elastic/eui 98.0.0 → 98.1.0

package/optimize/es/components/drag_and_drop/draggable.js

@@ -15,7 +15,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useContext } from 'react';
 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';
@@ -43,8 +43,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/optimize/es/components/drag_and_drop/droppable.js

@@ -12,7 +12,7 @@ var _excluded = ["droppableId", "direction", "isDropDisabled", "children", "clas
 import React, { useContext } from 'react';
 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';
@@ -45,8 +45,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/optimize/es/components/error_boundary/error_boundary.js

@@ -19,10 +19,10 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React, { Component } from 'react';
 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) {
@@ -87,8 +87,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/optimize/es/components/form/range/range_draggable.js

@@ -12,7 +12,7 @@ var _excluded = ["className", "showTicks", "lowerPosition", "upperPosition", "on
 
 import React, { useCallback, useMemo } from 'react';
 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";
@@ -44,9 +44,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/optimize/es/components/health/health.js

@@ -11,10 +11,10 @@ var _excluded = ["children", "className", "color", "textSize"];
 
 import React from 'react';
 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) {
@@ -24,8 +24,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/optimize/es/components/inline_edit/inline_edit_form.js

@@ -19,7 +19,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';
@@ -62,10 +62,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');
@@ -100,7 +99,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/optimize/es/components/inline_edit/inline_edit_text.js

@@ -14,9 +14,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useMemo } from 'react';
 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) {
@@ -27,8 +27,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/optimize/es/components/inline_edit/inline_edit_title.js

@@ -14,9 +14,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useMemo } from 'react';
 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'];
@@ -29,8 +29,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/optimize/es/components/key_pad_menu/key_pad_menu.js

@@ -12,8 +12,8 @@ var _excluded = ["children", "className", "checkable"];
 
 import React from 'react';
 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) {
@@ -24,8 +24,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/optimize/es/components/key_pad_menu/key_pad_menu_item.js

@@ -11,7 +11,7 @@ var _excluded = ["id", "isSelected", "isDisabled", "label", "children", "classNa
 
 import React, { useMemo } from 'react';
 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';
@@ -41,8 +41,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';
@@ -50,9 +49,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/optimize/es/components/mark/mark.js

@@ -11,8 +11,8 @@ var _excluded = ["children", "className", "hasScreenReaderHelpText"];
 
 import React, { useMemo } from 'react';
 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) {
@@ -22,8 +22,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/optimize/es/components/overlay_mask/overlay_mask.js

@@ -14,7 +14,7 @@ import React, { useEffect, useState } from 'react';
 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';
@@ -31,8 +31,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/optimize/es/components/popover/popover.js

@@ -109,11 +109,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/optimize/es/components/search_bar/filters/field_value_selection_filter.js

@@ -25,6 +25,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";
@@ -275,14 +276,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;
@@ -340,7 +348,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/optimize/es/components/search_bar/search_bar.a11y.js

@@ -197,7 +197,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/es/components/selectable/selectable_list/selectable_list.js

@@ -9,7 +9,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
@@ -64,6 +64,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'];
@@ -84,6 +85,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
@@ -537,6 +545,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/optimize/es/components/side_nav/side_nav_item.js

@@ -13,7 +13,7 @@ var _excluded = ["href", "target", "rel", "onClick", "className", "children", "d
 
 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';
@@ -84,7 +84,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 : '';
 
@@ -113,14 +112,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/optimize/es/components/tabs/tab.js

@@ -59,6 +59,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,
@@ -72,6 +73,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/optimize/es/components/tabs/tabs.js

@@ -11,7 +11,7 @@ var _excluded = ["children", "className", "bottomBorder", "expand", "size"];
 
 import React, { forwardRef } from 'react';
 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";
@@ -29,10 +29,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, {

package/optimize/es/components/text_diff/text_diff.js

@@ -12,7 +12,7 @@ var _excluded = ["className", "insertComponent", "deleteComponent", "sameCompone
 import React, { useMemo } from 'react';
 import Diff from 'text-diff';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiTextDiffStyles } from './text_diff.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useEuiTextDiff = function useEuiTextDiff(_ref) {
@@ -37,8 +37,7 @@ export var useEuiTextDiff = function useEuiTextDiff(_ref) {
     return diff.main(beforeText, afterText);
   }, [beforeText, afterText, timeout]); // produces diff array
 
-  var euiTheme = useEuiTheme();
-  var styles = euiTextDiffStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTextDiffStyles);
   var classes = classNames('euiTextDiff', className);
   var rendereredHtml = useMemo(function () {
     var html = [];

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

@@ -10,17 +10,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  */
 
 import classNames from 'classnames';
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { euiGlobalToastListItemStyles } from './global_toast_list.styles';
 export var EuiGlobalToastListItem = function EuiGlobalToastListItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
     isDismissed = _ref.isDismissed;
-  var euiTheme = useEuiTheme();
-  if (!children) {
-    return null;
-  }
-  var styles = euiGlobalToastListItemStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiGlobalToastListItemStyles);
+  if (!children) return null;
   var cssStyles = [styles.euiGlobalToastListItem, isDismissed && styles.dismissed];
   var classes = classNames('euiGlobalToastListItem', children.props.className, className);
   return cloneElementWithCss(children, _objectSpread(_objectSpread({}, children.props), {

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

@@ -9,7 +9,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  */
 
 import React, { useMemo, memo } from 'react';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiI18n } from '../i18n';
 import { EuiPopoverFooter } from '../popover';
 import { EuiButtonEmpty } from '../button';
@@ -22,8 +22,7 @@ export var EuiTourFooter = /*#__PURE__*/memo(function (_ref) {
     step = _ref.step,
     stepsTotal = _ref.stepsTotal,
     onFinish = _ref.onFinish;
-  var euiTheme = useEuiTheme();
-  var footerStyles = euiTourFooterStyles(euiTheme);
+  var footerStyles = useEuiMemoizedStyles(euiTourFooterStyles);
   var customFooterAction = useMemo(function () {
     if (!footerAction) return null;
     return Array.isArray(footerAction) ? ___EmotionJSX(EuiFlexGroup, {

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

@@ -7,7 +7,7 @@
  */
 
 import React, { memo } from 'react';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiPopoverTitle } from '../popover';
 import { EuiTitle } from '../title';
 import { euiTourHeaderStyles } from './_tour_header.styles';
@@ -16,8 +16,7 @@ export var EuiTourHeader = /*#__PURE__*/memo(function (_ref) {
   var id = _ref.id,
     title = _ref.title,
     subtitle = _ref.subtitle;
-  var euiTheme = useEuiTheme();
-  var headerStyles = euiTourHeaderStyles(euiTheme);
+  var headerStyles = useEuiMemoizedStyles(euiTourHeaderStyles);
   return ___EmotionJSX(EuiPopoverTitle, {
     css: headerStyles.euiTourHeader,
     className: "euiTourHeader",

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

@@ -15,10 +15,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames';
+import { useGeneratedHtmlId, findElementBySelectorOrRef, useEuiMemoizedStyles } from '../../services';
 import { logicalStyles } from '../../global_styling';
-import { EuiBeacon } from '../beacon';
 import { EuiPopover, EuiWrappingPopover } from '../popover';
-import { useGeneratedHtmlId, findElementBySelectorOrRef, useEuiTheme } from '../../services';
+import { EuiBeacon } from '../beacon';
 import { EuiTourHeader } from './_tour_header';
 import { EuiTourFooter } from './_tour_footer';
 import { euiTourStyles, euiTourBeaconStyles } from './tour.styles';
@@ -84,9 +84,8 @@ export var EuiTourStep = function EuiTourStep(_ref) {
   }, [anchor]);
   var anchorClasses = classNames('euiTourAnchor', className);
   var popoverClasses = classNames('euiTour', panelClassName);
-  var euiTheme = useEuiTheme();
-  var tourStyles = euiTourStyles(euiTheme);
-  var beaconStyles = euiTourBeaconStyles(euiTheme);
+  var tourStyles = useEuiMemoizedStyles(euiTourStyles);
+  var beaconStyles = useEuiMemoizedStyles(euiTourBeaconStyles);
   var beaconCss = [beaconStyles.euiTourBeacon, isStepOpen && beaconStyles.isOpen, popoverPosition && beaconStyles[popoverPosition]];
   var hasBeacon = decoration === 'beacon';
   var widthStyles = useMemo(function () {

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

@@ -11,7 +11,7 @@ var _excluded = ["id", "label", "className", "children", "display", "icon", "has
 
 import React, { memo } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiIcon } from '../icon';
 import { euiTreeViewItemStyles } from './tree_view_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,8 +29,7 @@ export var EuiTreeViewItem = /*#__PURE__*/memo(function (_ref) {
     buttonRef = _ref.buttonRef,
     wrapperProps = _ref.wrapperProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiTreeViewItemStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTreeViewItemStyles);
   var wrapperClasses = classNames('euiTreeView__node', {
     'euiTreeView__node--expanded': isExpanded
   }, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);

package/optimize/es/global_styling/mixins/_helpers.js

@@ -166,10 +166,4 @@ export var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
  */
 export var euiFullHeight = function euiFullHeight() {
   return "\n  ".concat(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.
- */
-export var euiSupportsHas = '@supports(selector(:has(p)))';
+};