@elastic/eui 62.0.3 → 63.0.0

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

@@ -0,0 +1,61 @@
+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 { transparentize } from '../../services/color';
+import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS } from '../../global_styling';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1k7t4ns-isCollapsed",
+  styles: "flex-shrink:0;label:isCollapsed;"
+} : {
+  name: "1k7t4ns-isCollapsed",
+  styles: "flex-shrink:0;label:isCollapsed;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "p0bcva-isTruncated",
+  styles: "overflow:hidden;label:isTruncated;"
+} : {
+  name: "p0bcva-isTruncated",
+  styles: "overflow:hidden;label:isTruncated;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiBreadcrumbStyles = function euiBreadcrumbStyles(euiThemeContext) {
+  // Styles cast to <li> element
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiBreadcrumb: /*#__PURE__*/css("align-items:center;display:flex;", logicalCSS( // See .euiBreadcrumbs__list's negative margin-bottom
+    'margin-bottom', euiTheme.size.xs), ";;label:euiBreadcrumb;"),
+    isTruncated: _ref2,
+    isCollapsed: _ref,
+    // Types
+    page: /*#__PURE__*/css("&:not(:last-of-type){&:after{background:", euiTheme.colors.lightShade, ";content:'';flex-shrink:0;", logicalCSS('margin-top', euiTheme.size.xs), " ", logicalCSS('margin-bottom', 0), " ", logicalCSS('margin-horizontal', euiTheme.size.s), " ", logicalCSS('height', euiTheme.size.base), " ", logicalCSS('width', '1px'), " transform:translateY(-1px) rotate(15deg);}};label:page;"),
+    application: /*#__PURE__*/css("&:not(:last-of-type){", logicalCSS('margin-right', "-".concat(euiTheme.size.xs)), ";};label:application;")
+  };
+};
+export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiThemeContext) {
+  // Styles cast to <a>, <span>, or collapsed <button> elements
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiBreadcrumb__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";text-align:center;vertical-align:baseline;;label:euiBreadcrumb__content;"),
+    isTruncated: /*#__PURE__*/css(euiTextTruncate("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
+    isTruncatedLast: /*#__PURE__*/css(euiTextTruncate('none'), ";;label:isTruncatedLast;"),
+    // Types
+    page: /*#__PURE__*/css("&:is(a):focus{", euiFocusRing(euiTheme, 'inset'), ";}&:is(button):focus{", euiFocusRing(euiTheme, 'center'), ";};label:page;"),
+    application: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), ";background-color:", transparentize(euiTheme.colors.darkestShade, 0.2), ";clip-path:polygon(\n        0 0,\n        calc(100% - ", euiTheme.size.s, ") 0,\n        100% 50%,\n        calc(100% - ", euiTheme.size.s, ") 100%,\n        0 100%,\n        ", euiTheme.size.s, " 50%\n      );color:", euiTheme.colors.darkestShade, ";line-height:", euiTheme.size.base, ";", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-horizontal', euiTheme.size.base), " &:is(a),&:is(button){background-color:", transparentize(euiTheme.colors.primary, 0.2), ";color:", euiTheme.colors.link, ";:focus{", euiFocusRing(euiTheme, 'inset'), ";:focus-visible{border-radius:", euiTheme.border.radius.medium, ";clip-path:none;}}};label:application;"),
+    applicationStyles: {
+      onlyChild: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";clip-path:none;", logicalCSS('padding-horizontal', euiTheme.size.m), ",;;label:onlyChild;"),
+      firstChild: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, " 0 0 ", euiTheme.border.radius.medium, ";clip-path:polygon(\n          0 0,\n          calc(100% - ", euiTheme.size.s, ") 0,\n          100% 50%,\n          calc(100% - ", euiTheme.size.s, ") 100%,\n          0 100%\n        );", logicalCSS('padding-left', euiTheme.size.m), ",;;label:firstChild;"),
+      lastChild: /*#__PURE__*/css("border-radius:0 ", euiTheme.border.radius.medium, " ", euiTheme.border.radius.medium, " 0;clip-path:polygon(\n          0 0,\n          100% 0,\n          100% 100%,\n          0 100%,\n          ", euiTheme.size.s, " 50%\n        );", logicalCSS('padding-right', euiTheme.size.m), ",;;label:lastChild;")
+    }
+  };
+};

package/optimize/es/components/breadcrumbs/breadcrumbs.js

@@ -1,9 +1,7 @@
 import _typeof from "@babel/runtime/helpers/typeof";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-var _excluded = ["breadcrumbs", "className", "responsive", "truncate", "max"],
-    _excluded2 = ["text", "href", "onClick", "truncate", "className"];
+var _excluded = ["breadcrumbs", "className", "responsive", "truncate", "max", "type", "lastBreadcrumbIsCurrentPage"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -12,99 +10,18 @@ var _excluded = ["breadcrumbs", "className", "responsive", "truncate", "max"],
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React, { useEffect, useState } from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import { useEuiI18n } from '../i18n';
-import { EuiInnerText } from '../inner_text';
-import { EuiLink } from '../link';
-import { EuiPopover } from '../popover';
-import { EuiIcon } from '../icon';
-import { throttle } from '../../services';
-import { getBreakpoint } from '../../services/breakpoint';
+import { useEuiTheme, useCurrentEuiBreakpoint } from '../../services';
+import { EuiBreadcrumb, EuiBreadcrumbContent, EuiBreadcrumbCollapsed } from './breadcrumb';
+import { euiBreadcrumbsListStyles } from './breadcrumbs.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var CONTENT_CLASSNAME = 'euiBreadcrumb__content';
 var responsiveDefault = {
   xs: 1,
   s: 2,
   m: 4
 };
-
-var limitBreadcrumbs = function limitBreadcrumbs(breadcrumbs, max, allBreadcrumbs) {
-  var breadcrumbsAtStart = [];
-  var breadcrumbsAtEnd = [];
-  var limit = Math.min(max, breadcrumbs.length);
-  var start = Math.floor(limit / 2);
-  var overflowBreadcrumbs = allBreadcrumbs.slice(start, start + breadcrumbs.length - limit);
-
-  if (overflowBreadcrumbs.length) {
-    overflowBreadcrumbs[overflowBreadcrumbs.length - 1]['aria-current'] = 'false';
-  }
-
-  for (var i = 0; i < limit; i++) {
-    // We'll alternate with displaying breadcrumbs at the end and at the start, but be biased
-    // towards breadcrumbs the end so that if max is an odd number, we'll have one more
-    // breadcrumb visible at the end than at the beginning.
-    var isEven = i % 2 === 0; // We're picking breadcrumbs from the front AND the back, so we treat each iteration as a
-    // half-iteration.
-
-    var normalizedIndex = Math.floor(i * 0.5);
-    var indexOfBreadcrumb = isEven ? breadcrumbs.length - 1 - normalizedIndex : normalizedIndex;
-    var breadcrumb = breadcrumbs[indexOfBreadcrumb];
-
-    if (isEven) {
-      breadcrumbsAtEnd.unshift(breadcrumb);
-    } else {
-      breadcrumbsAtStart.push(breadcrumb);
-    }
-  }
-
-  var EuiBreadcrumbCollapsed = function EuiBreadcrumbCollapsed() {
-    var _useState = useState(false),
-        _useState2 = _slicedToArray(_useState, 2),
-        isPopoverOpen = _useState2[0],
-        setIsPopoverOpen = _useState2[1];
-
-    var ariaLabel = useEuiI18n('euiBreadcrumbs.collapsedBadge.ariaLabel', 'See collapsed breadcrumbs');
-
-    var ellipsisButton = ___EmotionJSX(EuiLink, {
-      className: CONTENT_CLASSNAME,
-      color: "subdued",
-      "aria-label": ariaLabel,
-      title: ariaLabel,
-      onClick: function onClick() {
-        return setIsPopoverOpen(!isPopoverOpen);
-      }
-    }, "\u2026 ", ___EmotionJSX(EuiIcon, {
-      type: "arrowDown",
-      size: "s"
-    }));
-
-    return ___EmotionJSX("li", {
-      className: "euiBreadcrumb euiBreadcrumb--collapsed"
-    }, ___EmotionJSX(EuiPopover, {
-      button: ellipsisButton,
-      isOpen: isPopoverOpen,
-      closePopover: function closePopover() {
-        return setIsPopoverOpen(false);
-      }
-    }, ___EmotionJSX(EuiBreadcrumbs, {
-      className: "euiBreadcrumbs__inPopover",
-      breadcrumbs: overflowBreadcrumbs,
-      responsive: false,
-      truncate: false,
-      max: 0
-    })));
-  };
-
-  if (max < breadcrumbs.length) {
-    breadcrumbsAtStart.push(___EmotionJSX(EuiBreadcrumbCollapsed, {
-      key: "collapsed"
-    }));
-  }
-
-  return [].concat(breadcrumbsAtStart, breadcrumbsAtEnd);
-};
-
 export var EuiBreadcrumbs = function EuiBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
       className = _ref.className,
@@ -114,96 +31,106 @@ export var EuiBreadcrumbs = function EuiBreadcrumbs(_ref) {
       truncate = _ref$truncate === void 0 ? true : _ref$truncate,
       _ref$max = _ref.max,
       max = _ref$max === void 0 ? 5 : _ref$max,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'page' : _ref$type,
+      _ref$lastBreadcrumbIs = _ref.lastBreadcrumbIsCurrentPage,
+      lastBreadcrumbIsCurrentPage = _ref$lastBreadcrumbIs === void 0 ? true : _ref$lastBreadcrumbIs,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var ariaLabel = useEuiI18n('euiBreadcrumbs.nav.ariaLabel', 'Breadcrumbs');
-
-  var _useState3 = useState(getBreakpoint(typeof window === 'undefined' ? -Infinity : window.innerWidth)),
-      _useState4 = _slicedToArray(_useState3, 2),
-      currentBreakpoint = _useState4[0],
-      setCurrentBreakpoint = _useState4[1];
-
-  var functionToCallOnWindowResize = throttle(function () {
-    var newBreakpoint = getBreakpoint(window.innerWidth);
-
-    if (newBreakpoint !== currentBreakpoint) {
-      setCurrentBreakpoint(newBreakpoint);
-    } // reacts every 50ms to resize changes and always gets the final update
-
-  }, 50); // Add window resize handlers
-
-  useEffect(function () {
-    window.addEventListener('resize', functionToCallOnWindowResize);
-    return function () {
-      window.removeEventListener('resize', functionToCallOnWindowResize);
-    };
-  }, [responsive, functionToCallOnWindowResize]);
-  var breadcrumbElements = breadcrumbs.map(function (breadcrumb, index) {
-    var text = breadcrumb.text,
-        href = breadcrumb.href,
-        onClick = breadcrumb.onClick,
-        truncate = breadcrumb.truncate,
-        breadcrumbClassName = breadcrumb.className,
-        breadcrumbRest = _objectWithoutProperties(breadcrumb, _excluded2);
-
-    var isLastBreadcrumb = index === breadcrumbs.length - 1;
-    var className = classNames('euiBreadcrumb', {
-      'euiBreadcrumb--last': isLastBreadcrumb,
-      'euiBreadcrumb--truncate': truncate
+  var euiTheme = useEuiTheme();
+  var breadcrumbsListStyles = euiBreadcrumbsListStyles(euiTheme);
+  var cssBreadcrumbsListStyles = [breadcrumbsListStyles.euiBreadcrumbs__list, truncate && breadcrumbsListStyles.isTruncated];
+  var responsiveMax = useResponsiveMax(responsive, max);
+  var visibleBreadcrumbs = useMemo(function () {
+    var shouldCollapseBreadcrumbs = responsiveMax && breadcrumbs.length > responsiveMax;
+    return shouldCollapseBreadcrumbs ? limitBreadcrumbs(breadcrumbs, responsiveMax) : breadcrumbs;
+  }, [breadcrumbs, responsiveMax]);
+  var breadcrumbChildren = useMemo(function () {
+    return visibleBreadcrumbs.map(function (breadcrumb, index) {
+      var isFirstBreadcrumb = index === 0;
+      var isLastBreadcrumb = index === visibleBreadcrumbs.length - 1;
+      var isOnlyBreadcrumb = visibleBreadcrumbs.length === 1;
+      var sharedProps = {
+        type: type,
+        truncate: truncate
+      };
+      return breadcrumb.isCollapsedButton ? ___EmotionJSX(EuiBreadcrumbCollapsed, _extends({
+        key: "collapsed"
+      }, sharedProps, {
+        isFirstBreadcrumb: isFirstBreadcrumb
+      }), ___EmotionJSX(EuiBreadcrumbs, {
+        breadcrumbs: breadcrumb.overflowBreadcrumbs,
+        lastBreadcrumbIsCurrentPage: false,
+        responsive: false,
+        truncate: false,
+        max: 0
+      })) : ___EmotionJSX(EuiBreadcrumb, _extends({
+        key: index
+      }, sharedProps), ___EmotionJSX(EuiBreadcrumbContent, _extends({
+        isFirstBreadcrumb: isFirstBreadcrumb,
+        isLastBreadcrumb: isLastBreadcrumb,
+        isOnlyBreadcrumb: isOnlyBreadcrumb,
+        highlightLastBreadcrumb: isLastBreadcrumb && lastBreadcrumbIsCurrentPage
+      }, sharedProps, breadcrumb)));
     });
-    var linkProps = {
-      className: classNames(CONTENT_CLASSNAME, breadcrumbClassName),
-      'aria-current': isLastBreadcrumb ? 'page' : undefined
-    };
+  }, [visibleBreadcrumbs, truncate, type, lastBreadcrumbIsCurrentPage]);
+  return ___EmotionJSX("nav", _extends({
+    "aria-label": ariaLabel,
+    className: classNames('euiBreadcrumbs', className)
+  }, rest), ___EmotionJSX("ol", {
+    className: "euiBreadcrumbs__list",
+    css: cssBreadcrumbsListStyles
+  }, breadcrumbChildren));
+};
+export var useResponsiveMax = function useResponsiveMax(responsive, max) {
+  // Use the default object if they simply passed `true` for responsive
+  var responsiveObject = _typeof(responsive) === 'object' ? responsive : responsiveDefault; // The max property collapses any breadcrumbs past the max quantity.
+  // This is the same behavior we want for responsiveness.
+  // So calculate the max value based on the combination of `max` and `responsive`
 
-    var link = ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
-      var title = innerText === '' ? undefined : innerText;
+  var responsiveMax = max; // Set the calculated max to the number associated with the currentBreakpoint key if it exists
 
-      if (!href && !onClick) {
-        return ___EmotionJSX("span", _extends({
-          ref: ref,
-          title: title
-        }, linkProps, breadcrumbRest), text);
-      }
+  var currentBreakpoint = useCurrentEuiBreakpoint();
 
-      return ___EmotionJSX(EuiLink, _extends({
-        ref: ref,
-        color: isLastBreadcrumb ? 'text' : 'subdued',
-        onClick: onClick,
-        href: href,
-        title: title
-      }, linkProps, breadcrumbRest), text);
-    });
+  if (responsive && currentBreakpoint && responsiveObject[currentBreakpoint]) {
+    responsiveMax = responsiveObject[currentBreakpoint];
+  } // Final check is to make sure max is used over a larger breakpoint value
 
-    return ___EmotionJSX("li", {
-      className: className,
-      key: index
-    }, link);
-  }); // Use the default object if they simply passed `true` for responsive
 
-  var responsiveObject = _typeof(responsive) === 'object' ? responsive : responsiveDefault; // The max property collapses any breadcrumbs past the max quantity.
-  // This is the same behavior we want for responsiveness.
-  // So calculate the max value based on the combination of `max` and `responsive`
+  if (max && responsiveMax) {
+    responsiveMax = max < responsiveMax ? max : responsiveMax;
+  }
 
-  var calculatedMax = max; // Set the calculated max to the number associated with the currentBreakpoint key if it exists
+  return responsiveMax;
+};
+export var limitBreadcrumbs = function limitBreadcrumbs(breadcrumbs, max) {
+  var breadcrumbsAtStart = [];
+  var breadcrumbsAtEnd = [];
+  var limit = Math.min(max, breadcrumbs.length);
+  var start = Math.floor(limit / 2);
+  var overflowBreadcrumbs = breadcrumbs.slice(start, start + breadcrumbs.length - limit);
 
-  if (responsive && responsiveObject[currentBreakpoint]) {
-    calculatedMax = responsiveObject[currentBreakpoint];
-  } // Final check is to make sure max is used over a larger breakpoint value
+  for (var i = 0; i < limit; i++) {
+    // We'll alternate with displaying breadcrumbs at the end and at the start, but be biased
+    // towards breadcrumbs the end so that if max is an odd number, we'll have one more
+    // breadcrumb visible at the end than at the beginning.
+    var isEven = i % 2 === 0; // We're picking breadcrumbs from the front AND the back, so we treat each iteration as a
+    // half-iteration.
 
+    var normalizedIndex = Math.floor(i * 0.5);
+    var indexOfBreadcrumb = isEven ? breadcrumbs.length - 1 - normalizedIndex : normalizedIndex;
+    var breadcrumb = breadcrumbs[indexOfBreadcrumb];
 
-  if (max && calculatedMax) {
-    calculatedMax = max < calculatedMax ? max : calculatedMax;
+    if (isEven) {
+      breadcrumbsAtEnd.unshift(breadcrumb);
+    } else {
+      breadcrumbsAtStart.push(breadcrumb);
+    }
   }
 
-  var limitedBreadcrumbs = calculatedMax ? limitBreadcrumbs(breadcrumbElements, calculatedMax, breadcrumbs) : breadcrumbElements;
-  var classes = classNames('euiBreadcrumbs', className, {
-    'euiBreadcrumbs--truncate': truncate
-  });
-  return ___EmotionJSX("nav", _extends({
-    "aria-label": ariaLabel,
-    className: classes
-  }, rest), ___EmotionJSX("ol", {
-    className: "euiBreadcrumbs__list"
-  }, limitedBreadcrumbs));
+  return [].concat(breadcrumbsAtStart, [{
+    isCollapsedButton: true,
+    overflowBreadcrumbs: overflowBreadcrumbs
+  }], breadcrumbsAtEnd);
 };

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

@@ -0,0 +1,30 @@
+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 { euiFontSize, logicalCSS } from '../../global_styling';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1bwn7gf-isTruncated",
+  styles: "flex-wrap:nowrap;white-space:nowrap;label:isTruncated;"
+} : {
+  name: "1bwn7gf-isTruncated",
+  styles: "flex-wrap:nowrap;white-space:nowrap;label:isTruncated;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiBreadcrumbsListStyles = function euiBreadcrumbsListStyles(euiThemeContext) {
+  // Styles cast to the <ol> element
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiBreadcrumbs__list: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";align-items:center;display:flex;flex-wrap:wrap;line-height:", euiTheme.size.l, ";", logicalCSS( // Add vertical space between breadcrumbs, but make sure the whole breadcrumb set doesn't add space below itself
+    'margin-bottom', "-".concat(euiTheme.size.xs)), " ", logicalCSS('min-width', 0), ";;label:euiBreadcrumbs__list;"),
+    isTruncated: _ref
+  };
+};