@coreui/react-pro/dist/esm/components/chip-set/useChipSet.d.ts

UI Components Library for React.js

import React, { KeyboardEvent, ReactNode } from 'react';
import { type CChipProps } from '../chip/CChip';
export interface CChipSetItem extends Omit<CChipProps, 'value' | 'children'> {
    /**
     * The value that identifies the chip and tracks its selection.
     */
    value: string;
    /**
     * The chip content. Falls back to `value` when omitted.
     */
    label?: ReactNode;
}
export interface UseChipSetOptions {
    ariaRemoveLabel?: string;
    defaultSelected?: string[];
    disabled?: boolean;
    filter?: boolean;
    removable?: boolean;
    removeIcon?: ReactNode;
    /**
     * Move focus to a neighboring chip after one is removed. Containers that own a
     * different focus target after removal (e.g. CChipInput refocuses its input)
     * set this to `false`.
     */
    restoreFocusOnRemove?: boolean;
    selectable?: boolean;
    selected?: string[];
    selectedIcon?: ReactNode;
    selectionMode?: 'single' | 'multiple';
    onRemoveChip?: (value: string) => void;
    onSelectionChange?: (selected: string[]) => void;
}
/**
 * The shared chip-set engine. Both `CChipSet` and `CChipInput` build on it — the
 * React equivalent of the vanilla `ChipInput extends ChipSet`. It owns selection
 * coordination (single/multiple, controlled-or-uncontrolled), roving focus, the
 * focus-a-neighbor-after-removal behavior, and the per-chip prop injection.
 * Existence of the chips stays with the caller (its children / value list).
 */
export declare const useChipSet: (options: UseChipSetOptions) => {
    rootRef: React.RefObject<HTMLDivElement | null>;
    selectedValues: string[];
    clearSelection: () => void;
    getFocusableChips: () => HTMLElement[];
    handleKeyDown: (event: KeyboardEvent<HTMLElement>) => boolean;
    renderChips: (children: ReactNode) => ReactNode;
    renderChipsFromData: (items: (string | CChipSetItem)[]) => ReactNode;
};