@kubit-ui-web/react-components/dist/esm/components/table/component/tableRow.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, Fragment as _Fragment } 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 { TableColumnBodyStyled, TableColumnHeaderStyled, TableEmptyExpandedContentRow, TableExpandedButton, TableExpandedCellStyled, TableRowBodyStyled, } from '../table.styled';
import { TableDivider } from './tableDivider';
/**
 * @description
 * TableRow component is used to display a row in a table.
 */
export const TableRow = (props) => {
    const { divider, rowHeader, dividerValue, getExpandedAria, getValue, getCellTokenValue, handleShowExpandedContent, hasExpandedContentRow, hasFooter, showExpandedContent, rowVariant, } = useContent({ ...props });
    return (_jsx(_Fragment, { children: _jsxs(TableRowBodyStyled, { borderPosition: props.value.rowBorderPosition, "data-testid": `${props.dataTestId}-row-${props.indexRow}`, hasDivider: !!dividerValue(), hasDividerContent: !!props.value.dividerContent, hasFooter: hasFooter, hasSomeDivider: props.hasSomeDivider, hasSomeDividerContent: props.hasSomeDividerContent, hasSomeExpandedContent: props.hasSomeExpandedContent, lineSeparatorLineStyles: props.lineSeparatorLineStyles, numberOfCells: props.headers.length, styles: props.styles.bodyRows?.[rowVariant], children: [_jsx(TableDivider, { divider: dividerValue(), styles: props.styles.divider }), rowHeader && (_jsx(TableColumnHeaderStyled, { "aria-hidden": rowHeader.config?.['aria-hidden'], customAlign: rowHeader?.config?.alignHeader?.[props.device] || rowHeader?.config?.alignHeader, customBackgroundColor: rowHeader?.config?.backgroundColor, customWidth: rowHeader?.config?.width, flexWidth: rowHeader?.config?.flexWidth, scope: "row", styles: props.styles.header?.[rowHeader.variant], children: _jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.header?.[rowHeader.variant]?.typography, children: rowHeader.label }) })), props.headers
                    .filter(headerValue => headerValue.id !== divider?.id)
                    .map((headerValue, indexHeader) => {
                    const hasExpandedIcon = indexHeader === 0;
                    return (_jsxs(TableColumnBodyStyled, { "aria-hidden": headerValue.config?.['aria-hidden'], customAlign: getCellTokenValue({ headerValue, token: 'align' }) ||
                            headerValue?.config?.alignValue?.[props.device] ||
                            headerValue?.config?.alignValue ||
                            headerValue?.config?.alignHeader?.[props.device] ||
                            headerValue?.config?.alignHeader, customBackgroundColor: getCellTokenValue({ headerValue, token: 'backgroundColor' }) ??
                            props.value.backgroundColor, customWidth: headerValue?.config?.width, "data-testid": `${props.dataTestId}-row-${props.indexRow}-content-${indexHeader}`, flexWidth: headerValue?.config?.flexWidth, hasSomeExpandedContent: props.hasSomeExpandedContent && hasExpandedIcon, styles: props.styles.bodyRows?.[rowVariant], children: [hasExpandedIcon &&
                                props.hasSomeExpandedContent &&
                                (hasExpandedContentRow ? (_jsx(TableExpandedButton, { "aria-label": getExpandedAria(), styles: props.styles.bodyRows?.[rowVariant], type: ButtonType.BUTTON, onClick: () => {
                                        props.onExpandedContentOpen?.(!showExpandedContent, getValue(headerValue), indexHeader);
                                        handleShowExpandedContent(!showExpandedContent);
                                    }, children: _jsx(ElementOrIcon, { customIconStyles: props.styles.bodyRows?.[rowVariant]?.accordionIcon, rotate: showExpandedContent ? '180deg' : '0deg', ...props.accordionIcon }) })) : (_jsx(TableEmptyExpandedContentRow, { styles: props.styles.bodyRows?.[rowVariant] }))), getValue(headerValue)] }, indexHeader));
                }), props.hasSomeExpandedContent && (_jsx(TableExpandedCellStyled, { "data-testid": `${props.dataTestId}-row-${props.indexRow}-expanded-content`, showExpandedContent: showExpandedContent, styles: props.styles.bodyRows?.[rowVariant], children: showExpandedContent && props.value.expandedContent
                        ? props.value.expandedContent[props.device]
                        : props.expandedContentHelpMessage }))] }) }));
};
//# sourceMappingURL=tableRow.js.map