@box/blueprint-web 12.96.0 → 12.98.0

package/dist/lib-esm/breadcrumb/breadcrumb.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 import { FolderTree, PointerRight } from '@box/blueprint-web-assets/icons/Fill';
 import { Ellipsis } from '@box/blueprint-web-assets/icons/Medium';
 import { Home } from '@box/blueprint-web-assets/icons/MediumFilled';
 import noop from 'lodash/noop';
+import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { Text } from '../text/text.js';
 import { PageLink } from './page-link.js';
 import styles from './breadcrumb.module.js';
 
@@ -20,6 +22,9 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onPageLinkClick = noop,
     ...rest
   } = props;
+  const handlePageLinkClick = useCallback(crumbId => () => {
+    onPageLinkClick(crumbId);
+  }, [onPageLinkClick]);
   // If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
   const shouldTruncateCrumbs = crumbs?.length > 7;
   const shouldUseEllipsisTruncation = truncationMethod === 'ellipsis' && shouldTruncateCrumbs && crumbs;
@@ -49,11 +54,26 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             onPageLinkClick: onPageLinkClick
           }), jsxs("li", {
             className: styles.pageLink,
-            children: [jsx(IconButton, {
-              "aria-label": truncatedLinksIconAriaLabel,
-              className: styles.iconButtonInline,
-              icon: Ellipsis,
-              size: "small"
+            children: [jsxs(DropdownMenu.Root, {
+              children: [jsx(DropdownMenu.Trigger, {
+                children: jsx(IconButton, {
+                  "aria-label": truncatedLinksIconAriaLabel,
+                  className: styles.iconButtonInline,
+                  icon: Ellipsis,
+                  size: "small"
+                })
+              }), jsx(DropdownMenu.Content, {
+                align: "start",
+                children: crumbs.slice(1, crumbs.length - 2).map(crumb => {
+                  return jsx(DropdownMenu.Item, {
+                    onSelect: handlePageLinkClick(crumb.id),
+                    children: jsx(Text, {
+                      as: "span",
+                      children: crumb.name
+                    })
+                  }, crumb.id);
+                })
+              })]
             }), jsx(PointerRight, {
               className: styles.separator,
               role: "presentation"