@syncfusion/react-buttons/src/chip-list/chip-list.d.ts

Syncfusion React Buttons package is a feature-rich collection of UI components including Button, CheckBox, RadioButton, Switch, Chip, and more for building modern, interactive React applications.

import { HTMLAttributes } from 'react';
import { ChipBaseProps } from '../chip/chip';
import * as React from 'react';
/**
 * Selection types for ChipList
 */
export type SelectionType = 'Single' | 'Multiple' | 'None';
/**
 * @ignore
 */
export interface ChipListProps {
    /**
     * This chips property helps to render ChipList component.
     * ```html
     * <ChipList chips={['Chip1', 'Chip2']} />
     * ```
     *
     * @default []
     */
    chips?: string[] | ChipItemProps[];
    /**
     * Specifies a value that indicates whether the ChipList component is disabled or not.
     *
     * @default false
     */
    disabled?: boolean;
    /**
     * Specifies the selected chip items in the ChipList.
     * ```html
     * <ChipList selectedChips={[0, 1]} />
     * ```
     *
     * @default []
     */
    selectedChips?: number[];
    /**
     * Defines the selection type of the ChipList. The available types are single, multiple, and none.
     *
     * @default 'None'
     */
    selection?: SelectionType;
    /**
     * Enables or disables the delete functionality of a ChipList.
     *
     * @default false
     */
    removable?: boolean;
    /**
     * Triggers when the chip item is removed.
     *
     * @event onDelete
     */
    onDelete?: (event: ChipListDeleteEvent) => void;
    /**
     * Triggers when the selected chips in the ChipList change.
     *
     * @event onSelect
     */
    onSelect?: (event: ChipListSelectEvent) => void;
}
/**
 * Represents the properties of a Chip component.
 */
export interface ChipItemProps extends ChipBaseProps {
    /**
     * Specifies the custom classes to be added to the chip element.
     *
     * @default -
     */
    className?: string;
    /**
     * Specifies the additional HTML attributes in a key-value pair format.
     *
     * @default -
     */
    htmlAttributes?: React.HTMLAttributes<HTMLDivElement>;
    /**
     * Specifies the children to be rendered for the chip item.
     * This can be a React node, a function that returns a React node, or a string.
     *
     * @default -
     */
    children?: React.ReactNode;
}
/**
 * Represents the arguments for the chip selection event.
 */
export interface ChipListSelectEvent {
    /**
     * Specifies the indexes of the chips that are currently selected.
     */
    selectedChipIndexes: number[];
    /**
     * Specifies the event that triggered the select action.
     */
    event: React.MouseEvent | React.KeyboardEvent;
}
/**
 * Represents the arguments for the chip deletion event.
 */
export interface ChipListDeleteEvent {
    /**
     * Specifies the remaining chips after deletion.
     */
    chips: string[] | ChipItemProps[];
    /**
     * Specifies the event that triggered the delete action.
     */
    event: React.MouseEvent | React.KeyboardEvent;
}
/**
 * Represents the main properties and methods of the ChipList component.
 */
export interface IChipList extends ChipListProps {
    /**
     * Specifies the ChipList component element.
     *
     * @private
     */
    element: HTMLDivElement | null;
    /**
     * Gets the selected chips from the ChipList.
     *
     * @public
     * @returns {string[] | ChipItemProps[]}
     */
    getSelectedChips(): string[] | ChipItemProps[];
}
type ChipListComponentProps = ChipListProps & Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'>;
/**
 * The ChipList component displays a collection of chips that can be used to represent multiple items in a compact form.
 * It supports various selection modes, chip deletion, and customization options.
 *
 * ```typescript
 * import { ChipList } from "@syncfusion/react-buttons";
 *
 * <ChipList chips={['Apple', 'Banana', 'Cherry']} selection='Multiple' removable={true} />
 * ```
 */
export declare const ChipList: React.ForwardRefExoticComponent<ChipListComponentProps & React.RefAttributes<IChipList>>;
declare const _default: React.NamedExoticComponent<ChipListProps & Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & React.RefAttributes<IChipList>>;
export default _default;