@box/blueprint-web 9.4.0 → 9.5.0

package/lib-esm/loading-indicator/loading-indicator.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"crawler":"bp_loading_indicator_module_crawler--0cdc6","segment":"bp_loading_indicator_module_segment--0cdc6","small":"bp_loading_indicator_module_small--0cdc6","large":"bp_loading_indicator_module_large--0cdc6","x-large":"bp_loading_indicator_module_x-large--0cdc6","default":"bp_loading_indicator_module_default--0cdc6","segment-transform":"bp_loading_indicator_module_segment-transform--0cdc6","segment-default":"bp_loading_indicator_module_segment-default--0cdc6","dark":"bp_loading_indicator_module_dark--0cdc6","segment-dark":"bp_loading_indicator_module_segment-dark--0cdc6","light":"bp_loading_indicator_module_light--0cdc6","segment-light":"bp_loading_indicator_module_segment-light--0cdc6"};
+var styles = {"crawler":"bp_loading_indicator_module_crawler--075b2","segment":"bp_loading_indicator_module_segment--075b2","small":"bp_loading_indicator_module_small--075b2","large":"bp_loading_indicator_module_large--075b2","x-large":"bp_loading_indicator_module_x-large--075b2","default":"bp_loading_indicator_module_default--075b2","segment-transform":"bp_loading_indicator_module_segment-transform--075b2","segment-default":"bp_loading_indicator_module_segment-default--075b2","dark":"bp_loading_indicator_module_dark--075b2","segment-dark":"bp_loading_indicator_module_segment-dark--075b2","light":"bp_loading_indicator_module_light--075b2","segment-light":"bp_loading_indicator_module_segment-light--075b2"};
 
 export { styles as default };

package/lib-esm/modal/modal.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--876e3","content":"bp_modal_module_content--876e3","popup_bounce_in":"bp_modal_module_popup_bounce_in--876e3","smallSizeModal":"bp_modal_module_smallSizeModal--876e3","mediumSizeModal":"bp_modal_module_mediumSizeModal--876e3","largeSizeModal":"bp_modal_module_largeSizeModal--876e3","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--876e3","close":"bp_modal_module_close--876e3","onColor":"bp_modal_module_onColor--876e3","backButton":"bp_modal_module_backButton--876e3","modalHeader":"bp_modal_module_modalHeader--876e3","modalTitle":"bp_modal_module_modalTitle--876e3","body":"bp_modal_module_body--876e3","scrollableContainer":"bp_modal_module_scrollableContainer--876e3","headerDividerLine":"bp_modal_module_headerDividerLine--876e3","footerDividerLine":"bp_modal_module_footerDividerLine--876e3","footer":"bp_modal_module_footer--876e3","footerButton":"bp_modal_module_footerButton--876e3"};
+var styles = {"overlay":"bp_modal_module_overlay--9727e","content":"bp_modal_module_content--9727e","popup_bounce_in":"bp_modal_module_popup_bounce_in--9727e","smallSizeModal":"bp_modal_module_smallSizeModal--9727e","mediumSizeModal":"bp_modal_module_mediumSizeModal--9727e","largeSizeModal":"bp_modal_module_largeSizeModal--9727e","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--9727e","close":"bp_modal_module_close--9727e","onColor":"bp_modal_module_onColor--9727e","backButton":"bp_modal_module_backButton--9727e","modalHeader":"bp_modal_module_modalHeader--9727e","modalTitle":"bp_modal_module_modalTitle--9727e","body":"bp_modal_module_body--9727e","scrollableContainer":"bp_modal_module_scrollableContainer--9727e","headerDividerLine":"bp_modal_module_headerDividerLine--9727e","footerDividerLine":"bp_modal_module_footerDividerLine--9727e","footer":"bp_modal_module_footer--9727e","footerButton":"bp_modal_module_footerButton--9727e"};
 
 export { styles as default };

package/lib-esm/navigation-menu/navigation-menu.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"link":"bp_navigation_menu_module_link--a0b11","ellipsis":"bp_navigation_menu_module_ellipsis--a0b11","navigationMenuSeparator":"bp_navigation_menu_module_navigationMenuSeparator--a0b11"};
+var styles = {"link":"bp_navigation_menu_module_link--d3a3d","ellipsis":"bp_navigation_menu_module_ellipsis--d3a3d","navigationMenuSeparator":"bp_navigation_menu_module_navigationMenuSeparator--d3a3d"};
 
 export { styles as default };

package/lib-esm/page/page.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"page":"bp_page_module_page--82922","globalHeader":"bp_page_module_globalHeader--82922","sideContentContainer":"bp_page_module_sideContentContainer--82922","searchContainer":"bp_page_module_searchContainer--82922","pageMain":"bp_page_module_pageMain--82922","topSection":"bp_page_module_topSection--82922","mainSection":"bp_page_module_mainSection--82922","content":"bp_page_module_content--82922","sidebar":"bp_page_module_sidebar--82922","navigationPortal":"bp_page_module_navigationPortal--82922","navigationContent":"bp_page_module_navigationContent--82922","navigationPortalLargeCollapsed":"bp_page_module_navigationPortalLargeCollapsed--82922","navigationPortalLargeExpanded":"bp_page_module_navigationPortalLargeExpanded--82922","hide":"bp_page_module_hide--82922","pageMediumOrLessViewport":"bp_page_module_pageMediumOrLessViewport--82922","search":"bp_page_module_search--82922","navigationPortalOverlayCollapsed":"bp_page_module_navigationPortalOverlayCollapsed--82922","navigationPortalOverlayExpanded":"bp_page_module_navigationPortalOverlayExpanded--82922","pageNavigationXXLargeCollapsed":"bp_page_module_pageNavigationXXLargeCollapsed--82922","pageNavigationXXLargeExpanded":"bp_page_module_pageNavigationXXLargeExpanded--82922","portalEntry":"bp_page_module_portalEntry--82922"};
+var styles = {"page":"bp_page_module_page--6eccb","globalHeader":"bp_page_module_globalHeader--6eccb","sideContentContainer":"bp_page_module_sideContentContainer--6eccb","searchContainer":"bp_page_module_searchContainer--6eccb","pageMain":"bp_page_module_pageMain--6eccb","topSection":"bp_page_module_topSection--6eccb","mainSection":"bp_page_module_mainSection--6eccb","content":"bp_page_module_content--6eccb","sidebar":"bp_page_module_sidebar--6eccb","navigationPortal":"bp_page_module_navigationPortal--6eccb","navigationContent":"bp_page_module_navigationContent--6eccb","navigationPortalLargeCollapsed":"bp_page_module_navigationPortalLargeCollapsed--6eccb","navigationPortalLargeExpanded":"bp_page_module_navigationPortalLargeExpanded--6eccb","hide":"bp_page_module_hide--6eccb","pageMediumOrLessViewport":"bp_page_module_pageMediumOrLessViewport--6eccb","search":"bp_page_module_search--6eccb","navigationPortalOverlayCollapsed":"bp_page_module_navigationPortalOverlayCollapsed--6eccb","navigationPortalOverlayExpanded":"bp_page_module_navigationPortalOverlayExpanded--6eccb","pageNavigationXXLargeCollapsed":"bp_page_module_pageNavigationXXLargeCollapsed--6eccb","pageNavigationXXLargeExpanded":"bp_page_module_pageNavigationXXLargeExpanded--6eccb","portalEntry":"bp_page_module_portalEntry--6eccb"};
 
 export { styles as default };

package/lib-esm/page-section/page-section.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"pageSectionContainer":"bp_page_section_module_pageSectionContainer--5fa33","pageSection":"bp_page_section_module_pageSection--5fa33","pageSectionHeader":"bp_page_section_module_pageSectionHeader--5fa33","pageSectionContent":"bp_page_section_module_pageSectionContent--5fa33","pageSectionDivider":"bp_page_section_module_pageSectionDivider--5fa33"};
+var styles = {"pageSectionContainer":"bp_page_section_module_pageSectionContainer--1bd1e","pageSection":"bp_page_section_module_pageSection--1bd1e","pageSectionHeader":"bp_page_section_module_pageSectionHeader--1bd1e","pageSectionContent":"bp_page_section_module_pageSectionContent--1bd1e","pageSectionDivider":"bp_page_section_module_pageSectionDivider--1bd1e"};
 
 export { styles as default };

package/lib-esm/password-input/password-input.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"passwordInput":"bp_password_input_module_passwordInput--86615","iconButton":"bp_password_input_module_iconButton--86615"};
+var styles = {"passwordInput":"bp_password_input_module_passwordInput--d517b","iconButton":"bp_password_input_module_iconButton--d517b"};
 
 export { styles as default };

package/lib-esm/primitives/base-button/base-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"button":"bp_base_button_module_button--4d775","icon":"bp_base_button_module_icon--4d775","primary":"bp_base_button_module_primary--4d775","secondary":"bp_base_button_module_secondary--4d775","tertiary":"bp_base_button_module_tertiary--4d775","outline":"bp_base_button_module_outline--4d775","small":"bp_base_button_module_small--4d775","isIconButton":"bp_base_button_module_isIconButton--4d775","large":"bp_base_button_module_large--4d775","hide":"bp_base_button_module_hide--4d775"};
+var styles = {"button":"bp_base_button_module_button--78e93","icon":"bp_base_button_module_icon--78e93","primary":"bp_base_button_module_primary--78e93","secondary":"bp_base_button_module_secondary--78e93","tertiary":"bp_base_button_module_tertiary--78e93","outline":"bp_base_button_module_outline--78e93","small":"bp_base_button_module_small--78e93","isIconButton":"bp_base_button_module_isIconButton--78e93","large":"bp_base_button_module_large--78e93","hide":"bp_base_button_module_hide--78e93"};
 
 export { styles as default };

package/lib-esm/primitives/base-inline-notice/base-inline-notice.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--3c32a","actions":"bp_base_inline_notice_module_actions--3c32a","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--3c32a","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--3c32a","backgroundRed":"bp_base_inline_notice_module_backgroundRed--3c32a","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--3c32a","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--3c32a","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--3c32a","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--3c32a","contentContainer":"bp_base_inline_notice_module_contentContainer--3c32a","content":"bp_base_inline_notice_module_content--3c32a","title":"bp_base_inline_notice_module_title--3c32a"};
+var styles = {"noticeWrapper":"bp_base_inline_notice_module_noticeWrapper--dd55c","actions":"bp_base_inline_notice_module_actions--dd55c","backgroundYellow":"bp_base_inline_notice_module_backgroundYellow--dd55c","backgroundBlue":"bp_base_inline_notice_module_backgroundBlue--dd55c","backgroundRed":"bp_base_inline_notice_module_backgroundRed--dd55c","backgroundGreen":"bp_base_inline_notice_module_backgroundGreen--dd55c","backgroundPurple":"bp_base_inline_notice_module_backgroundPurple--dd55c","actionButtonTertiary":"bp_base_inline_notice_module_actionButtonTertiary--dd55c","actionButtonPrimary":"bp_base_inline_notice_module_actionButtonPrimary--dd55c","contentContainer":"bp_base_inline_notice_module_contentContainer--dd55c","content":"bp_base_inline_notice_module_content--dd55c","title":"bp_base_inline_notice_module_title--dd55c"};
 
 export { styles as default };

package/lib-esm/primitives/base-text-input/base-text-input.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"textInputContainer":"bp_base_text_input_module_textInputContainer--12c89","label":"bp_base_text_input_module_label--12c89","hidden":"bp_base_text_input_module_hidden--12c89","textInput":"bp_base_text_input_module_textInput--12c89","error":"bp_base_text_input_module_error--12c89","iconShared":"bp_base_text_input_module_iconShared--12c89","disabled":"bp_base_text_input_module_disabled--12c89","inlineError":"bp_base_text_input_module_inlineError--12c89"};
+var styles = {"textInputContainer":"bp_base_text_input_module_textInputContainer--1717c","label":"bp_base_text_input_module_label--1717c","hidden":"bp_base_text_input_module_hidden--1717c","textInput":"bp_base_text_input_module_textInput--1717c","error":"bp_base_text_input_module_error--1717c","iconShared":"bp_base_text_input_module_iconShared--1717c","disabled":"bp_base_text_input_module_disabled--1717c","inlineError":"bp_base_text_input_module_inlineError--1717c"};
 
 export { styles as default };

package/lib-esm/primitives/calendar/calendar.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"calendar":"bp_calendar_module_calendar--c87ea","calendarGrid":"bp_calendar_module_calendarGrid--c87ea","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--c87ea","calendarHeader":"bp_calendar_module_calendarHeader--c87ea","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--c87ea","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--c87ea","calendarCell":"bp_calendar_module_calendarCell--c87ea","today":"bp_calendar_module_today--c87ea"};
+var styles = {"calendar":"bp_calendar_module_calendar--38bc5","calendarGrid":"bp_calendar_module_calendarGrid--38bc5","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--38bc5","calendarHeader":"bp_calendar_module_calendarHeader--38bc5","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--38bc5","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--38bc5","calendarCell":"bp_calendar_module_calendarCell--38bc5","today":"bp_calendar_module_today--38bc5"};
 
 export { styles as default };

package/lib-esm/primitives/chips/chip.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"chip":"bp_chip_module_chip--31311","labelText":"bp_chip_module_labelText--31311","chipStatus":"bp_chip_module_chipStatus--31311","chipButton":"bp_chip_module_chipButton--31311","singleSelectChip":"bp_chip_module_singleSelectChip--31311","multiSelectChip":"bp_chip_module_multiSelectChip--31311","chipsGroup":"bp_chip_module_chipsGroup--31311"};
+var styles = {"chip":"bp_chip_module_chip--22398","labelText":"bp_chip_module_labelText--22398","chipStatus":"bp_chip_module_chipStatus--22398","chipButton":"bp_chip_module_chipButton--22398","singleSelectChip":"bp_chip_module_singleSelectChip--22398","multiSelectChip":"bp_chip_module_multiSelectChip--22398","chipsGroup":"bp_chip_module_chipsGroup--22398"};
 
 export { styles as default };

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/context-menu/context-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"menuBlock":"bp_context_menu_module_menuBlock--5fc32","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--5fc32","menuItem":"bp_context_menu_module_menuItem--5fc32"};
+var styles = {"menuBlock":"bp_context_menu_module_menuBlock--b67f6","menuItemsSeparator":"bp_context_menu_module_menuItemsSeparator--b67f6","menuItem":"bp_context_menu_module_menuItem--b67f6"};
 
 export { styles as default };

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
   });
 });