@kubit-ui-web/react-components/dist/esm/components/selectorBoxFile/selectorBoxFileStandAlone.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { useId } from '../../hooks/useId/useId';
// internal components
import { SelectorBoxFileAnimation } from './components/selectorBoxFileAnimation';
import { SelectorBoxFileContainerBox } from './components/selectorBoxFileContainerBox';
import { SelectorBoxFileErrorMessage } from './components/selectorBoxFileErrorMessage';
import { SelectorBoxFileHeader } from './components/selectorBoxFileHeader';
import { HeaderContainerBoxWrapperStyled, HiddenInputFile, WrapperStyled, } from './selectorBoxFile.styled';
import { SelectorBoxFileStateType } from './types/state';
const SelectorBoxFileStandAloneComponent = ({ dataTestId = 'selector-box-file', ...props }, ref) => {
    const uniqueId = useId('selectorBoxFile');
    const inputId = props.id ?? uniqueId;
    const inputHeaderId = `${inputId}HeaderId`;
    const inputErrorId = `${inputId}ErrorId`;
    const getAriaDescribedBy = () => {
        let res = '';
        if (props.title || props.subtitle) {
            res += ` ${inputHeaderId}`;
        }
        if (props.state === SelectorBoxFileStateType.ERROR && props.errorMessage) {
            res += ` ${inputErrorId}`;
        }
        return res || undefined;
    };
    return (_jsxs("div", { ref: ref, children: [_jsxs(WrapperStyled, { "data-testid": dataTestId, children: [_jsxs(HeaderContainerBoxWrapperStyled, { styles: props.styles, children: [(props.title || props.subtitle) && (_jsx(SelectorBoxFileHeader, { button: props.button, description: props.description, headerId: inputHeaderId, styles: props.styles, subtitle: props.subtitle, title: props.title, tooltip: props.tooltip, tooltipIcon: props.tooltipIcon })), _jsx(SelectorBoxFileAnimation, { dataTestId: dataTestId, focus: props.focus, percentage: props.percentage, state: props.state, styles: props.styles, onAnimationCompleted: props.onAnimationCompleted, children: _jsx(SelectorBoxFileContainerBox, { containerBoxStateContent: props.containerBoxStateContent, filename: props.filename, htmlFor: inputId, state: props.state, styles: props.styles }) })] }), _jsx(SelectorBoxFileErrorMessage, { errorMessage: props.errorMessage, errorMessageIcon: props.errorMessageIcon, errorMessageId: inputErrorId, state: props.state, styles: props.styles })] }), _jsx(HiddenInputFile, { accept: props.accept, "aria-describedby": getAriaDescribedBy(), disabled: props.state === SelectorBoxFileStateType.DISABLED, id: inputId, multiple: props.multiple, name: props.name, type: 'file', onBlur: props.onBlur, onChange: props.onChange, onClick: props.onClick, onFocus: props.onFocus })] }));
};
export const SelectorBoxFileStandAlone = React.forwardRef(SelectorBoxFileStandAloneComponent);
//# sourceMappingURL=selectorBoxFileStandAlone.js.map