@elastic/eui 86.0.0 → 87.0.0

package/es/components/breadcrumbs/breadcrumb.js

@@ -1,5 +1,5 @@
 var _excluded = ["children", "className", "type", "truncate"],
-  _excluded2 = ["text", "truncate", "type", "href", "rel", "onClick", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb"];
+  _excluded2 = ["text", "truncate", "type", "href", "rel", "onClick", "popoverContent", "popoverProps", "className", "color", "isFirstBreadcrumb", "isLastBreadcrumb", "isOnlyBreadcrumb", "highlightLastBreadcrumb", "truncateLastBreadcrumb"];
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -62,6 +62,8 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
     href = _ref2.href,
     rel = _ref2.rel,
     onClick = _ref2.onClick,
+    popoverContent = _ref2.popoverContent,
+    popoverProps = _ref2.popoverProps,
     className = _ref2.className,
     color = _ref2.color,
     isFirstBreadcrumb = _ref2.isFirstBreadcrumb,
@@ -83,29 +85,59 @@ export var EuiBreadcrumbContent = function EuiBreadcrumbContent(_ref2) {
       cssStyles.push(styles.applicationStyles.lastChild);
     }
   }
+  var isInteractiveBreadcrumb = href || onClick;
+  var linkColor = color || (highlightLastBreadcrumb ? 'text' : 'subdued');
+  var plainTextColor = highlightLastBreadcrumb ? 'default' : 'subdued'; // Does not inherit `color` prop
   var ariaCurrent = highlightLastBreadcrumb ? 'page' : undefined;
+  var isPopoverBreadcrumb = !!popoverContent;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPopoverOpen = _useState2[0],
+    setIsPopoverOpen = _useState2[1];
+  var popoverAriaLabel = useEuiI18n('euiBreadcrumb.popoverAriaLabel', 'Clicking this button will toggle a popover dialog.');
   return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
     var title = innerText === '' ? undefined : innerText;
-    return !href && !onClick ? ___EmotionJSX(EuiTextColor, {
-      color: highlightLastBreadcrumb ? 'default' : 'subdued',
-      cloneElement: true
-    }, ___EmotionJSX("span", _extends({
+    var sharedProps = {
       ref: ref,
       title: title,
-      "aria-current": ariaCurrent,
+      'aria-current': ariaCurrent,
       className: classes,
       css: cssStyles
-    }, rest), text)) : ___EmotionJSX(EuiLink, _extends({
-      ref: ref,
-      title: title,
-      "aria-current": ariaCurrent,
-      className: classes,
-      css: cssStyles,
-      color: color || (highlightLastBreadcrumb ? 'text' : 'subdued'),
-      onClick: onClick,
-      href: href,
-      rel: rel
-    }, rest), text);
+    };
+    if (isPopoverBreadcrumb) {
+      return ___EmotionJSX(EuiPopover, _extends({}, popoverProps, {
+        isOpen: isPopoverOpen,
+        closePopover: function closePopover() {
+          return setIsPopoverOpen(false);
+        },
+        button: ___EmotionJSX(EuiLink, _extends({}, sharedProps, {
+          color: linkColor
+          // Avoid passing href and onClick - should only toggle the popover
+          ,
+          onClick: function onClick() {
+            return setIsPopoverOpen(function (isOpen) {
+              return !isOpen;
+            });
+          }
+        }, rest), text, ' ', ___EmotionJSX(EuiIcon, {
+          type: "arrowDown",
+          size: "s",
+          "aria-label": " - ".concat(popoverAriaLabel)
+        }))
+      }), popoverContent);
+    } else if (isInteractiveBreadcrumb) {
+      return ___EmotionJSX(EuiLink, _extends({}, sharedProps, {
+        color: linkColor,
+        onClick: onClick,
+        href: href,
+        rel: rel
+      }, rest), text);
+    } else {
+      return ___EmotionJSX(EuiTextColor, {
+        color: plainTextColor,
+        cloneElement: true
+      }, ___EmotionJSX("span", _extends({}, sharedProps, rest), text));
+    }
   });
 };
 EuiBreadcrumbContent.propTypes = {
@@ -125,13 +157,174 @@ EuiBreadcrumbContent.propTypes = {
        */
   truncate: PropTypes.bool,
   /**
-       * Accepts any EuiLink `color` when rendered as one (has `href` or `onClick`)
+       * Accepts any EuiLink `color` when rendered as one (has `href`, `onClick`, or `popoverContent`)
        */
   color: PropTypes.any,
   /**
        * Override the existing `aria-current` which defaults to `page` for the last breadcrumb
        */
   "aria-current": PropTypes.any,
+  /**
+       * Creates a breadcrumb that toggles a popover dialog
+       *
+       * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
+       * click behavior should only trigger a popover.
+       */
+  popoverContent: PropTypes.node,
+  /**
+       * Allows customizing the popover if necessary. Accepts any props that
+       * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
+       */
+  popoverProps: PropTypes.shape({
+    /**
+       * Class name passed to the direct parent of the button
+       */
+    anchorClassName: PropTypes.string,
+    /**
+       * Alignment of the popover and arrow relative to the button
+       */
+    anchorPosition: PropTypes.any,
+    /**
+       * Style and position alteration for arrow-less, left-aligned
+       * attachment. Intended for use with inputs as anchors, e.g.
+       * EuiInputPopover
+       */
+    attachToAnchor: PropTypes.bool,
+    buttonRef: PropTypes.any,
+    /**
+       * Restrict the popover's position within this element
+       */
+    container: PropTypes.any,
+    /**
+       * CSS display type for both the popover and anchor
+       */
+    display: PropTypes.any,
+    /**
+       * Object of props passed to EuiFocusTrap
+       */
+    focusTrapProps: PropTypes.any,
+    /**
+       * Show arrow indicating to originating button
+       */
+    hasArrow: PropTypes.bool,
+    /**
+       * Specifies what element should initially have focus; Can be a DOM
+       * node, or a selector string (which will be passed to
+       * document.querySelector() to find the DOM node), or a function that
+       * returns a DOM node.
+       *
+       * If not passed, initial focus defaults to the popover panel.
+       */
+    initialFocus: PropTypes.any,
+    /**
+       * Passed directly to EuiPortal for DOM positioning. Both properties are
+       * required if prop is specified
+       */
+    insert: PropTypes.shape({
+      sibling: PropTypes.any.isRequired,
+      position: PropTypes.oneOf(["before", "after"]).isRequired
+    }),
+    /**
+       * Traps tab focus within the popover contents
+       */
+    ownFocus: PropTypes.bool,
+    /**
+       * Custom class added to the EuiPanel containing the popover contents
+       */
+    panelClassName: PropTypes.string,
+    /**
+       * EuiPanel padding on all sides
+       */
+    panelPaddingSize: PropTypes.any,
+    /**
+       * Standard DOM `style` attribute. Passed to the EuiPanel
+       */
+    panelStyle: PropTypes.any,
+    /**
+       * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
+       */
+    panelProps: PropTypes.shape({
+      element: PropTypes.oneOf(["div"]),
+      /**
+         * Padding for all four sides
+         */
+      paddingSize: PropTypes.any,
+      /**
+         * Corner border radius
+         */
+      borderRadius: PropTypes.any,
+      /**
+         * When true the panel will grow in height to match `EuiFlexItem`
+         */
+      grow: PropTypes.bool,
+      panelRef: PropTypes.any,
+      /**
+         * Background color of the panel;
+         * Usually a lightened form of the brand colors
+         */
+      color: PropTypes.any,
+      className: PropTypes.string,
+      "aria-label": PropTypes.string,
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
+    }),
+    panelRef: PropTypes.any,
+    /**
+       * Optional screen reader instructions to announce upon popover open,
+       * in addition to EUI's default popover instructions for Escape on close.
+       * Useful for popovers that may have additional keyboard capabilities such as
+       * arrow navigation.
+       */
+    popoverScreenReaderText: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.node.isRequired]),
+    popoverRef: PropTypes.any,
+    /**
+       * When `true`, the popover's position is re-calculated when the user
+       * scrolls, this supports having fixed-position popover anchors. When nesting
+       * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
+       */
+    repositionOnScroll: PropTypes.bool,
+    /**
+       * Must be set to true if using `EuiDragDropContext` within a popover,
+       * otherwise your nested drag & drop will have incorrect positioning
+       */
+    hasDragDrop: PropTypes.bool,
+    /**
+       * By default, popover content inherits the z-index of the anchor
+       * component; pass `zIndex` to override
+       */
+    zIndex: PropTypes.number,
+    /**
+       * Distance away from the anchor that the popover will render
+       */
+    offset: PropTypes.number,
+    /**
+       * Minimum distance between the popover and the bounding container;
+       * Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]`
+       * Default is 16
+       */
+    buffer: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.any.isRequired]),
+    /**
+       * Element to pass as the child element of the arrow;
+       * Use case is typically limited to an accompanying `EuiBeacon`
+       */
+    arrowChildren: PropTypes.node,
+    /**
+       * Provide a name to the popover panel
+       */
+    "aria-label": PropTypes.string,
+    /**
+       * Alternative option to `aria-label` that takes an `id`.
+       * Usually takes the `id` of the popover title
+       */
+    "aria-labelledby": PropTypes.string,
+    /**
+       * Function callback for when the popover positon changes
+       */
+    onPositionChange: PropTypes.func,
+    className: PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
   type: PropTypes.oneOf(["page", "application"]).isRequired,
   isFirstBreadcrumb: PropTypes.bool,
   isLastBreadcrumb: PropTypes.bool,
@@ -143,38 +336,23 @@ export var EuiBreadcrumbCollapsed = function EuiBreadcrumbCollapsed(_ref3) {
   var children = _ref3.children,
     isFirstBreadcrumb = _ref3.isFirstBreadcrumb,
     type = _ref3.type;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isPopoverOpen = _useState2[0],
-    setIsPopoverOpen = _useState2[1];
   var euiTheme = useEuiTheme();
   var styles = euiBreadcrumbStyles(euiTheme);
   var cssStyles = [styles.isCollapsed];
   var ariaLabel = useEuiI18n('euiBreadcrumb.collapsedBadge.ariaLabel', 'See collapsed breadcrumbs');
-  var ellipsisButton = ___EmotionJSX(EuiBreadcrumbContent, {
-    "aria-label": ariaLabel,
+  return ___EmotionJSX(EuiBreadcrumb, {
+    css: cssStyles,
+    type: type
+  }, ___EmotionJSX(EuiBreadcrumbContent, {
+    popoverContent: children,
+    text: ___EmotionJSX("span", {
+      "aria-label": ariaLabel
+    }, "\u2026"),
     title: ariaLabel,
-    onClick: function onClick() {
-      return setIsPopoverOpen(!isPopoverOpen);
-    },
     truncate: false,
-    text: ___EmotionJSX(React.Fragment, null, "\u2026 ", ___EmotionJSX(EuiIcon, {
-      type: "arrowDown",
-      size: "s"
-    })),
     isFirstBreadcrumb: isFirstBreadcrumb,
     type: type
-  });
-  return ___EmotionJSX(EuiBreadcrumb, {
-    css: cssStyles,
-    type: type
-  }, ___EmotionJSX(EuiPopover, {
-    button: ellipsisButton,
-    isOpen: isPopoverOpen,
-    closePopover: function closePopover() {
-      return setIsPopoverOpen(false);
-    }
-  }, children));
+  }));
 };
 EuiBreadcrumbCollapsed.propTypes = {
   type: PropTypes.oneOf(["page", "application"]).isRequired,

package/es/components/breadcrumbs/breadcrumbs.js

@@ -132,13 +132,174 @@ EuiBreadcrumbs.propTypes = {
          */
     truncate: PropTypes.bool,
     /**
-         * Accepts any EuiLink `color` when rendered as one (has `href` or `onClick`)
+         * Accepts any EuiLink `color` when rendered as one (has `href`, `onClick`, or `popoverContent`)
          */
     color: PropTypes.any,
     /**
          * Override the existing `aria-current` which defaults to `page` for the last breadcrumb
          */
-    "aria-current": PropTypes.any
+    "aria-current": PropTypes.any,
+    /**
+         * Creates a breadcrumb that toggles a popover dialog
+         *
+         * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
+         * click behavior should only trigger a popover.
+         */
+    popoverContent: PropTypes.node,
+    /**
+         * Allows customizing the popover if necessary. Accepts any props that
+         * [EuiPopover](/#/layout/popover) accepts, except for props that control state.
+         */
+    popoverProps: PropTypes.shape({
+      /**
+         * Class name passed to the direct parent of the button
+         */
+      anchorClassName: PropTypes.string,
+      /**
+         * Alignment of the popover and arrow relative to the button
+         */
+      anchorPosition: PropTypes.any,
+      /**
+         * Style and position alteration for arrow-less, left-aligned
+         * attachment. Intended for use with inputs as anchors, e.g.
+         * EuiInputPopover
+         */
+      attachToAnchor: PropTypes.bool,
+      buttonRef: PropTypes.any,
+      /**
+         * Restrict the popover's position within this element
+         */
+      container: PropTypes.any,
+      /**
+         * CSS display type for both the popover and anchor
+         */
+      display: PropTypes.any,
+      /**
+         * Object of props passed to EuiFocusTrap
+         */
+      focusTrapProps: PropTypes.any,
+      /**
+         * Show arrow indicating to originating button
+         */
+      hasArrow: PropTypes.bool,
+      /**
+         * Specifies what element should initially have focus; Can be a DOM
+         * node, or a selector string (which will be passed to
+         * document.querySelector() to find the DOM node), or a function that
+         * returns a DOM node.
+         *
+         * If not passed, initial focus defaults to the popover panel.
+         */
+      initialFocus: PropTypes.any,
+      /**
+         * Passed directly to EuiPortal for DOM positioning. Both properties are
+         * required if prop is specified
+         */
+      insert: PropTypes.shape({
+        sibling: PropTypes.any.isRequired,
+        position: PropTypes.oneOf(["before", "after"]).isRequired
+      }),
+      /**
+         * Traps tab focus within the popover contents
+         */
+      ownFocus: PropTypes.bool,
+      /**
+         * Custom class added to the EuiPanel containing the popover contents
+         */
+      panelClassName: PropTypes.string,
+      /**
+         * EuiPanel padding on all sides
+         */
+      panelPaddingSize: PropTypes.any,
+      /**
+         * Standard DOM `style` attribute. Passed to the EuiPanel
+         */
+      panelStyle: PropTypes.any,
+      /**
+         * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
+         */
+      panelProps: PropTypes.shape({
+        element: PropTypes.oneOf(["div"]),
+        /**
+           * Padding for all four sides
+           */
+        paddingSize: PropTypes.any,
+        /**
+           * Corner border radius
+           */
+        borderRadius: PropTypes.any,
+        /**
+           * When true the panel will grow in height to match `EuiFlexItem`
+           */
+        grow: PropTypes.bool,
+        panelRef: PropTypes.any,
+        /**
+           * Background color of the panel;
+           * Usually a lightened form of the brand colors
+           */
+        color: PropTypes.any,
+        className: PropTypes.string,
+        "aria-label": PropTypes.string,
+        "data-test-subj": PropTypes.string,
+        css: PropTypes.any
+      }),
+      panelRef: PropTypes.any,
+      /**
+         * Optional screen reader instructions to announce upon popover open,
+         * in addition to EUI's default popover instructions for Escape on close.
+         * Useful for popovers that may have additional keyboard capabilities such as
+         * arrow navigation.
+         */
+      popoverScreenReaderText: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.node.isRequired]),
+      popoverRef: PropTypes.any,
+      /**
+         * When `true`, the popover's position is re-calculated when the user
+         * scrolls, this supports having fixed-position popover anchors. When nesting
+         * an `EuiPopover` in a scrollable container, `repositionOnScroll` should be `true`
+         */
+      repositionOnScroll: PropTypes.bool,
+      /**
+         * Must be set to true if using `EuiDragDropContext` within a popover,
+         * otherwise your nested drag & drop will have incorrect positioning
+         */
+      hasDragDrop: PropTypes.bool,
+      /**
+         * By default, popover content inherits the z-index of the anchor
+         * component; pass `zIndex` to override
+         */
+      zIndex: PropTypes.number,
+      /**
+         * Distance away from the anchor that the popover will render
+         */
+      offset: PropTypes.number,
+      /**
+         * Minimum distance between the popover and the bounding container;
+         * Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]`
+         * Default is 16
+         */
+      buffer: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.any.isRequired]),
+      /**
+         * Element to pass as the child element of the arrow;
+         * Use case is typically limited to an accompanying `EuiBeacon`
+         */
+      arrowChildren: PropTypes.node,
+      /**
+         * Provide a name to the popover panel
+         */
+      "aria-label": PropTypes.string,
+      /**
+         * Alternative option to `aria-label` that takes an `id`.
+         * Usually takes the `id` of the popover title
+         */
+      "aria-labelledby": PropTypes.string,
+      /**
+         * Function callback for when the popover positon changes
+         */
+      onPositionChange: PropTypes.func,
+      className: PropTypes.string,
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
+    })
   }).isRequired).isRequired,
   /**
      * Determines breadcrumbs appearance, with `page` being the default styling.