@kubit-ui-web/react-components/dist/esm/components/badgeV2/badgeStandAlone.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 { Dot } from '../../components/dot/dot';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { AriaLiveOptionType } from '../../types/ariaLiveOption/ariaLiveOption';
import { pickAriaProps } from '../../utils/aria/aria';
import { ButtonType } from '../button/types/type';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { ScreenReaderOnly } from '../screenReaderOnly/screenReaderOnly';
import { BadgeContainerStyled, BadgeDotStyled, BadgeLabelStyled, BadgeStyled, SpanContainerIconAndDot, } from './badge.styled';
const BadgeStandAloneComponent = ({ dataTestId = 'badge', ...props }, ref) => {
    const badgeButtonRef = React.useRef(null);
    const containerRef = React.useRef(null);
    const ariaProps = pickAriaProps(props);
    React.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 (_jsx(BadgeContainerStyled, { ref: containerRef, "data-testid": `${dataTestId}-container`, onBlur: props.onBadgeBlur, children: _jsxs(BadgeStyled, { ref: badgeButtonRef, "data-testid": dataTestId, role: props.role, styles: props.styles, type: ButtonType.BUTTON, onClick: props.onClick, ...ariaProps, children: [_jsxs(SpanContainerIconAndDot, { children: [props.hasDot && props.dot && (_jsx(BadgeDotStyled, { "aria-hidden": true, customDotTranslate: getCustomDotTranslate(), children: _jsx(Dot, { ...props.dot }) })), _jsx(ElementOrIcon, { color: props.styles?.icon?.color, customIconStyles: props.sizeStyles.icon, ...props.icon })] }), props.label?.content && (_jsxs(BadgeLabelStyled, { "aria-hidden": true, styles: props.styles, children: [_jsx(Text, { color: props.styles?.label?.color, component: TextComponentType.SPAN, customTypography: labelStyles, ...props.label, children: props.label.content }), _jsx(ElementOrIcon, { color: props.styles?.labelIcon?.color, customIconStyles: props.styles.labelIcon, rotate: props.active ? '180deg' : '0deg', ...props.labelIcon })] })), _jsx(ScreenReaderOnly, { ariaLive: AriaLiveOptionType.POLITE, children: props.ariaLiveText })] }) }));
};
export const BadgeStandAlone = React.forwardRef(BadgeStandAloneComponent);
//# sourceMappingURL=badgeStandAlone.js.map