@kubit-ui-web/react-components/dist/cjs/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

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Table = exports.TableComponent = void 0;
const react_1 = require("react");
const jsx_runtime_1 = require("react/jsx-runtime");
const react_2 = __importDefault(require("react"));
const footer_1 = require("../../../components/footer/footer");
const text_1 = require("../../../components/text/text");
const component_1 = require("../../../components/text/types/component");
const useId_1 = require("../../../hooks/useId/useId");
const role_1 = require("../../../types/role/role");
const aria_1 = require("../../../utils/aria/aria");
const table_styled_1 = require("../table.styled");
const tableRow_1 = require("./tableRow");
const TableComponent = ({ ariaHiddenDividerColumn = true, ariaHiddenEmptyColumn = true, ...props }, ref) => {
    const ariaProps = (0, aria_1.pickAriaProps)(props);
    const footerVariant = props.footer?.variant ?? props.styles?.footerVariant;
    const uniqueId = (0, useId_1.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 ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(table_styled_1.TableStyled, { ref: ref, "aria-describedby": uniqueId, "data-testid": props.dataTestId, styles: props.styles.table, ...ariaProps, children: [(0, jsx_runtime_1.jsx)(table_styled_1.TableCaptionStyled, { id: uniqueId, children: props.captionDescription }), (0, jsx_runtime_1.jsx)(table_styled_1.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: (0, jsx_runtime_1.jsxs)(table_styled_1.TableRowHeaderStyled, { hasSomeDivider: hasSomeDivider, hasSomeDividerContent: hasSomeDividerContent, hasSomeExpandedContent: props.hasSomeExpandedContent, numberOfCells: headersElement.length, styles: props.styles.header?.[props.headerVariant], children: [hasRowHeader && ((0, jsx_runtime_1.jsx)(table_styled_1.TableEmptyColumnHeaderStyled, { "aria-hidden": ariaHiddenEmptyColumn, styles: props.styles.header?.[props.headerVariant] })), hasSomeDividerContent && ((0, jsx_runtime_1.jsx)(table_styled_1.TableColumnHeaderStyled, { "aria-hidden": ariaHiddenDividerColumn, hasDivider: true, scope: "col", styles: props.styles.header?.[props.headerVariant], children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.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 ((0, jsx_runtime_1.jsx)(table_styled_1.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: (0, jsx_runtime_1.jsx)(text_1.Text, { align: headerValue?.config?.alignHeader?.[props.device] ||
                                                headerValue?.config?.alignHeader, component: component_1.TextComponentType.SPAN, customTypography: props.styles.header?.[headerVariant]?.typography, children: headerValue.label }) }, headerValue.id));
                                }), props.hasSomeExpandedContent && ((0, jsx_runtime_1.jsx)(table_styled_1.TableColumnHeaderStyled, { hasDivider: true, scope: "col", styles: props.styles.header?.[props.headerVariant], children: (0, jsx_runtime_1.jsx)(text_1.Text, { component: component_1.TextComponentType.SPAN, customTypography: props.styles.header?.[props.headerVariant]?.typography, children: 'ExpandedContent' }) }, 'expandedContent'))] }) }), (0, jsx_runtime_1.jsx)(table_styled_1.TableRowGroupBodyStyled, { "aria-label": props.hasScroll ? props.tBodyScrollArias?.['aria-label'] : undefined, "aria-labelledby": props.hasScroll ? props.tBodyScrollArias?.['aria-labelledby'] : undefined, role: props.hasScroll ? role_1.ROLES.REGION : undefined, styles: props.styles, tabIndex: props.hasScroll ? 0 : undefined, children: props.values.map((value, indexValue) => {
                            return ((0, react_1.createElement)(tableRow_1.TableRow, { ...props, key: indexValue, hasSomeDivider: hasSomeDivider, hasSomeDividerContent: hasSomeDividerContent, hasSomeExpandedContent: props.hasSomeExpandedContent, headers: headersElement, indexRow: indexValue, value: value }));
                        }) })] }), props.footer?.content && footerVariant && ((0, jsx_runtime_1.jsx)(footer_1.Footer, { simpleContainer: false, ...props.footer, variant: footerVariant, children: props.footer.content }))] }));
};
exports.TableComponent = TableComponent;
/**
 * @description
 * Table component is used to display data in a tabular format.
 */
exports.Table = react_2.default.forwardRef(exports.TableComponent);
//# sourceMappingURL=table.js.map