@kubit-ui-web/react-components/dist/cjs/components/drawer/drawerStandAlone.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.DrawerStandAlone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const footer_1 = require("../../components/footer/footer");
const useId_1 = require("../../hooks/useId/useId");
const role_1 = require("../../types/role/role");
const elementOrIcon_1 = require("../elementOrIcon/elementOrIcon");
const popoverControlled_1 = require("../popover/popoverControlled");
const component_1 = require("../popover/types/component");
const text_1 = require("../text/text");
const component_2 = require("../text/types/component");
const drawer_styled_1 = require("./drawer.styled");
const DrawerStandAloneComponent = ({ blocked = false, titleComponent = component_2.TextComponentType.H3, dataTestId = 'drawer', ...props }, ref) => {
    const uniqueTitleId = (0, useId_1.useId)('drawer-title');
    const titleIdFinal = props.title?.id ?? uniqueTitleId;
    const position = props.styles[props.level]?.containerPosition;
    return ((0, jsx_runtime_1.jsx)(popoverControlled_1.PopoverControlled, { "aria-labelledby": props.title?.content ? titleIdFinal : undefined, "aria-modal": props.open, clickOverlayClose: !blocked, component: component_1.PopoverComponentType.DIV, hasBackDrop: true, open: props.open, role: role_1.ROLES.DIALOG, trapFocusInsideModal: true, variant: position, ...props.popover, children: (0, jsx_runtime_1.jsxs)(drawer_styled_1.DrawerStyled, { ref: ref, "data-testid": dataTestId, position: position, styles: props.styles, children: [!blocked && ((0, jsx_runtime_1.jsx)(drawer_styled_1.DrawerNavigationStyled, { level: props.level, styles: props.styles, children: (0, jsx_runtime_1.jsx)(elementOrIcon_1.ElementOrIcon, { customIconStyles: props.styles.icon, ...props.closeIcon }) })), (0, jsx_runtime_1.jsxs)(drawer_styled_1.DrawerTitleContentFooterContainerStyled, { blocked: blocked, styles: props.styles, children: [(0, jsx_runtime_1.jsx)(drawer_styled_1.DrawerTitleStyled, { "data-drawer-title": true, as: text_1.Text, component: titleComponent, customTypography: props.styles.title, id: titleIdFinal, ...props.title, children: props.title?.content }), (0, jsx_runtime_1.jsx)(drawer_styled_1.DrawerContentStyled, { "data-drawer-content": true, "aria-label": props.contentHasScroll ? props.contentScrollArias?.['aria-label'] : undefined, "aria-labelledby": props.contentHasScroll ? props.contentScrollArias?.['aria-labelledby'] : undefined, role: props.contentHasScroll ? role_1.ROLES.REGION : undefined, styles: props.styles, tabIndex: props.contentHasScroll ? 0 : undefined, children: props.children }), props.footer?.content && (props.styles.footer?.variant || props.footer.variant) && ((0, jsx_runtime_1.jsx)(drawer_styled_1.DrawerFooterStyled, { "data-drawer-footer": true, as: footer_1.Footer, customFooterStyles: props.styles, variant: props.styles.footer?.variant, ...props.footer, children: props.footer.content }))] })] }) }));
};
exports.DrawerStandAlone = react_1.default.forwardRef(DrawerStandAloneComponent);
//# sourceMappingURL=drawerStandAlone.js.map