import { jsx as _jsx } from "react/jsx-runtime";
import { styled, useStyleConfig, vui } from '../core';
import { cs } from '../utils';
import { useTableContext } from './context';
import Th from './th';
import Tr from './tr';
/*@formatter:off*/
const TheadBase = styled.theadBox `
  tr th,
  tr td {
    border-bottom: 1px solid sandstone.main;
  }
`;
/*@formatter:on*/
/** Displays Table head with support for columns and sticky. */
export const Thead = vui((props, ref) => {
    const { children, className, ...rest } = props;
    const { columns, stickyHeader } = useTableContext() ?? {};
    const styles = useStyleConfig('Table', useTableContext());
    const stickyProps = stickyHeader
        ? {
            bg: 'white',
            position: 'sticky',
            top: 0,
            zIndex: 3,
        }
        : {};
    return (_jsx(TheadBase, { className: cs('vui-thead', className), ref: ref, ...stickyProps, ...styles.thead, ...rest, children: children ?? _jsx(Tr, { children: columns?.map(column => _jsx(Th, { role: "columnheader", ...column }, column.field)) }) }));
});
Thead.displayName = 'Thead';
export default Thead;
//# sourceMappingURL=thead.js.map