@kubit-ui-web/react-components/dist/esm/components/modal/modalStandAlone.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 { ElementOrIllustration } from '../../components/elementOrIllustration/elementOrIllustration';
import { Footer } from '../../components/footer/footer';
import { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { DeviceBreakpointsType } from '../../types/breakpoints/breakpoints';
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 { PopoverPositionVariantType } from '../popover/types/positionVariant';
import { DraggableIcon, ModalCloseButtonStyled, ModalContentStyled, ModalFooterStyled, ModalHeaderStyled, ModalImageStyled, ModalStyled, TitleHiddenContainer, } from './modal.styled';
const ModalStandAloneComponent = ({ dataTestId = 'modal', customHeightAllDevices = false, customWidthAllDevices = false, ...props }, ref) => {
    const uniqueModalId = useId('modal');
    const modalId = props.id ?? uniqueModalId;
    const uniqueTitleId = useId('modal-title');
    const titleIdFinal = props.title?.id ?? uniqueTitleId;
    const buildIconOrIllustration = () => {
        if (props.imageIllustrationHeader?.illustration) {
            return (_jsx(ModalImageStyled, { "data-modal-ilustration-container": true, "$styles": props.styles, "data-testid": `${dataTestId}-image-header`, children: _jsx(ElementOrIllustration, { customIllustrationStyles: props.styles.imageIllustrationHeader, ...props.imageIllustrationHeader }) }));
        }
        else if (props.imageHeader?.icon) {
            return (_jsx(ModalImageStyled, { "$styles": props.styles, "data-testid": `${dataTestId}-image-header`, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.imageHeader, ...props.imageHeader }) }));
        }
        return null;
    };
    const onlyDesktopSize = value => {
        return props.device === DeviceBreakpointsType.DESKTOP ||
            props.device === DeviceBreakpointsType.LARGE_DESKTOP
            ? value
            : undefined;
    };
    const modalFooterVariant = props.footer?.variant ?? props.styles.footerVariant;
    return (_jsx(Popover, { "aria-labelledby": titleIdFinal, "aria-modal": props.open, clickOverlayClose: !props.blocked, component: PopoverComponentType.DIV, hasBackDrop: true, id: modalId, open: props.open, positionVariant: PopoverPositionVariantType.FIXED, role: ROLES.DIALOG, trapFocusInsideModal: true, variant: props.styles.popoverVariant, onCloseInternally: props.onPopoverCloseInternally, ...props.popover, children: _jsxs(ModalStyled, { ref: ref, "$maxHeight": props.maxHeight, "$maxWidth": props.maxWidth, "$minHeight": customHeightAllDevices ? props.minHeight : onlyDesktopSize(props.minHeight), "$minWidth": customWidthAllDevices ? props.minWidth : onlyDesktopSize(props.minWidth), "$styles": props.styles, "data-testid": dataTestId, hasFooter: !!props.footer?.content, onKeyDown: event => props.onKeyDown?.(event), children: [_jsxs(ModalHeaderStyled, { "data-modal-header": true, "$styles": props.styles, children: [!props.blocked && props.dragIcon && (_jsx(DraggableIcon, { "data-modal-draggable-icon": true, "$styles": props.styles, children: _jsx(ElementOrIcon, { customIconStyles: props.styles?.dragIcon, ...props.dragIcon }) })), !props.blocked && props.closeIcon?.icon && (_jsx(ModalCloseButtonStyled, { "$styles": props.styles, children: _jsx(ElementOrIcon, { customIconStyles: props.styles?.closeButtonIcon, ...props.closeIcon }) })), !props.blocked &&
                            props.closeButton?.content &&
                            (props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && (_jsx(Button, { variant: props.styles.closeButton?.buttonVariant, ...props.closeButton, children: props.closeButton.content })), buildIconOrIllustration(), props.title?.visible === undefined || props.title.visible ? (_jsx(Text, { component: TextComponentType.H1, customTypography: props.styles.title, id: titleIdFinal, ...props.title, children: props.title?.content })) : (_jsx(TitleHiddenContainer, { id: titleIdFinal, children: props.title?.content }))] }), _jsx(ModalContentStyled, { "data-modal-content": true, "$minContentHeight": props.minContentHeight, "$styles": props.styles, "aria-label": props.contentHasScroll ? props.contentScrollArias?.['aria-label'] : undefined, "aria-labelledby": props.contentHasScroll ? props.contentScrollArias?.['aria-labelledby'] : undefined, "data-testid": `${dataTestId}-content`, role: props.contentHasScroll ? ROLES.REGION : undefined, tabIndex: props.contentHasScroll ? 0 : undefined, children: props.content }), modalFooterVariant && props.footer?.content && (_jsx(ModalFooterStyled, { "$styles": props.styles, children: _jsx(Footer, { variant: modalFooterVariant, ...props.footer, children: props.footer?.content }) }))] }) }));
};
export const ModalStandAlone = React.forwardRef(ModalStandAloneComponent);
//# sourceMappingURL=modalStandAlone.js.map