@kubit-ui-web/react-components/dist/esm/components/snackbar/snackbarStandAlone.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 { Button } from '../../components/button/button';
import { Link } from '../../components/link/link';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { POSITIONS } from '../../types/positions/positions';
import { ROLES } from '../../types/role/role';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { PopoverControlled as Popover } from '../popover/popoverControlled';
import { PopoverComponentType } from '../popover/types/component';
import { ScreenReaderOnly } from '../screenReaderOnly/screenReaderOnly';
// styles
import { ButtonWrapper, SnackbarDescriptionWrapper, SnackbarIconTitleContainerWrapper, SnackbarLinkWrapper, SnackbarNoStatusContentWrapper, SnackbarStyled, SnackbarTextAndActionWrapper, SnackbarTextWrapper, SnackbarTitleWrapper, } from './snackbar.styled';
const SnackbarStandAloneComponent = ({ align = POSITIONS.TOP_CENTER_FIXED, dataTestId = 'snackbar', ...props }, ref) => {
    const buildAction = () => props.secondaryActionContent && (_jsx(SnackbarLinkWrapper, { styles: props.styles, withIcon: !!props.icon, children: (props.styles?.actionButton?.variant || props.secondaryActionButton?.variant) &&
            (props.styles?.actionButton?.size || props.secondaryActionButton?.size) ? (_jsx(Button, { "aria-label": props.secondaryActionAriaLabel, size: props.styles?.actionButton?.size, variant: props.styles?.actionButton?.variant, onClick: props.onSecondaryActionClick, ...props.secondaryActionButton, children: props.secondaryActionContent })) : ((props.styles?.link?.variant || props.secondaryActionLink?.variant) && (_jsx(Link, { "aria-label": props.secondaryActionAriaLabel, decoration: props.styles?.link?.decoration, url: '', variant: props.styles?.link?.variant || '', onClick: props.onSecondaryActionClick, ...props.secondaryActionLink, children: props.secondaryActionContent }))) }));
    const buildDescription = () => {
        const { content, ...restDescriptionProps } = props.description || {};
        return (content &&
            (props.styles?.description?.font_variant || props.description?.variant) && (_jsx(SnackbarDescriptionWrapper, { styles: props.styles, children: _jsx(Text, { component: TextComponentType.PARAGRAPH, customTypography: props.styles?.description, ...restDescriptionProps, children: content }) })));
    };
    return (_jsx(Popover, { autoWidth: true, transparentBackground: true, clickOverlayClose: false, component: PopoverComponentType.DIV, focusLastElementFocusedAfterClose: false, focusScreenFirstDescendantAfterClose: false, open: props.open, pressEscapeClose: false, variant: props.styles?.popoverVariants?.[align], ...props.popover, children: _jsxs(SnackbarStyled, { ref: ref, "data-testid": dataTestId, styles: props.styles, onBlur: props.onBlur, onFocus: props.onFocus, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, children: [_jsxs(SnackbarTextAndActionWrapper, { children: [_jsxs(SnackbarTextWrapper, { "data-testid": `${dataTestId}-alert`, role: ROLES.ALERT, styles: props.styles, children: [_jsxs(SnackbarIconTitleContainerWrapper, { styles: props.styles, children: [props.icon && (_jsx(ElementOrIcon, { customIconStyles: props.styles?.icon, ...props.icon })), _jsx(SnackbarTitleWrapper, { children: _jsxs(Text, { component: TextComponentType.PARAGRAPH, customTypography: props.styles?.title, ...props.title, children: [_jsx(ScreenReaderOnly, { children: props.icon?.altText }), props.title.content] }) })] }), _jsx(SnackbarNoStatusContentWrapper, { styles: props.styles, withIcon: !!props.icon, children: buildDescription() })] }), buildAction()] }), _jsx(ButtonWrapper, { children: _jsx(ElementOrIcon, { customIconStyles: props.styles?.closeIcon, onClick: e => props.onCloseButtonClick(false)(e), ...props.closeIcon }) })] }) }));
};
export const SnackbarStandAlone = React.forwardRef(SnackbarStandAloneComponent);
//# sourceMappingURL=snackbarStandAlone.js.map