@box/blueprint-web 13.11.0 → 13.11.2

package/dist/lib-esm/index.css

@@ -9344,9 +9344,10 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
     padding:var(--chips-group-small-screen-padding);
   }
 }
-.bp_context_menu_module_menuBlock--747b4[data-modern=false]{
+.bp_context_menu_module_menuBlock--b9e5e[data-modern=false]{
   --context-menu-block-font-color:unset;
   --context-menu-block-min-width:var(--blueprint-web-context-menu-min-width, 160px);
+  --context-menu-end-element-color:var(--text-text-on-light-secondary);
   --context-menu-block-max-width:var(--blueprint-web-context-menu-max-width);
   --context-menu-block-max-height:var(
           --blueprint-web-context-menu-max-height,
@@ -9371,9 +9372,10 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   --context-menu-items-separator-margin:var(--space-2);
 }
 
-.bp_context_menu_module_menuBlock--747b4[data-modern=true]{
+.bp_context_menu_module_menuBlock--b9e5e[data-modern=true]{
   --context-menu-block-font-color:var(--bp-text-text-on-light);
   --context-menu-block-min-width:var(--blueprint-web-context-menu-min-width, 160px);
+  --context-menu-end-element-color:var(--bp-icon-icon-on-light-secondary);
   --context-menu-block-max-width:var(--blueprint-web-context-menu-max-width);
   --context-menu-block-max-height:var(
           --blueprint-web-context-menu-max-height,
@@ -9398,19 +9400,19 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   --context-menu-items-separator-margin:var(--bp-space-020);
 }
 
-.bp_context_menu_module_menuHeader--747b4[data-modern=false]{
+.bp_context_menu_module_menuHeader--b9e5e[data-modern=false]{
   --context-menu-header-padding:var(--space-3);
   --context-menu-header-gap:var(--space-2);
   --context-menu-header-shadow:var(--dropshadow-1);
 }
 
-.bp_context_menu_module_menuHeader--747b4[data-modern=true]{
+.bp_context_menu_module_menuHeader--b9e5e[data-modern=true]{
   --context-menu-header-padding:var(--bp-space-030) var(--bp-space-040);
   --context-menu-header-gap:var(--bp-space-030);
   --context-menu-header-shadow:var(--dropshadow-1);
 }
 
-.bp_context_menu_module_menuBlock--747b4{
+.bp_context_menu_module_menuBlock--b9e5e{
   backdrop-filter:var(--context-menu-block-backdrop-filter);
   background-color:var(--context-menu-block-background-color);
   border:var(--context-menu-block-border);
@@ -9423,7 +9425,7 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   min-width:var(--context-menu-block-min-width);
   padding:var(--context-menu-block-padding);
 }
-.bp_context_menu_module_menuBlock--747b4[data-menu-fullscreen=true]{
+.bp_context_menu_module_menuBlock--b9e5e[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -9436,14 +9438,14 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   position:relative;
   width:100vw;
 }
-.bp_context_menu_module_menuBlock--747b4[data-menu-fullscreen=true] .bp_context_menu_module_fullScreenContent--747b4{
+.bp_context_menu_module_menuBlock--b9e5e[data-menu-fullscreen=true] .bp_context_menu_module_fullScreenContent--b9e5e{
   overflow-y:auto;
   padding:var(--context-menu-fullscreen-content-padding);
 }
-.bp_context_menu_module_menuBlock--747b4 .bp_context_menu_module_menuItemsSeparator--747b4{
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_menuItemsSeparator--b9e5e{
   margin:var(--context-menu-items-separator-margin);
 }
-.bp_context_menu_module_menuBlock--747b4 .bp_context_menu_module_menuItem--747b4{
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_menuItem--b9e5e{
   align-items:center;
   background-color:var(--context-menu-background-color);
   border:var(--context-menu-item-border);
@@ -9456,32 +9458,41 @@ table.bp_inline_table_module_inlineTable--fc22e[data-modern=true] td:last-child,
   padding-inline:var(--context-menu-item-padding);
   position:relative;
 }
-.bp_context_menu_module_menuBlock--747b4 .bp_context_menu_module_menuItem--747b4[data-disabled]{
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_menuItem--b9e5e[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_context_menu_module_menuBlock--747b4 .bp_context_menu_module_menuItem--747b4[data-highlighted]:not(:hover){
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_menuItem--b9e5e[data-highlighted]:not(:hover){
   background-color:var(--context-menu-item-background-color-hover);
   border:var(--context-menu-item-focus-border);
 }
-.bp_context_menu_module_menuBlock--747b4 .bp_context_menu_module_menuItem--747b4[data-state=open][data-highlighted]:not(:hover){
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_menuItem--b9e5e[data-state=open][data-highlighted]:not(:hover){
   border:var(--context-menu-item-border);
 }
-.bp_context_menu_module_menuBlock--747b4 .bp_context_menu_module_menuItem--747b4:active{
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_menuItem--b9e5e:active{
   background-color:var(--context-menu-item-background-color-pressed);
   border:var(--context-menu-item-border);
 }
-.bp_context_menu_module_menuBlock--747b4 .bp_context_menu_module_menuItem--747b4:hover{
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_menuItem--b9e5e:hover{
   background-color:var(--context-menu-item-background-color-hover);
   border:var(--context-menu-item-border-hover);
 }
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_startElement--b9e5e{
+  align-items:center;
+  display:flex;
+}
+.bp_context_menu_module_menuBlock--b9e5e .bp_context_menu_module_endElement--b9e5e{
+  align-items:center;
+  color:var(--context-menu-end-element-color);
+  display:flex;
+}
 div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):has([data-menu-fullscreen=true]){
   height:100%;
   transform:none !important;
   width:100%;
 }
 
-.bp_context_menu_module_menuHeader--747b4{
+.bp_context_menu_module_menuHeader--b9e5e{
   align-items:center;
   box-shadow:var(--context-menu-header-shadow);
   display:grid;
@@ -9491,19 +9502,19 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding:var(--context-menu-header-padding);
 }
 
-.bp_context_menu_module_headerTextContent--747b4{
+.bp_context_menu_module_headerTextContent--b9e5e{
   display:grid;
 }
 
-.bp_context_menu_module_submenuCloseButton--747b4{
+.bp_context_menu_module_submenuCloseButton--b9e5e{
   grid-area:submenu-close;
 }
 
-.bp_context_menu_module_menuCloseButton--747b4{
+.bp_context_menu_module_menuCloseButton--b9e5e{
   grid-area:close;
 }
 
-.bp_context_menu_module_ellipsis--747b4{
+.bp_context_menu_module_ellipsis--b9e5e{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;

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

@@ -1,16 +1,30 @@
 import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { type ForwardRefExoticComponent, type RefAttributes, type SVGProps } from 'react';
 export type ContextMenuItemProps = ContextMenuPrimitive.ContextMenuItemProps;
+export interface ContextMenuItemStartElementProps extends React.ComponentProps<'div'> {
+    icon?: ForwardRefExoticComponent<Omit<SVGProps<SVGSVGElement>, 'ref'> & RefAttributes<SVGSVGElement>>;
+    children?: React.ReactNode;
+}
+export type ContextMenuItemEndElementProps = React.ComponentProps<'div'>;
 /**
  * Based on Radix-UI context menu [Item](https://www.radix-ui.com/docs/primitives/components/context-menu#item).<br>
- * Contains sub components: <b>Item.MainContent</b> and <b>Item.SideContent</b>.
+ * Contains sub components: <b>Item.StartElement</b>, <b>Item.MainContent</b>, <b>Item.EndElement</b> and <b>Item.SideContent</b>.
  */
-export declare const ContextMenuItem: import("react").ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuItemProps & import("react").RefAttributes<HTMLDivElement>> & {
+export declare const ContextMenuItem: ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuItemProps & RefAttributes<HTMLDivElement>> & {
     /**
-     * Container for side content of menu item.
+     * Start element of an Item, dedicated for icons.
      */
-    SideContent: ({ children, className, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemSideContentProps) => import("react/jsx-runtime").JSX.Element;
+    StartElement: ForwardRefExoticComponent<Omit<ContextMenuItemStartElementProps, "ref"> & RefAttributes<HTMLDivElement>>;
     /**
      * Text content of menu item.
      */
     MainContent: ({ className, label, description, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemMainContentProps) => import("react/jsx-runtime").JSX.Element;
+    /**
+     * End element of an Item, dedicated for additional text and icons.
+     */
+    EndElement: ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;
+    /**
+     * Container for side content of menu item.
+     */
+    SideContent: ({ children, className, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemSideContentProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,8 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Size4, bpIconIconOnLightSecondary, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
-import { forwardRef, useCallback } from 'react';
-import { MenuItemMainContent, MenuItemSideContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
+import { forwardRef, useCallback, createElement } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
+import { MenuItemSideContent, MenuItemMainContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
 import styles from './context-menu.module.js';
 
 const MenuItemRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -24,19 +26,67 @@ const MenuItemRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
 });
 MenuItemRoot.displayName = 'ContextMenuItem';
+/**
+ * Start element of an Item, dedicated for icons.
+ */
+const ContextMenuItemStartElement = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  icon,
+  ...rest
+}, ref) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  const iconColor = enableModernizedComponents ? bpIconIconOnLightSecondary : IconIconOnLightSecondary;
+  return jsxs("div", {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.startElement, className),
+    children: [icon && /*#__PURE__*/createElement(icon, {
+      color: iconColor,
+      height: Size4,
+      width: Size4,
+      role: 'presentation'
+    }), children]
+  });
+});
+/**
+ * End element of an Item, dedicated for additional text and icons.
+ */
+const ContextMenuItemEndElement = /*#__PURE__*/forwardRef(({
+  children,
+  className,
+  ...rest
+}, ref) => {
+  return jsx("div", {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.endElement, className),
+    children: children
+  });
+});
 /**
  * Based on Radix-UI context menu [Item](https://www.radix-ui.com/docs/primitives/components/context-menu#item).<br>
- * Contains sub components: <b>Item.MainContent</b> and <b>Item.SideContent</b>.
+ * Contains sub components: <b>Item.StartElement</b>, <b>Item.MainContent</b>, <b>Item.EndElement</b> and <b>Item.SideContent</b>.
  */
 const ContextMenuItem = Object.assign(MenuItemRoot, {
   /**
-   * Container for side content of menu item.
+   * Start element of an Item, dedicated for icons.
    */
-  SideContent: MenuItemSideContent,
+  StartElement: ContextMenuItemStartElement,
   /**
    * Text content of menu item.
    */
-  MainContent: MenuItemMainContent
+  MainContent: MenuItemMainContent,
+  /**
+   * End element of an Item, dedicated for additional text and icons.
+   */
+  EndElement: ContextMenuItemEndElement,
+  /**
+   * Container for side content of menu item.
+   */
+  SideContent: MenuItemSideContent
 });
 
 export { ContextMenuItem };

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

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"menuBlock":"bp_context_menu_module_menuBlock--747b4","menuHeader":"bp_context_menu_module_menuHeader--747b4","fullScreenContent":"bp_context_menu_module_fullScreenContent--747b4","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--747b4","menuItem":"bp_context_menu_module_menuItem--747b4","headerTextContent":"bp_context_menu_module_headerTextContent--747b4","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--747b4","menuCloseButton":"bp_context_menu_module_menuCloseButton--747b4","ellipsis":"bp_context_menu_module_ellipsis--747b4"};
+var styles = {"menuBlock":"bp_context_menu_module_menuBlock--b9e5e","menuHeader":"bp_context_menu_module_menuHeader--b9e5e","fullScreenContent":"bp_context_menu_module_fullScreenContent--b9e5e","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--b9e5e","menuItem":"bp_context_menu_module_menuItem--b9e5e","startElement":"bp_context_menu_module_startElement--b9e5e","endElement":"bp_context_menu_module_endElement--b9e5e","headerTextContent":"bp_context_menu_module_headerTextContent--b9e5e","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--b9e5e","menuCloseButton":"bp_context_menu_module_menuCloseButton--b9e5e","ellipsis":"bp_context_menu_module_ellipsis--b9e5e"};
 
 export { styles as default };

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

@@ -13,8 +13,10 @@ export declare const ContextMenu: {
     SubMenuContent: import("react").ForwardRefExoticComponent<import("./context-menu-sub-menu-content").ContextMenuSubMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
     ItemsSeparator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<HTMLHRElement>>;
     Item: import("react").ForwardRefExoticComponent<import("@radix-ui/react-context-menu").ContextMenuItemProps & import("react").RefAttributes<HTMLDivElement>> & {
-        SideContent: ({ children, className, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemSideContentProps) => import("react/jsx-runtime").JSX.Element;
+        StartElement: import("react").ForwardRefExoticComponent<Omit<import("./context-menu-item").ContextMenuItemStartElementProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
         MainContent: ({ className, label, description, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemMainContentProps) => import("react/jsx-runtime").JSX.Element;
+        EndElement: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+        SideContent: ({ children, className, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemSideContentProps) => import("react/jsx-runtime").JSX.Element;
     };
     Header: (({ children, className, ...rest }: import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
         MenuCloseButton: import("react").ForwardRefExoticComponent<Omit<import("./context-menu-menu-header").MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
@@ -25,7 +27,7 @@ export declare const ContextMenu: {
         } & import("react").RefAttributes<HTMLDivElement>>;
     };
 };
-export type { ContextMenuItemProps } from './context-menu-item';
+export type { ContextMenuItemProps, ContextMenuItemStartElementProps, ContextMenuItemEndElementProps, } from './context-menu-item';
 export type { ContextMenuMenuContentProps } from './context-menu-menu-content';
 export type { ContextMenuMenuRootProps } from './context-menu-menu-root';
 export type { ContextMenuMenuTriggerProps } from './context-menu-menu-trigger';

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Size8, Size4, bpIconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
+import { Size8, Size4, bpIconIconOnLightSecondary, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback, createElement } from 'react';
@@ -86,7 +86,7 @@ const MenuItemStartElement = /*#__PURE__*/forwardRef(({
     enableModernizedComponents
   } = useBlueprintModernization();
   const iconSize = internalSize === 'medium' ? Size8 : Size4;
-  const iconColor = enableModernizedComponents ? bpIconIconOnLightSecondary : undefined;
+  const iconColor = enableModernizedComponents ? bpIconIconOnLightSecondary : IconIconOnLightSecondary;
   return jsxs("div", {
     ...rest,
     ref: ref,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "13.11.0",
+    "version": "13.11.2",
     "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.111.0",
+        "@box/blueprint-web-assets": "^4.111.2",
         "@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.17.0",
+        "@box/storybook-utils": "^0.17.2",
         "@figma/code-connect": "1.3.12",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",