@elastic/eui 98.0.0 → 98.1.0

package/optimize/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "98.0.0",
+  "version": "98.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -113,16 +113,17 @@
     "@loki/create-async-callback": "^0.35.0",
     "@loki/is-loki-running": "^0.35.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-essentials": "^8.0.5",
-    "@storybook/addon-interactions": "^8.0.5",
-    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-essentials": "^8.4.5",
+    "@storybook/addon-interactions": "^8.4.5",
+    "@storybook/addon-links": "^8.4.5",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
-    "@storybook/blocks": "^8.0.5",
-    "@storybook/manager-api": "^8.1.3",
-    "@storybook/preview-api": "^8.1.3",
-    "@storybook/react": "^8.0.5",
-    "@storybook/react-webpack5": "^8.0.5",
-    "@storybook/test": "^8.0.5",
+    "@storybook/blocks": "^8.4.5",
+    "@storybook/docs-tools": "^8.4.5",
+    "@storybook/manager-api": "^8.4.5",
+    "@storybook/preview-api": "^8.4.5",
+    "@storybook/react": "^8.4.5",
+    "@storybook/react-webpack5": "^8.4.5",
+    "@storybook/test": "^8.4.5",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -189,7 +190,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.8.0",
+    "eslint-plugin-storybook": "^0.9.0",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
@@ -235,7 +236,7 @@
     "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "storybook": "^8.0.5",
+    "storybook": "^8.4.5",
     "style-loader": "^3.3.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",

package/src/global_styling/index.scss

@@ -9,10 +9,4 @@
 // Mixins provide generic code expansion through helpers
 @import 'mixins/index';
 
-// Utility classes provide one-off selectors for common css problems
-@import 'utility/index';
-
 // The reset file has moved to global_styles.tsx
-
-// Customization of the React Date Picker
-@import 'react_date_picker/index';

package/src/global_styling/mixins/_helpers.scss

@@ -81,15 +81,6 @@
   @include euiOverflowShadow('x');
 }
 
-/**
- * For quickly applying a full-height element whether using flex or not
- */
-@mixin euiFullHeight {
-  height: 100%;
-  flex: 1 1 auto;
-  overflow: hidden;
-}
-
 // Hiding elements offscreen to only be read by screen reader
 // See https://github.com/elastic/eui/pull/5130 and https://github.com/elastic/eui/pull/5152 for more info
 @mixin euiScreenReaderOnly {

package/src/global_styling/mixins/_shadow.scss

@@ -63,14 +63,6 @@
   }
 }
 
-@mixin euiSlightShadowHover($color: $euiShadowColor) {
-  box-shadow:
-    0 1px 5px rgba($color, shadowOpacity(.1)),
-    0 3.6px 13px rgba($color, shadowOpacity(.07)),
-    0 8.4px 23px rgba($color, shadowOpacity(.06)),
-    0 23px 35px rgba($color, shadowOpacity(.05));
-}
-
 // stylelint-disable color-named
 @mixin euiOverflowShadow($direction: 'y', $side: 'both') {
   $hideHeight: $euiScrollBarCornerThin * 1.25;

package/src/global_styling/variables/_size.scss

@@ -7,8 +7,6 @@ $euiSizeL:    $euiSize * 1.5 !default;
 $euiSizeXL:   $euiSize * 2 !default;
 $euiSizeXXL:  $euiSize * 2.5 !default;
 
-$euiButtonMinWidth: $euiSize * 7 !default;
-
 $euiScrollBar: $euiSize !default;
 // Corner sizes are used as an inset border and therefore a smaller corner size means a larger thumb
 $euiScrollBarCorner: $euiSizeXS !default;

package/src/themes/amsterdam/global_styling/index.scss

@@ -9,7 +9,4 @@
 // Mixins provide generic code expansion through helpers
 @import 'mixins/index';
 
-// Utility classes provide one-off selectors for common css problems
-@import '../../../global_styling/utility/index';
-
 // The reset file has moved to global_styles.tsx

package/test-env/components/badge/beta_badge/beta_badge.js

@@ -24,7 +24,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'];
 
@@ -177,7 +177,7 @@ EuiBetaBadge.propTypes = {
      */
   title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.string])]),
   /**
-     * Accepts accent, subdued and hollow.
+     * Accepts accent, subdued, hollow and warning.
      */
   color: _propTypes.default.any,
   size: _propTypes.default.any,

package/test-env/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/test-env/components/card/card.js

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

package/test-env/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/test-env/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/test-env/components/drag_and_drop/draggable.js

@@ -53,8 +53,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/test-env/components/drag_and_drop/droppable.js

@@ -55,8 +55,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/test-env/components/error_boundary/error_boundary.js

@@ -16,10 +16,10 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 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"],
@@ -109,8 +109,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/test-env/components/form/range/range_draggable.js

@@ -54,9 +54,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/test-env/components/health/health.js

@@ -11,9 +11,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"];
 /*
@@ -31,8 +31,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/test-env/components/inline_edit/inline_edit_form.js

@@ -70,10 +70,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');
@@ -108,7 +107,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/test-env/components/inline_edit/inline_edit_text.js

@@ -12,9 +12,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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"];
@@ -37,8 +37,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/test-env/components/inline_edit/inline_edit_title.js

@@ -12,9 +12,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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"];
@@ -39,8 +39,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/test-env/components/key_pad_menu/key_pad_menu.js

@@ -11,8 +11,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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"];
@@ -31,8 +31,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/test-env/components/key_pad_menu/key_pad_menu_item.js

@@ -51,8 +51,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';
@@ -60,9 +59,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/test-env/components/mark/mark.js

@@ -11,8 +11,8 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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"];
@@ -32,8 +32,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/test-env/components/overlay_mask/overlay_mask.js

@@ -40,8 +40,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/test-env/components/popover/popover.js

@@ -120,11 +120,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/test-env/components/search_bar/filters/field_value_selection_filter.js

@@ -24,6 +24,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");
@@ -284,14 +285,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;
@@ -349,7 +357,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/test-env/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/test-env/components/selectable/selectable_list/selectable_list.js

@@ -29,7 +29,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; }
@@ -71,6 +71,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'];
@@ -91,6 +92,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
@@ -544,6 +552,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/test-env/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/test-env/components/tabs/tab.js

@@ -69,6 +69,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,
@@ -82,6 +83,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,