@engie-group/fluid-design-system-react/lib/components/form-item/NJFormItem.d.ts

Fluid Design System React

import React, { PropsWithChildren } from 'react';
import { WithHTMLAttributes } from '../../utils/typeHelpers';
export declare const NJFormItem: React.ForwardRefExoticComponent<TFormItemProps & React.RefAttributes<HTMLDivElement>>;
export interface IFormItemInputProps extends WithHTMLAttributes<IFormItemGenericProps, 'input'> {
    isMultiline?: false;
}
export type IFormItemTextareaProps = WithHTMLAttributes<IFormItemGenericProps, 'textarea'> & {
    isMultiline: true;
};
export type TFormItemProps = IFormItemInputProps | IFormItemTextareaProps;
type IFormItemGenericProps = ICommonFormItemProps & {
    /**
     * Form item type
     */
    type?: string;
    /**
     * Specifies whether autocomplete is applied to an editable text field.
     * See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete for autocomplete types
     */
    autocomplete?: HTMLInputElement['autocomplete'];
    /**
     * Function called on form-item wrapper click
     */
    wrapperClick?: React.MouseEventHandler<HTMLElement>;
    /**
     * Function called on form-item wrapper keypress
     */
    wrapperKeyPress?: React.KeyboardEventHandler<HTMLElement>;
    /**
     * Function called on form-item wrapper keypress
     */
    wrapperKeyDown?: React.KeyboardEventHandler<HTMLElement>;
    /**
     * Sets or retrieves the maximum number of characters that the user can enter in a text control.
     */
    maxLength?: HTMLInputElement['maxLength'];
    /**
     * Minimum number of characters. Must be an integer value 0 or higher.
     * Must be less than or equal to the value of maxlength.
     */
    minLength?: HTMLInputElement['minLength'];
    /**
     * Whether input is readonly or not
     */
    readOnly?: boolean;
    /**
     * Whether input applies select style or not
     */
    isSelect?: boolean;
    /**
     * Label className
     */
    labelClassName?: string;
    /**
     * Icon className
     */
    iconClassName?: string;
    /**
     * Whether input is a `<textarea>` or not
     */
    isMultiline?: boolean;
    /**
     * When isMultiline is true, number of cols for the textarea
     */
    cols?: number;
    /**
     * When isMultiline is true, number of rows for the textarea
     */
    rows?: number;
    /**
     * Wrap attribute for textarea
     */
    wrap?: 'soft' | 'hard';
    /**
     * Label for the button to toggle password visibility when password is hidden.
     * @example "Show password"
     */
    passwordButtonLabelShow?: string;
    /**
     * Label for the button to toggle password visibility when password is visible.
     * @example "Hide password"
     */
    passwordButtonLabelHide?: string;
    /**
     * Label to announce when password becomes visible.
     * @example "Password is visible"
     */
    passwordNoticeIsVisible?: string;
    /**
     * Label to announce when password becomes hidden.
     * @example "Password is hidden"
     */
    passwordNoticeIsHidden?: string;
    /**
     * Input Ref for the input or textarea element
     */
    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
};
export type FormItemSize = 'sm' | 'md' | 'lg' | 'xl';
export interface ICommonFormItemProps extends PropsWithChildren {
    /**
     * Whether form-item is in error state
     */
    hasError?: boolean;
    /**
     * Whether form-item is in success state
     */
    hasSuccess?: boolean;
    /**
     * form-item hint subscript text
     */
    subscriptMessage?: string;
    /**
     * Input id
     */
    id: string;
    /**
     * Input name
     */
    name?: string;
    /**
     * Input label
     */
    label: string;
    /**
     * Type of label
     */
    labelKind?: 'static' | 'floating';
    /**
     * Input value
     */
    value?: string;
    /**
     * Input title attribute
     */
    title?: string;
    /**
     * Aria label, for accessibility reasons
     */
    ariaLabel?: string;
    /**
     * Aria labelled by, for accessibility reasons
     */
    ariaLabelledBy?: string;
    /**
     * Whether field is required or not
     */
    isRequired?: boolean;
    /**
     * Input placeholder
     */
    placeholder?: string;
    /**
     * Material icon name
     */
    iconName?: string;
    /**
     * Icon title
     */
    iconTitle?: string;
    /**
     * Outputs icon click
     */
    iconClick?: React.MouseEventHandler<HTMLElement>;
    /**
     * Whether field is disabled or not
     */
    isDisabled?: boolean;
    /**
     * Function called on input pressed
     */
    onClick?: React.MouseEventHandler<HTMLElement>;
    /**
     * Function called on keypress
     */
    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
    /**
     * Function called on icon keypress
     */
    iconKeyPress?: React.KeyboardEventHandler<HTMLElement>;
    /**
     * Function called on input focus
     */
    onFocus?: React.FocusEventHandler<HTMLElement>;
    /**
     * Function called when user leaves the input
     */
    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
    /**
     * Select form id <br>
     * The `<form>` element to associate the `<input>` with (its form owner). The value of this attribute must be the id of a `<form>` in the same document.
     */
    form?: string;
    /**
     * Input tab index
     */
    tabIndex?: number;
    /**
     * Function called on input change
     * @param e event
     */
    onChange?: React.ChangeEventHandler<HTMLElement>;
    /**
     * Optional additional classes
     */
    className?: string;
    /**
     * Form item size
     */
    size?: FormItemSize;
    /**
     * Whether to show a clear button when input has value
     */
    clearable?: boolean;
    /**
     * Aria label for the clear button
     * @default "Clear input"
     */
    clearButtonAriaLabel?: string;
    /**
     * Function called when clear button is clicked
     */
    onClear?: () => void;
}
export {};