@lexical/react/dist/shared/LexicalMenu.d.ts

This package provides Lexical components and hooks for React applications.

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */
import { MenuOption } from '@lexical/react/LexicalMenuOption';
import { SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND } from '@lexical/react/LexicalTypeaheadMenuPluginUtils';
import { type CommandListenerPriority, type LexicalEditor, type TextNode } from 'lexical';
import { type JSX, type ReactPortal, type RefObject } from 'react';
/**
 * Describes where a typeahead trigger matched the text before the cursor: the
 * `leadOffset` where the match starts, the captured `matchingString` (the query
 * after the trigger), and the `replaceableString` (the full matched text,
 * including the trigger, that should be replaced when an option is selected).
 */
export type MenuTextMatch = {
    leadOffset: number;
    matchingString: string;
    replaceableString: string;
};
/**
 * The position and match information for an open menu: a `getRect` function that
 * returns the anchor rectangle the menu is positioned against, and the optional
 * {@link MenuTextMatch} that opened it.
 */
export type MenuResolution = {
    match?: MenuTextMatch;
    getRect: () => DOMRect;
};
export { MenuOption };
/**
 * A render function for a menu's contents. It receives the anchor element ref,
 * the current item props (selected index, options, and helpers to select or
 * highlight an option), and the matching query string, and returns the menu
 * element (or portal) to render, or `null` to render nothing. Provide one to
 * fully customize a menu's appearance.
 */
export type MenuRenderFn<TOption extends MenuOption> = (anchorElementRef: RefObject<HTMLElement | null>, itemProps: {
    selectedIndex: number | null;
    selectOptionAndCleanUp: (option: TOption) => void;
    setHighlightedIndex: (index: number) => void;
    options: TOption[];
}, matchingString: string) => ReactPortal | JSX.Element | null;
/**
 * Keeps an open menu aligned with its trigger by calling `onReposition` on
 * scroll, window resize, and target element resize while `resolution` is set.
 * Optionally calls `onVisibilityChange` when the trigger enters or leaves its
 * nearest scroll container's viewport.
 */
export declare function useDynamicPositioning(resolution: MenuResolution | null, targetElement: HTMLElement | null, onReposition: () => void, onVisibilityChange?: (isInView: boolean) => void): void;
export { SCROLL_TYPEAHEAD_OPTION_INTO_VIEW_COMMAND };
export declare function LexicalMenu<TOption extends MenuOption>({ close, editor, anchorElementRef, resolution, options, menuRenderFn: menuRenderFnProp, onSelectOption, shouldSplitNodeWithQuery, commandPriority, preselectFirstItem, }: {
    close: () => void;
    editor: LexicalEditor;
    anchorElementRef: RefObject<HTMLElement | null>;
    resolution: MenuResolution;
    options: TOption[];
    shouldSplitNodeWithQuery?: boolean;
    menuRenderFn?: MenuRenderFn<TOption>;
    onSelectOption: (option: TOption, textNodeContainingQuery: TextNode | null, closeMenu: () => void, matchingString: string) => void;
    commandPriority?: CommandListenerPriority;
    preselectFirstItem?: boolean;
}): JSX.Element | null;
export declare function useMenuAnchorRef(resolution: MenuResolution | null, setResolution: (r: MenuResolution | null) => void, className?: string, parent?: HTMLElement, shouldIncludePageYOffset__EXPERIMENTAL?: boolean): RefObject<HTMLElement | null>;
/**
 * Detects whether the text before the cursor should open a typeahead menu.
 * Given the current `text` and `editor`, it returns a {@link MenuTextMatch}
 * describing the match, or `null` if there is none. See
 * {@link useBasicTypeaheadTriggerMatch} for a common implementation.
 */
export type TriggerFn = (text: string, editor: LexicalEditor) => MenuTextMatch | null;