@engie-group/fluid-design-system-react/lib/components/chat-input/input/NJChatInputInput.js

Fluid Design System React

import { jsxs, jsx } from 'react/jsx-runtime';
import React__default, { useCallback } from 'react';
import { Utils } from '../../../utils/util.js';

// 44 is the height of a single line
// too complex to calculate the exact height of a single line
const SINGLE_LINE_HEIGHT = 44;
const NJChatInputInput = React__default.forwardRef(({ className, variant, disabled, onInput, files, primary_action, secondary_actions, ...htmlProps }, forwardedRef) => {
    const [isMultiline, setIsMultiline] = React__default.useState(false);
    const handleInput = useCallback((event) => {
        const target = event.currentTarget;
        if (target.scrollHeight > SINGLE_LINE_HEIGHT) {
            setIsMultiline(true);
        }
        else {
            setIsMultiline(false);
        }
        target.style.height = '';
        target.style.height = target.scrollHeight + 'px';
        onInput?.(event);
    }, [onInput]);
    const classes = Utils.classNames('nj-chat-input__input', {
        ['nj-chat-input__input--multiline']: isMultiline || !!files,
        [`nj-chat-input__input--${variant}`]: !!variant
    }, className);
    return (jsxs("div", { className: classes, children: [jsxs("div", { className: "nj-chat-input__user-input", children: [jsx("textarea", { ...htmlProps, ref: forwardedRef, dir: "auto", disabled: disabled, rows: 1, onInput: handleInput }), !!files && jsx("div", { className: "nj-chat-input__files", children: files })] }), !!secondary_actions && (jsx("div", { className: "nj-chat-input__secondary-actions", children: secondary_actions })), !!primary_action && jsx("div", { className: "nj-chat-input__primary-action", children: primary_action })] }));
});
NJChatInputInput.displayName = 'NJChatInputInput';

export { NJChatInputInput };