@elastic/eui 86.0.0 → 87.0.0

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

@@ -1,4 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["id", "children", "className", "style", "initialIsCollapsed", "width", "side", "focusTrapProps"];
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -7,20 +14,151 @@ import _extends from "@babel/runtime/helpers/extends";
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { useEuiTheme } from '../../services';
-import { EuiCollapsibleNav } from '../collapsible_nav/collapsible_nav';
+import React, { useRef, useMemo, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
+import { mathWithUnits, logicalStyle } from '../../global_styling';
+import { EuiFlyout } from '../flyout';
+import { euiHeaderVariables } from '../header/header.styles';
+import { EuiCollapsibleNavContext } from './context';
+import { EuiCollapsibleNavButton } from './collapsible_nav_button';
 import { euiCollapsibleNavBetaStyles } from './collapsible_nav_beta.styles';
-
-/**
- * TODO: Actual component in a follow-up PR
- */
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(props) {
+export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
+  var id = _ref.id,
+    children = _ref.children,
+    className = _ref.className,
+    style = _ref.style,
+    _ref$initialIsCollaps = _ref.initialIsCollapsed,
+    initialIsCollapsed = _ref$initialIsCollaps === void 0 ? false : _ref$initialIsCollaps,
+    _ref$width = _ref.width,
+    _width = _ref$width === void 0 ? 248 : _ref$width,
+    _ref$side = _ref.side,
+    side = _ref$side === void 0 ? 'left' : _ref$side,
+    _focusTrapProps = _ref.focusTrapProps,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = useEuiTheme();
+  var headerHeight = euiHeaderVariables(euiTheme).height;
+
+  /**
+   * Collapsed state
+   */
+  var _useState = useState(initialIsCollapsed),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  var toggleCollapsed = useCallback(function () {
+    return setIsCollapsed(function (isCollapsed) {
+      return !isCollapsed;
+    });
+  }, []);
+  var onClose = useCallback(function () {
+    return setIsCollapsed(true);
+  }, []);
+
+  /**
+   * Responsive behavior
+   * By default on large enough screens, the nav is always a push flyout,
+   * but on smaller/mobile screens, the nav overlays the page instead
+   */
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isOverlay = _useState4[0],
+    setIsOverlay = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOverlayFullWidth = _useState6[0],
+    setIsOverlayFullWidth = _useState6[1];
+  var flyoutType = isOverlay ? 'overlay' : 'push';
+  var isPush = !isOverlay;
+
+  // Set up a window resize listener that determines breakpoint behavior
+  useEffect(function () {
+    var getBreakpoints = function getBreakpoints() {
+      setIsOverlay(window.innerWidth < _width * 3);
+      setIsOverlayFullWidth(window.innerWidth < _width * 1.5);
+    };
+    getBreakpoints();
+    var onWindowResize = throttle(getBreakpoints, 50);
+    window.addEventListener('resize', onWindowResize);
+    return function () {
+      return window.removeEventListener('resize', onWindowResize);
+    };
+  }, [_width]);
+
+  // If the nav was previously uncollapsed and shrinks down to the
+  // overlay flyout, default to its hidden/collapsed state
+  useEffect(function () {
+    if (isOverlay) setIsCollapsed(true);
+  }, [isOverlay]);
+  var width = useMemo(function () {
+    if (isOverlayFullWidth) return '100%';
+    if (isPush && isCollapsed) return headerHeight;
+    return _width;
+  }, [_width, isOverlayFullWidth, isPush, isCollapsed, headerHeight]);
+
+  /**
+   * Header affordance
+   */
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    fixedHeadersCount = _useState8[0],
+    setFixedHeadersCount = _useState8[1];
+  useEffect(function () {
+    setFixedHeadersCount(document.querySelectorAll('.euiHeader[data-fixed-header]').length);
+  }, []);
+  var stylesWithHeaderOffset = useMemo(function () {
+    if (!fixedHeadersCount) return style;
+    var headersOffset = mathWithUnits(headerHeight, function (x) {
+      return x * fixedHeadersCount;
+    });
+    return _objectSpread(_objectSpread(_objectSpread({}, style), logicalStyle('top', headersOffset)), logicalStyle('height', "calc(100% - ".concat(headersOffset, ")")));
+  }, [fixedHeadersCount, style, headerHeight]);
+
+  /**
+   * Prop setup
+   */
+  var flyoutID = useGeneratedHtmlId({
+    conditionalId: id,
+    suffix: 'euiCollapsibleNav'
+  });
+  var buttonRef = useRef(null);
+  var focusTrapProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, _focusTrapProps), {}, {
+      shards: [buttonRef].concat(_toConsumableArray((_focusTrapProps === null || _focusTrapProps === void 0 ? void 0 : _focusTrapProps.shards) || []))
+    });
+  }, [_focusTrapProps]);
+  var classes = classNames('euiCollapsibleNav', 'euiCollapsibleNavBeta', className);
   var styles = euiCollapsibleNavBetaStyles(euiTheme);
-  return ___EmotionJSX(EuiCollapsibleNav, _extends({
-    css: styles.euiCollapsibleNavBeta,
-    size: 248
-  }, props));
+  var cssStyles = [styles.euiCollapsibleNavBeta, styles[side], isPush && styles.isPush, isPush && isCollapsed && styles.isPushCollapsed, isOverlayFullWidth && styles.isOverlayFullWidth];
+
+  // Wait for any fixed headers to be queried before rendering (prevents position jumping)
+  var flyout = fixedHeadersCount !== false && ___EmotionJSX(EuiFlyout, _extends({}, rest, {
+    // EuiCollapsibleNav is significantly less permissive than EuiFlyout
+    id: flyoutID,
+    css: cssStyles,
+    className: classes,
+    style: stylesWithHeaderOffset,
+    size: width,
+    side: side,
+    focusTrapProps: focusTrapProps,
+    as: "nav",
+    type: flyoutType,
+    paddingSize: "none",
+    pushMinBreakpoint: "xs",
+    onClose: onClose,
+    hideCloseButton: true
+  }), children);
+  var hideFlyout = isOverlay && isCollapsed;
+  return ___EmotionJSX(EuiCollapsibleNavContext.Provider, {
+    value: {
+      isPush: isPush,
+      isCollapsed: isCollapsed,
+      side: side
+    }
+  }, ___EmotionJSX(EuiCollapsibleNavButton, {
+    ref: buttonRef,
+    onClick: toggleCollapsed,
+    "aria-controls": flyoutID
+  }), !hideFlyout && flyout);
 };

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

@@ -1,3 +1,4 @@
+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
@@ -7,10 +8,24 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS } from '../../global_styling';
+import { logicalCSS, euiYScroll } from '../../global_styling';
+import { euiShadowFlat } from '../../themes';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1adm1dw-isPushCollapsed",
+  styles: "&,.euiFlyoutBody__overflow{scrollbar-width:none;&::-webkit-scrollbar{display:none;}};label:isPushCollapsed;"
+} : {
+  name: "1adm1dw-isPushCollapsed",
+  styles: "&,.euiFlyoutBody__overflow{scrollbar-width:none;&::-webkit-scrollbar{display:none;}};label:isPushCollapsed;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCollapsibleNavBeta: /*#__PURE__*/css(logicalCSS('border-top', euiTheme.border.thin), " ", logicalCSS('border-right', euiTheme.border.thin), " .euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;")
+    euiCollapsibleNavBeta: /*#__PURE__*/css(logicalCSS('padding-bottom', euiTheme.size.xs), euiYScroll(euiThemeContext), ".euiFlyoutBody{", logicalCSS('min-height', '50%'), ";}.euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;"),
+    left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thin), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), ";;label:right;"),
+    isPush: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:isPush;"),
+    isPushCollapsed: _ref,
+    isOverlayFullWidth: /*#__PURE__*/css("&.euiFlyout{", logicalCSS('max-width', '100% !important'), ";};label:isOverlayFullWidth;")
   };
 };

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

@@ -0,0 +1,62 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "css"];
+/*
+ * 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, { forwardRef, useContext } from 'react';
+import { useEuiTheme } from '../../../services';
+import { EuiButtonIcon } from '../../button';
+import { useEuiI18n } from '../../i18n';
+import { EuiCollapsibleNavContext } from '../context';
+import { euiCollapsibleNavButtonWrapperStyles } from './collapsible_nav_button.styles';
+import classNames from 'classnames';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCollapsibleNavButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    css = _ref.css,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(EuiCollapsibleNavContext),
+    side = _useContext.side,
+    isPush = _useContext.isPush,
+    isCollapsed = _useContext.isCollapsed;
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavButtonWrapperStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavButtonWrapper, styles[side]];
+  var buttonStyles = [styles.euiCollapsibleNavButton, css];
+  var classes = classNames('euiCollapsibleNavButton', className);
+  var iconType;
+  if (isPush) {
+    if (side === 'left') {
+      iconType = isCollapsed ? 'menuRight' : 'menuLeft';
+    } else {
+      iconType = isCollapsed ? 'menuLeft' : 'menuRight';
+    }
+  } else {
+    iconType = isCollapsed ? 'menu' : 'cross';
+  }
+  var toggleOpenLabel = useEuiI18n('euiCollapsibleNavButton.ariaLabelOpen', 'Toggle navigation open');
+  var toggleCloselLabel = useEuiI18n('euiCollapsibleNavButton.ariaLabelClose', 'Toggle navigation closed');
+  var ariaLabel = isCollapsed ? toggleOpenLabel : toggleCloselLabel;
+  return ___EmotionJSX("div", {
+    className: "euiCollapsibleNavButtonWrapper",
+    css: cssStyles,
+    ref: ref
+  }, ___EmotionJSX(EuiButtonIcon, _extends({
+    "data-test-subj": "euiCollapsibleNavButton",
+    className: classes,
+    css: buttonStyles,
+    size: "s",
+    color: "text",
+    iconType: iconType,
+    "aria-label": ariaLabel,
+    "aria-pressed": !isCollapsed,
+    "aria-expanded": !isCollapsed
+  }, rest)));
+});
+EuiCollapsibleNavButton.displayName = 'EuiCollapsibleNavButton';

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.styles.js

@@ -0,0 +1,32 @@
+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, logicalSizeCSS } from '../../../global_styling';
+import { euiHeaderVariables } from '../../header/header.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "msjxar-euiCollapsibleNavButton",
+  styles: "&.euiButtonIcon:hover{transform:none;};label:euiCollapsibleNavButton;"
+} : {
+  name: "msjxar-euiCollapsibleNavButton",
+  styles: "&.euiButtonIcon:hover{transform:none;};label:euiCollapsibleNavButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiCollapsibleNavButtonWrapperStyles = function euiCollapsibleNavButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
+    height = _euiHeaderVariables.height,
+    padding = _euiHeaderVariables.padding;
+  return {
+    euiCollapsibleNavButtonWrapper: /*#__PURE__*/css("display:flex;align-items:center;justify-content:center;", logicalSizeCSS(height), ";;label:euiCollapsibleNavButtonWrapper;"),
+    euiCollapsibleNavButton: _ref,
+    left: /*#__PURE__*/css(logicalCSS('border-right', euiTheme.border.thin), " ", logicalCSS('margin-left', "-".concat(padding)), " ", logicalCSS('margin-right', padding), ";;label:left;"),
+    right: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), " ", logicalCSS('margin-right', "-".concat(padding)), " ", logicalCSS('margin-left', padding), ";;label:right;")
+  };
+};

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_button/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 { EuiCollapsibleNavButton } from './collapsible_nav_button';

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

@@ -0,0 +1,61 @@
+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
+  }, 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;"),