@dxos/react-ui 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

package/dist/types/src/components/Menus/DropdownMenu.stories.d.ts

@@ -3,32 +3,29 @@ import React from 'react';
 declare const _default: {
     title: string;
     component: {
-        Root: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuProps>;
-        Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-        Portal: React.FC<import("@radix-ui/react-dropdown-menu").DropdownMenuPortalProps>;
-        Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuContentProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-        } & {
-            constrainBlockSize?: boolean;
-        } & React.RefAttributes<HTMLDivElement>>;
+        Root: React.FC<import("./DropdownMenu").DropdownMenuRootProps>;
+        Trigger: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+        VirtualTrigger: {
+            (props: import("./DropdownMenu").DropdownMenuVirtualTriggerProps & {
+                __scopeDropdownMenu?: import("@radix-ui/react-context").Scope;
+            }): React.JSX.Element;
+            displayName: string;
+        };
+        Portal: React.FC<import("./DropdownMenu").DropdownMenuPortalProps>;
+        Content: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuContentProps & React.RefAttributes<HTMLDivElement>>;
         Viewport: React.ForwardRefExoticComponent<Omit<import("./DropdownMenu").DropdownMenuViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-        Arrow: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuArrowProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-        } & React.RefAttributes<SVGSVGElement>>;
-        Group: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
-        Item: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuItemProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-        } & React.RefAttributes<HTMLDivElement>>;
-        CheckboxItem: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuCheckboxItemProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-        } & React.RefAttributes<HTMLDivElement>>;
-        ItemIndicator: React.ForwardRefExoticComponent<import("@radix-ui/react-dropdown-menu").DropdownMenuItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
-        Separator: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuSeparatorProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-        } & React.RefAttributes<HTMLDivElement>>;
-        GroupLabel: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-dropdown-menu").DropdownMenuLabelProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-        } & React.RefAttributes<HTMLDivElement>>;
+        Group: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+        GroupLabel: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuLabelProps & React.RefAttributes<HTMLDivElement>>;
+        Item: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+        CheckboxItem: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>>;
+        RadioGroup: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+        RadioItem: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuRadioItemProps & React.RefAttributes<HTMLDivElement>>;
+        ItemIndicator: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuItemIndicatorProps & React.RefAttributes<HTMLSpanElement>>;
+        Separator: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuSeparatorProps & React.RefAttributes<HTMLDivElement>>;
+        Arrow: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuArrowProps & React.RefAttributes<SVGSVGElement>>;
+        Sub: React.FC<import("./DropdownMenu").DropdownMenuSubProps>;
+        SubTrigger: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>>;
+        SubContent: React.ForwardRefExoticComponent<import("./DropdownMenu").DropdownMenuSubContentProps & React.RefAttributes<HTMLDivElement>>;
     };
     render: () => React.JSX.Element;
     decorators: import("@storybook/react/*").Decorator[];
@@ -47,4 +44,7 @@ export declare const Default: {
         };
     };
 };
+export declare const VirtualTrigger: {
+    render: () => React.JSX.Element;
+};
 //# sourceMappingURL=DropdownMenu.stories.d.ts.map

package/dist/types/src/components/Menus/DropdownMenu.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/DropdownMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuF1B,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;CAKnB,CAAC"}
+{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Menus/DropdownMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAA2B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFhD,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,cAAc;;CAqC1B,CAAC"}

package/dist/types/src/components/Popover/Popover.d.ts

@@ -1,32 +1,98 @@
-import { type PopoverProps as PopoverRootPrimitiveProps, type PopoverContentProps as PopoverContentPrimitiveProps, type PopoverTriggerProps as PopoverTriggerPrimitiveProps, type PopoverAnchorProps as PopoverAnchorPrimitiveProps, type PopoverPortalProps as PopoverPortalPrimitiveProps, type PopoverArrowProps as PopoverArrowPrimitiveProps, type PopoverCloseProps as PopoverClosePrimitiveProps } from '@radix-ui/react-popover';
+import type { Scope } from '@radix-ui/react-context';
+import { DismissableLayer } from '@radix-ui/react-dismissable-layer';
+import { FocusScope } from '@radix-ui/react-focus-scope';
+import * as PopperPrimitive from '@radix-ui/react-popper';
+import { Portal as PortalPrimitive } from '@radix-ui/react-portal';
 import { Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef } from 'react';
+import React, { type ComponentPropsWithRef, type ElementRef, type RefObject, type ReactNode, type ComponentPropsWithoutRef } from 'react';
 import { type ThemedClassName } from '../../util';
-type PopoverRootProps = PopoverRootPrimitiveProps;
-type PopoverPortalProps = PopoverPortalPrimitiveProps;
-type PopoverTriggerProps = PopoverTriggerPrimitiveProps;
-type PopoverAnchorProps = PopoverAnchorPrimitiveProps;
-type PopoverCloseProps = PopoverClosePrimitiveProps;
-type PopoverArrowProps = ThemedClassName<PopoverArrowPrimitiveProps>;
-type PopoverContentProps = ThemedClassName<PopoverContentPrimitiveProps>;
+type ScopedProps<P> = P & {
+    __scopePopover?: Scope;
+};
+declare const createPopoverScope: import("@radix-ui/react-context").CreateScope;
+interface PopoverRootProps {
+    children?: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+}
+type PopperAnchorProps = ComponentPropsWithoutRef<typeof PopperPrimitive.Anchor>;
+interface PopoverAnchorProps extends PopperAnchorProps {
+}
+type PopoverTriggerElement = ElementRef<typeof Primitive.button>;
+type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
+interface PopoverTriggerProps extends PrimitiveButtonProps {
+}
+interface PopoverVirtualTriggerProps {
+    virtualRef: RefObject<PopoverTriggerElement>;
+}
+type PortalProps = ComponentPropsWithoutRef<typeof PortalPrimitive>;
+interface PopoverPortalProps {
+    children?: ReactNode;
+    /**
+     * Specify a container element to portal the content into.
+     */
+    container?: PortalProps['container'];
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+}
+interface PopoverContentProps extends PopoverContentTypeProps {
+    /**
+     * Used to force mounting when more control is needed. Useful when
+     * controlling animation with React animation libraries.
+     */
+    forceMount?: true;
+}
+interface PopoverContentTypeProps extends Omit<PopoverContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {
+}
+type FocusScopeProps = ComponentPropsWithoutRef<typeof FocusScope>;
+type DismissableLayerProps = ComponentPropsWithoutRef<typeof DismissableLayer>;
+type PopperContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPrimitive.Content>>;
+interface PopoverContentImplProps extends Omit<PopperContentProps, 'onPlaced'>, Omit<DismissableLayerProps, 'onDismiss'> {
+    /**
+     * Whether focus should be trapped within the `Popover`
+     * (default: false)
+     */
+    trapFocus?: FocusScopeProps['trapped'];
+    /**
+     * Event handler called when auto-focusing on open.
+     * Can be prevented.
+     */
+    onOpenAutoFocus?: FocusScopeProps['onMountAutoFocus'];
+    /**
+     * Event handler called when auto-focusing on close.
+     * Can be prevented.
+     */
+    onCloseAutoFocus?: FocusScopeProps['onUnmountAutoFocus'];
+}
+interface PopoverCloseProps extends PrimitiveButtonProps {
+}
+type PopperArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof PopperPrimitive.Arrow>>;
+interface PopoverArrowProps extends PopperArrowProps {
+}
 type PopoverViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
     asChild?: boolean;
     constrainInline?: boolean;
     constrainBlock?: boolean;
 };
 export declare const Popover: {
-    Root: React.FunctionComponent<PopoverRootPrimitiveProps>;
-    Portal: React.FC<PopoverPortalPrimitiveProps>;
-    Trigger: React.ForwardRefExoticComponent<PopoverTriggerPrimitiveProps & React.RefAttributes<HTMLButtonElement>>;
-    Anchor: React.ForwardRefExoticComponent<PopoverAnchorPrimitiveProps & React.RefAttributes<HTMLDivElement>>;
-    Arrow: React.ForwardRefExoticComponent<Omit<PopoverArrowPrimitiveProps, "className"> & {
-        classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-    } & React.RefAttributes<SVGSVGElement>>;
-    Close: React.ForwardRefExoticComponent<PopoverClosePrimitiveProps & React.RefAttributes<HTMLButtonElement>>;
-    Content: React.ForwardRefExoticComponent<Omit<PopoverContentPrimitiveProps, "className"> & {
-        classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-    } & React.RefAttributes<HTMLDivElement>>;
+    Root: React.FC<PopoverRootProps>;
+    Anchor: React.ForwardRefExoticComponent<PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+    Trigger: React.ForwardRefExoticComponent<PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    VirtualTrigger: {
+        (props: ScopedProps<PopoverVirtualTriggerProps>): React.JSX.Element;
+        displayName: string;
+    };
+    Portal: React.FC<PopoverPortalProps>;
+    Content: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+    Close: React.ForwardRefExoticComponent<PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+    Arrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
     Viewport: React.ForwardRefExoticComponent<Omit<PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 };
-export type { PopoverRootProps, PopoverPortalProps, PopoverTriggerProps, PopoverAnchorProps, PopoverArrowProps, PopoverCloseProps, PopoverContentProps, PopoverViewportProps, };
+export { createPopoverScope };
+export type { PopoverRootProps, PopoverAnchorProps, PopoverTriggerProps, PopoverVirtualTriggerProps, PopoverPortalProps, PopoverContentProps, PopoverCloseProps, PopoverArrowProps, PopoverViewportProps, };
 //# sourceMappingURL=Popover.d.ts.map

package/dist/types/src/components/Popover/Popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAEL,KAAK,YAAY,IAAI,yBAAyB,EAC9C,KAAK,mBAAmB,IAAI,4BAA4B,EAExD,KAAK,mBAAmB,IAAI,4BAA4B,EAExD,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,kBAAkB,IAAI,2BAA2B,EAEtD,KAAK,iBAAiB,IAAI,0BAA0B,EAEpD,KAAK,iBAAiB,IAAI,0BAA0B,EAErD,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAsC,MAAM,OAAO,CAAC;AAG9F,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,KAAK,gBAAgB,GAAG,yBAAyB,CAAC;AAIlD,KAAK,kBAAkB,GAAG,2BAA2B,CAAC;AAItD,KAAK,mBAAmB,GAAG,4BAA4B,CAAC;AAIxD,KAAK,kBAAkB,GAAG,2BAA2B,CAAC;AAItD,KAAK,iBAAiB,GAAG,0BAA0B,CAAC;AAIpD,KAAK,iBAAiB,GAAG,eAAe,CAAC,0BAA0B,CAAC,CAAC;AAarE,KAAK,mBAAmB,GAAG,eAAe,CAAC,4BAA4B,CAAC,CAAC;AAmBzE,KAAK,oBAAoB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IACzF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B,CAAC;AAkBF,eAAO,MAAM,OAAO;;;;;;;;;;;;;CASnB,CAAC;AAEF,YAAY,EACV,gBAAgB,EAChB,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,mBAAmB,EACnB,oBAAoB,GACrB,CAAC"}
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popover/Popover.tsx"],"names":[],"mappings":"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"}

package/dist/types/src/components/Popover/Popover.stories.d.ts

@@ -3,17 +3,19 @@ import React, { type PropsWithChildren, type ReactNode } from 'react';
 declare const _default: {
     title: string;
     component: {
-        Root: React.FunctionComponent<import("@radix-ui/react-popover").PopoverProps>;
-        Portal: React.FC<import("@radix-ui/react-popover").PopoverPortalProps>;
-        Trigger: React.ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-        Anchor: React.ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
-        Arrow: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-popover").PopoverArrowProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-        } & React.RefAttributes<SVGSVGElement>>;
-        Close: React.ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
-        Content: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-popover").PopoverContentProps, "className"> & {
-            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
-        } & React.RefAttributes<HTMLDivElement>>;
+        Root: React.FC<import("./Popover").PopoverRootProps>;
+        Anchor: React.ForwardRefExoticComponent<import("./Popover").PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+        Trigger: React.ForwardRefExoticComponent<import("./Popover").PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+        VirtualTrigger: {
+            (props: import("./Popover").PopoverVirtualTriggerProps & {
+                __scopePopover?: import("@radix-ui/react-context").Scope;
+            }): React.JSX.Element;
+            displayName: string;
+        };
+        Portal: React.FC<import("./Popover").PopoverPortalProps>;
+        Content: React.ForwardRefExoticComponent<import("./Popover").PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+        Close: React.ForwardRefExoticComponent<import("./Popover").PopoverCloseProps & React.RefAttributes<HTMLButtonElement>>;
+        Arrow: React.ForwardRefExoticComponent<import("./Popover").PopoverArrowProps & React.RefAttributes<SVGSVGElement>>;
         Viewport: React.ForwardRefExoticComponent<Omit<import("./Popover").PopoverViewportProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
     };
     render: ({ openTrigger, children }: PropsWithChildren<{
@@ -33,4 +35,7 @@ export declare const Default: {
         children: string;
     };
 };
+export declare const VirtualTrigger: {
+    render: () => React.JSX.Element;
+};
 //# sourceMappingURL=Popover.stories.d.ts.map

package/dist/types/src/components/Popover/Popover.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;wCAUjB,iBAAiB,CAAC;QAAE,WAAW,EAAE,SAAS,CAAA;KAAE,CAAC;;;;;;;;AAclG,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC"}
+{"version":3,"file":"Popover.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Popover/Popover.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,aAAa,CAAC;AAErB,OAAO,KAAK,EAAE,EAAE,KAAK,iBAAiB,EAAE,KAAK,SAAS,EAAoB,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;wCAUnC,iBAAiB,CAAC;QAAE,WAAW,EAAE,SAAS,CAAA;KAAE,CAAC;;;;;;;;AAclG,wBAME;AAEF,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,cAAc;;CAqB1B,CAAC"}

package/package.json

@@ -1,20 +1,17 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.6.14-main.2b6a0f3",
+  "version": "0.6.14-main.f49f251",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": false,
+  "sideEffects": true,
   "exports": {
     ".": {
+      "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
-      "node": {
-        "require": "./dist/lib/node/index.cjs",
-        "default": "./dist/lib/node-esm/index.mjs"
-      },
-      "types": "./dist/types/src/index.d.ts"
+      "node": "./dist/lib/node-esm/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -27,6 +24,7 @@
   ],
   "dependencies": {
     "@fluentui/react-tabster": "^9.19.0",
+    "@radix-ui/primitive": "^1.0.0",
     "@radix-ui/react-alert-dialog": "^1.0.3",
     "@radix-ui/react-avatar": "^1.0.2",
     "@radix-ui/react-checkbox": "^1.0.3",
@@ -35,9 +33,14 @@
     "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-dropdown-menu": "2.0.7-rc.10",
-    "@radix-ui/react-popover": "1.0.8-rc.8",
+    "@radix-ui/react-dismissable-layer": "^1.1.1",
+    "@radix-ui/react-focus-guards": "^1.1.1",
+    "@radix-ui/react-focus-scope": "^1.1.0",
+    "@radix-ui/react-id": "^1.1.0",
+    "@radix-ui/react-menu": "^2.0.6",
     "@radix-ui/react-popper": "^1.1.2",
+    "@radix-ui/react-portal": "^1.1.2",
+    "@radix-ui/react-presence": "^1.1.1",
     "@radix-ui/react-primitive": "^1.0.2",
     "@radix-ui/react-scroll-area": "^1.0.3",
     "@radix-ui/react-select": "^1.2.1",
@@ -50,17 +53,19 @@
     "@radix-ui/react-toolbar": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.1.2",
     "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "aria-hidden": "^1.2.4",
     "date-fns": "^3.3.1",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
     "react-i18next": "^11.18.6",
-    "@dxos/debug": "0.6.14-main.2b6a0f3",
-    "@dxos/log": "0.6.14-main.2b6a0f3",
-    "@dxos/react-hooks": "0.6.14-main.2b6a0f3",
-    "@dxos/react-input": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-types": "0.6.14-main.2b6a0f3",
-    "@dxos/util": "0.6.14-main.2b6a0f3",
-    "@dxos/react-list": "0.6.14-main.2b6a0f3"
+    "react-remove-scroll": "^2.6.0",
+    "@dxos/log": "0.6.14-main.f49f251",
+    "@dxos/debug": "0.6.14-main.f49f251",
+    "@dxos/react-hooks": "0.6.14-main.f49f251",
+    "@dxos/react-input": "0.6.14-main.f49f251",
+    "@dxos/react-list": "0.6.14-main.f49f251",
+    "@dxos/util": "0.6.14-main.f49f251",
+    "@dxos/react-ui-types": "0.6.14-main.f49f251"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -72,15 +77,15 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.6.14-main.2b6a0f3",
-    "@dxos/util": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-theme": "0.6.14-main.2b6a0f3"
+    "@dxos/random": "0.6.14-main.f49f251",
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251",
+    "@dxos/util": "0.6.14-main.f49f251"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.6.14-main.2b6a0f3"
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Buttons/Button.tsx

@@ -5,7 +5,7 @@
 import { createContext } from '@radix-ui/react-context';
 import { Primitive } from '@radix-ui/react-primitive';
 import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
 import { type Density, type Elevation } from '@dxos/react-ui-types';
 
@@ -27,41 +27,51 @@ const [ButtonGroupProvider, useButtonGroupContext] = createContext<ButtonGroupCo
   inGroup: false,
 });
 
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  (
-    { classNames, children, density: propsDensity, elevation: propsElevation, variant = 'default', asChild, ...props },
-    ref,
-  ) => {
-    const { inGroup } = useButtonGroupContext(BUTTON_NAME);
-    const { tx } = useThemeContext();
-    const elevation = useElevationContext(propsElevation);
-    const density = useDensityContext(propsDensity);
-    const Root = asChild ? Slot : Primitive.button;
-    return (
-      <Root
-        ref={ref}
-        {...props}
-        data-variant={variant}
-        data-density={density}
-        data-props={inGroup ? 'grouped' : ''}
-        className={tx(
-          'button.root',
-          'button',
-          {
-            variant,
-            inGroup,
-            disabled: props.disabled,
-            density,
-            elevation,
-          },
-          classNames,
-        )}
-        {...(props.disabled && { disabled: true })}
-      >
-        {children}
-      </Root>
-    );
-  },
+const Button = memo(
+  forwardRef<HTMLButtonElement, ButtonProps>(
+    (
+      {
+        classNames,
+        children,
+        density: propsDensity,
+        elevation: propsElevation,
+        variant = 'default',
+        asChild,
+        ...props
+      },
+      ref,
+    ) => {
+      const { inGroup } = useButtonGroupContext(BUTTON_NAME);
+      const { tx } = useThemeContext();
+      const elevation = useElevationContext(propsElevation);
+      const density = useDensityContext(propsDensity);
+      const Root = asChild ? Slot : Primitive.button;
+      return (
+        <Root
+          ref={ref}
+          {...props}
+          data-variant={variant}
+          data-density={density}
+          data-props={inGroup ? 'grouped' : ''}
+          className={tx(
+            'button.root',
+            'button',
+            {
+              variant,
+              inGroup,
+              disabled: props.disabled,
+              density,
+              elevation,
+            },
+            classNames,
+          )}
+          {...(props.disabled && { disabled: true })}
+        >
+          {children}
+        </Root>
+      );
+    },
+  ),
 );
 
 Button.displayName = BUTTON_NAME;

package/src/components/Icon/Icon.tsx

@@ -3,7 +3,7 @@
 //
 
 import { type Primitive } from '@radix-ui/react-primitive';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, memo } from 'react';
 
 import { type Size } from '@dxos/react-ui-types';
 
@@ -12,11 +12,13 @@ import { type ThemedClassName } from '../../util';
 
 export type IconProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.svg>> & { icon: string; size?: Size };
 
-export const Icon = forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
-  const { tx } = useThemeContext();
-  return (
-    <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
-      <use href={`/icons.svg#${icon}`} />
-    </svg>
-  );
-});
+export const Icon = memo(
+  forwardRef<SVGSVGElement, IconProps>(({ icon, classNames, size, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <svg {...props} className={tx('icon.root', 'icon', { size }, classNames)} ref={forwardedRef}>
+        <use href={`/icons.svg#${icon}`} />
+      </svg>
+    );
+  }),
+);

package/src/components/Menus/DropdownMenu.stories.tsx

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import React from 'react';
+import React, { useRef, useState } from 'react';
 
 import { DropdownMenu } from './DropdownMenu';
 import { withTheme } from '../../testing';
@@ -105,3 +105,42 @@ export const Default = {
     chromatic: { delay: 1600 },
   },
 };
+
+export const VirtualTrigger = {
+  render: () => {
+    const [menuOpen, setMenuOpen] = useState(true);
+    const buttonRef = useRef<HTMLButtonElement | null>(null);
+    return (
+      <>
+        <Button onClick={() => setMenuOpen(true)} ref={buttonRef}>
+          Customise options
+        </Button>
+        <DropdownMenu.Root open={menuOpen} onOpenChange={setMenuOpen}>
+          <DropdownMenu.VirtualTrigger virtualRef={buttonRef} />
+          <DropdownMenu.Content sideOffset={4} collisionPadding={8}>
+            <DropdownMenu.Viewport>
+              <DropdownMenu.Item>
+                <span className='grow'>New Tab</span>
+                <span className='opacity-50'>⌘+T</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item>
+                <span className='grow'>New Window</span>
+                <span className='opacity-50'>⌘+N</span>
+              </DropdownMenu.Item>
+              <DropdownMenu.Item disabled>
+                <span className='grow'>New Private Window</span>
+                <span className='opacity-50'>⇧+⌘+N</span>
+              </DropdownMenu.Item>
+
+              <DropdownMenu.Separator />
+
+              <DropdownMenu.GroupLabel>People</DropdownMenu.GroupLabel>
+            </DropdownMenu.Viewport>
+
+            <DropdownMenu.Arrow />
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </>
+    );
+  },
+};