@equinor/eds-core-react/dist/esm/components/Table/FooterCell/FooterCell.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 { token } from '../HeaderCell/HeaderCell.tokens.js';
import { jsx } from 'react/jsx-runtime';
import { useEds } from '../../EdsProvider/eds.context.js';

const StyledTableCell = styled.th.withConfig({
  displayName: "FooterCell__StyledTableCell",
  componentId: "sc-1xq9z77-0"
})(props => {
  const {
    theme,
    $sticky
  } = props;
  const {
    background,
    height,
    typography,
    spacings
  } = theme;
  return css(["min-height:", ";height:", ";background:", ";box-sizing:border-box;", " ", " ", " ", ""], height, height, background, spacingsTemplate(spacings), typographyTemplate(typography), bordersTemplate(theme.border), $sticky ? css(["position:sticky;bottom:0;z-index:2;"]) : '');
});
const CellInner = styled.div.withConfig({
  displayName: "FooterCell__CellInner",
  componentId: "sc-1xq9z77-1"
})(["display:flex;align-items:center;"]);
const TableFooterCell = /*#__PURE__*/forwardRef(function TableFooterCell({
  children,
  sticky,
  ...rest
}, ref) {
  const {
    density
  } = useEds();
  const token$1 = useToken({
    density
  }, token);
  const props = {
    ref,
    $sticky: sticky,
    ...rest
  };
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token$1,
    children: /*#__PURE__*/jsx(StyledTableCell, {
      ...props,
      children: /*#__PURE__*/jsx(CellInner, {
        children: children
      })
    })
  });
});

export { TableFooterCell };