@box/blueprint-web 12.135.1 → 12.136.1

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--335e0","breadcrumb":"bp_breadcrumb_module_breadcrumb--335e0","pageLink":"bp_breadcrumb_module_pageLink--335e0","linkWithHover":"bp_breadcrumb_module_linkWithHover--335e0","dropdownContent":"bp_breadcrumb_module_dropdownContent--335e0"};
 
 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;