@box/blueprint-web 11.0.3 → 11.1.1

package/dist/lib-esm/index.css

@@ -2737,7 +2737,7 @@
   transform:translateZ(0);
 }
 
-.bp_dropdown_menu_module_content--4926a{
+.bp_dropdown_menu_module_content--8752a{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -2749,7 +2749,7 @@
   font-weight:400;
   letter-spacing:.01875rem;
   line-height:1.25rem;
-  max-height:var(--blueprint-web-dropdown-menu-max-height, var(--radix-dropdown-menu-content-available-height));
+  max-height:min(var(--blueprint-web-dropdown-menu-max-height, var(--radix-dropdown-menu-content-available-height)), var(--radix-dropdown-menu-content-available-height));
   max-width:min(var(--blueprint-web-dropdown-content-max-width, 50vw), var(--radix-dropdown-menu-content-available-width));
   min-width:var(--blueprint-web-dropdown-content-min-width);
   overflow-y:auto;
@@ -2758,7 +2758,7 @@
   text-transform:none;
   z-index:2147483647;
 }
-.bp_dropdown_menu_module_content--4926a[data-menu-fullscreen=true]{
+.bp_dropdown_menu_module_content--8752a[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -2771,18 +2771,24 @@
   position:relative;
   width:100vw;
 }
-.bp_dropdown_menu_module_content--4926a[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--4926a{
+.bp_dropdown_menu_module_content--8752a[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--8752a{
   overflow-y:auto;
   padding:var(--space-3);
 }
+.bp_dropdown_menu_module_content--8752a .bp_dropdown_menu_module_subheader--8752a{
+  padding:var(--space-2);
+}
+.bp_dropdown_menu_module_content--8752a .bp_dropdown_menu_module_subheader--8752a.bp_dropdown_menu_module_uppercased--8752a{
+  text-transform:uppercase;
+}
 
-.bp_dropdown_menu_module_ellipsis--4926a{
+.bp_dropdown_menu_module_ellipsis--8752a{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_dropdown_menu_module_checkmark--4926a{
+.bp_dropdown_menu_module_checkmark--8752a{
   align-items:center;
   display:inline-flex;
   justify-content:center;
@@ -2790,7 +2796,7 @@
   position:absolute;
 }
 
-.bp_dropdown_menu_module_item--4926a,.bp_dropdown_menu_module_subMenuTrigger--4926a{
+.bp_dropdown_menu_module_item--8752a,.bp_dropdown_menu_module_subMenuTrigger--8752a{
   align-items:center;
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
@@ -2802,30 +2808,30 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_dropdown_menu_module_item--4926a[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--4926a[data-disabled]{
+.bp_dropdown_menu_module_item--8752a[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--8752a[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_dropdown_menu_module_item--4926a[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--4926a[data-highlighted]{
+.bp_dropdown_menu_module_item--8752a[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--8752a[data-highlighted]{
   background-color:var(--surface-menu-surface-hover);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_dropdown_menu_module_item--4926a:active,.bp_dropdown_menu_module_subMenuTrigger--4926a:active{
+.bp_dropdown_menu_module_item--8752a:active,.bp_dropdown_menu_module_subMenuTrigger--8752a:active{
   background-color:var(--surface-menu-surface-hover);
   border:var(--border-2) solid #0000;
 }
-.bp_dropdown_menu_module_item--4926a:hover,.bp_dropdown_menu_module_item--4926a[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--4926a:hover,.bp_dropdown_menu_module_subMenuTrigger--4926a[data-state=open]{
+.bp_dropdown_menu_module_item--8752a:hover,.bp_dropdown_menu_module_item--8752a[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--8752a:hover,.bp_dropdown_menu_module_subMenuTrigger--8752a[data-state=open]{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_dropdown_menu_module_item--4926a.bp_dropdown_menu_module_checkboxItem--4926a,.bp_dropdown_menu_module_item--4926a.bp_dropdown_menu_module_radioItem--4926a,.bp_dropdown_menu_module_subMenuTrigger--4926a.bp_dropdown_menu_module_checkboxItem--4926a,.bp_dropdown_menu_module_subMenuTrigger--4926a.bp_dropdown_menu_module_radioItem--4926a{
+.bp_dropdown_menu_module_item--8752a.bp_dropdown_menu_module_checkboxItem--8752a,.bp_dropdown_menu_module_item--8752a.bp_dropdown_menu_module_radioItem--8752a,.bp_dropdown_menu_module_subMenuTrigger--8752a.bp_dropdown_menu_module_checkboxItem--8752a,.bp_dropdown_menu_module_subMenuTrigger--8752a.bp_dropdown_menu_module_radioItem--8752a{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
 
-.bp_dropdown_menu_module_dropdownMenuItemSeparator--4926a{
+.bp_dropdown_menu_module_dropdownMenuItemSeparator--8752a{
   margin-block:var(--space-2);
 }
 
-.bp_dropdown_menu_module_menuHeader--4926a{
+.bp_dropdown_menu_module_menuHeader--8752a{
   align-items:center;
   box-shadow:var(--dropshadow-1);
   display:grid;
@@ -2835,15 +2841,15 @@
   padding:var(--space-3);
 }
 
-.bp_dropdown_menu_module_headerTextContent--4926a{
+.bp_dropdown_menu_module_headerTextContent--8752a{
   display:grid;
 }
 
-.bp_dropdown_menu_module_submenuCloseButton--4926a{
+.bp_dropdown_menu_module_submenuCloseButton--8752a{
   grid-area:submenu-close;
 }
 
-.bp_dropdown_menu_module_menuCloseButton--4926a{
+.bp_dropdown_menu_module_menuCloseButton--8752a{
   grid-area:close;
 }
 

package/dist/lib-esm/list-item/index.js

@@ -24,6 +24,7 @@ import '../primitives/dropdown-menu/dropdown-menu-sub-menu-content.js';
 import '../primitives/dropdown-menu/dropdown-menu-sub-menu-root.js';
 import '../primitives/dropdown-menu/dropdown-menu-sub-menu-trigger.js';
 import '../primitives/dropdown-menu/dropdown-menu-trigger.js';
+import '../primitives/dropdown-menu/dropdown-menu-sub-header.js';
 
 const Cell = Cell$1;
 

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Space2, Space4 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, Children, isValidElement } from 'react';
@@ -22,6 +23,8 @@ const sortMenuChildren = children => {
     OtherChildren: []
   });
 };
+const DEFAULT_COLLISION_PADDING = parseInt(Space4, 10);
+const SIDE_OFFSET = parseInt(Space2, 10);
 /**
  * Based on Radix-UI Content
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#content
@@ -30,6 +33,7 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     children,
     container,
+    collisionPadding = DEFAULT_COLLISION_PADDING,
     className,
     ...rest
   } = props;
@@ -63,8 +67,8 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         ...rest,
         ref: forwardedRef,
         className: clsx(styles.content, className),
-        // TODO: Change a number to a token
-        sideOffset: 8,
+        collisionPadding: collisionPadding,
+        sideOffset: SIDE_OFFSET,
         children: children
       })
     })

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

@@ -0,0 +1,3 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export type DropdownMenuSubheaderProps = DropdownMenuPrimitive.DropdownMenuLabelProps;
+export declare const DropdownMenuSubHeader: import("react").ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuLabelProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-header.js

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import { Text } from '../../text/text.js';
+import styles from './dropdown-menu.module.js';
+
+const DropdownMenuSubHeader = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  return jsx(DropdownMenuPrimitive.Label, {
+    ...rest,
+    ref: forwardedRef,
+    children: jsx(Text, {
+      as: "div",
+      className: clsx(styles.ellipsis, styles.subheader, styles.uppercased, className),
+      color: "textOnLightSecondary",
+      variant: "label",
+      children: children
+    })
+  });
+});
+DropdownMenuSubHeader.displayName = 'DropdownMenuSubHeader';
+
+export { DropdownMenuSubHeader };

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

@@ -1,4 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { Space3, Space4 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
@@ -6,6 +7,8 @@ import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScre
 import { sortMenuChildren } from './dropdown-menu-content.js';
 import styles from './dropdown-menu.module.js';
 
+const DEFAULT_COLLISION_PADDING = parseInt(Space4, 10);
+const SIDE_OFFSET = parseInt(Space3, 10);
 /**
  * Based on Radix-UI Sub Content
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#subcontent
@@ -14,6 +17,7 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
   const {
     children,
     container,
+    collisionPadding = DEFAULT_COLLISION_PADDING,
     className,
     ...rest
   } = props;
@@ -51,7 +55,8 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
         ...rest,
         ref: forwardedRef,
         className: clsx(styles.content, className),
-        sideOffset: 12,
+        collisionPadding: collisionPadding,
+        sideOffset: SIDE_OFFSET,
         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--4926a","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--4926a","ellipsis":"bp_dropdown_menu_module_ellipsis--4926a","checkmark":"bp_dropdown_menu_module_checkmark--4926a","item":"bp_dropdown_menu_module_item--4926a","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--4926a","radioItem":"bp_dropdown_menu_module_radioItem--4926a","checkboxItem":"bp_dropdown_menu_module_checkboxItem--4926a","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--4926a","menuHeader":"bp_dropdown_menu_module_menuHeader--4926a","headerTextContent":"bp_dropdown_menu_module_headerTextContent--4926a","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--4926a","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--4926a"};
+var styles = {"content":"bp_dropdown_menu_module_content--8752a","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--8752a","subheader":"bp_dropdown_menu_module_subheader--8752a","uppercased":"bp_dropdown_menu_module_uppercased--8752a","ellipsis":"bp_dropdown_menu_module_ellipsis--8752a","checkmark":"bp_dropdown_menu_module_checkmark--8752a","item":"bp_dropdown_menu_module_item--8752a","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--8752a","radioItem":"bp_dropdown_menu_module_radioItem--8752a","checkboxItem":"bp_dropdown_menu_module_checkboxItem--8752a","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--8752a","menuHeader":"bp_dropdown_menu_module_menuHeader--8752a","headerTextContent":"bp_dropdown_menu_module_headerTextContent--8752a","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--8752a","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--8752a"};
 
 export { styles as default };

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

@@ -28,6 +28,7 @@ export declare const DropdownMenu: {
             subtitle?: string;
         } & import("react").RefAttributes<HTMLDivElement>>;
     };
+    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';

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

@@ -11,6 +11,7 @@ import { DropdownMenuSubMenuContent } from './dropdown-menu-sub-menu-content.js'
 import { DropdownMenuSubMenuRoot } from './dropdown-menu-sub-menu-root.js';
 import { DropdownMenuSubMenuTrigger } from './dropdown-menu-sub-menu-trigger.js';
 import { DropdownMenuTrigger } from './dropdown-menu-trigger.js';
+import { DropdownMenuSubHeader } from './dropdown-menu-sub-header.js';
 
 const DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -25,7 +26,8 @@ const DropdownMenu = {
   SubMenuRoot: DropdownMenuSubMenuRoot,
   SubMenuTrigger: DropdownMenuSubMenuTrigger,
   SubMenuContent: DropdownMenuSubMenuContent,
-  Header: DropdownMenuHeader
+  Header: DropdownMenuHeader,
+  SubHeader: DropdownMenuSubHeader
 };
 
 export { DropdownMenu };

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

@@ -2,7 +2,7 @@ import { type HTMLAttributes, type LabelHTMLAttributes } from 'react';
 import { type StyledText } from '../utils/commonTypes';
 type TypographyVariant = 'titleMondo' | 'titleXLarge' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'subtitle' | 'bodyLargeBold' | 'bodyLarge' | 'bodyDefaultBold' | 'bodyDefaultSemibold' | 'bodyDefault' | 'caption' | 'labelBold' | 'label';
 type TypographyColors = 'textOnLightDefault' | 'textOnLightSecondary' | 'textOnLightLink' | 'textOnDarkDefault';
-type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend' | 'label';
+type Element = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'legend' | 'label' | 'div';
 interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
     as: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
@@ -18,8 +18,11 @@ interface LegendProps extends HTMLAttributes<HTMLLegendElement> {
 interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
     as: 'label';
 }
+interface DivProps extends HTMLAttributes<HTMLDivElement> {
+    as: 'div';
+}
 /** Supported HTML elements for text */
-export type ElementTypes = HeadingProps | ParagraphProps | LegendProps | SpanProps | LabelProps;
+export type ElementTypes = HeadingProps | ParagraphProps | LegendProps | SpanProps | LabelProps | DivProps;
 export type TextProps = {
     /** The HTML element type which will render */
     as: Element;

package/package.json

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