@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
66 lines (65 loc) • 2.76 kB
TypeScript
import type { ReactNode } from 'react';
import type { FieldBlockWidth } from '../../FieldBlock';
import type { DefaultErrorMessages, FieldProps, Path } from '../../types';
export type MultiSelectionItem = {
value: number | string;
title: ReactNode;
text?: ReactNode;
description?: ReactNode;
disabled?: boolean;
children?: Array<MultiSelectionItem>;
};
type MultiSelectionData = Array<MultiSelectionItem>;
type MultiSelectionFieldBlockWidth = Exclude<FieldBlockWidth, 'small' | 'stretch'>;
export type FieldMultiSelectionProps = FieldProps<Array<number | string> | undefined> & {
/**
* Array of objects where each object contains at least `value` and `title`. Can also include `text` for an optional primary extra line, `description` for an optional secondary grey line, plus `disabled`, `help`, and `className`.
*/
data?: MultiSelectionData;
/**
* Path to data in Form.Handler context. The context data array should contain objects with `value` and `title` properties.
*/
dataPath?: Path;
/**
* Defines the variant of the component. `popover` renders a trigger button that opens a popover with the item list. `inline` renders the item list inline as checkboxes.
*/
variant?: 'popover' | 'inline';
/**
* The width of the component. Supported values: `"medium"` and `"large"`. Defaults to `"large"`.
*/
width?: MultiSelectionFieldBlockWidth;
/**
* Show a search/filter input field to search through items.
*/
showSearchField?: boolean;
/**
* Show a "Select all" checkbox at the top of the list.
*/
showSelectAll?: boolean;
/**
* Show selected items as removable tags inside the popover. When enabled and nothing is selected, a placeholder text is shown.
*/
showSelectedTags?: boolean;
/**
* When the number of selected items exceeds this threshold, the selected items are hidden by default and can be toggled with a header.
*/
selectedItemsCollapsibleThreshold?: number;
/**
* Show confirm and cancel buttons at the bottom of the popover. Selections are only applied when the user confirms.
*/
showConfirmButton?: boolean;
/**
* Minimum number of items required to be selected. Triggers a validation error if fewer items are selected.
*/
minItems?: number;
/**
* Maximum number of items allowed to be selected. Triggers a validation error if more items are selected.
*/
maxItems?: number;
errorMessages?: DefaultErrorMessages & {
minItems?: string;
maxItems?: string;
};
};
declare function MultiSelection(props: FieldMultiSelectionProps): import("react/jsx-runtime").JSX.Element;
export default MultiSelection;