@stratakit/structures/dist/DropdownMenu.d.ts

Medium-sized component structures for the Strata design system

import * as React from "react";
import type { MenuItemCheckboxProps, MenuProviderProps } from "@ariakit/react/menu";
import type { PredefinedSymbol } from "@stratakit/bricks/secret-internals";
import type { AnyString, BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
interface DropdownMenuProps extends Pick<MenuProviderProps, "children" | "placement" | "open" | "setOpen" | "defaultOpen"> {
}
/**
 * A dropdown menu displays a list of actions or commands when the menu button is clicked.
 *
 * `DropdownMenu` is a compound component with subcomponents exposed for different parts.
 *
 * Example:
 * ```tsx
 * <DropdownMenu.Root>
 *   <DropdownMenu.Button>Actions</DropdownMenu.Button>
 *
 *   <DropdownMenu.Content>
 *     <DropdownMenu.Item label="Add" />
 *     <DropdownMenu.Item label="Edit" />
 *     <DropdownMenu.Item label="Delete" />
 *   </DropdownMenu.Content>
 * </DropdownMenu.Root>
 * ```
 *
 * **Note**: `DropdownMenu` should not be used for navigation; it is only intended for actions.
 */
declare function DropdownMenuRoot(props: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
declare namespace DropdownMenuRoot {
    var displayName: string;
}
interface DropdownMenuContentProps extends FocusableProps {
}
/**
 * The actual "menu" portion containing the items shown within the dropdown.
 *
 * Should be used as a child of `DropdownMenu.Root`.
 */
declare const DropdownMenuContent: React.ForwardRefExoticComponent<DropdownMenuContentProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface DropdownMenuButtonProps extends FocusableProps<"button"> {
}
/**
 * The button that triggers the dropdown menu to open.  Should be used as a child of `DropdownMenu.Root`.
 *
 * Example:
 * ```tsx
 * <DropdownMenu.Button>Actions</DropdownMenu.Button>
 * ```
 *
 * By default it will render a solid `Button` with a disclosure arrow. This can be
 * customized by passing a `render` prop.
 *
 * ```tsx
 * <DropdownMenu.Button
 *   render={<IconButton variant="ghost" label="More" icon={<Icon href={…} />}  />}
 * />
 * ```
 */
declare const DropdownMenuButton: React.ForwardRefExoticComponent<DropdownMenuButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
interface DropdownMenuItemProps extends Omit<FocusableProps<"button">, "children">, Partial<Pick<DropdownMenuItemShortcutsProps, "shortcuts"> & Pick<DropdownMenuIconProps, "icon">> {
    /** The primary text label for the menu-item. */
    label: React.ReactNode;
    /** Dot shown on the right end of the menu-item. Value will be used as accessible description. */
    unstable_dot?: string;
}
/**
 * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
 *
 * Example:
 * ```tsx
 * <DropdownMenu.Item label="Add" />
 * <DropdownMenu.Item label="Edit" />
 * ```
 */
declare const DropdownMenuItem: React.ForwardRefExoticComponent<DropdownMenuItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
interface DropdownMenuItemShortcutsProps extends Omit<BaseProps<"span">, "children"> {
    /**
     * A string defining the keyboard shortcut(s) associated with the menu item.
     *
     * ```tsx
     * shortcuts="S" // A single key shortcut
     * ```
     *
     * Multiple keys should be separated by the `+` character. If one of the keys is
     * recognized as a symbol name or a modifier key, it will be displayed as a symbol.
     *
     * ```tsx
     * shortcuts="Control+Enter" // A multi-key shortcut, displayed as "Ctrl ⏎"
     * ```
     */
    shortcuts: AnyString | `${PredefinedSymbol}+${AnyString}`;
}
interface DropdownMenuIconProps extends BaseProps<"svg"> {
    /**
     * An optional icon displayed before the menu-item label.
     *
     * Can be a URL of an SVG from the `@stratakit/icons` package,
     * or a custom JSX icon.
     */
    icon?: string | React.JSX.Element;
}
interface DropdownMenuCheckboxItemProps extends Omit<FocusableProps<"button">, "onChange" | "children" | "name">, Pick<MenuItemCheckboxProps, "defaultChecked" | "checked" | "onChange" | "name" | "value">, Pick<DropdownMenuItemProps, "label" | "icon"> {
}
/**
 * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content`.
 *
 * Example:
 * ```tsx
 * <DropdownMenu.CheckboxItem name="add" label="Add" />
 * <DropdownMenu.CheckboxItem name="edit" label="Edit" />
 * ```
 */
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
export { DropdownMenuRoot as Root, DropdownMenuButton as Button, DropdownMenuContent as Content, DropdownMenuItem as Item, DropdownMenuCheckboxItem as CheckboxItem, };