@kubit-ui-web/react-components/dist/esm/components/drawer/drawerStandAlone.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 { Footer } from '../../components/footer/footer';
import { useId } from '../../hooks/useId/useId';
import { ROLES } from '../../types/role/role';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { PopoverControlled } from '../popover/popoverControlled';
import { PopoverComponentType } from '../popover/types/component';
import { Text } from '../text/text';
import { TextComponentType } from '../text/types/component';
import { DrawerContentStyled, DrawerFooterStyled, DrawerNavigationStyled, DrawerStyled, DrawerTitleContentFooterContainerStyled, DrawerTitleStyled, } from './drawer.styled';
const DrawerStandAloneComponent = ({ blocked = false, titleComponent = TextComponentType.H3, dataTestId = 'drawer', ...props }, ref) => {
    const uniqueTitleId = useId('drawer-title');
    const titleIdFinal = props.title?.id ?? uniqueTitleId;
    const position = props.styles[props.level]?.containerPosition;
    return (_jsx(PopoverControlled, { "aria-labelledby": props.title?.content ? titleIdFinal : undefined, "aria-modal": props.open, clickOverlayClose: !blocked, component: PopoverComponentType.DIV, hasBackDrop: true, open: props.open, role: ROLES.DIALOG, trapFocusInsideModal: true, variant: position, ...props.popover, children: _jsxs(DrawerStyled, { ref: ref, "data-testid": dataTestId, position: position, styles: props.styles, children: [!blocked && (_jsx(DrawerNavigationStyled, { level: props.level, styles: props.styles, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.icon, ...props.closeIcon }) })), _jsxs(DrawerTitleContentFooterContainerStyled, { blocked: blocked, styles: props.styles, children: [_jsx(DrawerTitleStyled, { "data-drawer-title": true, as: Text, component: titleComponent, customTypography: props.styles.title, id: titleIdFinal, ...props.title, children: props.title?.content }), _jsx(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 ? ROLES.REGION : undefined, styles: props.styles, tabIndex: props.contentHasScroll ? 0 : undefined, children: props.children }), props.footer?.content && (props.styles.footer?.variant || props.footer.variant) && (_jsx(DrawerFooterStyled, { "data-drawer-footer": true, as: Footer, customFooterStyles: props.styles, variant: props.styles.footer?.variant, ...props.footer, children: props.footer.content }))] })] }) }));
};
export const DrawerStandAlone = React.forwardRef(DrawerStandAloneComponent);
//# sourceMappingURL=drawerStandAlone.js.map