@elastic/eui 91.0.0 → 91.1.0

package/optimize/lib/components/basic_table/default_item_action.js

@@ -11,6 +11,7 @@ var _button = require("../button");
 var _tool_tip = require("../tool_tip");
 var _accessibility = require("../../services/accessibility");
 var _accessibility2 = require("../accessibility");
+var _action_types = require("./action_types");
 var _react2 = require("@emotion/react");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -20,9 +21,6 @@ var _react2 = require("@emotion/react");
  * Side Public License, v 1.
  */
 
-// In order to use generics with an arrow function inside a .tsx file, it's necessary to use
-// this `extends` hack and declare the types as shown, instead of declaring the const as a
-// FunctionComponent
 var DefaultItemAction = function DefaultItemAction(_ref) {
   var action = _ref.action,
     enabled = _ref.enabled,
@@ -45,25 +43,36 @@ var DefaultItemAction = function DefaultItemAction(_ref) {
     icon = (0, _predicate.isString)(buttonIcon) ? buttonIcon : buttonIcon(item);
   }
   var button;
-  var actionContent = typeof action.name === 'function' ? action.name(item) : action.name;
+  var actionContent = (0, _action_types.callWithItemIfFunction)(item)(action.name);
+  var tooltipContent = (0, _action_types.callWithItemIfFunction)(item)(action.description);
+  var href = (0, _action_types.callWithItemIfFunction)(item)(action.href);
+  var dataTestSubj = (0, _action_types.callWithItemIfFunction)(item)(action['data-test-subj']);
   var ariaLabelId = (0, _accessibility.useGeneratedHtmlId)();
+  var ariaLabelledBy;
   if (action.type === 'icon') {
     if (!icon) {
       throw new Error("Cannot render item action [".concat(action.name, "]. It is configured to render as an icon but no\n      icon is provided. Make sure to set the 'icon' property of the action"));
     }
-    button = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_button.EuiButtonIcon, {
+    button = (0, _react2.jsx)(_button.EuiButtonIcon, {
       className: className,
       "aria-labelledby": ariaLabelId,
       isDisabled: !enabled,
       color: color,
       iconType: icon,
       onClick: onClick,
-      href: action.href,
+      href: href,
       target: action.target,
-      "data-test-subj": action['data-test-subj']
-    }), (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", {
+      "data-test-subj": dataTestSubj
+      // If action is disabled, the normal tooltip can't show - attempt to
+      // provide some amount of affordance with a browser title tooltip
+      ,
+      title: !enabled ? tooltipContent : undefined
+    });
+    // actionContent (action.name) is a ReactNode and must be rendered
+    // to an element and referenced by ID for screen readers
+    ariaLabelledBy = (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", {
       id: ariaLabelId
-    }, actionContent)));
+    }, actionContent));
   } else {
     button = (0, _react2.jsx)(_button.EuiButtonEmpty, {
       className: className,
@@ -72,15 +81,15 @@ var DefaultItemAction = function DefaultItemAction(_ref) {
       color: color,
       iconType: icon,
       onClick: onClick,
-      href: action.href,
+      href: href,
       target: action.target,
-      "data-test-subj": action['data-test-subj'],
+      "data-test-subj": dataTestSubj,
       flush: "right"
     }, actionContent);
   }
-  return enabled && action.description ? (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-    content: action.description,
+  return enabled ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: tooltipContent,
     delay: "long"
-  }, button) : button;
+  }, button), ariaLabelledBy) : (0, _react2.jsx)(_react.default.Fragment, null, button, ariaLabelledBy);
 };
 exports.DefaultItemAction = DefaultItemAction;

package/optimize/lib/components/basic_table/in_memory_table.a11y.js

@@ -136,24 +136,26 @@ describe('EuiInMemoryTable', function () {
         cy.checkAxe();
       });
       it('has zero violations after sorting on a column', function () {
-        cy.realPress('Tab');
-        cy.get('button[data-test-subj="tableHeaderSortButton"]').first().should('have.focus');
-        cy.realPress('Enter');
+        cy.get('button[data-test-subj="tableHeaderSortButton"]').first().focus();
+        cy.realPress('{enter}');
         cy.checkAxe();
       });
       it('has zero violations when number of rows is increased by keyboard', function () {
-        cy.repeatRealPress('Tab', 14);
-        cy.get('button[data-test-subj="tablePaginationPopoverButton"]').should('have.focus').realPress('Space');
-        cy.get('div[data-popover-open="true"]').should('exist');
-        cy.get('div[data-popover-open="true"]').should('have.focus');
+        cy.get('button[data-test-subj="tablePaginationPopoverButton"]').focus().realPress('{enter}');
+        cy.get('div[data-popover-open="true"]', {
+          timeout: 1000
+        }).should('exist');
         cy.repeatRealPress('Tab'); // Switched to Tab from ArrowDown because of flaky test runs
-        cy.get('button[data-test-subj="tablePagination-25-rows"]').realPress('Space');
-        cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+        cy.get('button[data-test-subj="tablePagination-25-rows"]', {
+          timeout: 1000
+        }).realPress('{enter}');
+        cy.get('table.euiTable', {
+          timeout: 1000
+        }).find('tr.euiTableRow').should('have.length', 20);
         cy.checkAxe();
       });
       it('has zero violations when pagination is pressed', function () {
-        cy.repeatRealPress('Tab', 15);
-        cy.get('a[data-test-subj="pagination-button-1"]').should('have.focus').realPress('Enter');
+        cy.get('a[data-test-subj="pagination-button-1"]').focus().realPress('{enter}');
         cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
         cy.checkAxe();
       });

package/optimize/lib/components/breadcrumbs/breadcrumb.js

@@ -91,10 +91,12 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
   var popoverAriaLabel = (0, _i18n.useEuiI18n)('euiBreadcrumb.popoverAriaLabel', 'Clicking this button will toggle a popover dialog.');
   return (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
     var title = innerText === '' ? undefined : innerText;
-    var sharedProps = {
+    var baseProps = {
       ref: ref,
       title: title,
-      'aria-current': ariaCurrent,
+      'aria-current': ariaCurrent
+    };
+    var styleProps = {
       className: classes,
       css: cssStyles
     };
@@ -104,8 +106,10 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
         closePopover: function closePopover() {
           return setIsPopoverOpen(false);
         },
-        button: (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({}, sharedProps, {
-          color: linkColor
+        css: !isLastBreadcrumb && styles.euiBreadcrumb__popoverWrapper,
+        button: (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({}, baseProps, {
+          color: linkColor,
+          css: styles.euiBreadcrumb__popoverButton
           // Avoid passing href and onClick - should only toggle the popover
           ,
           onClick: function onClick() {
@@ -113,14 +117,14 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
               return !isOpen;
             });
           }
-        }, rest), text, ' ', (0, _react2.jsx)(_icon.EuiIcon, {
+        }, rest), (0, _react2.jsx)("span", styleProps, text), (0, _react2.jsx)(_icon.EuiIcon, {
           type: "arrowDown",
           size: "s",
           "aria-label": " - ".concat(popoverAriaLabel)
         }))
       }), popoverContent);
     } else if (isInteractiveBreadcrumb) {
-      return (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({}, sharedProps, {
+      return (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({}, baseProps, styleProps, {
         color: linkColor,
         onClick: onClick,
         href: href,
@@ -130,7 +134,7 @@ var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
       return (0, _react2.jsx)(_text.EuiTextColor, {
         color: plainTextColor,
         cloneElement: true
-      }, (0, _react2.jsx)("span", (0, _extends2.default)({}, sharedProps, rest), text));
+      }, (0, _react2.jsx)("span", (0, _extends2.default)({}, baseProps, styleProps, rest), text));
     }
   });
 };

package/optimize/lib/components/breadcrumbs/breadcrumb.styles.js

@@ -54,6 +54,11 @@ var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeCon
       return x * 10;
     })), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextTruncate)('none'), ";;label:isTruncatedLast;"),
+    // Popover styles
+    euiBreadcrumb__popoverButton: /*#__PURE__*/(0, _react.css)("max-inline-size:100%;display:inline-flex;align-items:center;gap:", euiTheme.size.xs, ";;label:euiBreadcrumb__popoverButton;"),
+    euiBreadcrumb__popoverWrapper: /*#__PURE__*/(0, _react.css)("max-inline-size:calc(\n        100% - ", (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
+      return x + 1;
+    }), "\n      );;label:euiBreadcrumb__popoverWrapper;"),
     // Types
     page: /*#__PURE__*/(0, _react.css)("&:is(a):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), ";}&:is(button):focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'center'), ";};label:page;"),
     application: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " background-color:", (0, _color.transparentize)(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", (0, _color.transparentize)(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'inset'), " :focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),

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

@@ -73,9 +73,11 @@ var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   }
 
   var isText = typeof children === 'string';
+  var doNotRenderTextWrapper = textProps === false;
+  var renderTextWrapper = (isText || textProps) && !doNotRenderTextWrapper;
   return (0, _react2.jsx)("span", (0, _extends2.default)({
     css: cssStyles
-  }, contentProps), iconSide === 'left' && icon, isText || textProps ? (0, _react2.jsx)("span", (0, _extends2.default)({}, textProps, {
+  }, contentProps), iconSide === 'left' && icon, renderTextWrapper ? (0, _react2.jsx)("span", (0, _extends2.default)({}, textProps, {
     className: (0, _classnames.default)('eui-textTruncate', textProps === null || textProps === void 0 ? void 0 : textProps.className)
   }), children) : children, iconSide === 'right' && icon);
 };

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

@@ -74,14 +74,14 @@ var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
   var cssStyles = [styles.euiButtonEmpty, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], flush && styles.flush, flush && styles[flush], isDisabled && styles.isDisabled];
   var classes = (0, _classnames.default)('euiButtonEmpty', className);
   var contentClassNames = (0, _classnames.default)('euiButtonEmpty__content', contentProps === null || contentProps === void 0 ? void 0 : contentProps.className);
-  var textClassNames = (0, _classnames.default)('euiButtonEmpty__text', textProps === null || textProps === void 0 ? void 0 : textProps.className);
+  var textClassNames = (0, _classnames.default)('euiButtonEmpty__text', textProps && textProps.className);
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, (0, _extends2.default)({
     isDisabled: isDisabled,
     isLoading: isLoading,
     iconType: iconType,
     iconSide: iconSide,
     iconSize: size === 'xs' ? 's' : iconSize,
-    textProps: _objectSpread(_objectSpread({}, textProps), {}, {
+    textProps: textProps === false ? false : _objectSpread(_objectSpread({}, textProps), {}, {
       className: textClassNames
     })
   }, _objectSpread(_objectSpread({}, contentProps), {}, {

package/optimize/lib/components/card/card.a11y.js

@@ -51,6 +51,7 @@ var Card = function Card() {
   return (0, _react2.jsx)(_flex.EuiFlexGroup, {
     gutterSize: "l"
   }, (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_card.EuiCard, {
+    "data-test-subj": "cy-card-1",
     icon: (0, _react2.jsx)(_icon.EuiIcon, {
       size: "xxl",
       type: "logoSketch"
@@ -119,24 +120,10 @@ describe('EuiCard', function () {
       cy.checkAxe();
     });
     it('has zero violations after keyboard interaction', function () {
-      cy.repeatRealPress('Tab');
-      cy.realPress('Enter');
-      cy.focused().should('have.attr', 'aria-checked', 'true');
-      cy.repeatRealPress('Tab');
-      cy.realPress('Enter');
-      cy.focused().should('have.attr', 'aria-checked', 'true');
-      cy.repeatRealPress('Tab');
-      cy.realPress('Enter');
-      cy.focused().should('have.attr', 'aria-checked', 'true');
-      cy.checkAxe();
-      cy.realPress('Enter');
-      cy.focused().should('have.attr', 'aria-checked', 'false');
-      cy.repeatRealPress(['Shift', 'Tab']);
-      cy.realPress('Enter');
-      cy.focused().should('have.attr', 'aria-checked', 'false');
-      cy.repeatRealPress(['Shift', 'Tab']);
-      cy.realPress('Enter');
-      cy.focused().should('have.attr', 'aria-checked', 'false');
+      cy.get('div[data-test-subj="cy-card-1"]').find('button.euiButtonEmpty').focus();
+      cy.realPress('Tab');
+      cy.realPress('{enter}');
+      cy.get('div[data-test-subj="cy-card-1"]').find('button.euiButton').should('have.attr', 'aria-checked', 'true');
       cy.checkAxe();
     });
   });

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_beta.styles.js

@@ -30,7 +30,7 @@ var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeC
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";;label:left;"),
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";;label:right;"),
     isPush: /*#__PURE__*/(0, _react.css)((0, _themes.euiShadowFlat)(euiThemeContext), ";;label:isPush;"),
-    isPushCollapsed: /*#__PURE__*/(0, _react.css)(_collapsible_nav_body_footer.euiCollapsibleNavBodyStyles._isPushCollapsed, ";;label:isPushCollapsed;"),
+    isPushCollapsed: /*#__PURE__*/(0, _react.css)(_collapsible_nav_body_footer.hideScrollbars, ";;label:isPushCollapsed;"),
     isOverlayFullWidth: /*#__PURE__*/(0, _react.css)("&.euiFlyout{", (0, _global_styling.logicalCSS)('max-width', '100% !important'), ";};label:isOverlayFullWidth;")
   };
 };

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.js

@@ -55,9 +55,12 @@ var EuiCollapsibleNavFooter = function EuiCollapsibleNavFooter(_ref2) {
   var className = _ref2.className,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
   var classes = (0, _classnames.default)('euiCollapsibleNav__footer', className);
+  var _useContext2 = (0, _react.useContext)(_context.EuiCollapsibleNavContext),
+    isCollapsed = _useContext2.isCollapsed,
+    isPush = _useContext2.isPush;
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _collapsible_nav_body_footer.euiCollapsibleNavFooterStyles)(euiTheme);
-  var cssStyles = [styles.euiCollapsibleNav__footer];
+  var cssStyles = [styles.euiCollapsibleNav__footer, isCollapsed && isPush && styles.isPushCollapsed];
   return (0, _react2.jsx)(_flyout.EuiFlyoutFooter, (0, _extends2.default)({
     className: classes,
     css: cssStyles

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_body_footer.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiCollapsibleNavFooterStyles = exports.euiCollapsibleNavBodyStyles = void 0;
+exports.hideScrollbars = exports.euiCollapsibleNavFooterStyles = exports.euiCollapsibleNavBodyStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
 /*
@@ -14,20 +14,23 @@ var _global_styling = require("../../global_styling");
  * Side Public License, v 1.
  */
 
+// Hide the scrollbar for docked mode (while still keeping the nav scrollable)
+// Otherwise if scrollbars are visible, button icon visibility suffers.
+var hideScrollbars = "\n  scrollbar-width: none; /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none; /* Chrome, Edge, & Safari */\n  }\n";
+exports.hideScrollbars = hideScrollbars;
 var euiCollapsibleNavBodyStyles = {
   // In case things get really dire responsively, ensure the footer doesn't overtake the body
   euiCollapsibleNav__body: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', '50%'), ";;label:euiCollapsibleNav__body;"),
-  get isPushCollapsed() {
-    return /*#__PURE__*/(0, _react.css)(".euiFlyoutBody__overflow{", this._isPushCollapsed, ";};label:isPushCollapsed;");
-  },
-  // CSS is reused by main euiCollapsibleNav styles in case the body component isn't used
-  _isPushCollapsed: "\n    /* Hide the scrollbar for docked mode (while still keeping the nav scrollable)\n       Otherwise if scrollbars are visible, button icon visibility suffers. */\n    scrollbar-width: none; /* Firefox */\n\n    &::-webkit-scrollbar {\n      display: none; /* Chrome, Edge, & Safari */\n    }\n  "
+  isPushCollapsed: /*#__PURE__*/(0, _react.css)(".euiFlyoutBody__overflow{", hideScrollbars, ";};label:isPushCollapsed;")
 };
 exports.euiCollapsibleNavBodyStyles = euiCollapsibleNavBodyStyles;
-var euiCollapsibleNavFooterStyles = function euiCollapsibleNavFooterStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
+var euiCollapsibleNavFooterStyles = function euiCollapsibleNavFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCollapsibleNav__footer: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:euiCollapsibleNav__footer;")
+    euiCollapsibleNav__footer: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.euiYScrollWithShadows)(euiThemeContext, {
+      side: 'end'
+    }), ";;label:euiCollapsibleNav__footer;"),
+    isPushCollapsed: /*#__PURE__*/(0, _react.css)(hideScrollbars, ";;label:isPushCollapsed;")
   };
 };
 exports.euiCollapsibleNavFooterStyles = euiCollapsibleNavFooterStyles;

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js

@@ -16,7 +16,7 @@ var _tool_tip = require("../../../tool_tip");
 var _context = require("../../context");
 var _collapsed_nav_button = require("./collapsed_nav_button.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["href", "title", "icon", "iconProps", "isSelected", "onClick", "hideToolTip", "linkProps", "accordionProps", "titleElement", "items"];
+var _excluded = ["href", "title", "icon", "iconProps", "isSelected", "onClick", "hideToolTip", "linkProps", "titleElement"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -35,9 +35,7 @@ var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
     onClick = _ref.onClick,
     hideToolTip = _ref.hideToolTip,
     linkProps = _ref.linkProps,
-    accordionProps = _ref.accordionProps,
     titleElement = _ref.titleElement,
-    items = _ref.items,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var _useContext = (0, _react.useContext)(_context.EuiCollapsibleNavContext),

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js

@@ -12,7 +12,7 @@ var _collapsed_nav_button = require("./collapsed_nav_button");
 var _collapsed_nav_popover = require("./collapsed_nav_popover");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@emotion/react");
-var _excluded = ["items", "className"];
+var _excluded = ["className", "href", "linkProps", "items", "accordionProps", "isCollapsible"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -27,15 +27,20 @@ var _excluded = ["items", "className"];
  * Accordions turn into popovers, links turn into icon buttons
  */
 var EuiCollapsedNavItem = function EuiCollapsedNavItem(_ref) {
-  var items = _ref.items,
-    className = _ref.className,
+  var className = _ref.className,
+    href = _ref.href,
+    linkProps = _ref.linkProps,
+    items = _ref.items,
+    accordionProps = _ref.accordionProps,
+    isCollapsible = _ref.isCollapsible,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiCollapsedNavItem', className);
-  var hasItems = items && items.length > 0;
-  return hasItems ? (0, _react2.jsx)(_collapsed_nav_popover.EuiCollapsedNavPopover, (0, _extends2.default)({
+  return items ? (0, _react2.jsx)(_collapsed_nav_popover.EuiCollapsedNavPopover, (0, _extends2.default)({
     items: items,
     className: classes
   }, props)) : (0, _react2.jsx)(_collapsed_nav_button.EuiCollapsedNavButton, (0, _extends2.default)({
+    href: href,
+    linkProps: linkProps,
     className: classes
   }, props));
 };

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -11,13 +11,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../../../services");
-var _link = require("../../../link");
 var _popover = require("../../../popover");
 var _collapsible_nav_item = require("../collapsible_nav_item");
 var _collapsed_nav_button = require("./collapsed_nav_button");
 var _collapsed_nav_popover = require("./collapsed_nav_popover.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["items", "href", "linkProps", "title", "titleElement", "icon", "iconProps", "isSelected", "accordionProps"];
+var _excluded = ["items", "title", "titleElement", "icon", "iconProps", "isSelected"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,14 +28,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
   var items = _ref.items,
-    href = _ref.href,
-    linkProps = _ref.linkProps,
     title = _ref.title,
-    titleElement = _ref.titleElement,
+    _ref$titleElement = _ref.titleElement,
+    TitleElement = _ref$titleElement === void 0 ? 'span' : _ref$titleElement,
     icon = _ref.icon,
     iconProps = _ref.iconProps,
     isSelected = _ref.isSelected,
-    accordionProps = _ref.accordionProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _collapsed_nav_popover.euiCollapsedNavPopoverStyles)(euiTheme);
@@ -68,14 +65,11 @@ var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
       isSelected: isSelected,
       onClick: togglePopover,
       hideToolTip: isPopoverOpen
-      // Note: do not pass `linkProps` to buttons that toggle popovers
     })
-  }, rest), (0, _react2.jsx)(EuiCollapsedNavPopoverTitle, {
-    title: title,
-    titleElement: titleElement,
-    href: href,
-    linkProps: linkProps
-  }), (0, _react2.jsx)("div", {
+  }, rest), (0, _react2.jsx)(_popover.EuiPopoverTitle, null, (0, _react2.jsx)(TitleElement, {
+    css: styles.euiCollapsedNavPopover__title,
+    className: "eui-textTruncate"
+  }, title)), (0, _react2.jsx)("div", {
     css: styles.euiCollapsedNavPopover__items
   }, items.map(function (item, index) {
     return (0, _react2.jsx)(_collapsible_nav_item.EuiCollapsibleNavSubItem, (0, _extends2.default)({
@@ -83,26 +77,4 @@ var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
     }, item));
   })));
 };
-exports.EuiCollapsedNavPopover = EuiCollapsedNavPopover;
-var EuiCollapsedNavPopoverTitle = function EuiCollapsedNavPopoverTitle(_ref2) {
-  var title = _ref2.title,
-    _ref2$titleElement = _ref2.titleElement,
-    TitleElement = _ref2$titleElement === void 0 ? 'span' : _ref2$titleElement,
-    href = _ref2.href,
-    linkProps = _ref2.linkProps;
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _collapsed_nav_popover.euiCollapsedNavPopoverTitleStyles)(euiTheme);
-  var cssStyles = [styles.euiCollapsedNavPopover__title, href ? styles.link : styles.span, href && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.css)];
-  return (0, _react2.jsx)(_popover.EuiPopoverTitle, null, href ? (0, _react2.jsx)(_link.EuiLink, (0, _extends2.default)({
-    href: href,
-    color: "text"
-  }, linkProps, {
-    // ExclusiveUnion shenanigans :|
-    css: cssStyles
-  }), (0, _react2.jsx)(TitleElement, {
-    className: "eui-textTruncate"
-  }, title)) : (0, _react2.jsx)(TitleElement, {
-    css: cssStyles,
-    className: "eui-textTruncate"
-  }, title));
-};
+exports.EuiCollapsedNavPopover = EuiCollapsedNavPopover;

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.styles.js

@@ -3,42 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiCollapsedNavPopoverTitleStyles = exports.euiCollapsedNavPopoverStyles = void 0;
+exports.euiCollapsedNavPopoverStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../../global_styling");
-var _collapsible_nav_item = require("../collapsible_nav_item.styles");
-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.
-                                                                                                                                                                                                                                                                                           */
+/*
+ * 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 euiCollapsedNavPopoverStyles = function euiCollapsedNavPopoverStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiCollapsedNavPopover__panel: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 15;
     })), ";;label:euiCollapsedNavPopover__panel;"),
+    euiCollapsedNavPopover__title: /*#__PURE__*/(0, _react.css)("display:block;padding:", euiTheme.size.m, ";font-weight:", euiTheme.font.weight.bold, ";;label:euiCollapsedNavPopover__title;"),
     euiCollapsedNavPopover__items: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext), " padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.xs, ";", (0, _global_styling.logicalCSS)('max-height', '50vh'), "@media (max-height: ", euiTheme.breakpoint.s, "px){", (0, _global_styling.logicalCSS)('max-height', '75vh'), ";};label:euiCollapsedNavPopover__items;")
   };
 };
-exports.euiCollapsedNavPopoverStyles = euiCollapsedNavPopoverStyles;
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1423k63-span",
-  styles: "display:block;label:span;"
-} : {
-  name: "1423k63-span",
-  styles: "display:block;label:span;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-var euiCollapsedNavPopoverTitleStyles = function euiCollapsedNavPopoverTitleStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  var sharedStyles = (0, _collapsible_nav_item.euiCollapsibleNavItemVariables)(euiThemeContext);
-  return {
-    euiCollapsedNavPopover__title: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.m, ";font-weight:", euiTheme.font.weight.bold, ";;label:euiCollapsedNavPopover__title;"),
-    link: /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;[class*='euiLink__externalIcon']{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), " ", (0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xxs), " color:", sharedStyles.rightIconColor, ";};label:link;"),
-    span: _ref
-  };
-};
-exports.euiCollapsedNavPopoverTitleStyles = euiCollapsedNavPopoverTitleStyles;
+exports.euiCollapsedNavPopoverStyles = euiCollapsedNavPopoverStyles;

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.js

@@ -1,15 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiCollapsibleNavAccordion = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _accordion = require("../../accordion");
@@ -17,7 +16,7 @@ var _collapsible_nav_item = require("./collapsible_nav_item");
 var _collapsible_nav_link = require("./collapsible_nav_link");
 var _collapsible_nav_accordion = require("./collapsible_nav_accordion.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "className", "items", "href", "isSubItem", "isSelected", "linkProps", "accordionProps", "buttonContent", "children"];
+var _excluded = ["id", "className", "items", "isSubItem", "isSelected", "accordionProps", "buttonContent", "children"];
 /*
  * 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 +24,6 @@ var _excluded = ["id", "className", "items", "href", "isSubItem", "isSelected",
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /**
@@ -41,10 +38,8 @@ var EuiCollapsibleNavAccordion = function EuiCollapsibleNavAccordion(_ref) {
   var id = _ref.id,
     className = _ref.className,
     items = _ref.items,
-    href = _ref.href,
     isSubItem = _ref.isSubItem,
     isSelected = _ref.isSelected,
-    linkProps = _ref.linkProps,
     accordionProps = _ref.accordionProps,
     buttonContent = _ref.buttonContent,
     _children = _ref.children,
@@ -56,30 +51,15 @@ var EuiCollapsibleNavAccordion = function EuiCollapsibleNavAccordion(_ref) {
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _collapsible_nav_accordion.euiCollapsibleNavAccordionStyles)(euiTheme);
   var cssStyles = [styles.euiCollapsibleNavAccordion, isSubItem ? styles.isSubItem : styles.isTopItem, isSelected && styles.isSelected, accordionProps === null || accordionProps === void 0 ? void 0 : accordionProps.css];
-  var isTitleInteractive = !!(href || linkProps !== null && linkProps !== void 0 && linkProps.onClick);
-
-  // Stop propagation on the title so that the accordion toggle doesn't occur on click
-  // (should only occur on accordion arrow click for UX consistency)
-  var stopPropagationClick = (0, _react.useCallback)(function (e) {
-    var _linkProps$onClick;
-    e.stopPropagation();
-    linkProps === null || linkProps === void 0 ? void 0 : (_linkProps$onClick = linkProps.onClick) === null || _linkProps$onClick === void 0 ? void 0 : _linkProps$onClick.call(linkProps, e);
-  }, [linkProps === null || linkProps === void 0 ? void 0 : linkProps.onClick] // eslint-disable-line react-hooks/exhaustive-deps
-  );
-
   return (0, _react2.jsx)(_accordion.EuiAccordion, (0, _extends2.default)({
     id: groupID,
     className: classes,
     initialIsOpen: isSelected,
-    buttonElement: "div",
-    buttonContent: (0, _react2.jsx)(_collapsible_nav_link.EuiCollapsibleNavLink, (0, _extends2.default)({
-      href: href
-    }, linkProps, {
+    buttonContent: (0, _react2.jsx)(_collapsible_nav_link.EuiCollapsibleNavLink, {
       isSelected: isSelected,
       isSubItem: isSubItem,
-      onClick: stopPropagationClick,
-      isInteractive: isTitleInteractive
-    }), buttonContent),
+      isInteractive: false
+    }, buttonContent),
     arrowDisplay: "right"
   }, rest, accordionProps, {
     css: cssStyles,