@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
107 lines (106 loc) • 5.23 kB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
import type { StateWithMessage, StateMessage, FieldState, FieldBlockContextProps } from './FieldBlockContext';
import type { ComponentProps, FieldProps, SubmitState } from '../types';
import type { HelpProps } from '../../../components/help-button/HelpButtonInline';
export declare const states: Array<FieldState>;
/**
* The width of a field block
*/
export type CustomWidth = `${number}rem`;
export type FieldBlockWidth = false | 'small' | 'medium' | 'large' | 'stretch' | CustomWidth;
export type FieldBlockHorizontalLabelWidth = 'small' | 'medium' | 'large' | CustomWidth;
export type FieldBlockHorizontalLabelHeight = 'default' | 'small' | 'medium' | 'large';
export type SharedFieldBlockProps = {
/**
* Layout for the label and input. Can be `horizontal` or `vertical`.
*/
layout?: 'vertical' | 'horizontal';
/**
* Use this to set additional options for the `horizontal` layout, e.g. `{ width: "medium" }`. You can also use a custom width `{number}rem`. Instead of a width, you can use a min/max width, e.g. `{ minWidth: "6rem", maxWidth: "12rem" }`.
*/
layoutOptions?: {
width?: FieldBlockHorizontalLabelWidth;
minWidth?: FieldBlockHorizontalLabelWidth;
maxWidth?: FieldBlockHorizontalLabelWidth;
};
/**
* Label text displayed above the field. Most fields already have a default label, so check the field translations for an existing label entry. Only set `label` when you need to override the default.
*/
label?: ReactNode;
/**
* Use `true` to make the label only readable by screen readers.
*/
labelSrOnly?: boolean;
/**
* Will append an additional text to the label, like "(optional)" or "(recommended)"
*/
labelSuffix?: ReactNode;
/**
* A more discreet text displayed beside the label (e.g. "(optional)").
*/
labelDescription?: ReactNode;
/**
* If `true`, the `labelDescription` will be displayed on the same line as the label.
*/
labelDescriptionInline?: boolean;
/**
* Define one of the following [heading sizes](/uilib/elements/heading/): `medium` or `large`.
*/
labelSize?: 'medium' | 'large';
/**
* Will set the width for the whole block. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.
*/
width?: FieldBlockWidth;
/**
* Will set the width for its contents. Use `small`, `medium`, `large` for predefined standard widths. You can also set a custom width `{number}rem` or use `stretch` or `false`.
*/
contentWidth?: FieldBlockWidth;
/**
* Provide help content for the field using `title` and `content` as a string or `React.ReactNode`. Additionally, you can set `open` to `true` to display the inline help, set the `breakout` property to `false` to disable the breakout of the inline help content, set `outset` to `false` to display the help text inline (inset) instead of the default outset behavior, or use `renderAs` set to `dialog` to render the content in a [Dialog](/uilib/components/dialog/) (recommended for larger amounts of content).
*/
help?: HelpProps;
/**
* Set `true` when you render the inline help button outside the label (e.g. inside a checkbox suffix) so FieldBlock skips drawing the default label help button.
*/
hideHelpButton?: boolean;
/**
* Controls where status messages (`error`, `warning`, `information`) are visually shown. Use `below` (default) or `above`.
*/
statusPosition?: 'below' | 'above';
};
export type FieldBlockProps<Value = unknown> = SharedFieldBlockProps & Pick<FieldProps<Value>, keyof ComponentProps | 'info' | 'warning' | 'error' | 'disabled'> & {
/** The id to link an element with */
forId?: string;
/**
* Use `true` when you have several form elements. This way a `fieldset` with a `legend` is used.
*/
asFieldset?: boolean;
/**
* Use `true` for when you have more than one field wrapped.
*/
composition?: FieldBlockContextProps['composition'];
/**
* `center` or `bottom` for aligning the contents vertically. Defaults to `bottom`.
*/
align?: 'center' | 'bottom';
/** Class name for the contents block */
contentClassName?: string;
/** To show the SubmitIndicator during async validation */
fieldState?: SubmitState;
/**
* Defines the height of a component (size property), so the label can be aligned correctly. Can be `default`, `small`, `medium`, `large`.
*/
labelHeight?: FieldBlockHorizontalLabelHeight;
/**
* Use `true` to disable the error summary.
*/
disableStatusSummary?: boolean;
/** For internal use only */
required?: boolean;
/** Role for the fieldset element when using fieldset */
fieldsetRole?: string;
children?: ReactNode;
} & HTMLAttributes<HTMLDivElement>;
declare function FieldBlock<Value = unknown>(props: FieldBlockProps<Value>): import("react/jsx-runtime").JSX.Element;
export declare function getMessagesFromError(item: Partial<StateWithMessage>): Array<StateMessage>;
export default FieldBlock;