@primer/react/lib-esm/TextInputWithTokens/TextInputWithTokens.d.ts

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { TextInputProps } from '../TextInput';
import Token from '../Token/Token';
import { TokenSizeKeys } from '../Token/TokenBase';
type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>;
export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponent = typeof Token> = {
    /**
     * The array of tokens to render
     */
    tokens: TokenComponentType extends React.ComponentType<React.PropsWithChildren<infer TokenProps>> ? TokenProps[] : never;
    /**
     * The function that gets called when a token is removed
     */
    onTokenRemove: (tokenId: string | number) => void;
    /**
     * The component used to render each token
     */
    tokenComponent?: TokenComponentType;
    /**
     * The maximum height of the component. If the content in the input exceeds this height,
     * it will scroll vertically
     */
    maxHeight?: React.CSSProperties['maxHeight'];
    /**
     * Whether tokens should render inline horizontally. By default, tokens wrap to new lines.
     */
    preventTokenWrapping?: boolean;
    /**
     * The size of the tokens and text input
     */
    size?: TokenSizeKeys;
    /**
     * Whether the remove buttons should be rendered in the tokens
     */
    hideTokenRemoveButtons?: boolean;
    /**
     * The number of tokens to display before truncating
     */
    visibleTokenCount?: number;
} & Omit<TextInputProps, 'size'>;
declare const TextInputWithTokens: React.ForwardRefExoticComponent<{
    /**
     * The array of tokens to render
     */
    tokens: any[] | (Omit<(Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
        ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
    }) | (Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "ref"> & {
        ref?: ((instance: HTMLAnchorElement | null) => void) | React.RefObject<HTMLAnchorElement> | null | undefined;
    }) | (Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
        ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
    }), keyof import("../Token/Token").TokenProps> & import("../Token/Token").TokenProps & {
        as?: "a" | "button" | "span" | undefined;
    })[];
    /**
     * The function that gets called when a token is removed
     */
    onTokenRemove: (tokenId: string | number) => void;
    /**
     * The component used to render each token
     */
    tokenComponent?: import("../utils/polymorphic").ForwardRefComponent<"a" | "button" | "span", import("../Token/Token").TokenProps> | AnyReactComponent | undefined;
    /**
     * The maximum height of the component. If the content in the input exceeds this height,
     * it will scroll vertically
     */
    maxHeight?: React.CSSProperties['maxHeight'];
    /**
     * Whether tokens should render inline horizontally. By default, tokens wrap to new lines.
     */
    preventTokenWrapping?: boolean | undefined;
    /**
     * The size of the tokens and text input
     */
    size?: TokenSizeKeys | undefined;
    /**
     * Whether the remove buttons should be rendered in the tokens
     */
    hideTokenRemoveButtons?: boolean | undefined;
    /**
     * The number of tokens to display before truncating
     */
    visibleTokenCount?: number | undefined;
} & Omit<TextInputProps, "size"> & React.RefAttributes<HTMLInputElement>>;
export default TextInputWithTokens;