braid-design-system
Version:
Themeable design system for the SEEK Group
133 lines (132 loc) • 4.69 kB
JavaScript
import { jsx, Fragment } from "react/jsx-runtime";
import assert from "assert";
import { assignInlineVars } from "@vanilla-extract/dynamic";
import { forwardRef, useContext } from "react";
import { resolveResponsiveRangeProps } from "../../utils/resolveResponsiveRangeProps.mjs";
import { DefaultBadgePropsProvider } from "../Badge/defaultBadgeProps.mjs";
import { Box } from "../Box/Box.mjs";
import { Inline } from "../Inline/Inline.mjs";
import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
import { DefaultTextPropsProvider } from "../private/defaultTextProps.mjs";
import { TableHeaderContext, TableRowContext, TableFooterContext, TableContext } from "./TableContext.mjs";
import { maxWidthVar, minWidthVar, softWidthVar, showOnWide, showOnDesktop, showOnTablet, alignY, maxWidth, minWidth, softWidth, nowrap, headCell, cell } from "./Table.css.mjs";
const resolveSoftWidth = (width) => {
if (width === "content") {
return "1%";
}
if (width === "auto") {
return void 0;
}
return width;
};
const Cell = forwardRef(
({
header: isHeaderCell,
children,
hideAbove,
hideBelow,
align = "left",
wrap = false,
width = "auto",
minWidth: minWidth$1,
maxWidth: maxWidth$1,
colspan,
scope,
data,
...restProps
}, ref) => {
const [hideOnMobile, hideOnTablet, hideOnDesktop, hideOnWide] = resolveResponsiveRangeProps({
below: hideBelow,
above: hideAbove
});
const tableFooterContext = useContext(TableFooterContext);
const tableContext = useContext(TableContext);
assert(tableContext, "TableCell cannot be used outside a Table component");
const isFooterCell = tableFooterContext;
const softWidth$1 = resolveSoftWidth(width);
const hasMaxWidth = typeof maxWidth$1 !== "undefined";
return /* @__PURE__ */ jsx(
Box,
{
component: isHeaderCell ? "th" : "td",
scope,
colSpan: colspan,
padding: "small",
textAlign: align,
background: isHeaderCell ? "neutralLight" : void 0,
display: {
mobile: hideOnMobile ? "none" : void 0,
tablet: hideOnTablet ? "none" : void 0,
desktop: hideOnDesktop ? "none" : void 0,
wide: hideOnWide ? "none" : void 0
},
className: {
[cell]: true,
[headCell]: isHeaderCell,
[nowrap]: !wrap,
[softWidth]: softWidth$1,
[minWidth]: typeof minWidth$1 !== "undefined",
[maxWidth]: hasMaxWidth,
[alignY[tableContext.alignY]]: true,
[showOnTablet]: !hideOnTablet && hideOnMobile,
[showOnDesktop]: !hideOnDesktop && (hideOnTablet || hideOnMobile),
[showOnWide]: !hideOnWide && (hideOnDesktop || hideOnTablet || hideOnMobile)
},
style: assignInlineVars({
[softWidthVar]: softWidth$1,
[minWidthVar]: typeof minWidth$1 !== "undefined" ? `${minWidth$1}px` : void 0,
[maxWidthVar]: typeof maxWidth$1 !== "undefined" ? `${maxWidth$1}px` : void 0
}),
ref,
...buildDataAttributes({ data, validateRestProps: restProps }),
children: /* @__PURE__ */ jsx(DefaultBadgePropsProvider, { bleedY: true, children: /* @__PURE__ */ jsx(
DefaultTextPropsProvider,
{
size: "small",
weight: isHeaderCell || isFooterCell ? "strong" : void 0,
maxLines: hasMaxWidth && !wrap ? 1 : void 0,
children: align !== "left" ? /* @__PURE__ */ jsx(Inline, { space: "none", align, children: /* @__PURE__ */ jsx(Fragment, { children }) }) : children
}
) })
}
);
}
);
const TableCell = forwardRef(
(props, ref) => {
const tableHeaderContext = useContext(TableHeaderContext);
const tableRowContext = useContext(TableRowContext);
assert(
!tableHeaderContext,
"TableCell cannot be used inside a TableHeader component. Please use TableHeaderCell instead."
);
assert(
tableRowContext,
"TableCell cannot be used outside a TableRow component"
);
return /* @__PURE__ */ jsx(Cell, { ...props, header: false, scope: void 0, ref });
}
);
const TableHeaderCell = forwardRef(
(props, ref) => {
const tableHeaderContext = useContext(TableHeaderContext);
const tableRowContext = useContext(TableRowContext);
assert(
tableRowContext,
"TableHeaderCell cannot be used outside a TableRow component"
);
return /* @__PURE__ */ jsx(
Cell,
{
...props,
header: true,
scope: tableHeaderContext ? "col" : "row",
ref
}
);
}
);
export {
TableCell,
TableHeaderCell
};