@nopendsui/mention/dist/index.d.ts

Mention is a component that allows to mention items in a list by a trigger character.

import { AnchorPositionerProps, Primitive, PointerDownOutsideEvent, Direction, PortalProps } from '@nopendsui/shared';
import * as React from 'react';

interface MentionContentProps extends AnchorPositionerProps, React.ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * Event handler called when the `Escape` key is pressed.
     *
     * Can be used to prevent the popover from closing when the `Escape` key is pressed.
     */
    onEscapeKeyDown?: (event: KeyboardEvent) => void;
    /**
     * Event handler called when a `pointerdown` event happens outside of the content.
     *
     * Can be used to prevent the popover from closing when the pointer is outside of the content.
     */
    onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
}
declare const MentionContent: React.ForwardRefExoticComponent<MentionContentProps & React.RefAttributes<HTMLDivElement>>;
declare const Content: React.ForwardRefExoticComponent<MentionContentProps & React.RefAttributes<HTMLDivElement>>;

interface MentionItemProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
    /**
     * The value of the item.
     *
     * Cannot be an empty string.
     */
    value: string;
    /**
     * The label of the item. By default value is used as label.
     *
     * Override the text value for mention item in the input.
     */
    label?: string;
    /** Whether the item is disabled. */
    disabled?: boolean;
}
declare const MentionItem: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;
declare const Item: React.ForwardRefExoticComponent<MentionItemProps & React.RefAttributes<HTMLDivElement>>;

interface MentionRootProps extends Omit<React.ComponentPropsWithoutRef<typeof Primitive.div>, "value" | "defaultValue"> {
    /** The currently selected value. */
    value?: string[];
    /** The default selected value. */
    defaultValue?: string[];
    /** Event handler called when a mention item is selected. */
    onValueChange?: (value: string[]) => void;
    /** Whether the mention menu is open. */
    open?: boolean;
    /** The default open state. */
    defaultOpen?: boolean;
    /** Event handler called when the open state changes. */
    onOpenChange?: (open: boolean) => void;
    /** The current input value. */
    inputValue?: string;
    /** Event handler called when the input value changes. */
    onInputValueChange?: (value: string) => void;
    /** The character that activates the mention menu when typed. */
    trigger?: string;
    /** The direction the mention should open. */
    dir?: Direction;
    /** Whether the mention is disabled. */
    disabled?: boolean;
    /**
     * Event handler called when the filter is applied.
     * Can be used to prevent the default filtering behavior.
     */
    onFilter?: (options: string[], term: string) => string[];
    /**
     * Whether the mention uses exact string matching or fuzzy matching.
     * When onFilter is provided, this prop is ignored.
     * @default false
     */
    exactMatch?: boolean;
    /**
     * Whether the mention loops through items.
     * @default false
     */
    loop?: boolean;
    /**
     * Whether the mention is modal.
     * @default false
     */
    modal?: boolean;
    /**
     * Whether the mention is read-only.
     * @default false
     */
    readonly?: boolean;
    /**
     * Whether the mention is required in a form context.
     * @default false
     */
    required?: boolean;
    /** The name of the mention for form submission. */
    name?: string;
}
declare const MentionRoot: React.ForwardRefExoticComponent<MentionRootProps & React.RefAttributes<HTMLDivElement>>;
declare const Root: React.ForwardRefExoticComponent<MentionRootProps & React.RefAttributes<HTMLDivElement>>;

interface MentionLabelProps extends React.ComponentPropsWithoutRef<typeof Primitive.label> {
}
declare const MentionLabel: React.ForwardRefExoticComponent<MentionLabelProps & React.RefAttributes<HTMLLabelElement>>;
declare const Label: React.ForwardRefExoticComponent<MentionLabelProps & React.RefAttributes<HTMLLabelElement>>;

interface MentionInputProps extends React.ComponentPropsWithoutRef<typeof Primitive.input> {
}
declare const MentionInput: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;
declare const Input: React.ForwardRefExoticComponent<MentionInputProps & React.RefAttributes<HTMLInputElement>>;

interface MentionPortalProps extends Pick<PortalProps, "container" | "children"> {
}
declare const MentionPortal: React.ForwardRefExoticComponent<MentionPortalProps & React.RefAttributes<HTMLDivElement>>;
declare const Portal: React.ForwardRefExoticComponent<MentionPortalProps & React.RefAttributes<HTMLDivElement>>;

export { Content, Input, Item, Label, MentionContent, type MentionContentProps, MentionInput, type MentionInputProps, MentionItem, type MentionItemProps, MentionLabel, type MentionLabelProps, MentionPortal, type MentionPortalProps, MentionRoot, type MentionRootProps, Portal, Root };