@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
73 lines (72 loc) • 2.59 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> & {
/**
* Data to be used for the component. Array of objects with `value` and `title` properties.
* Supports nested items via `children` property.
*/
data?: MultiSelectionData;
/**
* The path to the context data (Form.Handler).
*/
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.
* Default: `popover`
*/
variant?: 'popover' | 'inline';
/**
* The width of the component. Supported values: false, 'medium', 'large', or a custom width.
*/
width?: MultiSelectionFieldBlockWidth;
/**
* Show search field to filter options. Defaults to false.
*/
showSearchField?: boolean;
/**
* Show "Select all" checkbox at top of list. Defaults to false.
*/
showSelectAll?: boolean;
/**
* Show selected items as tags inside the popover. When enabled and nothing is
* selected a placeholder text is shown. Defaults to false.
*/
showSelectedTags?: boolean;
/**
* Threshold for collapsing selected items when showSelectedTags is enabled.
* When the number of selected items exceeds this threshold, a toggle button
* and "Clear all" button appear, and the tags are hidden by default. Defaults to 10.
*/
selectedItemsCollapsibleThreshold?: number;
/**
* Show confirm/cancel buttons. Defaults to false.
*/
showConfirmButton?: boolean;
/**
* Minimum number of items required to be selected
*/
minItems?: number;
/**
* Maximum number of items allowed to be selected
*/
maxItems?: number;
errorMessages?: DefaultErrorMessages & {
minItems?: string;
maxItems?: string;
};
};
declare function MultiSelection(props: FieldMultiSelectionProps): import("react/jsx-runtime").JSX.Element;
export default MultiSelection;