@box/blueprint-web 12.135.1 → 12.136.0

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

@@ -6,5 +6,5 @@ interface BreadcrumbDropdownProps {
     onPageLinkClick: (id: string) => void;
     size: 'xsmall' | 'small' | 'medium' | 'large';
 }
-export declare function BreadcrumbDropdown({ crumbsToRender, iconButton, onPageLinkClick, size, listRef, }: BreadcrumbDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbDropdown({ crumbsToRender, iconButton, listRef, onPageLinkClick, size, }: BreadcrumbDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,17 +1,17 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { PointerRight } from '@box/blueprint-web-assets/icons/Fill';
+import { EllipsizableText } from '../ellipsizable-text/ellipsizable-text.js';
 import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
-import { Text } from '../text/text.js';
 import { getSeparatorSize } from './utils.js';
 import styles from './breadcrumb.module.js';
 
 function BreadcrumbDropdown({
   crumbsToRender,
   iconButton,
+  listRef,
   onPageLinkClick,
-  size,
-  listRef
+  size
 }) {
   const handlePageLinkClick = useCallback(crumbId => () => {
     onPageLinkClick(crumbId);
@@ -27,8 +27,10 @@ function BreadcrumbDropdown({
         className: styles.dropdownContent,
         children: crumbsToRender.map(crumb => jsx(DropdownMenu.Item, {
           onSelect: handlePageLinkClick(crumb.id),
-          children: jsx(Text, {
+          children: jsx(EllipsizableText, {
             as: "span",
+            lineClamp: 1,
+            tooltipSide: "bottom",
             children: crumb.name
           })
         }, crumb.id))

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

@@ -1,50 +1,82 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import noop from 'lodash/noop';
 import { forwardRef, useRef } 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 { IconButton } from '../primitives/icon-button/icon-button.js';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
-import { BreadcrumbDropdown } from './breadcrumb-dropdown.js';
-import { PageLink } from './page-link.js';
+import { EllipsisTruncationView } from './ellipsis-truncation-view.js';
+import { FolderTreeTruncationView } from './folder-tree-truncation-view.js';
+import { FullView } from './full-view.js';
+import { MobileView } from './mobile-view.js';
 import { useFolderTreeTruncation } from './useFolderTreeTruncation.js';
 import { getSeparatorSize } from './utils.js';
 import styles from './breadcrumb.module.js';
 
+const ELLIPSIS_TRUNCATION_THRESHOLD = 7;
 const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     breadcrumbAriaLabel,
     crumbs,
-    truncatedLinksIconAriaLabel,
-    rootIconAriaLabel,
-    rootIconVariant,
     isInteractive = true,
     isResponsiveEnabled,
+    onPageLinkClick = noop,
+    rootIconAriaLabel,
+    rootIconVariant,
     size = 'medium',
+    truncatedLinksIconAriaLabel,
     truncationMethod = 'ellipsis',
-    onPageLinkClick = noop,
     ...rest
   } = props;
-  // Responsive detection: mobile/tablet takes priority over consumer-controlled truncationMethod
   const breakpoint = useBreakpoint();
   const isMobile = isResponsiveEnabled || breakpoint <= Breakpoint.Medium;
-  // If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
-  const shouldUseEllipsisTruncation = !isMobile && truncationMethod === 'ellipsis' && crumbs && crumbs.length > 7;
-  // Get the current page (last crumb) and all ancestors (all crumbs except last)
-  const currentPage = crumbs[crumbs.length - 1];
-  const ancestorCrumbs = crumbs.slice(0, -1);
-  // Folder-tree truncation: detect overflow and show up to 3 visible crumbs
   const breadcrumbListRef = useRef(null);
-  const isFolderTreeTruncationEnabled = !isMobile && truncationMethod === 'folder-tree';
   const {
+    ellipsizeLastCrumb,
+    iconButtonRef,
     isTruncationRequired,
-    visibleCrumbCount,
-    iconButtonRef
-  } = useFolderTreeTruncation(breadcrumbListRef, crumbs, isFolderTreeTruncationEnabled);
-  const shouldUseFolderTreeTruncation = isFolderTreeTruncationEnabled && isTruncationRequired && crumbs;
-  const visibleCrumbs = shouldUseFolderTreeTruncation ? crumbs.slice(-visibleCrumbCount) : [];
-  const hiddenCrumbs = shouldUseFolderTreeTruncation ? crumbs.slice(0, -visibleCrumbCount) : [];
+    visibleCrumbCount
+  } = useFolderTreeTruncation(breadcrumbListRef, crumbs, isMobile);
+  if (!crumbs || crumbs.length === 0) {
+    return null;
+  }
+  // Responsive detection: mobile/tablet takes priority over consumer-controlled truncationMethod
+  let breadcrumbList;
+  if (isMobile) {
+    breadcrumbList = jsx(MobileView, {
+      crumbs: crumbs,
+      isInteractive: isInteractive,
+      onPageLinkClick: onPageLinkClick,
+      size: size,
+      truncatedLinksIconAriaLabel: truncatedLinksIconAriaLabel
+    });
+  } else if (truncationMethod === 'ellipsis' && crumbs.length > ELLIPSIS_TRUNCATION_THRESHOLD) {
+    breadcrumbList = jsx(EllipsisTruncationView, {
+      crumbs: crumbs,
+      isInteractive: isInteractive,
+      onPageLinkClick: onPageLinkClick,
+      size: size,
+      truncatedLinksIconAriaLabel: truncatedLinksIconAriaLabel
+    });
+  } else if (truncationMethod === 'folder-tree' && isTruncationRequired) {
+    breadcrumbList = jsx(FolderTreeTruncationView, {
+      crumbs: crumbs,
+      ellipsizeLastCrumb: ellipsizeLastCrumb,
+      iconButtonRef: iconButtonRef,
+      isInteractive: isInteractive,
+      onPageLinkClick: onPageLinkClick,
+      size: size,
+      truncatedLinksIconAriaLabel: truncatedLinksIconAriaLabel,
+      visibleCrumbCount: visibleCrumbCount
+    });
+  } else {
+    breadcrumbList = jsx(FullView, {
+      crumbs: crumbs,
+      ellipsizeLastCrumb: ellipsizeLastCrumb,
+      isInteractive: isInteractive,
+      onPageLinkClick: onPageLinkClick,
+      size: size
+    });
+  }
   return jsx("nav", {
     ref: forwardedRef,
     "aria-label": breadcrumbAriaLabel,
@@ -59,84 +91,12 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
           "aria-label": rootIconAriaLabel
         }) : jsx(FolderTree, {
           "aria-label": rootIconAriaLabel
-        }), rootIconVariant && jsx(PointerRight, {
+        }), jsx(PointerRight, {
           height: getSeparatorSize(size),
           role: "presentation",
           width: getSeparatorSize(size)
         })]
-      }), isMobile && crumbs && currentPage && jsxs(Fragment, {
-        children: [ancestorCrumbs.length > 0 && jsx(BreadcrumbDropdown, {
-          crumbsToRender: ancestorCrumbs,
-          iconButton: jsx(IconButton, {
-            "aria-label": truncatedLinksIconAriaLabel,
-            icon: FolderTree,
-            size: "small"
-          }),
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        }), jsx(PageLink, {
-          crumb: currentPage,
-          isInteractive: isInteractive,
-          isLast: true,
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        })]
-      }), shouldUseEllipsisTruncation && jsxs(Fragment, {
-        children: [jsx(PageLink, {
-          crumb: crumbs[0],
-          isInteractive: isInteractive,
-          isLast: false,
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        }), jsx(BreadcrumbDropdown, {
-          crumbsToRender: crumbs.slice(1, crumbs.length - 2),
-          iconButton: jsx(IconButton, {
-            "aria-label": truncatedLinksIconAriaLabel,
-            icon: Ellipsis,
-            size: "small"
-          }),
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        }), jsx(PageLink, {
-          crumb: crumbs[crumbs.length - 2],
-          isInteractive: isInteractive,
-          isLast: false,
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        }), jsx(PageLink, {
-          crumb: currentPage,
-          isInteractive: isInteractive,
-          isLast: true,
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        })]
-      }), shouldUseFolderTreeTruncation && jsxs(Fragment, {
-        children: [jsx(BreadcrumbDropdown, {
-          crumbsToRender: hiddenCrumbs,
-          iconButton: jsx(IconButton, {
-            "aria-label": truncatedLinksIconAriaLabel,
-            icon: FolderTree,
-            size: "small"
-          }),
-          listRef: iconButtonRef,
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        }), visibleCrumbs.map((crumb, index) => jsx(PageLink, {
-          crumb: crumb,
-          isInteractive: isInteractive,
-          isLast: index === visibleCrumbs.length - 1,
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        }, crumb.id))]
-      }), !isMobile && !shouldUseEllipsisTruncation && !shouldUseFolderTreeTruncation && crumbs?.map((crumb, index) => {
-        return jsx(PageLink, {
-          crumb: crumb,
-          isInteractive: isInteractive,
-          isLast: index === crumbs.length - 1,
-          onPageLinkClick: onPageLinkClick,
-          size: size
-        }, crumb.id);
-      })]
+      }), breadcrumbList]
     })
   });
 });

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_breadcrumb_module_container--ee92d","breadcrumb":"bp_breadcrumb_module_breadcrumb--ee92d","pageLink":"bp_breadcrumb_module_pageLink--ee92d","linkWithHover":"bp_breadcrumb_module_linkWithHover--ee92d","dropdownContent":"bp_breadcrumb_module_dropdownContent--ee92d"};
+var styles = {"container":"bp_breadcrumb_module_container--67af7","breadcrumb":"bp_breadcrumb_module_breadcrumb--67af7","pageLink":"bp_breadcrumb_module_pageLink--67af7","linkWithHover":"bp_breadcrumb_module_linkWithHover--67af7","dropdownContent":"bp_breadcrumb_module_dropdownContent--67af7"};
 
 export { styles as default };

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

@@ -0,0 +1,2 @@
+import { type BreadcrumbViewProps } from './types';
+export declare const EllipsisTruncationView: ({ crumbs, isInteractive, onPageLinkClick, size, truncatedLinksIconAriaLabel, }: BreadcrumbViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/breadcrumb/ellipsis-truncation-view.js

@@ -0,0 +1,42 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Ellipsis } 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';
+
+const EllipsisTruncationView = ({
+  crumbs,
+  isInteractive,
+  onPageLinkClick,
+  size,
+  truncatedLinksIconAriaLabel
+}) => {
+  const middleCrumbs = crumbs.slice(1, -2);
+  const lastTwoCrumbs = crumbs.slice(-2);
+  return jsxs(Fragment, {
+    children: [jsx(PageLink, {
+      crumb: crumbs[0],
+      isInteractive: isInteractive,
+      isLast: false,
+      onPageLinkClick: onPageLinkClick,
+      size: size
+    }), jsx(BreadcrumbDropdown, {
+      crumbsToRender: middleCrumbs,
+      iconButton: jsx(IconButton, {
+        "aria-label": truncatedLinksIconAriaLabel,
+        icon: Ellipsis,
+        size: "small"
+      }),
+      onPageLinkClick: onPageLinkClick,
+      size: size
+    }), lastTwoCrumbs.map((crumb, index) => jsx(PageLink, {
+      crumb: crumb,
+      isInteractive: isInteractive,
+      isLast: index === lastTwoCrumbs.length - 1,
+      onPageLinkClick: onPageLinkClick,
+      size: size
+    }, crumb.id))]
+  });
+};
+
+export { EllipsisTruncationView };

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

@@ -0,0 +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;

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

@@ -0,0 +1,41 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { BreadcrumbDropdown } from './breadcrumb-dropdown.js';
+import { PageLink } from './page-link.js';
+
+const FolderTreeTruncationView = ({
+  crumbs,
+  ellipsizeLastCrumb,
+  iconButtonRef,
+  isInteractive,
+  onPageLinkClick,
+  size,
+  truncatedLinksIconAriaLabel,
+  visibleCrumbCount
+}) => {
+  const visibleCrumbs = crumbs.slice(-visibleCrumbCount);
+  const hiddenCrumbs = crumbs.slice(0, -visibleCrumbCount);
+  return jsxs(Fragment, {
+    children: [jsx(BreadcrumbDropdown, {
+      crumbsToRender: hiddenCrumbs,
+      iconButton: jsx(IconButton, {
+        "aria-label": truncatedLinksIconAriaLabel,
+        icon: FolderTree,
+        size: "small"
+      }),
+      listRef: iconButtonRef,
+      onPageLinkClick: onPageLinkClick,
+      size: size
+    }), visibleCrumbs.map((crumb, index) => jsx(PageLink, {
+      crumb: crumb,
+      ellipsizeLastCrumb: ellipsizeLastCrumb,
+      isInteractive: isInteractive,
+      isLast: index === visibleCrumbs.length - 1,
+      onPageLinkClick: onPageLinkClick,
+      size: size
+    }, crumb.id))]
+  });
+};
+
+export { FolderTreeTruncationView };

package/dist/lib-esm/breadcrumb/full-view.d.ts

@@ -0,0 +1,2 @@
+import { type BreadcrumbViewProps } from './types';
+export declare const FullView: ({ crumbs, ellipsizeLastCrumb, isInteractive, onPageLinkClick, size, }: Omit<BreadcrumbViewProps, "truncatedLinksIconAriaLabel">) => import("react/jsx-runtime").JSX.Element[];

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import { PageLink } from './page-link.js';
+
+const FullView = ({
+  crumbs,
+  ellipsizeLastCrumb,
+  isInteractive,
+  onPageLinkClick,
+  size
+}) => crumbs.map((crumb, index) => jsx(PageLink, {
+  crumb: crumb,
+  ellipsizeLastCrumb: ellipsizeLastCrumb,
+  isInteractive: isInteractive,
+  isLast: index === crumbs.length - 1,
+  onPageLinkClick: onPageLinkClick,
+  size: size
+}, crumb.id));
+
+export { FullView };

package/dist/lib-esm/breadcrumb/mobile-view.d.ts

@@ -0,0 +1,2 @@
+import { type BreadcrumbViewProps } from './types';
+export declare const MobileView: ({ crumbs, isInteractive, onPageLinkClick, size, truncatedLinksIconAriaLabel, }: BreadcrumbViewProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,37 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
+import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { BreadcrumbDropdown } from './breadcrumb-dropdown.js';
+import { PageLink } from './page-link.js';
+
+const MobileView = ({
+  crumbs,
+  isInteractive,
+  onPageLinkClick,
+  size,
+  truncatedLinksIconAriaLabel
+}) => {
+  const currentPage = crumbs[crumbs.length - 1];
+  const hiddenCrumbs = crumbs.slice(0, -1);
+  return jsxs(Fragment, {
+    children: [hiddenCrumbs.length > 0 && jsx(BreadcrumbDropdown, {
+      crumbsToRender: hiddenCrumbs,
+      iconButton: jsx(IconButton, {
+        "aria-label": truncatedLinksIconAriaLabel,
+        icon: FolderTree,
+        size: "small"
+      }),
+      onPageLinkClick: onPageLinkClick,
+      size: size
+    }), jsx(PageLink, {
+      crumb: currentPage,
+      ellipsizeLastCrumb: true,
+      isInteractive: isInteractive,
+      isLast: true,
+      onPageLinkClick: onPageLinkClick,
+      size: size
+    })]
+  });
+};
+
+export { MobileView };

package/dist/lib-esm/breadcrumb/page-link.d.ts

@@ -1,17 +1,2 @@
-import { type Crumb } from './types';
-/**
- * A page link represents a combination of an optional folder icon, a single crumb, and a separator.
- */
-export interface PageLinkProps {
-    /** The crumb to display in the page link. */
-    crumb: Crumb;
-    /** Whether the page link is the last crumb in the breadcrumb. */
-    isLast: boolean;
-    /** Whether the page link is interactive. */
-    isInteractive: boolean;
-    /** The callback to call when the page link is clicked. */
-    onPageLinkClick: (id: string) => void;
-    /** The text size of the page link. */
-    size: 'xsmall' | 'small' | 'medium' | 'large';
-}
-export declare const PageLink: ({ crumb, isLast, isInteractive, onPageLinkClick, size }: PageLinkProps) => import("react/jsx-runtime").JSX.Element;
+import { type PageLinkProps } from './types';
+export declare const PageLink: ({ crumb, ellipsizeLastCrumb, isInteractive, isLast, onPageLinkClick, size, }: PageLinkProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,25 +1,34 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import { PointerRight } from '@box/blueprint-web-assets/icons/Fill';
+import { EllipsizableText } from '../ellipsizable-text/ellipsizable-text.js';
 import { Link } from '../primitives/link/link.js';
 import { Text } from '../text/text.js';
-import styles from './breadcrumb.module.js';
 import { getBoldTextVariantFromSize, getTextVariantFromSize, getSeparatorSize } from './utils.js';
+import styles from './breadcrumb.module.js';
 
 const PageLink = ({
   crumb,
-  isLast,
+  ellipsizeLastCrumb = false,
   isInteractive,
+  isLast,
   onPageLinkClick,
   size
 }) => {
   const handlePageLinkClick = useCallback(() => {
     onPageLinkClick(crumb.id);
-  }, [onPageLinkClick, crumb.id]);
+  }, [crumb.id, onPageLinkClick]);
   if (isLast) {
     return jsx("li", {
       className: styles.pageLink,
-      children: jsx(Text, {
+      children: ellipsizeLastCrumb ? jsx(EllipsizableText, {
+        "aria-current": "page",
+        as: "span",
+        color: "textOnLightDefault",
+        lineClamp: 1,
+        variant: getBoldTextVariantFromSize(size),
+        children: crumb.name
+      }) : jsx(Text, {
         "aria-current": "page",
         as: "span",
         color: "textOnLightDefault",

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

@@ -23,7 +23,8 @@ export type BreadcrumbProps = {
     size?: 'xsmall' | 'small' | 'medium' | 'large';
     /** Aria label for the icon button when breadcrumb is truncated. */
     truncatedLinksIconAriaLabel: string;
-    /** Controls behavior when there are too many crumbs to display.
+    /**
+     * Controls behavior when there are too many crumbs to display.
      * Ellipsis shows the crumbs at the beginning and end, with an ellipsis icon in between.
      * Folder-tree dynamically detects container overflow and shows up to 3 visible crumbs with a folder tree icon dropdown.
      */
@@ -36,3 +37,53 @@ export interface rootIconProps {
     /** Determines which icon is displayed at the root. */
     rootIconVariant: 'home' | 'folder-tree';
 }
+export interface BreadcrumbViewProps {
+    crumbs: Crumb[];
+    ellipsizeLastCrumb?: boolean;
+    isInteractive: boolean;
+    onPageLinkClick: (id: string) => void;
+    size: NonNullable<BreadcrumbProps['size']>;
+    truncatedLinksIconAriaLabel: string;
+}
+export interface FolderTreeTruncationViewProps extends BreadcrumbViewProps {
+    iconButtonRef: React.RefObject<HTMLLIElement>;
+    visibleCrumbCount: number;
+}
+/**
+ * A page link represents a combination of an optional folder icon, a single crumb, and a separator.
+ */
+export interface PageLinkProps {
+    /** The crumb to display in the page link. */
+    crumb: Crumb;
+    /** Whether the last crumb should be ellipsized. */
+    ellipsizeLastCrumb?: boolean;
+    /** Whether the page link is interactive. */
+    isInteractive: boolean;
+    /** Whether the page link is the last crumb in the breadcrumb. */
+    isLast: boolean;
+    /** The callback to call when the page link is clicked. */
+    onPageLinkClick: (id: string) => void;
+    /** The text size of the page link. */
+    size: 'xsmall' | 'small' | 'medium' | 'large';
+}
+export interface TruncationState {
+    /** Whether the last crumb should be ellipsized (when it doesn't fit even with truncation) */
+    ellipsizeLastCrumb: boolean;
+    /** Whether the breadcrumb content would exceed the container width IF no truncation was being applied */
+    isTruncationRequired: boolean;
+    /** Number of visible crumbs (not in dropdown) to show (1-3) */
+    visibleCrumbCount: number;
+}
+export interface FolderTreeTruncationResult extends TruncationState {
+    /** Ref to attach to the icon button container for width measurement */
+    iconButtonRef: React.RefObject<HTMLLIElement>;
+}
+export interface PerformTruncationParams {
+    container: HTMLOListElement;
+    crumbCount: number;
+    iconButtonRef: React.RefObject<HTMLLIElement>;
+    isTruncationRequired: boolean;
+    measuredIconButtonWidth: React.MutableRefObject<number>;
+    setState: React.Dispatch<React.SetStateAction<TruncationState>>;
+    storedCrumbWidths: React.MutableRefObject<number[]>;
+}

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

@@ -1,25 +1,12 @@
-import { type Crumb } from './types';
-interface FolderTreeTruncationState {
-    /** Whether the breadcrumb content would exceed the container width IF no truncation was being applied */
-    isTruncationRequired: boolean;
-    /** Number of visible crumbs (not in dropdown) to show (1-3) */
-    visibleCrumbCount: number;
-}
-interface FolderTreeTruncationResult extends FolderTreeTruncationState {
-    /** Ref to attach to the icon button container li element for width measurement */
-    iconButtonRef: React.RefObject<HTMLLIElement>;
-}
+import { type Crumb, type FolderTreeTruncationResult } from './types';
 /**
- * Hook which calculates how many crumbs can be displayed when folder-tree truncation is enabled.
+ * Hook that calculates optimal breadcrumb truncation for folder-tree display.
  *
- * ## Truncation Rules
- * - **≤3 crumbs**: Render all crumbs first, detect overflow, truncate only if needed
- * - **>3 crumbs**: Render truncated state immediately, show icon button + up to 3 crumbs
+ * Uses a cascading fallback strategy to show as many crumbs as possible without
+ * text ellipsis, falling back to ellipsis only as a last resort.
  *
- * @param containerRef - Ref to the main ol element
- * @param crumbs - Array of breadcrumb items
- * @param isEnabled - Whether folder-tree truncation is enabled. Can be false when responsive behavior is triggered
- * @returns Object containing wouldCrumbsOverflow, visibleCrumbCount, and iconButtonRef
+ * @param containerRef - Ref to the breadcrumb list container (ol element)
+ * @param crumbs - Array of breadcrumb items to display
+ * @param isMobile - Whether the breadcrumb is on a mobile device
  */
-export declare const useFolderTreeTruncation: (containerRef: React.RefObject<HTMLOListElement>, crumbs: Crumb[], isEnabled: boolean) => FolderTreeTruncationResult;
-export {};
+export declare const useFolderTreeTruncation: (containerRef: React.RefObject<HTMLOListElement>, crumbs: Crumb[], isMobile: boolean) => FolderTreeTruncationResult;

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

@@ -1,10 +1,11 @@
 import noop from 'lodash/noop';
-import { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useCallback, useLayoutEffect } from 'react';
 
-const getInitialState = (crumbCount, isTruncationRequiredBasedOnCrumbCount) => ({
-  isTruncationRequired: isTruncationRequiredBasedOnCrumbCount,
-  visibleCrumbCount: isTruncationRequiredBasedOnCrumbCount ? 3 : crumbCount
-});
+const MAX_VISIBLE_CRUMBS = 3;
+/**
+ * Calculates how many crumbs (from the end) can fit within the available width.
+ * Returns at least 1 to ensure we always show the current page.
+ */
 const calculateVisibleCrumbCount = (crumbWidths, availableWidth, gap, maxVisible) => {
   let crumbWidthWithoutGaps = 0;
   let visibleCount = 0;
@@ -20,15 +21,21 @@ const calculateVisibleCrumbCount = (crumbWidths, availableWidth, gap, maxVisible
   }
   return Math.max(1, visibleCount);
 };
-const measureCrumbWidths = (children, totalCrumbCount) => {
-  // The first child is the icon button when we always truncate
-  const crumbs = children.slice(1);
-  const widths = [];
-  const startIndex = totalCrumbCount - crumbs.length;
-  crumbs.forEach((crumb, i) => {
-    widths[startIndex + i] = crumb.offsetWidth;
+/**
+ * Measures the width of each crumb element.
+ *
+ * For the last crumb (no separator), we measure just the text element.
+ * For other crumbs, we measure the full <li> to include the separator.
+ */
+const measureCrumbWidths = (crumbElements, isLastCrumbIncluded) => {
+  return crumbElements.map((element, index) => {
+    const isLastCrumb = isLastCrumbIncluded && index === crumbElements.length - 1;
+    if (isLastCrumb) {
+      const textElement = element.firstElementChild;
+      return textElement?.offsetWidth ?? element.offsetWidth;
+    }
+    return element.offsetWidth;
   });
-  return widths;
 };
 /**
  * Calculate total width of crumbs including gaps
@@ -39,97 +46,50 @@ const calculateTotalWidth = (widths, gap) => {
   return totalCrumbsWidth + totalGapWidth;
 };
 /**
- * Handle >3 crumbs case: Always truncate, show icon button + up to 3 crumbs
+ * Determines the best truncation state using a cascading fallback strategy.
+ *
+ * Priority order (from most preferred to last resort):
+ * 1. Show all crumbs without truncation or ellipsis
+ * 2. Show icon + fewer crumbs without ellipsis
+ * 3. Show icon + 1 crumb with ellipsis (last resort)
  */
-const handleAlwaysTruncate = (children, context) => {
-  const {
-    containerWidth,
-    gap,
-    iconButtonWidth,
-    crumbCount,
-    storedCrumbWidths
-  } = context;
-  // If we don't have stored crumb widths yet, measure them
-  const crumbWidths = storedCrumbWidths.length < crumbCount ? measureCrumbWidths(children, crumbCount) : storedCrumbWidths;
-  // Icon button not yet rendered - use conservative fallback
-  if (iconButtonWidth === 0) {
+const handleTruncationState = (crumbWidths, containerWidth, iconButtonWidth, gap) => {
+  const crumbCount = crumbWidths.length;
+  // Edge case: no crumbs
+  if (crumbCount === 0) {
     return {
-      state: {
-        isTruncationRequired: true,
-        visibleCrumbCount: 1
-      },
-      crumbWidths
+      isTruncationRequired: false,
+      ellipsizeLastCrumb: false,
+      visibleCrumbCount: 0
     };
   }
-  const availableWidth = containerWidth - iconButtonWidth - gap;
-  const visibleCount = calculateVisibleCrumbCount(crumbWidths, availableWidth, gap, 3);
-  return {
-    state: {
-      isTruncationRequired: true,
-      visibleCrumbCount: visibleCount
-    },
-    crumbWidths
-  };
-};
-/**
- * Get crumb widths for total width calculation
- * Factored out into its own function to reduce cognitive complexity
- */
-const getCrumbWidths = (children, storedWidths, crumbCount, isCurrentlyTruncated) => {
-  if (storedWidths.length === crumbCount) {
-    return storedWidths; // Already have all widths
-  }
-  // The first child could be the icon button, so we don't want to measure it as part of the crumbs
-  const crumbElements = isCurrentlyTruncated ? children.slice(1) : children;
-  return crumbElements.map(crumbElement => crumbElement.offsetWidth);
-};
-/**
- * Handle ≤3 crumbs case: Render all first, detect overflow, truncate if needed
- */
-const handleConditionalTruncate = (children, context, isCurrentlyTruncated) => {
-  const {
-    containerWidth,
-    gap,
-    iconButtonWidth,
-    crumbCount,
-    storedCrumbWidths
-  } = context;
-  // Get crumb widths when all crumbs are visible (not truncated)
-  const crumbWidths = !isCurrentlyTruncated && children.length === crumbCount ? children.map(crumbElement => crumbElement.offsetWidth) // fresh measurement
-  : storedCrumbWidths; // Reuse stored
-  // Calculate total width to check for overflow
-  const widthsForCalculation = getCrumbWidths(children, crumbWidths, crumbCount, isCurrentlyTruncated);
-  const totalWidth = calculateTotalWidth(widthsForCalculation, gap);
-  const areCrumbsOverflowingWithoutTruncation = totalWidth > containerWidth;
-  // No overflow - show all crumbs
-  if (!areCrumbsOverflowingWithoutTruncation) {
+  const totalWidthAllCrumbs = calculateTotalWidth(crumbWidths, gap);
+  const availableWidthWithIcon = Math.max(0, containerWidth - iconButtonWidth - gap);
+  // Check if all crumbs fit without truncation (up to MAX_VISIBLE_CRUMBS)
+  if (crumbCount <= MAX_VISIBLE_CRUMBS && totalWidthAllCrumbs <= containerWidth) {
     return {
-      state: {
-        isTruncationRequired: false,
-        visibleCrumbCount: crumbCount
-      },
-      crumbWidths
+      isTruncationRequired: false,
+      ellipsizeLastCrumb: false,
+      visibleCrumbCount: crumbCount
     };
   }
-  // If we are overflowing, now calculate how many crumbs fit with icon button
-  // Icon button not yet rendered - use conservative fallback
-  if (iconButtonWidth === 0) {
+  // Single crumb: never show icon, just ellipsize if needed
+  if (crumbCount === 1) {
     return {
-      state: {
-        isTruncationRequired: true,
-        visibleCrumbCount: 1
-      },
-      crumbWidths
+      isTruncationRequired: false,
+      visibleCrumbCount: 1,
+      ellipsizeLastCrumb: totalWidthAllCrumbs > containerWidth
     };
   }
-  const availableWidth = containerWidth - iconButtonWidth - gap;
-  const visibleCount = calculateVisibleCrumbCount(crumbWidths, availableWidth, gap, crumbCount);
+  // Calculate how many crumbs fit with the icon button
+  const visibleCrumbCount = calculateVisibleCrumbCount(crumbWidths, availableWidthWithIcon, gap, MAX_VISIBLE_CRUMBS);
+  // If only 1 crumb fits and it still doesn't fit fully, enable ellipsis
+  const lastCrumbWidth = crumbWidths[crumbWidths.length - 1];
+  const ellipsizeLastCrumb = visibleCrumbCount === 1 && lastCrumbWidth > availableWidthWithIcon;
   return {
-    state: {
-      isTruncationRequired: true,
-      visibleCrumbCount: visibleCount
-    },
-    crumbWidths
+    isTruncationRequired: true,
+    visibleCrumbCount,
+    ellipsizeLastCrumb
   };
 };
 /**
@@ -141,79 +101,84 @@ const performTruncationCalculation = ({
   measuredIconButtonWidth,
   storedCrumbWidths,
   crumbCount,
-  isTruncationRequiredBaseOnCrumbLength,
   isTruncationRequired,
   setState
 }) => {
   const containerWidth = container.clientWidth;
-  const children = Array.from(container.children);
   const computedStyle = getComputedStyle(container);
   const gap = parseFloat(computedStyle.gap) || 0;
+  const children = Array.from(container.children);
   if (iconButtonRef.current) {
     measuredIconButtonWidth.current = iconButtonRef.current.offsetWidth;
   }
-  const context = {
-    containerWidth,
-    gap,
-    iconButtonWidth: measuredIconButtonWidth.current,
-    crumbCount,
-    storedCrumbWidths: storedCrumbWidths.current
-  };
-  const result = isTruncationRequiredBaseOnCrumbLength ? handleAlwaysTruncate(children, context) : handleConditionalTruncate(children, context, isTruncationRequired);
-  storedCrumbWidths.current = result.crumbWidths;
-  setState(result.state);
+  // When truncated, first child is icon button, so skip it
+  const crumbElements = isTruncationRequired ? children.slice(1) : children;
+  if (storedCrumbWidths.current.length < crumbCount && crumbElements.length > 0) {
+    const startIndex = crumbCount - crumbElements.length;
+    const isLastCrumbIncluded = startIndex + crumbElements.length === crumbCount;
+    const measuredWidths = measureCrumbWidths(crumbElements, isLastCrumbIncluded);
+    measuredWidths.forEach((width, i) => {
+      storedCrumbWidths.current[startIndex + i] = width;
+    });
+  }
+  if (storedCrumbWidths.current.length < crumbCount) {
+    return;
+  }
+  setState(handleTruncationState(storedCrumbWidths.current, containerWidth, measuredIconButtonWidth.current, gap));
 };
 /**
- * Hook which calculates how many crumbs can be displayed when folder-tree truncation is enabled.
+ * Hook that calculates optimal breadcrumb truncation for folder-tree display.
  *
- * ## Truncation Rules
- * - **≤3 crumbs**: Render all crumbs first, detect overflow, truncate only if needed
- * - **>3 crumbs**: Render truncated state immediately, show icon button + up to 3 crumbs
+ * Uses a cascading fallback strategy to show as many crumbs as possible without
+ * text ellipsis, falling back to ellipsis only as a last resort.
  *
- * @param containerRef - Ref to the main ol element
- * @param crumbs - Array of breadcrumb items
- * @param isEnabled - Whether folder-tree truncation is enabled. Can be false when responsive behavior is triggered
- * @returns Object containing wouldCrumbsOverflow, visibleCrumbCount, and iconButtonRef
+ * @param containerRef - Ref to the breadcrumb list container (ol element)
+ * @param crumbs - Array of breadcrumb items to display
+ * @param isMobile - Whether the breadcrumb is on a mobile device
  */
-const useFolderTreeTruncation = (containerRef, crumbs, isEnabled) => {
-  const isTruncationRequiredBaseOnCrumbLength = crumbs.length > 3;
-  const [state, setState] = useState(() => getInitialState(crumbs.length, isTruncationRequiredBaseOnCrumbLength));
-  const animationFrameId = useRef(null);
+const useFolderTreeTruncation = (containerRef, crumbs, isMobile) => {
+  const crumbCount = crumbs.length;
+  // Initial state: for 4+ crumbs, start truncated; otherwise show all
+  const initialState = {
+    isTruncationRequired: crumbCount > MAX_VISIBLE_CRUMBS,
+    ellipsizeLastCrumb: false,
+    visibleCrumbCount: Math.min(crumbCount, MAX_VISIBLE_CRUMBS)
+  };
+  const [state, setState] = useState(initialState);
   const iconButtonRef = useRef(null);
-  // Refs are used here to persist values
-  const measuredIconButtonWidth = useRef(0);
+  // Cache for measured values to avoid re-measuring on every resize
   const storedCrumbWidths = useRef([]);
-  const prevCrumbsLength = useRef(crumbs.length);
-  // Clear stored widths when user navigates and the visible crumbs change
-  if (prevCrumbsLength.current !== crumbs.length) {
+  const measuredIconButtonWidth = useRef(0);
+  const prevCrumbCount = useRef(crumbCount);
+  // Reset cache when crumbs change (user navigated)
+  if (prevCrumbCount.current !== crumbCount) {
     storedCrumbWidths.current = [];
-    setState(getInitialState(crumbs.length, isTruncationRequiredBaseOnCrumbLength));
-    prevCrumbsLength.current = crumbs.length;
+    measuredIconButtonWidth.current = 0;
+    prevCrumbCount.current = crumbCount;
+    setState(initialState);
   }
   const calculateTruncation = useCallback(() => {
     const container = containerRef.current;
     if (!container) {
       return;
     }
-    animationFrameId.current = requestAnimationFrame(() => {
-      performTruncationCalculation({
-        container,
-        iconButtonRef,
-        measuredIconButtonWidth,
-        storedCrumbWidths,
-        crumbCount: crumbs.length,
-        isTruncationRequiredBaseOnCrumbLength,
-        isTruncationRequired: state.isTruncationRequired,
-        setState
-      });
+    performTruncationCalculation({
+      container,
+      iconButtonRef,
+      measuredIconButtonWidth,
+      storedCrumbWidths,
+      crumbCount,
+      isTruncationRequired: state.isTruncationRequired,
+      setState
     });
-  }, [containerRef, crumbs.length, state.isTruncationRequired, isTruncationRequiredBaseOnCrumbLength]);
-  useEffect(() => {
+  }, [containerRef, crumbCount, state.isTruncationRequired]);
+  useLayoutEffect(() => {
     // Reset state when truncation is disabled (e.g., responsive breakpoint triggers mobile view)
-    if (!isEnabled) {
+    if (isMobile) {
       setState({
         isTruncationRequired: false,
-        visibleCrumbCount: crumbs.length
+        ellipsizeLastCrumb: false,
+        visibleCrumbCount: crumbCount
       });
       measuredIconButtonWidth.current = 0;
       storedCrumbWidths.current = [];
@@ -230,11 +195,8 @@ const useFolderTreeTruncation = (containerRef, crumbs, isEnabled) => {
     calculateTruncation();
     return () => {
       observer.disconnect();
-      if (animationFrameId.current !== null) {
-        cancelAnimationFrame(animationFrameId.current);
-      }
     };
-  }, [containerRef, isEnabled, calculateTruncation, crumbs.length]);
+  }, [calculateTruncation, containerRef, crumbCount, isMobile]);
   return {
     ...state,
     iconButtonRef

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

@@ -204,6 +204,10 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * Callback used when combobox input/textarea loses focus
      */
     onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    /**
+     * Callback when text is pasted into the input
+     */
+    onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
     /**
      * aria-label passed to the Combobox clear button. If not provided, the clear button is not shown.
      */

package/dist/lib-esm/index.css

@@ -2623,11 +2623,11 @@
 .bp_menu_item_sections_module_menuItemSideContent--5517f.bp_menu_item_sections_module_textOnLightSecondary--5517f{
   color:var(--menu-item-text-color);
 }
-.bp_breadcrumb_module_container--ee92d{
+.bp_breadcrumb_module_container--67af7{
   height:var(--bp-size-060);
   width:100%;
 }
-.bp_breadcrumb_module_container--ee92d .bp_breadcrumb_module_breadcrumb--ee92d{
+.bp_breadcrumb_module_container--67af7 .bp_breadcrumb_module_breadcrumb--67af7{
   align-items:center;
   display:flex;
   flex-wrap:nowrap;
@@ -2635,22 +2635,26 @@
   height:100%;
   list-style:none;
   margin:0;
-  overflow:hidden;
   padding:0;
 }
-.bp_breadcrumb_module_container--ee92d .bp_breadcrumb_module_pageLink--ee92d{
+.bp_breadcrumb_module_container--67af7 .bp_breadcrumb_module_pageLink--67af7{
   align-items:center;
   display:flex;
   flex-shrink:0;
   gap:var(--bp-size-010);
+  min-width:0;
+  overflow:hidden;
   white-space:nowrap;
 }
+.bp_breadcrumb_module_container--67af7 .bp_breadcrumb_module_pageLink--67af7:last-child{
+  flex-shrink:1;
+}
 
-.bp_breadcrumb_module_linkWithHover--ee92d{
+.bp_breadcrumb_module_linkWithHover--67af7{
   cursor:pointer;
   position:relative;
 }
-.bp_breadcrumb_module_linkWithHover--ee92d::after{
+.bp_breadcrumb_module_linkWithHover--67af7::after{
   background-color:var(--bp-text-text-on-light-secondary);
   bottom:0;
   content:"";
@@ -2662,12 +2666,13 @@
   transition:transform var(--animation-duration-2) var(--animation-easing-ease-base);
   width:100%;
 }
-.bp_breadcrumb_module_linkWithHover--ee92d:hover::after{
+.bp_breadcrumb_module_linkWithHover--67af7:hover::after{
   transform:scaleX(1);
 }
 
-.bp_breadcrumb_module_dropdownContent--ee92d{
+.bp_breadcrumb_module_dropdownContent--67af7{
   --blueprint-web-dropdown-menu-max-height:calc(var(--bp-size-300)*2);
+  z-index:2147483646;
 }
 .bp_link_module_link--27104{
   color:var(--text-cta-link);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.135.1",
+    "version": "12.136.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.101.2",
+        "@box/blueprint-web-assets": "^4.101.3",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.16.39",
+        "@box/storybook-utils": "^0.16.40",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",