@kubit-ui-web/react-components/dist/cjs/components/snackbar/snackbarStandAlone.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.SnackbarStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const button_1 = require("../../components/button/button");
const link_1 = require("../../components/link/link");
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const positions_1 = require("../../types/positions/positions");
const role_1 = require("../../types/role/role");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const popoverControlled_1 = require("../popover/popoverControlled");
const component_2 = require("../popover/types/component");
const screenReaderOnly_1 = require("../screenReaderOnly/screenReaderOnly");
// styles
const snackbar_styled_1 = require("./snackbar.styled");
const SnackbarStandAloneComponent = ({ align = positions_1.POSITIONS.TOP_CENTER_FIXED, dataTestId = 'snackbar', ...props }, ref) => {
    const buildAction = () => props.secondaryActionContent && ((0, jsx_runtime_1.jsx)(snackbar_styled_1.SnackbarLinkWrapper, { styles: props.styles, withIcon: !!props.icon, children: (props.styles?.actionButton?.variant || props.secondaryActionButton?.variant) &&
            (props.styles?.actionButton?.size || props.secondaryActionButton?.size) ? ((0, jsx_runtime_1.jsx)(button_1.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) && ((0, jsx_runtime_1.jsx)(link_1.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) && ((0, jsx_runtime_1.jsx)(snackbar_styled_1.SnackbarDescriptionWrapper, { styles: props.styles, children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.PARAGRAPH, customTypography: props.styles?.description, ...restDescriptionProps, children: content }) })));
    };
    return ((0, jsx_runtime_1.jsx)(popoverControlled_1.PopoverControlled, { autoWidth: true, transparentBackground: true, clickOverlayClose: false, component: component_2.PopoverComponentType.DIV, focusLastElementFocusedAfterClose: false, focusScreenFirstDescendantAfterClose: false, open: props.open, pressEscapeClose: false, variant: props.styles?.popoverVariants?.[align], ...props.popover, children: (0, jsx_runtime_1.jsxs)(snackbar_styled_1.SnackbarStyled, { ref: ref, "data-testid": dataTestId, styles: props.styles, onBlur: props.onBlur, onFocus: props.onFocus, onMouseEnter: props.onMouseEnter, onMouseLeave: props.onMouseLeave, children: [(0, jsx_runtime_1.jsxs)(snackbar_styled_1.SnackbarTextAndActionWrapper, { children: [(0, jsx_runtime_1.jsxs)(snackbar_styled_1.SnackbarTextWrapper, { "data-testid": `${dataTestId}-alert`, role: role_1.ROLES.ALERT, styles: props.styles, children: [(0, jsx_runtime_1.jsxs)(snackbar_styled_1.SnackbarIconTitleContainerWrapper, { styles: props.styles, children: [props.icon && ((0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles?.icon, ...props.icon })), (0, jsx_runtime_1.jsx)(snackbar_styled_1.SnackbarTitleWrapper, { children: (0, jsx_runtime_1.jsxs)(text_1.Text, { component: component_1.TextComponentType.PARAGRAPH, customTypography: props.styles?.title, ...props.title, children: [(0, jsx_runtime_1.jsx)(screenReaderOnly_1.ScreenReaderOnly, { children: props.icon?.altText }), props.title.content] }) })] }), (0, jsx_runtime_1.jsx)(snackbar_styled_1.SnackbarNoStatusContentWrapper, { styles: props.styles, withIcon: !!props.icon, children: buildDescription() })] }), buildAction()] }), (0, jsx_runtime_1.jsx)(snackbar_styled_1.ButtonWrapper, { children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles?.closeIcon, onClick: e => props.onCloseButtonClick(false)(e), ...props.closeIcon }) })] }) }));
};
exports.SnackbarStandAlone = react_1.default.forwardRef(SnackbarStandAloneComponent);
//# sourceMappingURL=snackbarStandAlone.js.map