@dxos/react-ui 0.8.4-main.8360d9e660 → 0.8.4-main.8baae0fced

package/src/components/Input/Input.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { type MessageValence } from '@dxos/ui-types';
 
 import { withLayoutVariants, withTheme } from '../../testing';
-
 import {
   type CheckboxProps,
   Input,
@@ -28,7 +27,7 @@ type VariantMap = {
 
 type Variant = { [K in keyof VariantMap]: { type: K } & VariantMap[K] }[keyof VariantMap];
 
-type StoryProps = Partial<{
+type DefaultStoryProps = Partial<{
   kind: keyof VariantMap;
   label: string;
   labelVisuallyHidden: boolean;
@@ -47,7 +46,7 @@ const DefaultStory = ({
   validationValence,
   validationMessage,
   ...props
-}: StoryProps) => {
+}: DefaultStoryProps) => {
   return (
     <Input.Root {...{ validationValence }}>
       <Input.Label srOnly={labelVisuallyHidden}>{label}</Input.Label>
@@ -75,7 +74,7 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<StoryProps & Variant>;
+type Story = StoryObj<DefaultStoryProps & Variant>;
 
 export const DensityCoarse: Story = {
   args: {

package/src/components/Input/Input.tsx

@@ -130,13 +130,13 @@ type TextInputProps = InputSharedProps & ThemedClassName<TextInputPrimitiveProps
 
 const TextInput = forwardRef<HTMLInputElement, InputScopedProps<TextInputProps>>(
   (
-    { __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, noAutoFill, ...props },
+    { __inputScope, classNames, density: densityProp, elevation: elevationProp, variant, noAutoFill, ...props },
     forwardedRef,
   ) => {
     const { hasIosKeyboard } = useThemeContext();
     const { tx } = useThemeContext();
-    const density = useDensityContext(propsDensity);
-    const elevation = useElevationContext(propsElevation);
+    const density = useDensityContext(densityProp);
+    const elevation = useElevationContext(elevationProp);
     const { validationValence } = useInputContext(INPUT_NAME, __inputScope);
 
     return (

package/src/components/Link/Link.stories.tsx

@@ -5,7 +5,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '../../testing';
-
 import { Link } from './Link';
 
 const meta = {

package/src/components/Link/Link.tsx

@@ -16,9 +16,17 @@ export type LinkProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.a
   }>;
 
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ asChild, variant, classNames, ...props }, forwardedRef) => {
+  ({ classNames, asChild, variant, target = '_blank', rel = 'noreferrer', ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
     const Comp = asChild ? Slot : Primitive.a;
-    return <Comp {...props} className={tx('link.root', { variant }, classNames)} ref={forwardedRef} />;
+    return (
+      <Comp
+        {...props}
+        target={target}
+        rel={rel}
+        className={tx('link.root', { variant }, classNames)}
+        ref={forwardedRef}
+      />
+    );
   },
 );

package/src/components/List/List.stories.tsx

@@ -13,7 +13,6 @@ import { getSize, ghostHover, mx, surfaceShadow } from '@dxos/ui-theme';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
-
 import { List, ListItem, type ListScopedProps } from './List';
 
 const meta = {
@@ -177,7 +176,7 @@ export const Collapsible: Story = {
       <List {...args}>
         {items.map(({ id, text, body }, index) => (
           <ListItem.Root key={id} id={id} collapsible={index !== 2} defaultOpen={index % 2 === 0}>
-            <div role='none' className='grow flex'>
+            <div className='grow flex'>
               {index !== 2 ? <ListItem.OpenTrigger /> : <ListItem.MockOpenTrigger />}
               <ListItem.Heading classNames='grow pt-2'>{text}</ListItem.Heading>
               <ListItem.Endcap>

package/src/components/List/List.tsx

@@ -24,24 +24,25 @@ import {
   useListContext,
   useListItemContext,
 } from '@dxos/react-list';
+import { composable, composableProps } from '@dxos/ui-theme';
 import { type Density } from '@dxos/ui-types';
 
 import { useDensityContext, useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { DensityProvider } from '../DensityProvider';
 import { Icon } from '../Icon';
-
 import { ListDropIndicator } from './ListDropIndicator';
 
-type ListProps = ThemedClassName<ListPrimitiveProps> & { density?: Density };
+type ListProps = ThemedClassName<ListPrimitiveProps & { density?: Density }>;
 
-const List = forwardRef<HTMLOListElement, ListProps>(({ classNames, children, ...props }, forwardedRef) => {
+const List = composable<HTMLOListElement, ListProps>(({ children, ...props }, forwardedRef) => {
   const { tx } = useThemeContext();
   const density = useDensityContext(props.density);
+  const { className, ...rest } = composableProps(props);
 
   return (
     <DensityProvider density={density}>
-      <ListPrimitive {...props} className={tx('list.root', {}, classNames)} ref={forwardedRef}>
+      <ListPrimitive {...rest} className={tx('list.root', {}, className)} ref={forwardedRef}>
         {children}
       </ListPrimitive>
     </DensityProvider>
@@ -74,7 +75,7 @@ const MockListItemOpenTrigger = ({
 }: ThemedClassName<Omit<ComponentPropsWithoutRef<'div'>, 'children'>>) => {
   const density = useDensityContext();
   const { tx } = useThemeContext();
-  return <div role='none' {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
+  return <div {...props} className={tx('list.item.openTrigger', { density }, classNames)} />;
 };
 
 type ListItemHeadingProps = ThemedClassName<ListPrimitiveItemHeadingProps>;
@@ -89,7 +90,7 @@ const ListItemHeading = forwardRef<HTMLParagraphElement, ListItemHeadingProps>(
         className={tx('list.item.heading', { density }, classNames)}
         ref={forwardedRef}
       >
-        {children}
+        <span>{children}</span>
       </ListPrimitiveItemHeading>
     );
   },

package/src/components/List/ListDropIndicator.tsx

@@ -52,7 +52,6 @@ export const ListDropIndicator = ({
 
   return (
     <div
-      role='none'
       style={
         {
           '--line-thickness': `${strokeSize}px`,

package/src/components/List/Tree.stories.tsx

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { Tree, TreeItem } from './Tree';
 
 type StorybookTreeProps = {
@@ -25,7 +24,7 @@ const createKey = (key: string, prefix?: string) => (prefix === undefined ? key
 const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
   const keys = Array.isArray(data) ? Array.from(data.keys()) : Object.keys(data);
   return (
-    <Tree.Root density='fine'>
+    <Tree.Root>
       {keys.map((key) => {
         const id = createKey(String(key), prefix);
         const value = data[key as keyof typeof data];
@@ -33,7 +32,7 @@ const StorybookTreeItem = ({ data, prefix }: StorybookTreeItemProps) => {
 
         return (
           <TreeItem.Root key={id} id={id} collapsible={!valueIsScalar} defaultOpen>
-            <div role='none' className='grow flex'>
+            <div className='grow flex'>
               {valueIsScalar ? <TreeItem.MockOpenTrigger /> : <TreeItem.OpenTrigger />}
               <TreeItem.Heading classNames='grow pt-1'>{valueIsScalar ? String(value) : key}</TreeItem.Heading>
             </div>

package/src/components/List/Tree.tsx

@@ -5,7 +5,6 @@
 import React, { type ComponentPropsWithoutRef, type FC, type ForwardRefExoticComponent, forwardRef } from 'react';
 
 import { type ThemedClassName } from '../../util';
-
 import {
   LIST_ITEM_NAME,
   List,

package/src/components/List/Treegrid.stories.tsx

@@ -5,14 +5,13 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 import { withTheme } from '../../testing';
 import { Icon } from '../Icon';
+import { Treegrid, TREEGRID_PARENT_OF_SEPARATOR, TREEGRID_PATH_SEPARATOR } from './Treegrid';
 
-import { Treegrid } from './Treegrid';
-
-faker.seed(1234);
+random.seed(1234);
 
 type StorybookNode = {
   id: string;
@@ -32,33 +31,33 @@ const content = {
   title: 'Root',
   nodes: [
     {
-      id: faker.string.uuid(),
+      id: random.string.uuid(),
       title: 'Personal Space',
       icon: 'ph--house--regular',
       nodes: [
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
           nodes: [
             {
-              id: faker.string.uuid(),
-              title: faker.commerce.productName(),
+              id: random.string.uuid(),
+              title: random.commerce.productName(),
               nodes: [
                 {
-                  id: faker.string.uuid(),
-                  title: faker.commerce.productName(),
+                  id: random.string.uuid(),
+                  title: random.commerce.productName(),
                 },
                 {
-                  id: faker.string.uuid(),
-                  title: faker.commerce.productName(),
+                  id: random.string.uuid(),
+                  title: random.commerce.productName(),
                 },
               ],
             },
@@ -67,24 +66,24 @@ const content = {
       ],
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--planet--regular',
       nodes: [
         {
-          id: faker.string.uuid(),
-          title: faker.commerce.productName(),
+          id: random.string.uuid(),
+          title: random.commerce.productName(),
         },
       ],
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--sailboat--regular',
     },
     {
-      id: faker.string.uuid(),
-      title: faker.commerce.productName(),
+      id: random.string.uuid(),
+      title: random.commerce.productName(),
       icon: 'ph--planet--regular',
     },
   ],
@@ -129,8 +128,8 @@ const DefaultStory = () => {
         return (
           <Treegrid.Row
             key={node.id}
-            id={path.join(Treegrid.PATH_SEPARATOR)}
-            {...(parentOf && { parentOf: parentOf.join(Treegrid.PARENT_OF_SEPARATOR) })}
+            id={path.join(TREEGRID_PATH_SEPARATOR)}
+            {...(parentOf && { parentOf: parentOf.join(TREEGRID_PARENT_OF_SEPARATOR) })}
           >
             <Treegrid.Cell indent classNames='flex items-center'>
               {node.icon && <Icon icon={node.icon} classNames='w-[1em] h-[1em] my-1' />}

package/src/components/List/Treegrid.tsx

@@ -15,10 +15,12 @@ import React, {
   useCallback,
 } from 'react';
 
+import { composable, composableProps } from '@dxos/ui-theme';
+
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 
-// TODO(thure): A lot of the accessible affordances for this kind of thing need to be implemented per https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
+// TODO(thure): https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role
 
 const TREEGRID_ROW_NAME = 'TreegridRow';
 
@@ -34,17 +36,19 @@ type TreegridRowContextValue = {
 const [TreegridRowProvider, useTreegridRowContext] =
   createTreegridRowContext<TreegridRowContextValue>(TREEGRID_ROW_NAME);
 
-const PATH_SEPARATOR = '~';
-const PARENT_OF_SEPARATOR = ' ';
+// TODO(burdon): Replace with functions.
+export const TREEGRID_PATH_SEPARATOR = '~';
+export const TREEGRID_PARENT_OF_SEPARATOR = ' ';
 
 type TreegridRootProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   gridTemplateColumns: CSSProperties['gridTemplateColumns'];
   asChild?: boolean;
 };
 
-const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
-  ({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
+const TreegridRoot = composable<HTMLDivElement, TreegridRootProps>(
+  ({ asChild, classNames, children, style, gridTemplateColumns, onKeyDown: onKeyDownProp, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
+    const { className, role: _role, ...rest } = composableProps<HTMLDivElement>(props, { classNames });
     const Comp = asChild ? Slot : Primitive.div;
     const { findFirstFocusable } = useFocusFinders();
 
@@ -89,16 +93,16 @@ const TreegridRoot = forwardRef<HTMLDivElement, TreegridRootProps>(
             break;
           }
         }
-        props.onKeyDown?.(event);
+        onKeyDownProp?.(event);
       },
-      [findFirstFocusable],
+      [findFirstFocusable, onKeyDownProp],
     );
 
     return (
       <Comp
         role='treegrid'
-        {...props}
-        className={tx('treegrid.root', {}, classNames)}
+        {...rest}
+        className={tx('treegrid.root', {}, className)}
         style={{ ...style, gridTemplateColumns }}
         onKeyDown={handleKeyDown}
         ref={forwardedRef}
@@ -136,7 +140,7 @@ const TreegridRow = forwardRef<HTMLDivElement, TreegridRowScopedProps<TreegridRo
   ) => {
     const { tx } = useThemeContext();
     const Comp = asChild ? Slot : Primitive.div;
-    const pathParts = id.split(PATH_SEPARATOR);
+    const pathParts = id.split(TREEGRID_PATH_SEPARATOR);
     const level = pathParts.length - 1;
     const [open, onOpenChange] = useControllableState({
       prop: propsOpen,
@@ -181,8 +185,4 @@ export const Treegrid = {
   Root: TreegridRoot,
   Row: TreegridRow,
   Cell: TreegridCell,
-  PARENT_OF_SEPARATOR,
-  PATH_SEPARATOR,
-  createTreegridRowScope,
-  useTreegridRowContext,
 };

package/src/components/Main/Main.stories.tsx

@@ -8,7 +8,6 @@ import React from 'react';
 import { withLayout, withTheme } from '../../testing';
 import { IconButton } from '../Button';
 import { Toolbar } from '../Toolbar';
-
 import { Main, useSidebars } from './Main';
 
 type StoryMainArgs = {};

package/src/components/Main/Main.tsx

@@ -30,7 +30,6 @@ import { type MainStyleProps, osTranslations } from '@dxos/ui-theme';
 import { useThemeContext } from '../../hooks';
 import { type ThemedClassName } from '../../util';
 import { type Label, toLocalizedString, useTranslation } from '../ThemeProvider';
-
 import { useSwipeToDismiss } from './useSwipeToDismiss';
 
 const MAIN_NAME = 'Main';

package/src/components/MediaPlayer/MediaPlayer.stories.tsx

@@ -0,0 +1,50 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { MediaPlayer } from './MediaPlayer';
+
+const meta = {
+  title: 'ui/react-ui-core/components/MediaPlayer',
+  component: MediaPlayer,
+  decorators: [withTheme()],
+  parameters: { layout: 'centered' },
+} satisfies Meta<typeof MediaPlayer>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Video: Story = {
+  args: {
+    // TODO(burdon): CORS issue.
+    src: 'https://customer-5rxcjpyab08avpmn.cloudflarestream.com/f58459bcdf3a6f3e93644a4e0f39b22a/downloads/default.mp4',
+    classNames: 'max-w-[640px]',
+  },
+};
+
+export const Audio: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3',
+    classNames: 'min-w-[480px]',
+  },
+};
+
+export const ExplicitKind: Story = {
+  args: {
+    src: 'https://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Kangaroo_MusiQue_-_The_Neverwritten_Role_Playing_Game.mp3',
+    kind: 'audio',
+    classNames: 'min-w-[480px]',
+  },
+};
+
+export const Streaming: Story = {
+  args: {
+    src: 'https://customer-5rxcjpyab08avpmn.cloudflarestream.com/f58459bcdf3a6f3e93644a4e0f39b22a/iframe?poster=https%3A%2F%2Fcustomer-5rxcjpyab08avpmn.cloudflarestream.com%2Ff58459bcdf3a6f3e93644a4e0f39b22a%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600',
+    classNames: 'min-w-[480px]',
+  },
+};

package/src/components/MediaPlayer/MediaPlayer.tsx

@@ -0,0 +1,153 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { mx } from '@dxos/ui-theme';
+
+import { type ThemedClassName } from '../../util';
+
+export type MediaKind = 'video' | 'audio';
+
+const VIDEO_EXTENSIONS = ['.mp4', '.webm', '.ogv', '.mov', '.m4v'];
+const AUDIO_EXTENSIONS = ['.mp3', '.wav', '.ogg', '.m4a', '.aac', '.flac'];
+
+/** iframe sandbox flags compatible with typical oEmbed-style players. */
+const DEFAULT_IFRAME_SANDBOX = 'allow-scripts allow-same-origin allow-presentation';
+
+/**
+ * Best-effort detection of `video` vs `audio` from a media URL.
+ * Inspects the pathname's extension (ignoring query/hash). Returns `undefined`
+ * when the URL doesn't look like a recognised media file — callers should
+ * default to 'video' or render a fallback (e.g. iframe / img).
+ */
+export const detectMediaKind = (src: string): MediaKind | undefined => {
+  // Strip query and hash, then take the last path segment's extension.
+  const pathname = src.split(/[?#]/, 1)[0]!;
+  const lower = pathname.toLowerCase();
+  if (VIDEO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'video';
+  }
+  if (AUDIO_EXTENSIONS.some((extension) => lower.endsWith(extension))) {
+    return 'audio';
+  }
+
+  return undefined;
+};
+
+/**
+ * Heuristic match for URLs that should render as native `<video>` / `<audio>`
+ * (i.e. URLs ending in a recognised media extension).
+ *
+ * NB: legacy embed URLs (Cloudflare Stream etc. — paths containing `iframe`)
+ * serve an HTML player page, **not** a media stream, so they cannot be loaded
+ * via `<video>`. Those are detected by {@link isLegacyIframeUrl} and rendered
+ * via `<iframe>` instead.
+ */
+export const isEmbedUrl = (src: string): boolean => detectMediaKind(src) !== undefined;
+
+/** Match URLs whose pathname has an `/iframe` segment (e.g. Cloudflare Stream embeds). */
+const LEGACY_IFRAME_PATH_PATTERN = /\/iframe(?:[/?#]|$)/i;
+
+const isLegacyIframeUrl = (src: string): boolean => {
+  const pathAndQuery = src.split('#', 1)[0]!;
+  return LEGACY_IFRAME_PATH_PATTERN.test(pathAndQuery);
+};
+
+export type MediaPlayerProps = ThemedClassName<{
+  src: string;
+  /** Override auto-detection. When omitted, `detectMediaKind(src)` is used and falls back to 'video'. */
+  kind?: MediaKind;
+  controls?: boolean;
+  autoPlay?: boolean;
+  loop?: boolean;
+  muted?: boolean;
+  /** Accessible label for the `<video>` / `<audio>` element. */
+  alt?: string;
+  /** Defaults to 'anonymous' for cross-origin sources (e.g. signed S3 URLs). */
+  crossOrigin?: 'anonymous' | 'use-credentials' | '';
+  /** Additional classes applied only when rendering `<img>`. */
+  imgClassNames?: string;
+  /** Additional classes applied only when rendering native media or `<iframe>`. */
+  mediaClassNames?: string;
+}>;
+
+/**
+ * Renders a media URL using the appropriate element:
+ * - Direct media URLs (mp4, mp3, …) → native `<video>` / `<audio>`.
+ * - Legacy `iframe`-style embed URLs (Cloudflare Stream, oEmbed players) → `<iframe>`.
+ * - Everything else → `<img>` that hides itself on load failure (broken images
+ *   are common in feeds and the placeholder is uglier than nothing).
+ */
+export const MediaPlayer = ({
+  classNames,
+  src,
+  kind,
+  controls = true,
+  autoPlay = false,
+  loop = false,
+  muted = false,
+  alt,
+  crossOrigin = 'anonymous',
+  imgClassNames,
+  mediaClassNames,
+}: MediaPlayerProps) => {
+  if (isEmbedUrl(src)) {
+    const resolved = kind ?? detectMediaKind(src) ?? 'video';
+    if (resolved === 'audio') {
+      return (
+        <audio
+          className={mx('w-full', classNames, mediaClassNames)}
+          src={src}
+          controls={controls}
+          autoPlay={autoPlay}
+          loop={loop}
+          muted={muted}
+          crossOrigin={crossOrigin}
+          aria-label={alt}
+        />
+      );
+    }
+
+    return (
+      <video
+        className={mx('aspect-video max-w-full max-h-full', classNames, mediaClassNames)}
+        src={src}
+        controls={controls}
+        autoPlay={autoPlay}
+        loop={loop}
+        muted={muted}
+        crossOrigin={crossOrigin}
+        aria-label={alt}
+      />
+    );
+  }
+
+  if (isLegacyIframeUrl(src)) {
+    return (
+      <iframe
+        src={src}
+        title={alt ?? 'Embedded media'}
+        loading='lazy'
+        className={mx('border-none', classNames, mediaClassNames)}
+        sandbox={DEFAULT_IFRAME_SANDBOX}
+        referrerPolicy='no-referrer'
+        allow='accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;'
+        allowFullScreen
+      />
+    );
+  }
+
+  return (
+    <img
+      src={src}
+      alt={alt ?? ''}
+      loading='lazy'
+      className={mx(classNames, imgClassNames)}
+      onError={(event) => {
+        event.currentTarget.style.display = 'none';
+      }}
+    />
+  );
+};

package/src/components/MediaPlayer/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './MediaPlayer';

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

@@ -6,7 +6,6 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { withTheme } from '../../testing';
-
 import { ContextMenu } from './ContextMenu';
 
 const DefaultStory = () => {

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

@@ -7,7 +7,6 @@ import React, { useRef, useState } from 'react';
 
 import { withTheme } from '../../testing';
 import { Button } from '../Button';
-
 import { DropdownMenu } from './DropdownMenu';
 
 const DefaultStory = () => {

package/src/components/Menu/DropdownMenu.tsx

@@ -19,6 +19,7 @@ import React, {
   type ComponentPropsWithoutRef,
   type ComponentRef,
   type FC,
+  PropsWithChildren,
   type ReactNode,
   type RefObject,
   forwardRef,
@@ -57,14 +58,13 @@ type DropdownMenuContextValue = {
 const [DropdownMenuProvider, useDropdownMenuContext] =
   createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);
 
-type DropdownMenuRootProps = {
-  children?: ReactNode;
+type DropdownMenuRootProps = PropsWithChildren<{
   dir?: Direction;
   modal?: boolean;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-};
+}>;
 
 const DropdownMenuRoot = ({
   __scopeDropdownMenu,