wix-style-react/dist/src/FieldSet/FieldSet.types.d.ts

wix-style-react

import React from 'react';
import { ALIGNMENT, DIRECTION, GAP, LEGEND_ALIGNMENT, LEGEND_PLACEMENT, LEGEND_SIZE, STATUS_TYPE } from './constants';
import { TooltipCommonProps } from '../common';
import { ValuesOf } from '../utils/typeUtils';
export type LegendPlacement = ValuesOf<typeof LEGEND_PLACEMENT>;
export type LegendAlignment = ValuesOf<typeof LEGEND_ALIGNMENT>;
export type FieldSetStatusType = ValuesOf<typeof STATUS_TYPE>;
export type LegendSize = ValuesOf<typeof LEGEND_SIZE>;
export type Alignment = ValuesOf<typeof ALIGNMENT>;
export type Direction = ValuesOf<typeof DIRECTION>;
export type Gap = ValuesOf<typeof GAP>;
export interface FieldSetProps {
    /** Applies a data-hook HTML attribute to be used in the tests. */
    dataHook?: string;
    /** Accepts any kind of components as child elements. A child component should be a form element like an Input, InputArea, Dropdown or RichTextArea. */
    children: React.ReactNode;
    /** Sets a field set legend, which is a descriptive title for a group of components. Its default value is a text string, but it can be overridden with any other component. */
    legend: React.ReactNode;
    /** Controls the position of the legend, in terms of field set child components. */
    legendPlacement?: LegendPlacement;
    /** Controls the vertical alignment of the legend. */
    legendAlignment?: LegendAlignment;
    /** Controls the size of the legend. */
    legendSize?: LegendSize;
    /** Marks the field set as mandatory with an asterisk (*) at the end of the legend. */
    required?: boolean;
    /** Displays a passed info message in a tooltip next to field set legend. Default value is a text string, but it can also be overridden with any other component. */
    infoContent?: React.ReactNode;
    /** Allows control over the tooltip style and behaviour by passed tooltip properties.
     * @linkTypeTo components-overlays--tooltip
     * @setTypeName TooltipCommonProps
     */
    infoTooltipProps?: TooltipCommonProps;
    /** Adds a custom element at the end of the legend row (it overrides the charCount in case it's provided). */
    suffix?: React.ReactNode;
    /** Sets the maximum length for the field value inside field set child input. Character count is displayed in the top right corner of a component. */
    charCount?: number;
    /** Sets the type (color, icon) of a status message for the whole field set. */
    status?: FieldSetStatusType;
    /** Sets the field set status message. It is displayed bellow all field set child components. */
    statusMessage?: React.ReactNode;
    /** Adds an id to a field set status message. Use with `aria-describedby` attribute on specific input to connect it with `FieldSet` status message for accessibility. */
    statusId?: string;
    /** Controls the alignment of all field set child components. */
    alignment?: Alignment;
    /** Controls if field set child components are rendered horizontally or vertically. */
    direction?: Direction;
    /** Controls the gap between all field set child components. */
    gap?: Gap;
    /** Controls the width of each field set child component. Works only with `horizontal` direction. */
    columns?: string;
}
//# sourceMappingURL=FieldSet.types.d.ts.map