@mskcc/carbon-react/lib/components/ComboBox/ComboBox.d.ts

Carbon react components for the MSKCC DSM

/**
 * MSKCC DSM 2021, 2023
 */
import Downshift from 'downshift';
import { ReactNodeLike } from 'prop-types';
import React from 'react';
import { ListBoxType, ListBoxSize } from '../ListBox';
type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
export interface ComboBoxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
    /**
     * Specify a label to be read by screen readers on the container node
     * 'aria-label' of the ListBox component.
     */
    ['aria-label']?: string;
    /**
     * @deprecated please use `aria-label` instead.
     * 'aria-label' of the ListBox component.
     */
    ariaLabel?: string;
    /**
     * An optional className to add to the container node
     */
    className?: string;
    /**
     * Specify the direction of the combobox dropdown. Can be either top or bottom.
     */
    direction?: 'top' | 'bottom';
    /**
     * Specify if the control should be disabled, or not
     */
    disabled?: boolean;
    /**
     * Additional props passed to Downshift
     */
    downshiftProps?: React.ComponentProps<typeof Downshift>;
    /**
     * Provide helper text that is used alongside the control label for
     * additional help
     */
    helperText?: string;
    /**
     * Specify a custom `id` for the input
     */
    id: string;
    /**
     * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
     * from their collection that are pre-selected
     */
    initialSelectedItem?: object | string | number;
    /**
     * Specify if the currently selected value is invalid.
     */
    invalid?: boolean;
    /**
     * Message which is displayed if the value is invalid.
     */
    invalidText?: ReactNodeLike;
    /**
     * Optional function to render items as custom components instead of strings.
     * Defaults to null and is overridden by a getter
     */
    itemToElement?: React.ComponentType | null;
    /**
     * Helper function passed to downshift that allows the library to render a
     * given item to a string label. By default, it extracts the `label` field
     * from a given item to serve as the item label in the list
     */
    itemToString?: (item: unknown) => string;
    /**
     * We try to stay as generic as possible here to allow individuals to pass
     * in a collection of whatever kind of data structure they prefer
     */
    items: (object | string | number)[];
    /**
     * @deprecated
     * should use "light theme" (white background)?
     */
    light?: boolean;
    /**
     * `onChange` is a utility for this controlled component to communicate to a
     * consuming component when a specific dropdown item is selected.
     * `({ selectedItem }) => void`
    //  * @param {{ selectedItem }}
     */
    onChange: (data: {
        selectedItem: any;
    }) => void;
    /**
     * Callback function to notify consumer when the text input changes.
     * This provides support to change available items based on the text.
     * `(inputText) => void`
     * @param {string} inputText
     */
    onInputChange?: (inputText: string) => void;
    /**
     * Helper function passed to Downshift that allows the user to observe internal
     * state changes
     * `(changes, stateAndHelpers) => void`
     */
    onStateChange?: (changes: object, stateAndHelpers: object) => void;
    /**
     * Callback function that fires when the combobox menu toggle is clicked
     * `(evt) => void`
     * @param {MouseEvent} event
     */
    onToggleClick?: (evt: MouseEvent) => void;
    /**
     * Used to provide a placeholder text node before a user enters any input.
     * This is only present if the control has no items selected
     */
    placeholder?: string;
    /**
     * Is the ComboBox readonly?
     */
    readOnly?: boolean;
    /**
     * For full control of the selection
     */
    selectedItem?: object | string | number;
    /**
     * Specify your own filtering logic by passing in a `shouldFilterItem`
     * function that takes in the current input and an item and passes back
     * whether or not the item should be filtered.
     */
    shouldFilterItem?: (input: any) => boolean;
    /**
     * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
     */
    size?: ListBoxSize;
    /**
     * Provide text to be used in a `<label>` element that is tied to the
     * combobox via ARIA attributes.
     */
    titleText?: ReactNodeLike;
    /**
     * Specify a custom translation function that takes in a message identifier
     * and returns the localized string for the message
     */
    translateWithId?: (id: any) => string;
    /**
     * Currently supports either the default type, or an inline variant
     */
    type?: ListBoxType;
    /**
     * Specify whether the control is currently in warning state
     */
    warn?: boolean;
    /**
     * Provide the text that is displayed when the control is in warning state
     */
    warnText?: ReactNodeLike;
}
declare const ComboBox: React.ForwardRefExoticComponent<ComboBoxProps & React.RefAttributes<unknown>>;
export default ComboBox;