import React from "react"; import { type OverridableComponent } from "../utils-external/index.js"; import { Menu, MenuPortalProps } from "../utils/components/floating-menu/Menu.js"; type ActionMenuProps = { children?: React.ReactNode; /** * Whether the menu is open or not. * Only needed if you want manually control state. */ open?: boolean; /** * Callback for when the menu is opened or closed. */ onOpenChange?: (open: boolean) => void; } & Pick; interface ActionMenuComponent extends React.FC { /** * Acts as a trigger and anchor for the menu. * Must be wrapped around a button. If you use your own component, make sure to forward ref and props. * @example * ```jsx * * * * ``` */ Trigger: typeof ActionMenuTrigger; /** * The menu content, containing all the items. * @example * ```jsx * * * Item 1 * * * Item 2 * * * ``` */ Content: typeof ActionMenuContent; /** * Semantically and visually groups items together with a label. * This is the prefered way to group items, as it provides better accessibility * rather than using a standalone `ActionMenu.Label`. * * It is required to use either `label` or `aria-label` to provide an accessible name for the group. * @example * ```jsx * * * * Item 1 * * * Item 2 * * * * * Item 3 * * * Item 4 * * * * ``` */ Group: typeof ActionMenuGroup; /** * Separate labeling option for the menu. * This is not for grouping items, but rather for adding a label to the menu at the top. For grouping items, use `ActionMenu.Group`. * @example * ```jsx * * * Label * * * * // Grouped * * * Item 1 * * * Item 2 * * * * // Standalone * * Item 3 * * * ``` * @example As link * ```jsx * * Item * * ``` */ Item: typeof ActionMenuItem; /** * A checkbox item in the menu. Can be used standalone or grouped with other items. * @example * ```jsx * * Checkbox 1 * * ``` */ CheckboxItem: typeof ActionMenuCheckboxItem; /** * A radio group in the menu. * * It is required to use either `label` or `aria-label` to provide an accessible name for the group. * @example * ```jsx * * Radio 1 * Radio 2 * * ``` */ RadioGroup: typeof ActionMenuRadioGroup; /** * A radio item in the menu. Should always be grouped with an `ActionMenu.RadioGroup`. * @example * ```jsx * * Radio 1 * Radio 2 * * ``` */ RadioItem: typeof ActionMenuRadioItem; /** * A simple divider to separate items in the menu. */ Divider: typeof ActionMenuDivider; /** * A sub-menu that can be nested inside the menu. * The sub-menu can be nested inside other sub-menus allowing for multiple levels of nesting. * @example * ```jsx * * Submenu 1 * * * Subitem 1 * * * Subitem 2 * * * * ``` */ Sub: typeof ActionMenuSub; /** * Acts as a trigger for a sub-menu. * In contrast to `ActionMenu.Trigger`, this trigger is a standalone component and should not be wrapped around a React.ReactNode. * @example * ```jsx * * Submenu 1 * * ``` */ SubTrigger: typeof ActionMenuSubTrigger; /** * The content of a sub-menu. * @example * ```jsx * * * * Subitem 1 * * * Subitem 2 * * * * ``` */ SubContent: typeof ActionMenuSubContent; } /** * ActionMenu is a dropdown menu for actions and navigation. * * @example * ```jsx * * * * * * alert("Item 1 selected")}> * Item 1 * * alert("Item 2 selected")}> * Item 2 * * * * ``` */ export declare const ActionMenu: ActionMenuComponent; interface ActionMenuTriggerProps extends React.ButtonHTMLAttributes { children: React.ReactElement; } export declare const ActionMenuTrigger: React.ForwardRefExoticComponent>; interface ActionMenuContentProps extends Omit, "id"> { children?: React.ReactNode; align?: "start" | "end"; } export declare const ActionMenuContent: React.ForwardRefExoticComponent>; interface ActionMenuLabelProps extends React.HTMLAttributes { children: React.ReactNode; } export declare const ActionMenuLabel: React.ForwardRefExoticComponent>; type MenuGroupProps = React.ComponentPropsWithoutRef; type ActionMenuGroupLabelingProps = { /** * Adds a visual and accessible label to the group. */ label: string; /** * Adds an aria-label to the group. */ "aria-label"?: never; } | { /** * Adds an aria-label to the group. */ "aria-label": string; /** * Adds a visual and accessible label to the group. */ label?: never; }; type ActionMenuGroupProps = Omit & ActionMenuGroupLabelingProps; export declare const ActionMenuGroup: React.ForwardRefExoticComponent>; type ActionMenuItemElement = React.ElementRef; type MenuItemProps = React.ComponentPropsWithoutRef; interface ActionMenuItemProps extends Omit { /** * Shows connected shortcut-keys for the item. * This is only a visual representation, you will have to implement the actual shortcut yourself. */ shortcut?: string; /** * Styles the item as a destructive action. */ variant?: "danger"; /** * Adds an icon on the left side. For right side position use iconPosition. The icon will always have aria-hidden. */ icon?: React.ReactNode; /** * Position of icon. * @default "left" */ iconPosition?: "left" | "right"; } export declare const ActionMenuItem: OverridableComponent; type MenuCheckboxItemProps = React.ComponentPropsWithoutRef; interface ActionMenuCheckboxItemProps extends Omit { children: React.ReactNode; /** * Shows connected shortcut-keys for the item. * This is only a visual representation, you will have to implement the actual shortcut yourself. */ shortcut?: string; } export declare const ActionMenuCheckboxItem: React.ForwardRefExoticComponent>; type MenuRadioGroupProps = React.ComponentPropsWithoutRef; type ActionMenuRadioGroupProps = ActionMenuGroupLabelingProps & Omit & { children: React.ReactNode; }; export declare const ActionMenuRadioGroup: React.ForwardRefExoticComponent>; type MenuRadioItemProps = React.ComponentPropsWithoutRef; interface ActionMenuRadioItemProps extends Omit { children: React.ReactNode; } export declare const ActionMenuRadioItem: React.ForwardRefExoticComponent>; type MenuDividerProps = React.ComponentPropsWithoutRef; type ActionMenuDividerProps = Omit; export declare const ActionMenuDivider: React.ForwardRefExoticComponent>; interface ActionMenuSubProps { children?: React.ReactNode; /** * Whether the sub-menu is open or not. Only needed if you want to manually control state. */ open?: boolean; /** * Callback for when the sub-menu is opened or closed. */ onOpenChange?: (open: boolean) => void; } export declare const ActionMenuSub: (props: ActionMenuSubProps) => React.JSX.Element; type MenuSubTriggerProps = React.ComponentPropsWithoutRef; interface ActionMenuSubTriggerProps extends Omit { icon?: React.ReactNode; /** * Position of icon. * @default "left" */ iconPosition?: "left" | "right"; } export declare const ActionMenuSubTrigger: React.ForwardRefExoticComponent>; interface ActionMenuSubContentProps extends React.HTMLAttributes { children: React.ReactNode; } export declare const ActionMenuSubContent: React.ForwardRefExoticComponent>; export type { ActionMenuCheckboxItemProps, ActionMenuContentProps, ActionMenuDividerProps, ActionMenuGroupProps, ActionMenuItemProps, ActionMenuLabelProps, ActionMenuProps, ActionMenuRadioGroupProps, ActionMenuRadioItemProps, ActionMenuSubContentProps, ActionMenuSubProps, ActionMenuSubTriggerProps, ActionMenuTriggerProps, };