@box/blueprint-web 14.26.1 → 14.30.0

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import noop from 'lodash/noop';
 import { forwardRef, useRef } from 'react';
 import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
+import { Taxonomy } from '@box/blueprint-web-assets/icons/Medium';
 import { Home } from '@box/blueprint-web-assets/icons/MediumFilled';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { EllipsisTruncationView } from './ellipsis-truncation-view.js';
@@ -14,6 +15,26 @@ import { getContainerHeight, getRootIconSize } from './utils.js';
 import styles from './breadcrumb.module.js';
 
 const ELLIPSIS_TRUNCATION_THRESHOLD = 7;
+const renderRootIcon = (variant, size) => {
+  switch (variant) {
+    case 'home':
+      return jsx(Home, {
+        height: size,
+        width: size
+      });
+    case 'taxonomy':
+      return jsx(Taxonomy, {
+        height: size,
+        width: size
+      });
+    case 'folder-tree':
+    default:
+      return jsx(FolderTree, {
+        height: size,
+        width: size
+      });
+  }
+};
 const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     breadcrumbAriaLabel,
@@ -38,6 +59,10 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     visibleCrumbCount
   } = useFolderTreeTruncation(breadcrumbListRef, crumbs, isMobile);
   const hasTruncation = isMobile || truncationMethod === 'ellipsis' && crumbs.length > ELLIPSIS_TRUNCATION_THRESHOLD || truncationMethod === 'folder-tree' && isTruncationRequired;
+  // For the `taxonomy` variant the dropdown trigger IS the root icon, so suppress the
+  // decorative one to avoid two Taxonomy icons in a row. `home`/`folder-tree` keep both.
+  const isFolderTreeTruncationActive = !isMobile && truncationMethod === 'folder-tree' && isTruncationRequired;
+  const shouldHideRootIconForTaxonomyTrigger = rootIconVariant === 'taxonomy' && isFolderTreeTruncationActive;
   const rootIconSize = getRootIconSize(size, hasTruncation);
   const containerHeight = getContainerHeight(size, hasTruncation);
   if (!crumbs || crumbs.length === 0) {
@@ -68,6 +93,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       iconButtonRef: iconButtonRef,
       isInteractive: isInteractive,
       onPageLinkClick: onPageLinkClick,
+      rootIconVariant: rootIconVariant,
       size: size,
       truncatedLinksIconAriaLabel: truncatedLinksIconAriaLabel,
       visibleCrumbCount: visibleCrumbCount
@@ -92,16 +118,10 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children: jsxs("ol", {
       ref: breadcrumbListRef,
       className: styles.breadcrumb,
-      children: [!isMobile && rootIconVariant && jsxs("li", {
+      children: [!isMobile && rootIconVariant && !shouldHideRootIconForTaxonomyTrigger && jsxs("li", {
         "aria-hidden": "true",
         className: styles.pageLink,
-        children: [rootIconVariant === 'home' ? jsx(Home, {
-          height: rootIconSize,
-          width: rootIconSize
-        }) : jsx(FolderTree, {
-          height: rootIconSize,
-          width: rootIconSize
-        }), jsx(BreadcrumbItemSeparator, {
+        children: [renderRootIcon(rootIconVariant, rootIconSize), jsx(BreadcrumbItemSeparator, {
           isInteractive: isInteractive,
           size: size
         })]

package/dist/lib-esm/breadcrumb/folder-tree-truncation-view.d.ts

@@ -1,2 +1,2 @@
 import { type FolderTreeTruncationViewProps } from './types';
-export declare const FolderTreeTruncationView: ({ crumbs, ellipsizeLastCrumb, iconButtonRef, isInteractive, onPageLinkClick, size, truncatedLinksIconAriaLabel, visibleCrumbCount, }: FolderTreeTruncationViewProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FolderTreeTruncationView: ({ crumbs, ellipsizeLastCrumb, iconButtonRef, isInteractive, onPageLinkClick, rootIconVariant, size, truncatedLinksIconAriaLabel, visibleCrumbCount, }: FolderTreeTruncationViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/breadcrumb/folder-tree-truncation-view.js

@@ -1,28 +1,37 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
+import { Taxonomy } from '@box/blueprint-web-assets/icons/Medium';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { BreadcrumbDropdown } from './breadcrumb-dropdown.js';
 import { PageLink } from './page-link.js';
 import { getIconButtonSize } from './utils.js';
 
+const getDropdownTriggerIcon = rootIconVariant => {
+  if (rootIconVariant === 'taxonomy') {
+    return Taxonomy;
+  }
+  return FolderTree;
+};
 const FolderTreeTruncationView = ({
   crumbs,
   ellipsizeLastCrumb,
   iconButtonRef,
   isInteractive,
   onPageLinkClick,
+  rootIconVariant,
   size,
   truncatedLinksIconAriaLabel,
   visibleCrumbCount
 }) => {
   const visibleCrumbs = crumbs.slice(-visibleCrumbCount);
   const hiddenCrumbs = crumbs.slice(0, -visibleCrumbCount);
+  const TriggerIcon = getDropdownTriggerIcon(rootIconVariant);
   return jsxs(Fragment, {
     children: [jsx(BreadcrumbDropdown, {
       crumbsToRender: hiddenCrumbs,
       iconButton: jsx(IconButton, {
         "aria-label": truncatedLinksIconAriaLabel,
-        icon: FolderTree,
+        icon: TriggerIcon,
         size: getIconButtonSize(size)
       }),
       isInteractive: isInteractive,

package/dist/lib-esm/breadcrumb/types.d.ts

@@ -44,7 +44,7 @@ type RootIconProps = {
      */
     rootIconAriaLabel?: string;
     /** Determines which icon is displayed at the root. */
-    rootIconVariant: 'home' | 'folder-tree';
+    rootIconVariant: 'home' | 'folder-tree' | 'taxonomy';
 };
 export interface BreadcrumbViewProps {
     crumbs: Crumb[];
@@ -56,6 +56,7 @@ export interface BreadcrumbViewProps {
 }
 export interface FolderTreeTruncationViewProps extends BreadcrumbViewProps {
     iconButtonRef: React.RefObject<HTMLLIElement>;
+    rootIconVariant?: BreadcrumbProps['rootIconVariant'];
     visibleCrumbCount: number;
 }
 /**