ThreadListItemMorePrimitive

Overflow menu primitives for secondary thread list item actions in custom assistant-ui sidebars.

Anatomy

import {
  ThreadListItemPrimitive,
  ThreadListItemMorePrimitive
} from "@assistant-ui/react";

const ThreadListItemMore = () => (
  <ThreadListItemMorePrimitive.Root>
    <ThreadListItemMorePrimitive.Trigger>
      More options
    </ThreadListItemMorePrimitive.Trigger>
    <ThreadListItemMorePrimitive.Content>
      <ThreadListItemPrimitive.Archive asChild>
        <ThreadListItemMorePrimitive.Item>
          Archive
        </ThreadListItemMorePrimitive.Item>
      </ThreadListItemPrimitive.Archive>
      <ThreadListItemMorePrimitive.Separator />
      <ThreadListItemPrimitive.Delete asChild>
        <ThreadListItemMorePrimitive.Item>
          Delete
        </ThreadListItemMorePrimitive.Item>
      </ThreadListItemPrimitive.Delete>
    </ThreadListItemMorePrimitive.Content>
  </ThreadListItemMorePrimitive.Root>
);

API Reference

Root

Root container for the overflow menu, built on Radix DropdownMenu. Defaults to a standard, self-contained modal dropdown. Pass ThreadListItemMorePrimitiveRoot.Props.sharedFocusGroup to fold it into the thread list's keyboard navigation instead.
ThreadListItemMorePrimitiveRootProps
dir?Direction

open?boolean

defaultOpen?boolean

onOpenChange?(open: boolean) => void

modal?boolean

sharedFocusGroup?boolean | undefined

Join the menu to the thread list's focus group: Right opens it, Left/Escape close it and return focus to the trigger (mirrored in RTL). Forces the menu non-modal, since a focus trap can't let focus cross the trigger/menu boundary. Defaults to a standalone modal dropdown.

Trigger

This primitive renders a <button> element unless asChild is set.

ThreadListItemMorePrimitiveTriggerProps
asChildboolean= false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

render?ReactElement | undefined

Content

This primitive renders a <div> element unless asChild is set.

ThreadListItemMorePrimitiveContentProps
asChildboolean= false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

side?Side

sideOffset?number

align?Align

alignOffset?number

arrowPadding?number

avoidCollisions?boolean

collisionBoundary?Boundary | Boundary[]

collisionPadding?number | Partial<Record<Side, number>>

sticky?'partial' | 'always'

hideWhenDetached?boolean

updatePositionStrategy?'optimized' | 'always'

onCloseAutoFocus?FocusScopeProps['onUnmountAutoFocus']

Event handler called when auto-focusing on close. Can be prevented.

loop?RovingFocusGroupProps['loop']

Whether keyboard navigation should loop around

onEscapeKeyDown?DismissableLayerProps['onEscapeKeyDown']

onPointerDownOutside?DismissableLayerProps['onPointerDownOutside']

onFocusOutside?DismissableLayerProps['onFocusOutside']

onInteractOutside?DismissableLayerProps['onInteractOutside']

forceMount?true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

render?ReactElement | undefined

portalProps?ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Portal> | undefined

ThreadListItemMorePrimitiveContentProps["portalProps"]
container?PortalProps['container']

Specify a container element to portal the content into.

forceMount?true

Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.

Item

This primitive renders a <div> element unless asChild is set.

ThreadListItemMorePrimitiveItemProps
disabled?boolean

onSelect?(event: Event) => void

asChildboolean= false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

textValue?string

render?ReactElement | undefined

Separator

This primitive renders a <div> element unless asChild is set.

ThreadListItemMorePrimitiveSeparatorProps
asChildboolean= false

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

render?ReactElement | undefined