@carbon/ibm-products/lib/components/MultiAddSelect/MultiAddSelect.d.ts

Carbon for IBM Products

import React, { ReactNode } from 'react';
type Filter = {
    id?: string;
    label?: string;
};
type Modifier = {
    label?: string;
    options?: string[];
    /**
     * Allows to select multiple modifier items, default it is false
     */
    multiSelect?: boolean;
};
interface Entry {
    avatar?: {
        alt?: string;
        icon?: () => void;
        src?: string;
        theme?: 'light' | 'dark';
    };
    children?: ReactNode;
    icon?: () => void;
    id: string;
    subtitle?: string;
    title: string;
    value: string;
}
type Theme = 'light' | 'dark';
type ItemType = {
    entries?: Entry[];
    modifiers: Modifier;
    sortBy: string[];
    filterBy: string[];
};
export interface MultiAddSelectProps {
    /**
     * optional class name
     */
    className?: string;
    /**
     * placeholder for column input filter
     */
    columnInputPlaceholder?: string;
    /**
     * text description that appears under the title
     */
    description?: string;
    /**
     * options to display in the global filter box. values are generated
     * from the id which should correlate with a specific property in an
     * item entry
     */
    globalFilters?: Filter[];
    globalFiltersIconDescription?: string;
    /**
     * placeholder text for the global filter dropdown
     */
    globalFiltersPlaceholderText?: string;
    /**
     * text for the global filter primary button
     */
    globalFiltersPrimaryButtonText?: string;
    /**
     * text for the global filter secondary button
     */
    globalFiltersSecondaryButtonText?: string;
    /**
     * label for global search input
     */
    globalSearchLabel?: string;
    /**
     * placeholder for global search input
     */
    globalSearchPlaceholder?: string;
    /**
     * the theme for the empty state illustration
     */
    illustrationTheme?: Theme;
    /**
     * title that displays in the sidebar / influencer
     */
    influencerTitle?: string;
    /**
     * object that contains the item data. for more information reference the
     * "Structuring items" section in the docs tab
     */
    items?: ItemType;
    /**
     * label that display above the list of items
     */
    itemsLabel?: string;
    /**
     * text to display when no results are found from the global search
     */
    noResultsDescription?: string;
    /**
     * title to display when no results are found from the global search
     */
    noResultsTitle?: string;
    /**
     * text body that displays in the sidebar when nothing is selected
     */
    noSelectionDescription?: string;
    /**
     * title that displays in the sidebar when nothing is selected
     */
    noSelectionTitle?: string;
    /**
     * function to call when the close button clicked
     */
    onClose?: () => void;
    /**
     * text for close button
     */
    onCloseButtonText?: string;
    /**
     * function to call when the submit button is clicked. returns a selection
     */
    onSubmit?: () => void;
    /**
     * text for the submit button
     */
    onSubmitButtonText?: string;
    /**
     * specifies if the component is open or not
     */
    open?: boolean;
    /**
     * text that displays when displaying filtered items
     */
    searchResultsTitle?: string;
    /**
     * header text
     */
    title?: string;
}
/**
 * Used to add or select multiple or more items from larger lists or hierarchies.
 */
export declare let MultiAddSelect: React.ForwardRefExoticComponent<MultiAddSelectProps & React.RefAttributes<HTMLDivElement>>;
export {};