@elastic/eui 64.0.0 → 64.0.3

package/es/components/toast/global_toast_list.styles.js

@@ -10,7 +10,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  * Side Public License, v 1.
  */
 import { css, keyframes } from '@emotion/react';
-import { euiBreakpoint, euiScrollBarStyles, logicalCSS, logicalSizeCSS } from '../../global_styling';
+import { euiBreakpoint, euiScrollBarStyles, logicalCSS, logicalCSSWithFallback, logicalSizeCSS } from '../../global_styling';
 export var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var euiToastWidth = euiTheme.base * 20;
@@ -20,7 +20,7 @@ export var euiGlobalToastListStyles = function euiGlobalToastListStyles(euiTheme
      * 2. Allow some padding for shadow
      */
     // Base
-    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", logicalCSS('max-height', '100vh'), ";overflow-y:auto;", logicalCSS('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
+    euiGlobalToastList: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;flex-direction:column;align-items:stretch;position:fixed;z-index:", euiTheme.levels.toast, ";", logicalCSS('bottom', 0), ";", logicalCSS('width', "".concat(euiToastWidth + euiTheme.base * 5, "px")), ";", logicalCSS('max-height', '100vh'), ";", logicalCSSWithFallback('overflow-y', 'auto'), ";scrollbar-width:none;&::-webkit-scrollbar{", logicalSizeCSS(0, 0), ";}&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";", logicalCSS('padding-right', euiTheme.size.base), ";", logicalCSS('padding-vertical', euiTheme.size.base), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('width', '100%'), ";}};label:euiGlobalToastList;"),
     // Variants
     right: /*#__PURE__*/css("&:not(:empty){", logicalCSS('right', 0), ";", logicalCSS('padding-left', "".concat(euiTheme.base * 4, "px")), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('padding-left', euiTheme.size.base), ";}};label:right;"),
     left: /*#__PURE__*/css("&:not(:empty){", logicalCSS('left', 0), ";", logicalCSS('padding-right', "".concat(euiTheme.base * 4, "px")), ";}", euiBreakpoint(euiThemeContext, ['xs', 's']), "{&:not(:empty){", logicalCSS('padding-right', euiTheme.size.base), ";}};label:left;")

package/es/global_styling/functions/logicals.js

@@ -62,8 +62,8 @@ var logicalSize = {
   'min-width': 'min-inline-size'
 };
 var logicalOverflow = {
-  'overflow-x': 'overflow-block',
-  'overflow-y': 'overflow-inline'
+  'overflow-x': 'overflow-inline',
+  'overflow-y': 'overflow-block'
 };
 var logicalBorders = {
   'border-horizontal': 'border-inline',
@@ -107,6 +107,20 @@ export var LOGICAL_PROPERTIES = keysOf(logicals);
 export var logicalCSS = function logicalCSS(property, value) {
   return "".concat(logicals[property], ": ").concat(value, ";");
 };
+/**
+ * Some logical properties are not yet fully supported by all browsers.
+ * For those cases, we should use the old property as a fallback for
+ * browsers missing support, while allowing supporting browsers to use
+ * the logical properties.
+ *
+ * Examples:
+ * https://caniuse.com/?search=overflow-block
+ * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+ */
+
+export var logicalCSSWithFallback = function logicalCSSWithFallback(property, value) {
+  return "\n  ".concat(property, ": ").concat(value, ";\n  ").concat(logicalCSS(property, value), "\n");
+};
 /**
  *
  * @param property A string that is a valid CSS logical property

package/es/global_styling/mixins/_helpers.js

@@ -7,6 +7,7 @@
  */
 import { useEuiTheme } from '../../services/theme';
 import { transparentize } from '../../services/color';
+import { logicalCSS, logicalCSSWithFallback } from '../functions';
 /**
  * Set scroll bar appearance on Chrome (and firefox).
  * All parameters are optional and default to specific global settings.
@@ -34,7 +35,7 @@ export var euiScrollBarStyles = function euiScrollBarStyles(_ref) {
   // so it's being added to this mixin for allowing support wherever custom scrollbars are
 
   var firefoxSupport = "scrollbar-color: ".concat(thumbColor, " ").concat(trackColor, ";");
-  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      width: ").concat(scrollBarSize, ";\n      height: ").concat(scrollBarSize, ";\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
+  return "scrollbar-width: ".concat(width, ";\n\n    &::-webkit-scrollbar {\n      ").concat(logicalCSS('width', scrollBarSize), "\n      ").concat(logicalCSS('height', scrollBarSize), "\n    }\n\n    &::-webkit-scrollbar-thumb {\n      background-color: ").concat(thumbColor, ";\n      background-clip: content-box;\n      border-radius: ").concat(scrollBarSize, ";\n      border: ").concat(scrollBarCorner, " solid ").concat(trackColor, ";\n    }\n\n    &::-webkit-scrollbar-corner,\n    &::-webkit-scrollbar-track {\n      background-color: ").concat(trackColor, ";\n    }\n\n    ").concat(firefoxSupport, "\n  ");
 };
 export var useEuiScrollBar = function useEuiScrollBar(options) {
   var euiTheme = useEuiTheme();
@@ -82,12 +83,11 @@ var euiOverflowShadowStyles = function euiOverflowShadowStyles(_ref3) {
  */
 
 
-// TODO: How do we use Emotion to output the CSS class utilities instead?
 export var euiYScroll = function euiYScroll(euiTheme) {
   var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       height = _ref5.height;
 
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  height: ").concat(height || '100%', ";\n  overflow-y: auto;\n  overflow-x: hidden;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat(logicalCSS('height', height || '100%'), "\n  ").concat(logicalCSSWithFallback('overflow-y', 'auto'), "\n  ").concat(logicalCSSWithFallback('overflow-x', 'hidden'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiYScroll = function useEuiYScroll() {
   var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
@@ -118,7 +118,7 @@ export var useEuiYScrollWithShadows = function useEuiYScrollWithShadows() {
   });
 };
 export var euiXScroll = function euiXScroll(euiTheme) {
-  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  overflow-x: auto;\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
+  return "\n  ".concat(euiScrollBarStyles(euiTheme), "\n  ").concat(logicalCSSWithFallback('overflow-x', 'auto'), "\n  &:focus {\n    outline: none; /* 1 */\n  }\n");
 };
 export var useEuiXScroll = function useEuiXScroll() {
   var euiTheme = useEuiTheme();
@@ -158,4 +158,11 @@ export var useEuiOverflowScroll = function useEuiOverflowScroll(direction) {
     direction: direction,
     mask: mask
   });
+};
+/**
+ * For quickly applying a full-height element whether using flex or not
+ */
+
+export var euiFullHeight = function euiFullHeight() {
+  return "\n  ".concat(logicalCSS('height', '100%'), "\n  flex: 1 1 auto;\n  overflow: hidden;\n");
 };

package/es/global_styling/mixins/_states.js

@@ -15,7 +15,8 @@ import { useEuiTheme } from '../../services';
  * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
  * @param color Accepts any CSS color, **Note: only works in -webkit-**
  */
-export var euiFocusRing = function euiFocusRing(euiTheme) {
+export var euiFocusRing = function euiFocusRing(_ref) {
+  var euiTheme = _ref.euiTheme;
   var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'center';
   var options = arguments.length > 2 ? arguments[2] : undefined;
   // Width is enforced as a constant at the global theme layer
@@ -40,9 +41,7 @@ export var euiFocusRing = function euiFocusRing(euiTheme) {
   return "\n    outline: ".concat(outlineWidth, " solid ").concat(outlineColor, ";\n    outline-offset: ").concat(outlineOffset, ";\n\n    // \uD83D\uDC40 Chrome respects :focus-visible and allows coloring the `auto` style\n    &:focus-visible {\n      outline-style: auto;\n    }\n\n    // \uD83D\uDE45\u200D\u2640\uFE0F But Chrome also needs to have the outline forcefully removed from regular `:focus` state\n    &:not(:focus-visible) {\n      outline: none;\n    }\n  ");
 };
 export var useEuiFocusRing = function useEuiFocusRing(offset, color) {
-  var _useEuiTheme = useEuiTheme(),
-      euiTheme = _useEuiTheme.euiTheme;
-
+  var euiTheme = useEuiTheme();
   return euiFocusRing(euiTheme, offset, {
     color: color
   });

package/es/global_styling/mixins/_typography.js

@@ -7,6 +7,7 @@
  */
 import { euiLineHeightFromBaseline, euiFontSizeFromScale } from '../functions/typography';
 import { useEuiTheme } from '../../services/theme/hooks';
+import { logicalCSS } from '../functions';
 
 /**
  * Returns font-size and line-height
@@ -36,7 +37,8 @@ export var euiTextBreakWord = function euiTextBreakWord() {
 
 export var euiTextTruncate = function euiTextTruncate() {
   var maxWidth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '100%';
-  return "\n  max-width: ".concat(maxWidth, "; // Ensure that the node has a maximum width after which truncation can occur\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
+  return "\n  ".concat(logicalCSS('max-width', maxWidth) // Ensure that the node has a maximum width after which truncation can occur
+  , "\n  overflow: hidden !important;\n  text-overflow: ellipsis !important;\n  white-space: nowrap !important;\n");
 };
 /**
  * Fixed-width numbers for tabular data

package/es/global_styling/reset/global_styles.js

@@ -42,7 +42,7 @@ export var EuiGlobalStyles = function EuiGlobalStyles(_ref) {
    * Final styles
    */
 
-  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiTheme), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
+  var styles = /*#__PURE__*/css(reset, " html{", scrollbarStyles, " ", fontReset, " text-size-adjust:100%;font-kerning:normal;height:100%;background-color:", colors.body, ";color:", colors.text, ";}code,pre,kbd,samp{font-family:", font.familyCode, ";}input,textarea,select{", fontReset, ";}button{font-family:", font.family, ";}em{font-style:italic;}strong{font-weight:", font.weight.bold, ";}*:focus{", euiFocusRing(euiThemeContext), ";}::selection{background:", transparentize(colors.primary, colorMode === 'LIGHT' ? 0.1 : 0.2), ";}a{color:", colors.primaryText, ";&,&:hover,&:focus{text-decoration:none;}}.euiBody-hasPortalContent{position:relative;};label:styles;");
   return ___EmotionJSX(Global, {
     styles: styles
   });

package/es/global_styling/utility/utility.js

@@ -7,11 +7,19 @@
  */
 import React from 'react';
 import { Global, css } from '@emotion/react';
+import { useEuiTheme } from '../../services/theme/hooks';
 import { euiScreenReaderOnly } from '../../components/accessibility/screen_reader_only/screen_reader_only.styles';
+import { euiFullHeight, euiTextBreakWord, euiTextTruncate, euiNumberFormat, euiScrollBarStyles, euiYScroll, euiXScroll, euiYScrollWithShadows, euiXScrollWithShadows, euiBreakpoint } from '../mixins';
+import { logicalCSS } from '../functions';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var globalStyles = /*#__PURE__*/css(".euiScreenReaderOnly{", euiScreenReaderOnly(), ";};label:globalStyles;");
+export var globalStyles = function globalStyles(euiThemeContext) {
+  return /*#__PURE__*/css(".euiScreenReaderOnly{", euiScreenReaderOnly(), ";}.eui-alignBaseline{vertical-align:baseline!important;}.eui-alignBottom{vertical-align:bottom!important;}.eui-alignMiddle{vertical-align:middle!important;}.eui-alignTop{vertical-align:top!important;}.eui-displayBlock{display:block!important;}.eui-displayInline{display:inline!important;}.eui-displayInlineBlock{display:inline-block!important;}.eui-fullWidth{display:block!important;", logicalCSS('width', '100% !important'), ";}.eui-fullHeight{", euiFullHeight(), ";}.eui-textCenter{text-align:center!important;}.eui-textLeft{text-align:start!important;}.eui-textRight{text-align:end!important;}.eui-textNoWrap{white-space:nowrap!important;}.eui-textInheritColor{color:inherit!important;}.eui-textBreakWord{", euiTextBreakWord(), ";}.eui-textBreakAll{overflow-wrap:break-word!important;word-break:break-all!important;}.eui-textBreakNormal{overflow-wrap:normal!important;word-wrap:normal!important;word-break:normal!important;}.eui-textTruncate{", euiTextTruncate(), ";}.eui-textNumber{", euiNumberFormat(euiThemeContext), ";}.eui-scrollBar{", euiScrollBarStyles(euiThemeContext), ";}.eui-yScroll{", euiYScroll(euiThemeContext), ";}.eui-xScroll{", euiXScroll(euiThemeContext), ";}.eui-yScrollWithShadows{", euiYScrollWithShadows(euiThemeContext), ";}.eui-xScrollWithShadows{", euiXScrollWithShadows(euiThemeContext), ";}[class*='eui-showFor']{display:none!important;}", Object.keys(euiThemeContext.euiTheme.breakpoint).map(function (size) {
+    return "\n      .eui-hideFor--".concat(size, " {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: none !important;\n        }\n      }\n      .eui-showFor--").concat(size, " {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: inline !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--block {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--inlineBlock {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: inline-block !important;\n        }\n      }\n      .eui-showFor--").concat(size, "--flex {\n        ").concat(euiBreakpoint(euiThemeContext, [size]), " {\n          display: flex !important;\n        }\n      }");
+  }), ";;label:globalStyles;");
+};
 export var EuiUtilityClasses = function EuiUtilityClasses() {
+  var euiTheme = useEuiTheme();
   return ___EmotionJSX(Global, {
-    styles: globalStyles
+    styles: globalStyles(euiTheme)
   });
 };

package/es/services/theme/hooks.js

@@ -7,18 +7,21 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { forwardRef, useContext } from 'react';
+import React, { forwardRef, useContext, useMemo } from 'react';
 import { EuiThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var useEuiTheme = function useEuiTheme() {
   var theme = useContext(EuiThemeContext);
   var colorMode = useContext(EuiColorModeContext);
   var modifications = useContext(EuiModificationsContext);
-  return {
-    euiTheme: theme,
-    colorMode: colorMode,
-    modifications: modifications
-  };
+  var assembledTheme = useMemo(function () {
+    return {
+      euiTheme: theme,
+      colorMode: colorMode,
+      modifications: modifications
+    };
+  }, [theme, colorMode, modifications]);
+  return assembledTheme;
 };
 // Provide the component props interface as the generic to allow the docs props table to populate.
 // e.g., `const EuiComponent = withEuiTheme<EuiComponentProps>(_EuiComponent)`
@@ -26,17 +29,9 @@ export var withEuiTheme = function withEuiTheme(Component) {
   var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
 
   var Render = function Render(props, ref) {
-    var _useEuiTheme = useEuiTheme(),
-        euiTheme = _useEuiTheme.euiTheme,
-        colorMode = _useEuiTheme.colorMode,
-        modifications = _useEuiTheme.modifications;
-
+    var theme = useEuiTheme();
     return ___EmotionJSX(Component, _extends({
-      theme: {
-        euiTheme: euiTheme,
-        colorMode: colorMode,
-        modifications: modifications
-      },
+      theme: theme,
       ref: ref
     }, props));
   };

package/eui.d.ts

@@ -1500,57 +1500,6 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	    danger: import("@emotion/utils").SerializedStyles;
 	};
 
-}
-declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
-	import { CSSProperties } from 'react';
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
-	/**
-	 * Set scroll bar appearance on Chrome (and firefox).
-	 * All parameters are optional and default to specific global settings.
-	 */
-	export interface EuiScrollBarStyles {
-	    thumbColor?: CSSProperties['backgroundColor'];
-	    trackColor?: CSSProperties['backgroundColor'];
-	    /**
-	     * Defaults to `thin`. Use `auto` only for large page scrollbars
-	     */
-	    width?: CSSProperties['scrollbarWidth'];
-	    /**
-	     * Overall width (height for horizontal scrollbars)
-	     */
-	    size?: CSSProperties['width'];
-	    /**
-	     * Corner sizes are usually determined by `width` and
-	     * are used as an inset border and therefore a smaller corner size means a larger thumb
-	     */
-	    corner?: CSSProperties['borderWidth'];
-	}
-	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
-	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
-	/**
-	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
-	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
-	 *    Others like Safari, won't show anything at all.
-	 */
-	interface _EuiYScroll {
-	    height?: CSSProperties['height'];
-	}
-	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
-	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
-	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
-	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
-	export const useEuiXScroll: () => string;
-	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
-	export const useEuiXScrollWithShadows: () => string;
-	interface EuiScrollOverflowStyles {
-	    direction?: 'y' | 'x';
-	    mask?: boolean;
-	}
-	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
-	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
-	export {};
-
 }
 declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	/**
@@ -1635,6 +1584,17 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
 	 */
 	export const logicalCSS: (property: LogicalProperties, value?: any) => string;
+	/**
+	 * Some logical properties are not yet fully supported by all browsers.
+	 * For those cases, we should use the old property as a fallback for
+	 * browsers missing support, while allowing supporting browsers to use
+	 * the logical properties.
+	 *
+	 * Examples:
+	 * https://caniuse.com/?search=overflow-block
+	 * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+	 */
+	export const logicalCSSWithFallback: (property: LogicalProperties, value?: any) => string;
 	/**
 	 *
 	 * @param property A string that is a valid CSS logical property
@@ -1767,6 +1727,61 @@ declare module '@elastic/eui/src/global_styling/functions' {
 	export * from '@elastic/eui/src/global_styling/functions/size';
 	export * from '@elastic/eui/src/global_styling/functions/typography';
 
+}
+declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
+	import { CSSProperties } from 'react';
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+	/**
+	 * Set scroll bar appearance on Chrome (and firefox).
+	 * All parameters are optional and default to specific global settings.
+	 */
+	export interface EuiScrollBarStyles {
+	    thumbColor?: CSSProperties['backgroundColor'];
+	    trackColor?: CSSProperties['backgroundColor'];
+	    /**
+	     * Defaults to `thin`. Use `auto` only for large page scrollbars
+	     */
+	    width?: CSSProperties['scrollbarWidth'];
+	    /**
+	     * Overall width (height for horizontal scrollbars)
+	     */
+	    size?: CSSProperties['width'];
+	    /**
+	     * Corner sizes are usually determined by `width` and
+	     * are used as an inset border and therefore a smaller corner size means a larger thumb
+	     */
+	    corner?: CSSProperties['borderWidth'];
+	}
+	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
+	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
+	/**
+	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+	 *    Others like Safari, won't show anything at all.
+	 */
+	interface _EuiYScroll {
+	    height?: CSSProperties['height'];
+	}
+	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
+	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScroll: () => string;
+	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScrollWithShadows: () => string;
+	interface EuiScrollOverflowStyles {
+	    direction?: 'y' | 'x';
+	    mask?: boolean;
+	}
+	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
+	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
+	/**
+	 * For quickly applying a full-height element whether using flex or not
+	 */
+	export const euiFullHeight: () => string;
+	export {};
+
 }
 declare module '@elastic/eui/src/global_styling/mixins/_padding' {
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
@@ -1796,7 +1811,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_states' {
 	 * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
 	 * @param color Accepts any CSS color, **Note: only works in -webkit-**
 	 */
-	export const euiFocusRing: (euiTheme: UseEuiTheme['euiTheme'], offset?: _EuiFocusRingOffset, options?: {
+	export const euiFocusRing: ({ euiTheme }: UseEuiTheme, offset?: _EuiFocusRingOffset, options?: {
 	    color?: CSSProperties['outlineColor'];
 	} | undefined) => string;
 	export const useEuiFocusRing: (offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
@@ -2478,7 +2493,7 @@ declare module '@elastic/eui/src/components/button/button_empty/button_empty' {
 	    /**
 	     * Object of props passed to the <span/> wrapping the button's content
 	     */
-	    contentProps?: EuiButtonContentType;
+	    contentProps?: CommonProps & EuiButtonContentType;
 	} type EuiButtonEmptyPropsForAnchor = PropsForAnchor<CommonEuiButtonEmptyProps>; type EuiButtonEmptyPropsForButton = PropsForButton<CommonEuiButtonEmptyProps>;
 	export type EuiButtonEmptyProps = ExclusiveUnion<EuiButtonEmptyPropsForAnchor, EuiButtonEmptyPropsForButton>;
 	export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps>;
@@ -2918,8 +2933,8 @@ declare module '@elastic/eui/src/components/link/link.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiLinkHoverCSS: () => string;
 	export const euiLinkFocusCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const euiLinkCSS: (euiTheme: UseEuiTheme['euiTheme']) => string;
-	export const euiLinkStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiLinkCSS: (euiThemeContext: UseEuiTheme) => string;
+	export const euiLinkStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiLink: import("@emotion/utils").SerializedStyles;
 	    disabled: import("@emotion/utils").SerializedStyles;
 	    primary: import("@emotion/utils").SerializedStyles;
@@ -3737,7 +3752,7 @@ declare module '@elastic/eui/src/components/progress/progress' {
 	    /**
 	     * Object of props passed to the <span/> wrapping the determinate progress's label
 	     */
-	    labelProps?: HTMLAttributes<HTMLSpanElement>;
+	    labelProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
 	};
 	export const EuiProgress: FunctionComponent<ExclusiveUnion<Determinate, Indeterminate>>;
 	export {};
@@ -12289,12 +12304,13 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/pretty
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button' {
 	import { FunctionComponent, ButtonHTMLAttributes, MouseEventHandler } from 'react';
 	import { LocaleSpecifier } from 'moment';
+	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiPopoverProps } from '@elastic/eui/src/components/popover';
 	import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
 	import { EuiDatePopoverContentProps } from '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_content';
 	export interface EuiDatePopoverButtonProps {
 	    className?: string;
-	    buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+	    buttonProps?: CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;
 	    dateFormat: string;
 	    isDisabled?: boolean;
 	    isInvalid?: boolean;
@@ -13220,12 +13236,12 @@ declare module '@elastic/eui/src/components/expression/expression' {
 	     * First part of the expression
 	     */
 	    description: ReactNode;
-	    descriptionProps?: HTMLAttributes<HTMLSpanElement>;
+	    descriptionProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
 	    /**
 	     * Second part of the expression
 	     */
 	    value?: ReactNode;
-	    valueProps?: HTMLAttributes<HTMLSpanElement>;
+	    valueProps?: CommonProps & HTMLAttributes<HTMLSpanElement>;
 	    /**
 	     * Color of the `description`
 	     */
@@ -13385,7 +13401,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	    /**
 	     * Object of props passed to the <span/> wrapping the button's content
 	     */
-	    contentProps?: EuiButtonDisplayContentType;
+	    contentProps?: CommonProps & EuiButtonDisplayContentType;
 	    style?: CSSProperties;
 	}
 	export type EuiButtonDisplayPropsForAnchor = PropsForAnchor<EuiButtonDisplayCommonProps, {
@@ -13814,7 +13830,7 @@ declare module '@elastic/eui/src/components/image/image_types' {
 	    /**
 	     * Props to add to the wrapping figure element
 	     */
-	    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+	    wrapperProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
 	};
 	export type EuiImageWrapperProps = Pick<EuiImageProps, 'alt' | 'caption' | 'float' | 'margin' | 'hasShadow' | 'wrapperProps' | 'fullScreenIconColor' | 'allowFullScreen'> & {
 	    isFullWidth: boolean;
@@ -14987,8 +15003,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content' {
 	    role?: HTMLAttributes['role'] | null;
 	};
 	/**
-	 * **DEPRECATED**
-	 * Use EuiPageSection instead
+	 * @deprecated Use EuiPageSection instead
 	 */
 	export const EuiPageContent_Deprecated: FunctionComponent<EuiPageContentProps>;
 
@@ -15006,8 +15021,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_body'
 	    paddingSize?: typeof PADDING_SIZES[number];
 	}
 	/**
-	 * **DEPRECATED**
-	 * Use EuiPageSection instead
+	 * @deprecated Use EuiPageSection instead
 	 */
 	export const EuiPageContentBody_Deprecated: FunctionComponent<EuiPageContentBodyProps>;
 
@@ -15023,8 +15037,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_heade
 	    responsive?: boolean;
 	}
 	/**
-	 * **DEPRECATED**
-	 * Use EuiPageHeader instead
+	 * @deprecated Use EuiPageHeader instead
 	 */
 	export const EuiPageContentHeader_Deprecated: FunctionComponent<EuiPageContentHeaderProps>;
 
@@ -15035,8 +15048,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_heade
 	export interface EuiPageContentHeaderSectionProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
 	}
 	/**
-	 * **DEPRECATED**
-	 * Use EuiPageHeader instead
+	 * @deprecated Use EuiPageHeader instead
 	 */
 	export const EuiPageContentHeaderSection_Deprecated: FunctionComponent<EuiPageContentHeaderSectionProps>;
 
@@ -15246,7 +15258,7 @@ declare module '@elastic/eui/src/components/page/page_section/page_section.style
 
 }
 declare module '@elastic/eui/src/components/page/page_section/page_section' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { FunctionComponent, ComponentType, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
 	import { _EuiPageBottomBorder } from '@elastic/eui/src/components/page/_bottom_border';
@@ -15273,8 +15285,12 @@ declare module '@elastic/eui/src/components/page/page_section/page_section' {
 	    /**
 	     * Passed down to the div wrapper of the section contents
 	     */
-	    contentProps?: HTMLAttributes<HTMLDivElement>;
-	} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+	    contentProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
+	    /**
+	     * Sets which HTML element to render.
+	     */
+	    component?: keyof JSX.IntrinsicElements | ComponentType;
+	} & Omit<HTMLAttributes<Element>, 'color'>;
 	export const EuiPageSection: FunctionComponent<EuiPageSectionProps>;
 
 }
@@ -15298,8 +15314,7 @@ declare module '@elastic/eui/src/components/page/page_side_bar/page_side_bar' {
 	    paddingSize?: typeof PADDING_SIZES[number];
 	}
 	/**
-	 * **DEPRECATED**
-	 * Use the new EuiPageSidebar instead
+	 * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
 	 */
 	export const EuiPageSideBar_Deprecated: FunctionComponent<EuiPageSideBarProps>;
 
@@ -15427,7 +15442,9 @@ declare module '@elastic/eui/src/components/page/page_template' {
 	/**
 	 * This component has been deprecated in favor of the new
 	 * namespaced version. You can still import this component
-	 * for a period of time by importing `as EuiPageTemplate`.
+	 * until August 2023 by importing `as EuiPageTemplate`.
+	 *
+	 * @deprecated use EuiPageTemplate from page_template/page_template instead
 	 */
 	export const EuiPageTemplate_Deprecated: FunctionComponent<EuiPageTemplateProps_Deprecated>;
 
@@ -15619,6 +15636,8 @@ declare module '@elastic/eui/src/components/page_template' {
 }
 declare module '@elastic/eui/src/global_styling/utility/utility' {
 	
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export const globalStyles: (euiThemeContext: UseEuiTheme) => import("@emotion/utils").SerializedStyles;
 	export const EuiUtilityClasses: () => JSX.Element;
 
 }
@@ -15648,7 +15667,7 @@ declare module '@elastic/eui/src/components/provider/cache/cache_provider' {
 	import { PropsWithChildren } from 'react';
 	import { EmotionCache } from '@emotion/cache';
 	export interface EuiCacheProviderProps {
-	    cache?: EmotionCache;
+	    cache?: false | EmotionCache;
 	}
 	export const EuiCacheProvider: ({ cache, children, }: PropsWithChildren<EuiCacheProviderProps>) => JSX.Element;
 
@@ -17304,7 +17323,7 @@ declare module '@elastic/eui/src/components/side_nav/side_nav' {
 	    /**
 	     * Adds a couple extra #EuiSideNavHeading props and extends the props of EuiTitle that wraps the `heading`
 	     */
-	    headingProps?: EuiSideNavHeadingProps;
+	    headingProps?: CommonProps & EuiSideNavHeadingProps;
 	    /**
 	     * When called, toggles visibility of the navigation menu at mobile responsive widths. The callback should set the `isOpenOnMobile` prop to actually toggle navigation visibility.
 	     */
@@ -18506,7 +18525,7 @@ declare module '@elastic/eui/src/components/basic_table/collapsed_item_actions'
 	    togglePopover: () => void;
 	    closePopover: () => void;
 	    onPopoverBlur: () => void;
-	    registerPopoverDiv: (popoverDiv: HTMLDivElement) => void;
+	    registerPopoverDiv: (popoverDiv: HTMLDivElement | null) => void;
 	    componentWillUnmount(): void;
 	    onClickItem: (onClickAction: (() => void) | undefined) => void;
 	    render(): JSX.Element;
@@ -19293,7 +19312,7 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_panel'
 	    /**
 	     * Props to add to the wrapping `.euiResizablePanel` div
 	     */
-	    wrapperProps?: HTMLAttributes<HTMLDivElement>;
+	    wrapperProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
 	    /**
 	     * Padding to add directly to the wrapping `.euiResizablePanel` div
 	     * Gives space around the actual panel.

package/i18ntokens.json

@@ -149,11 +149,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 169,
+        "line": 170,
         "column": 6
       },
       "end": {
-        "line": 169,
+        "line": 170,
         "column": 80
       }
     },
@@ -165,11 +165,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 186,
+        "line": 187,
         "column": 6
       },
       "end": {
-        "line": 186,
+        "line": 187,
         "column": 80
       }
     },
@@ -1941,11 +1941,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 92,
+        "line": 93,
         "column": 23
       },
       "end": {
-        "line": 96,
+        "line": 97,
         "column": 3
       }
     },
@@ -1957,11 +1957,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 97,
+        "line": 98,
         "column": 24
       },
       "end": {
-        "line": 101,
+        "line": 102,
         "column": 3
       }
     },

package/lib/components/basic_table/collapsed_item_actions.js

@@ -108,8 +108,7 @@ var CollapsedItemActions = /*#__PURE__*/function (_Component) {
     _defineProperty(_assertThisInitialized(_this), "registerPopoverDiv", function (popoverDiv) {
       if (!_this.popoverDiv) {
         _this.popoverDiv = popoverDiv;
-
-        _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
+        _this.popoverDiv && _this.popoverDiv.addEventListener('focusout', _this.onPopoverBlur);
       }
     });