@dxos/react-ui 0.8.4-main.dedc0f3 → 0.8.4-main.e00bdcdb52

package/src/components/{Menus → Menu}/DropdownMenu.tsx

@@ -17,14 +17,15 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
-  type ElementRef,
+  type ComponentRef,
   type FC,
-  type MutableRefObject,
+  PropsWithChildren,
   type ReactNode,
   type RefObject,
   forwardRef,
   useCallback,
   useEffect,
+  useMemo,
   useRef,
 } from 'react';
 
@@ -34,19 +35,19 @@ import { type ThemedClassName } from '../../util';
 
 type Direction = 'ltr' | 'rtl';
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenu
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenu
+//
 
 const DROPDOWN_MENU_NAME = 'DropdownMenu';
 
 type ScopedProps<P> = P & { __scopeDropdownMenu?: Scope };
 const [createDropdownMenuContext, createDropdownMenuScope] = createContextScope(DROPDOWN_MENU_NAME, [createMenuScope]);
-const useMenuScope = createMenuScope();
+const useMenuScope: (scope?: Scope) => any = createMenuScope();
 
 type DropdownMenuContextValue = {
   triggerId: string;
-  triggerRef: MutableRefObject<HTMLButtonElement | null>;
+  triggerRef: RefObject<HTMLButtonElement | null>;
   contentId: string;
   open: boolean;
   onOpenChange(open: boolean): void;
@@ -57,17 +58,23 @@ type DropdownMenuContextValue = {
 const [DropdownMenuProvider, useDropdownMenuContext] =
   createDropdownMenuContext<DropdownMenuContextValue>(DROPDOWN_MENU_NAME);
 
-interface DropdownMenuRootProps {
-  children?: ReactNode;
+type DropdownMenuRootProps = PropsWithChildren<{
   dir?: Direction;
+  modal?: boolean;
   open?: boolean;
   defaultOpen?: boolean;
   onOpenChange?(open: boolean): void;
-  modal?: boolean;
-}
-
-const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<DropdownMenuRootProps>) => {
-  const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
+}>;
+
+const DropdownMenuRoot = ({
+  __scopeDropdownMenu,
+  children,
+  dir,
+  modal = true,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+}: ScopedProps<DropdownMenuRootProps>) => {
   const menuScope = useMenuScope(__scopeDropdownMenu);
   const triggerRef = useRef<HTMLButtonElement | null>(null);
   const [open = false, setOpen] = useControllableState({
@@ -80,14 +87,14 @@ const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<Dropdown
     <DropdownMenuProvider
       scope={__scopeDropdownMenu}
       triggerId={useId()}
-      triggerRef={triggerRef as MutableRefObject<HTMLButtonElement | null>}
+      triggerRef={triggerRef}
       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}>
+      <MenuPrimitive.Root {...menuScope} dir={dir} modal={modal} open={open} onOpenChange={setOpen}>
         {children}
       </MenuPrimitive.Root>
     </DropdownMenuProvider>
@@ -96,15 +103,15 @@ const DropdownMenuRoot: FC<DropdownMenuRootProps> = (props: ScopedProps<Dropdown
 
 DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuTrigger
+//
 
 const TRIGGER_NAME = 'DropdownMenuTrigger';
 
-type DropdownMenuTriggerElement = ElementRef<typeof Primitive.button>;
+type DropdownMenuTriggerElement = ComponentRef<typeof Primitive.button>;
 type PrimitiveButtonProps = ComponentPropsWithoutRef<typeof Primitive.button>;
-interface DropdownMenuTriggerProps extends PrimitiveButtonProps {}
+type DropdownMenuTriggerProps = PrimitiveButtonProps;
 
 const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuTriggerProps>(
   (props: ScopedProps<DropdownMenuTriggerProps>, forwardedRef) => {
@@ -161,15 +168,15 @@ const DropdownMenuTrigger = forwardRef<DropdownMenuTriggerElement, DropdownMenuT
 
 DropdownMenuTrigger.displayName = TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuVirtualTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuVirtualTrigger
+//
 
 const VIRTUAL_TRIGGER_NAME = 'DropdownMenuVirtualTrigger';
 
-interface DropdownMenuVirtualTriggerProps {
-  virtualRef: RefObject<DropdownMenuTriggerElement>;
-}
+type DropdownMenuVirtualTriggerProps = {
+  virtualRef: RefObject<DropdownMenuTriggerElement | null>;
+};
 
 const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTriggerProps>) => {
   const { __scopeDropdownMenu, virtualRef } = props;
@@ -180,19 +187,19 @@ const DropdownMenuVirtualTrigger = (props: ScopedProps<DropdownMenuVirtualTrigge
       context.triggerRef.current = virtualRef.current;
     }
   });
-  return <MenuPrimitive.Anchor {...menuScope} virtualRef={virtualRef} />;
+  return <MenuPrimitive.Anchor {...menuScope} virtualRef={virtualRef as RefObject<DropdownMenuTriggerElement>} />;
 };
 
 DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuPortal
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuPortal
+//
 
 const PORTAL_NAME = 'DropdownMenuPortal';
 
 type MenuPortalProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Portal>;
-interface DropdownMenuPortalProps extends MenuPortalProps {}
+type DropdownMenuPortalProps = MenuPortalProps;
 
 const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<DropdownMenuPortalProps>) => {
   const { __scopeDropdownMenu, ...portalProps } = props;
@@ -202,9 +209,9 @@ const DropdownMenuPortal: FC<DropdownMenuPortalProps> = (props: ScopedProps<Drop
 
 DropdownMenuPortal.displayName = PORTAL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuViewport
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuViewport
+//
 
 type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.div>> & {
   asChild?: boolean;
@@ -213,40 +220,56 @@ type DropdownMenuViewportProps = ThemedClassName<ComponentPropsWithRef<typeof Pr
 const DropdownMenuViewport = forwardRef<HTMLDivElement, DropdownMenuViewportProps>(
   ({ classNames, asChild, children, ...props }, forwardedRef) => {
     const { tx } = useThemeContext();
-    const Root = asChild ? Slot : Primitive.div;
+    const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Root {...props} className={tx('menu.viewport', 'menu__viewport', {}, classNames)} ref={forwardedRef}>
+      <Comp {...props} className={tx('menu.viewport', {}, classNames)} ref={forwardedRef}>
         {children}
-      </Root>
+      </Comp>
     );
   },
 );
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuContent
+//
 
 const CONTENT_NAME = 'DropdownMenuContent';
 
-type DropdownMenuContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuContentProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Content>>;
-interface DropdownMenuContentProps extends Omit<MenuContentProps, 'onEntryFocus'> {}
+type DropdownMenuContentProps = Omit<MenuContentProps, 'onEntryFocus'>;
 
 const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuContentProps>(
   (props: ScopedProps<DropdownMenuContentProps>, forwardedRef) => {
-    const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
+    const { __scopeDropdownMenu, classNames, collisionPadding = 8, collisionBoundary, ...contentProps } = props;
     const { tx } = useThemeContext();
     const context = useDropdownMenuContext(CONTENT_NAME, __scopeDropdownMenu);
     const elevation = useElevationContext();
     const menuScope = useMenuScope(__scopeDropdownMenu);
     const hasInteractedOutsideRef = useRef(false);
     const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
+
+    // Check for the closest annotated collision boundary in the DOM tree.
+    const computedCollisionBoundary = useMemo(() => {
+      const closestBoundary = context.triggerRef.current?.closest(
+        '[data-popover-collision-boundary]',
+      ) as HTMLElement | null;
+      return closestBoundary
+        ? Array.isArray(collisionBoundary)
+          ? [closestBoundary, ...collisionBoundary]
+          : collisionBoundary
+            ? [closestBoundary, collisionBoundary]
+            : [closestBoundary]
+        : collisionBoundary;
+    }, [context.open, collisionBoundary, context.triggerRef.current]);
+
     return (
       <MenuPrimitive.Content
         id={context.contentId}
         aria-labelledby={context.triggerId}
         {...menuScope}
         {...contentProps}
+        collisionBoundary={computedCollisionBoundary}
         collisionPadding={safeCollisionPadding}
         ref={forwardedRef}
         onCloseAutoFocus={composeEventHandlers(props.onCloseAutoFocus, (event) => {
@@ -266,7 +289,7 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
           }
         })}
         data-arrow-keys='up down'
-        className={tx('menu.content', 'menu', { elevation }, classNames)}
+        className={tx('menu.content', { elevation }, classNames)}
         style={{
           ...props.style,
           // re-namespace exposed content custom properties
@@ -285,15 +308,15 @@ const DropdownMenuContent = forwardRef<DropdownMenuContentElement, DropdownMenuC
 
 DropdownMenuContent.displayName = CONTENT_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuGroup
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuGroup
+//
 
 const GROUP_NAME = 'DropdownMenuGroup';
 
-type DropdownMenuGroupElement = ElementRef<typeof MenuPrimitive.Group>;
+type DropdownMenuGroupElement = ComponentRef<typeof MenuPrimitive.Group>;
 type MenuGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.Group>;
-interface DropdownMenuGroupProps extends MenuGroupProps {}
+type DropdownMenuGroupProps = MenuGroupProps;
 
 const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroupProps>(
   (props: ScopedProps<DropdownMenuGroupProps>, forwardedRef) => {
@@ -305,15 +328,15 @@ const DropdownMenuGroup = forwardRef<DropdownMenuGroupElement, DropdownMenuGroup
 
 DropdownMenuGroup.displayName = GROUP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuLabel
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuLabel
+//
 
 const LABEL_NAME = 'DropdownMenuLabel';
 
-type DropdownMenuLabelElement = ElementRef<typeof MenuPrimitive.Label>;
+type DropdownMenuLabelElement = ComponentRef<typeof MenuPrimitive.Label>;
 type MenuLabelProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Label>>;
-interface DropdownMenuLabelProps extends MenuLabelProps {}
+type DropdownMenuLabelProps = MenuLabelProps;
 
 const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenuLabelProps>(
   (props: ScopedProps<DropdownMenuLabelProps>, forwardedRef) => {
@@ -324,7 +347,7 @@ const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenu
       <MenuPrimitive.Label
         {...menuScope}
         {...labelProps}
-        className={tx('menu.groupLabel', 'menu__group__label', {}, classNames)}
+        className={tx('menu.groupLabel', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -333,15 +356,15 @@ const DropdownMenuGroupLabel = forwardRef<DropdownMenuLabelElement, DropdownMenu
 
 DropdownMenuGroupLabel.displayName = LABEL_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuItem
+//
 
 const ITEM_NAME = 'DropdownMenuItem';
 
-type DropdownMenuItemElement = ElementRef<typeof MenuPrimitive.Item>;
+type DropdownMenuItemElement = ComponentRef<typeof MenuPrimitive.Item>;
 type MenuItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Item>>;
-interface DropdownMenuItemProps extends MenuItemProps {}
+type DropdownMenuItemProps = MenuItemProps;
 
 const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemProps>(
   (props: ScopedProps<DropdownMenuItemProps>, forwardedRef) => {
@@ -352,7 +375,7 @@ const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemPro
       <MenuPrimitive.Item
         {...menuScope}
         {...itemProps}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -361,15 +384,15 @@ const DropdownMenuItem = forwardRef<DropdownMenuItemElement, DropdownMenuItemPro
 
 DropdownMenuItem.displayName = ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuCheckboxItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuCheckboxItem
+//
 
 const CHECKBOX_ITEM_NAME = 'DropdownMenuCheckboxItem';
 
-type DropdownMenuCheckboxItemElement = ElementRef<typeof MenuPrimitive.CheckboxItem>;
+type DropdownMenuCheckboxItemElement = ComponentRef<typeof MenuPrimitive.CheckboxItem>;
 type MenuCheckboxItemProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.CheckboxItem>>;
-interface DropdownMenuCheckboxItemProps extends MenuCheckboxItemProps {}
+type DropdownMenuCheckboxItemProps = MenuCheckboxItemProps;
 
 const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, DropdownMenuCheckboxItemProps>(
   (props: ScopedProps<DropdownMenuCheckboxItemProps>, forwardedRef) => {
@@ -380,7 +403,7 @@ const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, Dro
       <MenuPrimitive.CheckboxItem
         {...menuScope}
         {...checkboxItemProps}
-        className={tx('menu.item', 'menu__item--checkbox', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -389,15 +412,15 @@ const DropdownMenuCheckboxItem = forwardRef<DropdownMenuCheckboxItemElement, Dro
 
 DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuRadioGroup
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuRadioGroup
+//
 
 const RADIO_GROUP_NAME = 'DropdownMenuRadioGroup';
 
-type DropdownMenuRadioGroupElement = ElementRef<typeof MenuPrimitive.RadioGroup>;
+type DropdownMenuRadioGroupElement = ComponentRef<typeof MenuPrimitive.RadioGroup>;
 type MenuRadioGroupProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioGroup>;
-interface DropdownMenuRadioGroupProps extends MenuRadioGroupProps {}
+type DropdownMenuRadioGroupProps = MenuRadioGroupProps;
 
 const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, DropdownMenuRadioGroupProps>(
   (props: ScopedProps<DropdownMenuRadioGroupProps>, forwardedRef) => {
@@ -409,13 +432,13 @@ const DropdownMenuRadioGroup = forwardRef<DropdownMenuRadioGroupElement, Dropdow
 
 DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuRadioItem
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuRadioItem
+//
 
 const RADIO_ITEM_NAME = 'DropdownMenuRadioItem';
 
-type DropdownMenuRadioItemElement = ElementRef<typeof MenuPrimitive.RadioItem>;
+type DropdownMenuRadioItemElement = ComponentRef<typeof MenuPrimitive.RadioItem>;
 type MenuRadioItemProps = ComponentPropsWithoutRef<typeof MenuPrimitive.RadioItem>;
 type DropdownMenuRadioItemProps = ThemedClassName<MenuRadioItemProps>;
 
@@ -428,7 +451,7 @@ const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownM
       <MenuPrimitive.Item
         {...menuScope}
         {...itemProps}
-        className={tx('menu.item', 'menu__item', {}, classNames)}
+        className={tx('menu.item', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -437,15 +460,15 @@ const DropdownMenuRadioItem = forwardRef<DropdownMenuRadioItemElement, DropdownM
 
 DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuItemIndicator
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuItemIndicator
+//
 
 const INDICATOR_NAME = 'DropdownMenuItemIndicator';
 
-type DropdownMenuItemIndicatorElement = ElementRef<typeof MenuPrimitive.ItemIndicator>;
+type DropdownMenuItemIndicatorElement = ComponentRef<typeof MenuPrimitive.ItemIndicator>;
 type MenuItemIndicatorProps = ComponentPropsWithoutRef<typeof MenuPrimitive.ItemIndicator>;
-interface DropdownMenuItemIndicatorProps extends MenuItemIndicatorProps {}
+type DropdownMenuItemIndicatorProps = MenuItemIndicatorProps;
 
 const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, DropdownMenuItemIndicatorProps>(
   (props: ScopedProps<DropdownMenuItemIndicatorProps>, forwardedRef) => {
@@ -457,15 +480,15 @@ const DropdownMenuItemIndicator = forwardRef<DropdownMenuItemIndicatorElement, D
 
 DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSeparator
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSeparator
+//
 
 const SEPARATOR_NAME = 'DropdownMenuSeparator';
 
-type DropdownMenuSeparatorElement = ElementRef<typeof MenuPrimitive.Separator>;
+type DropdownMenuSeparatorElement = ComponentRef<typeof MenuPrimitive.Separator>;
 type MenuSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Separator>>;
-interface DropdownMenuSeparatorProps extends MenuSeparatorProps {}
+type DropdownMenuSeparatorProps = MenuSeparatorProps;
 
 const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownMenuSeparatorProps>(
   (props: ScopedProps<DropdownMenuSeparatorProps>, forwardedRef) => {
@@ -476,7 +499,7 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
       <MenuPrimitive.Separator
         {...menuScope}
         {...separatorProps}
-        className={tx('menu.separator', 'menu__item', {}, classNames)}
+        className={tx('menu.separator', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -485,15 +508,15 @@ const DropdownMenuSeparator = forwardRef<DropdownMenuSeparatorElement, DropdownM
 
 DropdownMenuSeparator.displayName = SEPARATOR_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuArrow
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuArrow
+//
 
 const ARROW_NAME = 'DropdownMenuArrow';
 
-type DropdownMenuArrowElement = ElementRef<typeof MenuPrimitive.Arrow>;
+type DropdownMenuArrowElement = ComponentRef<typeof MenuPrimitive.Arrow>;
 type MenuArrowProps = ThemedClassName<ComponentPropsWithoutRef<typeof MenuPrimitive.Arrow>>;
-interface DropdownMenuArrowProps extends MenuArrowProps {}
+type DropdownMenuArrowProps = MenuArrowProps;
 
 const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrowProps>(
   (props: ScopedProps<DropdownMenuArrowProps>, forwardedRef) => {
@@ -504,7 +527,7 @@ const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrow
       <MenuPrimitive.Arrow
         {...menuScope}
         {...arrowProps}
-        className={tx('menu.arrow', 'menu__arrow', {}, classNames)}
+        className={tx('menu.arrow', {}, classNames)}
         ref={forwardedRef}
       />
     );
@@ -513,16 +536,16 @@ const DropdownMenuArrow = forwardRef<DropdownMenuArrowElement, DropdownMenuArrow
 
 DropdownMenuArrow.displayName = ARROW_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSub
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSub
+//
 
-interface DropdownMenuSubProps {
+type 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;
@@ -540,15 +563,15 @@ const DropdownMenuSub: FC<DropdownMenuSubProps> = (props: ScopedProps<DropdownMe
   );
 };
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSubTrigger
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSubTrigger
+//
 
 const SUB_TRIGGER_NAME = 'DropdownMenuSubTrigger';
 
-type DropdownMenuSubTriggerElement = ElementRef<typeof MenuPrimitive.SubTrigger>;
+type DropdownMenuSubTriggerElement = ComponentRef<typeof MenuPrimitive.SubTrigger>;
 type MenuSubTriggerProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubTrigger>;
-interface DropdownMenuSubTriggerProps extends MenuSubTriggerProps {}
+type DropdownMenuSubTriggerProps = MenuSubTriggerProps;
 
 const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, DropdownMenuSubTriggerProps>(
   (props: ScopedProps<DropdownMenuSubTriggerProps>, forwardedRef) => {
@@ -560,15 +583,15 @@ const DropdownMenuSubTrigger = forwardRef<DropdownMenuSubTriggerElement, Dropdow
 
 DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
 
-/* -------------------------------------------------------------------------------------------------
- * DropdownMenuSubContent
- * ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenuSubContent
+//
 
 const SUB_CONTENT_NAME = 'DropdownMenuSubContent';
 
-type DropdownMenuSubContentElement = ElementRef<typeof MenuPrimitive.Content>;
+type DropdownMenuSubContentElement = ComponentRef<typeof MenuPrimitive.Content>;
 type MenuSubContentProps = ComponentPropsWithoutRef<typeof MenuPrimitive.SubContent>;
-interface DropdownMenuSubContentProps extends MenuSubContentProps {}
+type DropdownMenuSubContentProps = MenuSubContentProps;
 
 const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, DropdownMenuSubContentProps>(
   (props: ScopedProps<DropdownMenuSubContentProps>, forwardedRef) => {
@@ -598,7 +621,9 @@ const DropdownMenuSubContent = forwardRef<DropdownMenuSubContentElement, Dropdow
 
 DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
 
-/* ----------------------------------------------------------------------------------------------- */
+//
+// DropdownMenu
+//
 
 export const DropdownMenu = {
   Root: DropdownMenuRoot,
@@ -621,7 +646,9 @@ export const DropdownMenu = {
   SubContent: DropdownMenuSubContent,
 };
 
-const useDropdownMenuMenuScope = useMenuScope;
+type DropdownMenuScope = Scope;
+
+const useDropdownMenuMenuScope: (scope?: DropdownMenuScope) => any = useMenuScope;
 
 export { createDropdownMenuScope, useDropdownMenuContext, useDropdownMenuMenuScope };
 

package/src/components/Message/Message.stories.tsx

@@ -2,36 +2,40 @@
 // Copyright 2022 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { type MessageValence } from '@dxos/react-ui-types';
+import { random } from '@dxos/random';
+import { type MessageValence } from '@dxos/ui-types';
 
 import { withTheme } from '../../testing';
+import { Message } from './Message';
 
-import { Callout } from './Message';
+random.seed(123);
 
-type StoryProps = {
+type DefaultStoryProps = {
   valence: MessageValence;
   title: string;
   body: string;
 };
 
-const DefaultStory = ({ valence, title, body }: StoryProps) => (
-  <Callout.Root valence={valence}>
-    {title && <Callout.Title>{title}</Callout.Title>}
-    {body && <Callout.Content>{body}</Callout.Content>}
-  </Callout.Root>
+const DefaultStory = ({ valence, title, body }: DefaultStoryProps) => (
+  <div className='w-[30rem]'>
+    <Message.Root valence={valence}>
+      {title && <Message.Title>{title}</Message.Title>}
+      {body && <Message.Content>{body}</Message.Content>}
+    </Message.Root>
+  </div>
 );
 
 const meta = {
-  title: 'ui/react-ui-core/Callout',
-  component: Callout.Root as any,
+  title: 'ui/react-ui-core/components/Message',
+  component: Message.Root as any,
   render: DefaultStory,
-  decorators: [withTheme],
-  parameters: { chromatic: { disableSnapshot: false } },
+  decorators: [withTheme()],
+  parameters: {
+    layout: 'centered',
+  },
   argTypes: {
     valence: {
       control: 'select',
@@ -48,6 +52,14 @@ export const Default: Story = {
   args: {
     valence: 'neutral',
     title: 'Alert title',
-    body: 'Alert content',
+    body: random.lorem.paragraphs(1),
+  },
+};
+
+export const Error: Story = {
+  args: {
+    valence: 'error',
+    title: 'Error title',
+    body: random.lorem.paragraphs(1),
   },
 };