@box/blueprint-web 9.4.1 → 9.5.0

package/lib-esm/index.css

@@ -4036,7 +4036,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   }
 }
 
-.bp_dropdown_menu_module_content--291e5{
+.bp_dropdown_menu_module_content--00a5d{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -4057,14 +4057,31 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-transform:none;
   z-index:2147483647;
 }
+.bp_dropdown_menu_module_content--00a5d[data-menu-fullscreen=true]{
+  border:unset;
+  border-radius:unset;
+  display:flex;
+  flex-direction:column;
+  height:100vh;
+  max-height:none;
+  max-width:none;
+  overflow:hidden;
+  padding:unset;
+  position:relative;
+  width:100vw;
+}
+.bp_dropdown_menu_module_content--00a5d[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--00a5d{
+  overflow-y:auto;
+  padding:var(--space-3);
+}
 
-.bp_dropdown_menu_module_ellipsis--291e5{
+.bp_dropdown_menu_module_ellipsis--00a5d{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_dropdown_menu_module_checkmark--291e5{
+.bp_dropdown_menu_module_checkmark--00a5d{
   align-items:center;
   display:inline-flex;
   justify-content:center;
@@ -4072,36 +4089,63 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   position:absolute;
 }
 
-.bp_dropdown_menu_module_item--291e5,.bp_dropdown_menu_module_subMenuTrigger--291e5{
+.bp_dropdown_menu_module_item--00a5d,.bp_dropdown_menu_module_subMenuTrigger--00a5d{
   align-items:center;
   border:var(--border-2) solid #0000;
   border-radius:var(--radius-3);
   cursor:pointer;
   display:flex;
   outline:none;
-  padding:var(--border-8);
+  padding:calc(var(--border-8) - var(--border-2));
   position:relative;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_dropdown_menu_module_item--291e5[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--291e5[data-disabled]{
+.bp_dropdown_menu_module_item--00a5d[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--00a5d[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_dropdown_menu_module_item--291e5[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--291e5[data-highlighted]{
+.bp_dropdown_menu_module_item--00a5d[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--00a5d[data-highlighted]{
   background-color:var(--surface-menu-surface-hover);
   border:var(--border-2) solid var(--outline-focus-on-light);
 }
-.bp_dropdown_menu_module_item--291e5:hover,.bp_dropdown_menu_module_item--291e5[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--291e5:hover,.bp_dropdown_menu_module_subMenuTrigger--291e5[data-state=open]{
+.bp_dropdown_menu_module_item--00a5d:hover,.bp_dropdown_menu_module_item--00a5d[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--00a5d:hover,.bp_dropdown_menu_module_subMenuTrigger--00a5d[data-state=open]{
   background-color:var(--surface-menu-surface-hover);
 }
-.bp_dropdown_menu_module_item--291e5.bp_dropdown_menu_module_checkboxItem--291e5,.bp_dropdown_menu_module_item--291e5.bp_dropdown_menu_module_radioItem--291e5,.bp_dropdown_menu_module_subMenuTrigger--291e5.bp_dropdown_menu_module_checkboxItem--291e5,.bp_dropdown_menu_module_subMenuTrigger--291e5.bp_dropdown_menu_module_radioItem--291e5{
+.bp_dropdown_menu_module_item--00a5d.bp_dropdown_menu_module_checkboxItem--00a5d,.bp_dropdown_menu_module_item--00a5d.bp_dropdown_menu_module_radioItem--00a5d,.bp_dropdown_menu_module_subMenuTrigger--00a5d.bp_dropdown_menu_module_checkboxItem--00a5d,.bp_dropdown_menu_module_subMenuTrigger--00a5d.bp_dropdown_menu_module_radioItem--00a5d{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
 
-.bp_dropdown_menu_module_dropdownMenuItemSeparator--291e5{
+.bp_dropdown_menu_module_dropdownMenuItemSeparator--00a5d{
   margin-block:var(--space-2);
 }
+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_dropdown_menu_module_menuHeader--00a5d{
+  align-items:center;
+  box-shadow:var(--dropshadow-1);
+  display:grid;
+  gap:var(--space-2);
+  grid-template-areas:"submenu-close content close";
+  grid-template-columns:auto minmax(0, 1fr) auto;
+  padding:var(--space-3);
+}
+
+.bp_dropdown_menu_module_headerTextContent--00a5d{
+  display:grid;
+}
+
+.bp_dropdown_menu_module_submenuCloseButton--00a5d{
+  grid-area:submenu-close;
+}
+
+.bp_dropdown_menu_module_menuCloseButton--00a5d{
+  grid-area:close;
+}
 
 .bp_menu_item_sections_module_menuItemMainContent--c557e{
   display:flex;

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

@@ -20,6 +20,8 @@ export type FilterComboChipProps = DropdownMenuRootProps & {
     children: React.ReactNode;
 };
 export declare const FilterComboChip: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuProps & {
+    isFullScreenEnabled?: boolean;
+} & {
     /** FilterChip.Chip component used as Dropdown menu trigger. Trigger chip value is ignored from selection */
     chip: React.ReactElement;
     /** List of FilterChip.ComboOption elements displayed in the dropdown menu */

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

@@ -7,6 +7,8 @@ export declare const FilterChip: {
     Status: import("react").ForwardRefExoticComponent<Omit<import("../types").ChipStatusProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     DropdownIndicator: import("react").ForwardRefExoticComponent<import("react").RefAttributes<SVGSVGElement>>;
     ComboChip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuProps & {
+        isFullScreenEnabled?: boolean;
+    } & {
         chip: React.ReactElement;
         children: React.ReactNode;
     } & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/dropdown-menu/FullScreenMenuContext.d.ts

@@ -0,0 +1,16 @@
+import React, { type ReactNode } from 'react';
+interface FullScreenMenuContextProps {
+    isMenuFullScreenEnabled: boolean;
+    setIsMenuFullScreenEnabled: React.Dispatch<React.SetStateAction<boolean>>;
+    isMenuOpen: boolean;
+    setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+}
+interface FullScreenProviderProps {
+    children: ReactNode;
+    isFullScreenEnabled?: boolean;
+    isMenuOpen: boolean;
+    setIsMenuOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+}
+export declare const FullScreenMenuProvider: ({ children, isFullScreenEnabled, isMenuOpen, setIsMenuOpen, }: FullScreenProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useFullScreenMenu: () => FullScreenMenuContextProps;
+export {};

package/lib-esm/primitives/dropdown-menu/FullScreenMenuContext.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext, useState, useEffect, useMemo } from 'react';
+
+const FullScreenMenuContext = /*#__PURE__*/createContext(null);
+const FullScreenMenuProvider = ({
+  children,
+  isFullScreenEnabled,
+  isMenuOpen,
+  setIsMenuOpen
+}) => {
+  const [isMenuFullScreenEnabled, setIsMenuFullScreenEnabled] = useState(isFullScreenEnabled || false);
+  useEffect(() => {
+    if (isFullScreenEnabled !== undefined) {
+      setIsMenuFullScreenEnabled(isFullScreenEnabled);
+    }
+  }, [isFullScreenEnabled]);
+  const value = useMemo(() => ({
+    isMenuFullScreenEnabled,
+    setIsMenuFullScreenEnabled,
+    isMenuOpen,
+    setIsMenuOpen
+  }), [isMenuFullScreenEnabled, setIsMenuFullScreenEnabled, isMenuOpen, setIsMenuOpen]);
+  return jsx(FullScreenMenuContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useFullScreenMenu = () => {
+  const context = useContext(FullScreenMenuContext);
+  if (context === null) {
+    throw new Error('useFullScreenMenu must be used within a DropdownMenu.Root');
+  }
+  return context;
+};
+
+export { FullScreenMenuProvider, useFullScreenMenu };

package/lib-esm/primitives/dropdown-menu/SubMenuContext.d.ts

@@ -0,0 +1,13 @@
+import React, { type ReactNode } from 'react';
+interface SubMenuContextProps {
+    isSubMenuOpen: boolean;
+    setIsSubMenuOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+}
+interface SubMenuProviderProps {
+    children: ReactNode;
+    isSubMenuOpen: boolean;
+    setIsSubMenuOpen: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+}
+export declare const SubMenuMenuProvider: ({ children, isSubMenuOpen, setIsSubMenuOpen }: SubMenuProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useSubMenu: () => SubMenuContextProps;
+export {};

package/lib-esm/primitives/dropdown-menu/SubMenuContext.js

@@ -0,0 +1,27 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext, useMemo } from 'react';
+
+const SubMenuContext = /*#__PURE__*/createContext(null);
+const SubMenuMenuProvider = ({
+  children,
+  isSubMenuOpen,
+  setIsSubMenuOpen
+}) => {
+  const value = useMemo(() => ({
+    isSubMenuOpen,
+    setIsSubMenuOpen
+  }), [isSubMenuOpen, setIsSubMenuOpen]);
+  return jsx(SubMenuContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+const useSubMenu = () => {
+  const context = useContext(SubMenuContext);
+  if (context === null) {
+    throw new Error('useSubMenu must be used within a DropdownMenu.Root');
+  }
+  return context;
+};
+
+export { SubMenuMenuProvider, useSubMenu };

package/lib-esm/primitives/dropdown-menu/dropdown-menu-content.d.ts

@@ -1,4 +1,9 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { type ReactElement, type ReactNode } from 'react';
+export declare const sortMenuChildren: (children: ReactNode) => {
+    Header: ReactElement | null;
+    OtherChildren: Array<ReactElement>;
+};
 export interface DropdownMenuContentProps extends DropdownMenuPrimitive.DropdownMenuContentProps {
     /** Specify a container element to portal the content into. */
     /** @default document.body */

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

@@ -1,9 +1,27 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, Children, isValidElement } from 'react';
+import { DropdownMenuHeader } from './dropdown-menu-header.js';
 import styles from './dropdown-menu.module.js';
+import { useFullScreenMenu } from './FullScreenMenuContext.js';
 
+const sortMenuChildren = children => {
+  return Children.toArray(children).reduce((acc, child) => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return acc;
+    }
+    if (child.type === DropdownMenuHeader) {
+      acc.Header = child;
+    } else {
+      acc.OtherChildren.push(child);
+    }
+    return acc;
+  }, {
+    Header: null,
+    OtherChildren: []
+  });
+};
 /**
  * Based on Radix-UI Content
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#content
@@ -15,6 +33,28 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
+  const {
+    isMenuFullScreenEnabled
+  } = useFullScreenMenu();
+  if (isMenuFullScreenEnabled) {
+    const {
+      Header,
+      OtherChildren
+    } = sortMenuChildren(children);
+    return jsx(DropdownMenuPrimitive.Portal, {
+      container: container,
+      children: jsxs(DropdownMenuPrimitive.Content, {
+        ...rest,
+        ref: forwardedRef,
+        className: clsx(styles.content, className),
+        "data-menu-fullscreen": true,
+        children: [Header, jsx("div", {
+          className: styles.fullScreenContent,
+          children: OtherChildren
+        })]
+      })
+    });
+  }
   return (
     // TODO(DSYS-440): Unify all Portals (Tooltip, Select, DropdownMenu, etc...), Expose a Provider which would tell where to mount (body? other elem?)
     jsx(DropdownMenuPrimitive.Portal, {
@@ -32,4 +72,4 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
 });
 DropdownMenuContent.displayName = 'DropdownMenuContent';
 
-export { DropdownMenuContent };
+export { DropdownMenuContent, sortMenuChildren };

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

@@ -0,0 +1,15 @@
+import { type HTMLAttributes } from 'react';
+import { type IconButtonProps } from '../icon-button';
+export type MenuCloseButtonProps = Omit<IconButtonProps, 'icon' | 'variant' | 'size'>;
+export type TextContentProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    title: string;
+    subtitle?: string;
+};
+export declare const DropdownMenuHeader: (({ children, className, ...rest }: HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+    MenuCloseButton: import("react").ForwardRefExoticComponent<Omit<MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    SubMenuBackButton: import("react").ForwardRefExoticComponent<Omit<MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    TextContent: import("react").ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
+        title: string;
+        subtitle?: string;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};

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

@@ -0,0 +1,93 @@
+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 { Text } from '../../text/text.js';
+import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
+import { IconButton } from '../icon-button/icon-button.js';
+import styles from './dropdown-menu.module.js';
+import { useFullScreenMenu } from './FullScreenMenuContext.js';
+import { useSubMenu } from './SubMenuContext.js';
+
+const MenuCloseButton = /*#__PURE__*/forwardRef(({
+  onClick,
+  className,
+  ...rest
+}, ref) => {
+  const {
+    setIsMenuOpen
+  } = useFullScreenMenu();
+  const handleCloseClick = useCallback(() => {
+    setIsMenuOpen(false);
+  }, [setIsMenuOpen]);
+  return jsx(IconButton, {
+    ref: ref,
+    ...rest,
+    className: clsx(styles.menuCloseButton, className),
+    icon: XMark,
+    onClick: composeEventHandlers(handleCloseClick, onClick),
+    variant: "small-utility"
+  });
+});
+const SubMenuBackButton = /*#__PURE__*/forwardRef(({
+  onClick,
+  className,
+  ...rest
+}, ref) => {
+  const {
+    setIsSubMenuOpen
+  } = useSubMenu();
+  const handleCloseClick = useCallback(() => {
+    setIsSubMenuOpen(false);
+  }, [setIsSubMenuOpen]);
+  return jsx(IconButton, {
+    ref: ref,
+    ...rest,
+    className: clsx(styles.submenuCloseButton, className),
+    icon: PointerChevronLeft,
+    onClick: composeEventHandlers(handleCloseClick, onClick)
+  });
+});
+const MenuHeaderPrimitive = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return jsx("div", {
+    ...rest,
+    className: clsx(styles.menuHeader, className),
+    role: "presentation",
+    children: children
+  });
+};
+const TextContent = /*#__PURE__*/forwardRef(({
+  title,
+  subtitle,
+  className,
+  ...rest
+}, ref) => {
+  return jsxs("div", {
+    ref: ref,
+    ...rest,
+    className: clsx(className, styles.headerTextContent),
+    children: [jsx(Text, {
+      as: "span",
+      className: styles.ellipsis,
+      variant: "bodyLargeBold",
+      children: title
+    }), subtitle && jsx(Text, {
+      as: "span",
+      className: styles.ellipsis,
+      color: "textOnLightSecondary",
+      variant: "caption",
+      children: subtitle
+    })]
+  });
+});
+const DropdownMenuHeader = Object.assign(MenuHeaderPrimitive, {
+  MenuCloseButton,
+  SubMenuBackButton,
+  TextContent
+});
+
+export { DropdownMenuHeader };

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

@@ -18,6 +18,10 @@ const DropdownMenuItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: styles.item,
     onPointerLeave: preventDefault,
     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: preventDefault,
     children: jsx("span", {
       className: styles.ellipsis,
       children: children

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

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

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

@@ -1,5 +1,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 './FullScreenMenuContext.js';
 
 /**
  * The Dropdown-menu component displays a menu to the user, such as a set of actions or functions—triggered by a button.
@@ -7,11 +9,27 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 const DropdownMenuRoot = props => {
   const {
     children,
+    isFullScreenEnabled,
+    open,
+    onOpenChange,
+    defaultOpen,
     ...rest
   } = props;
-  return jsx(DropdownMenuPrimitive.Root, {
-    ...rest,
-    children: children
+  const [isMenuOpen = false, setIsMenuOpen] = useControllableState({
+    prop: open,
+    onChange: onOpenChange,
+    defaultProp: defaultOpen
+  });
+  return jsx(FullScreenMenuProvider, {
+    isFullScreenEnabled: isFullScreenEnabled,
+    isMenuOpen: isMenuOpen,
+    setIsMenuOpen: setIsMenuOpen,
+    children: jsx(DropdownMenuPrimitive.Root, {
+      ...rest,
+      onOpenChange: setIsMenuOpen,
+      open: isMenuOpen,
+      children: children
+    })
   });
 };
 DropdownMenuRoot.displayName = 'DropdownMenuRoot';

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

@@ -1,8 +1,10 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
+import { sortMenuChildren } from './dropdown-menu-content.js';
 import styles from './dropdown-menu.module.js';
+import { useFullScreenMenu } from './FullScreenMenuContext.js';
 
 /**
  * Based on Radix-UI Sub Content
@@ -15,6 +17,32 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
     className,
     ...rest
   } = props;
+  const {
+    isMenuFullScreenEnabled
+  } = useFullScreenMenu();
+  const preventDefault = useCallback(event => event.preventDefault(), []);
+  if (isMenuFullScreenEnabled) {
+    const {
+      Header,
+      OtherChildren
+    } = sortMenuChildren(children);
+    return jsx(DropdownMenuPrimitive.Portal, {
+      container: container,
+      children: jsxs(DropdownMenuPrimitive.SubContent, {
+        ...rest,
+        ref: forwardedRef,
+        className: clsx(styles.content, className),
+        "data-menu-fullscreen": true,
+        // Prevents submenu from closing, when detects focus outside submenu in fullscreen mode,
+        // while mouse is moving over submenu.
+        onFocusOutside: preventDefault,
+        children: [Header, jsx("div", {
+          className: styles.fullScreenContent,
+          children: OtherChildren
+        })]
+      })
+    });
+  }
   return (
     // TODO(DSYS-440): Unify all Portals (Tooltip, Select, DropdownMenu, etc...), Expose a Provider which would tell where to mount (body? other elem?)
     jsx(DropdownMenuPrimitive.Portal, {

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

@@ -1,5 +1,10 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 export type DropdownMenuSubMenuRootProps = DropdownMenuPrimitive.DropdownMenuSubProps;
+interface ResponsiveSubmenuContextValue {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+export declare const useResponsiveSubmenuContext: () => ResponsiveSubmenuContextValue;
 /**
  * Based on Radix-UI Sub
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#sub
@@ -8,3 +13,4 @@ export declare const DropdownMenuSubMenuRoot: {
     (props: DropdownMenuSubMenuRootProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

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

@@ -1,6 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import noop from 'lodash/noop';
+import { useContext, useCallback, createContext } from 'react';
+import { useControllableState } from '../../utils/useControllableState.js';
+import { SubMenuMenuProvider } from './SubMenuContext.js';
 
+const ResponsiveSubmenuContext = /*#__PURE__*/createContext({
+  open: false,
+  setOpen: noop
+});
+const useResponsiveSubmenuContext = () => {
+  return useContext(ResponsiveSubmenuContext);
+};
 /**
  * Based on Radix-UI Sub
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#sub
@@ -8,13 +19,30 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 const DropdownMenuSubMenuRoot = props => {
   const {
     children,
+    defaultOpen,
+    open,
+    onOpenChange,
     ...rest
   } = props;
-  return jsx(DropdownMenuPrimitive.Sub, {
-    ...rest,
-    children: children
+  const [isSubMenuOpen = false, setIsSubMenuOpen] = useControllableState({
+    prop: open,
+    onChange: onOpenChange,
+    defaultProp: defaultOpen
+  });
+  const handleOpenChange = useCallback(value => {
+    setIsSubMenuOpen(value);
+  }, [setIsSubMenuOpen]);
+  return jsx(SubMenuMenuProvider, {
+    isSubMenuOpen: isSubMenuOpen,
+    setIsSubMenuOpen: setIsSubMenuOpen,
+    children: jsx(DropdownMenuPrimitive.Sub, {
+      ...rest,
+      onOpenChange: handleOpenChange,
+      open: isSubMenuOpen,
+      children: children
+    })
   });
 };
 DropdownMenuSubMenuRoot.displayName = 'DropdownMenuSubMenuRoot';
 
-export { DropdownMenuSubMenuRoot };
+export { DropdownMenuSubMenuRoot, useResponsiveSubmenuContext };

package/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-menu-trigger.js

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { forwardRef } from 'react';
+import { forwardRef, useEffect, useCallback } from 'react';
 import { MenuItemSideContent, MenuItemMainContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
 import { useForkRef } from '../../utils/useForkRef.js';
 import { useSubMenuFocus } from '../../utils/useSubMenuFocus.hook.js';
+import { useResponsiveSubmenuContext } from './dropdown-menu-sub-menu-root.js';
 import styles from './dropdown-menu.module.js';
+import { useFullScreenMenu } from './FullScreenMenuContext.js';
 
 const DropdownMenuSubMenuTriggerRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -12,11 +14,29 @@ const DropdownMenuSubMenuTriggerRoot = /*#__PURE__*/forwardRef((props, forwarded
     ...rest
   } = props;
   const [localRef, setRefFocusNoop] = useSubMenuFocus();
+  const {
+    open
+  } = useResponsiveSubmenuContext();
+  const {
+    isMenuFullScreenEnabled
+  } = useFullScreenMenu();
+  useEffect(() => {
+    if (!open) {
+      localRef.current?.focus();
+    }
+  }, [localRef, open]);
+  const handleOnPointerMove = useCallback(e => {
+    setRefFocusNoop();
+    //  we should call prevent default so hover doesn't trigger submenu, which is confusing on full screen.
+    if (isMenuFullScreenEnabled) {
+      e.preventDefault();
+    }
+  }, [isMenuFullScreenEnabled, setRefFocusNoop]);
   return jsx(DropdownMenuPrimitive.SubTrigger, {
     ...rest,
     ref: useForkRef(localRef, forwardedRef),
     className: styles.item,
-    onPointerMove: setRefFocusNoop,
+    onPointerMove: handleOnPointerMove,
     children: children
   });
 });

package/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"content":"bp_dropdown_menu_module_content--291e5","ellipsis":"bp_dropdown_menu_module_ellipsis--291e5","checkmark":"bp_dropdown_menu_module_checkmark--291e5","item":"bp_dropdown_menu_module_item--291e5","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--291e5","radioItem":"bp_dropdown_menu_module_radioItem--291e5","checkboxItem":"bp_dropdown_menu_module_checkboxItem--291e5","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--291e5"};
+var styles = {"content":"bp_dropdown_menu_module_content--00a5d","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--00a5d","ellipsis":"bp_dropdown_menu_module_ellipsis--00a5d","checkmark":"bp_dropdown_menu_module_checkmark--00a5d","item":"bp_dropdown_menu_module_item--00a5d","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--00a5d","radioItem":"bp_dropdown_menu_module_radioItem--00a5d","checkboxItem":"bp_dropdown_menu_module_checkboxItem--00a5d","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--00a5d","menuHeader":"bp_dropdown_menu_module_menuHeader--00a5d","headerTextContent":"bp_dropdown_menu_module_headerTextContent--00a5d","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--00a5d","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--00a5d"};
 
 export { styles as default };

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

@@ -20,6 +20,14 @@ export declare const DropdownMenu: {
         MainContent: ({ className, label, description, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemMainContentProps) => import("react/jsx-runtime").JSX.Element;
     };
     SubMenuContent: import("react").ForwardRefExoticComponent<import("./dropdown-menu-sub-menu-content").DropdownMenuSubMenuContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Header: (({ children, className, ...rest }: import("react").HTMLAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element) & {
+        MenuCloseButton: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-header").MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+        SubMenuBackButton: import("react").ForwardRefExoticComponent<Omit<import("./dropdown-menu-header").MenuCloseButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+        TextContent: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "children"> & {
+            title: string;
+            subtitle?: string;
+        } & import("react").RefAttributes<HTMLDivElement>>;
+    };
 };
 export { type DropdownMenuContentProps } from './dropdown-menu-content';
 export { type DropdownMenuItemProps } from './dropdown-menu-item';

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

@@ -1,6 +1,7 @@
 import { DropdownMenuCheckboxItem } from './dropdown-menu-checkbox-item.js';
 import { DropdownMenuContent } from './dropdown-menu-content.js';
 import { DropdownMenuGroup } from './dropdown-menu-group.js';
+import { DropdownMenuHeader } from './dropdown-menu-header.js';
 import { DropdownMenuItem } from './dropdown-menu-item.js';
 import { DropdownMenuRadioGroup } from './dropdown-menu-radio-group.js';
 import { DropdownMenuRadioSelectItem } from './dropdown-menu-radio-select-item.js';
@@ -23,7 +24,8 @@ const DropdownMenu = {
   Separator: DropdownMenuSeparator,
   SubMenuRoot: DropdownMenuSubMenuRoot,
   SubMenuTrigger: DropdownMenuSubMenuTrigger,
-  SubMenuContent: DropdownMenuSubMenuContent
+  SubMenuContent: DropdownMenuSubMenuContent,
+  Header: DropdownMenuHeader
 };
 
 export { DropdownMenu };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.4.1",
+    "version": "9.5.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "afdd3dfde3958f020bf010cf62d8997183ee49f0",
+    "gitHead": "b2faf0831bb50c94a2fad4178d7e8b580c5a6c6e",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {