text: "use strict";
  
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  
  Object.defineProperty(exports, "__esModule", {
    value: true
  });
  exports.default = exports.styles = void 0;
  
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
  
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  
  var _react = _interopRequireDefault(require("react"));
  
  var _propTypes = _interopRequireDefault(require("prop-types"));
  
  var _clsx = _interopRequireDefault(require("clsx"));
  
  var _withStyles = _interopRequireDefault(require("../styles/withStyles"));
  
  var _helpers = require("../utils/helpers");
  
  var _colorManipulator = require("../styles/colorManipulator");
  
  var _TableContext = _interopRequireDefault(require("../Table/TableContext"));
  
  var _Tablelvl2Context = _interopRequireDefault(require("../Table/Tablelvl2Context"));
  
  var styles = function styles(theme) {
    return {
      /* Styles applied to the root element. */
      root: (0, _extends2.default)({}, theme.typography.body2, {
        display: 'table-cell',
        verticalAlign: 'inherit',
        // Workaround for a rendering bug with spanned columns in Chrome 62.0.
        // Removes the alpha (sets it to 1), and lightens or darkens the theme color.
        borderBottom: "1px solid\n    ".concat(theme.palette.type === 'light' ? (0, _colorManipulator.lighten)((0, _colorManipulator.fade)(theme.palette.divider, 1), 0.88) : (0, _colorManipulator.darken)((0, _colorManipulator.fade)(theme.palette.divider, 1), 0.68)),
        textAlign: 'left',
        padding: '14px 40px 14px 16px',
        '&:last-child': {
          paddingRight: 16
        }
      }),
  
      /* Styles applied to the root element if `variant="head"` or `context.table.head`. */
      head: {
        color: theme.palette.text.secondary,
        fontSize: theme.typography.pxToRem(12),
        lineHeight: theme.typography.pxToRem(21),
        fontWeight: theme.typography.fontWeightMedium
      },
  
      /* Styles applied to the root element if `variant="body"` or `context.table.body`. */
      body: {
        color: theme.palette.text.primary,
        fontWeight: theme.typography.fontWeightRegular
      },
  
      /* Styles applied to the root element if `variant="footer"` or `context.table.footer`. */
      footer: {
        color: theme.palette.text.secondary,
        lineHeight: theme.typography.pxToRem(21),
        fontSize: theme.typography.pxToRem(12)
      },
  
      /* Styles applied to the root element if `padding="dense"`. */
      sizeSmall: {
        padding: '6px 24px 6px 16px',
        '&:last-child': {
          paddingRight: 16
        },
        '&$paddingCheckbox': {
          width: 24,
          // prevent the checkbox column from growing
          padding: '0px 12px 0 16px',
          '&:last-child': {
            paddingLeft: 12,
            paddingRight: 16
          },
          '& > *': {
            padding: 0
          }
        }
      },
  
      /* Styles applied to the root element if `padding="checkbox"`. */
      paddingCheckbox: {
        width: 48,
        // prevent the checkbox column from growing
        padding: '0 0 0 4px',
        '&:last-child': {
          paddingLeft: 0,
          paddingRight: 4
        }
      },
  
      /* Styles applied to the root element if `padding="none"`. */
      paddingNone: {
        padding: 0,
        '&:last-child': {
          padding: 0
        }
      },
  
      /* Styles applied to the root element if `align="left"`. */
      alignLeft: {
        textAlign: 'left'
      },
  
      /* Styles applied to the root element if `align="center"`. */
      alignCenter: {
        textAlign: 'center'
      },
  
      /* Styles applied to the root element if `align="right"`. */
      alignRight: {
        textAlign: 'right',
        flexDirection: 'row-reverse'
      },
  
      /* Styles applied to the root element if `align="justify"`. */
      alignJustify: {
        textAlign: 'justify'
      }
    };
  };
  
  exports.styles = styles;
  
  var TableCell = _react.default.forwardRef(function TableCell(props, ref) {
    var _props$align = props.align,
        align = _props$align === void 0 ? 'inherit' : _props$align,
        classes = props.classes,
        className = props.className,
        component = props.component,
        paddingProp = props.padding,
        scopeProp = props.scope,
        sizeProp = props.size,
        sortDirection = props.sortDirection,
        variant = props.variant,
        other = (0, _objectWithoutProperties2.default)(props, ["align", "classes", "className", "component", "padding", "scope", "size", "sortDirection", "variant"]);
  
    var table = _react.default.useContext(_TableContext.default);
  
    var tablelvl2 = _react.default.useContext(_Tablelvl2Context.default);
  
    var Component;
  
    if (component) {
      Component = component;
    } else {
      Component = tablelvl2 && tablelvl2.variant === 'head' ? 'th' : 'td';
    }
  
    var scope = scopeProp;
  
    if (!scope && tablelvl2 && tablelvl2.variant === 'head') {
      scope = 'col';
    }
  
    var padding = paddingProp || (table && table.padding ? table.padding : 'default');
    var size = sizeProp || (table && table.size ? table.size : 'medium');
    var ariaSort = null;
  
    if (sortDirection) {
      ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending';
    }
  
    return _react.default.createElement(Component, (0, _extends2.default)({
      ref: ref,
      className: (0, _clsx.default)(classes.root, (variant ? variant === 'head' : tablelvl2 && tablelvl2.variant === 'head') && classes.head, (variant ? variant === 'body' : tablelvl2 && tablelvl2.variant === 'body') && classes.body, (variant ? variant === 'footer' : tablelvl2 && tablelvl2.variant === 'footer') && classes.footer, align !== 'inherit' && classes["align".concat((0, _helpers.capitalize)(align))], padding !== 'default' && classes["padding".concat((0, _helpers.capitalize)(padding))], size !== 'medium' && classes["size".concat((0, _helpers.capitalize)(size))], className),
      "aria-sort": ariaSort,
      scope: scope
    }, other));
  });
  
  process.env.NODE_ENV !== "production" ? TableCell.propTypes = {
    /**
     * Set the text-align on the table cell content.
     *
     * Monetary or generally number fields **should be right aligned** as that allows
     * you to add them up quickly in your head without having to worry about decimals.
     */
    align: _propTypes.default.oneOf(['inherit', 'left', 'center', 'right', 'justify']),
  
    /**
     * The table cell contents.
     */
    children: _propTypes.default.node,
  
    /**
     * Override or extend the styles applied to the component.
     * See [CSS API](#css) below for more details.
     */
    classes: _propTypes.default.object.isRequired,
  
    /**
     * @ignore
     */
    className: _propTypes.default.string,
  
    /**
     * The component used for the root node.
     * Either a string to use a DOM element or a component.
     */
    component: _propTypes.default.elementType,
  
    /**
     * Sets the padding applied to the cell.
     * By default, the Table parent component set the value.
     */
    padding: _propTypes.default.oneOf(['default', 'checkbox', 'none']),
  
    /**
     * Set scope attribute.
     */
    scope: _propTypes.default.string,
  
    /**
     * Specify the size of the cell.
     * By default, the Table parent component set the value (`normal`).
     */
    size: _propTypes.default.oneOf(['small', 'medium']),
  
    /**
     * Set aria-sort direction.
     */
    sortDirection: _propTypes.default.oneOf(['asc', 'desc', false]),
  
    /**
     * Specify the cell type.
     * By default, the TableHead, TableBody or TableFooter parent component set the value.
     */
    variant: _propTypes.default.oneOf(['head', 'body', 'footer'])
  } : void 0;
  
  var _default = (0, _withStyles.default)(styles, {
    name: 'MuiTableCell'
  })(TableCell);
  
  exports.default = _default;