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
*
* ```
*
* @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
*
* ```
*
* @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;
/**
* 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, '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";
*
*
* ```
*/
export declare const ChipList: React.ForwardRefExoticComponent>;
declare const _default: React.NamedExoticComponent, "onSelect"> & React.RefAttributes>;
export default _default;