@base-ui/react 1.6.0 → 1.7.0

package/docs/react/components/context-menu.md

@@ -25,7 +25,7 @@ import { ContextMenu } from '@base-ui/react/context-menu';
 export default function ExampleMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white">
+      <ContextMenu.Trigger className="flex aspect-5/3 w-full max-w-64 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none text-sm dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
@@ -61,13 +61,15 @@ This example shows how to implement the component using CSS Modules.
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 15rem;
-  height: 12rem;
+  width: 100%;
+  max-width: 16rem;
+  aspect-ratio: 5 / 3;
   outline: 0;
   border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: oklch(14.5% 0 0deg);
   -webkit-user-select: none;
   user-select: none;
@@ -194,6 +196,10 @@ export default function ExampleMenu() {
 }
 ```
 
+## Usage guidelines
+
+- **Use context menus as an enhancement**: Don't make a context menu the only way to perform actions. Users may not discover or be able to open a context menu, especially on touch devices or with assistive technology. Always provide visible controls for the actions that are available in the context menu.
+
 ## Anatomy
 
 Import the components and place them together:
@@ -239,6 +245,392 @@ import { ContextMenu } from '@base-ui/react/context-menu';
 
 [Menu](/react/components/menu.md) displays additional demos, many of which apply to the context menu as well.
 
+### Using with Menu
+
+A context menu should supplement a primary way to perform the same actions. This image card exposes actions through a visible menu button and reuses them in the context menu for right-click and long-press users.
+
+## Demo
+
+### Tailwind
+
+This example shows how to implement the component using Tailwind CSS.
+
+```tsx
+/* index.tsx */
+'use client';
+import * as React from 'react';
+import { ContextMenu } from '@base-ui/react/context-menu';
+import { Menu } from '@base-ui/react/menu';
+
+export default function ContextMenuWithMenuDemo() {
+  return (
+    <div className="group relative w-full max-w-64 overflow-hidden border border-neutral-950 bg-white text-left text-neutral-950 select-none dark:border-white dark:bg-neutral-950 dark:text-white">
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <img
+            width="512"
+            height="288"
+            className="h-36 w-full object-cover"
+            src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=512&h=288"
+            alt=""
+          />
+          <div className="p-2">
+            <p className="text-sm leading-5">Station Hofplein</p>
+            <p className="text-xs leading-4 text-neutral-500 dark:text-neutral-400">JPG, 2.4 MB</p>
+          </div>
+        </ContextMenu.Trigger>
+
+        <ContextMenu.Portal>
+          <ContextMenu.Positioner className="outline-hidden">
+            <ContextMenu.Popup className={popupClass}>
+              <SharedMenuItems type="context-menu" />
+            </ContextMenu.Popup>
+          </ContextMenu.Positioner>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>
+
+      <Menu.Root>
+        <Menu.Trigger
+          aria-label="Image actions"
+          className="absolute top-2 right-2 flex size-8 items-center justify-center border border-neutral-950 bg-white text-neutral-950 opacity-0 select-none group-hover:opacity-100 data-pressed:opacity-100 any-pointer-coarse:opacity-100 hover:not-data-disabled:bg-neutral-100 active:not-data-disabled:bg-neutral-200 data-pressed:bg-neutral-100 dark:border-white dark:bg-neutral-950 dark:text-white dark:hover:not-data-disabled:bg-neutral-800 dark:active:not-data-disabled:bg-neutral-700 dark:data-pressed:bg-neutral-800 focus-visible:opacity-100 focus-visible:outline-2 focus-visible:-outline-offset-1 focus-visible:outline-neutral-950 dark:focus-visible:outline-white"
+        >
+          <MoreVertIcon />
+        </Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Positioner align="end" sideOffset={8} className="outline-hidden">
+            <Menu.Popup className={popupClass}>
+              <SharedMenuItems />
+            </Menu.Popup>
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>
+    </div>
+  );
+}
+
+const popupClass =
+  'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
+const itemClass =
+  "flex cursor-default py-2 pr-8 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
+
+const actions = ['Preview', 'Download', 'Copy link', 'Rename'];
+
+function SharedMenuItems({ type = 'menu' }: { type?: 'menu' | 'context-menu' }) {
+  const Item = type === 'context-menu' ? ContextMenu.Item : Menu.Item;
+  const Separator = type === 'context-menu' ? ContextMenu.Separator : Menu.Separator;
+  return (
+    <React.Fragment>
+      {actions.map((action) => (
+        <Item key={action} className={itemClass}>
+          {action}
+        </Item>
+      ))}
+      <Separator className="mx-1 my-1 h-px bg-neutral-950 dark:bg-white" />
+      <Item className={`${itemClass} text-red-700`}>Delete</Item>
+    </React.Fragment>
+  );
+}
+
+function MoreVertIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M9.5 13c0 .8284-.67157 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.67157-1.5 1.5-1.5 1.5.6716 1.5 1.5m0-5c0 .82843-.67157 1.5-1.5 1.5S6.5 8.82843 6.5 8 7.17157 6.5 8 6.5s1.5.67157 1.5 1.5m0-5c0 .82843-.67157 1.5-1.5 1.5S6.5 3.82843 6.5 3 7.17157 1.5 8 1.5s1.5.67157 1.5 1.5" />
+    </svg>
+  );
+}
+```
+
+### CSS Modules
+
+This example shows how to implement the component using CSS Modules.
+
+```css
+/* index.module.css */
+.Card {
+  box-sizing: border-box;
+  position: relative;
+  display: block;
+  overflow: hidden;
+  width: 100%;
+  max-width: 16rem;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  text-align: left;
+  -webkit-user-select: none;
+  user-select: none;
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+}
+
+.Image {
+  display: block;
+  width: 100%;
+  height: 9rem;
+  object-fit: cover;
+}
+
+.Content {
+  padding: 0.5rem;
+}
+
+.Title {
+  margin: 0;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.Metadata {
+  margin: 0;
+  font-size: 0.75rem;
+  line-height: 1rem;
+  color: oklch(55.6% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    color: oklch(70.8% 0 0deg);
+  }
+}
+
+.MenuTrigger {
+  box-sizing: border-box;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  -webkit-user-select: none;
+  user-select: none;
+  opacity: 0;
+
+  &[data-pressed],
+  &:focus-visible,
+  .Card:hover & {
+    opacity: 1;
+  }
+
+  @media (any-pointer: coarse) {
+    opacity: 1;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+  }
+
+  @media (hover: hover) {
+    &:hover:not([data-disabled]) {
+      background-color: oklch(97% 0 0deg);
+
+      @media (prefers-color-scheme: dark) {
+        background-color: oklch(26.9% 0 0deg);
+      }
+    }
+  }
+
+  &:active:not([data-disabled]) {
+    background-color: oklch(92.2% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(37.1% 0 0deg);
+    }
+  }
+
+  &[data-pressed] {
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid oklch(14.5% 0 0deg);
+    outline-offset: -1px;
+
+    @media (prefers-color-scheme: dark) {
+      outline-color: white;
+    }
+  }
+}
+
+.Positioner {
+  outline: 0;
+}
+
+.Popup {
+  box-sizing: border-box;
+  outline: 0;
+  padding-block: 0.25rem;
+  border: 1px solid oklch(14.5% 0 0deg);
+  border-radius: 0;
+  background-color: white;
+  color: oklch(14.5% 0 0deg);
+  box-shadow: 0.25rem 0.25rem 0 rgb(0 0 0 / 12%);
+  transform-origin: var(--transform-origin);
+  transition:
+    transform 100ms ease-out,
+    opacity 100ms ease-out;
+
+  @media (prefers-color-scheme: dark) {
+    border-color: white;
+    background-color: oklch(14.5% 0 0deg);
+    color: white;
+    box-shadow: none;
+  }
+
+  &[data-starting-style],
+  &[data-ending-style] {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+}
+
+.Item {
+  position: relative;
+  display: flex;
+  padding-block: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 2rem;
+  outline: 0;
+  color: inherit;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+
+  &[data-highlighted] {
+    z-index: 0;
+    color: white;
+
+    @media (prefers-color-scheme: dark) {
+      color: oklch(14.5% 0 0deg);
+    }
+  }
+
+  &[data-highlighted]::before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0.25rem;
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
+}
+
+.ItemDestructive {
+  color: oklch(50.5% 0.213 27.518deg);
+}
+
+.Separator {
+  margin: 0.25rem;
+  height: 1px;
+  background-color: oklch(14.5% 0 0deg);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: white;
+  }
+}
+```
+
+```tsx
+/* index.tsx */
+'use client';
+import * as React from 'react';
+import { ContextMenu } from '@base-ui/react/context-menu';
+import { Menu } from '@base-ui/react/menu';
+import styles from './index.module.css';
+
+export default function ContextMenuWithMenuDemo() {
+  return (
+    <div className={styles.Card}>
+      <ContextMenu.Root>
+        <ContextMenu.Trigger>
+          <img
+            width="512"
+            height="288"
+            className={styles.Image}
+            src="https://images.unsplash.com/photo-1619615391095-dfa29e1672ef?q=80&w=512&h=288"
+            alt=""
+          />
+          <div className={styles.Content}>
+            <p className={styles.Title}>Station Hofplein</p>
+            <p className={styles.Metadata}>JPG, 2.4 MB</p>
+          </div>
+        </ContextMenu.Trigger>
+
+        <ContextMenu.Portal>
+          <ContextMenu.Positioner className={styles.Positioner}>
+            <ContextMenu.Popup className={styles.Popup}>
+              <SharedMenuItems type="context-menu" />
+            </ContextMenu.Popup>
+          </ContextMenu.Positioner>
+        </ContextMenu.Portal>
+      </ContextMenu.Root>
+
+      <Menu.Root>
+        <Menu.Trigger aria-label="Image actions" className={styles.MenuTrigger}>
+          <MoreVertIcon />
+        </Menu.Trigger>
+        <Menu.Portal>
+          <Menu.Positioner align="end" sideOffset={8} className={styles.Positioner}>
+            <Menu.Popup className={styles.Popup}>
+              <SharedMenuItems />
+            </Menu.Popup>
+          </Menu.Positioner>
+        </Menu.Portal>
+      </Menu.Root>
+    </div>
+  );
+}
+
+const actions = ['Preview', 'Download', 'Copy link', 'Rename'];
+
+function SharedMenuItems({ type = 'menu' }: { type?: 'menu' | 'context-menu' }) {
+  const Item = type === 'context-menu' ? ContextMenu.Item : Menu.Item;
+  const Separator = type === 'context-menu' ? ContextMenu.Separator : Menu.Separator;
+  return (
+    <React.Fragment>
+      {actions.map((action) => (
+        <Item key={action} className={styles.Item}>
+          {action}
+        </Item>
+      ))}
+      <Separator className={styles.Separator} />
+      <Item className={`${styles.Item} ${styles.ItemDestructive}`}>Delete</Item>
+    </React.Fragment>
+  );
+}
+
+function MoreVertIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" {...props}>
+      <path d="M9.5 13c0 .8284-.67157 1.5-1.5 1.5s-1.5-.6716-1.5-1.5.67157-1.5 1.5-1.5 1.5.6716 1.5 1.5m0-5c0 .82843-.67157 1.5-1.5 1.5S6.5 8.82843 6.5 8 7.17157 6.5 8 6.5s1.5.67157 1.5 1.5m0-5c0 .82843-.67157 1.5-1.5 1.5S6.5 3.82843 6.5 3 7.17157 1.5 8 1.5s1.5.67157 1.5 1.5" />
+    </svg>
+  );
+}
+```
+
 ### Nested menu
 
 To create a submenu, create a `<ContextMenu.SubmenuRoot>` inside the parent context menu. Use the `<ContextMenu.SubmenuTrigger>` part for the menu item that opens the nested menu.
@@ -257,7 +649,7 @@ import { ContextMenu } from '@base-ui/react/context-menu';
 export default function ExampleContextMenu() {
   return (
     <ContextMenu.Root>
-      <ContextMenu.Trigger className="flex h-[12rem] w-[15rem] items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none font-normal dark:border-white dark:bg-neutral-950 dark:text-white">
+      <ContextMenu.Trigger className="flex aspect-5/3 w-full max-w-64 items-center justify-center rounded-none border border-neutral-950 bg-white text-neutral-950 select-none text-sm dark:border-white dark:bg-neutral-950 dark:text-white">
         Right click here
       </ContextMenu.Trigger>
       <ContextMenu.Portal>
@@ -299,7 +691,7 @@ export default function ExampleContextMenu() {
 const popupClass =
   'origin-[var(--transform-origin)] border border-neutral-950 bg-white py-1 text-neutral-950 shadow-[0.25rem_0.25rem_0] shadow-black/12 outline-hidden transition-[scale,opacity] duration-100 ease-out data-ending-style:scale-[0.98] data-ending-style:opacity-0 data-starting-style:scale-[0.98] data-starting-style:opacity-0 dark:border-white dark:bg-neutral-950 dark:text-white dark:shadow-none';
 const itemClass =
-  "flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
+  "flex cursor-default py-2 pr-6 pl-4 text-sm leading-4 outline-hidden select-none data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-disabled:text-neutral-500 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-disabled:text-neutral-400";
 const submenuTriggerClass =
   "flex cursor-default items-center justify-between gap-4 py-2 pr-2 pl-4 text-sm leading-4 outline-hidden select-none data-popup-open:relative data-popup-open:z-0 data-popup-open:before:absolute data-popup-open:before:inset-x-1 data-popup-open:before:inset-y-0 data-popup-open:before:z-[-1] data-popup-open:before:bg-neutral-100 data-popup-open:before:content-[''] data-highlighted:relative data-highlighted:z-0 data-highlighted:text-white data-highlighted:before:absolute data-highlighted:before:inset-x-1 data-highlighted:before:inset-y-0 data-highlighted:before:z-[-1] data-highlighted:before:bg-neutral-950 data-highlighted:before:content-[''] data-highlighted:data-popup-open:before:bg-neutral-950 data-disabled:text-neutral-500 dark:data-popup-open:before:bg-neutral-800 dark:data-highlighted:text-neutral-950 dark:data-highlighted:before:bg-white dark:data-highlighted:data-popup-open:before:bg-white dark:data-disabled:text-neutral-400";
 
@@ -330,13 +722,15 @@ This example shows how to implement the component using CSS Modules.
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 15rem;
-  height: 12rem;
+  width: 100%;
+  max-width: 16rem;
+  aspect-ratio: 5 / 3;
   outline: 0;
   border: 1px solid oklch(14.5% 0 0deg);
   border-radius: 0;
   background-color: white;
-  font-weight: 400;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: oklch(14.5% 0 0deg);
   -webkit-user-select: none;
   user-select: none;
@@ -442,24 +836,6 @@ This example shows how to implement the component using CSS Modules.
   font-size: 0.875rem;
   line-height: 1rem;
 
-  &[data-popup-open] {
-    z-index: 0;
-    position: relative;
-  }
-
-  &[data-popup-open]::before {
-    content: '';
-    z-index: -1;
-    position: absolute;
-    inset-block: 0;
-    inset-inline: 0.25rem;
-    background-color: oklch(97% 0 0deg);
-
-    @media (prefers-color-scheme: dark) {
-      background-color: oklch(26.9% 0 0deg);
-    }
-  }
-
   &[data-highlighted] {
     z-index: 0;
     position: relative;
@@ -483,14 +859,6 @@ This example shows how to implement the component using CSS Modules.
     }
   }
 
-  &[data-highlighted][data-popup-open]::before {
-    background-color: oklch(14.5% 0 0deg);
-
-    @media (prefers-color-scheme: dark) {
-      background-color: white;
-    }
-  }
-
   &[data-disabled] {
     color: oklch(55.6% 0 0deg);
 
@@ -505,6 +873,32 @@ This example shows how to implement the component using CSS Modules.
   justify-content: space-between;
   gap: 1rem;
   padding-right: 0.5rem;
+
+  &[data-popup-open] {
+    z-index: 0;
+    position: relative;
+  }
+
+  &[data-popup-open]::before {
+    content: '';
+    z-index: -1;
+    position: absolute;
+    inset-block: 0;
+    inset-inline: 0.25rem;
+    background-color: oklch(97% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: oklch(26.9% 0 0deg);
+    }
+  }
+
+  &[data-highlighted][data-popup-open]::before {
+    background-color: oklch(14.5% 0 0deg);
+
+    @media (prefers-color-scheme: dark) {
+      background-color: white;
+    }
+  }
 }
 
 .Separator {
@@ -594,22 +988,19 @@ Doesn't render its own HTML element.
 
 **Root Props:**
 
-| Prop                 | Type                                                                           | Default      | Description                                                                                                                                                                                                                                                         |
-| :------------------- | :----------------------------------------------------------------------------- | :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| defaultOpen          | `boolean`                                                                      | `false`      | Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.                                                                                                                                                                       |
-| open                 | `boolean`                                                                      | -            | Whether the menu is currently open.                                                                                                                                                                                                                                 |
-| onOpenChange         | `((open: boolean, eventDetails: ContextMenu.Root.ChangeEventDetails) => void)` | -            | Event handler called when the menu is opened or closed.                                                                                                                                                                                                             |
-| highlightItemOnHover | `boolean`                                                                      | `true`       | Whether moving the pointer over items should highlight them.&#xA;Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.                                                                                         |
-| actionsRef           | `React.RefObject<MenuRoot.Actions \| null>`                                    | -            | A ref to imperative actions. `unmount`: Manually unmounts the menu.&#xA;Call this after any externally controlled closing animation finishes.`close`: When specified, the menu can be closed imperatively.                                                          |
-| closeParentOnEsc     | `boolean`                                                                      | `false`      | When in a submenu, determines whether pressing the Escape key&#xA;closes the entire menu, or only the current child menu.                                                                                                                                           |
-| defaultTriggerId     | `string \| null`                                                               | -            | ID of the trigger that the popover is associated with.&#xA;This is useful in conjunction with the `defaultOpen` prop to create an initially open popover.                                                                                                           |
-| handle               | `MenuHandle<unknown>`                                                          | -            | A handle to associate the menu with a trigger.&#xA;If specified, allows external triggers to control the menu's open state.                                                                                                                                         |
-| loopFocus            | `boolean`                                                                      | `true`       | Whether to loop keyboard focus back to the first item&#xA;when the end of the list is reached while using the arrow keys.                                                                                                                                           |
-| onOpenChangeComplete | `((open: boolean) => void)`                                                    | -            | Event handler called after any animations complete when the menu is closed.                                                                                                                                                                                         |
-| triggerId            | `string \| null`                                                               | -            | ID of the trigger that the popover is associated with.&#xA;This is useful in conjunction with the `open` prop to create a controlled popover.&#xA;There's no need to specify this prop when the popover is uncontrolled (that is, when the `open` prop is not set). |
-| disabled             | `boolean`                                                                      | `false`      | Whether the component should ignore user interaction.                                                                                                                                                                                                               |
-| orientation          | `MenuRoot.Orientation`                                                         | `'vertical'` | The visual orientation of the menu.&#xA;Controls whether roving focus uses up/down or left/right arrow keys.                                                                                                                                                        |
-| children             | `React.ReactNode \| PayloadChildRenderFunction<unknown>`                       | -            | The content of the popover.&#xA;This can be a regular React node or a render function that receives the `payload` of the active trigger.                                                                                                                            |
+| Prop                 | Type                                                                           | Default      | Description                                                                                                                                                                                                |
+| :------------------- | :----------------------------------------------------------------------------- | :----------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| defaultOpen          | `boolean`                                                                      | `false`      | Whether the menu is initially open. To render a controlled menu, use the `open` prop instead.                                                                                                              |
+| open                 | `boolean`                                                                      | -            | Whether the menu is currently open.                                                                                                                                                                        |
+| onOpenChange         | `((open: boolean, eventDetails: ContextMenu.Root.ChangeEventDetails) => void)` | -            | Event handler called when the menu is opened or closed.                                                                                                                                                    |
+| highlightItemOnHover | `boolean`                                                                      | `true`       | Whether moving the pointer over items should highlight them.&#xA;Disabling this prop allows CSS `:hover` to be differentiated from the `:focus` (`data-highlighted`) state.                                |
+| actionsRef           | `React.RefObject<MenuRoot.Actions \| null>`                                    | -            | A ref to imperative actions. `unmount`: Manually unmounts the menu.&#xA;Call this after any externally controlled closing animation finishes.`close`: When specified, the menu can be closed imperatively. |
+| closeParentOnEsc     | `boolean`                                                                      | `false`      | When in a submenu, determines whether pressing the Escape key&#xA;closes the entire menu, or only the current child menu.                                                                                  |
+| loopFocus            | `boolean`                                                                      | `true`       | Whether to loop keyboard focus back to the first item&#xA;when the end of the list is reached while using the arrow keys.                                                                                  |
+| onOpenChangeComplete | `((open: boolean) => void)`                                                    | -            | Event handler called after any animations complete when the menu is opened or closed.                                                                                                                      |
+| disabled             | `boolean`                                                                      | `false`      | Whether the component should ignore user interaction.                                                                                                                                                      |
+| orientation          | `MenuRoot.Orientation`                                                         | `'vertical'` | The visual orientation of the menu.&#xA;Controls whether roving focus uses up/down or left/right arrow keys.                                                                                               |
+| children             | `React.ReactNode`                                                              | -            | -                                                                                                                                                                                                          |
 
 ### Root.Props
 
@@ -751,12 +1142,12 @@ Renders a `<div>` element.
 
 **Backdrop Data Attributes:**
 
-| Attribute           | Type | Description                             |
-| :------------------ | :--- | :-------------------------------------- |
-| data-open           | -    | Present when the menu is open.          |
-| data-closed         | -    | Present when the menu is closed.        |
-| data-starting-style | -    | Present when the menu is animating in.  |
-| data-ending-style   | -    | Present when the menu is animating out. |
+| Attribute           | Type | Description                                |
+| :------------------ | :--- | :----------------------------------------- |
+| data-open           | -    | Present when the menu is open.             |
+| data-closed         | -    | Present when the menu is closed.           |
+| data-starting-style | -    | Present when the menu begins animating in. |
+| data-ending-style   | -    | Present when the menu is animating out.    |
 
 ### Backdrop.Props
 
@@ -842,13 +1233,15 @@ Renders a `<div>` element.
 
 **Positioner CSS Variables:**
 
-| Variable             | Type     | Description                                                                            |
-| :------------------- | :------- | :------------------------------------------------------------------------------------- |
-| `--anchor-height`    | `number` | The anchor's height.                                                                   |
-| `--anchor-width`     | `number` | The anchor's width.                                                                    |
-| `--available-height` | `number` | The available height between the trigger and the edge of the viewport.                 |
-| `--available-width`  | `number` | The available width between the trigger and the edge of the viewport.                  |
-| `--transform-origin` | `string` | The coordinates that this element is anchored to. Used for animations and transitions. |
+| Variable              | Type     | Description                                                                                                                    |
+| :-------------------- | :------- | :----------------------------------------------------------------------------------------------------------------------------- |
+| `--anchor-height`     | `number` | The anchor's height.                                                                                                           |
+| `--anchor-width`      | `number` | The anchor's width.                                                                                                            |
+| `--available-height`  | `number` | The available height between the trigger and the edge of the viewport.                                                         |
+| `--available-width`   | `number` | The available width between the trigger and the edge of the viewport.                                                          |
+| `--positioner-height` | `number` | The height of the menu's positioner.&#xA;It is important to set `height` to this value when using CSS to animate size changes. |
+| `--positioner-width`  | `number` | The width of the menu's positioner.&#xA;It is important to set `width` to this value when using CSS to animate size changes.   |
+| `--transform-origin`  | `string` | The coordinates that this element is anchored to. Used for animations and transitions.                                         |
 
 ### Positioner.Props
 
@@ -897,7 +1290,7 @@ Renders a `<div>` element.
 | data-align          | `'start' \| 'center' \| 'end'`                                             | Indicates how the popup is aligned relative to specified side.        |
 | data-instant        | `'click' \| 'dismiss' \| 'group' \| 'trigger-change'`                      | Present if animations should be instant.                              |
 | data-side           | `'top' \| 'bottom' \| 'left' \| 'right' \| 'inline-end' \| 'inline-start'` | Indicates which side the popup is positioned relative to the trigger. |
-| data-starting-style | -                                                                          | Present when the menu is animating in.                                |
+| data-starting-style | -                                                                          | Present when the menu begins animating in.                            |
 | data-ending-style   | -                                                                          | Present when the menu is animating out.                               |
 
 ### Popup.Props
@@ -1095,7 +1488,7 @@ Doesn't render its own HTML element.
 | actionsRef           | `React.RefObject<MenuRoot.Actions \| null>`                                           | -            | A ref to imperative actions. `unmount`: Manually unmounts the menu.&#xA;Call this after any externally controlled closing animation finishes.`close`: When specified, the menu can be closed imperatively. |
 | closeParentOnEsc     | `boolean`                                                                             | `false`      | When in a submenu, determines whether pressing the Escape key&#xA;closes the entire menu, or only the current child menu.                                                                                  |
 | loopFocus            | `boolean`                                                                             | `true`       | Whether to loop keyboard focus back to the first item&#xA;when the end of the list is reached while using the arrow keys.                                                                                  |
-| onOpenChangeComplete | `((open: boolean) => void)`                                                           | -            | Event handler called after any animations complete when the menu is closed.                                                                                                                                |
+| onOpenChangeComplete | `((open: boolean) => void)`                                                           | -            | Event handler called after any animations complete when the menu is opened or closed.                                                                                                                      |
 | disabled             | `boolean`                                                                             | `false`      | Whether the component should ignore user interaction.                                                                                                                                                      |
 | orientation          | `MenuRoot.Orientation`                                                                | `'vertical'` | The visual orientation of the menu.&#xA;Controls whether roving focus uses up/down or left/right arrow keys.                                                                                               |
 | children             | `React.ReactNode`                                                                     | -            | The content of the submenu.                                                                                                                                                                                |
@@ -1349,13 +1742,13 @@ Renders a `<span>` element.
 
 **RadioItemIndicator Data Attributes:**
 
-| Attribute           | Type | Description                                        |
-| :------------------ | :--- | :------------------------------------------------- |
-| data-checked        | -    | Present when the menu radio item is selected.      |
-| data-unchecked      | -    | Present when the menu radio item is not selected.  |
-| data-disabled       | -    | Present when the menu radio item is disabled.      |
-| data-starting-style | -    | Present when the radio indicator is animating in.  |
-| data-ending-style   | -    | Present when the radio indicator is animating out. |
+| Attribute           | Type | Description                                           |
+| :------------------ | :--- | :---------------------------------------------------- |
+| data-checked        | -    | Present when the menu radio item is selected.         |
+| data-unchecked      | -    | Present when the menu radio item is not selected.     |
+| data-disabled       | -    | Present when the menu radio item is disabled.         |
+| data-starting-style | -    | Present when the radio indicator begins animating in. |
+| data-ending-style   | -    | Present when the radio indicator is animating out.    |
 
 ### RadioItemIndicator.Props
 
@@ -1495,7 +1888,7 @@ Renders a `<span>` element.
 | data-checked        | -    | Present when the menu checkbox item is checked.     |
 | data-unchecked      | -    | Present when the menu checkbox item is not checked. |
 | data-disabled       | -    | Present when the menu checkbox item is disabled.    |
-| data-starting-style | -    | Present when the indicator is animating in.         |
+| data-starting-style | -    | Present when the indicator begins animating in.     |
 | data-ending-style   | -    | Present when the indicator is animating out.        |
 
 ### CheckboxItemIndicator.Props
@@ -1524,13 +1917,13 @@ Renders an `<a>` element.
 
 **LinkItem Props:**
 
-| Prop         | Type                                                                                               | Default | Description                                                                                                                                                                                   |
-| :----------- | :------------------------------------------------------------------------------------------------- | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| label        | `string`                                                                                           | -       | Overrides the text label to use when the item is matched during keyboard text navigation.                                                                                                     |
-| closeOnClick | `boolean`                                                                                          | `false` | Whether to close the menu when the item is clicked.                                                                                                                                           |
-| className    | `string \| ((state: ContextMenu.LinkItem.State) => string \| undefined)`                           | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
-| style        | `React.CSSProperties \| ((state: ContextMenu.LinkItem.State) => React.CSSProperties \| undefined)` | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
-| render       | `ReactElement \| ((props: HTMLProps, state: ContextMenu.LinkItem.State) => ReactElement)`          | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
+| Prop         | Type                                                                                                                                                                      | Default | Description                                                                                                                                                                                   |
+| :----------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------ | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| label        | `string`                                                                                                                                                                  | -       | Overrides the text label to use when the item is matched during keyboard text navigation.                                                                                                     |
+| closeOnClick | `boolean`                                                                                                                                                                 | `false` | Whether to close the menu when the item is clicked.                                                                                                                                           |
+| className    | `string \| ((state: ContextMenu.LinkItem.State) => string \| undefined)`                                                                                                  | -       | CSS class applied to the element, or a function that&#xA;returns a class based on the component's state.                                                                                      |
+| style        | `React.CSSProperties \| ((state: ContextMenu.LinkItem.State) => React.CSSProperties \| undefined)`                                                                        | -       | Style applied to the element, or a function that&#xA;returns a style object based on the component's state.                                                                                   |
+| render       | `ReactElement \| ((props: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, state: ContextMenu.LinkItem.State) => ReactElement)` | -       | Allows you to replace the component's HTML element&#xA;with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
 
 **LinkItem Data Attributes:**
 
@@ -1559,12 +1952,6 @@ type ContextMenuLinkItemState = {
 type Orientation = 'horizontal' | 'vertical';
 ```
 
-### PayloadChildRenderFunction
-
-```typescript
-type PayloadChildRenderFunction = (arg: { payload: unknown }) => ReactNode;
-```
-
 ### Side
 
 ```typescript