@dxos/react-ui 0.3.10 → 0.3.11-main.008b7c6

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

@@ -0,0 +1,106 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { ContextMenu } from './ContextMenu';
+import { withTheme } from '../../testing';
+
+const StorybookContextMenu = () => {
+  // NOTE(thure): Since long-tap will select text in some OSs, apply `select-none` to `ContextMenu.Trigger` where possible.
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger className='select-none border border-dashed border-neutral-400/50 rounded-lg flex items-center justify-center p-8 font-normal'>
+        Right-click / long-tap here.
+      </ContextMenu.Trigger>
+
+      <ContextMenu.Content collisionPadding={8}>
+        <ContextMenu.Viewport>
+          <ContextMenu.Item>
+            <span className='grow'>New Tab</span>
+            <span className='opacity-50'>⌘+T</span>
+          </ContextMenu.Item>
+          <ContextMenu.Item>
+            <span className='grow'>New Window</span>
+            <span className='opacity-50'>⌘+N</span>
+          </ContextMenu.Item>
+          <ContextMenu.Item disabled>
+            <span className='grow'>New Private Window</span>
+            <span className='opacity-50'>⇧+⌘+N</span>
+          </ContextMenu.Item>
+          {/* <ContextMenu.Sub> */}
+          {/*  <ContextMenu.SubTrigger> */}
+          {/*    More Tools */}
+          {/*    <div> */}
+          {/*      <ChevronRightIcon /> */}
+          {/*    </div> */}
+          {/*  </ContextMenu.SubTrigger> */}
+          {/*  <ContextMenu.Portal> */}
+          {/*    <ContextMenu.SubContent sideOffset={2} alignOffset={-5}> */}
+          {/*      <ContextMenu.Item> */}
+          {/*        Save Page As… <div>⌘+S</div> */}
+          {/*      </ContextMenu.Item> */}
+          {/*      <ContextMenu.Item>Create Shortcut…</ContextMenu.Item> */}
+          {/*      <ContextMenu.Item>Name Window…</ContextMenu.Item> */}
+          {/*      <ContextMenu.Separator /> */}
+          {/*      <ContextMenu.Item>Developer Tools</ContextMenu.Item> */}
+          {/*    </ContextMenu.SubContent> */}
+          {/*  </ContextMenu.Portal> */}
+          {/* </ContextMenu.Sub> */}
+
+          {/* <ContextMenu.Separator /> */}
+
+          {/* <ContextMenu.CheckboxItem checked={bookmarksChecked} onCheckedChange={setBookmarksChecked}> */}
+          {/*  <ContextMenu.ItemIndicator> */}
+          {/*    <CheckIcon /> */}
+          {/*  </ContextMenu.ItemIndicator> */}
+          {/*  Show Bookmarks <div>⌘+B</div> */}
+          {/* </ContextMenu.CheckboxItem> */}
+          {/* <ContextMenu.CheckboxItem checked={urlsChecked} onCheckedChange={setUrlsChecked}> */}
+          {/*  <ContextMenu.ItemIndicator> */}
+          {/*    <CheckIcon /> */}
+          {/*  </ContextMenu.ItemIndicator> */}
+          {/*  Show Full URLs */}
+          {/* </ContextMenu.CheckboxItem> */}
+
+          <ContextMenu.Separator />
+
+          <ContextMenu.GroupLabel>People</ContextMenu.GroupLabel>
+          {/* <ContextMenu.RadioGroup value={person} onValueChange={setPerson}> */}
+          {/*  <ContextMenu.RadioItem value='pedro'> */}
+          {/*    <ContextMenu.ItemIndicator> */}
+          {/*      <DotFilledIcon /> */}
+          {/*    </ContextMenu.ItemIndicator> */}
+          {/*    Pedro Duarte */}
+          {/*  </ContextMenu.RadioItem> */}
+          {/*  <ContextMenu.RadioItem value='colm'> */}
+          {/*    <ContextMenu.ItemIndicator> */}
+          {/*      <DotFilledIcon /> */}
+          {/*    </ContextMenu.ItemIndicator> */}
+          {/*    Colm Tuite */}
+          {/*  </ContextMenu.RadioItem> */}
+          {/* </ContextMenu.RadioGroup> */}
+        </ContextMenu.Viewport>
+
+        <ContextMenu.Arrow />
+      </ContextMenu.Content>
+    </ContextMenu.Root>
+  );
+};
+
+export default {
+  title: 'react-ui/Context menu',
+  component: StorybookContextMenu,
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Default = {
+  args: {},
+  parameters: {
+    chromatic: { delay: 1600 },
+  },
+};

package/src/components/Menus/ContextMenu.tsx

@@ -0,0 +1,170 @@
+//
+// Copyright 2023 DXOS.org
+//
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+type ContextMenuRootProps = ContextMenuPrimitive.ContextMenuProps;
+
+const ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
+
+type ContextMenuTriggerProps = ContextMenuPrimitive.ContextMenuTriggerProps;
+
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+type ContextMenuPortalProps = ContextMenuPrimitive.ContextMenuPortalProps;
+
+const ContextMenuPortal = ContextMenuPrimitive.Portal;
+
+type ContextMenuContentProps = ThemedClassName<ContextMenuPrimitive.ContextMenuContentProps> & {
+  constrainBlockSize?: boolean;
+};
+
+const ContextMenuContent = forwardRef<HTMLDivElement, ContextMenuContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Content
+        collisionPadding={8}
+        {...props}
+        className={tx('menu.content', 'menu', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      </ContextMenuPrimitive.Content>
+    );
+  },
+);
+
+type ContextMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const ContextMenuViewport = forwardRef<HTMLDivElement, ContextMenuViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+type ContextMenuArrowProps = ThemedClassName<ContextMenuPrimitive.ContextMenuArrowProps>;
+
+const ContextMenuArrow = forwardRef<SVGSVGElement, ContextMenuArrowProps>(({ classNames, ...props }, forwardedRef) => {
+  const { tx } = useThemeContext();
+  return (
+    <ContextMenuPrimitive.Arrow
+      {...props}
+      className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+      ref={forwardedRef}
+    />
+  );
+});
+
+type ContextMenuGroupProps = ContextMenuPrimitive.ContextMenuGroupProps;
+
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+type ContextMenuItemIndicatorProps = ContextMenuPrimitive.ContextMenuItemIndicatorProps;
+
+const ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
+
+type ContextMenuItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuItemProps>;
+
+const ContextMenuItem = forwardRef<HTMLDivElement, ContextMenuItemProps>(
+  ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Item
+        {...props}
+        className={tx('menu.item', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ContextMenuCheckboxItemProps = ThemedClassName<ContextMenuPrimitive.ContextMenuCheckboxItemProps>;
+
+const ContextMenuCheckboxItem = forwardRef<HTMLDivElement, ContextMenuCheckboxItemProps>(
+  ({ classNames, ...props }: ContextMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.CheckboxItem
+        {...props}
+        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ContextMenuSeparatorProps = ThemedClassName<ContextMenuPrimitive.ContextMenuSeparatorProps>;
+
+const ContextMenuSeparator = forwardRef<HTMLDivElement, ContextMenuSeparatorProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Separator
+        {...props}
+        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type ContextMenuGroupLabelProps = ThemedClassName<ContextMenuPrimitive.ContextMenuLabelProps>;
+
+const ContextMenuGroupLabel = forwardRef<HTMLDivElement, ContextMenuGroupLabelProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <ContextMenuPrimitive.Label
+        {...props}
+        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+export const ContextMenu = {
+  Root: ContextMenuRoot,
+  Trigger: ContextMenuTrigger,
+  Portal: ContextMenuPortal,
+  Content: ContextMenuContent,
+  Viewport: ContextMenuViewport,
+  Arrow: ContextMenuArrow,
+  Group: ContextMenuGroup,
+  Item: ContextMenuItem,
+  CheckboxItem: ContextMenuCheckboxItem,
+  ItemIndicator: ContextMenuItemIndicator,
+  Separator: ContextMenuSeparator,
+  GroupLabel: ContextMenuGroupLabel,
+};
+
+export type {
+  ContextMenuRootProps,
+  ContextMenuTriggerProps,
+  ContextMenuPortalProps,
+  ContextMenuContentProps,
+  ContextMenuViewportProps,
+  ContextMenuArrowProps,
+  ContextMenuGroupProps,
+  ContextMenuItemProps,
+  ContextMenuCheckboxItemProps,
+  ContextMenuItemIndicatorProps,
+  ContextMenuSeparatorProps,
+  ContextMenuGroupLabelProps,
+};

package/src/components/Menus/DropdownMenu.tsx

@@ -0,0 +1,173 @@
+//
+// Copyright 2023 DXOS.org
+//
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import React, { type ComponentPropsWithRef, forwardRef } from 'react';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+import { ElevationProvider } from '../ElevationProvider';
+
+type DropdownMenuRootProps = DropdownMenuPrimitive.DropdownMenuProps;
+
+const DropdownMenuRoot = DropdownMenuPrimitive.DropdownMenu;
+
+type DropdownMenuTriggerProps = DropdownMenuPrimitive.DropdownMenuTriggerProps;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+type DropdownMenuPortalProps = DropdownMenuPrimitive.DropdownMenuPortalProps;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+type DropdownMenuContentProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuContentProps> & {
+  constrainBlockSize?: boolean;
+};
+
+const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Content
+        sideOffset={4}
+        collisionPadding={8}
+        {...props}
+        className={tx('menu.content', 'menu', {}, classNames)}
+        ref={forwardedRef}
+      >
+        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
+      </DropdownMenuPrimitive.Content>
+    );
+  },
+);
+
+type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
+  asChild?: boolean;
+};
+
+const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
+  ({ classNames, asChild, children, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    const Root = asChild ? Slot : Primitive.div;
+    return (
+      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+        {children}
+      </Root>
+    );
+  },
+);
+
+type DropdownMenuArrowProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuArrowProps>;
+
+const DropdownMenuArrow = forwardRef<SVGSVGElement, DropdownMenuArrowProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Arrow
+        {...props}
+        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuGroupProps = DropdownMenuPrimitive.DropdownMenuGroupProps;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+type DropdownMenuItemIndicatorProps = DropdownMenuPrimitive.DropdownMenuItemIndicatorProps;
+
+const DropdownMenuItemIndicator = DropdownMenuPrimitive.ItemIndicator;
+
+type DropdownMenuItemProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuItemProps>;
+
+const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
+  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Item
+        {...props}
+        className={tx('menu.item', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuCheckboxItemProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps>;
+
+const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
+  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.CheckboxItem
+        {...props}
+        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuSeparatorProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuSeparatorProps>;
+
+const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Separator
+        {...props}
+        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+type DropdownMenuGroupLabelProps = ThemedClassName<DropdownMenuPrimitive.DropdownMenuLabelProps>;
+
+const DropdownMenuGroupLabel = forwardRef<HTMLDivElement, DropdownMenuGroupLabelProps>(
+  ({ classNames, ...props }, forwardedRef) => {
+    const { tx } = useThemeContext();
+    return (
+      <DropdownMenuPrimitive.Label
+        {...props}
+        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+export const DropdownMenu = {
+  Root: DropdownMenuRoot,
+  Trigger: DropdownMenuTrigger,
+  Portal: DropdownMenuPortal,
+  Content: DropdownMenuContent,
+  Viewport: DropdownMenuViewport,
+  Arrow: DropdownMenuArrow,
+  Group: DropdownMenuGroup,
+  Item: DropdownMenuItem,
+  CheckboxItem: DropdownMenuCheckboxItem,
+  ItemIndicator: DropdownMenuItemIndicator,
+  Separator: DropdownMenuSeparator,
+  GroupLabel: DropdownMenuGroupLabel,
+};
+
+export type {
+  DropdownMenuRootProps,
+  DropdownMenuTriggerProps,
+  DropdownMenuPortalProps,
+  DropdownMenuContentProps,
+  DropdownMenuViewportProps,
+  DropdownMenuArrowProps,
+  DropdownMenuGroupProps,
+  DropdownMenuItemProps,
+  DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicatorProps,
+  DropdownMenuSeparatorProps,
+  DropdownMenuGroupLabelProps,
+};

package/src/components/{DropdownMenu → Menus}/index.ts

@@ -2,4 +2,5 @@
 // Copyright 2023 DXOS.org
 //
 
+export * from './ContextMenu';
 export * from './DropdownMenu';

package/src/components/index.ts

@@ -7,7 +7,7 @@ export * from './Avatars';
 export * from './Breadcrumb';
 export * from './Buttons';
 export * from './Dialogs';
-export * from './DropdownMenu';
+export * from './Menus';
 export * from './Input';
 export * from './Link';
 export * from './Lists';

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,iBAAiB,IAAI,8BAA8B,EAExD,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,uBAAuB,IAAI,gCAAgC,EAEhE,KAAK,wBAAwB,IAAI,iCAAiC,EAElE,KAAK,sBAAsB,IAAI,+BAA+B,EAE9D,KAAK,sBAAsB,IAAI,+BAA+B,EAE9D,KAAK,qBAAqB,IAAI,8BAA8B,EAE5D,KAAK,6BAA6B,IAAI,sCAAsC,EAE5E,KAAK,8BAA8B,IAAI,uCAAuC,EAE9E,KAAK,0BAA0B,IAAI,mCAAmC,EAEtE,KAAK,sBAAsB,IAAI,+BAA+B,EAC/D,MAAM,+BAA+B,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAGtE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,YAAY,CAAC;AAGlD,KAAK,qBAAqB,GAAG,8BAA8B,CAAC;AAI5D,KAAK,wBAAwB,GAAG,iCAAiC,CAAC;AAIlE,KAAK,uBAAuB,GAAG,gCAAgC,CAAC;AAIhE,KAAK,wBAAwB,GAAG,eAAe,CAAC,iCAAiC,CAAC,GAAG;IAAE,kBAAkB,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAmBtH,KAAK,yBAAyB,GAAG,eAAe,CAAC,qBAAqB,CAAC,OAAO,SAAS,CAAC,GAAG,CAAC,CAAC,GAAG;IAC9F,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAkBF,KAAK,sBAAsB,GAAG,eAAe,CAAC,+BAA+B,CAAC,CAAC;AAe/E,KAAK,sBAAsB,GAAG,+BAA+B,CAAC;AAI9D,KAAK,8BAA8B,GAAG,uCAAuC,CAAC;AAI9E,KAAK,qBAAqB,GAAG,eAAe,CAAC,8BAA8B,CAAC,CAAC;AAe7E,KAAK,6BAA6B,GAAG,eAAe,CAAC,sCAAsC,CAAC,CAAC;AAe7F,KAAK,0BAA0B,GAAG,eAAe,CAAC,mCAAmC,CAAC,CAAC;AAevF,KAAK,2BAA2B,GAAG,eAAe,CAAC,+BAA+B,CAAC,CAAC;AAepF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;CAaxB,CAAC;AAEF,YAAY,EACV,qBAAqB,EACrB,wBAAwB,EACxB,uBAAuB,EACvB,wBAAwB,EACxB,yBAAyB,EACzB,sBAAsB,EACtB,sBAAsB,EACtB,qBAAqB,EACrB,6BAA6B,EAC7B,8BAA8B,EAC9B,0BAA0B,EAC1B,2BAA2B,GAC5B,CAAC"}

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

@@ -1 +0,0 @@
-{"version":3,"file":"DropdownMenu.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/DropdownMenu.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;;;;;;;;;;;AAyFpB,wBAKE;AAEF,eAAO,MAAM,OAAO;;;;;;;CAKnB,CAAC"}

package/dist/types/src/components/DropdownMenu/index.d.ts

@@ -1,2 +0,0 @@
-export * from './DropdownMenu';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/DropdownMenu/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/DropdownMenu/index.ts"],"names":[],"mappings":"AAIA,cAAc,gBAAgB,CAAC"}

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -1,198 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-import {
-  Root as DropdownMenuRootPrimitive,
-  type DropdownMenuProps as DropdownMenuRootPrimitiveProps,
-  DropdownMenuTrigger as DropdownMenuTriggerPrimitive,
-  type DropdownMenuTriggerProps as DropdownMenuTriggerPrimitiveProps,
-  DropdownMenuPortal as DropdownMenuPortalPrimitive,
-  type DropdownMenuPortalProps as DropdownMenuPortalPrimitiveProps,
-  DropdownMenuContent as DropdownMenuContentPrimitive,
-  type DropdownMenuContentProps as DropdownMenuContentPrimitiveProps,
-  DropdownMenuArrow as DropdownMenuArrowPrimitive,
-  type DropdownMenuArrowProps as DropdownMenuArrowPrimitiveProps,
-  DropdownMenuGroup as DropdownMenuGroupPrimitive,
-  type DropdownMenuGroupProps as DropdownMenuGroupPrimitiveProps,
-  DropdownMenuItem as DropdownMenuItemPrimitive,
-  type DropdownMenuItemProps as DropdownMenuItemPrimitiveProps,
-  DropdownMenuCheckboxItem as DropdownMenuCheckboxItemPrimitive,
-  type DropdownMenuCheckboxItemProps as DropdownMenuCheckboxItemPrimitiveProps,
-  DropdownMenuItemIndicator as DropdownMenuItemIndicatorPrimitive,
-  type DropdownMenuItemIndicatorProps as DropdownMenuItemIndicatorPrimitiveProps,
-  DropdownMenuSeparator as DropdownMenuSeparatorPrimitive,
-  type DropdownMenuSeparatorProps as DropdownMenuSeparatorPrimitiveProps,
-  DropdownMenuLabel as DropdownMenuLabelPrimitive,
-  type DropdownMenuLabelProps as DropdownMenuLabelPrimitiveProps,
-} from '@radix-ui/react-dropdown-menu';
-import { Primitive } from '@radix-ui/react-primitive';
-import { Slot } from '@radix-ui/react-slot';
-import React, { type ComponentPropsWithRef, forwardRef } from 'react';
-
-import { useThemeContext } from '../../hooks';
-import { type ThemedClassName } from '../../util';
-import { ElevationProvider } from '../ElevationProvider';
-
-type DropdownMenuRootProps = DropdownMenuRootPrimitiveProps;
-
-const DropdownMenuRoot = DropdownMenuRootPrimitive;
-
-type DropdownMenuTriggerProps = DropdownMenuTriggerPrimitiveProps;
-
-const DropdownMenuTrigger = DropdownMenuTriggerPrimitive;
-
-type DropdownMenuPortalProps = DropdownMenuPortalPrimitiveProps;
-
-const DropdownMenuPortal = DropdownMenuPortalPrimitive;
-
-type DropdownMenuContentProps = ThemedClassName<DropdownMenuContentPrimitiveProps> & { constrainBlockSize?: boolean };
-
-const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ classNames, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuContentPrimitive
-        sideOffset={4}
-        collisionPadding={8}
-        {...props}
-        className={tx('dropdownMenu.content', 'dropdown-menu', {}, classNames)}
-        ref={forwardedRef}
-      >
-        <ElevationProvider elevation='chrome'>{children}</ElevationProvider>
-      </DropdownMenuContentPrimitive>
-    );
-  },
-);
-
-type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
-  asChild?: boolean;
-};
-
-const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
-  ({ classNames, asChild, children, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
-    return (
-      <Root
-        {...props}
-        className={tx('dropdownMenu.viewport', 'dropdown-menu__viewport', {}, classNames)}
-        ref={forwardedRef}
-      >
-        {children}
-      </Root>
-    );
-  },
-);
-
-type DropdownMenuArrowProps = ThemedClassName<DropdownMenuArrowPrimitiveProps>;
-
-const DropdownMenuArrow = forwardRef<SVGSVGElement, DropdownMenuArrowProps>(
-  ({ classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuArrowPrimitive
-        {...props}
-        className={tx('dropdownMenu.arrow', 'dropdown-menu__arrow', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DropdownMenuGroupProps = DropdownMenuGroupPrimitiveProps;
-
-const DropdownMenuGroup = DropdownMenuGroupPrimitive;
-
-type DropdownMenuItemIndicatorProps = DropdownMenuItemIndicatorPrimitiveProps;
-
-const DropdownMenuItemIndicator = DropdownMenuItemIndicatorPrimitive;
-
-type DropdownMenuItemProps = ThemedClassName<DropdownMenuItemPrimitiveProps>;
-
-const DropdownMenuItem = forwardRef<HTMLDivElement, DropdownMenuItemProps>(
-  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuItemPrimitive
-        {...props}
-        className={tx('dropdownMenu.item', 'dropdown-menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DropdownMenuCheckboxItemProps = ThemedClassName<DropdownMenuCheckboxItemPrimitiveProps>;
-
-const DropdownMenuCheckboxItem = forwardRef<HTMLDivElement, DropdownMenuCheckboxItemProps>(
-  ({ classNames, ...props }: DropdownMenuItemProps, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuCheckboxItemPrimitive
-        {...props}
-        className={tx('dropdownMenu.item', 'dropdown-menu__item--checkbox', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DropdownMenuSeparatorProps = ThemedClassName<DropdownMenuSeparatorPrimitiveProps>;
-
-const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
-  ({ classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuSeparatorPrimitive
-        {...props}
-        className={tx('dropdownMenu.separator', 'dropdown-menu__item', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-type DropdownMenuGroupLabelProps = ThemedClassName<DropdownMenuLabelPrimitiveProps>;
-
-const DropdownMenuGroupLabel = forwardRef<HTMLDivElement, DropdownMenuGroupLabelProps>(
-  ({ classNames, ...props }, forwardedRef) => {
-    const { tx } = useThemeContext();
-    return (
-      <DropdownMenuLabelPrimitive
-        {...props}
-        className={tx('dropdownMenu.groupLabel', 'dropdown-menu__group__label', {}, classNames)}
-        ref={forwardedRef}
-      />
-    );
-  },
-);
-
-export const DropdownMenu = {
-  Root: DropdownMenuRoot,
-  Trigger: DropdownMenuTrigger,
-  Portal: DropdownMenuPortal,
-  Content: DropdownMenuContent,
-  Viewport: DropdownMenuViewport,
-  Arrow: DropdownMenuArrow,
-  Group: DropdownMenuGroup,
-  Item: DropdownMenuItem,
-  CheckboxItem: DropdownMenuCheckboxItem,
-  ItemIndicator: DropdownMenuItemIndicator,
-  Separator: DropdownMenuSeparator,
-  GroupLabel: DropdownMenuGroupLabel,
-};
-
-export type {
-  DropdownMenuRootProps,
-  DropdownMenuTriggerProps,
-  DropdownMenuPortalProps,
-  DropdownMenuContentProps,
-  DropdownMenuViewportProps,
-  DropdownMenuArrowProps,
-  DropdownMenuGroupProps,
-  DropdownMenuItemProps,
-  DropdownMenuCheckboxItemProps,
-  DropdownMenuItemIndicatorProps,
-  DropdownMenuSeparatorProps,
-  DropdownMenuGroupLabelProps,
-};