@primer/react-brand/lib/ActionMenu/ActionMenu.d.ts

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import React, { PropsWithChildren, Ref, ReactElement } from 'react';
import { ButtonProps } from '../';
import { Icon } from '@primer/octicons-react';
import { PositionSettings } from '@primer/behaviors';
import type { BaseProps } from '../component-helpers';
/**
 * Design tokens
 */
import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/action-menu/colors-with-modes.css';
export declare const actionMenuOverlaySides: PositionSettings["side"][];
export declare const ActionMenuSizes: readonly ["small", "medium"];
export declare const ActionMenuButtonModes: readonly ["default", "split-button"];
export type ActionMenuButtonModes = (typeof ActionMenuButtonModes)[number];
export type ActionMenuSizes = (typeof ActionMenuSizes)[number];
export type ActionMenuProps = {
    /**
     * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
     */
    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>;
    /**
     * Determines whether the ActionMenu is disabled
     */
    disabled?: boolean;
    /**
     * Determines whether the ActionMenu is open by default
     */
    open?: boolean;
    /**
     * Callback that is called when an item is selected.
     * The value of the selected item is passed as an argument.
     */
    onSelect?: (newValue: string) => void;
    /**
     * The selection variant of the ActionMenu.
     * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.
     * - `none`: No items can be selected. Menu items as a menuitem.
     */
    selectionVariant?: 'single' | 'none';
    /**
     * Test id for the ActionMenu
     */
    'data-testid'?: string;
    /**
     * Horizontal alignment of the menu relative to the bottom of the button
     */
    menuAlignment?: 'start' | 'end';
    /**
     * Size configuratin of the ActionMenu
     */
    size?: ActionMenuSizes;
    menuSide?: PositionSettings['side'];
    /**
     * Alternative behavior for the button and menu items
     * - `default`: The button and menu items behave as a standard button and menu item.
     * - `split-button`: The button behaves as a split button, and the menu items behave as links.
     */
    mode?: ActionMenuButtonModes;
} & BaseProps<HTMLDivElement>;
type ActionMenuContextType = {
    size?: ActionMenuSizes;
    setSize?: React.Dispatch<React.SetStateAction<ActionMenuSizes | undefined>>;
};
export declare const useActionMenuContext: () => ActionMenuContextType;
export declare const ActionMenuProvider: React.FC<ActionMenuProps>;
type ActionMenuButtonProps = PropsWithChildren<Ref<HTMLButtonElement>> & {
    id?: string;
    as?: ButtonProps<'a'>['as'];
    href?: ButtonProps<'a'>['href'];
    ref?: React.RefObject<HTMLButtonElement>;
    className?: string;
    menuOpen?: boolean;
    disabled?: boolean;
    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
    'data-testid'?: string;
    size?: ActionMenuSizes;
    _mode?: ActionMenuButtonModes;
    variant?: ButtonProps<'a'>['variant'];
    leadingVisual?: ButtonProps<'a'>['leadingVisual'];
};
type ActionMenuItemBaseProps = {
    handler?: (newValue: string) => void;
    type?: 'none' | 'single' | 'link';
    disabled?: boolean;
    size?: ActionMenuSizes;
    leadingVisual?: React.ReactElement | React.ReactNode | Icon;
} & PropsWithChildren<React.HTMLProps<HTMLLIElement>>;
type ActionMenuItemAnchorProps = ActionMenuItemBaseProps & {
    as: 'a';
} & Omit<React.HTMLProps<HTMLAnchorElement>, keyof ActionMenuItemBaseProps | 'as'>;
type ActionMenuItemDefaultProps = ActionMenuItemBaseProps & {
    as?: string;
    value?: string;
    selected?: boolean;
} & Omit<React.HTMLProps<HTMLLIElement>, keyof ActionMenuItemBaseProps | 'as'>;
type ActionMenuOverlayProps = PropsWithChildren<Ref<HTMLUListElement>> & {
    'aria-label': string;
    id?: string;
    ref?: React.RefObject<HTMLUListElement>;
    className?: string;
    'data-testid'?: string;
    menuOpen?: boolean;
    style?: React.CSSProperties;
};
/**
 * Use ActionMenu to display a list of actions or selections that expand through a trigger button.
 * @see https://primer.style/brand/components/ActionMenu
 */
export declare const ActionMenu: React.NamedExoticComponent<{
    /**
     * The content of the ActionMenu. Must be an ActionMenu.Button and an ActionMenu.Overlay
     */
    children: ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps> | Array<ReactElement<ActionMenuButtonProps> | ReactElement<ActionMenuOverlayProps>>;
    /**
     * Determines whether the ActionMenu is disabled
     */
    disabled?: boolean;
    /**
     * Determines whether the ActionMenu is open by default
     */
    open?: boolean;
    /**
     * Callback that is called when an item is selected.
     * The value of the selected item is passed as an argument.
     */
    onSelect?: (newValue: string) => void;
    /**
     * The selection variant of the ActionMenu.
     * - `single`: Only one item can be selected at a time. Menu items as a menuitemradio.
     * - `none`: No items can be selected. Menu items as a menuitem.
     */
    selectionVariant?: "single" | "none";
    /**
     * Test id for the ActionMenu
     */
    'data-testid'?: string;
    /**
     * Horizontal alignment of the menu relative to the bottom of the button
     */
    menuAlignment?: "start" | "end";
    /**
     * Size configuratin of the ActionMenu
     */
    size?: ActionMenuSizes;
    menuSide?: PositionSettings["side"];
    /**
     * Alternative behavior for the button and menu items
     * - `default`: The button and menu items behave as a standard button and menu item.
     * - `split-button`: The button behaves as a split button, and the menu items behave as links.
     */
    mode?: ActionMenuButtonModes;
} & BaseProps<HTMLDivElement>> & {
    readonly type: ({ id, children, "data-testid": testId, disabled, open, selectionVariant, menuAlignment, size, menuSide, onSelect, mode, }: ActionMenuProps) => import("react/jsx-runtime").JSX.Element;
} & {
    Button: React.ForwardRefExoticComponent<(Omit<((instance: HTMLButtonElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) & {
        children?: React.ReactNode | undefined;
    } & {
        id?: string;
        as?: ButtonProps<"a">["as"];
        href?: ButtonProps<"a">["href"];
        ref?: React.RefObject<HTMLButtonElement>;
        className?: string;
        menuOpen?: boolean;
        disabled?: boolean;
        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
        'data-testid'?: string;
        size?: ActionMenuSizes;
        _mode?: ActionMenuButtonModes;
        variant?: ButtonProps<"a">["variant"];
        leadingVisual?: ButtonProps<"a">["leadingVisual"];
    }, "ref"> | Omit<React.RefObject<HTMLButtonElement> & {
        children?: React.ReactNode | undefined;
    } & {
        id?: string;
        as?: ButtonProps<"a">["as"];
        href?: ButtonProps<"a">["href"];
        ref?: React.RefObject<HTMLButtonElement>;
        className?: string;
        menuOpen?: boolean;
        disabled?: boolean;
        onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
        'data-testid'?: string;
        size?: ActionMenuSizes;
        _mode?: ActionMenuButtonModes;
        variant?: ButtonProps<"a">["variant"];
        leadingVisual?: ButtonProps<"a">["leadingVisual"];
    }, "ref">) & React.RefAttributes<HTMLButtonElement>>;
    Item: ({ as, children, className, disabled, handler, selected, type, value, onClick, onKeyDown, leadingVisual: LeadingVisual, ...props }: ActionMenuItemAnchorProps | ActionMenuItemDefaultProps) => import("react/jsx-runtime").JSX.Element;
    Overlay: React.ForwardRefExoticComponent<(Omit<((instance: HTMLUListElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) & {
        children?: React.ReactNode | undefined;
    } & {
        'aria-label': string;
        id?: string;
        ref?: React.RefObject<HTMLUListElement>;
        className?: string;
        'data-testid'?: string;
        menuOpen?: boolean;
        style?: React.CSSProperties;
    }, "ref"> | Omit<React.RefObject<HTMLUListElement> & {
        children?: React.ReactNode | undefined;
    } & {
        'aria-label': string;
        id?: string;
        ref?: React.RefObject<HTMLUListElement>;
        className?: string;
        'data-testid'?: string;
        menuOpen?: boolean;
        style?: React.CSSProperties;
    }, "ref">) & React.RefAttributes<HTMLUListElement>>;
    testIds: {
        root: string;
        readonly button: string;
        readonly overlay: string;
        readonly list: string;
        readonly item: string;
    };
};
export {};