@kubit-ui-web/react-components/dist/esm/components/table/component/listRowHeaderPriority.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 { Text } from '../../../components/text/text';
import { TextComponentType } from '../../../components/text/types/component';
import { ButtonType } from '../../button/types/type';
import { ElementOrIcon } from '../../elementOrIcon/elementOrIcon';
import { useContent } from '../hooks/useContent';
import { ListHeaderItemStylesStyled, ListItemExpandedStyled, ListItemHeaderPriorityStyled, ListRowContainerHeaderPriorityStyled, ListRowHeaderPriorityStyled, TableExpandedButton, } from '../table.styled';
import { ListDivider } from './listDivider';
export const ListRowHeaderPriority = (props) => {
    const { rowHeader, divider, dividerValue, getExpandedAria, getValue, getCellTokenValue, handleShowExpandedContent, hasExpandedContentRow, showExpandedContent, rowVariant, } = useContent({ ...props });
    return (_jsxs(ListRowContainerHeaderPriorityStyled, { hasDivider: !!dividerValue(), lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles, children: [rowHeader && (_jsx(ListHeaderItemStylesStyled, { customAlign: rowHeader?.config?.alignHeader?.[props.device] || rowHeader?.config?.alignHeader, customBackgroundColor: rowHeader?.config?.backgroundColor, customWidth: rowHeader?.config?.width, flexWidth: rowHeader?.config?.flexWidth, index: props.index, lineSeparatorBottomOnHeader: props.lineSeparatorBottomOnHeader, lineSeparatorLineStyles: props.lineSeparatorLineStyles, lineSeparatorTopOnHeader: props.lineSeparatorTopOnHeader, styles: props.styles.header?.[rowHeader.variant], children: _jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.header?.[rowHeader.variant]?.typography, children: rowHeader.label }) })), _jsx(ListDivider, { divider: dividerValue(), dividerStyles: props.styles.divider }), _jsx(ListRowHeaderPriorityStyled, { styles: props.styles, children: props.headers
                    .filter(header => header.id !== divider?.id)
                    .map((header, indexHeader) => {
                    const hasExpandedIcon = indexHeader === 0;
                    return (_jsxs("li", { children: [header.label && (_jsx(ListHeaderItemStylesStyled, { "aria-hidden": header?.config?.['aria-hidden'], customAlign: header?.config?.alignHeader?.[props.device] || header?.config?.alignHeader, customBackgroundColor: header?.config?.backgroundColor, customWidth: header?.config?.width, flexWidth: header?.config?.flexWidth, hidden: props.hiddenHeaderOn?.[props.device], lineSeparatorBottomOnHeader: props.lineSeparatorBottomOnHeader, lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles.header?.[props.headerVariant], children: _jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.header?.[props.headerVariant]?.typography, children: header.label }) })), _jsx("ul", { children: _jsxs(ListItemHeaderPriorityStyled, { borderPosition: props.value.rowBorderPosition, customAlign: getCellTokenValue({ headerValue: header, token: 'align' }) ||
                                        header?.config?.alignValue?.[props.device] ||
                                        header?.config?.alignValue ||
                                        header?.config?.alignHeader?.[props.device] ||
                                        header?.config?.alignHeader, customBackgroundColor: getCellTokenValue({ headerValue: header, token: 'backgroundColor' }) ??
                                        props.value.backgroundColor, customWidth: header?.config?.width, "data-testid": `${props.dataTestId}-item-list-${indexHeader}`, flexWidth: header?.config?.flexWidth, hasSomeExpandedContent: props.hasSomeExpandedContent, lineSeparatorLineStyles: props.lineSeparatorLineStyles, styles: props.styles.bodyRows?.[rowVariant], children: [hasExpandedIcon && hasExpandedContentRow && (_jsx(TableExpandedButton, { "aria-label": getExpandedAria(), styles: props.styles.bodyRows?.[rowVariant], type: ButtonType.BUTTON, onClick: () => {
                                                props.onExpandedContentOpen?.(!showExpandedContent, getValue(header), indexHeader);
                                                handleShowExpandedContent(!showExpandedContent);
                                            }, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.bodyRows?.[rowVariant]?.accordionIcon, rotate: showExpandedContent ? '180deg' : '0deg', ...props.accordionIcon }) })), getValue(header), hasExpandedIcon && hasExpandedContentRow && (_jsx(ListItemExpandedStyled, { showExpandedContent: showExpandedContent, styles: props.styles.bodyRows?.[rowVariant], children: showExpandedContent && props.value.expandedContent
                                                ? props.value.expandedContent[props.device]
                                                : props.expandedContentHelpMessage }))] }) })] }, indexHeader));
                }) })] }));
};
//# sourceMappingURL=listRowHeaderPriority.js.map