@kubit-ui-web/react-components/dist/esm/components/table/component/table.js

Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience

import { createElement as _createElement } from "react";
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import React from 'react';
import { Footer } from '../../../components/footer/footer';
import { Text } from '../../../components/text/text';
import { TextComponentType } from '../../../components/text/types/component';
import { useId } from '../../../hooks/useId/useId';
import { ROLES } from '../../../types/role/role';
import { pickAriaProps } from '../../../utils/aria/aria';
import { TableCaptionStyled, TableColumnHeaderStyled, TableEmptyColumnHeaderStyled, TableRowGroupBodyStyled, TableRowGroupHeaderStyled, TableRowHeaderStyled, TableStyled, } from '../table.styled';
import { TableRow } from './tableRow';
export const TableComponent = ({ ariaHiddenDividerColumn = true, ariaHiddenEmptyColumn = true, ...props }, ref) => {
    const ariaProps = pickAriaProps(props);
    const footerVariant = props.footer?.variant ?? props.styles?.footerVariant;
    const uniqueId = useId('tableCaption');
    const DIVIDER_CONTENT = 'DividerContent';
    const hasSomeDivider = props.headers.some(h => h.config?.hasDivider);
    const hasSomeDividerContent = props.values.some(o => {
        return !!Object.getOwnPropertyDescriptor(o, 'dividerContent');
    });
    const headersElement = props.headers.filter(({ config }) => !config?.hidden?.[props.device]);
    const headersElementWithoutDivider = headersElement.filter(element => !element.config?.hasDivider || !hasSomeDividerContent);
    const hasRowHeader = props.values.some(o => {
        return !!Object.getOwnPropertyDescriptor(o, 'rowHeader');
    });
    return (_jsxs(_Fragment, { children: [_jsxs(TableStyled, { ref: ref, "aria-describedby": uniqueId, "data-testid": props.dataTestId, styles: props.styles.table, ...ariaProps, children: [_jsx(TableCaptionStyled, { id: uniqueId, children: props.captionDescription }), _jsx(TableRowGroupHeaderStyled, { "$scrolling": props.scrolling, hidden: props.hiddenHeaderOn?.[props.device], lineSeparatorBottomOnHeader: props.lineSeparatorBottomOnHeader, lineSeparatorLineStyles: props.lineSeparatorLineStyles, lineSeparatorTopOnHeader: props.lineSeparatorTopOnHeader, styles: props.styles.header?.[props.headerVariant], children: _jsxs(TableRowHeaderStyled, { hasSomeDivider: hasSomeDivider, hasSomeDividerContent: hasSomeDividerContent, hasSomeExpandedContent: props.hasSomeExpandedContent, numberOfCells: headersElement.length, styles: props.styles.header?.[props.headerVariant], children: [hasRowHeader && (_jsx(TableEmptyColumnHeaderStyled, { "aria-hidden": ariaHiddenEmptyColumn, styles: props.styles.header?.[props.headerVariant] })), hasSomeDividerContent && (_jsx(TableColumnHeaderStyled, { "aria-hidden": ariaHiddenDividerColumn, hasDivider: true, scope: "col", styles: props.styles.header?.[props.headerVariant], children: _jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.header?.[props.headerVariant]?.typography, children: DIVIDER_CONTENT }) }, 'dividerContent')), headersElementWithoutDivider.map((headerValue, index) => {
                                    const headerVariant = headerValue.variant ? headerValue.variant : props.headerVariant;
                                    return (_jsx(TableColumnHeaderStyled, { "aria-hidden": headerValue.config?.['aria-hidden'], customAlign: headerValue?.config?.alignHeader?.[props.device] ||
                                            headerValue?.config?.alignHeader, customBackgroundColor: headerValue?.config?.backgroundColor, customWidth: headerValue?.config?.width, flexWidth: headerValue?.config?.flexWidth, hasDivider: headerValue?.config?.hasDivider, scope: "col", showDivider: headerValue?.config?.srOnlyHeader?.[props.device] ||
                                            headerValue?.config?.showDividerHeader, srOnly: headerValue?.config?.srOnlyHeader?.[props.device] ||
                                            headerValue?.config?.srOnlyHeader, styles: props.styles.header?.[headerVariant], children: _jsx(Text, { align: headerValue?.config?.alignHeader?.[props.device] ||
                                                headerValue?.config?.alignHeader, component: TextComponentType.SPAN, customTypography: props.styles.header?.[headerVariant]?.typography, children: headerValue.label }) }, headerValue.id));
                                }), props.hasSomeExpandedContent && (_jsx(TableColumnHeaderStyled, { hasDivider: true, scope: "col", styles: props.styles.header?.[props.headerVariant], children: _jsx(Text, { component: TextComponentType.SPAN, customTypography: props.styles.header?.[props.headerVariant]?.typography, children: 'ExpandedContent' }) }, 'expandedContent'))] }) }), _jsx(TableRowGroupBodyStyled, { "aria-label": props.hasScroll ? props.tBodyScrollArias?.['aria-label'] : undefined, "aria-labelledby": props.hasScroll ? props.tBodyScrollArias?.['aria-labelledby'] : undefined, role: props.hasScroll ? ROLES.REGION : undefined, styles: props.styles, tabIndex: props.hasScroll ? 0 : undefined, children: props.values.map((value, indexValue) => {
                            return (_createElement(TableRow, { ...props, key: indexValue, hasSomeDivider: hasSomeDivider, hasSomeDividerContent: hasSomeDividerContent, hasSomeExpandedContent: props.hasSomeExpandedContent, headers: headersElement, indexRow: indexValue, value: value }));
                        }) })] }), props.footer?.content && footerVariant && (_jsx(Footer, { simpleContainer: false, ...props.footer, variant: footerVariant, children: props.footer.content }))] }));
};
/**
 * @description
 * Table component is used to display data in a tabular format.
 */
export const Table = React.forwardRef(TableComponent);
//# sourceMappingURL=table.js.map