@elastic/eui 119.0.0 → 119.1.0

package/optimize/es/components/button/button_group/button_group.styles.js

@@ -8,11 +8,15 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiDisabledSelector, logicalCSS } from '../../../global_styling';
+import { euiButtonSizeMap, euiDisabledSelector, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { highContrastModeStyles, preventForcedColors } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../../form/form.styles';
+var hasButtonOnlySelector = ':not(:has(.euiButtonIcon))';
+var hasButtonIconOnlySelector = ':not(:has(.euiButton, .euiButtonEmpty))';
+var buttonItemSelector = '.euiButtonGroup__item, .euiToolTipAnchor, .euiPopover, .euiButton';
+var buttonOnlyItemSelector = "*:is(".concat(buttonItemSelector, "):not(:has(.euiButtonIcon))");
 export var euiButtonGroupStyles = {
-  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
+  euiButtonGroup: /*#__PURE__*/css("display:inline-block;", logicalCSS('max-width', '100%'), " position:relative;&:where([data-variant='segmented']){&", hasButtonIconOnlySelector, "{display:flex;}};label:euiButtonGroup;"),
   fullWidth: process.env.NODE_ENV === "production" ? {
     name: "jl0hie-fullWidth",
     styles: "display:block;label:fullWidth;"
@@ -24,23 +28,58 @@ export var euiButtonGroupStyles = {
 };
 export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var buttonSizes = {
-    s: "\n      border-radius: ".concat(euiTheme.border.radius.small, ";\n      ").concat(_highContrastStyles(euiThemeContext), "\n    "),
-    m: "\n      border-radius: ".concat(euiTheme.border.radius.medium, ";\n      ").concat(_highContrastStyles(euiThemeContext), "\n    ")
+  var buttonSizeMap = euiButtonSizeMap(euiThemeContext);
+  var containerPadding = euiTheme.size.xs;
+  var splitPadding = mathWithUnits(containerPadding, function (x) {
+    return x / 2;
+  });
+  var insetSize = function insetSize(height) {
+    return mathWithUnits([height, containerPadding], function (x, y) {
+      return x - y * 2;
+    });
   };
+  var buttonGroupVariables = {
+    gap: {
+      regular: euiTheme.size.xs,
+      dividers: mathWithUnits([euiTheme.size.xs, euiTheme.border.width.thin], function (x, y) {
+        return x + y;
+      })
+    },
+    // TODO: use from buttonSizeMap once added via EuiSplitButton:
+    // https://github.com/elastic/eui/pull/9865
+    radius: {
+      outer: euiTheme.border.radius.medium,
+      inner: '2px' // should eventually be a token, but currently small and medium have the same value
+    },
+    size: {
+      s: insetSize(buttonSizeMap.s.height),
+      m: insetSize(buttonSizeMap.m.height)
+    }
+  };
+  var dividerOffset = mathWithUnits([buttonGroupVariables.gap.dividers, euiTheme.border.width.thin], function (x, y) {
+    return (x + y) / 2;
+  });
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     backgroundColor = _euiFormVariables.backgroundColor,
     borderColor = _euiFormVariables.borderColor;
+  var dividerStyles = "\n    gap: ".concat(buttonGroupVariables.gap.dividers, ";\n\n    .euiButtonGroup__item {\n      position: relative;\n\n      /* block border */\n      &::before {\n        content: '';\n        position: absolute;\n        inset-block-start: -").concat(dividerOffset, ";\n        inset-inline-start: -").concat(mathWithUnits(containerPadding, function (x) {
+    return x / 2;
+  }), ";\n        inline-size: calc(\n          100% + ").concat(mathWithUnits(containerPadding, function (x) {
+    return x * 2;
+  }), "\n        );\n        block-size: ").concat(euiTheme.border.width.thin, ";\n        border-block-start: ").concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBasePlain, ";\n        pointer-events: none;\n      }\n\n      /* inline border */\n      &::after {\n        content: '';\n        position: absolute;\n        inset-inline-start: -").concat(dividerOffset, ";\n        block-size: calc(\n          var(--euiButtonGroupButtonInsetSize) - ").concat(euiTheme.size.s, "\n        );\n        inline-size: ").concat(euiTheme.border.width.thin, ";\n        border-inline-start: ").concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBasePlain, ";\n        pointer-events: none;\n      }\n    }\n\n    &:where([data-layout='horizontal'] &) {\n      &:where(:is(").concat(hasButtonIconOnlySelector, ") &) {\n        .euiButtonGroup__item::before {\n          inset-inline-start: 0;\n          inline-size: 100%;\n        }\n      }\n    }\n\n    &:where([data-layout='vertical'] &) {\n      &:where(:is(").concat(hasButtonIconOnlySelector, ") &) {\n        .euiButtonGroup__item::before {\n          inset-inline-start: auto;\n          inline-size: calc(\n            var(--euiButtonGroupButtonInsetSize) - ").concat(euiTheme.size.s, "\n          );\n        }\n      }\n    }\n  ");
+  var segmentedChildrenStyles = "\n    /* Buttons are used inset and shouldn't have their own borders */\n    .euiButton,\n    .euiButtonIcon {\n      border: none;\n      pointer-events: auto; /* Ensure buttons are still clickable in jsdom */\n\n      &::before {\n        border-radius: inherit;\n      }\n    }\n\n    /* Adjust children for inset behavior */\n    ".concat(buttonItemSelector, ", \n    .euiButtonIcon {\n      display: inline-flex;\n      align-items: center;\n      block-size: var(--euiButtonGroupButtonInsetSize);\n      border-radius: ").concat(buttonGroupVariables.radius.inner, ";\n    }\n\n    .euiButtonIcon {\n      inline-size: var(--euiButtonGroupButtonInsetSize);\n    }\n\n    /* Only non-icon buttons auto-grow/shrink */\n    .euiButton,\n    ").concat(buttonOnlyItemSelector, " {\n      flex: 1;\n      min-inline-size: auto;\n    }\n  ");
   return {
     // Base
-    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where([data-size='s'] &){", buttonSizes.s, ";}&:where([data-size='m'] &){", buttonSizes.m, ";};label:euiButtonGroup__buttons;"),
-    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";}.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;};label:fullWidth;"),
+    euiButtonGroup__container: /*#__PURE__*/css("&:where([data-variant='segmented'] &){position:relative;display:inline-flex;align-items:center;max-inline-size:100%;padding:", splitPadding, ";border-radius:", buttonGroupVariables.radius.outer, ";background-color:", euiTheme.colors.backgroundBasePlain, ";&:where([data-size='s'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.s, ";min-block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m'] &){--euiButtonGroupButtonInsetSize:", buttonGroupVariables.size.m, ";min-block-size:", buttonSizeMap.m.height, ";}&::after{content:'';position:absolute;inset:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBasePlain, ";border-radius:inherit;pointer-events:none;}};label:euiButtonGroup__container;"),
+    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where([data-variant='segmented'] &){position:relative;display:inline-flex;align-items:center;flex-wrap:wrap;gap:", buttonGroupVariables.gap.regular, ";max-inline-size:100%;padding:", splitPadding, ";overflow:hidden;*:where(.euiButton, .euiButtonIcon):is(", euiDisabledSelector, "){background-color:transparent;}&:where([data-dividers='true'] &){", dividerStyles, ";}", segmentedChildrenStyles, " &:where([data-layout='vertical'] &){flex-direction:column;.euiButtonGroup__item{justify-content:center;}}};label:euiButtonGroup__buttons;"),
+    noWrap: /*#__PURE__*/css("&:where([data-variant='segmented'] &){flex-wrap:nowrap;", buttonOnlyItemSelector, "{flex:0 1 auto;min-inline-size:0;.euiButton .eui-textTruncate{min-inline-size:0;}}&", hasButtonIconOnlySelector, "{overflow-inline:auto;}};label:noWrap;"),
+    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";}&:where([data-variant='default'] &){.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;}}&:where([data-variant='segmented'] &){&", hasButtonIconOnlySelector, "{inline-size:auto;}&", hasButtonOnlySelector, "{.euiButtonGroup__buttons{inline-size:100%;}", buttonOnlyItemSelector, "{flex-grow:1;}}};label:fullWidth;"),
     // Sizes
     size: {
-      m: /*#__PURE__*/css(buttonSizes.m, ";;label:m;"),
-      s: /*#__PURE__*/css(buttonSizes.s, ";;label:s;"),
+      m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),
+      s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";", _highContrastStyles(euiThemeContext), ";;label:s;"),
       compressed: /*#__PURE__*/css(logicalCSS('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";", _highContrastStyles(euiThemeContext, true), ";;label:compressed;")
     },
     gutterSize: {

package/optimize/es/components/button/button_icon/button_icon.js

@@ -36,7 +36,7 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     _ref$display = _ref.display,
-    display = _ref$display === void 0 ? 'empty' : _ref$display,
+    _display = _ref$display === void 0 ? 'empty' : _ref$display,
     target = _ref.target,
     rel = _ref.rel,
     _ref$size = _ref.size,
@@ -50,6 +50,7 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
       color: _color,
       isDisabled: _isDisabled,
       hasAriaDisabled: _hasAriaDisabled,
+      display: _display,
       href: href,
       disabled: disabled,
       isLoading: isLoading
@@ -58,7 +59,8 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     color = _useEuiButtonCommonPr.color,
     isDisabled = _useEuiButtonCommonPr.isDisabled,
     _useEuiButtonCommonPr2 = _useEuiButtonCommonPr.hasAriaDisabled,
-    hasAriaDisabled = _useEuiButtonCommonPr2 === void 0 ? false : _useEuiButtonCommonPr2;
+    hasAriaDisabled = _useEuiButtonCommonPr2 === void 0 ? false : _useEuiButtonCommonPr2,
+    display = _useEuiButtonCommonPr.display;
   var _useEuiDisabledElemen = useEuiDisabledElement({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,

package/optimize/es/components/button/split_button/split_button.js

@@ -1,7 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "children", "size", "color", "fill", "isDisabled", "hasAriaDisabled", "isLoading"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,7 +15,8 @@ var _excluded = ["className", "children", "size", "color", "fill", "isDisabled",
 
 import classNames from 'classnames';
 import React, { Children, Fragment, isValidElement, useMemo } from 'react';
-import { useEuiMemoizedStyles, useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { getTokenName } from '@elastic/eui-theme-common';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { getEuiButtonColorValues, getEuiFilledButtonColorValues } from '../../../global_styling';
 import { EuiSplitButtonContext } from './split_button_context';
 import { EuiSplitButtonActionPrimary, EuiSplitButtonActionSecondary } from './split_button_actions';
@@ -32,29 +36,41 @@ export var _EuiSplitButton = function _EuiSplitButton(_ref) {
     isLoading = _ref.isLoading,
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiThemeContext = useEuiTheme();
-  var highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _children = _slicedToArray(children, 2),
     primaryAction = _children[0],
     secondaryAction = _children[1];
   var key = useGeneratedHtmlId({
     suffix: 'EuiSplitButton'
   });
-  var commonProps = {
-    size: size,
-    color: color,
-    fill: fill,
-    isDisabled: isDisabled,
-    hasAriaDisabled: hasAriaDisabled,
-    isLoading: isLoading
-  };
+  var commonProps = useMemo(function () {
+    return {
+      size: size,
+      color: color,
+      fill: fill,
+      isDisabled: isDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      isLoading: isLoading
+    };
+  }, [size, color, fill, isDisabled, hasAriaDisabled, isLoading]);
   var buttonFilledColors = getEuiFilledButtonColorValues(euiThemeContext, isDisabled ? 'disabled' : color);
   var buttonColors = getEuiButtonColorValues(euiThemeContext, isDisabled ? 'disabled' : color);
+  var borderToken = color === 'text' ? 'borderBasePlain' : getTokenName('borderBase', color);
   var classes = classNames('euiSplitButton', className);
-  var styles = useEuiMemoizedStyles(euiSplitButtonStyles);
-  var cssStyles = [styles.euiSplitButton, fill && styles.fill];
+  var styles = useMemo(function () {
+    return euiSplitButtonStyles(euiThemeContext, fill ? buttonFilledColors.backgroundColor : buttonColors.backgroundColor);
+  }, [euiThemeContext, fill, buttonFilledColors.backgroundColor, buttonColors.backgroundColor]);
+  var cssStyles = [styles.euiSplitButton, (color === 'text' || highContrastMode) && styles.hasBorder];
+  var dividerColor = color === 'warning' && fill ? buttonFilledColors.color : euiTheme.colors[borderToken];
   var dividerStyles = useMemo(function () {
-    return euiSplitButtonDividerStyles(euiThemeContext, !fill ? buttonColors.borderColor : highContrastMode && fill ? buttonFilledColors.backgroundColor : 'transparent');
-  }, [euiThemeContext, highContrastMode, fill, buttonFilledColors.backgroundColor, buttonColors.borderColor]);
+    return euiSplitButtonDividerStyles(euiThemeContext, highContrastMode && fill ? buttonFilledColors.color : dividerColor);
+  }, [euiThemeContext, highContrastMode, fill, buttonFilledColors.color, dividerColor]);
+  var cssVariables = useMemo(function () {
+    return {
+      '--euiSplitButtonBorderColor': dividerColor
+    };
+  }, [dividerColor]);
 
   // NOTE: dev-mode-only runtime check to evaluate if correct child components are passed
   if (process.env.NODE_ENV !== 'production') {
@@ -72,8 +88,12 @@ export var _EuiSplitButton = function _EuiSplitButton(_ref) {
   return ___EmotionJSX("div", _extends({
     role: "group",
     className: classes,
-    css: cssStyles
-  }, rest), ___EmotionJSX(EuiSplitButtonContext.Provider, {
+    css: cssStyles,
+    "data-size": size,
+    "data-fill": fill || undefined
+  }, rest, {
+    style: _objectSpread({}, cssVariables)
+  }), ___EmotionJSX(EuiSplitButtonContext.Provider, {
     value: commonProps
   }, ___EmotionJSX(Fragment, {
     key: "".concat(key, "-primaryAction")

package/optimize/es/components/button/split_button/split_button.styles.js

@@ -1,4 +1,3 @@
-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
@@ -8,44 +7,41 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiDisabledSelector, highContrastModeStyles } from '../../../global_styling';
-export var euiSplitButtonStyles = function euiSplitButtonStyles(euiThemeContext) {
+import { euiButtonSizeMap, euiDisabledSelector, highContrastModeStyles, logicalCSS } from '../../../global_styling';
+var primaryDisabledSelector = ".euiSplitButtonActionPrimary:is(".concat(euiDisabledSelector, ")");
+var secondaryDisabledSelector = ".euiSplitButtonActionSecondary:is(".concat(euiDisabledSelector, ")");
+export var euiSplitButtonStyles = function euiSplitButtonStyles(euiThemeContext, backgroundColor) {
   var euiTheme = euiThemeContext.euiTheme;
-  var primaryDisabledSelector = ".euiSplitButtonActionPrimary:is(".concat(euiDisabledSelector, ")");
-  var secondaryDisabledSelector = ".euiSplitButtonActionSecondary:is(".concat(euiDisabledSelector, ")");
-  var dividerSelector = ".euiSplitButton__divider";
+  var buttonSizeMap = euiButtonSizeMap(euiThemeContext);
+  var borderStyles = function borderStyles(color) {
+    return "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      border: ".concat(euiTheme.border.width.thin, " solid ").concat(color, ";\n      border-radius: ").concat(euiTheme.border.radius.small, ";\n      pointer-events: none;\n    }\n  ");
+  };
   return {
-    euiSplitButton: /*#__PURE__*/css("display:inline-flex;flex-wrap:nowrap;&:has(", primaryDisabledSelector, "):has(", secondaryDisabledSelector, "){", dividerSelector, "{", highContrastModeStyles(euiThemeContext, {
-      // When both buttons are disabled set as visual gap
-      none: "\n              border-color: transparent;\n            ",
-      // When both buttons are disabled set a disabled divider color
-      preferred: "\n              border-color: ".concat(euiTheme.colors.borderBaseDisabled, ";\n            ")
-    }), ";}};label:euiSplitButton;"),
-    // When both buttons are enabled set as visual gap
-    fill: /*#__PURE__*/css("&:not(:has(", primaryDisabledSelector, ")):not(\n          :has(", secondaryDisabledSelector, ")\n        ){", dividerSelector, "{border-color:transparent;}};label:fill;")
+    euiSplitButton: /*#__PURE__*/css("position:relative;display:inline-flex;align-items:center;flex-wrap:nowrap;max-inline-size:fit-content;padding:", euiTheme.size.xs, ";border-radius:", euiTheme.border.radius.small, ";background-color:", backgroundColor, ";&:where([data-size='s']){block-size:", buttonSizeMap.s.height, ";}&:where([data-size='m']){block-size:", buttonSizeMap.m.height, ";}&:has(", primaryDisabledSelector, ", ", secondaryDisabledSelector, "){background-color:", euiTheme.colors.backgroundBaseDisabled, ";};label:euiSplitButton;"),
+    hasBorder: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
+      none: "\n          &:where(:not([data-fill])):not(:has(".concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ")) {\n            ").concat(borderStyles("var(--euiSplitButtonBorderColor)"), "\n          }\n        "),
+      preferred: "\n          &:where(:not([data-fill])) {\n            ".concat(borderStyles("var(--euiSplitButtonBorderColor)"), "\n\n            &:has(").concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ") {\n              ").concat(borderStyles(euiTheme.colors.borderBaseDisabled), "\n            }\n          }\n\n          &:where([data-fill]):has(").concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ") {\n            ").concat(borderStyles(euiTheme.colors.borderBaseDisabled), "\n          }\n        "),
+      forced: "\n          ".concat(borderStyles("var(--euiSplitButtonBorderColor)"), "\n        ")
+    }), ";;label:hasBorder;")
   };
 };
-export var euiSplitButtonActionStyles = {
-  euiSplitButtonActionPrimary: process.env.NODE_ENV === "production" ? {
-    name: "12txneb-euiSplitButtonActionPrimary",
-    styles: "z-index:0;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;label:euiSplitButtonActionPrimary;"
-  } : {
-    name: "12txneb-euiSplitButtonActionPrimary",
-    styles: "z-index:0;border-inline-end:none;border-start-end-radius:0;border-end-end-radius:0;label:euiSplitButtonActionPrimary;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  },
-  euiSplitButtonActionSecondary: process.env.NODE_ENV === "production" ? {
-    name: "5uh4vx-euiSplitButtonActionSecondary",
-    styles: "border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;label:euiSplitButtonActionSecondary;"
-  } : {
-    name: "5uh4vx-euiSplitButtonActionSecondary",
-    styles: "border-inline-start:none;border-start-start-radius:0;border-end-start-radius:0;label:euiSplitButtonActionSecondary;",
-    toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-  }
+export var euiSplitButtonActionStyles = function euiSplitButtonActionStyles(euiThemeContext, size) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var buttonSizeMap = euiButtonSizeMap(euiThemeContext);
+
+  // uses smaller sizes due to the buttons being inset into the parent container
+  var buttonSize = size === 's' ? buttonSizeMap.xs.height : buttonSizeMap.s.height;
+  var buttonMinWidth = size === 's' ? buttonSizeMap.xs.minWidth : buttonSizeMap.s.minWidth;
+  var buttonRadius = size === 's' ? buttonSizeMap.xs.radiusInset : buttonSizeMap.s.radiusInset;
+  var commonStyles = "\n    block-size: ".concat(buttonSize, ";\n    border-radius: ").concat(buttonRadius, ";\n    /* prevent issues in jsdom where pointer-events: none is inherited from the pseudo element */\n    pointer-events: auto;\n\n     /* zero-specificity ancestor :has() check */\n    &:where(:not(:has(").concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ")) &) {\n      border: none;\n    }\n    \n    &:where(:has(").concat(primaryDisabledSelector, ", ").concat(secondaryDisabledSelector, ") &) {\n      &:is(").concat(euiDisabledSelector, ") {\n        border: none;\n      }\n    }\n   \n  ");
+  return {
+    euiSplitButtonActionPrimary: /*#__PURE__*/css(commonStyles, " z-index:", euiTheme.levels.content, ";&:not(.euiButtonIcon){min-inline-size:", buttonMinWidth, "px;}&.euiButtonIcon{inline-size:", buttonSize, ";};label:euiSplitButtonActionPrimary;"),
+    euiSplitButtonActionSecondary: /*#__PURE__*/css(commonStyles, " inline-size:", buttonSize, ";;label:euiSplitButtonActionSecondary;")
+  };
 };
 export var euiSplitButtonDividerStyles = function euiSplitButtonDividerStyles(euiThemeContext, color) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    divider: /*#__PURE__*/css("border-inline-start:", euiTheme.border.width.thin, " solid ", color, ";;label:divider;")
+    divider: /*#__PURE__*/css("block-size:calc(100% - ", euiTheme.size.s, ");border-inline-start:", euiTheme.border.width.thin, " solid ", color, ";", logicalCSS('margin-horizontal', euiTheme.size.xs), ";&:where(\n          ", primaryDisabledSelector, " + &,\n          :has(~ ", secondaryDisabledSelector, ")\n        ){border-color:", euiTheme.colors.borderBaseDisabled, ";};label:divider;")
   };
 };

package/optimize/es/components/button/split_button/split_button_actions.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["className", "isIconOnly", "tooltipProps"],
-  _excluded2 = ["fill", "isDisabled", "isLoading"],
+  _excluded2 = ["fill", "isDisabled", "isLoading", "size"],
   _excluded3 = ["className", "popoverProps", "tooltipProps"],
-  _excluded4 = ["fill", "isDisabled", "isLoading"];
+  _excluded4 = ["fill", "isDisabled", "isLoading", "size"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -15,8 +15,9 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
 import { EuiPopover } from '../../popover';
 import { EuiToolTip } from '../../tool_tip';
 import { EuiButton } from '../button';
@@ -30,17 +31,22 @@ export var EuiSplitButtonActionPrimary = function EuiSplitButtonActionPrimary(_r
     isIconOnly = _ref.isIconOnly,
     tooltipProps = _ref.tooltipProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiThemeContext = useEuiTheme();
   var _useContext = useContext(EuiSplitButtonContext),
     fill = _useContext.fill,
     isDisabled = _useContext.isDisabled,
     isLoading = _useContext.isLoading,
+    size = _useContext.size,
     sharedRest = _objectWithoutProperties(_useContext, _excluded2);
   var _isDisabled = !!isDisabled || isButtonDisabled(rest);
   var _isLoading = !!isLoading || !!rest.isLoading;
   var display = fill ? 'fill' : 'base';
   var classes = classNames('euiSplitButtonActionPrimary', className);
-  var styles = euiSplitButtonActionStyles;
+  var styles = useMemo(function () {
+    return euiSplitButtonActionStyles(euiThemeContext, size);
+  }, [euiThemeContext, size]);
   var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
+    size: size,
     isDisabled: _isDisabled,
     isLoading: _isLoading,
     css: [styles.euiSplitButtonActionPrimary],
@@ -60,17 +66,22 @@ export var EuiSplitButtonActionSecondary = function EuiSplitButtonActionSecondar
     popoverProps = _ref2.popoverProps,
     tooltipProps = _ref2.tooltipProps,
     rest = _objectWithoutProperties(_ref2, _excluded3);
+  var euiThemeContext = useEuiTheme();
   var _useContext2 = useContext(EuiSplitButtonContext),
     fill = _useContext2.fill,
     isDisabled = _useContext2.isDisabled,
     isLoading = _useContext2.isLoading,
+    size = _useContext2.size,
     sharedRest = _objectWithoutProperties(_useContext2, _excluded4);
   var _isDisabled = !!isDisabled || isButtonDisabled(rest);
   var _isLoading = !!isLoading || !!rest.isLoading;
   var display = fill ? 'fill' : 'base';
   var classes = classNames('euiSplitButtonActionSecondary', className);
-  var styles = euiSplitButtonActionStyles;
+  var styles = useMemo(function () {
+    return euiSplitButtonActionStyles(euiThemeContext, size);
+  }, [euiThemeContext, size]);
   var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
+    size: size,
     display: display,
     // enforce chevronSingleDown icon when a popover is rendered
     iconType: popoverProps != null ? 'chevronSingleDown' : rest.iconType,

package/optimize/es/components/button/use_button_common_props.js

@@ -14,12 +14,14 @@ import { isButtonDisabled } from './button_display/_button_display';
  * popover boundary isolation and isDisabled computation.
  */
 export function useEuiButtonCommonProps(_ref) {
-  var _groupContext$isDisab, _groupContext$size, _groupContext$color, _groupContext$hasAria, _groupContext$fullWid;
+  var _groupContext$isDisab, _groupContext$size, _groupContext$color, _groupContext$hasAria, _groupContext$fullWid, _groupContext$display, _groupContext$fill;
   var size = _ref.size,
     color = _ref.color,
     _isDisabled = _ref.isDisabled,
     hasAriaDisabled = _ref.hasAriaDisabled,
     fullWidth = _ref.fullWidth,
+    fill = _ref.fill,
+    display = _ref.display,
     href = _ref.href,
     disabled = _ref.disabled,
     isLoading = _ref.isLoading;
@@ -35,6 +37,8 @@ export function useEuiButtonCommonProps(_ref) {
     color: (_groupContext$color = groupContext.color) !== null && _groupContext$color !== void 0 ? _groupContext$color : color,
     isDisabled: isDisabled,
     hasAriaDisabled: (_groupContext$hasAria = groupContext.hasAriaDisabled) !== null && _groupContext$hasAria !== void 0 ? _groupContext$hasAria : hasAriaDisabled,
-    fullWidth: (_groupContext$fullWid = groupContext.fullWidth) !== null && _groupContext$fullWid !== void 0 ? _groupContext$fullWid : fullWidth
+    fullWidth: (_groupContext$fullWid = groupContext.fullWidth) !== null && _groupContext$fullWid !== void 0 ? _groupContext$fullWid : fullWidth,
+    display: (_groupContext$display = groupContext.display) !== null && _groupContext$display !== void 0 ? _groupContext$display : display,
+    fill: (_groupContext$fill = groupContext.fill) !== null && _groupContext$fill !== void 0 ? _groupContext$fill : fill
   };
 }

package/optimize/es/components/datagrid/body/header/column_actions.js

@@ -77,7 +77,9 @@ export var ColumnActions = /*#__PURE__*/memo(function (_ref) {
   });
   var actionsEnterKeyInstructions = useEuiI18n('euiDataGridHeaderCell.actionsEnterKeyInstructions', "Press the Enter key to view this column's actions");
   var openActionsPopoverOnEnter = useCallback(function (e) {
-    if (e.key === keys.ENTER) {
+    // Only handle Enter when the cell div itself is focused,
+    // not when it bubbles up from the nested button
+    if (e.key === keys.ENTER && e.target === e.currentTarget) {
       setIsPopoverOpen(true);
     }
   }, []);

package/optimize/es/components/flyout/flyout_menu/flyout_menu.js

@@ -15,6 +15,7 @@ import { useEuiMemoizedStyles } from '../../../services';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { useEuiI18n } from '../../i18n';
 import { EuiTitle } from '../../title';
+import { EuiToolTip } from '../../tool_tip';
 import { EuiFlyoutCloseButton } from '../_flyout_close_button';
 import { MIN_HISTORY_ITEMS } from '../const';
 import { EuiFlyoutMenuContext } from '../flyout_menu_context';
@@ -36,7 +37,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  * @private
  */
 export var EuiFlyoutMenu = function EuiFlyoutMenu(_ref) {
-  var _pagination$currentIn, _pagination$total;
+  var _historyItems$0$title, _historyItems$, _pagination$currentIn, _pagination$total;
   var className = _ref.className,
     title = _ref.title,
     titleId = _ref.titleId,
@@ -72,6 +73,12 @@ export var EuiFlyoutMenu = function EuiFlyoutMenu(_ref) {
   // Sub-components are presentational, so all `euiFlyoutMenu.*` tokens are
   // resolved here, in the file that owns the namespace
   var backButtonLabel = useEuiI18n('euiFlyoutMenu.back', 'Back');
+  // `historyItems` is ordered most-recent-first, so index 0 is the entry the
+  // back button navigates to
+  var previousPageTitle = (_historyItems$0$title = (_historyItems$ = historyItems[0]) === null || _historyItems$ === void 0 ? void 0 : _historyItems$.title) !== null && _historyItems$0$title !== void 0 ? _historyItems$0$title : '';
+  var backTooltipLabel = useEuiI18n('euiFlyoutMenu.back.tooltip', 'Back to {previousPage}', {
+    previousPage: previousPageTitle
+  });
   var historyLabel = useEuiI18n('euiFlyoutMenu.history', 'History');
   var recentlyVisitedLabel = useEuiI18n('euiFlyoutMenu.history.tooltip', 'Recently visited');
   var paginationLabels = {
@@ -113,35 +120,51 @@ export var EuiFlyoutMenu = function EuiFlyoutMenu(_ref) {
     labels: paginationLabels
   }) : ___EmotionJSX(React.Fragment, null, hasBackButton && ___EmotionJSX(EuiFlexItem, {
     grow: false
+  }, previousPageTitle ? ___EmotionJSX(EuiToolTip, {
+    content: backTooltipLabel
   }, ___EmotionJSX(BackButton, _extends({
     label: backButtonLabel
+  }, backButtonProps))) : ___EmotionJSX(BackButton, _extends({
+    label: backButtonLabel
   }, backButtonProps))), showBackHistoryDivider && ___EmotionJSX(MenuDivider, null), hasHistory && ___EmotionJSX(EuiFlexItem, {
     grow: false
   }, ___EmotionJSX(HistoryPopover, {
     items: historyItems,
     historyLabel: historyLabel,
     recentlyVisitedLabel: recentlyVisitedLabel
-  }))), showLeadingBoundaryDivider && ___EmotionJSX(MenuDivider, null), leadingActions.map(function (action, actionIndex) {
+  }))), showLeadingBoundaryDivider && ___EmotionJSX(MenuDivider, null), leadingActions.length > 0 && ___EmotionJSX(EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__actions
+  }, ___EmotionJSX(EuiFlexGroup, {
+    gutterSize: "s",
+    alignItems: "center",
+    responsive: false
+  }, leadingActions.map(function (action, actionIndex) {
     return ___EmotionJSX(EuiFlexItem, {
       key: "leading-action-".concat(actionIndex),
-      grow: false,
-      css: styles.euiFlyoutMenu__actions
+      grow: false
     }, ___EmotionJSX(MenuActionButton, {
       action: action
     }));
-  }), titleNode && ___EmotionJSX(EuiFlexItem, {
+  }))), titleNode && ___EmotionJSX(EuiFlexItem, {
     grow: false
   }, titleNode), ___EmotionJSX(EuiFlexItem, {
     grow: true
-  }), effectiveTrailingActions.map(function (action, actionIndex) {
+  }), effectiveTrailingActions.length > 0 && ___EmotionJSX(EuiFlexItem, {
+    grow: false,
+    css: styles.euiFlyoutMenu__actions
+  }, ___EmotionJSX(EuiFlexGroup, {
+    gutterSize: "s",
+    alignItems: "center",
+    responsive: false
+  }, effectiveTrailingActions.map(function (action, actionIndex) {
     return ___EmotionJSX(EuiFlexItem, {
       key: "trailing-action-".concat(actionIndex),
-      grow: false,
-      css: styles.euiFlyoutMenu__actions
+      grow: false
     }, ___EmotionJSX(MenuActionButton, {
       action: action
     }));
-  }), !hideCloseButton && ___EmotionJSX(CloseButtonSpacer, {
+  }))), !hideCloseButton && ___EmotionJSX(CloseButtonSpacer, {
     showDivider: showTrailingCloseDivider
   })), !hideCloseButton && ___EmotionJSX(EuiFlyoutCloseButton, {
     onClose: handleClose,