@elastic/eui 119.0.0 → 119.1.0

package/optimize/es/services/accessibility/html_id_generator.js

@@ -8,6 +8,23 @@
 
 import React, { useMemo } from 'react';
 import { v1 as uuidv1 } from 'uuid';
+import { warnOnce } from '../console';
+
+/**
+ * IDs containing whitespace are invalid HTML, and silently break attributes
+ * that take a space-separated list of ID references (`aria-controls`,
+ * `aria-labelledby`, `aria-describedby`, `for`), as each "word" is then parsed
+ * as a separate reference to a non-existent element.
+ *
+ * This most commonly happens when a human-readable or localized string is
+ * passed as a prefix/suffix, so warn consumers as early as possible.
+ */
+var warnOnWhitespace = function warnOnWhitespace(value) {
+  if (process.env.NODE_ENV === 'production') return;
+  if (value && /\s/.test(value)) {
+    warnOnce("generatedHtmlIdWhitespace:".concat(value), "[EUI] Generated HTML ID: \"".concat(value, "\" contains whitespace, which generates an invalid HTML id ") + 'and breaks attributes referencing it, such as `aria-controls` or `for`. ' + 'Pass a static identifier instead of a human-readable or localized string.');
+  }
+};
 
 /**
  * This function returns a function to generate ids.
@@ -19,8 +36,10 @@ import { v1 as uuidv1 } from 'uuid';
 export function htmlIdGenerator() {
   var idPrefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var staticUuid = uuidv1();
+  warnOnWhitespace(idPrefix);
   return function () {
     var idSuffix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    warnOnWhitespace(idSuffix);
     var prefix = "".concat(idPrefix).concat(idPrefix !== '' ? '_' : 'i');
     var suffix = idSuffix ? "_".concat(idSuffix) : '';
     return "".concat(prefix).concat(suffix ? staticUuid : uuidv1()).concat(suffix);
@@ -53,7 +72,13 @@ var useNewGeneratedHtmlId = function useNewGeneratedHtmlId() {
   // to prevent React <18 import errors.
   var id = React.useId();
   return useMemo(function () {
-    return conditionalId || "".concat(prefix).concat(id).concat(suffix);
+    if (conditionalId) return conditionalId;
+
+    // Memoized so that the check only runs when the prefix/suffix change,
+    // as this hook is called on virtually every EUI render
+    warnOnWhitespace(prefix);
+    warnOnWhitespace(suffix);
+    return "".concat(prefix).concat(id).concat(suffix);
   }, [id, conditionalId, prefix, suffix]);
 };
 export var useGeneratedHtmlId = 'useId' in React ? useNewGeneratedHtmlId : useDeprecatedGeneratedHtmlId;

package/optimize/lib/components/button/button.js

@@ -38,7 +38,7 @@ var EuiButton = exports.EuiButton = function EuiButton(_ref) {
     _size = _ref$size === void 0 ? 'm' : _ref$size,
     _ref$color = _ref.color,
     _color = _ref$color === void 0 ? 'primary' : _ref$color,
-    fill = _ref.fill,
+    _fill = _ref.fill,
     _isDisabled = _ref.isDisabled,
     _hasAriaDisabled = _ref.hasAriaDisabled,
     _fullWidth = _ref.fullWidth,
@@ -49,6 +49,7 @@ var EuiButton = exports.EuiButton = function EuiButton(_ref) {
       isDisabled: _isDisabled,
       hasAriaDisabled: _hasAriaDisabled,
       fullWidth: _fullWidth,
+      fill: _fill,
       href: rest.href,
       disabled: rest.disabled,
       isLoading: rest.isLoading
@@ -57,7 +58,8 @@ var EuiButton = exports.EuiButton = function EuiButton(_ref) {
     color = _useEuiButtonCommonPr.color,
     isDisabled = _useEuiButtonCommonPr.isDisabled,
     hasAriaDisabled = _useEuiButtonCommonPr.hasAriaDisabled,
-    fullWidth = _useEuiButtonCommonPr.fullWidth;
+    fullWidth = _useEuiButtonCommonPr.fullWidth,
+    fill = _useEuiButtonCommonPr.fill;
   var buttonColorStyles = (0, _button.useEuiButtonColorCSS)({
     display: fill ? 'fill' : 'base'
   })[isDisabled ? 'disabled' : color];

package/optimize/lib/components/button/button_group/button_group.js

@@ -5,7 +5,8 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiButtonGroup = exports.BUTTON_GROUP_GUTTER_SIZES = void 0;
+exports.EuiButtonGroupChildren = exports.EuiButtonGroup = exports.BUTTON_GROUP_GUTTER_SIZES = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -17,7 +18,7 @@ var _button_context = require("../button_context");
 var _button_group = require("./button_group.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "hasAriaDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"],
-  _excluded2 = ["className", "children", "legend", "buttonSize", "variant", "gutterSize", "isDisabled", "hasAriaDisabled", "isFullWidth", "onChange"];
+  _excluded2 = ["className", "children", "legend", "buttonSize", "variant", "gutterSize", "isDisabled", "hasAriaDisabled", "isFullWidth", "showDividers", "wrap", "layout", "onChange"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -25,8 +26,26 @@ var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelected
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+// removes outer fragment wrappers only; no nested traversal of children
+// uses forEach over .toArray() to avoid mutating keys; only unwraps one Fragment level
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { (0, _defineProperty2.default)(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; }
+function flattenButtonGroupChildren(children) {
+  var result = [];
+  _react.default.Children.forEach(children, function (child) {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) return;
+    if (child.type === _react.default.Fragment) {
+      _react.default.Children.forEach(child.props.children, function (fragmentChild) {
+        if ( /*#__PURE__*/_react.default.isValidElement(fragmentChild)) result.push(fragmentChild);
+      });
+    } else {
+      result.push(child);
+    }
+  });
+  return result;
+}
 var EuiButtonGroupOptions = function EuiButtonGroupOptions(_ref) {
   var className = _ref.className,
     _ref$buttonSize = _ref.buttonSize,
@@ -89,9 +108,9 @@ var EuiButtonGroupOptions = function EuiButtonGroupOptions(_ref) {
   })));
 };
 var BUTTON_GROUP_GUTTER_SIZES = exports.BUTTON_GROUP_GUTTER_SIZES = ['none', 'xs', 's', 'm', 'l', 'xl'];
-var EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
+var EuiButtonGroupChildren = exports.EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
   var className = _ref2.className,
-    children = _ref2.children,
+    _children = _ref2.children,
     legend = _ref2.legend,
     _ref2$buttonSize = _ref2.buttonSize,
     buttonSize = _ref2$buttonSize === void 0 ? 's' : _ref2$buttonSize,
@@ -105,36 +124,63 @@ var EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
     hasAriaDisabled = _ref2$hasAriaDisabled === void 0 ? false : _ref2$hasAriaDisabled,
     _ref2$isFullWidth = _ref2.isFullWidth,
     isFullWidth = _ref2$isFullWidth === void 0 ? false : _ref2$isFullWidth,
+    _ref2$showDividers = _ref2.showDividers,
+    showDividers = _ref2$showDividers === void 0 ? false : _ref2$showDividers,
+    _ref2$wrap = _ref2.wrap,
+    wrap = _ref2$wrap === void 0 ? true : _ref2$wrap,
+    _ref2$layout = _ref2.layout,
+    layout = _ref2$layout === void 0 ? 'horizontal' : _ref2$layout,
     _onChange = _ref2.onChange,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var isSegmented = variant === 'segmented';
+  var hasGutterSize = variant === 'default' && gutterSize !== 'none';
   var wrapperCssStyles = [_button_group.euiButtonGroupStyles.euiButtonGroup, isFullWidth && _button_group.euiButtonGroupStyles.fullWidth];
   var styles = (0, _services.useEuiMemoizedStyles)(_button_group.euiButtonGroupButtonsStyles);
-  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, gutterSize && gutterSize !== 'none' && styles.gutterSize[gutterSize]];
+  var cssStyles = [styles.euiButtonGroup__buttons, hasGutterSize && styles.gutterSize[gutterSize], isSegmented && !wrap && styles.noWrap];
+  var containerCssStyles = [styles.euiButtonGroup__container, isFullWidth && layout !== 'vertical' && styles.fullWidth];
   var classes = (0, _classnames.default)('euiButtonGroup', {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
   var contextValue = (0, _react.useMemo)(function () {
-    return {
+    return _objectSpread({
       size: buttonSize,
       isDisabled: isDisabled || undefined,
       hasAriaDisabled: hasAriaDisabled || undefined,
       fullWidth: isFullWidth
-    };
-  }, [buttonSize, isDisabled, hasAriaDisabled, isFullWidth]);
+    }, isSegmented && {
+      display: 'base',
+      color: 'text',
+      fill: false
+    });
+  }, [buttonSize, isDisabled, hasAriaDisabled, isFullWidth, isSegmented]);
+
+  // wrap children in a wrapper to be able to apply required styles
+  var children = isSegmented ? flattenButtonGroupChildren(_children).map(function (child, index) {
+    var _child$key;
+    return (0, _react2.jsx)("div", {
+      key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : "euiButtonGroupItem-".concat(index),
+      className: "euiButtonGroup__item"
+    }, child);
+  }) : _children;
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     css: wrapperCssStyles,
     className: classes,
     role: "group",
     "data-variant": variant,
     "data-size": buttonSize,
+    "data-layout": isSegmented ? layout : undefined,
+    "data-dividers": isSegmented && showDividers || undefined,
     "aria-label": legend,
     "aria-disabled": isDisabled || undefined
   }, rest), (0, _react2.jsx)("div", {
+    css: containerCssStyles,
+    className: "euiButtonGroup__container"
+  }, (0, _react2.jsx)("div", {
     css: cssStyles,
     className: "euiButtonGroup__buttons"
   }, (0, _react2.jsx)(_button_context.EuiButtonContext.Provider, {
     value: contextValue
-  }, children)));
+  }, children))));
 };
 
 /* Overloaded call signatures let one `EuiButtonGroup` component support both

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

@@ -15,8 +15,12 @@ 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 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))");
 var euiButtonGroupStyles = exports.euiButtonGroupStyles = {
-  euiButtonGroup: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.logicalCSS)('max-width', '100%'), " position:relative;;label:euiButtonGroup;"),
+  euiButtonGroup: /*#__PURE__*/(0, _react.css)("display:inline-block;", (0, _global_styling.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;"
@@ -28,23 +32,58 @@ var euiButtonGroupStyles = exports.euiButtonGroupStyles = {
 };
 var euiButtonGroupButtonsStyles = exports.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 = (0, _global_styling.euiButtonSizeMap)(euiThemeContext);
+  var containerPadding = euiTheme.size.xs;
+  var splitPadding = (0, _global_styling.mathWithUnits)(containerPadding, function (x) {
+    return x / 2;
+  });
+  var insetSize = function insetSize(height) {
+    return (0, _global_styling.mathWithUnits)([height, containerPadding], function (x, y) {
+      return x - y * 2;
+    });
   };
+  var buttonGroupVariables = {
+    gap: {
+      regular: euiTheme.size.xs,
+      dividers: (0, _global_styling.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 = (0, _global_styling.mathWithUnits)([buttonGroupVariables.gap.dividers, euiTheme.border.width.thin], function (x, y) {
+    return (x + y) / 2;
+  });
   var _euiFormVariables = (0, _form.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((0, _global_styling.mathWithUnits)(containerPadding, function (x) {
+    return x / 2;
+  }), ";\n        inline-size: calc(\n          100% + ").concat((0, _global_styling.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__*/(0, _react.css)((0, _global_styling.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", (0, _global_styling.logicalCSS)('width', '100%'), ";}.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;};label:fullWidth;"),
+    euiButtonGroup__container: /*#__PURE__*/(0, _react.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__*/(0, _react.css)((0, _global_styling.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(", _global_styling.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__*/(0, _react.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", (0, _global_styling.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__*/(0, _react.css)(buttonSizes.m, ";;label:m;"),
-      s: /*#__PURE__*/(0, _react.css)(buttonSizes.s, ";;label:s;"),
+      m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),
+      s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";", _highContrastStyles(euiThemeContext), ";;label:s;"),
       compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";", _highContrastStyles(euiThemeContext, true), ";;label:compressed;")
     },
     gutterSize: {

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

@@ -42,7 +42,7 @@ var EuiButtonIcon = exports.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,
@@ -56,6 +56,7 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
       color: _color,
       isDisabled: _isDisabled,
       hasAriaDisabled: _hasAriaDisabled,
+      display: _display,
       href: href,
       disabled: disabled,
       isLoading: isLoading
@@ -64,7 +65,8 @@ var EuiButtonIcon = exports.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 = (0, _useEuiDisabledElement.useEuiDisabledElement)({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,

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

@@ -7,10 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports._EuiSplitButton = exports.EuiSplitButton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _split_button_context = require("./split_button_context");
@@ -27,6 +29,8 @@ var _excluded = ["className", "children", "size", "color", "fill", "isDisabled",
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+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) { (0, _defineProperty2.default)(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; }
 var _EuiSplitButton = exports._EuiSplitButton = function _EuiSplitButton(_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -41,29 +45,41 @@ var _EuiSplitButton = exports._EuiSplitButton = function _EuiSplitButton(_ref) {
     isLoading = _ref.isLoading,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiThemeContext = (0, _services.useEuiTheme)();
-  var highContrastMode = euiThemeContext.highContrastMode;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
   var _children = (0, _slicedToArray2.default)(children, 2),
     primaryAction = _children[0],
     secondaryAction = _children[1];
   var key = (0, _services.useGeneratedHtmlId)({
     suffix: 'EuiSplitButton'
   });
-  var commonProps = {
-    size: size,
-    color: color,
-    fill: fill,
-    isDisabled: isDisabled,
-    hasAriaDisabled: hasAriaDisabled,
-    isLoading: isLoading
-  };
+  var commonProps = (0, _react.useMemo)(function () {
+    return {
+      size: size,
+      color: color,
+      fill: fill,
+      isDisabled: isDisabled,
+      hasAriaDisabled: hasAriaDisabled,
+      isLoading: isLoading
+    };
+  }, [size, color, fill, isDisabled, hasAriaDisabled, isLoading]);
   var buttonFilledColors = (0, _global_styling.getEuiFilledButtonColorValues)(euiThemeContext, isDisabled ? 'disabled' : color);
   var buttonColors = (0, _global_styling.getEuiButtonColorValues)(euiThemeContext, isDisabled ? 'disabled' : color);
+  var borderToken = color === 'text' ? 'borderBasePlain' : (0, _euiThemeCommon.getTokenName)('borderBase', color);
   var classes = (0, _classnames.default)('euiSplitButton', className);
-  var styles = (0, _services.useEuiMemoizedStyles)(_split_button.euiSplitButtonStyles);
-  var cssStyles = [styles.euiSplitButton, fill && styles.fill];
+  var styles = (0, _react.useMemo)(function () {
+    return (0, _split_button.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 = (0, _react.useMemo)(function () {
-    return (0, _split_button.euiSplitButtonDividerStyles)(euiThemeContext, !fill ? buttonColors.borderColor : highContrastMode && fill ? buttonFilledColors.backgroundColor : 'transparent');
-  }, [euiThemeContext, highContrastMode, fill, buttonFilledColors.backgroundColor, buttonColors.borderColor]);
+    return (0, _split_button.euiSplitButtonDividerStyles)(euiThemeContext, highContrastMode && fill ? buttonFilledColors.color : dividerColor);
+  }, [euiThemeContext, highContrastMode, fill, buttonFilledColors.color, dividerColor]);
+  var cssVariables = (0, _react.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') {
@@ -81,8 +97,12 @@ var _EuiSplitButton = exports._EuiSplitButton = function _EuiSplitButton(_ref) {
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     role: "group",
     className: classes,
-    css: cssStyles
-  }, rest), (0, _react2.jsx)(_split_button_context.EuiSplitButtonContext.Provider, {
+    css: cssStyles,
+    "data-size": size,
+    "data-fill": fill || undefined
+  }, rest, {
+    style: _objectSpread({}, cssVariables)
+  }), (0, _react2.jsx)(_split_button_context.EuiSplitButtonContext.Provider, {
     value: commonProps
   }, (0, _react2.jsx)(_react.Fragment, {
     key: "".concat(key, "-primaryAction")

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

@@ -6,50 +6,48 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiSplitButtonStyles = exports.euiSplitButtonDividerStyles = exports.euiSplitButtonActionStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
-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
  * 2.0 and the Server Side Public License, v 1; you may not use this file except
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiSplitButtonStyles = exports.euiSplitButtonStyles = function euiSplitButtonStyles(euiThemeContext) {
+
+var primaryDisabledSelector = ".euiSplitButtonActionPrimary:is(".concat(_global_styling.euiDisabledSelector, ")");
+var secondaryDisabledSelector = ".euiSplitButtonActionSecondary:is(".concat(_global_styling.euiDisabledSelector, ")");
+var euiSplitButtonStyles = exports.euiSplitButtonStyles = function euiSplitButtonStyles(euiThemeContext, backgroundColor) {
   var euiTheme = euiThemeContext.euiTheme;
-  var primaryDisabledSelector = ".euiSplitButtonActionPrimary:is(".concat(_global_styling.euiDisabledSelector, ")");
-  var secondaryDisabledSelector = ".euiSplitButtonActionSecondary:is(".concat(_global_styling.euiDisabledSelector, ")");
-  var dividerSelector = ".euiSplitButton__divider";
+  var buttonSizeMap = (0, _global_styling.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__*/(0, _react.css)("display:inline-flex;flex-wrap:nowrap;&:has(", primaryDisabledSelector, "):has(", secondaryDisabledSelector, "){", dividerSelector, "{", (0, _global_styling.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__*/(0, _react.css)("&:not(:has(", primaryDisabledSelector, ")):not(\n          :has(", secondaryDisabledSelector, ")\n        ){", dividerSelector, "{border-color:transparent;}};label:fill;")
+    euiSplitButton: /*#__PURE__*/(0, _react.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__*/(0, _react.css)((0, _global_styling.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;")
   };
 };
-var euiSplitButtonActionStyles = exports.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__
-  }
+var euiSplitButtonActionStyles = exports.euiSplitButtonActionStyles = function euiSplitButtonActionStyles(euiThemeContext, size) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var buttonSizeMap = (0, _global_styling.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(_global_styling.euiDisabledSelector, ") {\n        border: none;\n      }\n    }\n   \n  ");
+  return {
+    euiSplitButtonActionPrimary: /*#__PURE__*/(0, _react.css)(commonStyles, " z-index:", euiTheme.levels.content, ";&:not(.euiButtonIcon){min-inline-size:", buttonMinWidth, "px;}&.euiButtonIcon{inline-size:", buttonSize, ";};label:euiSplitButtonActionPrimary;"),
+    euiSplitButtonActionSecondary: /*#__PURE__*/(0, _react.css)(commonStyles, " inline-size:", buttonSize, ";;label:euiSplitButtonActionSecondary;")
+  };
 };
 var euiSplitButtonDividerStyles = exports.euiSplitButtonDividerStyles = function euiSplitButtonDividerStyles(euiThemeContext, color) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    divider: /*#__PURE__*/(0, _react.css)("border-inline-start:", euiTheme.border.width.thin, " solid ", color, ";;label:divider;")
+    divider: /*#__PURE__*/(0, _react.css)("block-size:calc(100% - ", euiTheme.size.s, ");border-inline-start:", euiTheme.border.width.thin, " solid ", color, ";", (0, _global_styling.logicalCSS)('margin-horizontal', euiTheme.size.xs), ";&:where(\n          ", primaryDisabledSelector, " + &,\n          :has(~ ", secondaryDisabledSelector, ")\n        ){border-color:", euiTheme.colors.borderBaseDisabled, ";};label:divider;")
   };
 };

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

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
 var _popover = require("../../popover");
 var _tool_tip = require("../../tool_tip");
 var _button = require("../button");
@@ -20,9 +21,9 @@ var _split_button = require("./split_button.styles");
 var _split_button_context = require("./split_button_context");
 var _react2 = require("@emotion/react");
 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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,17 +40,22 @@ var EuiSplitButtonActionPrimary = exports.EuiSplitButtonActionPrimary = function
     isIconOnly = _ref.isIconOnly,
     tooltipProps = _ref.tooltipProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiThemeContext = (0, _services.useEuiTheme)();
   var _useContext = (0, _react.useContext)(_split_button_context.EuiSplitButtonContext),
     fill = _useContext.fill,
     isDisabled = _useContext.isDisabled,
     isLoading = _useContext.isLoading,
+    size = _useContext.size,
     sharedRest = (0, _objectWithoutProperties2.default)(_useContext, _excluded2);
   var _isDisabled = !!isDisabled || (0, _button_display.isButtonDisabled)(rest);
   var _isLoading = !!isLoading || !!rest.isLoading;
   var display = fill ? 'fill' : 'base';
   var classes = (0, _classnames.default)('euiSplitButtonActionPrimary', className);
-  var styles = _split_button.euiSplitButtonActionStyles;
+  var styles = (0, _react.useMemo)(function () {
+    return (0, _split_button.euiSplitButtonActionStyles)(euiThemeContext, size);
+  }, [euiThemeContext, size]);
   var actionProps = _objectSpread(_objectSpread(_objectSpread({}, rest), sharedRest), {}, {
+    size: size,
     isDisabled: _isDisabled,
     isLoading: _isLoading,
     css: [styles.euiSplitButtonActionPrimary],
@@ -69,17 +75,22 @@ var EuiSplitButtonActionSecondary = exports.EuiSplitButtonActionSecondary = func
     popoverProps = _ref2.popoverProps,
     tooltipProps = _ref2.tooltipProps,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded3);
+  var euiThemeContext = (0, _services.useEuiTheme)();
   var _useContext2 = (0, _react.useContext)(_split_button_context.EuiSplitButtonContext),
     fill = _useContext2.fill,
     isDisabled = _useContext2.isDisabled,
     isLoading = _useContext2.isLoading,
+    size = _useContext2.size,
     sharedRest = (0, _objectWithoutProperties2.default)(_useContext2, _excluded4);
   var _isDisabled = !!isDisabled || (0, _button_display.isButtonDisabled)(rest);
   var _isLoading = !!isLoading || !!rest.isLoading;
   var display = fill ? 'fill' : 'base';
   var classes = (0, _classnames.default)('euiSplitButtonActionSecondary', className);
-  var styles = _split_button.euiSplitButtonActionStyles;
+  var styles = (0, _react.useMemo)(function () {
+    return (0, _split_button.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/lib/components/button/use_button_common_props.js

@@ -20,12 +20,14 @@ var _button_display = require("./button_display/_button_display");
  * popover boundary isolation and isDisabled computation.
  */
 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;
@@ -41,6 +43,8 @@ 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/lib/components/datagrid/body/header/column_actions.js

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