@box/blueprint-web 9.8.1 → 9.9.0

package/lib-esm/index.css

@@ -4119,11 +4119,6 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
 .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;
@@ -4734,7 +4729,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   }
 }
 
-.bp_context_menu_module_menuBlock--b67f6{
+.bp_context_menu_module_menuBlock--77fef{
   background-color:var(--surface-menu-surface);
   border:var(--border-1) solid var(--border-card-border);
   border-radius:var(--radius-3);
@@ -4745,11 +4740,28 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   min-width:var(--blueprint-web-context-menu-min-width, 160px);
   padding:var(--space-3);
 }
-.bp_context_menu_module_menuBlock--b67f6 .bp_context_menu_module_menuItemsSeparator--b67f6{
+.bp_context_menu_module_menuBlock--77fef[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_context_menu_module_menuBlock--77fef[data-menu-fullscreen=true] .bp_context_menu_module_fullScreenContent--77fef{
+  overflow-y:auto;
+  padding:var(--space-3);
+}
+.bp_context_menu_module_menuBlock--77fef .bp_context_menu_module_menuItemsSeparator--77fef{
   margin-block:var(--space-2);
   margin-inline:var(--space-2);
 }
-.bp_context_menu_module_menuBlock--b67f6 .bp_context_menu_module_menuItem--b67f6{
+.bp_context_menu_module_menuBlock--77fef .bp_context_menu_module_menuItem--77fef{
   align-items:center;
   background-color:var(--surface-menu-surface);
   border:var(--border-2) solid #0000;
@@ -4762,17 +4774,50 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   padding-inline:var(--space-2);
   position:relative;
 }
-.bp_context_menu_module_menuBlock--b67f6 .bp_context_menu_module_menuItem--b67f6[data-disabled]{
+.bp_context_menu_module_menuBlock--77fef .bp_context_menu_module_menuItem--77fef[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_context_menu_module_menuBlock--b67f6 .bp_context_menu_module_menuItem--b67f6[data-highlighted]:not(:hover){
+.bp_context_menu_module_menuBlock--77fef .bp_context_menu_module_menuItem--77fef[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--b67f6 .bp_context_menu_module_menuItem--b67f6:hover{
+.bp_context_menu_module_menuBlock--77fef .bp_context_menu_module_menuItem--77fef:hover{
   background-color:var(--surface-menu-surface-focus);
 }
+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--77fef{
+  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_context_menu_module_headerTextContent--77fef{
+  display:grid;
+}
+
+.bp_context_menu_module_submenuCloseButton--77fef{
+  grid-area:submenu-close;
+}
+
+.bp_context_menu_module_menuCloseButton--77fef{
+  grid-area:close;
+}
+
+.bp_context_menu_module_ellipsis--77fef{
+  overflow:hidden;
+  text-overflow:ellipsis;
+  white-space:nowrap;
+}
 
 .bp_notification_module_viewport--5d3de{
   all:unset;

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

@@ -19,6 +19,10 @@ const MenuItemRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(styles.menuItem, 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: preventDefault,
     children: children
   });
 });

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

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

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

@@ -1,9 +1,27 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, Children, isValidElement } from 'react';
+import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
+import { ContextMenuHeader } from './context-menu-menu-header.js';
 import styles from './context-menu.module.js';
 
+const sortMenuChildren = children => {
+  return Children.toArray(children).reduce((acc, child) => {
+    if (! /*#__PURE__*/isValidElement(child)) {
+      return acc;
+    }
+    if (child.type === ContextMenuHeader) {
+      acc.Header = child;
+    } else {
+      acc.OtherChildren.push(child);
+    }
+    return acc;
+  }, {
+    Header: null,
+    OtherChildren: []
+  });
+};
 /**
  * Based on Radix-UI [Content](https://www.radix-ui.com/docs/primitives/components/context-menu#content).
  */
@@ -14,6 +32,28 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     className,
     ...rest
   } = props;
+  const {
+    isMenuFullScreenEnabled
+  } = useFullScreenContextMenu();
+  if (isMenuFullScreenEnabled) {
+    const {
+      Header,
+      OtherChildren
+    } = sortMenuChildren(children);
+    return jsx(ContextMenuPrimitve.Portal, {
+      container: container,
+      children: jsxs(ContextMenuPrimitve.Content, {
+        ...rest,
+        ref: forwardedRef,
+        className: clsx(styles.menuBlock, className),
+        "data-menu-fullscreen": true,
+        children: [Header, jsx("div", {
+          className: styles.fullScreenContent,
+          children: OtherChildren
+        })]
+      })
+    });
+  }
   return jsx(ContextMenuPrimitve.Portal, {
     container: container,
     children: jsx(ContextMenuPrimitve.Content, {
@@ -26,4 +66,4 @@ const ContextMenuMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) =>
 });
 ContextMenuMenuContent.displayName = 'ContextMenuMenuContent';
 
-export { ContextMenuMenuContent };
+export { ContextMenuMenuContent, sortMenuChildren };

package/lib-esm/primitives/context-menu/context-menu-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 ContextMenuHeader: (({ 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/context-menu/context-menu-menu-header.js

@@ -0,0 +1,95 @@
+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 { useSubMenu } from '../menu-utils/responsiveness/SubMenuContext.js';
+import styles from './context-menu.module.js';
+
+const MenuCloseButton = /*#__PURE__*/forwardRef(({
+  onClick,
+  className,
+  ...rest
+}, ref) => {
+  const handleCloseClick = useCallback(() => {
+    // Currently, there is no option to control the ContextMenu as no `open` prop is available.
+    // There is an open issue in the Radix-UI repository: https://github.com/radix-ui/primitives/issues/1307#issuecomment-1688574553.
+    // As a short-term workaround, until the issue is resolved, dispatch an Escape key event to close the menu:
+    const escapeEvent = new KeyboardEvent('keydown', {
+      key: 'Escape'
+    });
+    document.dispatchEvent(escapeEvent);
+  }, []);
+  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 ContextMenuHeader = Object.assign(MenuHeaderPrimitive, {
+  MenuCloseButton,
+  SubMenuBackButton,
+  TextContent
+});
+
+export { ContextMenuHeader };

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

@@ -1,5 +1,7 @@
 import { type ContextMenuProps as ContextMenuPrimitiveProps } from '@radix-ui/react-context-menu';
-export type ContextMenuMenuRootProps = ContextMenuPrimitiveProps;
+export type ContextMenuMenuRootProps = ContextMenuPrimitiveProps & {
+    isFullScreenEnabled?: boolean;
+};
 /**
  * Contains all the parts of a context menu.<br>
  * Based on Radix-UI context menu [Root](https://www.radix-ui.com/docs/primitives/components/context-menu#root).

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

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { Root } from '@radix-ui/react-context-menu';
+import { FullScreenMenuProvider } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
 
 /**
  * Contains all the parts of a context menu.<br>
@@ -8,11 +9,15 @@ import { Root } from '@radix-ui/react-context-menu';
 const ContextMenuMenuRoot = props => {
   const {
     children,
+    isFullScreenEnabled,
     ...rest
   } = props;
-  return jsx(Root, {
-    ...rest,
-    children: children
+  return jsx(FullScreenMenuProvider, {
+    isFullScreenEnabled: isFullScreenEnabled,
+    children: jsx(Root, {
+      ...rest,
+      children: children
+    })
   });
 };
 

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

@@ -1,7 +1,9 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as ContextMenuPrimitve from '@radix-ui/react-context-menu';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
+import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
+import { sortMenuChildren } from './context-menu-menu-content.js';
 import styles from './context-menu.module.js';
 
 const alignOffsetPx = -12;
@@ -17,6 +19,34 @@ const ContextMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
     className,
     ...rest
   } = props;
+  const {
+    isMenuFullScreenEnabled
+  } = useFullScreenContextMenu();
+  const preventDefault = useCallback(event => event.preventDefault(), []);
+  if (isMenuFullScreenEnabled) {
+    const {
+      Header,
+      OtherChildren
+    } = sortMenuChildren(children);
+    return jsx(ContextMenuPrimitve.Portal, {
+      container: container,
+      children: jsxs(ContextMenuPrimitve.SubContent, {
+        ...rest,
+        ref: forwardedRef,
+        alignOffset: alignOffsetPx,
+        className: clsx(styles.menuBlock, 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,
+        sideOffset: sideOffsetPx,
+        children: [Header, jsx("div", {
+          className: styles.fullScreenContent,
+          children: OtherChildren
+        })]
+      })
+    });
+  }
   return jsx(ContextMenuPrimitve.Portal, {
     container: container,
     children: jsx(ContextMenuPrimitve.SubContent, {

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

@@ -1,5 +1,10 @@
 import { type ContextMenuSubProps as ContextMenuPrimitiveSubMenuProps } from '@radix-ui/react-context-menu';
 export type ContextMenuSubMenuRootProps = ContextMenuPrimitiveSubMenuProps;
+interface ResponsiveSubmenuContextValue {
+    open: boolean;
+    setOpen: (open: boolean) => void;
+}
+export declare const useResponsiveSubmenuContext: () => ResponsiveSubmenuContextValue;
 /**
  * Container for all the parts of a sub menu.
  * Based on Radix-UI [SubMenu component](https://www.radix-ui.com/docs/primitives/components/context-menu#sub).
@@ -8,3 +13,4 @@ export declare const ContextMenuSubMenuRoot: {
     (props: ContextMenuSubMenuRootProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+export {};

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

@@ -1,6 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { Sub } from '@radix-ui/react-context-menu';
+import noop from 'lodash/noop';
+import { useContext, useCallback, createContext } from 'react';
+import { useControllableState } from '../../utils/useControllableState.js';
+import { SubMenuMenuProvider } from '../menu-utils/responsiveness/SubMenuContext.js';
 
+const ResponsiveSubmenuContext = /*#__PURE__*/createContext({
+  open: false,
+  setOpen: noop
+});
+const useResponsiveSubmenuContext = () => {
+  return useContext(ResponsiveSubmenuContext);
+};
 /**
  * Container for all the parts of a sub menu.
  * Based on Radix-UI [SubMenu component](https://www.radix-ui.com/docs/primitives/components/context-menu#sub).
@@ -8,13 +19,30 @@ import { Sub } from '@radix-ui/react-context-menu';
 const ContextMenuSubMenuRoot = props => {
   const {
     children,
+    defaultOpen,
+    open,
+    onOpenChange,
     ...rest
   } = props;
-  return jsx(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(Sub, {
+      ...rest,
+      onOpenChange: handleOpenChange,
+      open: isSubMenuOpen,
+      children: children
+    })
   });
 };
 ContextMenuSubMenuRoot.displayName = 'ContextMenuSubMenuRoot';
 
-export { ContextMenuSubMenuRoot };
+export { ContextMenuSubMenuRoot, useResponsiveSubmenuContext };

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

@@ -1,9 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import { SubTrigger } from '@radix-ui/react-context-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 { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import { useForkRef } from '../../utils/useForkRef.js';
 import { useSubMenuFocus } from '../../utils/useSubMenuFocus.hook.js';
+import { useFullScreenContextMenu } from '../menu-utils/responsiveness/FullScreenContextMenuContext.js';
+import { useResponsiveSubmenuContext } from './context-menu-sub-menu-root.js';
 import styles from './context-menu.module.js';
 
 const ContextMenuSubTriggerRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -12,11 +15,29 @@ const ContextMenuSubTriggerRoot = /*#__PURE__*/forwardRef((props, forwardedRef)
     ...rest
   } = props;
   const [localRef, setRefFocusNoop] = useSubMenuFocus();
+  const {
+    open
+  } = useResponsiveSubmenuContext();
+  const {
+    isMenuFullScreenEnabled
+  } = useFullScreenContextMenu();
+  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(SubTrigger, {
     ...rest,
     ref: useForkRef(localRef, forwardedRef),
     className: styles.menuItem,
-    onPointerMove: setRefFocusNoop,
+    onPointerMove: composeEventHandlers(props.onPointerMove, handleOnPointerMove),
     children: children
   });
 });

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

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

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

@@ -16,6 +16,14 @@ export declare const ContextMenu: {
         SideContent: ({ children, className, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemSideContentProps) => import("react/jsx-runtime").JSX.Element;
         MainContent: ({ className, label, description, ...rest }: import("../../util-components/menu-item-sections/menu-item-sections").MenuItemMainContentProps) => 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>>;
+        SubMenuBackButton: import("react").ForwardRefExoticComponent<Omit<import("./context-menu-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 { ContextMenuItemProps } from './context-menu-item';
 export type { ContextMenuMenuContentProps } from './context-menu-menu-content';

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

@@ -1,6 +1,7 @@
 import { ContextMenuItem } from './context-menu-item.js';
 import { ItemsSeparator } from './context-menu-items-separator.js';
 import { ContextMenuMenuContent } from './context-menu-menu-content.js';
+import { ContextMenuHeader } from './context-menu-menu-header.js';
 import { ContextMenuMenuRoot } from './context-menu-menu-root.js';
 import { ContextMenuMenuTrigger } from './context-menu-menu-trigger.js';
 import { ContextMenuSubMenuContent } from './context-menu-sub-menu-content.js';
@@ -15,7 +16,8 @@ const ContextMenu = {
   SubMenuTrigger: ContextMenuSubMenuTrigger,
   SubMenuContent: ContextMenuSubMenuContent,
   ItemsSeparator,
-  Item: ContextMenuItem
+  Item: ContextMenuItem,
+  Header: ContextMenuHeader
 };
 
 export { ContextMenu };

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

@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, Children, isValidElement } from 'react';
+import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
 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) => {
@@ -35,7 +35,7 @@ const DropdownMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } = props;
   const {
     isMenuFullScreenEnabled
-  } = useFullScreenMenu();
+  } = useFullScreenDropdownMenu();
   if (isMenuFullScreenEnabled) {
     const {
       Header,

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

@@ -5,9 +5,9 @@ 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 { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
+import { useSubMenu } from '../menu-utils/responsiveness/SubMenuContext.js';
 import styles from './dropdown-menu.module.js';
-import { useFullScreenMenu } from './FullScreenMenuContext.js';
-import { useSubMenu } from './SubMenuContext.js';
 
 const MenuCloseButton = /*#__PURE__*/forwardRef(({
   onClick,
@@ -16,7 +16,7 @@ const MenuCloseButton = /*#__PURE__*/forwardRef(({
 }, ref) => {
   const {
     setIsMenuOpen
-  } = useFullScreenMenu();
+  } = useFullScreenDropdownMenu();
   const handleCloseClick = useCallback(() => {
     setIsMenuOpen(false);
   }, [setIsMenuOpen]);

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

@@ -1,7 +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';
+import { FullScreenMenuProvider } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
 
 /**
  * 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-sub-menu-content.js

@@ -2,9 +2,9 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
 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
@@ -19,7 +19,7 @@ const DropdownMenuSubMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef)
   } = props;
   const {
     isMenuFullScreenEnabled
-  } = useFullScreenMenu();
+  } = useFullScreenDropdownMenu();
   const preventDefault = useCallback(event => event.preventDefault(), []);
   if (isMenuFullScreenEnabled) {
     const {

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

@@ -3,7 +3,7 @@ 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';
+import { SubMenuMenuProvider } from '../menu-utils/responsiveness/SubMenuContext.js';
 
 const ResponsiveSubmenuContext = /*#__PURE__*/createContext({
   open: false,

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

@@ -5,9 +5,9 @@ import { MenuItemSideContent, MenuItemMainContent } from '../../util-components/
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import { useForkRef } from '../../utils/useForkRef.js';
 import { useSubMenuFocus } from '../../utils/useSubMenuFocus.hook.js';
+import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.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 {
@@ -20,7 +20,7 @@ const DropdownMenuSubMenuTriggerRoot = /*#__PURE__*/forwardRef((props, forwarded
   } = useResponsiveSubmenuContext();
   const {
     isMenuFullScreenEnabled
-  } = useFullScreenMenu();
+  } = useFullScreenDropdownMenu();
   useEffect(() => {
     if (!open) {
       localRef.current?.focus();

package/lib-esm/primitives/menu-utils/responsiveness/FullScreenContextMenuContext.d.ts

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

package/lib-esm/primitives/menu-utils/responsiveness/FullScreenContextMenuContext.js

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

package/lib-esm/primitives/{dropdown-menu/FullScreenMenuContext.d.ts → menu-utils/responsiveness/FullScreenDropdownMenuContext.d.ts}

@@ -12,5 +12,5 @@ interface FullScreenProviderProps {
     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 declare const useFullScreenDropdownMenu: () => FullScreenMenuContextProps;
 export {};

package/lib-esm/primitives/{dropdown-menu/FullScreenMenuContext.js → menu-utils/responsiveness/FullScreenDropdownMenuContext.js}

@@ -25,12 +25,12 @@ const FullScreenMenuProvider = ({
     children: children
   });
 };
-const useFullScreenMenu = () => {
+const useFullScreenDropdownMenu = () => {
   const context = useContext(FullScreenMenuContext);
   if (context === null) {
-    throw new Error('useFullScreenMenu must be used within a DropdownMenu.Root');
+    throw new Error('useFullScreenMenu must be used within a menu DropdownMenu.Root');
   }
   return context;
 };
 
-export { FullScreenMenuProvider, useFullScreenMenu };
+export { FullScreenMenuProvider, useFullScreenDropdownMenu };

package/lib-esm/primitives/{dropdown-menu → menu-utils/responsiveness}/SubMenuContext.js

@@ -19,7 +19,7 @@ const SubMenuMenuProvider = ({
 const useSubMenu = () => {
   const context = useContext(SubMenuContext);
   if (context === null) {
-    throw new Error('useSubMenu must be used within a DropdownMenu.Root');
+    throw new Error('useSubMenu must be used within a menu .Root component');
   }
   return context;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "9.8.1",
+    "version": "9.9.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -22,8 +22,8 @@
         "**/*.scss"
     ],
     "dependencies": {
-        "@ariakit/react": "0.4.14",
-        "@ariakit/react-core": "0.4.14",
+        "@ariakit/react": "0.4.15",
+        "@ariakit/react-core": "0.4.15",
         "@box/blueprint-web-assets": "^4.31.1",
         "@internationalized/date": "^3.5.4",
         "@radix-ui/react-accordion": "1.1.2",
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "31d71b2965eb39b2d6fe9febe825c915ec9e9549",
+    "gitHead": "669489f834920de03a726e0106414e4065a239c1",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {