@box/blueprint-web 11.8.4 → 11.10.0

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

@@ -67,12 +67,16 @@ const Item = props => {
   // TODO: [DSYS-549] Refactor - spread props in a single place
   const {
     status,
+    statusIcon,
+    statusIconAriaLabel,
     title,
     disabled,
     error,
     errorIconAriaLabel,
     ...itemRest
   } = props;
+  const hasStatusLabel = isDefined(status) && !isDefined(statusIcon);
+  const hasStatusIcon = !isDefined(status) && isDefined(statusIcon);
   return jsxs(RadixAccordion.Item, {
     ...itemRest,
     className: accordionItemClasses,
@@ -87,10 +91,17 @@ const Item = props => {
             children: title
           }), jsxs("div", {
             className: styles.accordionHeaderTrigger,
-            children: [isDefined(status) && jsx(Status, {
+            children: [hasStatusLabel && jsx(Status, {
               className: styles.accordionStatus,
               color: error ? statusColors.error : statusColors.default,
               text: `${status}`
+            }), hasStatusIcon && jsx(Status, {
+              "aria-label": statusIconAriaLabel,
+              className: styles.accordionIconStatus,
+              color: error ? statusColors.error : statusColors.default,
+              hideText: true,
+              icon: statusIcon,
+              text: statusIconAriaLabel ?? ''
             }), jsx(PointerChevron, {
               "aria-hidden": "true",
               className: styles.accordionTriggerIcon

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionContent":"bp_accordion_module_accordionContent--81227","slideDown":"bp_accordion_module_slideDown--81227","slideUp":"bp_accordion_module_slideUp--81227","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--81227","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--81227","accordionItem":"bp_accordion_module_accordionItem--81227","accordionFixedContent":"bp_accordion_module_accordionFixedContent--81227","accordionHeader":"bp_accordion_module_accordionHeader--81227","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--81227","accordionStatus":"bp_accordion_module_accordionStatus--81227","accordionTrigger":"bp_accordion_module_accordionTrigger--81227","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--81227"};
+var styles = {"accordionContent":"bp_accordion_module_accordionContent--a6dfe","slideDown":"bp_accordion_module_slideDown--a6dfe","slideUp":"bp_accordion_module_slideUp--a6dfe","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--a6dfe","accordionInlineErrorWrapper":"bp_accordion_module_accordionInlineErrorWrapper--a6dfe","accordionItem":"bp_accordion_module_accordionItem--a6dfe","accordionFixedContent":"bp_accordion_module_accordionFixedContent--a6dfe","accordionHeader":"bp_accordion_module_accordionHeader--a6dfe","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--a6dfe","accordionStatus":"bp_accordion_module_accordionStatus--a6dfe","accordionIconStatus":"bp_accordion_module_accordionIconStatus--a6dfe","accordionTrigger":"bp_accordion_module_accordionTrigger--a6dfe","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--a6dfe"};
 
 export { styles as default };

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

@@ -1,4 +1,5 @@
 import { type AccordionMultipleProps, type AccordionSingleProps, type AccordionItemProps as RadixAccordionItemProps } from '@radix-ui/react-accordion';
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
 interface Loading {
     /** Loading state of the section. Loading sections are displaying a placeholder. When this is true `loadingAriaLabel` must also be provided. */
@@ -16,6 +17,23 @@ interface Errorable {
      */
     errorIconAriaLabel?: string;
 }
+interface StatusIconProps {
+    /**
+     * Icon displayed in a status pill next to the title
+     * */
+    statusIcon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /**
+     * Description of icon displayed in a status pill next to the title
+     * */
+    statusIconAriaLabel: string;
+}
+type StatusProps = {
+    status: number;
+    statusIcon?: never;
+    statusIconAriaLabel?: never;
+} | ({
+    status?: never;
+} & RequireAllOrNone<StatusIconProps, keyof StatusIconProps>);
 export type AccordionBaseItem = {
     /**
      * Content of the accordion item that is displayed when the section is expanded
@@ -33,15 +51,11 @@ export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemPr
      * Header text displayed
      */
     title: string;
-    /**
-     * Number displayed in a status pill next to the title
-     * */
-    status?: number;
     /**
      * Disabled state of the section.
      */
     disabled?: boolean;
-};
+} & StatusProps;
 export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
 export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
 export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;

package/dist/lib-esm/guided-tooltip/guided-tooltip-footer.js

@@ -6,11 +6,15 @@ import { getUniqueId } from '../utils/useUniqueId.js';
 import styles from './guided-tooltip.module.js';
 import { useGuidedTooltipContext } from './utils/guided-tooltip-context.js';
 
-const PrimaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(Button, {
-  ...props,
+const PrimaryAction = /*#__PURE__*/forwardRef(({
+  autoFocus = true,
+  className,
+  ...rest
+}, forwardedRef) => jsx(Button, {
+  ...rest,
   ref: forwardedRef,
-  autoFocus: true,
-  className: clsx(styles.primaryAction, props.className)
+  autoFocus: autoFocus,
+  className: clsx(styles.primaryAction, className)
 }));
 const SecondaryAction = /*#__PURE__*/forwardRef((props, forwardedRef) => jsx(Button, {
   ...props,

package/dist/lib-esm/guided-tooltip/guided-tooltip.js

@@ -5,6 +5,7 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useCallback, useState, useMemo } from 'react';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
+import { focusRadioGroupFirstIfExists } from '../primitives/popover/popover-focus-utils.js';
 import { GuidedTooltipBody, GuidedTooltipText } from './guided-tooltip-body.js';
 import { GuidedTooltipFooter } from './guided-tooltip-footer.js';
 import { GuidedTooltipIcon } from './guided-tooltip-icon.js';
@@ -21,6 +22,7 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
   closeLabel,
   content,
   closeDataResinTarget = 'dismiss',
+  onOpenAutoFocus,
   side = 'bottom',
   sideOffset = OFFSET_FROM_ANCHOR_IN_PX,
   ...rest
@@ -46,6 +48,14 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
    * It also needs to consist of an id of the "steps indicator" element if it's present
    */
   const ariaLabelledbyAttr = clsx(titleId || bodyId, stepsIndicatorId);
+  // Workaround for: https://github.com/radix-ui/primitives/issues/1910
+  const handleOpenAutoFocus = useCallback(e => {
+    onOpenAutoFocus?.(e);
+    if (e.defaultPrevented) {
+      return;
+    }
+    focusRadioGroupFirstIfExists(e);
+  }, [onOpenAutoFocus]);
   return jsx(GuidedTooltipContext.Provider, {
     value: contextProviderValue,
     children: jsxs(RadixPopover.Content, {
@@ -56,6 +66,7 @@ const GuidedTooltipContent = /*#__PURE__*/forwardRef(({
       arrowPadding: ARROW_PADDING_IN_PX,
       className: clsx(styles.content, className),
       onInteractOutside: onInteractOutside,
+      onOpenAutoFocus: handleOpenAutoFocus,
       side: side,
       sideOffset: sideOffset,
       children: [content, jsx(RadixPopover.Close, {

package/dist/lib-esm/guided-tooltip/types.d.ts

@@ -15,6 +15,10 @@ export interface GuidedTooltipContentProps extends Omit<React.HTMLAttributes<HTM
      * "data-resin-target" to be passed to Close button.
      */
     closeDataResinTarget?: string;
+    /**
+     * Optional callback triggered when the GuidedTooltip is about to receive focus after opening
+     */
+    onOpenAutoFocus?: RadixPopover.PopoverContentProps['onOpenAutoFocus'];
     /** The preferred side of the anchor to render against. Will be reversed when collisions occur.
      * "top" | "right" | "bottom" | "left"
      * Default value: "bottom". */

package/dist/lib-esm/index.css

@@ -522,19 +522,19 @@
   background-color:#92e0c0;
 }
 
-.bp_accordion_module_accordionContent--81227[data-state=open]{
-  animation:bp_accordion_module_slideDown--81227 .15s ease-out;
+.bp_accordion_module_accordionContent--a6dfe[data-state=open]{
+  animation:bp_accordion_module_slideDown--a6dfe .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--81227[data-state=closed]{
-  animation:bp_accordion_module_slideUp--81227 .15s ease-out;
+.bp_accordion_module_accordionContent--a6dfe[data-state=closed]{
+  animation:bp_accordion_module_slideUp--a6dfe .15s ease-out;
 }
 
-.bp_accordion_module_accordionContent--81227{
+.bp_accordion_module_accordionContent--a6dfe{
   overflow:hidden;
 }
 
-@keyframes bp_accordion_module_slideDown--81227{
+@keyframes bp_accordion_module_slideDown--a6dfe{
   from{
     height:0;
   }
@@ -542,7 +542,7 @@
     height:var(--radix-accordion-content-height);
   }
 }
-@keyframes bp_accordion_module_slideUp--81227{
+@keyframes bp_accordion_module_slideUp--a6dfe{
   from{
     height:var(--radix-accordion-content-height);
   }
@@ -550,7 +550,7 @@
     height:0;
   }
 }
-.bp_accordion_module_accordionContentWrapper--81227{
+.bp_accordion_module_accordionContentWrapper--a6dfe{
   display:flex;
   flex-direction:column;
   gap:var(--space-4);
@@ -559,20 +559,20 @@
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionInlineErrorWrapper--81227{
+.bp_accordion_module_accordionInlineErrorWrapper--a6dfe{
   padding-block-start:var(--space-4);
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionItem--81227{
+.bp_accordion_module_accordionItem--a6dfe{
   border-bottom:var(--border-1) solid var(--border-divider-border);
   min-width:320px;
 }
-.bp_accordion_module_accordionItem--81227,.bp_accordion_module_accordionItem--81227 > [data-state=open]{
+.bp_accordion_module_accordionItem--a6dfe,.bp_accordion_module_accordionItem--a6dfe > [data-state=open]{
   background-color:var(--surface-accordion-surface);
 }
 
-.bp_accordion_module_accordionFixedContent--81227{
+.bp_accordion_module_accordionFixedContent--a6dfe{
   background-color:var(--surface-surface);
   display:flex;
   flex-direction:column;
@@ -581,7 +581,7 @@
   padding-inline:var(--space-4);
 }
 
-.bp_accordion_module_accordionHeader--81227{
+.bp_accordion_module_accordionHeader--a6dfe{
   color:var(--text-text-on-light);
   display:flex;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -597,16 +597,19 @@
   width:100%;
 }
 
-.bp_accordion_module_accordionHeaderTrigger--81227{
+.bp_accordion_module_accordionHeaderTrigger--a6dfe{
   align-items:center;
   display:flex;
 }
 
-.bp_accordion_module_accordionStatus--81227{
+.bp_accordion_module_accordionIconStatus--a6dfe,.bp_accordion_module_accordionStatus--a6dfe{
   margin-inline-start:var(--space-2);
 }
+.bp_accordion_module_accordionIconStatus--a6dfe > span{
+  padding:0 var(--space-1);
+}
 
-.bp_accordion_module_accordionTrigger--81227{
+.bp_accordion_module_accordionTrigger--a6dfe{
   align-items:center;
   background-color:var(--surface-surface);
   border:none;
@@ -617,31 +620,31 @@
   text-transform:capitalize;
   width:100%;
 }
-.bp_accordion_module_accordionTrigger--81227:active{
+.bp_accordion_module_accordionTrigger--a6dfe:active{
   background-color:var(--surface-surface);
 }
-.bp_accordion_module_accordionTrigger--81227:hover{
+.bp_accordion_module_accordionTrigger--a6dfe:hover{
   background-color:var(--surface-accordion-surface-hover);
   cursor:pointer;
 }
-.bp_accordion_module_accordionTrigger--81227:focus-visible{
+.bp_accordion_module_accordionTrigger--a6dfe:focus-visible{
   background-color:var(--surface-surface-hover);
   box-shadow:inset 0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
 }
-.bp_accordion_module_accordionTrigger--81227:disabled{
+.bp_accordion_module_accordionTrigger--a6dfe:disabled{
   cursor:default;
   opacity:.3;
 }
-.bp_accordion_module_accordionTrigger--81227:disabled:hover{
+.bp_accordion_module_accordionTrigger--a6dfe:disabled:hover{
   background-color:var(--gray-white);
 }
-.bp_accordion_module_accordionTrigger--81227 .bp_accordion_module_accordionTriggerIcon--81227{
+.bp_accordion_module_accordionTrigger--a6dfe .bp_accordion_module_accordionTriggerIcon--a6dfe{
   color:var(--gray-50);
   flex-shrink:0;
   margin-inline-start:var(--space-3);
 }
-.bp_accordion_module_accordionTrigger--81227[data-state=open] .bp_accordion_module_accordionTriggerIcon--81227{
+.bp_accordion_module_accordionTrigger--a6dfe[data-state=open] .bp_accordion_module_accordionTriggerIcon--a6dfe{
   transform:rotate(180deg);
 }
 
@@ -2740,7 +2743,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 +2764,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 +2777,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 +2802,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 +2814,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 +2876,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.4",
+    "version": "11.10.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {