@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
59 lines (58 loc) • 3.3 kB
TypeScript
import type { ReactNode } from 'react';
import type { FieldBlockWidth } from '../../FieldBlock';
import type { ReturnAdditional } from '../../hooks/useFieldProps';
import type { DefaultErrorMessages, FieldProps, Path } from '../../types';
import type { Data } from '../Selection';
import type { CheckboxProps } from '../../../../components/Checkbox';
import type { ToggleButtonProps } from '../../../../components/ToggleButton';
type OptionValue = string | number;
type RenderArraySelectionChildren = (params: {
value: FieldArraySelectionProps['value'];
options: FieldArraySelectionProps['data'];
}) => ReactNode;
export type FieldArraySelectionProps = FieldProps<Array<OptionValue> | undefined> & {
children?: ReactNode | RenderArraySelectionChildren;
variant?: 'checkbox' | 'button' | 'checkbox-button';
optionsLayout?: 'horizontal' | 'vertical';
/**
* The width of the component.
*/
width?: FieldBlockWidth;
/**
* The path to the context data (Form.Handler). The context data object needs to have a `value` and a `title` property. The generated options will be placed above given JSX based children. When `children` is a function, the generated options are instead provided as `options` to the function.
*/
dataPath?: Path;
/**
* Data to be used for the component. The object needs to have a `value` and a `title` property. Provide the Dropdown or Autocomplete data in the format documented here: [Dropdown](/uilib/components/dropdown) and [Autocomplete](/uilib/components/autocomplete) documentation.
*/
data?: Data;
/**
* The sizes you can choose are `small` (1.5rem), `default` (2rem), `medium` (2.5rem) and `large` (3rem). Defaults to `default` / `null`. Also, if you define a number like `size="2"` then it will be forwarded as the input element attribute. Consider rather setting field sizes with [Form.Appearance](/uilib/extensions/forms/Form/Appearance/).
*/
size?: ToggleButtonProps['size'] | CheckboxProps['size'];
errorMessages?: DefaultErrorMessages & {
minItems?: string;
maxItems?: string;
};
};
declare function ArraySelection(props: FieldArraySelectionProps): import("react/jsx-runtime").JSX.Element;
export declare function useCheckboxOrToggleOptions({ id, path, variant, info, warning, emptyValue, htmlAttributes, dataList, children, value, disabled, size, hasError, handleChange, handleActiveData, }: {
id: FieldArraySelectionProps['id'];
path?: FieldArraySelectionProps['path'];
variant?: FieldArraySelectionProps['variant'];
info?: FieldArraySelectionProps['info'];
warning?: FieldArraySelectionProps['warning'];
emptyValue?: FieldArraySelectionProps['emptyValue'];
htmlAttributes?: FieldArraySelectionProps['htmlAttributes'];
dataList?: FieldArraySelectionProps['data'];
children?: ReactNode;
value?: FieldArraySelectionProps['value'];
disabled?: FieldArraySelectionProps['disabled'];
size?: FieldArraySelectionProps['size'];
hasError?: ReturnAdditional<FieldArraySelectionProps['value']>['hasError'];
handleChange?: ReturnAdditional<FieldArraySelectionProps['value']>['handleChange'];
handleActiveData?: (item: {
labels: ReactNode[];
}) => void;
}): any[];
export default ArraySelection;