@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
125 lines (124 loc) • 6.25 kB
TypeScript
import { BoxProps, ElementProps, Factory, MantineColor, StylesApiProps } from '../../core';
import { ComboboxLikeStylesNames } from '../Combobox';
import { __BaseInputProps, __InputStylesNames, ClearSectionMode, InputClearButtonProps, InputVariant } from '../Input';
import { ScrollAreaProps } from '../ScrollArea';
import type { TreeNodeData } from '../Tree';
import { CheckedStrategy } from './get-checked-values-by-strategy';
import { TreeSelectChevronAriaLabels, TreeSelectRenderNodePayload } from './TreeSelectOption';
export type TreeSelectStylesNames = __InputStylesNames | ComboboxLikeStylesNames | 'pill' | 'pillsList' | 'inputField';
export type TreeSelectMode = 'single' | 'multiple' | 'checkbox';
export type TreeSelectValue<Mode extends TreeSelectMode> = Mode extends 'single' ? string | null : string[];
export interface TreeSelectProps<Mode extends TreeSelectMode = 'single'> extends BoxProps, __BaseInputProps, StylesApiProps<TreeSelectFactory>, ElementProps<'input', 'size' | 'value' | 'defaultValue' | 'onChange'> {
/** Tree data */
data: TreeNodeData[];
/** Selection mode: 'single', 'multiple', or 'checkbox' (with cascade) @default 'single' */
mode?: Mode;
/** Controlled value */
value?: TreeSelectValue<Mode>;
/** Default value */
defaultValue?: TreeSelectValue<Mode>;
/** Called when value changes */
onChange?: (value: TreeSelectValue<Mode>) => void;
/** Disables parent-child cascade in checkbox mode @default false */
checkStrictly?: boolean;
/** Controls which checked nodes appear in value/pills in checkbox mode @default 'child' */
checkedStrategy?: CheckedStrategy;
/** Default expanded node values */
defaultExpandedValues?: string[];
/** Expand all nodes by default @default false */
defaultExpandAll?: boolean;
/** Controlled expanded state */
expandedValues?: string[];
/** Called when expanded state changes */
onExpandedChange?: (values: string[]) => void;
/** Also toggle expand when clicking a parent node (not just the chevron). In `single` and `multiple` modes, parent clicks only expand; only leaves can be selected. In `checkbox` mode, parent clicks both check and expand. @default false */
expandOnClick?: boolean;
/** Enables search filtering @default false */
searchable?: boolean;
/** Controlled search value */
searchValue?: string;
/** Default search value */
defaultSearchValue?: string;
/** Called when search changes */
onSearchChange?: (value: string) => void;
/** Custom filter function */
filter?: (query: string, node: TreeNodeData) => boolean;
/** Message when no nodes match search */
nothingFoundMessage?: React.ReactNode;
/** Allows deselecting in single mode @default true */
allowDeselect?: boolean;
/** Shows clear button @default false */
clearable?: boolean;
/** Determines how the clear button and rightSection are rendered @default 'both' */
clearSectionMode?: ClearSectionMode;
/** Props for the clear button */
clearButtonProps?: InputClearButtonProps;
/** Maximum selectable values (multiple/checkbox mode) */
maxValues?: number;
/** Maximum displayed pills before "+N more" */
maxDisplayedValues?: number;
/** Content shown when values overflow maxDisplayedValues */
maxDisplayedValuesContent?: React.ReactNode | ((overflow: number) => React.ReactNode);
/** Called with removed value in multiple/checkbox mode */
onRemove?: (value: string) => void;
/** Called when clear button is clicked */
onClear?: () => void;
/** Custom node rendering in the dropdown */
renderNode?: (payload: TreeSelectRenderNodePayload) => React.ReactNode;
/** Show tree connection lines between parent and child nodes @default true */
withLines?: boolean;
/** Props for the hidden input */
hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;
/** Divider for hidden input values @default ',' */
hiddenInputValuesDivider?: string;
/** Props for the ScrollArea in the dropdown */
scrollAreaProps?: ScrollAreaProps;
/** Controls the default chevron color */
chevronColor?: MantineColor;
/** Max dropdown height @default 220 */
maxDropdownHeight?: number | string;
/** Controlled dropdown state */
dropdownOpened?: boolean;
/** Default dropdown state */
defaultDropdownOpened?: boolean;
/** Called when dropdown opens */
onDropdownOpen?: () => void;
/** Called when dropdown closes */
onDropdownClose?: () => void;
/** Props passed to the underlying Combobox */
comboboxProps?: Record<string, any>;
/** Clear search on selection change @default true */
clearSearchOnChange?: boolean;
/** Opens dropdown on focus (searchable mode) @default true */
openOnFocus?: boolean;
/** aria-label values for the expand/collapse chevron button */
chevronAriaLabels?: TreeSelectChevronAriaLabels;
}
export type TreeSelectFactory = Factory<{
props: TreeSelectProps;
ref: HTMLInputElement;
stylesNames: TreeSelectStylesNames;
variant: InputVariant;
signature: <Mode extends TreeSelectMode = 'single'>(props: TreeSelectProps<Mode>) => React.JSX.Element;
}>;
export declare const TreeSelect: (<Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element) & import("../..").ThemeExtend<{
props: TreeSelectProps;
ref: HTMLInputElement;
stylesNames: TreeSelectStylesNames;
variant: InputVariant;
signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
}> & import("../..").ComponentClasses<{
props: TreeSelectProps;
ref: HTMLInputElement;
stylesNames: TreeSelectStylesNames;
variant: InputVariant;
signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
}> & Record<string, never> & import("../..").FactoryComponentWithProps<{
props: TreeSelectProps;
ref: HTMLInputElement;
stylesNames: TreeSelectStylesNames;
variant: InputVariant;
signature: <Mode extends TreeSelectMode = "single">(props: TreeSelectProps<Mode>) => React.JSX.Element;
}> & {
displayName?: string;
};