@box/blueprint-web 14.24.2 → 14.25.0

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

@@ -2,9 +2,10 @@ import { type Crumb } from './types';
 interface BreadcrumbDropdownProps {
     crumbsToRender: Crumb[];
     iconButton: React.ReactNode;
+    isInteractive: boolean;
     listRef?: React.RefObject<HTMLLIElement>;
     onPageLinkClick: (id: string) => void;
     size: 'xsmall' | 'small' | 'medium' | 'large';
 }
-export declare function BreadcrumbDropdown({ crumbsToRender, iconButton, listRef, onPageLinkClick, size, }: BreadcrumbDropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function BreadcrumbDropdown({ crumbsToRender, iconButton, isInteractive, listRef, onPageLinkClick, size, }: BreadcrumbDropdownProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,14 +1,14 @@
 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 { getSeparatorSize } from './utils.js';
+import { BreadcrumbItemSeparator } from './breadcrumb-item-separator.js';
 import styles from './breadcrumb.module.js';
 
 function BreadcrumbDropdown({
   crumbsToRender,
   iconButton,
+  isInteractive,
   listRef,
   onPageLinkClick,
   size
@@ -35,10 +35,9 @@ function BreadcrumbDropdown({
           })
         }, crumb.id))
       })]
-    }), jsx(PointerRight, {
-      height: getSeparatorSize(size),
-      role: "presentation",
-      width: getSeparatorSize(size)
+    }), jsx(BreadcrumbItemSeparator, {
+      isInteractive: isInteractive,
+      size: size
     })]
   });
 }

package/dist/lib-esm/breadcrumb/breadcrumb-item-separator.d.ts

@@ -0,0 +1,7 @@
+import { type BreadcrumbProps } from './types';
+type BreadcrumbItemSeparatorProps = {
+    isInteractive: boolean;
+    size: NonNullable<BreadcrumbProps['size']>;
+};
+export declare function BreadcrumbItemSeparator({ isInteractive, size }: BreadcrumbItemSeparatorProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,33 @@
+import { jsx } from 'react/jsx-runtime';
+import { PointerRight } from '@box/blueprint-web-assets/icons/Fill';
+import { Text } from '../text/text.js';
+import { getNonInteractiveSeparatorVariantFromSize, getSeparatorSize } from './utils.js';
+import styles from './breadcrumb.module.js';
+
+function BreadcrumbItemSeparator({
+  isInteractive,
+  size
+}) {
+  if (isInteractive) {
+    const dimension = getSeparatorSize(size);
+    return jsx(PointerRight, {
+      height: dimension,
+      role: "presentation",
+      width: dimension
+    });
+  }
+  return jsx("span", {
+    "aria-hidden": "true",
+    className: styles.breadcrumbSlashSeparator,
+    children: jsx(Text, {
+      as: "span",
+      style: {
+        color: 'var(--bp-text-text-on-light-tertiary)'
+      },
+      variant: getNonInteractiveSeparatorVariantFromSize(size),
+      children: "/"
+    })
+  });
+}
+
+export { BreadcrumbItemSeparator };

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

@@ -1,15 +1,16 @@
 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 { FolderTree } from '@box/blueprint-web-assets/icons/Fill';
 import { Home } from '@box/blueprint-web-assets/icons/MediumFilled';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.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 { BreadcrumbItemSeparator } from './breadcrumb-item-separator.js';
 import { useFolderTreeTruncation } from './useFolderTreeTruncation.js';
-import { getSeparatorSize, getContainerHeight, getRootIconSize } from './utils.js';
+import { getContainerHeight, getRootIconSize } from './utils.js';
 import styles from './breadcrumb.module.js';
 
 const ELLIPSIS_TRUNCATION_THRESHOLD = 7;
@@ -100,10 +101,9 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         }) : jsx(FolderTree, {
           height: rootIconSize,
           width: rootIconSize
-        }), jsx(PointerRight, {
-          height: getSeparatorSize(size),
-          role: "presentation",
-          width: getSeparatorSize(size)
+        }), jsx(BreadcrumbItemSeparator, {
+          isInteractive: isInteractive,
+          size: size
         })]
       }), breadcrumbList]
     })

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

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

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

@@ -28,6 +28,7 @@ const EllipsisTruncationView = ({
         icon: Ellipsis,
         size: getIconButtonSize(size)
       }),
+      isInteractive: isInteractive,
       onPageLinkClick: onPageLinkClick,
       size: size
     }), lastTwoCrumbs.map((crumb, index) => jsx(PageLink, {

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

@@ -25,6 +25,7 @@ const FolderTreeTruncationView = ({
         icon: FolderTree,
         size: getIconButtonSize(size)
       }),
+      isInteractive: isInteractive,
       listRef: iconButtonRef,
       onPageLinkClick: onPageLinkClick,
       size: size

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

@@ -17,6 +17,7 @@ const MobileView = ({
   return jsxs(Fragment, {
     children: [hiddenCrumbs.length > 0 && jsx(BreadcrumbDropdown, {
       crumbsToRender: hiddenCrumbs,
+      isInteractive: isInteractive,
       iconButton: jsx(IconButton, {
         "aria-label": truncatedLinksIconAriaLabel,
         icon: FolderTree,

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

@@ -1,10 +1,10 @@
 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 { getBoldTextVariantFromSize, getTextVariantFromSize, getSeparatorSize } from './utils.js';
+import { BreadcrumbItemSeparator } from './breadcrumb-item-separator.js';
+import { getBoldTextVariantFromSize, getTextVariantFromSize } from './utils.js';
 import styles from './breadcrumb.module.js';
 
 const PageLink = ({
@@ -53,10 +53,9 @@ const PageLink = ({
       as: "span",
       variant: getTextVariantFromSize(size),
       children: crumb.name
-    }), jsx(PointerRight, {
-      height: getSeparatorSize(size),
-      role: "presentation",
-      width: getSeparatorSize(size)
+    }), jsx(BreadcrumbItemSeparator, {
+      isInteractive: isInteractive,
+      size: size
     })]
   }, crumb.id);
 };

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

@@ -1,7 +1,8 @@
-import { type BreadcrumbProps } from './types';
 import { type TypographyVariant } from '../text/types';
+import { type BreadcrumbProps } from './types';
 export declare const getTextVariantFromSize: (size: BreadcrumbProps["size"]) => TypographyVariant;
 export declare const getBoldTextVariantFromSize: (size: BreadcrumbProps["size"]) => TypographyVariant;
+export declare const getNonInteractiveSeparatorVariantFromSize: (size: BreadcrumbProps["size"]) => TypographyVariant;
 export declare const getSeparatorSize: (size: BreadcrumbProps["size"]) => string;
 export declare const getRootIconSize: (size: BreadcrumbProps["size"], hasTruncation?: boolean) => string;
 export declare const getContainerHeight: (size: BreadcrumbProps["size"], hasTruncation?: boolean) => string;

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

@@ -1,4 +1,4 @@
-import { bpSize030, bpSize040, bpSize020, bpSize060, bpSize080, bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpSize060, bpSize080, bpSize050, bpSize040, bpSize030, bpSize020 } from '@box/blueprint-web-assets/tokens/tokens';
 
 const getTextVariantFromSize = size => {
   switch (size) {
@@ -28,6 +28,19 @@ const getBoldTextVariantFromSize = size => {
       return 'bodyLargeBold';
   }
 };
+const getNonInteractiveSeparatorVariantFromSize = size => {
+  switch (size) {
+    case 'xsmall':
+    case 'small':
+      return 'bodyDefault';
+    case 'medium':
+      return 'bodyLarge';
+    case 'large':
+      return 'titleXLarge';
+    default:
+      return 'bodyLarge';
+  }
+};
 const getSeparatorSize = size => {
   switch (size) {
     case 'xsmall':
@@ -113,4 +126,4 @@ const getIconButtonSize = size => {
   }
 };
 
-export { getBoldTextVariantFromSize, getContainerHeight, getIconButtonSize, getRootIconSize, getSeparatorSize, getTextVariantFromSize };
+export { getBoldTextVariantFromSize, getContainerHeight, getIconButtonSize, getNonInteractiveSeparatorVariantFromSize, getRootIconSize, getSeparatorSize, getTextVariantFromSize };

package/dist/lib-esm/index.css

@@ -3300,10 +3300,10 @@
 .bp_menu_item_sections_module_menuItemSideContent--dd1ef.bp_menu_item_sections_module_textOnLightSecondary--dd1ef{
   color:var(--menu-item-text-color);
 }
-.bp_breadcrumb_module_container--30dee{
+.bp_breadcrumb_module_container--ef73b{
   width:100%;
 }
-.bp_breadcrumb_module_container--30dee .bp_breadcrumb_module_breadcrumb--30dee{
+.bp_breadcrumb_module_container--ef73b .bp_breadcrumb_module_breadcrumb--ef73b{
   align-items:center;
   display:flex;
   flex-wrap:nowrap;
@@ -3313,7 +3313,7 @@
   margin:0;
   padding:0;
 }
-.bp_breadcrumb_module_container--30dee .bp_breadcrumb_module_pageLink--30dee{
+.bp_breadcrumb_module_container--ef73b .bp_breadcrumb_module_pageLink--ef73b{
   align-items:center;
   display:flex;
   flex-shrink:0;
@@ -3322,16 +3322,21 @@
   overflow:hidden;
   white-space:nowrap;
 }
-.bp_breadcrumb_module_container--30dee .bp_breadcrumb_module_pageLink--30dee:last-child{
+.bp_breadcrumb_module_container--ef73b .bp_breadcrumb_module_pageLink--ef73b:last-child{
   flex-shrink:1;
 }
+.bp_breadcrumb_module_container--ef73b .bp_breadcrumb_module_breadcrumbSlashSeparator--ef73b{
+  align-items:center;
+  display:inline-flex;
+  flex-shrink:0;
+}
 
-.bp_breadcrumb_module_linkWithHover--30dee{
+.bp_breadcrumb_module_linkWithHover--ef73b{
   cursor:pointer;
   display:inline-flex;
   position:relative;
 }
-.bp_breadcrumb_module_linkWithHover--30dee::after{
+.bp_breadcrumb_module_linkWithHover--ef73b::after{
   background-color:var(--bp-text-text-on-light-secondary);
   bottom:0;
   content:"";
@@ -3343,11 +3348,11 @@
   transition:transform var(--animation-duration-2) var(--animation-easing-ease-base);
   width:100%;
 }
-.bp_breadcrumb_module_linkWithHover--30dee:hover::after{
+.bp_breadcrumb_module_linkWithHover--ef73b:hover::after{
   transform:scaleX(1);
 }
 
-.bp_breadcrumb_module_dropdownContent--30dee{
+.bp_breadcrumb_module_dropdownContent--ef73b{
   --blueprint-web-dropdown-menu-max-height:calc(var(--bp-size-300)*2);
 }
 .bp_link_module_link--27104{

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "14.24.2",
+    "version": "14.25.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^4.115.13",
+        "@box/blueprint-web-assets": "^4.116.0",
         "@internationalized/date": "^3.12.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.18.13",
+        "@box/storybook-utils": "^0.18.14",
         "@figma/code-connect": "1.4.4",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",