@base-ui-components/react/menu/item/useMenuItem.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import { HTMLProps } from "../../utils/types.js";
import { MenuStore } from "../store/MenuStore.js";
export declare const REGULAR_ITEM: {
  type: "regular-item";
};
export declare function useMenuItem(params: useMenuItem.Parameters): useMenuItem.ReturnValue;
export interface UseMenuItemParameters {
  /**
   * Whether to close the menu when the item is clicked.
   */
  closeOnClick: boolean;
  /**
   * Whether the component should ignore user interaction.
   */
  disabled: boolean;
  /**
   * Determines if the menu item is highlighted.
   */
  highlighted: boolean;
  /**
   * The id of the menu item.
   */
  id: string | undefined;
  /**
   * Whether the component renders a native `<button>` element when replacing it
   * via the `render` prop.
   * Set to `false` if the rendered element is not a button (e.g. `<div>`).
   * @default false
   */
  nativeButton: boolean;
  /**
   * Additional data specific to the item type.
   */
  itemMetadata: useMenuItem.Metadata;
  /**
   * The node id of the menu positioner.
   */
  nodeId: string | undefined;
  /**
   * The menu store.
   */
  store: MenuStore<any>;
}
export type UseMenuItemMetadata = typeof REGULAR_ITEM | {
  type: 'submenu-trigger';
  setActive: () => void;
};
export interface UseMenuItemReturnValue {
  /**
   * Resolver for the root slot's props.
   * @param externalProps event handlers for the root slot
   * @returns props that should be spread on the root slot
   */
  getItemProps: (externalProps?: HTMLProps) => HTMLProps;
  /**
   * The ref to the component's root DOM element.
   */
  itemRef: React.RefCallback<HTMLElement> | null;
}
export declare namespace useMenuItem {
  type Parameters = UseMenuItemParameters;
  type Metadata = UseMenuItemMetadata;
  type ReturnValue = UseMenuItemReturnValue;
}