@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.Provider>
 *   <DropdownMenu.Button>Actions</DropdownMenu.Button>
 *
 *   <DropdownMenu.Content>
 *     <DropdownMenu.Item label="Add" />
 *     <DropdownMenu.Item label="Edit" />
 *     <DropdownMenu.Item label="Delete" />
 *   </DropdownMenu.Content>
 * </DropdownMenu.Provider>
 * ```
 *
 * **Note**: `DropdownMenu` should not be used for navigation; it is only intended for actions.
 */
declare function DropdownMenuProvider(props: DropdownMenuProps): React.JSX.Element;
declare namespace DropdownMenuProvider {
    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.Provider`.
 *
 * Should include one or more of `DropdownMenu.Item`, `DropdownMenu.CheckboxItem` and `DropdownMenu.Group` as direct descendants.
 */
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.Provider`.
 *
 * 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;
    /**
     * The submenu to display when the item is activated. Must be a `DropdownMenu.Submenu` component.
     */
    submenu?: React.ReactNode;
}
/**
 * A single menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content` and `DropdownMenu.Submenu`.
 *
 * Example:
 * ```tsx
 * <DropdownMenu.Item label="Add" />
 * <DropdownMenu.Item label="Edit" />
 * ```
 *
 * Use the `submenu` prop to display a submenu.
 *
 * Example:
 * ```tsx
 * <DropdownMenu.Item
 *   label="More"
 *   submenu={
 *     <DropdownMenu.Submenu>
 *       <DropdownMenu.Item label="Add" />
 *       <DropdownMenu.Item label="Edit" />
 *     </DropdownMenu.Submenu>
 *   }
 * />
 * ```
 */
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 checkbox menu item within the dropdown menu. Should be used as a child of `DropdownMenu.Content` and `DropdownMenu.Submenu`.
 *
 * Example:
 * ```tsx
 * <DropdownMenu.CheckboxItem name="add" label="Add" />
 * <DropdownMenu.CheckboxItem name="edit" label="Edit" />
 * ```
 */
declare const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<DropdownMenuCheckboxItemProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
interface DropdownMenuSubmenuProps extends FocusableProps {
}
/**
 * The submenu portion containing the nested submenu items.
 *
 * Should be passed into the `submenu` prop of `DropdownMenu.Item`.
 *
 * Should include one or more of `DropdownMenu.Item`, `DropdownMenu.CheckboxItem` and `DropdownMenu.Group` as direct descendants.
 */
declare const DropdownMenuSubmenu: React.ForwardRefExoticComponent<DropdownMenuSubmenuProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface DropdownMenuGroupProps extends Omit<BaseProps, "children"> {
    /** The text label for the menu-group. */
    label: string;
    /**
     * The menu items within the group.
     *
     * Should be an array of `DropdownMenu.Item` and/or `DropdownMenu.CheckboxItem` elements.
     */
    items: React.JSX.Element[];
}
/**
 * A group of menu items within the dropdown menu. Should be used as a child of `DropdownMenu.Content` and `DropdownMenu.Submenu`.
 *
 * Example:
 * ```tsx
 * <DropdownMenu.Group
 * 	label="Manage"
 * 	items={[
 *   <DropdownMenu.Item key="add" label="Add" />,
 *   <DropdownMenu.Item key="edit" label="Edit" />
 * 	]}
 * />
 * ```
 */
declare const DropdownMenuGroup: React.ForwardRefExoticComponent<DropdownMenuGroupProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export { DropdownMenuButton as Button, DropdownMenuCheckboxItem as CheckboxItem, DropdownMenuContent as Content, DropdownMenuGroup as Group, DropdownMenuItem as Item, DropdownMenuProvider as Provider, DropdownMenuSubmenu as Submenu, };