@elastic/eui 86.0.0 → 87.0.0

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

@@ -6,18 +6,31 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiCollapsibleNavBetaStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../global_styling");
-/*
- * 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 _themes = require("../../themes");
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
+                                                                                                                                                                                                                                                                                           * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+                                                                                                                                                                                                                                                                                           * or more contributor license agreements. Licensed under the Elastic License
+                                                                                                                                                                                                                                                                                           * 2.0 and the Server Side Public License, v 1; you may not use this file except
+                                                                                                                                                                                                                                                                                           * in compliance with, at your election, the Elastic License 2.0 or the Server
+                                                                                                                                                                                                                                                                                           * Side Public License, v 1.
+                                                                                                                                                                                                                                                                                           */
+var _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__
+};
 var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiCollapsibleNavBeta: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), " .euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;")
+    euiCollapsibleNavBeta: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), (0, _global_styling.euiYScroll)(euiThemeContext), ".euiFlyoutBody{", (0, _global_styling.logicalCSS)('min-height', '50%'), ";}.euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;"),
+    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: _ref,
+    isOverlayFullWidth: /*#__PURE__*/(0, _react.css)("&.euiFlyout{", (0, _global_styling.logicalCSS)('max-width', '100% !important'), ";};label:isOverlayFullWidth;")
   };
 };
 exports.euiCollapsibleNavBetaStyles = euiCollapsibleNavBetaStyles;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsibleNavButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../../services");
+var _button = require("../../button");
+var _i18n = require("../../i18n");
+var _context = require("../context");
+var _collapsible_nav_button = require("./collapsible_nav_button.styles");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react2 = require("@emotion/react");
+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.
+ */
+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; }
+var EuiCollapsibleNavButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var className = _ref.className,
+    css = _ref.css,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContext = (0, _react.useContext)(_context.EuiCollapsibleNavContext),
+    side = _useContext.side,
+    isPush = _useContext.isPush,
+    isCollapsed = _useContext.isCollapsed;
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _collapsible_nav_button.euiCollapsibleNavButtonWrapperStyles)(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavButtonWrapper, styles[side]];
+  var buttonStyles = [styles.euiCollapsibleNavButton, css];
+  var classes = (0, _classnames.default)('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 = (0, _i18n.useEuiI18n)('euiCollapsibleNavButton.ariaLabelOpen', 'Toggle navigation open');
+  var toggleCloselLabel = (0, _i18n.useEuiI18n)('euiCollapsibleNavButton.ariaLabelClose', 'Toggle navigation closed');
+  var ariaLabel = isCollapsed ? toggleOpenLabel : toggleCloselLabel;
+  return (0, _react2.jsx)("div", {
+    className: "euiCollapsibleNavButtonWrapper",
+    css: cssStyles,
+    ref: ref
+  }, (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
+    "data-test-subj": "euiCollapsibleNavButton",
+    className: classes,
+    css: buttonStyles,
+    size: "s",
+    color: "text",
+    iconType: iconType,
+    "aria-label": ariaLabel,
+    "aria-pressed": !isCollapsed,
+    "aria-expanded": !isCollapsed
+  }, rest)));
+});
+exports.EuiCollapsibleNavButton = EuiCollapsibleNavButton;
+EuiCollapsibleNavButton.displayName = 'EuiCollapsibleNavButton';

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

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCollapsibleNavButtonWrapperStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _header = require("../../header/header.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.
+                                                                                                                                                                                                                                                                                           */
+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__
+};
+var euiCollapsibleNavButtonWrapperStyles = function euiCollapsibleNavButtonWrapperStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiHeaderVariables = (0, _header.euiHeaderVariables)(euiThemeContext),
+    height = _euiHeaderVariables.height,
+    padding = _euiHeaderVariables.padding;
+  return {
+    euiCollapsibleNavButtonWrapper: /*#__PURE__*/(0, _react.css)("display:flex;align-items:center;justify-content:center;", (0, _global_styling.logicalSizeCSS)(height), ";;label:euiCollapsibleNavButtonWrapper;"),
+    euiCollapsibleNavButton: _ref,
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-left', "-".concat(padding)), " ", (0, _global_styling.logicalCSS)('margin-right', padding), ";;label:left;"),
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-right', "-".concat(padding)), " ", (0, _global_styling.logicalCSS)('margin-left', padding), ";;label:right;")
+  };
+};
+exports.euiCollapsibleNavButtonWrapperStyles = euiCollapsibleNavButtonWrapperStyles;

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_button/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiCollapsibleNavButton", {
+  enumerable: true,
+  get: function get() {
+    return _collapsible_nav_button.EuiCollapsibleNavButton;
+  }
+});
+var _collapsible_nav_button = require("./collapsible_nav_button");

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

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsedNavButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../../services");
+var _button_icon = require("../../../button/button_icon");
+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"];
+/*
+ * 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.
+ */
+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; }
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var _useContext = (0, _react.useContext)(_context.EuiCollapsibleNavContext),
+    side = _useContext.side;
+  var buttonStyles = (0, _collapsed_nav_button.euiCollapsedNavButtonStyles)(euiTheme);
+  var buttonCssStyles = [buttonStyles.euiCollapsedNavButton, isSelected && buttonStyles.isSelected, linkProps === null || linkProps === void 0 ? void 0 : linkProps.css];
+  var buttonClassName = (0, _classnames.default)('euiCollapsedNavButton', linkProps === null || linkProps === void 0 ? void 0 : linkProps.className);
+  var tooltipStyles = (0, _collapsed_nav_button.euiCollapsedNavItemTooltipStyles)(euiTheme);
+  var tooltipCssStyles = [tooltipStyles.euiCollapsedNavItemTooltip, tooltipStyles[side], hideToolTip && tooltipStyles.hidden];
+  return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: title,
+    css: tooltipCssStyles,
+    position: side,
+    display: "block",
+    anchorProps: rest
+  }, (0, _react2.jsx)(_button_icon.EuiButtonIcon, (0, _extends2.default)({
+    "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
+  })));
+};
+exports.EuiCollapsedNavButton = EuiCollapsedNavButton;

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

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCollapsedNavItemTooltipStyles = exports.euiCollapsedNavButtonStyles = 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.
+                                                                                                                                                                                                                                                                                           */
+var euiCollapsedNavButtonStyles = function euiCollapsedNavButtonStyles(euiThemeContext) {
+  var sharedStyles = (0, _collapsible_nav_item.euiCollapsibleNavItemVariables)(euiThemeContext);
+  return {
+    euiCollapsedNavButton: /*#__PURE__*/(0, _react.css)("display:flex;margin:", sharedStyles.padding, ";&.euiButtonIcon:hover{transform:none;};label:euiCollapsedNavButton;"),
+    isSelected: /*#__PURE__*/(0, _react.css)("&,&:hover,&:focus{background-color:", sharedStyles.backgroundSelectedColor, ";};label:isSelected;")
+  };
+};
+exports.euiCollapsedNavButtonStyles = euiCollapsedNavButtonStyles;
+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__
+};
+var euiCollapsedNavItemTooltipStyles = function euiCollapsedNavItemTooltipStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    euiCollapsedNavItemTooltip: /*#__PURE__*/(0, _react.css)(";label:euiCollapsedNavItemTooltip;"),
+    // Bring the tooltip closer to the nav - it's a little too far otherwise
+    left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.m)), ";;label:left;"),
+    right: /*#__PURE__*/(0, _react.css)((0, _global_styling.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
+  };
+};
+exports.euiCollapsedNavItemTooltipStyles = euiCollapsedNavItemTooltipStyles;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsedNavItem = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+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"];
+/*
+ * 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.
+ */
+/**
+ * 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
+ */
+var EuiCollapsedNavItem = function EuiCollapsedNavItem(_ref) {
+  var items = _ref.items,
+    className = _ref.className,
+    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)({
+    items: items,
+    className: classes
+  }, props)) : (0, _react2.jsx)(_collapsed_nav_button.EuiCollapsedNavButton, (0, _extends2.default)({
+    className: classes
+  }, props));
+};
+exports.EuiCollapsedNavItem = EuiCollapsedNavItem;

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

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiCollapsedNavPopover = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+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"];
+/*
+ * 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.
+ */
+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; }
+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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _collapsed_nav_popover.euiCollapsedNavPopoverStyles)(euiTheme);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var togglePopover = (0, _react.useCallback)(function () {
+    return setIsPopoverOpen(function (isOpen) {
+      return !isOpen;
+    });
+  }, []);
+  var closePopover = (0, _react.useCallback)(function () {
+    return setIsPopoverOpen(false);
+  }, []);
+  return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    closePopover: closePopover,
+    isOpen: isPopoverOpen,
+    display: "block",
+    anchorPosition: "rightUp",
+    panelPaddingSize: "none",
+    panelProps: {
+      css: styles.euiCollapsedNavPopover__panel
+    },
+    button: (0, _react2.jsx)(_collapsed_nav_button.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), (0, _react2.jsx)(EuiCollapsedNavPopoverTitle, {
+    title: title,
+    titleElement: titleElement,
+    href: href,
+    linkProps: linkProps
+  }), (0, _react2.jsx)("div", {
+    css: styles.euiCollapsedNavPopover__items
+  }, items.map(function (item, index) {
+    return (0, _react2.jsx)(_collapsible_nav_item.EuiCollapsibleNavSubItem, (0, _extends2.default)({
+      key: index
+    }, 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));
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiCollapsedNavPopoverTitleStyles = 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.
+                                                                                                                                                                                                                                                                                           */
+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__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;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiCollapsedNavItem", {
+  enumerable: true,
+  get: function get() {
+    return _collapsed_nav_item.EuiCollapsedNavItem;
+  }
+});
+var _collapsed_nav_item = require("./collapsed_nav_item");

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

@@ -26,7 +26,7 @@ var euiCollapsibleNavAccordionStyles = function euiCollapsibleNavAccordionStyles
     isSelected: /*#__PURE__*/(0, _react.css)("&>.euiAccordion__triggerWrapper{background-color:", sharedStyles.backgroundSelectedColor, ";&:hover{background-color:", sharedStyles.backgroundSelectedColor, ";}};label:isSelected;"),
     isSubItem: /*#__PURE__*/(0, _react.css)("&.euiAccordion-isOpen{", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";};label:isSubItem;"),
     // Arrow element
-    euiCollapsibleNavAccordion__arrow: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), _global_styling.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);", _global_styling.euiCanAnimate, "{transition:transform ", sharedStyles.animation, ",color ", sharedStyles.animation, ";}}&.euiAccordion__iconButton-isOpen>.euiIcon{color:", sharedStyles.color, ";transform:rotate(90deg);};label:euiCollapsibleNavAccordion__arrow;"),
+    euiCollapsibleNavAccordion__arrow: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.xs), _global_styling.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);", _global_styling.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__*/(0, _react.css)(";label:euiCollapsibleNavAccordion__children;"),

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

@@ -1,23 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiCollapsibleNavSubItem = exports.EuiCollapsibleNavItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _icon = require("../../icon");
 var _title = require("../../title");
+var _context = require("../context");
+var _collapsed = require("./collapsed");
 var _collapsible_nav_accordion = require("./collapsible_nav_accordion");
 var _collapsible_nav_link = require("./collapsible_nav_link");
 var _collapsible_nav_item = require("./collapsible_nav_item.styles");
 var _react2 = require("@emotion/react");
-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
@@ -25,6 +29,8 @@ var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "cla
  * 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; }
 /**
  * Internal DRY subcomponent shared between top level items and sub items
  * that handles title display/rendering, and can be used to recursively
@@ -37,13 +43,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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiCollapsibleNavItem', {
-    euiCollapsibleNavSubItem: isSubItem
-  }, className);
   var headerContent = (0, _react2.jsx)(EuiCollapsibleNavItemTitle, {
     title: title,
     titleElement: titleElement,
@@ -53,16 +55,13 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
   var isAccordion = items && items.length > 0;
   if (isAccordion) {
     return (0, _react2.jsx)(_collapsible_nav_accordion.EuiCollapsibleNavAccordion, (0, _extends2.default)({
-      className: classes,
       buttonContent: headerContent,
       items: items
     }, props, {
       isSubItem: isSubItem
     }));
   }
-  return (0, _react2.jsx)(_collapsible_nav_link.EuiCollapsibleNavLink, (0, _extends2.default)({
-    className: classes
-  }, props, {
+  return (0, _react2.jsx)(_collapsible_nav_link.EuiCollapsibleNavLink, (0, _extends2.default)({}, props, {
     // EuiLink ExclusiveUnion type shenanigans
     isSubItem: isSubItem,
     isNotAccordion: true,
@@ -99,6 +98,7 @@ var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
     props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _collapsible_nav_item.euiCollapsibleNavSubItemGroupTitleStyles)(euiTheme);
+  var classes = (0, _classnames.default)('euiCollapsibleNavSubItem', className);
   if (isGroupTitle) {
     var TitleElement = props.titleElement || 'div';
     return (0, _react2.jsx)(_title.EuiTitle, {
@@ -107,7 +107,9 @@ var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
       className: "euiCollapsibleNavItem__groupTitle eui-textTruncate"
     }, (0, _react2.jsx)(TitleElement, null, props.title));
   }
-  return (0, _react2.jsx)(EuiCollapsibleNavItemDisplay, (0, _extends2.default)({}, props, {
+  return (0, _react2.jsx)(EuiCollapsibleNavItemDisplay, (0, _extends2.default)({
+    className: classes
+  }, props, {
     isSubItem: true
   }));
 };
@@ -116,8 +118,18 @@ var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
  * The actual exported component
  */
 exports.EuiCollapsibleNavSubItem = EuiCollapsibleNavSubItem;
-var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(props) {
-  return (0, _react2.jsx)(EuiCollapsibleNavItemDisplay, (0, _extends2.default)({}, props, {
+var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref4) {
+  var className = _ref4.className,
+    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
+  var classes = (0, _classnames.default)('euiCollapsibleNavItem', className);
+  var _useContext = (0, _react.useContext)(_context.EuiCollapsibleNavContext),
+    isCollapsed = _useContext.isCollapsed,
+    isPush = _useContext.isPush;
+  return isCollapsed && isPush ? (0, _react2.jsx)(_collapsed.EuiCollapsedNavItem, (0, _extends2.default)({
+    className: classes
+  }, props)) : (0, _react2.jsx)(EuiCollapsibleNavItemDisplay, (0, _extends2.default)({
+    className: classes
+  }, props, {
     isSubItem: false
   }));
 };