@navinc/base-react-components/dist/menu.d.ts

Nav's Pattern Library

import { KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
import { PopperProps } from '@mui/material/node/Popper/index.js';
import { ButtonBaseProps } from './button.js';
/** @deprecated use the wayfinder dropdown from @navinc/base-react-components/wayfinder instead */
export declare const MenuItem: (props: ButtonBaseProps) => import("react/jsx-runtime").JSX.Element;
export type MenuProps = {
    'data-testid'?: string;
    /** Callback fired when the component requests to be closed. */
    onClose?: (event: Event | SyntheticEvent | KeyboardEvent) => void;
    children?: ReactNode;
} & Pick<PopperProps, 'anchorEl' | 'disablePortal' | 'placement' | 'open'>;
/**
 * @deprecated use the wayfinder dropdown from @navinc/base-react-components/wayfinder instead
A basic menu opens _below_ the anchor element by default. When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible.

The `onClose` callback is called when pressing <kbd>Esc</kbd>, <kbd>Tab</kbd>, or clicking outside the menu.

### Basic usage

<ol style="list-style: decimal;">
  <li>Define a <code>anchorEl</code> to set the position of the menu. The anchor element (ie. button) is <em>NOT</em> part of this component.</li>
  <li>Bind <code>open</code> and <code>onClose</code> props.</li>
  <li>Use <code>MenuItem</code> as children for default button styling. Set a <code>tabIndex</code> for each item to enable keyboard navigation. Children accepts anything for more customized usage. If <code>MenuItem</code> or button is not the first child element, then apply <code>autoFocus</code> prop on the child element you would like to first focus on when menu is opened.</li>
  <li>The menu aligns to the <em>bottom right</em> of the <code>anchorEl</code> by default. This can be customized using the <code>placement</code> prop.</li>
</ol>

 **/
export declare const Menu: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
    'data-testid'?: string;
    /** Callback fired when the component requests to be closed. */
    onClose?: (event: Event | SyntheticEvent | KeyboardEvent) => void;
    children?: ReactNode;
} & Pick<PopperProps, "open" | "placement" | "anchorEl" | "disablePortal">, never>> & string & Omit<({ children, onClose, placement, "data-testid": dataTestId, ...popperProps }: MenuProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;