import classNames from '../../../../../../_virtual/index.mjs';
import React__default, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
import { useUniqueId } from '../../../utils/uniqueId.mjs';
import VisuallyHidden from '../atoms/VisuallyHidden.mjs';
import { usePresentation } from '../PresentationConfig.mjs';
import ErrorText from './ErrorText.mjs';
import modules_d963aab3 from './Input.module.css.mjs';

/**
 * Generic low level text Input element
 * A label must be provided for accessibility, but can be hidden using the `hideLabel` prop
 * You may want to use a more specific component in /molecules instead like {@link EmailInput}, {@link PasswordInput}
 */ const Input = /*#__PURE__*/ forwardRef(({ className, label: labelText, hideLabel, action, id: idProp, containerClassName, error, ...props }, ref)=>{
    const presentation = usePresentation();
    const id = idProp + (presentation.options?.inputIdSuffix ?? '');
    const errorId = useUniqueId();
    // Calculate the width of the action element and add it to the input padding so the input content
    // cannot go behind the action
    const actionRef = useRef(null);
    const [actionWidth, setActionWidth] = useState();
    useLayoutEffect(()=>{
        if (actionRef.current) {
            // getBoundingClientRect accounts for transformations while clientWidth does not
            setActionWidth(actionRef.current.getBoundingClientRect().width);
        }
    }, [
        action
    ]);
    const label = /*#__PURE__*/ React__default.createElement("label", {
        className: modules_d963aab3.label,
        htmlFor: id
    }, labelText);
    if (error) {
        props['aria-invalid'] = true;
        props['aria-errormessage'] = errorId;
    }
    return /*#__PURE__*/ React__default.createElement("div", {
        className: classNames(containerClassName, modules_d963aab3.container)
    }, hideLabel ? /*#__PURE__*/ React__default.createElement(VisuallyHidden, null, label) : label, /*#__PURE__*/ React__default.createElement("div", {
        className: modules_d963aab3.inputWrapper
    }, /*#__PURE__*/ React__default.createElement("input", {
        ref: ref,
        id: id,
        className: classNames(className, modules_d963aab3.input),
        style: actionWidth ? {
            // spacing-4 because action has a 2 unit horizontal margin
            paddingInlineEnd: `calc(${actionWidth}px + var(--st-spacing-4))`
        } : undefined,
        ...props
    }), action && /*#__PURE__*/ React__default.createElement("div", {
        ref: actionRef,
        className: modules_d963aab3.action
    }, action)), error && /*#__PURE__*/ React__default.createElement(ErrorText, {
        id: errorId,
        className: modules_d963aab3.error,
        "aria-live": "polite"
    }, error));
});

export { Input as default };
//# sourceMappingURL=Input.mjs.map
