@box/blueprint-web 12.128.0 → 12.129.0

package/dist/lib-esm/index.css

@@ -2262,7 +2262,7 @@
   height:var(--icon-button-size-x-small);
   width:var(--icon-button-size-x-small);
 }
-.bp_dropdown_menu_module_content--904d6[data-modern=false]{
+.bp_dropdown_menu_module_content--6a142[data-modern=false]{
   --dropdown-menu-radius:var(--radius-3);
   --dropdown-menu-padding:var(--space-3);
   --dropdown-menu-text-color:var(--text-text-on-light);
@@ -2293,6 +2293,7 @@
   --dropdown-menu-end-element-color:var(--text-text-on-light-secondary);
   --dropdown-menu-separator-margin:var(--space-2);
   --dropdown-menu-checkmark-left:var(--space-2);
+  --dropdown-menu-medium-checkmark-left:var(--space-3);
   --dropdown-menu-backdrop-filter:none;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
@@ -2304,7 +2305,7 @@
   text-transform:var(--body-default-text-case);
 }
 
-.bp_dropdown_menu_module_content--904d6[data-modern=true]{
+.bp_dropdown_menu_module_content--6a142[data-modern=true]{
   --dropdown-menu-radius:var(--bp-radius-10);
   --dropdown-menu-padding:var(--bp-space-030);
   --dropdown-menu-text-color:var(--bp-text-text-on-light);
@@ -2335,6 +2336,7 @@
   --dropdown-menu-end-element-color:var(--bp-icon-icon-on-light-secondary);
   --dropdown-menu-separator-margin:var(--bp-space-020);
   --dropdown-menu-checkmark-left:var(--bp-space-020);
+  --dropdown-menu-medium-checkmark-left:var(--bp-space-030);
   --dropdown-menu-backdrop-filter:blur(16px);
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
@@ -2344,7 +2346,7 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_dropdown_menu_module_content--904d6{
+.bp_dropdown_menu_module_content--6a142{
   backdrop-filter:var(--dropdown-menu-backdrop-filter);
   background-color:var(--dropdown-menu-background);
   border:var(--dropdown-menu-border);
@@ -2359,7 +2361,7 @@
   padding:var(--dropdown-menu-padding);
   z-index:2147483647;
 }
-.bp_dropdown_menu_module_content--904d6[data-menu-fullscreen=true]{
+.bp_dropdown_menu_module_content--6a142[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -2372,27 +2374,27 @@
   position:relative;
   width:100vw;
 }
-.bp_dropdown_menu_module_content--904d6[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--904d6{
+.bp_dropdown_menu_module_content--6a142[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--6a142{
   overflow-y:auto;
   padding:var(--dropdown-menu-full-screen-padding);
 }
-.bp_dropdown_menu_module_content--904d6 .bp_dropdown_menu_module_subheader--904d6{
+.bp_dropdown_menu_module_content--6a142 .bp_dropdown_menu_module_subheader--6a142{
   padding:var(--dropdown-menu-subheader-padding);
 }
-.bp_dropdown_menu_module_content--904d6 .bp_dropdown_menu_module_subheader--904d6.bp_dropdown_menu_module_uppercased--904d6{
+.bp_dropdown_menu_module_content--6a142 .bp_dropdown_menu_module_subheader--6a142.bp_dropdown_menu_module_uppercased--6a142{
   text-transform:uppercase;
 }
-.bp_dropdown_menu_module_content--904d6 .bp_dropdown_menu_module_dropdownMenuItemSeparator--904d6{
+.bp_dropdown_menu_module_content--6a142 .bp_dropdown_menu_module_dropdownMenuItemSeparator--6a142{
   margin-block:var(--dropdown-menu-separator-margin);
 }
 
-.bp_dropdown_menu_module_ellipsis--904d6{
+.bp_dropdown_menu_module_ellipsis--6a142{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_dropdown_menu_module_checkmark--904d6{
+.bp_dropdown_menu_module_checkmark--6a142{
   align-items:center;
   display:inline-flex;
   justify-content:center;
@@ -2400,7 +2402,11 @@
   position:absolute;
 }
 
-.bp_dropdown_menu_module_item--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6{
+.bp_dropdown_menu_module_checkmark--6a142.bp_dropdown_menu_module_mediumSpacing--6a142{
+  left:var(--dropdown-menu-medium-checkmark-left);
+}
+
+.bp_dropdown_menu_module_item--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142{
   align-items:center;
   border:var(--dropdown-menu-item-border);
   border-radius:var(--dropdown-menu-item-radius);
@@ -2413,65 +2419,65 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_dropdown_menu_module_item--904d6[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--904d6[data-disabled]{
+.bp_dropdown_menu_module_item--6a142[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--6a142[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_dropdown_menu_module_item--904d6[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--904d6[data-highlighted]{
+.bp_dropdown_menu_module_item--6a142[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--6a142[data-highlighted]{
   background-color:var(--dropdown-menu-item-background-focus);
   border:var(--dropdown-menu-item-border-focus);
 }
-.bp_dropdown_menu_module_item--904d6[data-state=open][data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--904d6[data-state=open][data-highlighted]{
+.bp_dropdown_menu_module_item--6a142[data-state=open][data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--6a142[data-state=open][data-highlighted]{
   border:var(--dropdown-menu-item-border);
 }
-.bp_dropdown_menu_module_item--904d6:active,.bp_dropdown_menu_module_subMenuTrigger--904d6:active{
+.bp_dropdown_menu_module_item--6a142:active,.bp_dropdown_menu_module_subMenuTrigger--6a142:active{
   background-color:var(--dropdown-menu-item-background-active);
   border:var(--dropdown-menu-item-border-active);
 }
-.bp_dropdown_menu_module_item--904d6[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--904d6[data-state=open]{
+.bp_dropdown_menu_module_item--6a142[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--6a142[data-state=open]{
   background-color:var(--dropdown-menu-item-background-selected);
 }
-.bp_dropdown_menu_module_item--904d6:hover,.bp_dropdown_menu_module_subMenuTrigger--904d6:hover{
+.bp_dropdown_menu_module_item--6a142:hover,.bp_dropdown_menu_module_subMenuTrigger--6a142:hover{
   background-color:var(--dropdown-menu-item-background-hover);
   border:var(--dropdown-menu-item-border-hover);
 }
-.bp_dropdown_menu_module_item--904d6.bp_dropdown_menu_module_radioItem--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6.bp_dropdown_menu_module_radioItem--904d6{
+.bp_dropdown_menu_module_item--6a142.bp_dropdown_menu_module_radioItem--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142.bp_dropdown_menu_module_radioItem--6a142{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
-.bp_dropdown_menu_module_item--904d6.bp_dropdown_menu_module_radioItem--904d6 .bp_dropdown_menu_module_radioItemMediumSpacing--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6.bp_dropdown_menu_module_radioItem--904d6 .bp_dropdown_menu_module_radioItemMediumSpacing--904d6{
+.bp_dropdown_menu_module_item--6a142.bp_dropdown_menu_module_radioItem--6a142 .bp_dropdown_menu_module_radioItemMediumSpacing--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142.bp_dropdown_menu_module_radioItem--6a142 .bp_dropdown_menu_module_radioItemMediumSpacing--6a142{
   padding-inline-start:var(--dropdown-menu-radio-item-medium-padding-start);
 }
-.bp_dropdown_menu_module_item--904d6.bp_dropdown_menu_module_checkboxItem--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6.bp_dropdown_menu_module_checkboxItem--904d6{
+.bp_dropdown_menu_module_item--6a142.bp_dropdown_menu_module_checkboxItem--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142.bp_dropdown_menu_module_checkboxItem--6a142{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
-.bp_dropdown_menu_module_item--904d6.bp_dropdown_menu_module_checkboxItem--904d6 .bp_dropdown_menu_module_checkboxItemMediumSpacing--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6.bp_dropdown_menu_module_checkboxItem--904d6 .bp_dropdown_menu_module_checkboxItemMediumSpacing--904d6{
+.bp_dropdown_menu_module_item--6a142.bp_dropdown_menu_module_checkboxItem--6a142 .bp_dropdown_menu_module_checkboxItemMediumSpacing--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142.bp_dropdown_menu_module_checkboxItem--6a142 .bp_dropdown_menu_module_checkboxItemMediumSpacing--6a142{
   padding-inline-start:var(--dropdown-menu-checkbox-item-medium-padding-start);
 }
-.bp_dropdown_menu_module_item--904d6 .bp_dropdown_menu_module_mediumItemLayout--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6 .bp_dropdown_menu_module_mediumItemLayout--904d6{
+.bp_dropdown_menu_module_item--6a142 .bp_dropdown_menu_module_mediumItemLayout--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142 .bp_dropdown_menu_module_mediumItemLayout--6a142{
   gap:var(--dropdown-menu-medium-item-layout-gap);
   justify-content:space-between;
   overflow:hidden;
 }
-.bp_dropdown_menu_module_item--904d6 .bp_dropdown_menu_module_startElement--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6 .bp_dropdown_menu_module_startElement--904d6{
+.bp_dropdown_menu_module_item--6a142 .bp_dropdown_menu_module_startElement--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142 .bp_dropdown_menu_module_startElement--6a142{
   align-items:center;
   display:flex;
 }
-.bp_dropdown_menu_module_item--904d6 .bp_dropdown_menu_module_menuItemMainContent--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6 .bp_dropdown_menu_module_menuItemMainContent--904d6{
+.bp_dropdown_menu_module_item--6a142 .bp_dropdown_menu_module_menuItemMainContent--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142 .bp_dropdown_menu_module_menuItemMainContent--6a142{
   flex-grow:1;
 }
-.bp_dropdown_menu_module_item--904d6 .bp_dropdown_menu_module_endElement--904d6,.bp_dropdown_menu_module_subMenuTrigger--904d6 .bp_dropdown_menu_module_endElement--904d6{
+.bp_dropdown_menu_module_item--6a142 .bp_dropdown_menu_module_endElement--6a142,.bp_dropdown_menu_module_subMenuTrigger--6a142 .bp_dropdown_menu_module_endElement--6a142{
   align-items:center;
   color:var(--dropdown-menu-end-element-color);
   display:flex;
 }
-.bp_dropdown_menu_module_item--904d6:has(.bp_dropdown_menu_module_ellipsis--904d6){
+.bp_dropdown_menu_module_item--6a142:has(.bp_dropdown_menu_module_ellipsis--6a142){
   border-radius:var(--dropdown-menu-item-radius);
 }
-.bp_dropdown_menu_module_item--904d6:has(.bp_dropdown_menu_module_mediumItemLayout--904d6){
+.bp_dropdown_menu_module_item--6a142:has(.bp_dropdown_menu_module_mediumItemLayout--6a142){
   border-radius:var(--dropdown-menu-medium-item-radius);
 }
 
-.bp_dropdown_menu_module_menuHeader--904d6{
+.bp_dropdown_menu_module_menuHeader--6a142{
   align-items:center;
   box-shadow:var(--dropdown-menu-header-shadow);
   display:grid;
@@ -2481,15 +2487,15 @@
   padding:var(--dropdown-menu-header-padding);
 }
 
-.bp_dropdown_menu_module_headerTextContent--904d6{
+.bp_dropdown_menu_module_headerTextContent--6a142{
   display:grid;
 }
 
-.bp_dropdown_menu_module_submenuCloseButton--904d6{
+.bp_dropdown_menu_module_submenuCloseButton--6a142{
   grid-area:submenu-close;
 }
 
-.bp_dropdown_menu_module_menuCloseButton--904d6{
+.bp_dropdown_menu_module_menuCloseButton--6a142{
   grid-area:close;
 }
 .bp_divider_module_divider--2f437{

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-checkbox-item.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Checkmark as Checkmark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { Checkmark } from '@box/blueprint-web-assets/icons/Medium';
+import { Size5, Size4, bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
@@ -25,15 +26,18 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
     enableModernizedComponents
   } = useBlueprintModernization();
   const isSizeSmall = internalSize === 'small';
-  const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
+  const checkmarkSize = enableModernizedComponents ? Size5 : Size4;
+  const Checkmark$2 = enableModernizedComponents ? Checkmark : Checkmark$1;
   const checkmarkColor = enableModernizedComponents ? bpIconIconOnLight : Gray100;
   return jsxs(DropdownMenuPrimitive.CheckboxItem, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.item, styles.checkboxItem, className),
     children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
-      className: styles.checkmark,
-      children: jsx(Checkmark, {
+      className: clsx(styles.checkmark, {
+        [styles.mediumSpacing]: !isSizeSmall
+      }),
+      children: jsx(Checkmark$2, {
         color: checkmarkColor,
         height: checkmarkSize,
         role: "presentation",

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-radio-select-item.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Checkmark as Checkmark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { Checkmark } from '@box/blueprint-web-assets/icons/Medium';
+import { Size5, Size4, bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
@@ -25,7 +26,8 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
     enableModernizedComponents
   } = useBlueprintModernization();
   const isSizeSmall = internalSize === 'small';
-  const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
+  const checkmarkSize = enableModernizedComponents ? Size5 : Size4;
+  const Checkmark$2 = enableModernizedComponents ? Checkmark : Checkmark$1;
   const checkmarkColor = enableModernizedComponents ? bpIconIconOnLight : Gray100;
   return jsxs(DropdownMenuPrimitive.RadioItem, {
     ...rest,
@@ -33,8 +35,10 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
     className: clsx(styles.item, styles.radioItem),
     value: value,
     children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
-      className: styles.checkmark,
-      children: jsx(Checkmark, {
+      className: clsx(styles.checkmark, {
+        [styles.mediumSpacing]: !isSizeSmall
+      }),
+      children: jsx(Checkmark$2, {
         color: checkmarkColor,
         height: checkmarkSize,
         role: "presentation",

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"content":"bp_dropdown_menu_module_content--904d6","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--904d6","subheader":"bp_dropdown_menu_module_subheader--904d6","uppercased":"bp_dropdown_menu_module_uppercased--904d6","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--904d6","ellipsis":"bp_dropdown_menu_module_ellipsis--904d6","checkmark":"bp_dropdown_menu_module_checkmark--904d6","item":"bp_dropdown_menu_module_item--904d6","radioItem":"bp_dropdown_menu_module_radioItem--904d6","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--904d6","checkboxItem":"bp_dropdown_menu_module_checkboxItem--904d6","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--904d6","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--904d6","startElement":"bp_dropdown_menu_module_startElement--904d6","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--904d6","endElement":"bp_dropdown_menu_module_endElement--904d6","menuHeader":"bp_dropdown_menu_module_menuHeader--904d6","headerTextContent":"bp_dropdown_menu_module_headerTextContent--904d6","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--904d6","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--904d6"};
+var styles = {"content":"bp_dropdown_menu_module_content--6a142","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--6a142","subheader":"bp_dropdown_menu_module_subheader--6a142","uppercased":"bp_dropdown_menu_module_uppercased--6a142","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--6a142","ellipsis":"bp_dropdown_menu_module_ellipsis--6a142","checkmark":"bp_dropdown_menu_module_checkmark--6a142","mediumSpacing":"bp_dropdown_menu_module_mediumSpacing--6a142","item":"bp_dropdown_menu_module_item--6a142","radioItem":"bp_dropdown_menu_module_radioItem--6a142","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--6a142","checkboxItem":"bp_dropdown_menu_module_checkboxItem--6a142","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--6a142","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--6a142","startElement":"bp_dropdown_menu_module_startElement--6a142","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--6a142","endElement":"bp_dropdown_menu_module_endElement--6a142","menuHeader":"bp_dropdown_menu_module_menuHeader--6a142","headerTextContent":"bp_dropdown_menu_module_headerTextContent--6a142","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--6a142","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--6a142"};
 
 export { styles as default };

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

@@ -11,7 +11,11 @@ const useIsEllipsized = ref => {
     let rafID;
     const checkIfEllipsized = () => {
       rafID = requestAnimationFrame(() => {
-        const isOverflowing = element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+        // Use a threshold to account for browser rendering differences.
+        // Chrome can report small differences (1-2px) between scrollHeight and clientHeight.
+        // This is particularly common when line-height/font-size ratio < 1.33
+        const THRESHOLD = 2;
+        const isOverflowing = element.scrollHeight - element.clientHeight > THRESHOLD || element.scrollWidth > element.clientWidth;
         setIsEllipsized(isOverflowing);
       });
     };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.128.0",
+    "version": "12.129.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.96.9",
+        "@box/blueprint-web-assets": "^4.97.1",
         "@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.20",
+        "@box/storybook-utils": "^0.16.22",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",