@elastic/eui 93.4.0 → 93.5.1-rc.0

package/eui.d.ts

@@ -1082,6 +1082,7 @@ declare module '@elastic/eui/src/components/form/checkbox' {
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_color' {
+	import { SerializedStyles } from '@emotion/react';
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const BACKGROUND_COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
 	export type _EuiBackgroundColor = (typeof BACKGROUND_COLORS)[number];
@@ -1092,29 +1093,17 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	     */
 	    method?: 'opaque' | 'transparent';
 	}
+	/**
+	 * @returns A single background color with optional alpha transparency
+	 */
 	export const euiBackgroundColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
 	export const useEuiBackgroundColor: (color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
-	export const useEuiBackgroundColorCSS: () => {
-	    transparent: import("@emotion/utils").SerializedStyles;
-	    plain: import("@emotion/utils").SerializedStyles;
-	    subdued: import("@emotion/utils").SerializedStyles;
-	    accent: import("@emotion/utils").SerializedStyles;
-	    primary: import("@emotion/utils").SerializedStyles;
-	    success: import("@emotion/utils").SerializedStyles;
-	    warning: import("@emotion/utils").SerializedStyles;
-	    danger: import("@emotion/utils").SerializedStyles;
-	};
+	export const useEuiBackgroundColorCSS: () => Record<"transparent" | "plain" | "subdued" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
+	/**
+	 * Border colors
+	 */
 	export const euiBorderColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor) => string;
-	export const useEuiBorderColorCSS: () => {
-	    transparent: import("@emotion/utils").SerializedStyles;
-	    plain: import("@emotion/utils").SerializedStyles;
-	    subdued: import("@emotion/utils").SerializedStyles;
-	    accent: import("@emotion/utils").SerializedStyles;
-	    primary: import("@emotion/utils").SerializedStyles;
-	    success: import("@emotion/utils").SerializedStyles;
-	    warning: import("@emotion/utils").SerializedStyles;
-	    danger: import("@emotion/utils").SerializedStyles;
-	};
+	export const useEuiBorderColorCSS: () => Record<"transparent" | "plain" | "subdued" | "accent" | "primary" | "success" | "warning" | "danger", SerializedStyles>;
 
 }
 declare module '@elastic/eui/src/global_styling/functions/logicals' {
@@ -1483,27 +1472,16 @@ declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_padding' {
+	import { SerializedStyles } from '@emotion/react';
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
 	export const PADDING_SIZES: readonly ["none", "xs", "s", "m", "l", "xl"];
 	export type EuiPaddingSize = (typeof PADDING_SIZES)[number];
+	/**
+	 * Get a single padding size
+	 */
 	export const euiPaddingSize: ({ euiTheme }: UseEuiTheme, size: EuiPaddingSize) => string | null;
-	export const euiPaddingSizeCSS: (euiThemeContext: UseEuiTheme, side?: "left" | "right" | "horizontal" | "vertical" | "bottom" | "top" | undefined) => {
-	    none: null;
-	    xs: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
-	    m: import("@emotion/utils").SerializedStyles;
-	    l: import("@emotion/utils").SerializedStyles;
-	    xl: import("@emotion/utils").SerializedStyles;
-	};
-	export const useEuiPaddingSize: (size: EuiPaddingSize) => string | null;
-	export const useEuiPaddingCSS: (side?: "left" | "right" | "horizontal" | "vertical" | "bottom" | "top" | undefined) => {
-	    none: null;
-	    xs: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
-	    m: import("@emotion/utils").SerializedStyles;
-	    l: import("@emotion/utils").SerializedStyles;
-	    xl: import("@emotion/utils").SerializedStyles;
-	};
+	export const useEuiPaddingSize: (size: EuiPaddingSize) => string;
+	export const useEuiPaddingCSS: (side?: "left" | "right" | "horizontal" | "vertical" | "bottom" | "top" | undefined) => Record<"xs" | "s" | "m" | "l" | "xl" | "none", SerializedStyles>;
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_states' {
@@ -2830,12 +2808,18 @@ declare module '@elastic/eui/src/components/i18n/i18n' {
 	interface I18nTokenShape<T, DEFAULT extends Renderable<T>> {
 	    token: string;
 	    default: DEFAULT;
+	    /**
+	     * Render function that returns a ReactElement
+	     */
 	    children?: (x: ResolvedType<DEFAULT>) => ReactChild;
 	    values?: T;
 	}
-	interface I18nTokensShape<T extends any[]> {
+	export interface I18nTokensShape<T extends any[]> {
 	    tokens: string[];
 	    defaults: T;
+	    /**
+	     * Render function that returns a ReactElement
+	     */
 	    children: (x: Array<T[number]>) => ReactChild;
 	    values?: Record<string, ReactChild>;
 	}
@@ -3296,7 +3280,7 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button'
 	 * Creates the translate animation when button is in focus.
 	 * @returns string
 	 */
-	export const useEuiButtonFocusCSS: () => any;
+	export const useEuiButtonFocusCSS: () => SerializedStyles;
 	/**
 	 * Map of `size` props to various sizings/scales
 	 * that should remain consistent across all buttons
@@ -8283,15 +8267,14 @@ declare module '@elastic/eui/src/services/hooks' {
 }
 declare module '@elastic/eui/src/services/theme/style_memoization' {
 	import React, { FunctionComponent, PropsWithChildren } from 'react';
-	import type { SerializedStyles, CSSObject } from '@emotion/react';
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks'; type Styles = SerializedStyles | CSSObject | string | null; type StylesMaps = Record<string, Styles | Record<string, Styles>>; type MemoizedStylesMap = WeakMap<Function, StylesMaps>;
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks'; type StylesMap = Record<string, any>; type MemoizedStylesMap = WeakMap<Function, StylesMap>;
 	export const EuiThemeMemoizedStylesContext: React.Context<MemoizedStylesMap>;
 	export const EuiThemeMemoizedStylesProvider: FunctionComponent<PropsWithChildren>;
 	/**
 	 * Hook that memoizes the returned values of components style fns/generators
 	 * per-theme
 	 */
-	export const useEuiMemoizedStyles: <T extends (theme: UseEuiTheme) => StylesMaps>(stylesGenerator: T) => ReturnType<T>;
+	export const useEuiMemoizedStyles: <T extends (theme: UseEuiTheme) => StylesMap>(stylesGenerator: T) => ReturnType<T>;
 	/**
 	 * HOC for class components
 	 * Syntax is mostly copied from withEuiTheme HOC
@@ -11268,17 +11251,9 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_collap
 }
 declare module '@elastic/eui/src/components/resizable_container/resizable_panel.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiResizablePanelStyles: (euiThemeContext: UseEuiTheme) => {
+	export const euiResizablePanelStyles: {
 	    euiResizablePanel: import("@emotion/utils").SerializedStyles;
 	    collapsed: import("@emotion/utils").SerializedStyles;
-	    paddingSizes: {
-	        none: null;
-	        xs: import("@emotion/utils").SerializedStyles;
-	        s: import("@emotion/utils").SerializedStyles;
-	        m: import("@emotion/utils").SerializedStyles;
-	        l: import("@emotion/utils").SerializedStyles;
-	        xl: import("@emotion/utils").SerializedStyles;
-	    };
 	};
 	export const euiResizablePanelContentStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiResizablePanel__content: import("@emotion/utils").SerializedStyles;
@@ -11404,7 +11379,7 @@ declare module '@elastic/eui/src/components/resizable_container/helpers' {
 
 }
 declare module '@elastic/eui/src/components/resizable_container/resizable_container.styles' {
-	export const euiResizableContainerStyles: () => {
+	export const euiResizableContainerStyles: {
 	    euiResizableContainer: import("@emotion/utils").SerializedStyles;
 	    horizontal: import("@emotion/utils").SerializedStyles;
 	    vertical: import("@emotion/utils").SerializedStyles;
@@ -17565,7 +17540,7 @@ declare module '@elastic/eui/src/components/header/header_links/header_links.sty
 
 }
 declare module '@elastic/eui/src/components/header/header_links/header_links' {
-	import { HTMLAttributes, FunctionComponent } from 'react';
+	import { ReactNode, HTMLAttributes, FunctionComponent } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { IconType } from '@elastic/eui/src/components/icon';
 	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
@@ -17574,7 +17549,14 @@ declare module '@elastic/eui/src/components/header/header_links/header_links' {
 	export const GUTTER_SIZES: readonly ["xs", "s", "m", "l"]; type EuiHeaderLinksGutterSize = (typeof GUTTER_SIZES)[number]; type EuiHeaderLinksPopoverButtonProps = Partial<EuiHeaderSectionItemButtonProps> & {
 	    iconType?: IconType;
 	};
-	export type EuiHeaderLinksProps = CommonProps & HTMLAttributes<HTMLElement> & {
+	export type EuiHeaderLinksProps = CommonProps & Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+	    /**
+	     * 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?: ReactNode | ((closeMobilePopover: () => void) => ReactNode);
 	    /**
 	     * Spacing between direct children
 	     */
@@ -29313,6 +29295,7 @@ declare module '@elastic/eui' {
 "euiToast.newNotification": any;
 "euiToast.notification": any;
 "euiToast.dismissToast": any;
+"euiIconTip.defaultAriaLabel": any;
 "euiTourFooter.endTour": any;
 "euiTourFooter.skipTour": any;
 "euiTourFooter.closeTour": any;

package/i18ntokens.json

@@ -4901,14 +4901,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 106,
+        "line": 114,
         "column": 4,
-        "index": 3070
+        "index": 3416
       },
       "end": {
-        "line": 106,
+        "line": 114,
         "column": 75,
-        "index": 3141
+        "index": 3487
       }
     },
     "filepath": "src/components/header/header_links/header_links.tsx"
@@ -4919,14 +4919,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 120,
+        "line": 131,
         "column": 4,
-        "index": 3472
+        "index": 3915
       },
       "end": {
-        "line": 120,
+        "line": 131,
         "column": 69,
-        "index": 3537
+        "index": 3980
       }
     },
     "filepath": "src/components/header/header_links/header_links.tsx"
@@ -5765,14 +5765,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 89,
+        "line": 88,
         "column": 6,
-        "index": 2724
+        "index": 2709
       },
       "end": {
-        "line": 98,
+        "line": 97,
         "column": 7,
-        "index": 3053
+        "index": 3038
       }
     },
     "filepath": "src/components/resizable_container/resizable_button.tsx"
@@ -5783,14 +5783,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 89,
+        "line": 88,
         "column": 6,
-        "index": 2724
+        "index": 2709
       },
       "end": {
-        "line": 98,
+        "line": 97,
         "column": 7,
-        "index": 3053
+        "index": 3038
       }
     },
     "filepath": "src/components/resizable_container/resizable_button.tsx"
@@ -5801,14 +5801,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 320,
+        "line": 321,
         "column": 32,
-        "index": 9679
+        "index": 9643
       },
       "end": {
-        "line": 323,
+        "line": 324,
         "column": 3,
-        "index": 9774
+        "index": 9738
       }
     },
     "filepath": "src/components/resizable_container/resizable_panel.tsx"
@@ -6785,6 +6785,24 @@
     },
     "filepath": "src/components/toast/toast.tsx"
   },
+  {
+    "token": "euiIconTip.defaultAriaLabel",
+    "defString": "Info",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 65,
+        "column": 27,
+        "index": 1855
+      },
+      "end": {
+        "line": 65,
+        "column": 76,
+        "index": 1904
+      }
+    },
+    "filepath": "src/components/tool_tip/icon_tip.tsx"
+  },
   {
     "token": "euiTourFooter.endTour",
     "defString": "End tour",

package/lib/components/header/header_links/header_links.js

@@ -88,6 +88,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"
@@ -101,7 +102,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, _extends({
       button: button,
@@ -113,7 +114,7 @@ var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     }, popoverProps), (0, _react2.jsx)("div", {
       className: "euiHeaderLinks__mobileList",
       css: styles.euiHeaderLinks__mobileList
-    }, children))));
+    }, renderedChildren))));
   });
 };
 exports.EuiHeaderLinks = EuiHeaderLinks;
@@ -122,6 +123,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/lib/components/icon/icon.js

@@ -244,8 +244,8 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
       } else {
         var Svg = icon;
 
-        // If it's an empty icon, or if there is no aria-label, aria-labelledby, or title it gets aria-hidden true
-        var isAriaHidden = icon === _empty.icon || !(this.props['aria-label'] || this.props['aria-labelledby'] || this.props.title);
+        // If there is no aria-label, aria-labelledby, or title it gets aria-hidden true
+        var isAriaHidden = !(this.props['aria-label'] || this.props['aria-labelledby'] || this.props.title);
 
         // If no aria-label or aria-labelledby is provided but there's a title, a titleId is generated
         //  The svg aria-labelledby attribute gets this titleId
@@ -265,7 +265,7 @@ var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
           "data-is-loaded": isLoaded || undefined,
           "data-is-loading": isLoading || undefined
         }, rest, {
-          "aria-hidden": isAriaHidden || undefined
+          "aria-hidden": isAriaHidden || rest['aria-hidden']
         }));
       }
     }

package/lib/components/panel/panel.js

@@ -62,11 +62,10 @@ var EuiPanel = function EuiPanel(_ref) {
     panelRef = _ref.panelRef,
     element = _ref.element,
     rest = _objectWithoutProperties(_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), _defineProperty({}, "euiPanel--".concat(paddingSizeToClassNameMap[paddingSize]), paddingSizeToClassNameMap[paddingSize]), className);
   if (rest.onClick && element !== 'div') {

package/lib/components/resizable_container/resizable_button.js

@@ -48,8 +48,7 @@ var EuiResizableButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref
     rest = _objectWithoutProperties(_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/lib/components/resizable_container/resizable_collapse_button.js

@@ -44,8 +44,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(_toConsumableArray(isCollapsed ? collapsedStyles : collapsibleStyles));

package/lib/components/resizable_container/resizable_container.js

@@ -67,8 +67,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/lib/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/lib/components/resizable_container/resizable_panel.js

@@ -148,15 +148,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/lib/components/resizable_container/resizable_panel.styles.js

@@ -1,17 +1,11 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.euiResizablePanelStyles = exports.euiResizablePanelContentStyles = void 0;
 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) { _defineProperty(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 _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 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
@@ -19,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/lib/components/selectable/selectable_list/selectable_list.js

@@ -427,14 +427,33 @@ 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) {
+              var _activeOptionEl$scrol;
+              // TODO: we can remove scrollIntoView's conditional chaining once jsdom stubs it
+              // @see https://github.com/jsdom/jsdom/issues/1695
+              (_activeOptionEl$scrol = activeOptionEl.scrollIntoView) === null || _activeOptionEl$scrol === void 0 ? void 0 : _activeOptionEl$scrol.call(activeOptionEl, {
+                block: 'nearest'
+              });
+            }
+          }
+        }
       }
       if (prevProps.visibleOptions !== visibleOptions || prevProps.options !== options) {
         var optionArray = visibleOptions || options;
@@ -477,14 +496,18 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         textWrap = _this$props10.textWrap,
         truncationProps = _this$props10.truncationProps,
         rest = _objectWithoutProperties(_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", _extends({
         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/lib/components/tool_tip/icon_tip.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiIconTip = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _i18n = require("../i18n");
 var _icon = require("../icon");
 var _tool_tip = require("./tool_tip");
 var _react2 = require("@emotion/react");
@@ -24,8 +25,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var EuiIconTip = function EuiIconTip(_ref) {
   var _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'questionInCircle' : _ref$type,
-    _ref$ariaLabel = _ref['aria-label'],
-    ariaLabel = _ref$ariaLabel === void 0 ? 'Info' : _ref$ariaLabel,
+    ariaLabel = _ref['aria-label'],
     color = _ref.color,
     size = _ref.size,
     iconProps = _ref.iconProps,
@@ -34,6 +34,7 @@ var EuiIconTip = function EuiIconTip(_ref) {
     _ref$delay = _ref.delay,
     delay = _ref$delay === void 0 ? 'regular' : _ref$delay,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var defaultAriaLabel = (0, _i18n.useEuiI18n)('euiIconTip.defaultAriaLabel', 'Info');
   return (0, _react2.jsx)(_tool_tip.EuiToolTip, _extends({
     position: position,
     delay: delay
@@ -42,7 +43,7 @@ var EuiIconTip = function EuiIconTip(_ref) {
     type: type,
     color: color,
     size: size,
-    "aria-label": ariaLabel
+    "aria-label": ariaLabel || defaultAriaLabel
   }, iconProps)));
 };
 exports.EuiIconTip = EuiIconTip;