@box/blueprint-web 11.8.3 → 11.9.0

package/dist/lib-esm/index.css

@@ -2740,7 +2740,7 @@
   transform:translateZ(0);
 }
 
-.bp_dropdown_menu_module_content--cf0e6{
+.bp_dropdown_menu_module_content--87356{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -2761,7 +2761,7 @@
   text-transform:none;
   z-index:2147483647;
 }
-.bp_dropdown_menu_module_content--cf0e6[data-menu-fullscreen=true]{
+.bp_dropdown_menu_module_content--87356[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -2774,24 +2774,24 @@
   position:relative;
   width:100vw;
 }
-.bp_dropdown_menu_module_content--cf0e6[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--cf0e6{
+.bp_dropdown_menu_module_content--87356[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--87356{
   overflow-y:auto;
   padding:var(--space-3);
 }
-.bp_dropdown_menu_module_content--cf0e6 .bp_dropdown_menu_module_subheader--cf0e6{
+.bp_dropdown_menu_module_content--87356 .bp_dropdown_menu_module_subheader--87356{
   padding:var(--space-2);
 }
-.bp_dropdown_menu_module_content--cf0e6 .bp_dropdown_menu_module_subheader--cf0e6.bp_dropdown_menu_module_uppercased--cf0e6{
+.bp_dropdown_menu_module_content--87356 .bp_dropdown_menu_module_subheader--87356.bp_dropdown_menu_module_uppercased--87356{
   text-transform:uppercase;
 }
 
-.bp_dropdown_menu_module_ellipsis--cf0e6{
+.bp_dropdown_menu_module_ellipsis--87356{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_dropdown_menu_module_checkmark--cf0e6{
+.bp_dropdown_menu_module_checkmark--87356{
   align-items:center;
   display:inline-flex;
   justify-content:center;
@@ -2799,7 +2799,7 @@
   position:absolute;
 }
 
-.bp_dropdown_menu_module_item--cf0e6,.bp_dropdown_menu_module_subMenuTrigger--cf0e6{
+.bp_dropdown_menu_module_item--87356,.bp_dropdown_menu_module_subMenuTrigger--87356{
   align-items:center;
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
@@ -2811,30 +2811,59 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_dropdown_menu_module_item--cf0e6[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--cf0e6[data-disabled]{
+.bp_dropdown_menu_module_item--87356[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--87356[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_dropdown_menu_module_item--cf0e6[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--cf0e6[data-highlighted]{
+.bp_dropdown_menu_module_item--87356[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--87356[data-highlighted]{
   background-color:var(--surface-menu-surface-hover);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_dropdown_menu_module_item--cf0e6:active,.bp_dropdown_menu_module_subMenuTrigger--cf0e6:active{
+.bp_dropdown_menu_module_item--87356:active,.bp_dropdown_menu_module_subMenuTrigger--87356:active{
   background-color:var(--surface-menu-surface-hover);
   border:var(--border-2) solid #0000;
 }
-.bp_dropdown_menu_module_item--cf0e6:hover,.bp_dropdown_menu_module_item--cf0e6[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--cf0e6:hover,.bp_dropdown_menu_module_subMenuTrigger--cf0e6[data-state=open]{
+.bp_dropdown_menu_module_item--87356:hover,.bp_dropdown_menu_module_item--87356[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--87356:hover,.bp_dropdown_menu_module_subMenuTrigger--87356[data-state=open]{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_dropdown_menu_module_item--cf0e6.bp_dropdown_menu_module_checkboxItem--cf0e6,.bp_dropdown_menu_module_item--cf0e6.bp_dropdown_menu_module_radioItem--cf0e6,.bp_dropdown_menu_module_subMenuTrigger--cf0e6.bp_dropdown_menu_module_checkboxItem--cf0e6,.bp_dropdown_menu_module_subMenuTrigger--cf0e6.bp_dropdown_menu_module_radioItem--cf0e6{
+.bp_dropdown_menu_module_item--87356.bp_dropdown_menu_module_radioItem--87356,.bp_dropdown_menu_module_subMenuTrigger--87356.bp_dropdown_menu_module_radioItem--87356{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
+.bp_dropdown_menu_module_item--87356.bp_dropdown_menu_module_radioItem--87356 .bp_dropdown_menu_module_radioItemMediumSpacing--87356,.bp_dropdown_menu_module_subMenuTrigger--87356.bp_dropdown_menu_module_radioItem--87356 .bp_dropdown_menu_module_radioItemMediumSpacing--87356{
+  padding-inline-start:var(--space-2);
+}
+.bp_dropdown_menu_module_item--87356.bp_dropdown_menu_module_checkboxItem--87356,.bp_dropdown_menu_module_subMenuTrigger--87356.bp_dropdown_menu_module_checkboxItem--87356{
+  padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
+}
+.bp_dropdown_menu_module_item--87356.bp_dropdown_menu_module_checkboxItem--87356 .bp_dropdown_menu_module_checkboxItemMediumSpacing--87356,.bp_dropdown_menu_module_subMenuTrigger--87356.bp_dropdown_menu_module_checkboxItem--87356 .bp_dropdown_menu_module_checkboxItemMediumSpacing--87356{
+  padding-inline-start:var(--space-2);
+}
+.bp_dropdown_menu_module_item--87356 .bp_dropdown_menu_module_mediumItemLayout--87356,.bp_dropdown_menu_module_subMenuTrigger--87356 .bp_dropdown_menu_module_mediumItemLayout--87356{
+  align-items:center;
+  display:flex;
+  gap:var(--space-2);
+  justify-content:space-between;
+  overflow:hidden;
+  width:100%;
+}
+.bp_dropdown_menu_module_item--87356 .bp_dropdown_menu_module_startElement--87356,.bp_dropdown_menu_module_subMenuTrigger--87356 .bp_dropdown_menu_module_startElement--87356{
+  align-items:center;
+  display:flex;
+}
+.bp_dropdown_menu_module_item--87356 .bp_dropdown_menu_module_menuItemMainContent--87356,.bp_dropdown_menu_module_subMenuTrigger--87356 .bp_dropdown_menu_module_menuItemMainContent--87356{
+  flex-grow:1;
+}
+.bp_dropdown_menu_module_item--87356 .bp_dropdown_menu_module_endElement--87356,.bp_dropdown_menu_module_subMenuTrigger--87356 .bp_dropdown_menu_module_endElement--87356{
+  align-items:center;
+  color:var(--text-text-on-light-secondary);
+  display:flex;
+}
 
-.bp_dropdown_menu_module_dropdownMenuItemSeparator--cf0e6{
+.bp_dropdown_menu_module_dropdownMenuItemSeparator--87356{
   margin-block:var(--space-2);
 }
 
-.bp_dropdown_menu_module_menuHeader--cf0e6{
+.bp_dropdown_menu_module_menuHeader--87356{
   align-items:center;
   box-shadow:var(--dropshadow-1);
   display:grid;
@@ -2844,15 +2873,15 @@
   padding:var(--space-3);
 }
 
-.bp_dropdown_menu_module_headerTextContent--cf0e6{
+.bp_dropdown_menu_module_headerTextContent--87356{
   display:grid;
 }
 
-.bp_dropdown_menu_module_submenuCloseButton--cf0e6{
+.bp_dropdown_menu_module_submenuCloseButton--87356{
   grid-area:submenu-close;
 }
 
-.bp_dropdown_menu_module_menuCloseButton--cf0e6{
+.bp_dropdown_menu_module_menuCloseButton--87356{
   grid-area:close;
 }
 

package/dist/lib-esm/primitives/chips/filter-chip/filter-combo-chip.d.ts

@@ -21,6 +21,7 @@ export type FilterComboChipProps = DropdownMenuRootProps & {
 };
 export declare const FilterComboChip: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuProps & {
     isFullScreenEnabled?: boolean;
+    menuItemsSize?: import("../../dropdown-menu/menu-item-variant-context").Size;
 } & {
     /** FilterChip.Chip component used as Dropdown menu trigger. Trigger chip value is ignored from selection */
     chip: React.ReactElement;

package/dist/lib-esm/primitives/chips/filter-chip/index.d.ts

@@ -8,6 +8,7 @@ export declare const FilterChip: {
     DropdownIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<SVGSVGElement>>;
     ComboChip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuProps & {
         isFullScreenEnabled?: boolean;
+        menuItemsSize?: import("../../dropdown-menu/menu-item-variant-context").Size;
     } & {
         chip: React.ReactElement;
         children: React.ReactNode;

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

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
+import { useMenuItemVariant } from './menu-item-variant-context.js';
 
 /**
  * Based on Radix-UI CheckboxItem
@@ -17,6 +18,11 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
     className,
     ...rest
   } = props;
+  const {
+    internalSize
+  } = useMenuItemVariant();
+  const isSizeSmall = internalSize === 'small';
+  const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsxs(DropdownMenuPrimitive.CheckboxItem, {
     ...rest,
@@ -28,12 +34,14 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
       className: styles.checkmark,
       children: jsx(Checkmark, {
         color: Gray100,
-        height: "1rem",
+        height: checkmarkSize,
         role: "presentation",
-        width: "1rem"
+        width: checkmarkSize
       })
     }), jsx("span", {
-      className: styles.ellipsis,
+      className: clsx(styles.ellipsis, {
+        [styles.checkboxItemMediumSpacing]: !isSizeSmall
+      }),
       children: children
     })]
   });

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.d.ts

@@ -1,6 +1,35 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { type ForwardRefExoticComponent, type RefAttributes, type SVGProps } from 'react';
+import { type RequireExactlyOne } from 'type-fest';
 export type DropdownMenuItemProps = DropdownMenuPrimitive.DropdownMenuItemProps;
+export interface MenuItemMainContentBaseProps extends React.ComponentProps<'div'> {
+    /** The label for the checkbox button.
+     * It will be overwritten by the `children` prop if provided.
+     */
+    label: string;
+    /** Additional text to aid in use. */
+    caption?: string;
+}
+export type MenuItemMainContentProps = RequireExactlyOne<MenuItemMainContentBaseProps, 'label' | 'children'>;
 /**
- * Based on Radix-UI [DropdownMenu Item](https://www.radix-ui.com/docs/primitives/components/dropdown-menu#item)
+ * Contents of an Item.
  */
-export declare const DropdownMenuItem: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const MenuItemMainContent: ForwardRefExoticComponent<(Omit<Required<Pick<MenuItemMainContentBaseProps, "label">> & Partial<Record<"children", never>> & Omit<MenuItemMainContentBaseProps, "label" | "children">, "ref"> | Omit<Required<Pick<MenuItemMainContentBaseProps, "children">> & Partial<Record<"label", never>> & Omit<MenuItemMainContentBaseProps, "label" | "children">, "ref">) & RefAttributes<HTMLDivElement>>;
+export interface MenuItemStartElementProps extends React.ComponentProps<'div'> {
+    icon?: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, 'ref'> & RefAttributes<SVGSVGElement>>;
+    children?: React.ReactNode;
+}
+/**
+ * Start element of an Item, dedicated for icons.
+ */
+export declare const MenuItemStartElement: ForwardRefExoticComponent<Omit<MenuItemStartElementProps, "ref"> & RefAttributes<HTMLDivElement>>;
+export type MenuItemEndElementProps = React.ComponentProps<'div'>;
+/**
+ * End element of an Item, dedicated for additional text and icons.
+ */
+export declare const MenuItemEndElement: ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuItemProps & RefAttributes<HTMLDivElement>> & {
+    StartElement: ForwardRefExoticComponent<Omit<MenuItemStartElementProps, "ref"> & RefAttributes<HTMLDivElement>>;
+    MainContent: ForwardRefExoticComponent<(Omit<Required<Pick<MenuItemMainContentBaseProps, "label">> & Partial<Record<"children", never>> & Omit<MenuItemMainContentBaseProps, "label" | "children">, "ref"> | Omit<Required<Pick<MenuItemMainContentBaseProps, "children">> & Partial<Record<"label", never>> & Omit<MenuItemMainContentBaseProps, "label" | "children">, "ref">) & RefAttributes<HTMLDivElement>>;
+    EndElement: ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+};

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

@@ -1,34 +1,124 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Size8, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { forwardRef, useCallback } from 'react';
+import clsx from 'clsx';
+import { forwardRef, useCallback, createElement } from 'react';
+import { Text } from '../../text/text.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
+import { useMenuItemVariant } from './menu-item-variant-context.js';
 
 /**
  * Based on Radix-UI [DropdownMenu Item](https://www.radix-ui.com/docs/primitives/components/dropdown-menu#item)
  */
-const DropdownMenuItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+const DropdownMenuItemBase = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
+    className,
     ...rest
   } = props;
+  const {
+    internalSize
+  } = useMenuItemVariant();
+  const sizeStyles = internalSize === 'small' ? styles.ellipsis : styles.mediumItemLayout;
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsx(DropdownMenuPrimitive.Item, {
     ...rest,
     ref: forwardedRef,
-    className: styles.item,
+    className: clsx(styles.item, className),
     onPointerLeave: composeEventHandlers(props.onPointerLeave, preventDefault),
     onPointerMove: composeEventHandlers(props.onPointerMove, preventDefault),
     // If click starts at trigger button, and ends on the item, it should not trigger the item.
     // Note: this also has a side effect of not allowing to start click and end on a different time.
     // TODO: see if possible to make https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/menu/src/Menu.tsx#L646
     onPointerUp: composeEventHandlers(props.onPointerUp, preventDefault),
-    children: jsx("span", {
-      className: styles.ellipsis,
+    children: jsx("div", {
+      className: sizeStyles,
       children: children
     })
   });
 });
+/**
+ * Contents of an Item.
+ */
+const MenuItemMainContent = /*#__PURE__*/forwardRef(({
+  className,
+  label,
+  children,
+  caption,
+  ...rest
+}, ref) => {
+  const {
+    internalSize
+  } = useMenuItemVariant();
+  const labelVariant = internalSize === 'medium' ? 'bodyDefaultBold' : 'bodyDefault';
+  return jsx("div", {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.menuItemMainContent, styles.ellipsis, className),
+    children: children || jsxs(Fragment, {
+      children: [jsx(Text, {
+        as: "span",
+        className: styles.ellipsis,
+        variant: labelVariant,
+        children: label
+      }), caption ? jsx("div", {
+        className: styles.ellipsis,
+        children: jsx(Text, {
+          as: "span",
+          color: "textOnLightSecondary",
+          variant: "caption",
+          children: caption
+        })
+      }) : null]
+    })
+  });
+});
+/**
+ * Start element of an Item, dedicated for icons.
+ */
+const MenuItemStartElement = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  icon,
+  ...rest
+}, ref) => {
+  const {
+    internalSize
+  } = useMenuItemVariant();
+  const iconSize = internalSize === 'medium' ? Size8 : Size4;
+  return jsxs("div", {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.startElement, className),
+    children: [icon && /*#__PURE__*/createElement(icon, {
+      className: styles.icon,
+      height: iconSize,
+      width: iconSize,
+      role: 'presentation'
+    }), children]
+  });
+});
+/**
+ * End element of an Item, dedicated for additional text and icons.
+ */
+const MenuItemEndElement = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, ref) => {
+  return jsx("div", {
+    ...rest,
+    ref: ref,
+    className: styles.endElement,
+    children: children
+  });
+});
+const DropdownMenuItem = Object.assign(DropdownMenuItemBase, {
+  StartElement: MenuItemStartElement,
+  MainContent: MenuItemMainContent,
+  EndElement: MenuItemEndElement
+});
 DropdownMenuItem.displayName = 'DropdownMenuItem';
 
-export { DropdownMenuItem };
+export { DropdownMenuItem, MenuItemEndElement, MenuItemMainContent, MenuItemStartElement };

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

@@ -6,6 +6,7 @@ import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
+import { useMenuItemVariant } from './menu-item-variant-context.js';
 
 /**
  * Based on Radix-UI RadioItem
@@ -17,6 +18,11 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
     children,
     ...rest
   } = props;
+  const {
+    internalSize
+  } = useMenuItemVariant();
+  const isSizeSmall = internalSize === 'small';
+  const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
   const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsxs(DropdownMenuPrimitive.RadioItem, {
     ...rest,
@@ -29,12 +35,14 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
       className: styles.checkmark,
       children: jsx(Checkmark, {
         color: Gray100,
-        height: "1rem",
+        height: checkmarkSize,
         role: "presentation",
-        width: "1rem"
+        width: checkmarkSize
       })
     }), jsx("span", {
-      className: styles.ellipsis,
+      className: clsx(styles.ellipsis, {
+        [styles.radioItemMediumSpacing]: !isSizeSmall
+      }),
       children: children ?? value
     })]
   });

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-root.d.ts

@@ -1,6 +1,8 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { type Size } from './menu-item-variant-context';
 export type DropdownMenuRootProps = DropdownMenuPrimitive.DropdownMenuProps & {
     isFullScreenEnabled?: boolean;
+    menuItemsSize?: Size;
 };
 /**
  * The Dropdown-menu component displays a menu to the user, such as a set of actions or functions—triggered by a button.

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

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { useControllableState } from '../../utils/useControllableState.js';
 import { FullScreenMenuProvider } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
+import { MenuItemVariantProvider } from './menu-item-variant-context.js';
 
 /**
  * The Dropdown-menu component displays a menu to the user, such as a set of actions or functions—triggered by a button.
@@ -13,6 +14,7 @@ const DropdownMenuRoot = props => {
     open,
     onOpenChange,
     defaultOpen,
+    menuItemsSize,
     ...rest
   } = props;
   const [isMenuOpen = false, setIsMenuOpen] = useControllableState({
@@ -20,15 +22,18 @@ const DropdownMenuRoot = props => {
     onChange: onOpenChange,
     defaultProp: defaultOpen
   });
-  return jsx(FullScreenMenuProvider, {
-    isFullScreenEnabled: isFullScreenEnabled,
-    isMenuOpen: isMenuOpen,
-    setIsMenuOpen: setIsMenuOpen,
-    children: jsx(DropdownMenuPrimitive.Root, {
-      ...rest,
-      onOpenChange: setIsMenuOpen,
-      open: isMenuOpen,
-      children: children
+  return jsx(MenuItemVariantProvider, {
+    size: menuItemsSize,
+    children: jsx(FullScreenMenuProvider, {
+      isFullScreenEnabled: isFullScreenEnabled,
+      isMenuOpen: isMenuOpen,
+      setIsMenuOpen: setIsMenuOpen,
+      children: jsx(DropdownMenuPrimitive.Root, {
+        ...rest,
+        onOpenChange: setIsMenuOpen,
+        open: isMenuOpen,
+        children: children
+      })
     })
   });
 };

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--cf0e6","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--cf0e6","subheader":"bp_dropdown_menu_module_subheader--cf0e6","uppercased":"bp_dropdown_menu_module_uppercased--cf0e6","ellipsis":"bp_dropdown_menu_module_ellipsis--cf0e6","checkmark":"bp_dropdown_menu_module_checkmark--cf0e6","item":"bp_dropdown_menu_module_item--cf0e6","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--cf0e6","radioItem":"bp_dropdown_menu_module_radioItem--cf0e6","checkboxItem":"bp_dropdown_menu_module_checkboxItem--cf0e6","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--cf0e6","menuHeader":"bp_dropdown_menu_module_menuHeader--cf0e6","headerTextContent":"bp_dropdown_menu_module_headerTextContent--cf0e6","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--cf0e6","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--cf0e6"};
+var styles = {"content":"bp_dropdown_menu_module_content--87356","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--87356","subheader":"bp_dropdown_menu_module_subheader--87356","uppercased":"bp_dropdown_menu_module_uppercased--87356","ellipsis":"bp_dropdown_menu_module_ellipsis--87356","checkmark":"bp_dropdown_menu_module_checkmark--87356","item":"bp_dropdown_menu_module_item--87356","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--87356","radioItem":"bp_dropdown_menu_module_radioItem--87356","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--87356","checkboxItem":"bp_dropdown_menu_module_checkboxItem--87356","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--87356","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--87356","startElement":"bp_dropdown_menu_module_startElement--87356","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--87356","endElement":"bp_dropdown_menu_module_endElement--87356","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--87356","menuHeader":"bp_dropdown_menu_module_menuHeader--87356","headerTextContent":"bp_dropdown_menu_module_headerTextContent--87356","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--87356","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--87356"};
 
 export { styles as default };

package/dist/lib-esm/primitives/dropdown-menu/index.d.ts

@@ -9,7 +9,11 @@ export declare const DropdownMenu: {
     RadioSelectItem: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuRadioItemProps & import("react").RefAttributes<HTMLDivElement>>;
     CheckboxItem: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuCheckboxItemProps & import("react").RefAttributes<HTMLDivElement>>;
     Content: import("react").ForwardRefExoticComponent<import("./dropdown-menu-content").DropdownMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
-    Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps & import("react").RefAttributes<HTMLDivElement>> & {
+        StartElement: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-item").MenuItemStartElementProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        MainContent: import("react").ForwardRefExoticComponent<(Omit<Required<Pick<import("./dropdown-menu-item").MenuItemMainContentBaseProps, "label">> & Partial<Record<"children", never>> & Omit<import("./dropdown-menu-item").MenuItemMainContentBaseProps, "label" | "children">, "ref"> | Omit<Required<Pick<import("./dropdown-menu-item").MenuItemMainContentBaseProps, "children">> & Partial<Record<"label", never>> & Omit<import("./dropdown-menu-item").MenuItemMainContentBaseProps, "label" | "children">, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
+        EndElement: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    };
     Separator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
     SubMenuRoot: {
         (props: import("./dropdown-menu-sub-menu-root").DropdownMenuSubMenuRootProps): import("react/jsx-runtime").JSX.Element;
@@ -31,7 +35,7 @@ export declare const DropdownMenu: {
     SubHeader: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;
 };
 export { type DropdownMenuContentProps } from './dropdown-menu-content';
-export { type DropdownMenuItemProps } from './dropdown-menu-item';
+export { type DropdownMenuItemProps, type MenuItemEndElementProps, type MenuItemMainContentProps, type MenuItemStartElementProps, } from './dropdown-menu-item';
 export { type DropdownMenuRadioGroupProps } from './dropdown-menu-radio-group';
 export { type DropdownMenuRadioSelectItemProps } from './dropdown-menu-radio-select-item';
 export { type DropdownMenuRootProps } from './dropdown-menu-root';

package/dist/lib-esm/primitives/dropdown-menu/menu-item-variant-context.d.ts

@@ -0,0 +1,13 @@
+import React, { type ReactNode } from 'react';
+export type Size = 'small' | 'medium';
+interface MenuItemVariantContextProps {
+    internalSize: Size;
+    setInternalSize: React.Dispatch<React.SetStateAction<Size>>;
+}
+interface MenuItemVariantProviderProps {
+    children: ReactNode;
+    size?: Size;
+}
+export declare const MenuItemVariantProvider: ({ children, size }: MenuItemVariantProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useMenuItemVariant: () => MenuItemVariantContextProps;
+export {};

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

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useMemo } from 'react';
+
+const MenuItemVariantContext = /*#__PURE__*/createContext(null);
+const MenuItemVariantProvider = ({
+  children,
+  size = 'small'
+}) => {
+  const [internalSize, setInternalSize] = useState(size);
+  const value = useMemo(() => ({
+    internalSize,
+    setInternalSize
+  }), [internalSize, setInternalSize]);
+  return jsx(MenuItemVariantContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useMenuItemVariant = () => {
+  const context = useContext(MenuItemVariantContext);
+  if (context === null) {
+    throw new Error('useMenuItemVariant must be used within a MenuItemVariantProvider');
+  }
+  return context;
+};
+
+export { MenuItemVariantProvider, useMenuItemVariant };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "11.8.3",
+    "version": "11.9.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -66,13 +66,13 @@
         "@radix-ui/react-toggle-group": "1.0.4",
         "@radix-ui/react-toolbar": "1.0.4",
         "@radix-ui/react-tooltip": "1.0.7",
-        "@react-aria/i18n": "^3.12.7",
-        "@react-aria/utils": "^3.28.1",
+        "@react-aria/i18n": "3.12.7",
+        "@react-aria/utils": "3.28.1",
         "clsx": "^1.2.1",
         "color": "2.0.1",
         "lodash": "^4.17.15",
-        "react-aria": "^3.38.1",
-        "react-aria-components": "^1.7.1",
+        "react-aria": "3.38.1",
+        "react-aria-components": "1.7.1",
         "tabbable": "^4.0.0",
         "type-fest": "^3.2.0"
     },