@mskcc/carbon-react
Version:
Carbon react components for the MSKCC DSM
181 lines (180 loc) • 6.12 kB
TypeScript
/**
* MSKCC DSM 2021, 2023
*/
import { UseSelectProps } from 'downshift';
import React from 'react';
import { ListBoxSize, ListBoxType } from '../ListBox';
import { ListBoxProps } from '../ListBox/ListBox';
import { OnChangeData } from '../Dropdown';
interface SharedOptions {
locale: string;
}
interface DownshiftTypedProps<ItemType> {
itemToString?(item: ItemType): string;
}
interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
translateWithId?(messageId: MID, args?: ARGS): string;
}
interface SortItemsOptions<ItemType> extends SharedOptions, DownshiftTypedProps<ItemType> {
compareItems(item1: ItemType, item2: ItemType, options: SharedOptions): number;
selectedItems: ItemType[];
}
interface MultiSelectSortingProps<ItemType> {
compareItems?(item1: ItemType, item2: ItemType, options: SharedOptions): number;
sortItems?(items: ReadonlyArray<ItemType>, options: SortItemsOptions<ItemType>): ItemType[];
}
export interface MultiSelectProps<ItemType> extends MultiSelectSortingProps<ItemType>, InternationalProps<'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection'> {
/**
* Specify the key in the object to use for the label.
*/
labelKey?: string;
className?: string;
/**
* only show the count and not individual selections
*/
countOnly?: boolean;
/**
* put selected items outside of the dropdown
*/
outsideItems?: boolean;
/**
* Specify the text that should be read for screen readers that describes total items selected
*/
clearSelectionDescription?: string;
/**
* Specify the text that should be read for screen readers to clear selection.
*/
clearSelectionText?: string;
/**
* Specify the direction of the multiselect dropdown. Can be either top or bottom.
*/
direction?: 'bottom' | 'top';
/**
* Disable the control
*/
disabled?: ListBoxProps['disabled'];
/**
* 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 arbitrary items from their collection that are
* pre-selected
*/
initialSelectedItems?: ItemType[];
/**
* Is the current selection invalid?
*/
invalid?: boolean;
/**
* If invalid, what is the error?
*/
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>;
/**
* 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<React.ReactNode>;
/**
* `true` to use the light version.
*
* @deprecated The `light` prop for `MultiSelect` has
* been deprecated in favor of the new `Layer` component. It will be removed in the next major release.
*/
light?: boolean;
/**
* Specify the locale of the control. Used for the default `compareItems`
* used for sorting the list of items in the control.
*/
locale?: string;
/**
* `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;
/**
* `onMenuChange` is a utility for this controlled component to communicate to a
* consuming component that the menu was open(`true`)/closed(`false`).
*/
onMenuChange?(open: boolean): void;
/**
* Initialize the component with an open(`true`)/closed(`false`) menu.
*/
open?: boolean;
/**
* Whether or not the Dropdown is readonly
*/
readOnly?: boolean;
/**
* For full control of the selected items
*/
selectedItems?: ItemType[];
/**
* Specify feedback (mode) of the selection.
* `top`: selected item jumps to top
* `fixed`: selected item stays at it's position
* `top-after-reopen`: selected item jump to top after reopen dropdown
*/
selectionFeedback?: 'fixed' | 'top' | 'top-after-reopen';
/**
* 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
* multiselect via ARIA attributes.
*/
titleText?: React.ReactNode;
/**
* Specify 'inline' to create an inline multi-select.
*/
type?: ListBoxType;
/**
* Specify title to show title on hover
*/
useTitleInItem?: boolean;
/**
* 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 MultiSelectComponentProps<ItemType> = React.PropsWithChildren<MultiSelectProps<ItemType>> & React.RefAttributes<HTMLButtonElement>;
interface MultiSelectComponent {
Filterable: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
<ItemType>(props: MultiSelectComponentProps<ItemType>): React.ReactElement | null;
}
declare const _default: MultiSelectComponent;
export default _default;