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

The React implementation of the Equinor Design System

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

const StyledTableCell = styled.td.withConfig({
  displayName: "DataCell__StyledTableCell",
  componentId: "sc-15tuitc-0"
})(({
  theme,
  color
}) => {
  const {
    height,
    typography,
    spacings,
    border,
    align
  } = theme;
  const backgroundColor = color === 'error' ? theme.validation.error?.background : '';
  const base = css(["min-height:", ";height:", ";background:", ";vertical-align:", ";box-sizing:border-box;", " ", " ", ""], height, height, backgroundColor, align.vertical, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(border));
  return base;
});
const TableDataCell = /*#__PURE__*/forwardRef(function TableDataCell({
  children,
  variant = 'text',
  ...rest
}, ref) {
  const {
    density
  } = useEds();
  const token = useToken({
    density
  }, applyVariant(variant, tableCell));
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token,
    children: /*#__PURE__*/jsx(StyledTableCell, {
      ...rest,
      ref: ref,
      children: children
    })
  });
});

export { TableDataCell };