'use client'; import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties"; import _defineProperty from "@babel/runtime/helpers/esm/defineProperty"; import _extends from "@babel/runtime/helpers/esm/extends"; import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import composeClasses from '@mui/utils/composeClasses'; import { darken, alpha, lighten } from '@mui/system/colorManipulator'; import capitalize from '../utils/capitalize'; import TableContext from '../Table/TableContext'; import Tablelvl2Context from '../Table/Tablelvl2Context'; import useThemeProps from '../styles/useThemeProps'; import styled from '../styles/styled'; import tableCellClasses, { getTableCellUtilityClass } from './tableCellClasses'; import { jsx as _jsx } from "react/jsx-runtime"; var useUtilityClasses = function useUtilityClasses(ownerState) { var classes = ownerState.classes, variant = ownerState.variant, align = ownerState.align, padding = ownerState.padding, size = ownerState.size, stickyHeader = ownerState.stickyHeader; var slots = { root: ['root', variant, stickyHeader && 'stickyHeader', align !== 'inherit' && "align".concat(capitalize(align)), padding !== 'normal' && "padding".concat(capitalize(padding)), "size".concat(capitalize(size))] }; return composeClasses(slots, getTableCellUtilityClass, classes); }; var TableCellRoot = styled('td', { name: 'MuiTableCell', slot: 'Root', overridesResolver: function overridesResolver(props, styles) { var ownerState = props.ownerState; return [styles.root, styles[ownerState.variant], styles["size".concat(capitalize(ownerState.size))], ownerState.padding !== 'normal' && styles["padding".concat(capitalize(ownerState.padding))], ownerState.align !== 'inherit' && styles["align".concat(capitalize(ownerState.align))], ownerState.stickyHeader && styles.stickyHeader]; } })(function (_ref) { var theme = _ref.theme, ownerState = _ref.ownerState; return _extends({}, 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: theme.vars ? "1px solid ".concat(theme.vars.palette.TableCell.border) : "1px solid\n ".concat(theme.palette.mode === 'light' ? lighten(alpha(theme.palette.divider, 1), 0.88) : darken(alpha(theme.palette.divider, 1), 0.68)), textAlign: 'left', padding: 16 }, ownerState.variant === 'head' && { color: (theme.vars || theme).palette.text.primary, lineHeight: theme.typography.pxToRem(24), fontWeight: theme.typography.fontWeightMedium }, ownerState.variant === 'body' && { color: (theme.vars || theme).palette.text.primary }, ownerState.variant === 'footer' && { color: (theme.vars || theme).palette.text.secondary, lineHeight: theme.typography.pxToRem(21), fontSize: theme.typography.pxToRem(12) }, ownerState.size === 'small' && _defineProperty({ padding: '6px 16px' }, "&.".concat(tableCellClasses.paddingCheckbox), { width: 24, // prevent the checkbox column from growing padding: '0 12px 0 16px', '& > *': { padding: 0 } }), ownerState.padding === 'checkbox' && { width: 48, // prevent the checkbox column from growing padding: '0 0 0 4px' }, ownerState.padding === 'none' && { padding: 0 }, ownerState.align === 'left' && { textAlign: 'left' }, ownerState.align === 'center' && { textAlign: 'center' }, ownerState.align === 'right' && { textAlign: 'right', flexDirection: 'row-reverse' }, ownerState.align === 'justify' && { textAlign: 'justify' }, ownerState.stickyHeader && { position: 'sticky', top: 0, zIndex: 2, backgroundColor: (theme.vars || theme).palette.background.default }); }); /** * The component renders a `` element when the parent context is a header * or otherwise a `` element. */ var TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref) { var props = useThemeProps({ props: inProps, name: 'MuiTableCell' }); var _props$align = props.align, align = _props$align === void 0 ? 'inherit' : _props$align, className = props.className, componentProp = props.component, paddingProp = props.padding, scopeProp = props.scope, sizeProp = props.size, sortDirection = props.sortDirection, variantProp = props.variant, other = _objectWithoutProperties(props, ["align", "className", "component", "padding", "scope", "size", "sortDirection", "variant"]); var table = React.useContext(TableContext); var tablelvl2 = React.useContext(Tablelvl2Context); var isHeadCell = tablelvl2 && tablelvl2.variant === 'head'; var component; if (componentProp) { component = componentProp; } else { component = isHeadCell ? 'th' : 'td'; } var scope = scopeProp; // scope is not a valid attribute for elements. // source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element if (component === 'td') { scope = undefined; } else if (!scope && isHeadCell) { scope = 'col'; } var variant = variantProp || tablelvl2 && tablelvl2.variant; var ownerState = _extends({}, props, { align: align, component: component, padding: paddingProp || (table && table.padding ? table.padding : 'normal'), size: sizeProp || (table && table.size ? table.size : 'medium'), sortDirection: sortDirection, stickyHeader: variant === 'head' && table && table.stickyHeader, variant: variant }); var classes = useUtilityClasses(ownerState); var ariaSort = null; if (sortDirection) { ariaSort = sortDirection === 'asc' ? 'ascending' : 'descending'; } return /*#__PURE__*/_jsx(TableCellRoot, _extends({ as: component, ref: ref, className: clsx(classes.root, className), "aria-sort": ariaSort, scope: scope, ownerState: ownerState }, other)); }); process.env.NODE_ENV !== "production" ? TableCell.propTypes /* remove-proptypes */ = { // ┌────────────────────────────── Warning ──────────────────────────────┐ // │ These PropTypes are generated from the TypeScript type definitions. │ // │ To update them, edit the d.ts file and run `pnpm 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. * @default 'inherit' */ align: PropTypes.oneOf(['center', 'inherit', 'justify', 'left', 'right']), /** * The content of the component. */ children: PropTypes.node, /** * Override or extend the styles applied to the component. */ classes: PropTypes.object, /** * @ignore */ className: PropTypes.string, /** * The component used for the root node. * Either a string to use a HTML element or a component. */ component: PropTypes.elementType, /** * Sets the padding applied to the cell. * The prop defaults to the value (`'default'`) inherited from the parent Table component. */ padding: PropTypes.oneOf(['checkbox', 'none', 'normal']), /** * Set scope attribute. */ scope: PropTypes.string, /** * Specify the size of the cell. * The prop defaults to the value (`'medium'`) inherited from the parent Table component. */ size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.string]), /** * Set aria-sort direction. */ sortDirection: PropTypes.oneOf(['asc', 'desc', false]), /** * The system prop that allows defining system overrides as well as additional CSS styles. */ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]), /** * Specify the cell type. * The prop defaults to the value inherited from the parent TableHead, TableBody, or TableFooter components. */ variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['body', 'footer', 'head']), PropTypes.string]) } : void 0; export default TableCell;