@kubit-ui-web/react-components/dist/esm/components/accordion/accordionStandAlone.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 { Text } from '../../components/text/text';
import { TextComponentType } from '../../components/text/types/component';
import { useId } from '../../hooks/useId/useId';
import { ButtonType } from '../button/types/type';
import { ElementOrIcon } from '../elementOrIcon/elementOrIcon';
import { AccordionContainerStyled, AccordionContentStyled, AccordionDecorativeBackgroundStyled, AccordionFooterStyled, AccordionHeaderExternalContainerStyled, AccordionHeaderInternalContainerStyled, AccordionHeaderMainContainerStyled, AccordionHeaderRightContentStyled, AccordionHeaderTitleHeadlineStyled, AccordionPanelStyled, AccordionSubHeaderContainerStyled, AccordionTitleIconWrapper, AccordionTitleStyled, AccordionTriggerIconContainerStyled, AccordionTriggerStyled, LineSeparatorContainerStyled, } from './accordion.styled';
const ACCORDION_BASE_ID = 'AccordionComponent';
const AccordionStandAloneComponent = ({ dataTestId = 'accordion', hasHeaderLineSeparator = true, open = false, ...props }, ref) => {
    const BASE_ID = useId(ACCORDION_BASE_ID);
    const TRIGGER_ID = `${BASE_ID}-trigger`;
    const HEADER_ID = `${BASE_ID}-header`;
    const PANEL_ID = `${BASE_ID}-panel`;
    const getDataTestId = (uniqueId = '') => `${dataTestId}-${uniqueId}`;
    return (_jsxs(AccordionContainerStyled, { ref: ref, "data-testid": dataTestId, id: BASE_ID, styles: props.styles.container, children: [_jsx(AccordionDecorativeBackgroundStyled, { styles: props.styles.decorative }), _jsx(AccordionHeaderExternalContainerStyled, { styles: props.styles.headerExternalContainer, children: _jsxs(AccordionHeaderInternalContainerStyled, { "data-testid": getDataTestId('header'), id: HEADER_ID, styles: props.styles.headerInternalContainer, children: [_jsxs(AccordionHeaderMainContainerStyled, { styles: props.styles.headerMainContainer, children: [_jsx(AccordionHeaderTitleHeadlineStyled, { as: props.triggerComponent, styles: props.styles.titleHeaderMainContainer, children: _jsxs(AccordionTriggerStyled, { "aria-controls": PANEL_ID, "aria-expanded": open, "data-testid": getDataTestId('trigger-button'), id: TRIGGER_ID, styles: props.styles[typeof props.title?.content !== 'string' ? 'link' : 'trigger'], type: ButtonType.BUTTON, ...props.triggerButton, children: [_jsx(AccordionTriggerIconContainerStyled, { "$rotate": open, "data-testid": `${dataTestId}-trigger-icon-wrapper`, styles: props.styles.triggerIconContainer, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.triggerIcon, ...props.triggerIcon }) }), _jsxs(AccordionTitleStyled, { styles: props.styles.titleContainer, children: [props.titleIcon && (_jsx(AccordionTitleIconWrapper, { styles: props.styles.titleIconContainer, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.titleIcon, ...props.titleIcon }) })), _jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.title, ...props.title, children: props.title?.content })] })] }) }), props.headerRightContent && (_jsx(AccordionHeaderRightContentStyled, { "data-testid": `${dataTestId}-right-content`, styles: props.styles.headerRightContentContainer, children: props.headerRightContent }))] }), props.subHeaderContent && (_jsx(AccordionSubHeaderContainerStyled, { "data-testid": `${dataTestId}-subheader`, styles: props.styles.subHeader, children: props.subHeaderContent }))] }) }), _jsxs(AccordionContentStyled, { "aria-labelledby": TRIGGER_ID, displayOption: !open ? 'none' : 'block', id: PANEL_ID, styles: props.styles.content, children: [hasHeaderLineSeparator && props.styles.lineSeparatorContainer && (_jsx(LineSeparatorContainerStyled, { lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles.lineSeparatorContainer })), _jsx(AccordionPanelStyled, { "data-testid": getDataTestId('panel'), styles: props.styles.panel, children: props.children }), props.footerContent && (_jsx(AccordionFooterStyled, { "data-testid": getDataTestId('footer'), styles: props.styles.footer, children: props.footerContent }))] })] }));
};
export const AccordionStandAlone = React.forwardRef(AccordionStandAloneComponent);
//# sourceMappingURL=accordionStandAlone.js.map