@kubit-ui-web/react-components
Version:
Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience
48 lines • 6.06 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModalStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const button_1 = require("../../components/button/button");
const elementOrIllustration_1 = require("../../components/elementOrIllustration/elementOrIllustration");
const footer_1 = require("../../components/footer/footer");
const text_1 = require("../../components/text/text");
const component_1 = require("../../components/text/types/component");
const useId_1 = require("../../hooks/useId/useId");
const breakpoints_1 = require("../../types/breakpoints/breakpoints");
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 positionVariant_1 = require("../popover/types/positionVariant");
const modal_styled_1 = require("./modal.styled");
const ModalStandAloneComponent = ({ dataTestId = 'modal', customHeightAllDevices = false, customWidthAllDevices = false, ...props }, ref) => {
const uniqueModalId = (0, useId_1.useId)('modal');
const modalId = props.id ?? uniqueModalId;
const uniqueTitleId = (0, useId_1.useId)('modal-title');
const titleIdFinal = props.title?.id ?? uniqueTitleId;
const buildIconOrIllustration = () => {
if (props.imageIllustrationHeader?.illustration) {
return ((0, jsx_runtime_1.jsx)(modal_styled_1.ModalImageStyled, { "data-modal-ilustration-container": true, "$styles": props.styles, "data-testid": `${dataTestId}-image-header`, children: (0, jsx_runtime_1.jsx)(elementOrIllustration_1.ElementOrIllustration, { customIllustrationStyles: props.styles.imageIllustrationHeader, ...props.imageIllustrationHeader }) }));
}
else if (props.imageHeader?.icon) {
return ((0, jsx_runtime_1.jsx)(modal_styled_1.ModalImageStyled, { "$styles": props.styles, "data-testid": `${dataTestId}-image-header`, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.imageHeader, ...props.imageHeader }) }));
}
return null;
};
const onlyDesktopSize = value => {
return props.device === breakpoints_1.DeviceBreakpointsType.DESKTOP ||
props.device === breakpoints_1.DeviceBreakpointsType.LARGE_DESKTOP
? value
: undefined;
};
const modalFooterVariant = props.footer?.variant ?? props.styles.footerVariant;
return ((0, jsx_runtime_1.jsx)(popoverControlled_1.PopoverControlled, { "aria-labelledby": titleIdFinal, "aria-modal": props.open, clickOverlayClose: !props.blocked, component: component_2.PopoverComponentType.DIV, hasBackDrop: true, id: modalId, open: props.open, positionVariant: positionVariant_1.PopoverPositionVariantType.FIXED, role: role_1.ROLES.DIALOG, trapFocusInsideModal: true, variant: props.styles.popoverVariant, onCloseInternally: props.onPopoverCloseInternally, ...props.popover, children: (0, jsx_runtime_1.jsxs)(modal_styled_1.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: [(0, jsx_runtime_1.jsxs)(modal_styled_1.ModalHeaderStyled, { "data-modal-header": true, "$styles": props.styles, children: [!props.blocked && props.dragIcon && ((0, jsx_runtime_1.jsx)(modal_styled_1.DraggableIcon, { "data-modal-draggable-icon": true, "$styles": props.styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles?.dragIcon, ...props.dragIcon }) })), !props.blocked && props.closeIcon?.icon && ((0, jsx_runtime_1.jsx)(modal_styled_1.ModalCloseButtonStyled, { "$styles": props.styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles?.closeButtonIcon, ...props.closeIcon }) })), !props.blocked &&
props.closeButton?.content &&
(props.styles.closeButton?.buttonVariant || props.closeButton?.variant) && ((0, jsx_runtime_1.jsx)(button_1.Button, { variant: props.styles.closeButton?.buttonVariant, ...props.closeButton, children: props.closeButton.content })), buildIconOrIllustration(), props.title?.visible === undefined || props.title.visible ? ((0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.H1, customTypography: props.styles.title, id: titleIdFinal, ...props.title, children: props.title?.content })) : ((0, jsx_runtime_1.jsx)(modal_styled_1.TitleHiddenContainer, { id: titleIdFinal, children: props.title?.content }))] }), (0, jsx_runtime_1.jsx)(modal_styled_1.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 ? role_1.ROLES.REGION : undefined, tabIndex: props.contentHasScroll ? 0 : undefined, children: props.content }), modalFooterVariant && props.footer?.content && ((0, jsx_runtime_1.jsx)(modal_styled_1.ModalFooterStyled, { "$styles": props.styles, children: (0, jsx_runtime_1.jsx)(footer_1.Footer, { variant: modalFooterVariant, ...props.footer, children: props.footer?.content }) }))] }) }));
};
exports.ModalStandAlone = react_1.default.forwardRef(ModalStandAloneComponent);
//# sourceMappingURL=modalStandAlone.js.map