@elastic/eui 93.3.0 → 93.5.0

package/test-env/components/flex/flex_item.styles.js

@@ -12,128 +12,113 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "n7polf-10",
-  styles: "flex-grow:10;label:10;"
-} : {
-  name: "n7polf-10",
-  styles: "flex-grow:10;label:10;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "1tyr8p6-9",
-  styles: "flex-grow:9;label:9;"
-} : {
-  name: "1tyr8p6-9",
-  styles: "flex-grow:9;label:9;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "fjdgzc-8",
-  styles: "flex-grow:8;label:8;"
-} : {
-  name: "fjdgzc-8",
-  styles: "flex-grow:8;label:8;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref4 = process.env.NODE_ENV === "production" ? {
-  name: "fvh3nz-7",
-  styles: "flex-grow:7;label:7;"
-} : {
-  name: "fvh3nz-7",
-  styles: "flex-grow:7;label:7;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref5 = process.env.NODE_ENV === "production" ? {
-  name: "1in9iiy-6",
-  styles: "flex-grow:6;label:6;"
-} : {
-  name: "1in9iiy-6",
-  styles: "flex-grow:6;label:6;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref6 = process.env.NODE_ENV === "production" ? {
-  name: "1cx5fxs-5",
-  styles: "flex-grow:5;label:5;"
-} : {
-  name: "1cx5fxs-5",
-  styles: "flex-grow:5;label:5;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref7 = process.env.NODE_ENV === "production" ? {
-  name: "k4pnsg-4",
-  styles: "flex-grow:4;label:4;"
-} : {
-  name: "k4pnsg-4",
-  styles: "flex-grow:4;label:4;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref8 = process.env.NODE_ENV === "production" ? {
-  name: "1sl79ay-3",
-  styles: "flex-grow:3;label:3;"
-} : {
-  name: "1sl79ay-3",
-  styles: "flex-grow:3;label:3;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref9 = process.env.NODE_ENV === "production" ? {
-  name: "1l86xxh-2",
-  styles: "flex-grow:2;label:2;"
-} : {
-  name: "1l86xxh-2",
-  styles: "flex-grow:2;label:2;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref10 = process.env.NODE_ENV === "production" ? {
-  name: "1v6uyoj-1",
-  styles: "flex-grow:1;label:1;"
-} : {
-  name: "1v6uyoj-1",
-  styles: "flex-grow:1;label:1;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref11 = process.env.NODE_ENV === "production" ? {
-  name: "tr4wer-grow",
-  styles: "flex-basis:0%;label:grow;"
-} : {
-  name: "tr4wer-grow",
-  styles: "flex-basis:0%;label:grow;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref12 = process.env.NODE_ENV === "production" ? {
-  name: "1pat7n0-growZero",
-  styles: "flex-grow:0;flex-basis:auto;label:growZero;"
-} : {
-  name: "1pat7n0-growZero",
-  styles: "flex-grow:0;flex-basis:auto;label:growZero;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref13 = process.env.NODE_ENV === "production" ? {
-  name: "19hf44n-euiFlexItem",
-  styles: "display:flex;flex-direction:column;label:euiFlexItem;"
-} : {
-  name: "19hf44n-euiFlexItem",
-  styles: "display:flex;flex-direction:column;label:euiFlexItem;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiFlexItemStyles = function euiFlexItemStyles() {
-  return {
-    // 1. Allow EuiPanels to expand to fill the item.
-    euiFlexItem: _ref13,
-    growZero: _ref12,
-    grow: _ref11,
-    growSizes: {
-      '1': _ref10,
-      '2': _ref9,
-      '3': _ref8,
-      '4': _ref7,
-      '5': _ref6,
-      '6': _ref5,
-      '7': _ref4,
-      '8': _ref3,
-      '9': _ref2,
-      '10': _ref
+var euiFlexItemStyles = {
+  // 1. Allow EuiPanels to expand to fill the item.
+  euiFlexItem: process.env.NODE_ENV === "production" ? {
+    name: "19hf44n-euiFlexItem",
+    styles: "display:flex;flex-direction:column;label:euiFlexItem;"
+  } : {
+    name: "19hf44n-euiFlexItem",
+    styles: "display:flex;flex-direction:column;label:euiFlexItem;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  growZero: process.env.NODE_ENV === "production" ? {
+    name: "1pat7n0-growZero",
+    styles: "flex-grow:0;flex-basis:auto;label:growZero;"
+  } : {
+    name: "1pat7n0-growZero",
+    styles: "flex-grow:0;flex-basis:auto;label:growZero;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  grow: process.env.NODE_ENV === "production" ? {
+    name: "tr4wer-grow",
+    styles: "flex-basis:0%;label:grow;"
+  } : {
+    name: "tr4wer-grow",
+    styles: "flex-basis:0%;label:grow;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  growSizes: {
+    '1': process.env.NODE_ENV === "production" ? {
+      name: "1v6uyoj-1",
+      styles: "flex-grow:1;label:1;"
+    } : {
+      name: "1v6uyoj-1",
+      styles: "flex-grow:1;label:1;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '2': process.env.NODE_ENV === "production" ? {
+      name: "1l86xxh-2",
+      styles: "flex-grow:2;label:2;"
+    } : {
+      name: "1l86xxh-2",
+      styles: "flex-grow:2;label:2;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '3': process.env.NODE_ENV === "production" ? {
+      name: "1sl79ay-3",
+      styles: "flex-grow:3;label:3;"
+    } : {
+      name: "1sl79ay-3",
+      styles: "flex-grow:3;label:3;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '4': process.env.NODE_ENV === "production" ? {
+      name: "k4pnsg-4",
+      styles: "flex-grow:4;label:4;"
+    } : {
+      name: "k4pnsg-4",
+      styles: "flex-grow:4;label:4;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '5': process.env.NODE_ENV === "production" ? {
+      name: "1cx5fxs-5",
+      styles: "flex-grow:5;label:5;"
+    } : {
+      name: "1cx5fxs-5",
+      styles: "flex-grow:5;label:5;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '6': process.env.NODE_ENV === "production" ? {
+      name: "1in9iiy-6",
+      styles: "flex-grow:6;label:6;"
+    } : {
+      name: "1in9iiy-6",
+      styles: "flex-grow:6;label:6;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '7': process.env.NODE_ENV === "production" ? {
+      name: "fvh3nz-7",
+      styles: "flex-grow:7;label:7;"
+    } : {
+      name: "fvh3nz-7",
+      styles: "flex-grow:7;label:7;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '8': process.env.NODE_ENV === "production" ? {
+      name: "fjdgzc-8",
+      styles: "flex-grow:8;label:8;"
+    } : {
+      name: "fjdgzc-8",
+      styles: "flex-grow:8;label:8;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '9': process.env.NODE_ENV === "production" ? {
+      name: "1tyr8p6-9",
+      styles: "flex-grow:9;label:9;"
+    } : {
+      name: "1tyr8p6-9",
+      styles: "flex-grow:9;label:9;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    },
+    '10': process.env.NODE_ENV === "production" ? {
+      name: "n7polf-10",
+      styles: "flex-grow:10;label:10;"
+    } : {
+      name: "n7polf-10",
+      styles: "flex-grow:10;label:10;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
     }
-  };
+  }
 };
 exports.euiFlexItemStyles = euiFlexItemStyles;

package/test-env/components/header/header_breadcrumbs/header_breadcrumbs.js

@@ -10,9 +10,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _breadcrumbs = require("../../breadcrumbs");
 var _header_breadcrumbs = require("./header_breadcrumbs.styles");
-var _services = require("../../../services");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "breadcrumbs"];
 /*
@@ -27,15 +27,13 @@ var EuiHeaderBreadcrumbs = function EuiHeaderBreadcrumbs(_ref) {
     breadcrumbs = _ref.breadcrumbs,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiHeaderBreadcrumbs', className);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _header_breadcrumbs.euiHeaderBreadcrumbsStyles)(euiTheme);
-  var cssHeaderBreadcrumbStyles = [styles.euiHeaderBreadcrumbs];
+  var styles = (0, _services.useEuiMemoizedStyles)(_header_breadcrumbs.euiHeaderBreadcrumbsStyles);
   return (0, _react2.jsx)(_breadcrumbs.EuiBreadcrumbs, (0, _extends2.default)({
     max: 4,
     truncate: true,
     breadcrumbs: breadcrumbs,
     className: classes,
-    css: cssHeaderBreadcrumbStyles,
+    css: styles.euiHeaderBreadcrumbs,
     type: "application"
   }, rest));
 };

package/test-env/components/header/header_links/header_links.js

@@ -82,6 +82,7 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       size: "m"
     }));
   });
+  var renderedChildren = typeof children === 'function' ? children(closeMenu) : children;
   return (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiHeaderLinks.appNavigation",
     default: "App menu"
@@ -95,7 +96,7 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     }, (0, _react2.jsx)("div", {
       className: "euiHeaderLinks__list",
       css: [styles.euiHeaderLinks__list, styles.gutterSizes[gutterSize], ";label:EuiHeaderLinks;"]
-    }, children)), (0, _react2.jsx)(_responsive.EuiShowFor, {
+    }, renderedChildren)), (0, _react2.jsx)(_responsive.EuiShowFor, {
       sizes: popoverBreakpoints
     }, (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
       button: button,
@@ -107,7 +108,7 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     }, popoverProps), (0, _react2.jsx)("div", {
       className: "euiHeaderLinks__mobileList",
       css: styles.euiHeaderLinks__mobileList
-    }, children))));
+    }, renderedChildren))));
   });
 };
 exports.EuiHeaderLinks = EuiHeaderLinks;
@@ -116,6 +117,13 @@ EuiHeaderLinks.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+       * Takes any rendered node(s), typically of `EuiHeaderLink`s.
+       *
+       * Optionally takes a render function that will pass a callback allowing you
+       * to close the mobile popover from within your popover content.
+       */
+  children: _propTypes.default.oneOfType([_propTypes.default.node.isRequired, _propTypes.default.func.isRequired]),
   /**
        * Spacing between direct children
        */

package/test-env/components/modal/confirm_modal.js

@@ -84,7 +84,8 @@ var EuiConfirmModal = function EuiConfirmModal(_ref) {
   return (0, _react2.jsx)(_modal.EuiModal, (0, _extends2.default)({
     className: classes,
     css: cssStyles,
-    onClose: onCancel
+    onClose: onCancel,
+    role: "alertdialog"
   }, rest), modalTitle, message && (0, _react2.jsx)(_modal_body.EuiModalBody, null, (0, _react2.jsx)(_text.EuiText, {
     "data-test-subj": "confirmModalBodyText"
   }, message)), (0, _react2.jsx)(_modal_footer.EuiModalFooter, null, (0, _react2.jsx)(_button.EuiButtonEmpty, {

package/test-env/components/modal/modal.js

@@ -18,7 +18,7 @@ var _overlay_mask = require("../overlay_mask");
 var _i18n = require("../i18n");
 var _modal = require("./modal.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "style"];
+var _excluded = ["className", "children", "initialFocus", "onClose", "maxWidth", "role", "style"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,6 +35,8 @@ var EuiModal = function EuiModal(_ref) {
     onClose = _ref.onClose,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? true : _ref$maxWidth,
+    _ref$role = _ref.role,
+    role = _ref$role === void 0 ? 'dialog' : _ref$role,
     style = _ref.style,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onKeyDown = function onKeyDown(event) {
@@ -64,7 +66,9 @@ var EuiModal = function EuiModal(_ref) {
     className: classes,
     onKeyDown: onKeyDown,
     tabIndex: 0,
-    style: newStyle
+    style: newStyle,
+    role: role,
+    "aria-modal": true
   }, rest), (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiModal.closeModal",
     default: "Closes this modal window"
@@ -99,5 +103,10 @@ EuiModal.propTypes = {
      * Specifies what element should initially have focus.
      * Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
      */
-  initialFocus: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.func.isRequired, _propTypes.default.string.isRequired])
+  initialFocus: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.func.isRequired, _propTypes.default.string.isRequired]),
+  /**
+     * Identifies a modal dialog to screen readers. Modal dialogs that confirm destructive actions
+     * or need a user's attention should use "alertdialog".
+     */
+  role: _propTypes.default.oneOf(["dialog", "alertdialog"])
 };

package/test-env/components/panel/panel.js

@@ -58,11 +58,10 @@ var EuiPanel = function EuiPanel(_ref) {
     panelRef = _ref.panelRef,
     element = _ref.element,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
   // Shadows are only allowed when there's a white background (plain)
   var canHaveShadow = !hasBorder && color === 'plain';
   var canHaveBorder = color === 'plain' || color === 'transparent';
-  var styles = (0, _panel.euiPanelStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_panel.euiPanelStyles);
   var cssStyles = [styles.euiPanel, grow && styles.grow, styles.radius[borderRadius], (0, _global_styling.useEuiPaddingCSS)()[paddingSize], (0, _global_styling.useEuiBackgroundColorCSS)()[color], canHaveShadow && hasShadow === true && styles.hasShadow, canHaveBorder && hasBorder === true && styles.hasBorder, rest.onClick && styles.isClickable];
   var classes = (0, _classnames.default)('euiPanel', "euiPanel--".concat(color), (0, _defineProperty2.default)({}, "euiPanel--".concat(paddingSizeToClassNameMap[paddingSize]), paddingSizeToClassNameMap[paddingSize]), className);
   if (rest.onClick && element !== 'div') {

package/test-env/components/resizable_container/resizable_button.js

@@ -42,8 +42,7 @@ var EuiResizableButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiResizableButton', className);
   var resizeDirection = isHorizontal ? 'horizontal' : 'vertical';
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _resizable_button.euiResizableButtonStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_resizable_button.euiResizableButtonStyles);
   var cssStyles = [styles.euiResizableButton, styles[indicator], styles["".concat(indicator, "Direction")][resizeDirection], styles[resizeDirection], indicator === 'handle' && styles.alignIndicator[alignIndicator]];
   return (0, _react2.jsx)(_i18n.EuiI18n, {
     tokens: ['euiResizableButton.horizontalResizerAriaLabel', 'euiResizableButton.verticalResizerAriaLabel'],

package/test-env/components/resizable_container/resizable_collapse_button.js

@@ -38,8 +38,7 @@ var EuiResizableCollapseButton = function EuiResizableCollapseButton(_ref) {
   var isHorizontal = direction === 'horizontal';
   var showOnFocus = !isCollapsed && !isVisible;
   var screenReaderOnlyStyles = (0, _screen_reader_only.euiScreenReaderOnlyStyles)(showOnFocus).euiScreenReaderOnly;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _resizable_collapse_button.euiResizableCollapseButtonStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_resizable_collapse_button.euiResizableCollapseButtonStyles);
   var collapsedStyles = [styles.collapsed.collapsed, styles.collapsed[direction], styles.collapsed["".concat(direction, "Positions")][internalPosition]];
   var collapsibleStyles = [styles.collapsible.collapsible, styles.collapsible[direction][externalPosition], styles.collapsible[direction][internalPosition]];
   var cssStyles = [styles.euiResizableCollapseButton, showOnFocus && screenReaderOnlyStyles].concat((0, _toConsumableArray2.default)(isCollapsed ? collapsedStyles : collapsibleStyles));

package/test-env/components/resizable_container/resizable_container.js

@@ -59,8 +59,7 @@ var EuiResizableContainer = function EuiResizableContainer(_ref) {
   var containerRef = (0, _react.useRef)(null);
   var isHorizontal = direction === 'horizontal';
   var classes = (0, _classnames.default)('euiResizableContainer', className);
-  var styles = (0, _resizable_container.euiResizableContainerStyles)();
-  var cssStyles = [styles.euiResizableContainer, styles[direction]];
+  var cssStyles = [_resizable_container.euiResizableContainerStyles.euiResizableContainer, _resizable_container.euiResizableContainerStyles[direction]];
   var _useContainerCallback = (0, _helpers.useContainerCallbacks)({
       initialState: _objectSpread(_objectSpread({}, initialState), {}, {
         isHorizontal: isHorizontal

package/test-env/components/resizable_container/resizable_container.styles.js

@@ -13,19 +13,16 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "omnk2l-vertical",
-  styles: "flex-direction:column;label:vertical;"
-} : {
-  name: "omnk2l-vertical",
-  styles: "flex-direction:column;label:vertical;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiResizableContainerStyles = function euiResizableContainerStyles() {
-  return {
-    euiResizableContainer: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiResizableContainer;"),
-    horizontal: /*#__PURE__*/(0, _react.css)(";label:horizontal;"),
-    vertical: _ref
-  };
+var euiResizableContainerStyles = {
+  euiResizableContainer: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:euiResizableContainer;"),
+  horizontal: /*#__PURE__*/(0, _react.css)(";label:horizontal;"),
+  vertical: process.env.NODE_ENV === "production" ? {
+    name: "omnk2l-vertical",
+    styles: "flex-direction:column;label:vertical;"
+  } : {
+    name: "omnk2l-vertical",
+    styles: "flex-direction:column;label:vertical;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };
 exports.euiResizableContainerStyles = euiResizableContainerStyles;

package/test-env/components/resizable_container/resizable_panel.js

@@ -146,15 +146,13 @@ var EuiResizablePanel = function EuiResizablePanel(_ref) {
     return direction;
   }, [isCollapsed, isCollapsible, position, panels, panelId]);
   var axis = isHorizontal ? 'horizontal' : 'vertical';
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _resizable_panel.euiResizablePanelStyles)(euiTheme);
-  var cssStyles = [styles.euiResizablePanel, isCollapsed && styles.collapsed, styles.paddingSizes[wrapperPadding], wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
-  var contentStyles = (0, _resizable_panel.euiResizablePanelContentStyles)(euiTheme);
+  var cssStyles = [_resizable_panel.euiResizablePanelStyles.euiResizablePanel, isCollapsed && _resizable_panel.euiResizablePanelStyles.collapsed, (0, _global_styling.useEuiPaddingCSS)()[wrapperPadding], wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
+  var contentStyles = (0, _services.useEuiMemoizedStyles)(_resizable_panel.euiResizablePanelContentStyles);
   var contentCssStyles = [contentStyles.euiResizablePanel__content, scrollable && contentStyles.scrollable, isCollapsed && contentStyles.collapsedChildren, isCollapsed && !isCollapsible && contentStyles[axis].collapsed, isCollapsible && contentStyles[axis].hasCollapsibleButton];
   var classes = (0, _classnames.default)('euiResizablePanel', wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);
   var panelClasses = (0, _classnames.default)('euiResizablePanel__content', className);
   var inlineStyles = _objectSpread(_objectSpread({}, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.style), isHorizontal ? (0, _global_styling.logicalSizeStyle)("".concat(size || innerSize, "%"), 'auto') : (0, _global_styling.logicalSizeStyle)('100%', "".concat(size || innerSize, "%")));
-  var padding = (0, _global_styling.euiPaddingSize)(euiTheme, paddingSize) || '0px';
+  var padding = (0, _global_styling.useEuiPaddingSize)(paddingSize) || '0px';
   (0, _react.useEffect)(function () {
     if (!registration) return;
     var initSize = size !== null && size !== void 0 ? size : initialSize || 0;

package/test-env/components/resizable_container/resizable_panel.styles.js

@@ -1,15 +1,11 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiResizablePanelStyles = exports.euiResizablePanelContentStyles = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
                                                                                                                                                                                                                                                                                            * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
                                                                                                                                                                                                                                                                                            * or more contributor license agreements. Licensed under the Elastic License
@@ -17,28 +13,23 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "11qmbh3-collapsed",
-  styles: "overflow:hidden;label:collapsed;"
-} : {
-  name: "11qmbh3-collapsed",
-  styles: "overflow:hidden;label:collapsed;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var _ref3 = process.env.NODE_ENV === "production" ? {
-  name: "15ifdgc-euiResizablePanel",
-  styles: "position:relative;label:euiResizablePanel;"
-} : {
-  name: "15ifdgc-euiResizablePanel",
-  styles: "position:relative;label:euiResizablePanel;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiResizablePanelStyles = function euiResizablePanelStyles(euiThemeContext) {
-  return {
-    euiResizablePanel: _ref3,
-    collapsed: _ref2,
-    paddingSizes: _objectSpread({}, (0, _global_styling.euiPaddingSizeCSS)(euiThemeContext))
-  };
+var euiResizablePanelStyles = {
+  euiResizablePanel: process.env.NODE_ENV === "production" ? {
+    name: "15ifdgc-euiResizablePanel",
+    styles: "position:relative;label:euiResizablePanel;"
+  } : {
+    name: "15ifdgc-euiResizablePanel",
+    styles: "position:relative;label:euiResizablePanel;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  },
+  collapsed: process.env.NODE_ENV === "production" ? {
+    name: "11qmbh3-collapsed",
+    styles: "overflow:hidden;label:collapsed;"
+  } : {
+    name: "11qmbh3-collapsed",
+    styles: "overflow:hidden;label:collapsed;",
+    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+  }
 };
 exports.euiResizablePanelStyles = euiResizablePanelStyles;
 var _ref = process.env.NODE_ENV === "production" ? {

package/test-env/components/selectable/selectable_list/selectable_list.js

@@ -422,14 +422,30 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       var _this$props9 = this.props,
+        isVirtualized = _this$props9.isVirtualized,
         activeOptionIndex = _this$props9.activeOptionIndex,
         visibleOptions = _this$props9.visibleOptions,
         options = _this$props9.options;
-      if (this.listBoxRef && this.props.searchable !== true) {
-        this.listBoxRef.setAttribute('aria-activedescendant', "".concat(this.props.makeOptionId(activeOptionIndex)));
-      }
-      if (this.listRef && typeof activeOptionIndex !== 'undefined') {
-        this.listRef.scrollToItem(activeOptionIndex, 'auto');
+      if (prevProps.activeOptionIndex !== activeOptionIndex) {
+        var makeOptionId = this.props.makeOptionId;
+        if (this.listBoxRef && this.props.searchable !== true) {
+          this.listBoxRef.setAttribute('aria-activedescendant', makeOptionId(activeOptionIndex));
+        }
+        if (typeof activeOptionIndex !== 'undefined') {
+          if (isVirtualized) {
+            var _this$listRef;
+            (_this$listRef = this.listRef) === null || _this$listRef === void 0 ? void 0 : _this$listRef.scrollToItem(activeOptionIndex, 'auto');
+          } else {
+            var _this$listBoxRef;
+            var activeOptionId = "#".concat(makeOptionId(activeOptionIndex));
+            var activeOptionEl = (_this$listBoxRef = this.listBoxRef) === null || _this$listBoxRef === void 0 ? void 0 : _this$listBoxRef.querySelector(activeOptionId);
+            if (activeOptionEl) {
+              activeOptionEl.scrollIntoView({
+                block: 'nearest'
+              });
+            }
+          }
+        }
       }
       if (prevProps.visibleOptions !== visibleOptions || prevProps.options !== options) {
         var optionArray = visibleOptions || options;
@@ -472,14 +488,18 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         textWrap = _this$props10.textWrap,
         truncationProps = _this$props10.truncationProps,
         rest = (0, _objectWithoutProperties2.default)(_this$props10, _excluded3);
+      var heightIsFull = forcedHeight === 'full';
       var classes = (0, _classnames.default)('euiSelectableList', {
-        'euiSelectableList-fullHeight': forcedHeight === 'full',
+        'euiSelectableList-fullHeight': heightIsFull,
         'euiSelectableList-bordered': bordered
       }, className);
       return (0, _react2.jsx)("div", (0, _extends2.default)({
         className: classes
       }, rest), isVirtualized ? this.renderVirtualizedList() : (0, _react2.jsx)("div", {
         className: "euiSelectableList__list",
+        style: !heightIsFull ? {
+          blockSize: forcedHeight
+        } : undefined,
         ref: this.removeScrollableTabStop
       }, (0, _react2.jsx)("ul", {
         ref: this.setListBoxRef

package/test-env/components/spacer/spacer.js

@@ -29,8 +29,7 @@ var EuiSpacer = function EuiSpacer(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'l' : _ref$size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _spacer.euiSpacerStyles)(euiTheme);
+  var styles = (0, _services.useEuiMemoizedStyles)(_spacer.euiSpacerStyles);
   var classes = (0, _classnames.default)('euiSpacer', (0, _defineProperty2.default)({}, "euiSpacer--".concat(size), size), className);
   var cssStyles = [styles.euiSpacer, styles[size]];
   return (0, _react2.jsx)("div", (0, _extends2.default)({