@elastic/eui 88.5.0 → 88.5.2

package/lib/services/canvas/canvas_text_utils.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CanvasTextUtils = void 0;
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/*
+ * 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.
+ */
+/**
+ * Creates a temporary Canvas element for manipulating text & determining text width.
+ *
+ * To accurately measure text, canvas rendering requires either a container to
+ * compute/derive font styles from, or a static font string (useful for usage
+ * outside the DOM). Particular care should be applied when fallback fonts are
+ * used, as more fallback fonts can lead to less precision.
+ *
+ * Please note that while canvas is more significantly more performant than DOM
+ * measurement, there are subpixel to single digit pixel differences between
+ * DOM and canvas measurement due to the different rendering engines used.
+ */
+var CanvasTextUtils = /*#__PURE__*/function () {
+  function CanvasTextUtils(_ref) {
+    var _this = this;
+    var font = _ref.font,
+      container = _ref.container;
+    _classCallCheck(this, CanvasTextUtils);
+    _defineProperty(this, "context", void 0);
+    _defineProperty(this, "currentText", '');
+    _defineProperty(this, "computeFontFromElement", function (element) {
+      var computedStyles = window.getComputedStyle(element);
+      // TODO: font-stretch is not included even though it potentially should be
+      // @see https://developer.mozilla.org/en-US/docs/Web/CSS/font#constituent_properties
+      // It appears to be unsupported and/or breaks font computation in canvas
+      return ['font-style', 'font-variant', 'font-weight', 'font-size', 'font-family'].map(function (prop) {
+        return computedStyles.getPropertyValue(prop);
+      }).join(' ').trim();
+    });
+    _defineProperty(this, "setTextToCheck", function (text) {
+      _this.currentText = text;
+    });
+    this.context = document.createElement('canvas').getContext('2d');
+
+    // Set the canvas font to ensure text width calculations are correct
+    if (font) {
+      this.context.font = font;
+    } else if (container) {
+      this.context.font = this.computeFontFromElement(container);
+    }
+  }
+  _createClass(CanvasTextUtils, [{
+    key: "textWidth",
+    get: function get() {
+      return this.context.measureText(this.currentText).width;
+    }
+  }]);
+  return CanvasTextUtils;
+}();
+exports.CanvasTextUtils = CanvasTextUtils;

package/lib/services/canvas/index.js

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

package/lib/services/index.js

@@ -20,6 +20,7 @@ var _exportNames = {
   useIsWithinBreakpoints: true,
   useIsWithinMaxBreakpoint: true,
   useIsWithinMinBreakpoint: true,
+  CanvasTextUtils: true,
   brighten: true,
   calculateContrast: true,
   calculateLuminance: true,
@@ -97,6 +98,12 @@ Object.defineProperty(exports, "CENTER_ALIGNMENT", {
     return _alignment.CENTER_ALIGNMENT;
   }
 });
+Object.defineProperty(exports, "CanvasTextUtils", {
+  enumerable: true,
+  get: function get() {
+    return _canvas.CanvasTextUtils;
+  }
+});
 Object.defineProperty(exports, "Comparators", {
   enumerable: true,
   get: function get() {
@@ -601,6 +608,7 @@ exports.keys = keys;
 var _accessibility = require("./accessibility");
 var _alignment = require("./alignment");
 var _breakpoint = require("./breakpoint");
+var _canvas = require("./canvas");
 var _color = require("./color");
 var _color_picker = require("./color_picker");
 var _console = require("./console");

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

@@ -23,8 +23,7 @@ import { euiHeaderVariables } from '../header/header.styles';
 import { EuiCollapsibleNavContext } from './context';
 import { EuiCollapsibleNavButton } from './collapsible_nav_button';
 import { euiCollapsibleNavBetaStyles } from './collapsible_nav_beta.styles';
-import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
+var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   var id = _ref.id,
     children = _ref.children,
     className = _ref.className,
@@ -144,4 +143,19 @@ export var EuiCollapsibleNavBeta = function EuiCollapsibleNavBeta(_ref) {
     onClick: toggleCollapsed,
     "aria-controls": flyoutID
   }), !hideFlyout && flyout);
-};
+};
+
+/**
+ * Combined export with subcomponents
+ */
+
+import { EuiCollapsibleNavBody, EuiCollapsibleNavFooter } from './collapsible_nav_body_footer';
+import { EuiCollapsibleNavGroup } from './collapsible_nav_group';
+import { EuiCollapsibleNavItem } from './collapsible_nav_item';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCollapsibleNavBeta = Object.assign(_EuiCollapsibleNavBeta, {
+  Body: EuiCollapsibleNavBody,
+  Footer: EuiCollapsibleNavFooter,
+  Group: EuiCollapsibleNavGroup,
+  Item: EuiCollapsibleNavItem
+});

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

@@ -1,4 +1,3 @@
-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
@@ -8,17 +7,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, euiYScroll } from '../../global_styling';
+import { logicalCSS } from '../../global_styling';
 import { euiShadowFlat } from '../../themes';
 import { euiHeaderVariables } from '../header/header.styles';
-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__
-};
+import { euiCollapsibleNavBodyStyles } from './collapsible_nav_body_footer.styles';
 export var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
 
@@ -28,13 +20,11 @@ export var euiCollapsibleNavBetaStyles = function euiCollapsibleNavBetaStyles(eu
   var defaultHeaderHeight = euiHeaderVariables(euiThemeContext).height;
   var fixedHeaderOffset = "var(--euiFixedHeadersOffset, ".concat(defaultHeaderHeight, ")");
   return {
-    euiCollapsibleNavBeta: /*#__PURE__*/css(logicalCSS('top', fixedHeaderOffset), euiYScroll(euiThemeContext, {
-      height: 'inherit'
-    }), logicalCSS('padding-bottom', euiTheme.size.xs), ".euiFlyoutBody{", logicalCSS('min-height', '50%'), ";}.euiFlyoutFooter{background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavBeta;"),
+    euiCollapsibleNavBeta: /*#__PURE__*/css(logicalCSS('top', fixedHeaderOffset), logicalCSS('padding-bottom', euiTheme.size.xs), ";;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,
+    isPushCollapsed: /*#__PURE__*/css(euiCollapsibleNavBodyStyles._isPushCollapsed, ";;label:isPushCollapsed;"),
     isOverlayFullWidth: /*#__PURE__*/css("&.euiFlyout{", logicalCSS('max-width', '100% !important'), ";};label:isOverlayFullWidth;")
   };
 };

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

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className"],
+  _excluded2 = ["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, { useContext } from 'react';
+import classNames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { EuiFlyoutBody, EuiFlyoutFooter } from '../flyout';
+import { EuiCollapsibleNavContext } from './context';
+import { euiCollapsibleNavBodyStyles as bodyStyles, euiCollapsibleNavFooterStyles } from './collapsible_nav_body_footer.styles';
+
+/**
+ * These components are incredibly light wrappers around `EuiFlyoutBody`
+ * and `EuiFlyoutFooter` with collapsible nav-specific styling/considerations.
+ *
+ * Note: They are not intended to be used standalone outside of EuiCollapsibleNav
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var EuiCollapsibleNavBody = function EuiCollapsibleNavBody(_ref) {
+  var className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiCollapsibleNav__body', className);
+  var _useContext = useContext(EuiCollapsibleNavContext),
+    isCollapsed = _useContext.isCollapsed,
+    isPush = _useContext.isPush;
+  var cssStyles = [bodyStyles.euiCollapsibleNav__body, isCollapsed && isPush && bodyStyles.isPushCollapsed];
+  return ___EmotionJSX(EuiFlyoutBody, _extends({
+    className: classes,
+    css: cssStyles
+    // Since this is a nav, we can almost guarantee there will be clickable
+    // children/links that will enable scrolling. As such, we're optimistically
+    // removing the extra tab stop
+    ,
+    scrollableTabIndex: -1
+  }, props));
+};
+export var EuiCollapsibleNavFooter = function EuiCollapsibleNavFooter(_ref2) {
+  var className = _ref2.className,
+    props = _objectWithoutProperties(_ref2, _excluded2);
+  var classes = classNames('euiCollapsibleNav__footer', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavFooterStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNav__footer];
+  return ___EmotionJSX(EuiFlyoutFooter, _extends({
+    className: classes,
+    css: cssStyles
+  }, props));
+};

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

@@ -0,0 +1,25 @@
+/*
+ * 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';
+export var euiCollapsibleNavBodyStyles = {
+  // In case things get really dire responsively, ensure the footer doesn't overtake the body
+  euiCollapsibleNav__body: /*#__PURE__*/css(logicalCSS('min-height', '50%'), ";;label:euiCollapsibleNav__body;"),
+  get isPushCollapsed() {
+    return /*#__PURE__*/css(".euiFlyoutBody__overflow{", this._isPushCollapsed, ";};label:isPushCollapsed;");
+  },
+  // CSS is reused by main euiCollapsibleNav styles in case the body component isn't used
+  _isPushCollapsed: "\n    /* Hide the scrollbar for docked mode (while still keeping the nav scrollable)\n       Otherwise if scrollbars are visible, button icon visibility suffers. */\n    scrollbar-width: none; /* Firefox */\n\n    &::-webkit-scrollbar {\n      display: none; /* Chrome, Edge, & Safari */\n    }\n  "
+};
+export var euiCollapsibleNavFooterStyles = function euiCollapsibleNavFooterStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiCollapsibleNav__footer: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('border-top', euiTheme.border.thin), ";;label:euiCollapsibleNav__footer;")
+  };
+};

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

@@ -0,0 +1,48 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["items", "className", "wrapperProps"];
+/*
+ * 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 { EuiCollapsibleNavContext } from '../context';
+import { EuiCollapsibleNavItem, EuiCollapsibleNavSubItems } from '../collapsible_nav_item/collapsible_nav_item';
+import { EuiCollapsedNavPopover } from '../collapsible_nav_item/collapsed/collapsed_nav_popover';
+import { euiCollapsibleNavGroupStyles } from './collapsible_nav_group.styles';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * This component should only ever be used as a **top-level component**, and not as a sub-item.
+ * It also should **not** be used in the nav footer.
+ */
+export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
+  var items = _ref.items,
+    className = _ref.className,
+    wrapperProps = _ref.wrapperProps,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useContext = useContext(EuiCollapsibleNavContext),
+    isCollapsed = _useContext.isCollapsed,
+    isPush = _useContext.isPush;
+  var classes = classNames('euiCollapsibleNavGroup', className, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavGroupStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavGroup, isPush && isCollapsed ? styles.euiCollapsibleNavGroup__title : styles.isWrapper, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
+  return ___EmotionJSX("div", _extends({}, wrapperProps, {
+    className: classes,
+    css: cssStyles
+  }), isCollapsed && isPush ? ___EmotionJSX(EuiCollapsedNavPopover, _extends({
+    className: classes,
+    items: items
+  }, props)) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiCollapsibleNavItem, _extends({}, props, {
+    css: styles.euiCollapsibleNavGroup__title
+  })), ___EmotionJSX(EuiCollapsibleNavSubItems, {
+    items: items,
+    isGroup: true
+  })));
+};

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

@@ -0,0 +1,19 @@
+/*
+ * 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 { euiCollapsibleNavItemVariables } from '../collapsible_nav_item/collapsible_nav_item.styles';
+export var euiCollapsibleNavGroupStyles = function euiCollapsibleNavGroupStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var sharedStyles = euiCollapsibleNavItemVariables(euiThemeContext);
+  return {
+    euiCollapsibleNavGroup: /*#__PURE__*/css(";label:euiCollapsibleNavGroup;"),
+    isWrapper: /*#__PURE__*/css("margin:", sharedStyles.padding, ";;label:isWrapper;"),
+    euiCollapsibleNavGroup__title: /*#__PURE__*/css("margin-block:", euiTheme.size.base, ";margin-inline:0;.euiIcon{transform:scale(1.25);};label:euiCollapsibleNavGroup__title;")
+  };
+};

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

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

@@ -12,11 +12,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { EuiAccordion } from '../../accordion';
-import { EuiCollapsibleNavSubItem } from './collapsible_nav_item';
+import { EuiCollapsibleNavSubItems } from './collapsible_nav_item';
 import { EuiCollapsibleNavLink } from './collapsible_nav_link';
 import { euiCollapsibleNavAccordionStyles } from './collapsible_nav_accordion.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -47,10 +47,6 @@ export var EuiCollapsibleNavAccordion = function EuiCollapsibleNavAccordion(_ref
   var euiTheme = useEuiTheme();
   var styles = euiCollapsibleNavAccordionStyles(euiTheme);
   var cssStyles = [styles.euiCollapsibleNavAccordion, isSubItem ? styles.isSubItem : styles.isTopItem, isSelected && styles.isSelected, accordionProps === null || accordionProps === void 0 ? void 0 : accordionProps.css];
-
-  /**
-   * Title / accordion trigger
-   */
   var isTitleInteractive = !!(href || linkProps !== null && linkProps !== void 0 && linkProps.onClick);
 
   // Stop propagation on the title so that the accordion toggle doesn't occur on click
@@ -62,32 +58,6 @@ export var EuiCollapsibleNavAccordion = function EuiCollapsibleNavAccordion(_ref
   }, [linkProps === null || linkProps === void 0 ? void 0 : linkProps.onClick] // eslint-disable-line react-hooks/exhaustive-deps
   );
 
-  /**
-   * Child items
-   */
-  // If any of the sub items have an icon, default to an
-  // icon of `empty` so that all text lines up vertically
-  var itemsHaveIcons = useMemo(function () {
-    return items.some(function (item) {
-      return !!item.icon;
-    });
-  }, [items]);
-  var icon = itemsHaveIcons ? 'empty' : undefined;
-  var childrenCssStyles = [styles.children.euiCollapsibleNavAccordion__children, isSubItem ? styles.children.isSubItem : styles.children.isTopItem];
-  var children = ___EmotionJSX("div", {
-    css: childrenCssStyles,
-    className: "euiCollapsibleNavAccordion__children"
-  }, items.map(function (item, index) {
-    return (
-      // This is an intentional circular dependency between the accordion & parent item display.
-      // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
-      // and split up into separate files/components for better dev readability
-      ___EmotionJSX(EuiCollapsibleNavSubItem, _extends({
-        key: index,
-        icon: icon
-      }, item))
-    );
-  }));
   return ___EmotionJSX(EuiAccordion, _extends({
     id: groupID,
     className: classes,
@@ -109,5 +79,9 @@ export var EuiCollapsibleNavAccordion = function EuiCollapsibleNavAccordion(_ref
     }, accordionProps === null || accordionProps === void 0 ? void 0 : accordionProps.arrowProps), {}, {
       css: [styles.euiCollapsibleNavAccordion__arrow, accordionProps === null || accordionProps === void 0 ? void 0 : (_accordionProps$arrow = accordionProps.arrowProps) === null || _accordionProps$arrow === void 0 ? void 0 : _accordionProps$arrow.css]
     })
-  }), children);
+  }), ___EmotionJSX(EuiCollapsibleNavSubItems, {
+    items: items,
+    isSubItem: isSubItem,
+    className: "euiCollapsibleNavAccordion__children"
+  }));
 };

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

@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, mathWithUnits, euiCanAnimate } from '../../../global_styling';
+import { logicalCSS, euiCanAnimate } from '../../../global_styling';
 import { euiCollapsibleNavItemVariables } from './collapsible_nav_item.styles';
 export var euiCollapsibleNavAccordionStyles = function euiCollapsibleNavAccordionStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
@@ -20,14 +20,6 @@ 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__arrow[aria-expanded='true']>.euiIcon{color:", sharedStyles.color, ";transform:rotate(-90deg);};label:euiCollapsibleNavAccordion__arrow;"),
-    // Children wrapper
-    children: {
-      euiCollapsibleNavAccordion__children: /*#__PURE__*/css(";label:euiCollapsibleNavAccordion__children;"),
-      isTopItem: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", logicalCSS('padding-left', euiTheme.size.xl), ";;label:isTopItem;"),
-      isSubItem: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), " ", logicalCSS('margin-left', euiTheme.size.s), " ", logicalCSS('padding-left', mathWithUnits([euiTheme.size.s, euiTheme.border.width.thin], function (x, y) {
-        return x - y;
-      })), ";;label:isSubItem;")
-    }
+    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__arrow[aria-expanded='true']>.euiIcon{color:", sharedStyles.color, ";transform:rotate(-90deg);};label:euiCollapsibleNavAccordion__arrow;")
   };
 };

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

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "items", "children"],
-  _excluded2 = ["isGroupTitle", "className"],
-  _excluded3 = ["className"];
+  _excluded2 = ["renderItem", "className"],
+  _excluded3 = ["items", "isSubItem", "isGroup", "className"],
+  _excluded4 = ["className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,16 +12,15 @@ var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "ite
  * Side Public License, v 1.
  */
 
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } 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';
+import { euiCollapsibleNavItemTitleStyles, euiCollapsibleNavSubItemsStyles } from './collapsible_nav_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**
  * Internal DRY subcomponent shared between top level items and sub items
@@ -63,7 +63,7 @@ var EuiCollapsibleNavItemDisplay = function EuiCollapsibleNavItemDisplay(_ref) {
 /**
  * Internal subcomponent for title display
  */
-var EuiCollapsibleNavItemTitle = function EuiCollapsibleNavItemTitle(_ref2) {
+export var EuiCollapsibleNavItemTitle = function EuiCollapsibleNavItemTitle(_ref2) {
   var title = _ref2.title,
     _ref2$titleElement = _ref2.titleElement,
     titleElement = _ref2$titleElement === void 0 ? 'span' : _ref2$titleElement,
@@ -80,23 +80,16 @@ var EuiCollapsibleNavItemTitle = function EuiCollapsibleNavItemTitle(_ref2) {
 };
 
 /**
- * Sub-items can either be a group title, to visually separate sections
- * of nav links, or they can simply be more links or accordions
+ * Sub-items can either be a totally custom rendered item,
+ * or they can simply be more links or accordions
  */
 export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
-  var isGroupTitle = _ref3.isGroupTitle,
+  var renderItem = _ref3.renderItem,
     className = _ref3.className,
     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, {
-      size: "xxxs",
-      css: styles.euiCollapsibleNavItem__groupTitle,
-      className: "euiCollapsibleNavItem__groupTitle eui-textTruncate"
-    }, ___EmotionJSX(TitleElement, null, props.title));
+  if (renderItem) {
+    return ___EmotionJSX(React.Fragment, null, renderItem());
   }
   return ___EmotionJSX(EuiCollapsibleNavItemDisplay, _extends({
     className: classes
@@ -105,13 +98,53 @@ export var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
   }));
 };
 
+/**
+ * Reuseable component for rendering a group of sub items
+ * Used by both `EuiCollapsibleNavGroup` and `EuiCollapsibleNavAccordion`
+ */
+
+export var EuiCollapsibleNavSubItems = function EuiCollapsibleNavSubItems(_ref4) {
+  var items = _ref4.items,
+    isSubItem = _ref4.isSubItem,
+    isGroup = _ref4.isGroup,
+    className = _ref4.className,
+    rest = _objectWithoutProperties(_ref4, _excluded3);
+  var classes = classNames('euiCollapsibleNavItem__items', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavSubItemsStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavItem__items, isGroup ? styles.isGroup : isSubItem ? styles.isSubItem : styles.isTopItem];
+  var itemsHaveIcons = useMemo(function () {
+    return items.some(function (item) {
+      return !!item.icon;
+    });
+  }, [items]);
+  return ___EmotionJSX("div", _extends({
+    className: classes,
+    css: cssStyles
+  }, rest), items.map(function (item, index) {
+    // If any of the sub items have an icon, default to an
+    // icon of `empty` so that all text lines up vertically
+    if (!item.renderItem && itemsHaveIcons && !item.icon) {
+      item.icon = 'empty';
+    }
+    return (
+      // This is an intentional circular dependency between the accordion & parent item display.
+      // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
+      // and split up into separate files/components for better dev readability
+      ___EmotionJSX(EuiCollapsibleNavSubItem, _extends({
+        key: index
+      }, item))
+    );
+  }));
+};
+
 /**
  * The actual exported component
  */
 
-export var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref4) {
-  var className = _ref4.className,
-    props = _objectWithoutProperties(_ref4, _excluded3);
+export var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref5) {
+  var className = _ref5.className,
+    props = _objectWithoutProperties(_ref5, _excluded4);
   var classes = classNames('euiCollapsibleNavItem', className);
   var _useContext = useContext(EuiCollapsibleNavContext),
     isCollapsed = _useContext.isCollapsed,

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

@@ -11,7 +11,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalShorthandCSS, euiFontSize } from '../../../global_styling';
+import { logicalCSS, mathWithUnits, euiFontSize } from '../../../global_styling';
 import { euiButtonColor } from '../../../themes/amsterdam/global_styling/mixins/button';
 
 /**
@@ -47,9 +47,19 @@ export var euiCollapsibleNavItemTitleStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };
-export var euiCollapsibleNavSubItemGroupTitleStyles = function euiCollapsibleNavSubItemGroupTitleStyles(_ref) {
+
+/**
+ * Sub item groups
+ */
+
+export var euiCollapsibleNavSubItemsStyles = function euiCollapsibleNavSubItemsStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiCollapsibleNavItem__groupTitle: /*#__PURE__*/css(logicalCSS('margin-top', euiTheme.size.base), " ", logicalShorthandCSS('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), ";;label:euiCollapsibleNavItem__groupTitle;")
+    euiCollapsibleNavItem__items: /*#__PURE__*/css(";label:euiCollapsibleNavItem__items;"),
+    isGroup: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", logicalCSS('padding-left', euiTheme.size.s), ";;label:isGroup;"),
+    isTopItem: /*#__PURE__*/css(logicalCSS('padding-top', euiTheme.size.xs), " ", logicalCSS('padding-left', euiTheme.size.xl), ";;label:isTopItem;"),
+    isSubItem: /*#__PURE__*/css(logicalCSS('border-left', euiTheme.border.thin), " ", logicalCSS('margin-left', euiTheme.size.s), " ", logicalCSS('padding-left', mathWithUnits([euiTheme.size.s, euiTheme.border.width.thin], function (x, y) {
+      return x - y;
+    })), ";;label:isSubItem;")
   };
 };