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

Carbon react components for the MSKCC DSM

/**
 * Copyright IBM Corp. 2022
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import React, { ReactNode } from 'react';
import { UseSelectProps } from 'downshift';
import { ListBoxSize, ListBoxType } from '../ListBox';
import { ReactAttr } from '../../types/common';
type ExcludedAttributes = 'id' | 'onChange';
export interface OnChangeData<ItemType> {
    selectedItem: ItemType | null;
}
export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>, 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.
     * Specify a label to be read by screen readers on the container note.
     */
    ariaLabel?: string;
    /**
     * Specify the direction of the dropdown. Can be either top or bottom.
     */
    direction?: 'top' | 'bottom';
    /**
     * Disable the control
     */
    disabled?: boolean;
    /**
     * Additional props passed to Downshift
     */
    downshiftProps?: Partial<UseSelectProps<ItemType>>;
    /**
     * Provide helper text that is used alongside the control label for
     * additional help
     */
    helperText?: React.ReactNode;
    /**
     * Specify whether the title text should be hidden or not
     */
    hideLabel?: boolean;
    /**
     * Specify a custom `id`
     */
    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?: ItemType;
    /**
     * Specify if the currently selected value is invalid.
     */
    invalid?: boolean;
    /**
     * Message which is displayed if the value is invalid.
     */
    invalidText?: React.ReactNode;
    /**
     * Function to render items as custom components instead of strings.
     * Defaults to null and is overridden by a getter
     */
    itemToElement?: React.JSXElementConstructor<ItemType> | 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: ItemType): 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: ItemType[];
    /**
     * Generic `label` that will be used as the textual representation of what
     * this field is for
     */
    label: NonNullable<ReactNode>;
    /**
     * `true` to use the light version.
     * @deprecated The `light` prop for `Dropdown` has been deprecated
     * in favor of the new `Layer` component. It will be removed in the next major release.
     */
    light?: boolean;
    /**
     * `onChange` is a utility for this controlled component to communicate to a
     * consuming component what kind of internal state changes are occurring.
     */
    onChange?(data: OnChangeData<ItemType>): void;
    /**
     * Whether or not the Dropdown is readonly
     */
    readOnly?: boolean;
    /**
     * An optional callback to render the currently selected item as a react element instead of only
     * as a string.
     */
    renderSelectedItem?(item: ItemType): string;
    /**
     * In the case you want to control the dropdown selection entirely.
     */
    selectedItem?: ItemType;
    /**
     * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
     */
    size?: ListBoxSize;
    /**
     * Provide the title text that will be read by a screen reader when
     * visiting this control
     */
    titleText?: React.ReactNode;
    /**
     * Callback function for translating ListBoxMenuIcon SVG title
     */
    translateWithId?(messageId: string, args?: Record<string, unknown>): string;
    /**
     * The dropdown type, `default` or `inline`
     */
    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?: React.ReactNode;
}
type DropdownComponentProps<ItemType> = React.PropsWithoutRef<React.PropsWithChildren<DropdownProps<ItemType>> & React.RefAttributes<HTMLButtonElement>>;
interface DropdownComponent {
    <ItemType>(props: DropdownComponentProps<ItemType>): React.ReactElement | null;
}
declare const _default: DropdownComponent;
export default _default;