@stanfordspezi/spezi-web-design-system/dist/src/components/DropdownMenu/DropdownMenu.d.ts

Stanford Biodesign Digital Health Spezi Web Design System

import { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';
import { ComponentProps } from 'react';
/**
 * Root container for DropdownMenu components.
 * Controls the open state of the dropdown menu.
 *
 * Built on top of [Radix UI Dropdown](https://www.radix-ui.com/primitives/docs/components/dropdown-menu).
 */
export declare const DropdownMenu: import('react').FC<DropdownMenuPrimitive.DropdownMenuProps>;
/**
 * Element that toggles the dropdown menu.
 * Must be wrapped in the DropdownMenu component.
 *
 * @example
 * ```tsx
 * // renders Button as trigger
 * <DropdownMenuTrigger asChild>
 *   <Button variant="outline">Trigger</Button>
 * </DropdownMenuTrigger>
 * ```
 */
export declare const DropdownMenuTrigger: import('react').ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
/**
 * Groups multiple menu items together.
 * Useful for organizing related menu options.
 */
export declare const DropdownMenuGroup: import('react').ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
/**
 * Portal for rendering dropdown content outside its parent hierarchy.
 * Prevents layout issues in complex UIs.
 */
export declare const DropdownMenuPortal: import('react').FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
/**
 * Creates a submenu within a dropdown menu.
 * Useful for nested navigation structures.
 */
export declare const DropdownMenuSub: import('react').FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
/**
 * Container for radio items in a dropdown menu.
 * Allows for mutually exclusive selection of options.
 */
export declare const DropdownMenuRadioGroup: import('react').ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
/**
 * Trigger element for a submenu within a dropdown.
 * Displays a chevron icon to indicate nested content.
 */
export declare const DropdownMenuSubTrigger: ({ className, inset, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
    inset?: boolean;
}) => import("react").JSX.Element;
/**
 * Content container for submenu items.
 */
export declare const DropdownMenuSubContent: ({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.SubContent>) => import("react").JSX.Element;
type DropdownMenuContentProps = ComponentProps<typeof DropdownMenuPrimitive.Content> & {
    /**
     * Controls Portal's container.
     * Pass `null` to disable portal.
     */
    container?: HTMLElement | null;
};
/**
 * Displays the main content of a dropdown menu.
 *
 * @example
 * ```tsx
 * <DropdownMenu>
 *   <DropdownMenuTrigger>Open</DropdownMenuTrigger>
 *   <DropdownMenuContent>
 *     <DropdownMenuItem>Item</DropdownMenuItem>
 *   </DropdownMenuContent>
 * </DropdownMenu>
 * ```
 *
 * @example
 * ```tsx
 * // Render inline without portal
 * <DropdownMenuContent container={null}>
 *   <DropdownMenuItem>Item</DropdownMenuItem>
 * </DropdownMenuContent>
 * ```
 */
export declare const DropdownMenuContent: ({ className, container, sideOffset, ...props }: DropdownMenuContentProps) => import("react").JSX.Element;
/**
 * Standard menu item for dropdown menus.
 * Renders a selectable option.
 *
 * @example
 * ```tsx
 * <DropdownMenuItem onClick={() => signOut()}>
 *   <LogOut />
 *   Sign out
 * </DropdownMenuItem>
 * ```
 *
 * @example
 * ```tsx
 * // as link
 * <DropdownMenuItem asChild>
 *   <Link href="/account">
 *     Account
 *   </Link>
 * </DropdownMenuItem>
 * ```
 */
export declare const DropdownMenuItem: ({ className, inset, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Item> & {
    inset?: boolean;
}) => import("react").JSX.Element;
/**
 * Checkbox menu item for dropdown menus.
 * Displays a checkmark when selected.
 * Supports three states: checked, unchecked, and indeterminate.
 *
 * @example
 * ```tsx
 * <DropdownMenu>
 *   <DropdownMenuContent>
 *     <DropdownMenuCheckboxItem checked={isChecked} onCheckedChange={setIsChecked}>
 *       Show notifications
 *     </DropdownMenuCheckboxItem>
 *   </DropdownMenuContent>
 * </DropdownMenu>
 * ```
 */
export declare const DropdownMenuCheckboxItem: ({ className, children, checked, ...props }: ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) => import("react").JSX.Element;
/**
 * Radio menu item for dropdown menus.
 * Displays a filled circle when selected.
 * Must be used inside a DropdownMenuRadioGroup.
 *
 * @example
 * ```tsx
 * <DropdownMenuRadioGroup value={value} onValueChange={setValue}>
 *   <DropdownMenuRadioItem value="option1">Option 1</DropdownMenuRadioItem>
 *   <DropdownMenuRadioItem value="option2">Option 2</DropdownMenuRadioItem>
 * </DropdownMenuRadioGroup>
 * ```
 */
export declare const DropdownMenuRadioItem: ({ className, children, ...props }: ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) => import("react").JSX.Element;
type DropdownMenuLabelProps = ComponentProps<typeof DropdownMenuPrimitive.Label> & {
    inset?: boolean;
};
/**
 * Non-interactive label element for dropdown menus.
 * Useful for creating section headers or group titles within the menu.
 *
 * @example
 * ```tsx
 * <DropdownMenu>
 *   <DropdownMenuContent>
 *     <DropdownMenuLabel>Account</DropdownMenuLabel>
 *     <DropdownMenuItem>Profile</DropdownMenuItem>
 *     <DropdownMenuItem>Settings</DropdownMenuItem>
 *   </DropdownMenuContent>
 * </DropdownMenu>
 * ```
 */
export declare const DropdownMenuLabel: ({ className, inset, ...props }: DropdownMenuLabelProps) => import("react").JSX.Element;
/**
 * Visual separator line for dropdown menus.
 * Creates a horizontal rule to divide sections within the menu.
 *
 * @example
 * ```tsx
 * <DropdownMenu>
 *   <DropdownMenuContent>
 *     <DropdownMenuItem>Profile</DropdownMenuItem>
 *     <DropdownMenuSeparator />
 *     <DropdownMenuItem>Settings</DropdownMenuItem>
 *   </DropdownMenuContent>
 * </DropdownMenu>
 * ```
 */
export declare const DropdownMenuSeparator: ({ className, ...props }: ComponentProps<typeof DropdownMenuPrimitive.Separator>) => import("react").JSX.Element;
/**
 * Displays keyboard shortcut hints in dropdown menu items.
 * Renders with subtle styling to indicate keyboard commands without overwhelming the UI.
 *
 * @example
 * ```tsx
 * <DropdownMenuItem>
 *   New File
 *   <DropdownMenuShortcut>⌘N</DropdownMenuShortcut>
 * </DropdownMenuItem>
 * ```
 */
export declare const DropdownMenuShortcut: ({ className, ...props }: ComponentProps<"span">) => import("react").JSX.Element;
export {};