@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
104 lines (103 loc) • 5.95 kB
TypeScript
import React from 'react';
import { Props as OptionFieldProps } from '../Option';
import { FieldBlockWidth } from '../../FieldBlock';
import { FieldProps, Path } from '../../types';
import type { FormStatusText } from '../../../../components/FormStatus';
import type { AutocompleteAllProps } from '../../../../components/Autocomplete';
import type { DropdownAllProps } from '../../../../components/Dropdown';
import { HelpProps } from '../../../../components/help-button/HelpButtonInline';
import { DrawerListDataArrayObjectStrict, DrawerListProps } from '../../../../fragments/DrawerList';
import { ToCamelCase } from '../../../../shared/helpers/withCamelCaseProps';
import { FormError } from '../../utils';
import type { RadioProps } from '../../../../components/Radio';
import type { ToggleButtonProps } from '../../../../components/ToggleButton';
import type { RadioGroupProps } from '../../../../components/radio/RadioGroup';
import type { ToggleButtonGroupProps } from '../../../../components/toggle-button/ToggleButtonGroup';
type IOption = {
title: string | React.ReactNode;
value: number | string;
status: FormStatusText;
};
export type Data = Array<{
value: number | string;
title: React.ReactNode;
text?: React.ReactNode;
disabled?: boolean;
style?: React.CSSProperties;
[key: string]: any;
} & Partial<DrawerListDataArrayObjectStrict>>;
type RenderSelectionChildren = (params: {
value: IOption['value'];
options: Props['data'];
}) => React.ReactNode;
export type Props = FieldProps<IOption['value']> & {
/**
* Defines the variant of the component.
* Default: dropdown
*/
variant?: 'dropdown' | 'autocomplete' | 'radio' | 'radio-list' | 'button';
/**
* The width of the component.
* Default: large
*/
width?: FieldBlockWidth;
/**
* Defines the layout of the options for radio and button variants.
*/
optionsLayout?: 'horizontal' | 'vertical';
/**
* Transform the displayed selection for Dropdown and Autocomplete variant.
* Use it to display a different value than the one in the data set.
*/
transformSelection?: (props: OptionFieldProps) => React.ReactNode;
/**
* The path to the context data (Form.Handler).
* The context data object needs to have a `value` and a `title` property.
*/
dataPath?: Path;
/**
* Data to be used for the component. The object needs to have a `value` and a `title` property.
* The generated options will be placed above given JSX based children.
*/
data?: Data;
/**
* Array of groups, only the first can be `undefined`
*/
groups?: React.ReactNode[];
/**
* Autocomplete specific props
*/
autocompleteProps?: ToCamelCase<AutocompleteAllProps>;
/**
* Dropdown specific props
*/
dropdownProps?: ToCamelCase<DropdownAllProps>;
/**
* The size of the component.
*/
size?: ToggleButtonGroupProps['size'] | RadioGroupProps['size'] | AutocompleteAllProps['size'] | DropdownAllProps['size'];
/**
* The content of the component.
*/
children?: React.ReactNode | RenderSelectionChildren;
};
export declare const listOfValidAutocompleteProps: ("indicator_label" | "submit_button_title" | "no_options" | "show_all" | "show_options_sr" | "aria_live_options" | "selected_sr" | "fixed_position" | "skip_portal" | "no_animation" | "icon_size" | "icon_position" | "label_direction" | "status_state" | "status_props" | "on_change" | "label_sr_only" | "prevent_close" | "max_height" | "min_height" | "input_element" | "submit_element" | "submit_button_icon" | "on_focus" | "on_blur" | "show_submit_button" | "on_type" | "on_show" | "on_hide" | "ignore_events" | "cache_hash" | "triangle_position" | "no_scroll_animation" | "prevent_selection" | "align_drawer" | "options_render" | "wrapper_element" | "default_value" | "portal_class" | "list_class" | "independent_width" | "keep_open" | "skip_keysearch" | "enable_body_lock" | "page_offset" | "observer_element" | "on_pre_change" | "on_select" | "input_value" | "disable_filter" | "disable_highlighting" | "disable_reorder" | "search_numbers" | "search_in_word_index" | "keep_value" | "keep_selection" | "keep_value_and_selection" | "show_clear_button" | "input_icon" | "drawer_class" | "align_autocomplete" | "open_on_focus" | "input_ref")[];
export declare const listOfValidDropdownProps: ("fixed_position" | "skip_portal" | "no_animation" | "icon_size" | "icon_position" | "label_direction" | "status_state" | "status_props" | "on_change" | "label_sr_only" | "prevent_close" | "max_height" | "min_height" | "on_show" | "on_hide" | "ignore_events" | "cache_hash" | "triangle_position" | "no_scroll_animation" | "prevent_selection" | "action_menu" | "align_drawer" | "options_render" | "wrapper_element" | "default_value" | "portal_class" | "list_class" | "independent_width" | "keep_open" | "skip_keysearch" | "enable_body_lock" | "page_offset" | "observer_element" | "on_pre_change" | "on_select" | "open_on_focus" | "more_menu" | "align_dropdown" | "trigger_element")[];
declare function Selection(props: Props): import("react/jsx-runtime").JSX.Element;
declare namespace Selection {
var _supportsSpacingProps: boolean;
}
type OptionProps = React.ComponentProps<(props: {
value: Props['value'];
error: Error | FormError | undefined;
help: HelpProps;
title: React.ReactNode;
children: React.ReactNode;
size?: ToggleButtonProps['size'] | RadioProps['size'];
}) => JSX.Element>;
export declare function countOptions(children: React.ReactNode): number;
export declare function mapOptions(children: React.ReactNode, { createOption, }: {
createOption: (props: OptionProps, i: number) => React.ReactNode;
}): any;
export declare function makeOptions<T = DrawerListProps['data']>(children: React.ReactNode, transformSelection?: Props['transformSelection']): T;
export default Selection;