@kubit-ui-web/react-components/dist/cjs/components/badgeV2/badgeStandAlone.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.BadgeStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const dot_1 = require("../../components/dot/dot");
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const ariaLiveOption_1 = require("../../types/ariaLiveOption/ariaLiveOption");
const aria_1 = require("../../utils/aria/aria");
const type_1 = require("../button/types/type");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
const badge_styled_1 = require("./badge.styled");
const BadgeStandAloneComponent = ({ dataTestId = 'badge', ...props }, ref) => {
    const badgeButtonRef = react_1.default.useRef(null);
    const containerRef = react_1.default.useRef(null);
    const ariaProps = (0, aria_1.pickAriaProps)(props);
    react_1.default.useImperativeHandle(ref, () => containerRef.current, []);
    const getCustomDotTranslate = () => {
        if (props.customDotTranslate) {
            return props.customDotTranslate;
        }
        if (props.sizeStyles.customDotNumberTranslate && props.dot?.number !== undefined) {
            return props.sizeStyles.customDotNumberTranslate;
        }
        return props.sizeStyles.customDotTranslate;
    };
    const labelStyles = { ...props.styles.label, ...props.sizeStyles.label };
    return ((0, jsx_runtime_1.jsx)(badge_styled_1.BadgeContainerStyled, { ref: containerRef, "data-testid": `${dataTestId}-container`, onBlur: props.onBadgeBlur, children: (0, jsx_runtime_1.jsxs)(badge_styled_1.BadgeStyled, { ref: badgeButtonRef, "data-testid": dataTestId, role: props.role, styles: props.styles, type: type_1.ButtonType.BUTTON, onClick: props.onClick, ...ariaProps, children: [(0, jsx_runtime_1.jsxs)(badge_styled_1.SpanContainerIconAndDot, { children: [props.hasDot && props.dot && ((0, jsx_runtime_1.jsx)(badge_styled_1.BadgeDotStyled, { "aria-hidden": true, customDotTranslate: getCustomDotTranslate(), children: (0, jsx_runtime_1.jsx)(dot_1.Dot, { ...props.dot }) })), (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: props.styles?.icon?.color, customIconStyles: props.sizeStyles.icon, ...props.icon })] }), props.label?.content && ((0, jsx_runtime_1.jsxs)(badge_styled_1.BadgeLabelStyled, { "aria-hidden": true, styles: props.styles, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { color: props.styles?.label?.color, component: component_1.TextComponentType.SPAN, customTypography: labelStyles, ...props.label, children: props.label.content }), (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { color: props.styles?.labelIcon?.color, customIconStyles: props.styles.labelIcon, rotate: props.active ? '180deg' : '0deg', ...props.labelIcon })] })), (0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { ariaLive: ariaLiveOption_1.AriaLiveOptionType.POLITE, children: props.ariaLiveText })] }) }));
};
exports.BadgeStandAlone = react_1.default.forwardRef(BadgeStandAloneComponent);
//# sourceMappingURL=badgeStandAlone.js.map