@syncfusion/react-inputs/src/common/helper-text.js

Syncfusion React Input package is a feature-rich collection of UI components, including Textbox, Textarea, Numeric-textbox and Form, designed to capture user input in React applications.

import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useMemo } from 'react';
import { useProviderContext } from '@syncfusion/react-base';
const HELPERTEXT = 'sf-helper-text';
const HELPERTEXT_ON_FOCUS = 'sf-helper-text-on-focus';
const HELPERTEXT_FOCUSED = 'sf-helper-text-focused';
const RTL_CLASS = 'sf-rtl';
const DIRECTION_CLASS_MAP = {
    Left: 'sf-content-left',
    Right: 'sf-content-right',
    Center: 'sf-content-center'
};
export const HelperText = forwardRef((props, ref) => {
    const { helperText, helperTextOnFocus = false, isFocused = false, helperTextDirection = 'Left' } = props;
    const { dir } = useProviderContext();
    const classNames = useMemo(() => {
        return [
            'sf-control',
            HELPERTEXT,
            DIRECTION_CLASS_MAP[`${helperTextDirection}`],
            helperTextOnFocus ? HELPERTEXT_ON_FOCUS : '',
            helperTextOnFocus && isFocused ? HELPERTEXT_FOCUSED : '',
            dir === 'rtl' ? RTL_CLASS : ''
        ].filter(Boolean).join(' ');
    }, [helperTextOnFocus, helperTextDirection, isFocused, dir]);
    if (!helperText) {
        return null;
    }
    return (_jsx("div", { className: 'sf-helper-text-container', children: _jsx("div", { ref: ref, className: classNames, children: helperText }) }));
});
HelperText.displayName = 'HelperText';
export default HelperText;