@box/blueprint-web 12.62.0 → 12.63.0

package/dist/lib-esm/index.css

@@ -4232,12 +4232,28 @@
   height:var(--border-1);
   margin-block:0;
 }
-.bp_menu_item_sections_module_menuItemMainContent--36b49{
+.bp_menu_item_sections_module_menuItemMainContent--d8163[data-modern=false]{
+  --menu-item-text-color:var(--text-text-on-light);
+}
+
+.bp_menu_item_sections_module_menuItemMainContent--d8163[data-modern=true]{
+  --menu-item-text-color:var(--bp-text-text-on-light);
+}
+
+.bp_menu_item_sections_module_menuItemSideContent--d8163[data-modern=false]{
+  --menu-item-text-color:var(--text-text-on-light-secondary);
+}
+
+.bp_menu_item_sections_module_menuItemSideContent--d8163[data-modern=true]{
+  --menu-item-text-color:var(--bp-text-text-on-light-secondary);
+}
+
+.bp_menu_item_sections_module_menuItemMainContent--d8163{
   display:flex;
   flex:1;
   flex-direction:column;
 }
-.bp_menu_item_sections_module_menuItemMainContent--36b49 .bp_menu_item_sections_module_label--36b49{
+.bp_menu_item_sections_module_menuItemMainContent--d8163 .bp_menu_item_sections_module_label--d8163{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -4247,7 +4263,7 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_menu_item_sections_module_menuItemMainContent--36b49 .bp_menu_item_sections_module_label--36b49.bp_menu_item_sections_module_bold--36b49{
+.bp_menu_item_sections_module_menuItemMainContent--d8163 .bp_menu_item_sections_module_label--d8163.bp_menu_item_sections_module_bold--d8163{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -4257,11 +4273,11 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_menu_item_sections_module_menuItemMainContent--36b49 .bp_menu_item_sections_module_description--36b49{
-  color:var(--text-text-on-light-secondary);
+.bp_menu_item_sections_module_menuItemMainContent--d8163 .bp_menu_item_sections_module_description--d8163{
+  color:var(--menu-item-text-color);
 }
 
-.bp_menu_item_sections_module_menuItemMainContent--36b49 .bp_menu_item_sections_module_description--36b49,.bp_menu_item_sections_module_menuItemSideContent--36b49{
+.bp_menu_item_sections_module_menuItemMainContent--d8163 .bp_menu_item_sections_module_description--d8163,.bp_menu_item_sections_module_menuItemSideContent--d8163{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -4272,12 +4288,12 @@
   text-transform:var(--body-default-text-case);
 }
 
-.bp_menu_item_sections_module_menuItemSideContent--36b49{
+.bp_menu_item_sections_module_menuItemSideContent--d8163{
   align-items:center;
   display:flex;
 }
-.bp_menu_item_sections_module_menuItemSideContent--36b49.bp_menu_item_sections_module_textOnLightSecondary--36b49{
-  color:var(--text-text-on-light-secondary);
+.bp_menu_item_sections_module_menuItemSideContent--d8163.bp_menu_item_sections_module_textOnLightSecondary--d8163{
+  color:var(--menu-item-text-color);
 }
 
 .bp_sticky_cell_module_stickyCell--98a29{
@@ -6963,18 +6979,81 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
   }
 }
 
-.bp_context_menu_module_menuBlock--d59c0{
-  background-color:var(--surface-menu-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--radius-3);
-  box-shadow:var(--dropshadow-3);
+.bp_context_menu_module_menuBlock--e8e64[data-modern=false]{
+  --context-menu-block-min-width:var(--blueprint-web-context-menu-min-width, 160px);
+  --context-menu-block-max-width:var(--blueprint-web-context-menu-max-width);
+  --context-menu-block-max-height:var(
+          --blueprint-web-context-menu-max-height,
+          var(--radix-context-menu-content-available-height)
+      );
+  --context-menu-block-padding:var(--space-3);
+  --context-menu-block-background-color:var(--surface-menu-surface);
+  --context-menu-block-backdrop-filter:none;
+  --context-menu-block-radius:var(--radius-3);
+  --context-menu-block-border:var(--border-1) solid var(--border-card-border);
+  --context-menu-block-shadow:var(--dropshadow-3);
+  --context-menu-item-gap:var(--space-4);
+  --context-menu-background-color:var(--surface-menu-surface);
+  --context-menu-fullscreen-content-padding:var(--space-3);
+  --context-menu-item-radius:var(--radius-3);
+  --context-menu-item-border:var(--border-2) solid #0000;
+  --context-menu-item-background-color-hover:var(--surface-menu-surface-focus);
+  --context-menu-item-background-color-pressed:var(--surface-menu-surface-focus);
+  --context-menu-item-focus-border:var(--border-2) solid var(--outline-focus-on-light);
+  --context-menu-item-padding:var(--space-2);
+  --context-menu-items-separator-margin:var(--space-2);
+}
+
+.bp_context_menu_module_menuBlock--e8e64[data-modern=true]{
+  --context-menu-block-min-width:var(--blueprint-web-context-menu-min-width, 160px);
+  --context-menu-block-max-width:var(--blueprint-web-context-menu-max-width);
+  --context-menu-block-max-height:var(
+          --blueprint-web-context-menu-max-height,
+          var(--radix-context-menu-content-available-height)
+      );
+  --context-menu-block-padding:var(--bp-space-030);
+  --context-menu-block-background-color:var(--bp-surface-menu-surface-dropdown);
+  --context-menu-block-backdrop-filter:blur(16px);
+  --context-menu-block-radius:var(--bp-radius-10);
+  --context-menu-block-border:var(--bp-border-01) solid var(--bp-border-menu-border);
+  --context-menu-block-shadow:var(--dropshadow-2);
+  --context-menu-item-gap:var(--bp-space-030);
+  --context-menu-background-color:#0000;
+  --context-menu-fullscreen-content-padding:var(--bp-space-030);
+  --context-menu-item-radius:var(--bp-radius-06);
+  --context-menu-item-border:var(--bp-border-02) solid #0000;
+  --context-menu-item-background-color-hover:var(--bp-surface-menu-item-surface-hover);
+  --context-menu-item-background-color-pressed:var(--bp-surface-menu-item-surface-pressed);
+  --context-menu-item-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --context-menu-item-padding:var(--bp-space-020);
+  --context-menu-items-separator-margin:var(--bp-space-020);
+}
+
+.bp_context_menu_module_menuHeader--e8e64[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--e8e64[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--e8e64{
+  backdrop-filter:var(--context-menu-block-backdrop-filter);
+  background-color:var(--context-menu-block-background-color);
+  border:var(--context-menu-block-border);
+  border-radius:var(--context-menu-block-radius);
+  box-shadow:var(--context-menu-block-shadow);
   box-sizing:border-box;
-  max-height:var(--blueprint-web-context-menu-max-height, var(--radix-context-menu-content-available-height));
-  max-width:var(--blueprint-web-context-menu-max-width);
-  min-width:var(--blueprint-web-context-menu-min-width, 160px);
-  padding:var(--space-3);
+  max-height:var(--context-menu-block-max-height);
+  max-width:var(--context-menu-block-max-width);
+  min-width:var(--context-menu-block-min-width);
+  padding:var(--context-menu-block-padding);
 }
-.bp_context_menu_module_menuBlock--d59c0[data-menu-fullscreen=true]{
+.bp_context_menu_module_menuBlock--e8e64[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -6987,41 +7066,40 @@ table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,
   position:relative;
   width:100vw;
 }
-.bp_context_menu_module_menuBlock--d59c0[data-menu-fullscreen=true] .bp_context_menu_module_fullScreenContent--d59c0{
+.bp_context_menu_module_menuBlock--e8e64[data-menu-fullscreen=true] .bp_context_menu_module_fullScreenContent--e8e64{
   overflow-y:auto;
-  padding:var(--space-3);
+  padding:var(--context-menu-fullscreen-content-padding);
 }
-.bp_context_menu_module_menuBlock--d59c0 .bp_context_menu_module_menuItemsSeparator--d59c0{
-  margin-block:var(--space-2);
-  margin-inline:var(--space-2);
+.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItemsSeparator--e8e64{
+  margin:var(--context-menu-items-separator-margin);
 }
-.bp_context_menu_module_menuBlock--d59c0 .bp_context_menu_module_menuItem--d59c0{
+.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64{
   align-items:center;
-  background-color:var(--surface-menu-surface);
-  border:var(--border-2) solid #0000;
-  border-radius:var(--radius-3);
+  background-color:var(--context-menu-background-color);
+  border:var(--context-menu-item-border);
+  border-radius:var(--context-menu-item-radius);
   cursor:pointer;
   display:flex;
-  gap:var(--space-4);
+  gap:var(--context-menu-item-gap);
   outline:none;
-  padding-block:var(--space-2);
-  padding-inline:var(--space-2);
+  padding-block:var(--context-menu-item-padding);
+  padding-inline:var(--context-menu-item-padding);
   position:relative;
 }
-.bp_context_menu_module_menuBlock--d59c0 .bp_context_menu_module_menuItem--d59c0[data-disabled]{
+.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_context_menu_module_menuBlock--d59c0 .bp_context_menu_module_menuItem--d59c0[data-highlighted]:not(:hover){
-  background-color:var(--surface-menu-surface-focus);
-  border:var(--border-2) solid var(--outline-focus-on-light);
+.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64[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--d59c0 .bp_context_menu_module_menuItem--d59c0:active{
-  background-color:var(--surface-menu-surface-focus);
-  border:var(--border-2) solid #0000;
+.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64:active{
+  background-color:var(--context-menu-item-background-color-pressed);
+  border:var(--context-menu-item-border);
 }
-.bp_context_menu_module_menuBlock--d59c0 .bp_context_menu_module_menuItem--d59c0:hover{
-  background-color:var(--surface-menu-surface-focus);
+.bp_context_menu_module_menuBlock--e8e64 .bp_context_menu_module_menuItem--e8e64:hover{
+  background-color:var(--context-menu-item-background-color-hover);
 }
 div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):has([data-menu-fullscreen=true]){
   height:100%;
@@ -7029,29 +7107,29 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:100%;
 }
 
-.bp_context_menu_module_menuHeader--d59c0{
+.bp_context_menu_module_menuHeader--e8e64{
   align-items:center;
-  box-shadow:var(--dropshadow-1);
+  box-shadow:var(--context-menu-header-shadow);
   display:grid;
-  gap:var(--space-2);
+  gap:var(--context-menu-header-gap);
   grid-template-areas:"submenu-close content close";
   grid-template-columns:auto minmax(0, 1fr) auto;
-  padding:var(--space-3);
+  padding:var(--context-menu-header-padding);
 }
 
-.bp_context_menu_module_headerTextContent--d59c0{
+.bp_context_menu_module_headerTextContent--e8e64{
   display:grid;
 }
 
-.bp_context_menu_module_submenuCloseButton--d59c0{
+.bp_context_menu_module_submenuCloseButton--e8e64{
   grid-area:submenu-close;
 }
 
-.bp_context_menu_module_menuCloseButton--d59c0{
+.bp_context_menu_module_menuCloseButton--e8e64{
   grid-area:close;
 }
 
-.bp_context_menu_module_ellipsis--d59c0{
+.bp_context_menu_module_ellipsis--e8e64{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
 import { forwardRef, Children, isValidElement } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
 import { ContextMenuHeader } from './context-menu-menu-header.js';
 import styles from './context-menu.module.js';
@@ -32,6 +33,9 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     className,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const {
     isMenuFullScreenEnabled
   } = useFullScreenContextMenu();
@@ -47,6 +51,7 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
         ref: forwardedRef,
         className: clsx(styles.menuBlock, className),
         "data-menu-fullscreen": true,
+        "data-modern": enableModernizedComponents,
         children: [Header, jsx("div", {
           className: styles.fullScreenContent,
           children: OtherChildren
@@ -60,6 +65,7 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
       ...rest,
       ref: forwardedRef,
       className: clsx(styles.menuBlock, className),
+      "data-modern": enableModernizedComponents,
       children: children
     })
   });

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

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { XMark, PointerChevronLeft } from '@box/blueprint-web-assets/icons/Fill';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Text } from '../../text/text.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import { IconButton } from '../icon-button/icon-button.js';
@@ -55,9 +56,13 @@ const MenuHeaderPrimitive = ({
   className,
   ...rest
 }) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx("div", {
     ...rest,
     className: clsx(styles.menuHeader, className),
+    "data-modern": enableModernizedComponents,
     role: "presentation",
     children: children
   });

package/dist/lib-esm/primitives/context-menu/context-menu-sub-menu-content.js

@@ -2,6 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
 import { sortMenuChildren } from './context-menu-menu-content.js';
 import styles from './context-menu.module.js';
@@ -19,6 +20,9 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
     className,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const {
     isMenuFullScreenEnabled
   } = useFullScreenContextMenu();
@@ -36,6 +40,7 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
         alignOffset: alignOffsetPx,
         className: clsx(styles.menuBlock, className),
         "data-menu-fullscreen": true,
+        "data-modern": enableModernizedComponents,
         // Prevents submenu from closing, when detects focus outside submenu in fullscreen mode,
         // while mouse is moving over submenu.
         onFocusOutside: preventDefault,
@@ -54,6 +59,7 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
       ref: forwardedRef,
       alignOffset: alignOffsetPx,
       className: clsx(styles.menuBlock, className),
+      "data-modern": enableModernizedComponents,
       sideOffset: sideOffsetPx,
       children: children
     })

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--d59c0","fullScreenContent":"bp_context_menu_module_fullScreenContent--d59c0","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--d59c0","menuItem":"bp_context_menu_module_menuItem--d59c0","menuHeader":"bp_context_menu_module_menuHeader--d59c0","headerTextContent":"bp_context_menu_module_headerTextContent--d59c0","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--d59c0","menuCloseButton":"bp_context_menu_module_menuCloseButton--d59c0","ellipsis":"bp_context_menu_module_ellipsis--d59c0"};
+var styles = {"menuBlock":"bp_context_menu_module_menuBlock--e8e64","menuHeader":"bp_context_menu_module_menuHeader--e8e64","fullScreenContent":"bp_context_menu_module_fullScreenContent--e8e64","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--e8e64","menuItem":"bp_context_menu_module_menuItem--e8e64","headerTextContent":"bp_context_menu_module_headerTextContent--e8e64","submenuCloseButton":"bp_context_menu_module_submenuCloseButton--e8e64","menuCloseButton":"bp_context_menu_module_menuCloseButton--e8e64","ellipsis":"bp_context_menu_module_ellipsis--e8e64"};
 
 export { styles as default };

package/dist/lib-esm/util-components/menu-item-sections/menu-item-sections.js

@@ -1,5 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './menu-item-sections.module.js';
 
 /**
@@ -10,11 +11,15 @@ const MenuItemSideContent = ({
   className,
   ...rest
 }) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx("div", {
     ...rest,
     className: clsx(styles.menuItemSideContent, {
       [styles.textOnLightSecondary]: typeof children === 'string'
     }, className),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 };
@@ -26,18 +31,24 @@ const MenuItemMainContent = ({
   label,
   description,
   ...rest
-}) => jsxs("div", {
-  ...rest,
-  className: clsx(styles.menuItemMainContent, className),
-  children: [jsx("span", {
-    className: clsx(styles.label, {
-      [styles.bold]: Boolean(description)
-    }),
-    children: label
-  }), description ? jsx("span", {
-    className: styles.description,
-    children: description
-  }) : null]
-});
+}) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  return jsxs("div", {
+    ...rest,
+    className: clsx(styles.menuItemMainContent, className),
+    "data-modern": enableModernizedComponents,
+    children: [jsx("span", {
+      className: clsx(styles.label, {
+        [styles.bold]: Boolean(description)
+      }),
+      children: label
+    }), description ? jsx("span", {
+      className: styles.description,
+      children: description
+    }) : null]
+  });
+};
 
 export { MenuItemMainContent, MenuItemSideContent };

package/dist/lib-esm/util-components/menu-item-sections/menu-item-sections.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"menuItemMainContent":"bp_menu_item_sections_module_menuItemMainContent--36b49","label":"bp_menu_item_sections_module_label--36b49","bold":"bp_menu_item_sections_module_bold--36b49","description":"bp_menu_item_sections_module_description--36b49","menuItemSideContent":"bp_menu_item_sections_module_menuItemSideContent--36b49","textOnLightSecondary":"bp_menu_item_sections_module_textOnLightSecondary--36b49"};
+var styles = {"menuItemMainContent":"bp_menu_item_sections_module_menuItemMainContent--d8163","menuItemSideContent":"bp_menu_item_sections_module_menuItemSideContent--d8163","label":"bp_menu_item_sections_module_label--d8163","bold":"bp_menu_item_sections_module_bold--d8163","description":"bp_menu_item_sections_module_description--d8163","textOnLightSecondary":"bp_menu_item_sections_module_textOnLightSecondary--d8163"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.62.0",
+    "version": "12.63.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {