@assistant-ui/mcp-docs-server 0.1.30 → 0.1.32

package/.docs/raw/docs/(reference)/api-reference/primitives/action-bar-more.mdx

@@ -1,10 +1,15 @@
 ---
 title: ActionBarMorePrimitive
+description: Overflow menu primitives for grouping secondary assistant message actions in a custom React UI.
 ---
 
-A dropdown menu for additional actions that don't fit in the main action bar.
+import { ActionBarMorePrimitiveContentProps, ActionBarMorePrimitiveItemProps, ActionBarMorePrimitiveRootProps, ActionBarMorePrimitiveSeparatorProps, ActionBarMorePrimitiveTriggerProps } from "@/generated/typeDocs";
+import { ActionBarMorePrimitive as ActionBarMorePrimitiveDocs } from "@/generated/primitiveDocs";
 
+{/* AUTO-GENERATED PAGE by scripts/generate-api-reference.mts */}
+{/* Do not edit manually. */}
 
+{/* api-manual:start */}
 ## Anatomy
 
 ```tsx
@@ -35,261 +40,113 @@ const MessageActions = () => (
   </ActionBarPrimitive.Root>
 );
 ```
+{/* api-manual:end */}
+
+{/* api-reference:start */}
+{/* AUTO-GENERATED by scripts/generate-api-reference.mts */}
+{/* Do not edit this block manually. */}
 
 ## API Reference
 
 ### Root
 
-Contains all parts of the dropdown menu.
-
-<ParametersTable
-  type="ActionBarMorePrimitiveRootProps"
-  parameters={[
-    {
-      name: "defaultOpen",
-      type: "boolean",
-      default: "false",
-      description:
-        "The open state of the dropdown menu when it is initially rendered. Use when you do not need to control its open state.",
-    },
-    {
-      name: "open",
-      type: "boolean",
-      description:
-        "The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange.",
-    },
-    {
-      name: "onOpenChange",
-      type: "(open: boolean) => void",
-      description:
-        "Event handler called when the open state of the dropdown menu changes.",
-    },
-    {
-      name: "modal",
-      type: "boolean",
-      default: "true",
-      description:
-        "The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.",
-    },
-    {
-      name: "dir",
-      type: "'ltr' | 'rtl'",
-      description: "The reading direction of the dropdown menu.",
-    },
-  ]}
-/>
+{ActionBarMorePrimitiveDocs.Root?.deprecated && (
+  <Callout type="warn">
+    <strong>Deprecated.</strong> {ActionBarMorePrimitiveDocs.Root.deprecated}
+  </Callout>
+)}
+
+{ActionBarMorePrimitiveDocs.Root?.description}
+
+{ActionBarMorePrimitiveDocs.Root?.element && (
+  <p>This primitive renders a <code>{`<${ActionBarMorePrimitiveDocs.Root?.element}>`}</code> element unless <code>asChild</code> is set.</p>
+)}
+
+<ParametersTable {...ActionBarMorePrimitiveRootProps} />
 
 ### Trigger
 
-A button that toggles the dropdown menu.
+{ActionBarMorePrimitiveDocs.Trigger?.deprecated && (
+  <Callout type="warn">
+    <strong>Deprecated.</strong> {ActionBarMorePrimitiveDocs.Trigger.deprecated}
+  </Callout>
+)}
+
+{ActionBarMorePrimitiveDocs.Trigger?.description}
 
-This primitive renders a `<button>` element unless `asChild` is set.
+{ActionBarMorePrimitiveDocs.Trigger?.element && (
+  <p>This primitive renders a <code>{`<${ActionBarMorePrimitiveDocs.Trigger?.element}>`}</code> element unless <code>asChild</code> is set.</p>
+)}
 
-<ParametersTable
-  type="ActionBarMorePrimitiveTriggerProps"
-  parameters={[
-    {
-      name: "asChild",
-    },
-  ]}
-/>
+<ParametersTable {...ActionBarMorePrimitiveTriggerProps} />
 
+{/* api-manual:ActionBarMorePrimitive.Trigger:start */}
 | Data attribute | Values |
 | --- | --- |
 | `[data-state]` | `"open" \| "closed"` |
 | `[data-disabled]` | Present when disabled |
+{/* api-manual:ActionBarMorePrimitive.Trigger:end */}
 
 ### Content
 
-The component that pops out when the dropdown menu is open.
-
-This primitive renders a `<div>` element unless `asChild` is set.
-
-<ParametersTable
-  type="ActionBarMorePrimitiveContentProps"
-  parameters={[
-    {
-      name: "asChild",
-    },
-    {
-      name: "side",
-      type: "'top' | 'right' | 'bottom' | 'left'",
-      default: "'bottom'",
-      description: "The preferred side of the trigger to render against.",
-    },
-    {
-      name: "sideOffset",
-      type: "number",
-      default: "4",
-      description: "The distance in pixels from the trigger.",
-    },
-    {
-      name: "align",
-      type: "'start' | 'center' | 'end'",
-      default: "'center'",
-      description: "The preferred alignment against the trigger.",
-    },
-    {
-      name: "alignOffset",
-      type: "number",
-      default: "0",
-      description: "An offset in pixels from the align option.",
-    },
-    {
-      name: "portalProps",
-      type: "PortalProps",
-      description: "Props to pass to the Portal component.",
-    },
-  ]}
-/>
+{ActionBarMorePrimitiveDocs.Content?.deprecated && (
+  <Callout type="warn">
+    <strong>Deprecated.</strong> {ActionBarMorePrimitiveDocs.Content.deprecated}
+  </Callout>
+)}
 
+{ActionBarMorePrimitiveDocs.Content?.description}
+
+{ActionBarMorePrimitiveDocs.Content?.element && (
+  <p>This primitive renders a <code>{`<${ActionBarMorePrimitiveDocs.Content?.element}>`}</code> element unless <code>asChild</code> is set.</p>
+)}
+
+<ParametersTable {...ActionBarMorePrimitiveContentProps} />
+
+{/* api-manual:ActionBarMorePrimitive.Content:start */}
 | Data attribute | Values |
 | --- | --- |
 | `[data-state]` | `"open" \| "closed"` |
 | `[data-side]` | `"top" \| "right" \| "bottom" \| "left"` |
 | `[data-align]` | `"start" \| "center" \| "end"` |
-
-Refer to Radix UI's Documentation for [DropdownMenu.Content](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#content) for more details.
+{/* api-manual:ActionBarMorePrimitive.Content:end */}
 
 ### Item
 
-A menu item within the dropdown menu.
-
-This primitive renders a `<div>` element unless `asChild` is set.
-
-<ParametersTable
-  type="ActionBarMorePrimitiveItemProps"
-  parameters={[
-    {
-      name: "asChild",
-    },
-    {
-      name: "disabled",
-      type: "boolean",
-      description: "When true, prevents the user from interacting with the item.",
-    },
-    {
-      name: "onSelect",
-      type: "(event: Event) => void",
-      description:
-        "Event handler called when the user selects an item (via mouse or keyboard). Calling event.preventDefault in this handler will prevent the dropdown menu from closing when selecting that item.",
-    },
-    {
-      name: "textValue",
-      type: "string",
-      description:
-        "Optional text used for typeahead purposes. By default the typeahead behavior will use the .textContent of the item.",
-    },
-  ]}
-/>
+{ActionBarMorePrimitiveDocs.Item?.deprecated && (
+  <Callout type="warn">
+    <strong>Deprecated.</strong> {ActionBarMorePrimitiveDocs.Item.deprecated}
+  </Callout>
+)}
 
+{ActionBarMorePrimitiveDocs.Item?.description}
+
+{ActionBarMorePrimitiveDocs.Item?.element && (
+  <p>This primitive renders a <code>{`<${ActionBarMorePrimitiveDocs.Item?.element}>`}</code> element unless <code>asChild</code> is set.</p>
+)}
+
+<ParametersTable {...ActionBarMorePrimitiveItemProps} />
+
+{/* api-manual:ActionBarMorePrimitive.Item:start */}
 | Data attribute | Values |
 | --- | --- |
 | `[data-disabled]` | Present when disabled |
 | `[data-highlighted]` | Present when highlighted |
-
-Refer to Radix UI's Documentation for [DropdownMenu.Item](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#item) for more details.
+{/* api-manual:ActionBarMorePrimitive.Item:end */}
 
 ### Separator
 
-A visual separator between groups of items.
-
-This primitive renders a `<div>` element unless `asChild` is set.
-
-<ParametersTable
-  type="ActionBarMorePrimitiveSeparatorProps"
-  parameters={[
-    {
-      name: "asChild",
-    },
-  ]}
-/>
-
-## Example Usage
-
-### Basic dropdown menu
+{ActionBarMorePrimitiveDocs.Separator?.deprecated && (
+  <Callout type="warn">
+    <strong>Deprecated.</strong> {ActionBarMorePrimitiveDocs.Separator.deprecated}
+  </Callout>
+)}
 
-```tsx
-import { ActionBarMorePrimitive } from "@assistant-ui/react";
-import { MoreHorizontal, Pencil, Volume2, ThumbsUp } from "lucide-react";
-
-const MoreActionsMenu = () => (
-  <ActionBarMorePrimitive.Root>
-    <ActionBarMorePrimitive.Trigger className="action-button">
-      <MoreHorizontal className="size-4" />
-    </ActionBarMorePrimitive.Trigger>
-    <ActionBarMorePrimitive.Content className="dropdown-content">
-      <ActionBarMorePrimitive.Item
-        className="dropdown-item"
-        onSelect={() => console.log("Edit")}
-      >
-        <Pencil className="size-4" />
-        Edit message
-      </ActionBarMorePrimitive.Item>
-      <ActionBarMorePrimitive.Item
-        className="dropdown-item"
-        onSelect={() => console.log("Speak")}
-      >
-        <Volume2 className="size-4" />
-        Read aloud
-      </ActionBarMorePrimitive.Item>
-      <ActionBarMorePrimitive.Separator className="dropdown-separator" />
-      <ActionBarMorePrimitive.Item
-        className="dropdown-item"
-        onSelect={() => console.log("Like")}
-      >
-        <ThumbsUp className="size-4" />
-        Good response
-      </ActionBarMorePrimitive.Item>
-    </ActionBarMorePrimitive.Content>
-  </ActionBarMorePrimitive.Root>
-);
-```
+{ActionBarMorePrimitiveDocs.Separator?.description}
 
-### Using with action hooks
+{ActionBarMorePrimitiveDocs.Separator?.element && (
+  <p>This primitive renders a <code>{`<${ActionBarMorePrimitiveDocs.Separator?.element}>`}</code> element unless <code>asChild</code> is set.</p>
+)}
 
-You can combine the dropdown menu items with action hooks from ActionBarPrimitive:
-
-```tsx
-import {
-  ActionBarPrimitive,
-  ActionBarMorePrimitive,
-  useAui,
-  useAuiState,
-} from "@assistant-ui/react";
-import { useCallback } from "react";
-
-const useEditAction = () => {
-  const aui = useAui();
-  const disabled = useAuiState((s) => s.composer.isEditing);
-  const callback = useCallback(() => aui.composer().beginEdit(), [aui]);
-  if (disabled) return null;
-  return callback;
-};
-
-const useSpeakAction = () => {
-  const aui = useAui();
-  return useCallback(() => aui.message().speak(), [aui]);
-};
-
-const MoreActionsWithHooks = () => {
-  const edit = useEditAction();
-  const speak = useSpeakAction();
-
-  return (
-    <ActionBarMorePrimitive.Root>
-      <ActionBarMorePrimitive.Trigger>
-        <MoreHorizontalIcon />
-      </ActionBarMorePrimitive.Trigger>
-      <ActionBarMorePrimitive.Content>
-        <ActionBarMorePrimitive.Item onSelect={edit ?? undefined} disabled={!edit}>
-          Edit
-        </ActionBarMorePrimitive.Item>
-        <ActionBarMorePrimitive.Item onSelect={speak}>
-          Read aloud
-        </ActionBarMorePrimitive.Item>
-      </ActionBarMorePrimitive.Content>
-    </ActionBarMorePrimitive.Root>
-  );
-};
-```
+<ParametersTable {...ActionBarMorePrimitiveSeparatorProps} />
+{/* api-reference:end */}