@elastic/eui 86.0.0 → 87.1.0

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

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["href", "title", "icon", "iconProps", "isSelected", "onClick", "hideToolTip", "linkProps", "accordionProps", "titleElement", "items"];
+/*
+ * 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.
+ */
+
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { useEuiTheme } from '../../../../services';
+import { EuiButtonIcon } from '../../../button/button_icon';
+import { EuiToolTip } from '../../../tool_tip';
+import { EuiCollapsibleNavContext } from '../../context';
+import { euiCollapsedNavButtonStyles, euiCollapsedNavItemTooltipStyles } from './collapsed_nav_button.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
+  var href = _ref.href,
+    title = _ref.title,
+    icon = _ref.icon,
+    iconProps = _ref.iconProps,
+    isSelected = _ref.isSelected,
+    onClick = _ref.onClick,
+    hideToolTip = _ref.hideToolTip,
+    linkProps = _ref.linkProps,
+    accordionProps = _ref.accordionProps,
+    titleElement = _ref.titleElement,
+    items = _ref.items,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = useEuiTheme();
+  var _useContext = useContext(EuiCollapsibleNavContext),
+    side = _useContext.side;
+  var buttonStyles = euiCollapsedNavButtonStyles(euiTheme);
+  var buttonCssStyles = [buttonStyles.euiCollapsedNavButton, isSelected && buttonStyles.isSelected, linkProps === null || linkProps === void 0 ? void 0 : linkProps.css];
+  var buttonClassName = classNames('euiCollapsedNavButton', linkProps === null || linkProps === void 0 ? void 0 : linkProps.className);
+  var tooltipStyles = euiCollapsedNavItemTooltipStyles(euiTheme);
+  var tooltipCssStyles = [tooltipStyles.euiCollapsedNavItemTooltip, tooltipStyles[side], hideToolTip && tooltipStyles.hidden];
+  return ___EmotionJSX(EuiToolTip, {
+    content: title,
+    css: tooltipCssStyles,
+    position: side,
+    display: "block",
+    anchorProps: rest
+  }, ___EmotionJSX(EuiButtonIcon, _extends({
+    "data-test-subj": "euiCollapsedNavButton",
+    size: "s",
+    color: "text",
+    href: href,
+    onClick: onClick,
+    "aria-label": title
+  }, linkProps, {
+    // Exclusive union shenanigans
+    className: buttonClassName,
+    css: buttonCssStyles,
+    iconType: icon || 'link',
+    iconSize: iconProps === null || iconProps === void 0 ? void 0 : iconProps.size,
+    isSelected: isSelected
+  })));
+};

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.styles.js

@@ -0,0 +1,39 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../../global_styling';
+import { euiCollapsibleNavItemVariables } from '../collapsible_nav_item.styles';
+export var euiCollapsedNavButtonStyles = function euiCollapsedNavButtonStyles(euiThemeContext) {
+  var sharedStyles = euiCollapsibleNavItemVariables(euiThemeContext);
+  return {
+    euiCollapsedNavButton: /*#__PURE__*/css("display:flex;margin:", sharedStyles.padding, ";&.euiButtonIcon:hover{transform:none;};label:euiCollapsedNavButton;"),
+    isSelected: /*#__PURE__*/css("&,&:hover,&:focus{background-color:", sharedStyles.backgroundSelectedColor, ";};label:isSelected;")
+  };
+};
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1mkqgn7-hidden",
+  styles: "display:none;label:hidden;"
+} : {
+  name: "1mkqgn7-hidden",
+  styles: "display:none;label:hidden;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiCollapsedNavItemTooltipStyles = function euiCollapsedNavItemTooltipStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    euiCollapsedNavItemTooltip: /*#__PURE__*/css(";label:euiCollapsedNavItemTooltip;"),
+    // Bring the tooltip closer to the nav - it's a little too far otherwise
+    left: /*#__PURE__*/css(logicalCSS('margin-left', "-".concat(euiTheme.size.m)), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('margin-right', "-".concat(euiTheme.size.m)), ";;label:right;"),
+    // If the item has a popover and the popover is open, we don't want the
+    // tooltip to appear if so - the popover already renders the item title
+    hidden: _ref
+  };
+};

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

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["items", "className"];
+/*
+ * 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.
+ */
+
+import React from 'react';
+import { EuiCollapsedNavButton } from './collapsed_nav_button';
+import { EuiCollapsedNavPopover } from './collapsed_nav_popover';
+import classNames from 'classnames';
+
+/**
+ * The collapsed nav item state only shows on larger/non-mobile screens
+ * and collapses top-level link/accordion items to only rendering icons.
+ *
+ * Accordions turn into popovers, links turn into icon buttons
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCollapsedNavItem = function EuiCollapsedNavItem(_ref) {
+  var items = _ref.items,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiCollapsedNavItem', className);
+  var hasItems = items && items.length > 0;
+  return hasItems ? ___EmotionJSX(EuiCollapsedNavPopover, _extends({
+    items: items,
+    className: classes
+  }, props)) : ___EmotionJSX(EuiCollapsedNavButton, _extends({
+    className: classes
+  }, props));
+};

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

@@ -0,0 +1,98 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["items", "href", "linkProps", "title", "titleElement", "icon", "iconProps", "isSelected", "accordionProps"];
+/*
+ * 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.
+ */
+
+import React, { useState, useCallback } from 'react';
+import { useEuiTheme } from '../../../../services';
+import { EuiLink } from '../../../link';
+import { EuiPopover, EuiPopoverTitle } from '../../../popover';
+import { EuiCollapsibleNavSubItem } from '../collapsible_nav_item';
+import { EuiCollapsedNavButton } from './collapsed_nav_button';
+import { euiCollapsedNavPopoverStyles, euiCollapsedNavPopoverTitleStyles } from './collapsed_nav_popover.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
+  var items = _ref.items,
+    href = _ref.href,
+    linkProps = _ref.linkProps,
+    title = _ref.title,
+    titleElement = _ref.titleElement,
+    icon = _ref.icon,
+    iconProps = _ref.iconProps,
+    isSelected = _ref.isSelected,
+    accordionProps = _ref.accordionProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsedNavPopoverStyles(euiTheme);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var togglePopover = useCallback(function () {
+    return setIsPopoverOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var closePopover = useCallback(function () {
+    return setIsPopoverOpen(false);
+  }, []);
+  return ___EmotionJSX(EuiPopover, _extends({
+    closePopover: closePopover,
+    isOpen: isPopoverOpen,
+    display: "block",
+    anchorPosition: "rightUp",
+    panelPaddingSize: "none",
+    panelProps: {
+      css: styles.euiCollapsedNavPopover__panel
+    },
+    button: ___EmotionJSX(EuiCollapsedNavButton, {
+      title: title,
+      icon: icon || 'boxesHorizontal',
+      iconProps: iconProps,
+      isSelected: isSelected,
+      onClick: togglePopover,
+      hideToolTip: isPopoverOpen
+      // Note: do not pass `linkProps` to buttons that toggle popovers
+    })
+  }, rest), ___EmotionJSX(EuiCollapsedNavPopoverTitle, {
+    title: title,
+    titleElement: titleElement,
+    href: href,
+    linkProps: linkProps
+  }), ___EmotionJSX("div", {
+    css: styles.euiCollapsedNavPopover__items
+  }, items.map(function (item, index) {
+    return ___EmotionJSX(EuiCollapsibleNavSubItem, _extends({
+      key: index
+    }, item));
+  })));
+};
+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 = useEuiTheme();
+  var styles = euiCollapsedNavPopoverTitleStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsedNavPopover__title, href ? styles.link : styles.span, href && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.css)];
+  return ___EmotionJSX(EuiPopoverTitle, null, href ? ___EmotionJSX(EuiLink, _extends({
+    href: href,
+    color: "text"
+  }, linkProps, {
+    // ExclusiveUnion shenanigans :|
+    css: cssStyles
+  }), ___EmotionJSX(TitleElement, {
+    className: "eui-textTruncate"
+  }, title)) : ___EmotionJSX(TitleElement, {
+    css: cssStyles,
+    className: "eui-textTruncate"
+  }, title));
+};

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

@@ -0,0 +1,38 @@
+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.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, mathWithUnits, euiYScrollWithShadows } from '../../../../global_styling';
+import { euiCollapsibleNavItemVariables } from '../collapsible_nav_item.styles';
+export var euiCollapsedNavPopoverStyles = function euiCollapsedNavPopoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiCollapsedNavPopover__panel: /*#__PURE__*/css(logicalCSS('width', mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 15;
+    })), ";;label:euiCollapsedNavPopover__panel;"),
+    euiCollapsedNavPopover__items: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext), " padding-block:", euiTheme.size.s, ";padding-inline:", euiTheme.size.xs, ";", logicalCSS('max-height', '50vh'), "@media (max-height: ", euiTheme.breakpoint.s, "px){", logicalCSS('max-height', '75vh'), ";};label:euiCollapsedNavPopover__items;")
+  };
+};
+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__
+};
+export var euiCollapsedNavPopoverTitleStyles = function euiCollapsedNavPopoverTitleStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var sharedStyles = euiCollapsibleNavItemVariables(euiThemeContext);
+  return {
+    euiCollapsedNavPopover__title: /*#__PURE__*/css("padding:", euiTheme.size.m, ";font-weight:", euiTheme.font.weight.bold, ";;label:euiCollapsedNavPopover__title;"),
+    link: /*#__PURE__*/css("display:flex;align-items:center;[class*='euiLink__externalIcon']{", logicalCSS('margin-left', 'auto'), " ", logicalCSS('margin-right', euiTheme.size.xxs), " color:", sharedStyles.rightIconColor, ";};label:link;"),
+    span: _ref
+  };
+};

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { EuiCollapsedNavItem } from './collapsed_nav_item';

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.styles.js

@@ -20,7 +20,7 @@ export var euiCollapsibleNavAccordionStyles = function euiCollapsibleNavAccordio
     isSelected: /*#__PURE__*/css("&>.euiAccordion__triggerWrapper{background-color:", sharedStyles.backgroundSelectedColor, ";&:hover{background-color:", sharedStyles.backgroundSelectedColor, ";}};label:isSelected;"),
     isSubItem: /*#__PURE__*/css("&.euiAccordion-isOpen{", logicalCSS('margin-bottom', euiTheme.size.m), ";};label:isSubItem;"),
     // Arrow element
-    euiCollapsibleNavAccordion__arrow: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), euiCanAnimate, "{transition:background-color ", sharedStyles.animation, ";}&:hover,&:focus-visible{background-color:", euiTheme.colors.lightShade, ";&>.euiIcon{color:", sharedStyles.color, ";}}transform:none!important;&>.euiIcon{color:", sharedStyles.rightIconColor, ";transform:rotate(-90deg);", euiCanAnimate, "{transition:transform ", sharedStyles.animation, ",color ", sharedStyles.animation, ";}}&.euiAccordion__iconButton-isOpen>.euiIcon{color:", sharedStyles.color, ";transform:rotate(90deg);};label:euiCollapsibleNavAccordion__arrow;"),
+    euiCollapsibleNavAccordion__arrow: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), euiCanAnimate, "{transition:background-color ", sharedStyles.animation, ";}&:hover,&:focus-visible{background-color:", euiTheme.colors.lightShade, ";&>.euiIcon{color:", sharedStyles.color, ";}}transform:none!important;&>.euiIcon{color:", sharedStyles.rightIconColor, ";transform:rotate(90deg);", euiCanAnimate, "{transition:transform ", sharedStyles.animation, ",color ", sharedStyles.animation, ";}}&.euiAccordion__iconButton-isOpen>.euiIcon{color:", sharedStyles.color, ";transform:rotate(-90deg);};label:euiCollapsibleNavAccordion__arrow;"),
     // Children wrapper
     children: {
       euiCollapsibleNavAccordion__children: /*#__PURE__*/css(";label:euiCollapsibleNavAccordion__children;"),

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js

@@ -1,7 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "className", "items", "children"],
-  _excluded2 = ["isGroupTitle", "className"];
+var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "items", "children"],
+  _excluded2 = ["isGroupTitle", "className"],
+  _excluded3 = ["className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,11 +11,13 @@ var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "cla
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useContext } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiTitle } from '../../title';
+import { EuiCollapsibleNavContext } from '../context';
+import { EuiCollapsedNavItem } from './collapsed';
 import { EuiCollapsibleNavAccordion } from './collapsible_nav_accordion';
 import { EuiCollapsibleNavLink } from './collapsible_nav_link';
 import { euiCollapsibleNavItemTitleStyles, euiCollapsibleNavSubItemGroupTitleStyles } from './collapsible_nav_item.styles';
@@ -31,13 +34,9 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
     titleElement = _ref.titleElement,
     icon = _ref.icon,
     iconProps = _ref.iconProps,
-    className = _ref.className,
     items = _ref.items,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiCollapsibleNavItem', {
-    euiCollapsibleNavSubItem: isSubItem
-  }, className);
   var headerContent = ___EmotionJSX(EuiCollapsibleNavItemTitle, {
     title: title,
     titleElement: titleElement,
@@ -47,16 +46,13 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
   var isAccordion = items && items.length > 0;
   if (isAccordion) {
     return ___EmotionJSX(EuiCollapsibleNavAccordion, _extends({
-      className: classes,
       buttonContent: headerContent,
       items: items
     }, props, {
       isSubItem: isSubItem
     }));
   }
-  return ___EmotionJSX(EuiCollapsibleNavLink, _extends({
-    className: classes
-  }, props, {
+  return ___EmotionJSX(EuiCollapsibleNavLink, _extends({}, props, {
     // EuiLink ExclusiveUnion type shenanigans
     isSubItem: isSubItem,
     isNotAccordion: true,
@@ -93,6 +89,7 @@ export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
     props = _objectWithoutProperties(_ref3, _excluded2);
   var euiTheme = useEuiTheme();
   var styles = euiCollapsibleNavSubItemGroupTitleStyles(euiTheme);
+  var classes = classNames('euiCollapsibleNavSubItem', className);
   if (isGroupTitle) {
     var TitleElement = props.titleElement || 'div';
     return ___EmotionJSX(EuiTitle, {
@@ -101,7 +98,9 @@ export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
       className: "euiCollapsibleNavItem__groupTitle eui-textTruncate"
     }, ___EmotionJSX(TitleElement, null, props.title));
   }
-  return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({}, props, {
+  return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({
+    className: classes
+  }, props, {
     isSubItem: true
   }));
 };
@@ -110,8 +109,18 @@ export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
  * The actual exported component
  */
 
-export var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(props) {
-  return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({}, props, {
+export var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref4) {
+  var className = _ref4.className,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  var classes = classNames('euiCollapsibleNavItem', className);
+  var _useContext = useContext(EuiCollapsibleNavContext),
+    isCollapsed = _useContext.isCollapsed,
+    isPush = _useContext.isPush;
+  return isCollapsed && isPush ? ___EmotionJSX(EuiCollapsedNavItem, _extends({
+    className: classes
+  }, props)) : ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({
+    className: classes
+  }, props, {
     isSubItem: false
   }));
 };

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.js

@@ -41,16 +41,16 @@ export var EuiCollapsibleNavLink = function EuiCollapsibleNavLink(_ref) {
     isSubItem = _ref.isSubItem,
     linkProps = _ref.linkProps,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiCollapsibleNavLink', className);
+  var classes = classNames('euiCollapsibleNavLink', className, isInteractive && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.className));
   var euiTheme = useEuiTheme();
   var styles = euiCollapsibleNavLinkStyles(euiTheme);
-  var cssStyles = [styles.euiCollapsibleNavLink, isSelected && styles.isSelected, isSubItem ? styles.isSubItem : styles.isTopItem.isTopItem, isNotAccordion && !isSubItem && styles.isTopItem.isNotAccordion, isInteractive && !isSelected && !isSubItem && styles.isTopItem.isInteractive, linkProps === null || linkProps === void 0 ? void 0 : linkProps.css];
+  var cssStyles = [styles.euiCollapsibleNavLink, isSelected && styles.isSelected, isSubItem ? styles.isSubItem : styles.isTopItem.isTopItem, isNotAccordion && !isSubItem && styles.isTopItem.isNotAccordion, isInteractive && !isSelected && !isSubItem && styles.isTopItem.isInteractive, isInteractive && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.css)];
   return isInteractive ? ___EmotionJSX(EuiLink, _extends({
     href: href,
-    rel: rel,
-    className: classes
+    rel: rel
   }, _objectSpread(_objectSpread({}, rest), linkProps), {
     // EuiLink ExclusiveUnion shenanigans
+    className: classes,
     css: cssStyles
   }), children) : ___EmotionJSX("span", _extends({
     className: classes,

package/optimize/es/components/collapsible_nav_beta/context.js

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+import { createContext } from 'react';
+export var EuiCollapsibleNavContext = /*#__PURE__*/createContext({
+  isCollapsed: false,
+  isPush: true,
+  side: 'left'
+});

package/optimize/es/components/datagrid/data_grid.js

@@ -18,6 +18,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import classNames from 'classnames';
 import React, { forwardRef, useMemo, useRef, useState } from 'react';
 import { useGeneratedHtmlId } from '../../services';
+import { useEuiTablePaginationDefaults } from '../table/table_pagination';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiI18n, useEuiI18n } from '../i18n';
 import { useMutationObserver } from '../observer/mutation_observer';
@@ -82,7 +83,7 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
     gridStyle = props.gridStyle,
     _props$toolbarVisibil = props.toolbarVisibility,
     toolbarVisibility = _props$toolbarVisibil === void 0 ? true : _props$toolbarVisibil,
-    pagination = props.pagination,
+    _pagination = props.pagination,
     sorting = props.sorting,
     inMemory = props.inMemory,
     onColumnResize = props.onColumnResize,
@@ -97,6 +98,13 @@ export var EuiDataGrid = /*#__PURE__*/forwardRef(function (props, ref) {
   /**
    * Merge consumer settings with defaults
    */
+  var paginationDefaults = useEuiTablePaginationDefaults();
+  var pagination = useMemo(function () {
+    return _pagination ? _objectSpread({
+      pageSize: paginationDefaults.itemsPerPage,
+      pageSizeOptions: paginationDefaults.itemsPerPageOptions
+    }, _pagination) : _pagination;
+  }, [_pagination, paginationDefaults]);
   var gridStyleWithDefaults = useMemo(function () {
     return _objectSpread(_objectSpread({}, startingStyles), gridStyle);
   }, [gridStyle]);

package/optimize/es/components/datagrid/utils/data_grid_pagination.js

@@ -9,18 +9,21 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 
 import React, { useCallback, useContext } from 'react';
 import { useEuiI18n } from '../../i18n'; // Note: this file must be named data_grid_pagination to match i18n tokens
-import { EuiTablePagination } from '../../table/table_pagination';
+import { EuiTablePagination, useEuiTablePaginationDefaults } from '../../table/table_pagination';
 import { DataGridFocusContext } from './focus';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRenderer(_ref) {
   var pageIndex = _ref.pageIndex,
-    pageSize = _ref.pageSize,
-    pageSizeOptions = _ref.pageSizeOptions,
+    _pageSize = _ref.pageSize,
+    _pageSizeOptions = _ref.pageSizeOptions,
     _onChangePage = _ref.onChangePage,
     onChangeItemsPerPage = _ref.onChangeItemsPerPage,
     rowCount = _ref.rowCount,
     controls = _ref.controls,
     ariaLabel = _ref['aria-label'];
+  var defaults = useEuiTablePaginationDefaults();
+  var pageSize = _pageSize !== null && _pageSize !== void 0 ? _pageSize : defaults.itemsPerPage;
+  var pageSizeOptions = _pageSizeOptions !== null && _pageSizeOptions !== void 0 ? _pageSizeOptions : defaults.itemsPerPageOptions;
   var detailedPaginationLabel = useEuiI18n('euiDataGridPagination.detailedPaginationLabel', 'Pagination for preceding grid: {label}', {
     label: ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ''
   });
@@ -34,7 +37,7 @@ export var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRendere
     setFocusedCell([0, 0]);
   }, [setFocusedCell, _onChangePage]);
   var pageCount = pageSize ? Math.ceil(rowCount / pageSize) : 1;
-  var minSizeOption = pageSizeOptions && _toConsumableArray(pageSizeOptions).sort(function (a, b) {
+  var minSizeOption = _toConsumableArray(pageSizeOptions).sort(function (a, b) {
     return a - b;
   })[0];
   if (rowCount < (minSizeOption || pageSize)) {
@@ -46,8 +49,8 @@ export var EuiDataGridPaginationRenderer = function EuiDataGridPaginationRendere
     return null;
   }
 
-  // hide select rows per page if pageSizeOptions is undefined or an empty array
-  var hidePerPageOptions = !pageSizeOptions || pageSizeOptions.length === 0;
+  // Hide select rows per page if pageSizeOptions is an empty array
+  var hidePerPageOptions = pageSizeOptions.length === 0;
   return ___EmotionJSX("div", {
     className: "euiDataGrid__pagination"
   }, ___EmotionJSX(EuiTablePagination, {

package/optimize/es/components/date_picker/date_picker_range.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
+var _excluded = ["children", "className", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,6 +26,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
     _fullWidth = _ref.fullWidth,
+    _compressed = _ref.compressed,
     isCustom = _ref.isCustom,
     readOnly = _ref.readOnly,
     isLoading = _ref.isLoading,
@@ -36,8 +37,9 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     append = _ref.append,
     prepend = _ref.prepend,
     rest = _objectWithoutProperties(_ref, _excluded);
-  // `fullWidth` should not affect inline datepickers (matches non-range behavior)
+  // `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
   var fullWidth = _fullWidth && !inline;
+  var compressed = _compressed && !inline;
   var classes = classNames('euiDatePickerRange', className);
   var euiTheme = useEuiTheme();
   var styles = euiDatePickerRangeStyles(euiTheme);
@@ -109,6 +111,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     startControl: startControl,
     endControl: endControl,
     fullWidth: fullWidth,
+    compressed: compressed,
     readOnly: readOnly,
     isDisabled: disabled,
     isInvalid: isInvalid,

package/optimize/es/components/date_picker/super_date_picker/super_date_picker.a11y.js

@@ -63,7 +63,7 @@ var SuperDatePicker = function SuperDatePicker() {
 };
 beforeEach(function () {
   cy.mount(___EmotionJSX(SuperDatePicker, null));
-  cy.get('div.euiSuperDatePicker__flexWrapper').should('exist');
+  cy.get('div.euiSuperDatePicker').should('exist');
 });
 describe('EuiSuperDatePicker', function () {
   describe('Automated accessibility check', function () {

package/optimize/es/components/filter_group/filter_group.a11y.js

@@ -233,10 +233,10 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 3);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich - Checked option. To exclude this option, press Enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
       cy.realPress('ArrowDown');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy - Excluded option. To uncheck this option, press Enter.');
+      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.');
       cy.checkAxe();
     });
     it('has zero violations when filtering by searchbox', function () {

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

@@ -3,7 +3,7 @@ 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", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap"];
+var _excluded = ["className", "children", "as", "hideCloseButton", "closeButtonProps", "closeButtonPosition", "onClose", "ownFocus", "side", "size", "paddingSize", "maxWidth", "style", "maskProps", "type", "outsideClickCloses", "pushMinBreakpoint", "focusTrapProps", "includeFixedHeadersInFocusTrap", "aria-describedby"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /*
@@ -70,6 +70,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _focusTrapProps = _ref$focusTrapProps === void 0 ? {} : _ref$focusTrapProps,
     _ref$includeFixedHead = _ref.includeFixedHeadersInFocusTrap,
     includeFixedHeadersInFocusTrap = _ref$includeFixedHead === void 0 ? true : _ref$includeFixedHead,
+    _ariaDescribedBy = _ref['aria-describedby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   var Element = as || defaultElement;
   var maskRef = useRef(null);
@@ -203,6 +204,7 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
    */
   var hasOverlayMask = ownFocus && !isPushed;
   var descriptionId = useGeneratedHtmlId();
+  var ariaDescribedBy = classnames(descriptionId, _ariaDescribedBy);
   var screenReaderDescription = ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
     id: descriptionId
   }, hasOverlayMask ? ___EmotionJSX(EuiI18n, {
@@ -247,15 +249,15 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (_ref, ref) {
     clickOutsideDisables: !ownFocus,
     onClickOutside: onClickOutside
   }, focusTrapProps), ___EmotionJSX(Element, _extends({
-    css: cssStyles
-  }, rest, {
-    role: "dialog",
     className: classes,
-    tabIndex: 0,
-    "data-autofocus": true,
-    "aria-describedby": !isPushed ? descriptionId : undefined,
+    css: cssStyles,
     style: newStyle,
     ref: setRef
+  }, rest, {
+    role: !isPushed ? 'dialog' : rest.role,
+    tabIndex: !isPushed ? 0 : rest.tabIndex,
+    "aria-describedby": !isPushed ? ariaDescribedBy : _ariaDescribedBy,
+    "data-autofocus": !isPushed || undefined
   }), !isPushed && screenReaderDescription, closeButton, children));
 
   // If ownFocus is set, wrap with an overlay and allow the user to click it to close it.

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "banner"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,6 +18,8 @@ export var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   var children = _ref.children,
     className = _ref.className,
     banner = _ref.banner,
+    _ref$scrollableTabInd = _ref.scrollableTabIndex,
+    scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiFlyoutBody', className);
   var euiTheme = useEuiTheme();
@@ -29,7 +31,7 @@ export var EuiFlyoutBody = function EuiFlyoutBody(_ref) {
     className: classes,
     css: cssStyles
   }, rest), ___EmotionJSX("div", {
-    tabIndex: 0,
+    tabIndex: scrollableTabIndex,
     className: "euiFlyoutBody__overflow",
     css: overflowCssStyles
   }, banner && ___EmotionJSX("div", {