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

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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SelectorBoxFileStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const useId_1 = require("../../hooks/useId/useId");
// internal components
const selectorBoxFileAnimation_1 = require("./components/selectorBoxFileAnimation");
const selectorBoxFileContainerBox_1 = require("./components/selectorBoxFileContainerBox");
const selectorBoxFileErrorMessage_1 = require("./components/selectorBoxFileErrorMessage");
const selectorBoxFileHeader_1 = require("./components/selectorBoxFileHeader");
const selectorBoxFile_styled_1 = require("./selectorBoxFile.styled");
const state_1 = require("./types/state");
const SelectorBoxFileStandAloneComponent = ({ dataTestId = 'selector-box-file', ...props }, ref) => {
    const uniqueId = (0, useId_1.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 === state_1.SelectorBoxFileStateType.ERROR && props.errorMessage) {
            res += ` ${inputErrorId}`;
        }
        return res || undefined;
    };
    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, children: [(0, jsx_runtime_1.jsxs)(selectorBoxFile_styled_1.WrapperStyled, { "data-testid": dataTestId, children: [(0, jsx_runtime_1.jsxs)(selectorBoxFile_styled_1.HeaderContainerBoxWrapperStyled, { styles: props.styles, children: [(props.title || props.subtitle) && ((0, jsx_runtime_1.jsx)(selectorBoxFileHeader_1.SelectorBoxFileHeader, { button: props.button, description: props.description, headerId: inputHeaderId, styles: props.styles, subtitle: props.subtitle, title: props.title, tooltip: props.tooltip, tooltipIcon: props.tooltipIcon })), (0, jsx_runtime_1.jsx)(selectorBoxFileAnimation_1.SelectorBoxFileAnimation, { dataTestId: dataTestId, focus: props.focus, percentage: props.percentage, state: props.state, styles: props.styles, onAnimationCompleted: props.onAnimationCompleted, children: (0, jsx_runtime_1.jsx)(selectorBoxFileContainerBox_1.SelectorBoxFileContainerBox, { containerBoxStateContent: props.containerBoxStateContent, filename: props.filename, htmlFor: inputId, state: props.state, styles: props.styles }) })] }), (0, jsx_runtime_1.jsx)(selectorBoxFileErrorMessage_1.SelectorBoxFileErrorMessage, { errorMessage: props.errorMessage, errorMessageIcon: props.errorMessageIcon, errorMessageId: inputErrorId, state: props.state, styles: props.styles })] }), (0, jsx_runtime_1.jsx)(selectorBoxFile_styled_1.HiddenInputFile, { accept: props.accept, "aria-describedby": getAriaDescribedBy(), disabled: props.state === state_1.SelectorBoxFileStateType.DISABLED, id: inputId, multiple: props.multiple, name: props.name, type: 'file', onBlur: props.onBlur, onChange: props.onChange, onClick: props.onClick, onFocus: props.onFocus })] }));
};
exports.SelectorBoxFileStandAlone = react_1.default.forwardRef(SelectorBoxFileStandAloneComponent);
//# sourceMappingURL=selectorBoxFileStandAlone.js.map