@equinor/eds-core-react/dist/esm/components/Table/HeaderCell/HeaderCell.js

The React implementation of the Equinor Design System

import { forwardRef } from 'react';
import styled, { ThemeProvider, css } from 'styled-components';
import { useToken, isFirefox, spacingsTemplate, typographyTemplate, bordersTemplate } from '@equinor/eds-utils';
import { token } from './HeaderCell.tokens.js';
import { jsx } from 'react/jsx-runtime';
import { useEds } from '../../EdsProvider/eds.context.js';

const StyledTableCell = styled.th.withConfig({
  displayName: "HeaderCell__StyledTableCell",
  componentId: "sc-18w2o3a-0"
})(props => {
  const {
    theme,
    $sticky,
    $density
  } = props;
  const {
    background,
    height,
    typography,
    spacings
  } = theme;
  const activeToken = theme.states.active;
  const ariaSort = props['aria-sort'];
  let sortStylingHover = css({});
  let sortStylingActive = css({});
  if (ariaSort) {
    sortStylingHover = css(["@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], theme.states.hover.background);
  }
  if (ariaSort && ariaSort !== 'none') {
    sortStylingActive = css(["", ";background:", ";color:", ";"], activeToken.border.type === 'bordergroup' ? css(["border-color:", ";"], activeToken.border.bottom.color) : '', activeToken.background, activeToken.typography.color);
  }

  // Firefox specific workaround (bug in v142.0) - see issue #3910
  // Hardcoded padding values compensate for Firefox's incorrect table cell height calculation
  const firefoxFix = isFirefox() ? css(["vertical-align:top;height:auto;min-height:", ";> div{padding:", " 0;}"], height, $density === 'compact' ? '7px' : '13px') : css([""]);
  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), sortStylingHover, sortStylingActive, firefoxFix, $sticky ? css(["position:sticky;top:0;z-index:1;"]) : '');
});
const CellInner = styled.div.withConfig({
  displayName: "HeaderCell__CellInner",
  componentId: "sc-18w2o3a-1"
})(["display:flex;align-items:center;height:100%;"]);
const TableHeaderCell = /*#__PURE__*/forwardRef(function TableHeaderCell({
  children,
  sort,
  sticky,
  ...rest
}, ref) {
  const {
    density
  } = useEds();
  const token$1 = useToken({
    density
  }, token);
  const props = {
    ref,
    $sticky: sticky,
    $density: density,
    ...rest
  };
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token$1,
    children: /*#__PURE__*/jsx(StyledTableCell, {
      "aria-sort": sort,
      ...props,
      children: /*#__PURE__*/jsx(CellInner, {
        children: children
      })
    })
  });
});

export { TableHeaderCell };