@dxos/react-ui 0.6.13 → 0.6.14-main.69511f5

package/src/components/Menus/DropdownMenu.tsx

@@ -1,58 +1,209 @@
 //
-// Copyright 2023 DXOS.org
+// Copyright 2024 DXOS.org
 //
-import { type Scope, type ScopeHook } from '@radix-ui/react-context';
-import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { type DropdownMenuContextValue } from '@radix-ui/react-dropdown-menu';
+
+// This is based upon `@radix-ui/react-dropdown-menu` fetched 25 Oct 2024 at https://github.com/radix-ui/primitives at commit 06de2d4.
+
+import { composeEventHandlers } from '@radix-ui/primitive';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { createContextScope } from '@radix-ui/react-context';
+import type { Scope } from '@radix-ui/react-context';
+import { useId } from '@radix-ui/react-id';
+import * as MenuPrimitive from '@radix-ui/react-menu';
+import { createMenuScope } from '@radix-ui/react-menu';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, {
+  type ReactNode,
+  type FC,
+  useRef,
+  type ElementRef,
+  useCallback,
+  type ComponentPropsWithoutRef,
+  forwardRef,
+  type ComponentPropsWithRef,
+  useEffect,
+  type MutableRefObject,
+  type RefObject,
+} from 'react';
 
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
 
-type DropdownMenuRootProps = DropdownMenuPrimitive.DropdownMenuProps;
+type Direction = 'ltr' | 'rtl';
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenu
+ * ----------------------------------------------------------------------------------------------- */
+
+const DROPDOWN_MENU_NAME = 'DropdownMenu';
 
-const DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
+type ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
+const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]);
+const useMenuScope = createMenuScope();
 
-type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
+type DropdownMenuContextValue = {
+  triggerId: string;
+  triggerRef: MutableRefObject<HTMLButtonElement | null>;
+  contentId: string;
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  onOpenToggle(): void;
+  modal: boolean;
+};
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+const [DropdownMenuProvider, useDropdownMenuContext] =
+  createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);
 
-type DropdownMenuPortalProps = DropdownMenuPrimitive.DropdownMenuPortalProps;
+interface DropdownMenuRootProps {
+  children?: ReactNode;
+  dir?: Direction;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?(open: boolean): void;
+  modal?: boolean;
+}
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<DropdownMenuRootProps>) => {
+  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const triggerRef = useRef<HTMLButtonElement | null>(null);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+  });
 
-type DropdownMenuContentProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuContentProps> & {
-  constrainBlockSize?: boolean;
+  return (
+    <DropdownMenuProvider
+      scope={__scopeDropdownMenu}
+      triggerId={useId()}
+      triggerRef={triggerRef as MutableRefObject<HTMLButtonElement | null>}
+      contentId={useId()}
+      open={open}
+      onOpenChange={setOpen}
+      onOpenToggle={useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen])}
+      modal={modal}
+    >
+      <MenuPrimitive.Root {...menuScope} open={open} onOpenChange={setOpen} dir={dir} modal={modal}>
+        {children}
+      </MenuPrimitive.Root>
+    </DropdownMenuProvider>
+  );
 };
 
-// @ts-ignore
-const useDropdownMenuContext: (
-  consumerName: string,
-  scope: Scope<DropdownMenuContextValue | undefined>,
-) => DropdownMenuContextValue = DropdownMenuPrimitive.useDropdownMenuContext;
-// @ts-ignore
-const useDropdownMenuMenuScope: ScopeHook = DropdownMenuPrimitive.useDropdownMenuMenuScope;
+DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 
-const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuTrigger
+ * ----------------------------------------------------------------------------------------------- */
+
+const TRIGGER_NAME = 'DropdownMenuTrigger';
+
+type DropdownMenuTriggerElement = ElementRef<typeof Primitive.button>;
+type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
+interface DropdownMenuTriggerProps extends PrimitiveButtonProps {}
+
+const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(
+  (props: ScopedProps<DropdownMenuTriggerProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
+    const context = useDropdownMenuContext(TRIGGER_NAME, __scopeDropdownMenu);
+    const menuScope = useMenuScope(__scopeDropdownMenu);
     return (
-      <DropdownMenuPrimitive.Content
-        sideOffset={4}
-        collisionPadding={8}
-        {...props}
-        className={tx('menu.content', 'menu', {}, classNames)}
-        ref={forwardedRef}
-      >
-        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
-      </DropdownMenuPrimitive.Content>
+      <MenuPrimitive.Anchor asChild {...menuScope}>
+        <Primitive.button
+          type='button'
+          id={context.triggerId}
+          aria-haspopup='menu'
+          aria-expanded={context.open}
+          aria-controls={context.open ? context.contentId : undefined}
+          data-state={context.open ? 'open' : 'closed'}
+          data-disabled={disabled ? '' : undefined}
+          disabled={disabled}
+          {...triggerProps}
+          ref={composeRefs(forwardedRef, context.triggerRef)}
+          onPointerDown={composeEventHandlers(props.onPointerDown, (event) => {
+            // only call handler if it's the left button (mousedown gets triggered by all mouse buttons)
+            // but not when the control key is pressed (avoiding MacOS right click)
+            if (!disabled && event.button === 0 && event.ctrlKey === false) {
+              context.onOpenToggle();
+              // prevent trigger focusing when opening
+              // this allows the content to be given focus without competition
+              if (!context.open) {
+                event.preventDefault();
+              }
+            }
+          })}
+          onKeyDown={composeEventHandlers(props.onKeyDown, (event) => {
+            if (disabled) {
+              return;
+            }
+            if (['Enter', ' '].includes(event.key)) {
+              context.onOpenToggle();
+            }
+            if (event.key === 'ArrowDown') {
+              context.onOpenChange(true);
+            }
+            // prevent keydown from scrolling window / first focused item to execute
+            // that keydown (inadvertently closing the menu)
+            if (['Enter', ' ', 'ArrowDown'].includes(event.key)) {
+              event.preventDefault();
+            }
+          })}
+        />
+      </MenuPrimitive.Anchor>
     );
   },
 );
 
+DropdownMenuTrigger.displayName = TRIGGER_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuVirtualTrigger
+ * ----------------------------------------------------------------------------------------------- */
+
+const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
+
+interface DropdownMenuVirtualTriggerProps {
+  virtualRef: RefObject<DropdownMenuTriggerElement>;
+}
+
+const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTriggerProps>) => {
+  const { __scopeDropdownMenu, virtualRef } = props;
+  const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  useEffect(() => {
+    if (virtualRef.current) {
+      context.triggerRef.current = virtualRef.current;
+    }
+  });
+  return <MenuPrimitive.Anchor {...menuScope} virtualRef={virtualRef} />;
+};
+
+DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuPortal
+ * ----------------------------------------------------------------------------------------------- */
+
+const PORTAL_NAME = 'DropdownMenuPortal';
+
+type MenuPortalProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;
+interface DropdownMenuPortalProps extends MenuPortalProps {}
+
+const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<DropdownMenuPortalProps>) => {
+  const { __scopeDropdownMenu, ...portalProps } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  return <MenuPrimitive.Portal {...menuScope} {...portalProps} />;
+};
+
+DropdownMenuPortal.displayName = PORTAL_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuViewport
+ * ----------------------------------------------------------------------------------------------- */
+
 type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
 };
@@ -69,37 +220,133 @@ const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProp
   },
 );
 
-type DropdownMenuArrowProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuArrowProps>;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuContent
+ * ----------------------------------------------------------------------------------------------- */
 
-const DropdownMenuArrow = forwardRef<SVGSVGElement, DropdownMenuArrowProps>(
-  ({ classNames, ...props }, forwardedRef) => {
+const CONTENT_NAME = 'DropdownMenuContent';
+
+type DropdownMenuContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type MenuContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>>;
+interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}
+
+const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
+  (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, classNames, ...contentProps } = props;
     const { tx } = useThemeContext();
+    const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const hasInteractedOutsideRef = useRef(false);
+
     return (
-      <DropdownMenuPrimitive.Arrow
-        {...props}
-        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+      <MenuPrimitive.Content
+        id={context.contentId}
+        aria-labelledby={context.triggerId}
+        {...menuScope}
+        {...contentProps}
         ref={forwardedRef}
+        onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
+          if (!hasInteractedOutsideRef.current) {
+            context.triggerRef.current?.focus();
+          }
+          hasInteractedOutsideRef.current = false;
+          // Always prevent auto focus because we either focus manually or want user agent focus
+          event.preventDefault();
+        })}
+        onInteractOutside={composeEventHandlers(props.onInteractOutside, (event) => {
+          const originalEvent = event.detail.originalEvent as PointerEvent;
+          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          if (!context.modal || isRightClick) {
+            hasInteractedOutsideRef.current = true;
+          }
+        })}
+        className={tx('menu.content', 'menu', {}, classNames)}
+        style={{
+          ...props.style,
+          // re-namespace exposed content custom properties
+          ...{
+            '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)',
+          },
+        }}
       />
     );
   },
 );
 
-type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
+DropdownMenuContent.displayName = CONTENT_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuGroup
+ * ----------------------------------------------------------------------------------------------- */
+
+const GROUP_NAME = 'DropdownMenuGroup';
+
+type DropdownMenuGroupElement = ElementRef<typeof MenuPrimitive.Group>;
+type MenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
+interface DropdownMenuGroupProps extends MenuGroupProps {}
+
+const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(
+  (props: ScopedProps<DropdownMenuGroupProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, ...groupProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return <MenuPrimitive.Group {...menuScope} {...groupProps} ref={forwardedRef} />;
+  },
+);
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+DropdownMenuGroup.displayName = GROUP_NAME;
 
-type DropdownMenuItemIndicatorProps = DropdownMenuPrimitive.DropdownMenuItemIndicatorProps;
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuLabel
+ * ----------------------------------------------------------------------------------------------- */
 
-const DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
+const LABEL_NAME = 'DropdownMenuLabel';
 
-type DropdownMenuItemProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuItemProps>;
+type DropdownMenuLabelElement = ElementRef<typeof MenuPrimitive.Label>;
+type MenuLabelProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Label>>;
+interface DropdownMenuLabelProps extends MenuLabelProps {}
 
-const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
-  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
+  (props: ScopedProps<DropdownMenuLabelProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, classNames, ...labelProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
     return (
-      <DropdownMenuPrimitive.Item
-        {...props}
+      <MenuPrimitive.Label
+        {...menuScope}
+        {...labelProps}
+        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+DropdownMenuGroupLabel.displayName = LABEL_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuItem
+ * ----------------------------------------------------------------------------------------------- */
+
+const ITEM_NAME = 'DropdownMenuItem';
+
+type DropdownMenuItemElement = ElementRef<typeof MenuPrimitive.Item>;
+type MenuItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Item>>;
+interface DropdownMenuItemProps extends MenuItemProps {}
+
+const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
+  (props: ScopedProps<DropdownMenuItemProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, classNames, ...itemProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    const { tx } = useThemeContext();
+    return (
+      <MenuPrimitive.Item
+        {...menuScope}
+        {...itemProps}
         className={tx('menu.item', 'menu__item', {}, classNames)}
         ref={forwardedRef}
       />
@@ -107,14 +354,27 @@ const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
   },
 );
 
-type DropdownMenuCheckboxItemProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps>;
+DropdownMenuItem.displayName = ITEM_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuCheckboxItem
+ * ----------------------------------------------------------------------------------------------- */
 
-const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
-  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
+
+type DropdownMenuCheckboxItemElement = ElementRef<typeof MenuPrimitive.CheckboxItem>;
+type MenuCheckboxItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>>;
+interface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {}
+
+const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
+  (props: ScopedProps<DropdownMenuCheckboxItemProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
     return (
-      <DropdownMenuPrimitive.CheckboxItem
-        {...props}
+      <MenuPrimitive.CheckboxItem
+        {...menuScope}
+        {...checkboxItemProps}
         className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
         ref={forwardedRef}
       />
@@ -122,14 +382,87 @@ const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckbox
   },
 );
 
-type DropdownMenuSeparatorProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuSeparatorProps>;
+DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuRadioGroup
+ * ----------------------------------------------------------------------------------------------- */
+
+const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
 
-const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
-  ({ classNames, ...props }, forwardedRef) => {
+type DropdownMenuRadioGroupElement = ElementRef<typeof MenuPrimitive.RadioGroup>;
+type MenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;
+interface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {}
+
+const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, DropdownMenuRadioGroupProps>(
+  (props: ScopedProps<DropdownMenuRadioGroupProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, ...radioGroupProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return <MenuPrimitive.RadioGroup {...menuScope} {...radioGroupProps} ref={forwardedRef} />;
+  },
+);
+
+DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuRadioItem
+ * ----------------------------------------------------------------------------------------------- */
+
+const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
+
+type DropdownMenuRadioItemElement = ElementRef<typeof MenuPrimitive.RadioItem>;
+type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
+interface DropdownMenuRadioItemProps extends MenuRadioItemProps {}
+
+const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownMenuRadioItemProps>(
+  (props: ScopedProps<DropdownMenuRadioItemProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, ...radioItemProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return <MenuPrimitive.RadioItem {...menuScope} {...radioItemProps} ref={forwardedRef} />;
+  },
+);
+
+DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuItemIndicator
+ * ----------------------------------------------------------------------------------------------- */
+
+const INDICATOR_NAME = 'DropdownMenuItemIndicator';
+
+type DropdownMenuItemIndicatorElement = ElementRef<typeof MenuPrimitive.ItemIndicator>;
+type MenuItemIndicatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;
+interface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {}
+
+const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, DropdownMenuItemIndicatorProps>(
+  (props: ScopedProps<DropdownMenuItemIndicatorProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return <MenuPrimitive.ItemIndicator {...menuScope} {...itemIndicatorProps} ref={forwardedRef} />;
+  },
+);
+
+DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuSeparator
+ * ----------------------------------------------------------------------------------------------- */
+
+const SEPARATOR_NAME = 'DropdownMenuSeparator';
+
+type DropdownMenuSeparatorElement = ElementRef<typeof MenuPrimitive.Separator>;
+type MenuSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>>;
+interface DropdownMenuSeparatorProps extends MenuSeparatorProps {}
+
+const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
+  (props: ScopedProps<DropdownMenuSeparatorProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
     return (
-      <DropdownMenuPrimitive.Separator
-        {...props}
+      <MenuPrimitive.Separator
+        {...menuScope}
+        {...separatorProps}
         className={tx('menu.separator', 'menu__item', {}, classNames)}
         ref={forwardedRef}
       />
@@ -137,49 +470,165 @@ const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorPr
   },
 );
 
-type DropdownMenuGroupLabelProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuLabelProps>;
+DropdownMenuSeparator.displayName = SEPARATOR_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuArrow
+ * ----------------------------------------------------------------------------------------------- */
+
+const ARROW_NAME = 'DropdownMenuArrow';
+
+type DropdownMenuArrowElement = ElementRef<typeof MenuPrimitive.Arrow>;
+type MenuArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>>;
+interface DropdownMenuArrowProps extends MenuArrowProps {}
 
-const DropdownMenuGroupLabel = forwardRef<HTMLDivElement, DropdownMenuGroupLabelProps>(
-  ({ classNames, ...props }, forwardedRef) => {
+const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrowProps>(
+  (props: ScopedProps<DropdownMenuArrowProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
     const { tx } = useThemeContext();
     return (
-      <DropdownMenuPrimitive.Label
-        {...props}
-        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+      <MenuPrimitive.Arrow
+        {...menuScope}
+        {...arrowProps}
+        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
         ref={forwardedRef}
       />
     );
   },
 );
 
+DropdownMenuArrow.displayName = ARROW_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuSub
+ * ----------------------------------------------------------------------------------------------- */
+
+interface DropdownMenuSubProps {
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?(open: boolean): void;
+}
+
+const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMenuSubProps>) => {
+  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
+  const menuScope = useMenuScope(__scopeDropdownMenu);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+  });
+
+  return (
+    <MenuPrimitive.Sub {...menuScope} open={open} onOpenChange={setOpen}>
+      {children}
+    </MenuPrimitive.Sub>
+  );
+};
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuSubTrigger
+ * ----------------------------------------------------------------------------------------------- */
+
+const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
+
+type DropdownMenuSubTriggerElement = ElementRef<typeof MenuPrimitive.SubTrigger>;
+type MenuSubTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;
+interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {}
+
+const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
+  (props: ScopedProps<DropdownMenuSubTriggerProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, ...subTriggerProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+    return <MenuPrimitive.SubTrigger {...menuScope} {...subTriggerProps} ref={forwardedRef} />;
+  },
+);
+
+DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
+
+/* -------------------------------------------------------------------------------------------------
+ * DropdownMenuSubContent
+ * ----------------------------------------------------------------------------------------------- */
+
+const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
+
+type DropdownMenuSubContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type MenuSubContentProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;
+interface DropdownMenuSubContentProps extends MenuSubContentProps {}
+
+const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
+  (props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {
+    const { __scopeDropdownMenu, ...subContentProps } = props;
+    const menuScope = useMenuScope(__scopeDropdownMenu);
+
+    return (
+      <MenuPrimitive.SubContent
+        {...menuScope}
+        {...subContentProps}
+        ref={forwardedRef}
+        style={{
+          ...props.style,
+          // re-namespace exposed content custom properties
+          ...{
+            '--radix-dropdown-menu-content-transform-origin': 'var(--radix-popper-transform-origin)',
+            '--radix-dropdown-menu-content-available-width': 'var(--radix-popper-available-width)',
+            '--radix-dropdown-menu-content-available-height': 'var(--radix-popper-available-height)',
+            '--radix-dropdown-menu-trigger-width': 'var(--radix-popper-anchor-width)',
+            '--radix-dropdown-menu-trigger-height': 'var(--radix-popper-anchor-height)',
+          },
+        }}
+      />
+    );
+  },
+);
+
+DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
+
+/* ----------------------------------------------------------------------------------------------- */
+
 export const DropdownMenu = {
   Root: DropdownMenuRoot,
   Trigger: DropdownMenuTrigger,
+  VirtualTrigger: DropdownMenuVirtualTrigger,
   Portal: DropdownMenuPortal,
   Content: DropdownMenuContent,
   Viewport: DropdownMenuViewport,
-  Arrow: DropdownMenuArrow,
   Group: DropdownMenuGroup,
+  GroupLabel: DropdownMenuGroupLabel,
   Item: DropdownMenuItem,
   CheckboxItem: DropdownMenuCheckboxItem,
+  RadioGroup: DropdownMenuRadioGroup,
+  RadioItem: DropdownMenuRadioItem,
   ItemIndicator: DropdownMenuItemIndicator,
   Separator: DropdownMenuSeparator,
-  GroupLabel: DropdownMenuGroupLabel,
+  Arrow: DropdownMenuArrow,
+  Sub: DropdownMenuSub,
+  SubTrigger: DropdownMenuSubTrigger,
+  SubContent: DropdownMenuSubContent,
 };
 
-export { useDropdownMenuContext, useDropdownMenuMenuScope };
+const useDropdownMenuMenuScope = useMenuScope;
+
+export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
 
 export type {
   DropdownMenuRootProps,
   DropdownMenuTriggerProps,
+  DropdownMenuVirtualTriggerProps,
   DropdownMenuPortalProps,
   DropdownMenuContentProps,
   DropdownMenuViewportProps,
-  DropdownMenuArrowProps,
   DropdownMenuGroupProps,
+  DropdownMenuLabelProps,
   DropdownMenuItemProps,
   DropdownMenuCheckboxItemProps,
+  DropdownMenuRadioGroupProps,
+  DropdownMenuRadioItemProps,
   DropdownMenuItemIndicatorProps,
   DropdownMenuSeparatorProps,
-  DropdownMenuGroupLabelProps,
+  DropdownMenuArrowProps,
+  DropdownMenuSubProps,
+  DropdownMenuSubTriggerProps,
+  DropdownMenuSubContentProps,
 };