@trackunit/react-table-base-components 0.0.184 → 0.0.186
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/index.cjs.js +15 -15
- package/index.esm.js +15 -15
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -19,7 +19,7 @@ const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
|
|
|
19
19
|
* @returns {JSX.Element} CheckboxCell component
|
|
20
20
|
*/
|
|
21
21
|
const CheckboxCell = ({ checked, className, dataTestId }) => {
|
|
22
|
-
return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.Checkbox, {
|
|
22
|
+
return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
|
|
23
23
|
};
|
|
24
24
|
|
|
25
25
|
const cvaDateTimeCell = cssClassVarianceUtilities.cvaMerge([""]);
|
|
@@ -37,7 +37,7 @@ const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, cl
|
|
|
37
37
|
return null;
|
|
38
38
|
}
|
|
39
39
|
const formattedDate = dateAndTimeUtils.formatDateUtil(date, format, timeZone, locale);
|
|
40
|
-
return (jsxRuntime.jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("p", { className: cvaDateTime(), children: formattedDate }), withTimeSince ? jsxRuntime.jsx(TimeSince, { date: date,
|
|
40
|
+
return (jsxRuntime.jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("p", { className: cvaDateTime(), children: formattedDate }), withTimeSince ? jsxRuntime.jsx(TimeSince, { date: date, locale: locale, timeZone: timeZone }) : null] }));
|
|
41
41
|
};
|
|
42
42
|
const TimeSince = ({ date, timeZone, locale }) => {
|
|
43
43
|
try {
|
|
@@ -84,7 +84,7 @@ function __rest(s, e) {
|
|
|
84
84
|
*/
|
|
85
85
|
const ImageCell = (_a) => {
|
|
86
86
|
var { imageUrl, alt = "", width = 100, height = 100, dataTestId } = _a, rest = __rest(_a, ["imageUrl", "alt", "width", "height", "dataTestId"]);
|
|
87
|
-
return jsxRuntime.jsx("img", Object.assign({
|
|
87
|
+
return jsxRuntime.jsx("img", Object.assign({ alt: alt, "data-testid": dataTestId, height: height, src: imageUrl, width: width }, rest));
|
|
88
88
|
};
|
|
89
89
|
|
|
90
90
|
/**
|
|
@@ -128,7 +128,7 @@ const MultiValueTextCell = ({ content, count, icon, iconTooltip, dataTestId, cla
|
|
|
128
128
|
const updateTooltipVisibility = (element) => {
|
|
129
129
|
setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
|
|
130
130
|
};
|
|
131
|
-
return count && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !iconTooltip, label: iconTooltip !== null && iconTooltip !== void 0 ? iconTooltip : "", placement: "bottom",
|
|
131
|
+
return count && count > 0 ? (jsxRuntime.jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Tooltip, { className: "inline", disabled: !iconTooltip, label: iconTooltip !== null && iconTooltip !== void 0 ? iconTooltip : "", placement: "bottom", children: icon }), jsxRuntime.jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsxRuntime.jsx(reactComponents.Tooltip, { className: "inline", disabled: !isTooltipVisible, label: content !== null && content !== void 0 ? content : "", placement: "bottom", children: content !== null && content !== void 0 ? content : "" }) }), jsxRuntime.jsx("span", { className: "text-slate-500", children: count > 1 ? `+${count - 1}` : "" })] })) : null;
|
|
132
132
|
};
|
|
133
133
|
|
|
134
134
|
const cvaNumberCell = cssClassVarianceUtilities.cvaMerge([
|
|
@@ -147,7 +147,7 @@ const cvaNumberCell = cssClassVarianceUtilities.cvaMerge([
|
|
|
147
147
|
* @returns {JSX.Element} A React JSX element representing the NumberCell component.
|
|
148
148
|
*/
|
|
149
149
|
const NumberCell = ({ value = "", unit, className, dataTestId }) => {
|
|
150
|
-
return (jsxRuntime.jsxs("div", {
|
|
150
|
+
return (jsxRuntime.jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("span", { children: value }), value && unit ? jsxRuntime.jsx("span", { children: unit }) : null] }));
|
|
151
151
|
};
|
|
152
152
|
|
|
153
153
|
/**
|
|
@@ -169,7 +169,7 @@ const ResizeHandle = (_a) => {
|
|
|
169
169
|
document.body.classList.add(resizeCursorClass);
|
|
170
170
|
onMouseDownHandler === null || onMouseDownHandler === void 0 ? void 0 : onMouseDownHandler(event);
|
|
171
171
|
};
|
|
172
|
-
return (jsxRuntime.jsx("div", Object.assign({
|
|
172
|
+
return (jsxRuntime.jsx("div", Object.assign({ className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: event => onMouseDown(event), role: "separator" }, rest)));
|
|
173
173
|
};
|
|
174
174
|
const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge(["absolute", "cursor-col-resize", "right-0", "top-0", "h-full", "w-1", "select-none", "hover:bg-primary-400"], {
|
|
175
175
|
variants: {
|
|
@@ -195,7 +195,7 @@ const cvaResizeHandel = cssClassVarianceUtilities.cvaMerge(["absolute", "cursor-
|
|
|
195
195
|
*/
|
|
196
196
|
const SortIndicator = (_a) => {
|
|
197
197
|
var { sortingState = false, dataTestId, className } = _a, rest = __rest(_a, ["sortingState", "dataTestId", "className"]);
|
|
198
|
-
return (jsxRuntime.jsx("span", Object.assign({
|
|
198
|
+
return (jsxRuntime.jsx("span", Object.assign({ className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator" }, rest)));
|
|
199
199
|
};
|
|
200
200
|
const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
|
|
201
201
|
"relative",
|
|
@@ -241,7 +241,7 @@ const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
|
|
|
241
241
|
*/
|
|
242
242
|
const TableRoot = (_a) => {
|
|
243
243
|
var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
|
|
244
|
-
return (jsxRuntime.jsx("table", Object.assign({
|
|
244
|
+
return (jsxRuntime.jsx("table", Object.assign({ className: cvaTableRoot({ className }), "data-testid": dataTestId }, rest, { children: children })));
|
|
245
245
|
};
|
|
246
246
|
const cvaTableRoot = cssClassVarianceUtilities.cvaMerge(["border-spacing-0", "min-w-full", "grid-rows-min-fr", "grid"]);
|
|
247
247
|
|
|
@@ -271,7 +271,7 @@ const TagsCell = ({ className, tags, dataTestId }) => {
|
|
|
271
271
|
*/
|
|
272
272
|
const Tbody = (_a) => {
|
|
273
273
|
var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
|
|
274
|
-
return (jsxRuntime.jsx("tbody", Object.assign({ "data-testid": dataTestId
|
|
274
|
+
return (jsxRuntime.jsx("tbody", Object.assign({ className: className, "data-testid": dataTestId }, rest, { children: children })));
|
|
275
275
|
};
|
|
276
276
|
|
|
277
277
|
/**
|
|
@@ -286,7 +286,7 @@ const Tbody = (_a) => {
|
|
|
286
286
|
*/
|
|
287
287
|
const Td = (_a) => {
|
|
288
288
|
var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
|
|
289
|
-
return (jsxRuntime.jsx("td", Object.assign({
|
|
289
|
+
return (jsxRuntime.jsx("td", Object.assign({ className: cvaTd({ className }), "data-testid": dataTestId }, rest, { children: children })));
|
|
290
290
|
};
|
|
291
291
|
const cvaTd = cssClassVarianceUtilities.cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
|
|
292
292
|
|
|
@@ -305,7 +305,7 @@ const TextCell = ({ content = "", className, dataTestId }) => {
|
|
|
305
305
|
const updateTooltipVisibility = (element) => {
|
|
306
306
|
setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
|
|
307
307
|
};
|
|
308
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTooltipVisible, label: content,
|
|
308
|
+
return (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaTextCellTooltip(), disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsxRuntime.jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: elementRef => updateTooltipVisibility(elementRef), children: content }) }));
|
|
309
309
|
};
|
|
310
310
|
|
|
311
311
|
/**
|
|
@@ -320,7 +320,7 @@ const TextCell = ({ content = "", className, dataTestId }) => {
|
|
|
320
320
|
*/
|
|
321
321
|
const Tfoot = (_a) => {
|
|
322
322
|
var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
|
|
323
|
-
return (jsxRuntime.jsx("tfoot", Object.assign({ "data-testid": dataTestId
|
|
323
|
+
return (jsxRuntime.jsx("tfoot", Object.assign({ className: className, "data-testid": dataTestId }, rest, { children: children })));
|
|
324
324
|
};
|
|
325
325
|
|
|
326
326
|
/**
|
|
@@ -341,7 +341,7 @@ const Th = (_a) => {
|
|
|
341
341
|
react.useEffect(() => {
|
|
342
342
|
setShowTooltipVisible(thWidth > childrenWidth);
|
|
343
343
|
}, [thWidth, childrenWidth, tooltipLabel]);
|
|
344
|
-
return (jsxRuntime.jsx("th", Object.assign({ ref: elementRef => setThWidth(elementRef ? elementRef.clientWidth : 0)
|
|
344
|
+
return (jsxRuntime.jsx("th", Object.assign({ className: cvaTh({ className }), "data-testid": dataTestId, ref: elementRef => setThWidth(elementRef ? elementRef.clientWidth : 0) }, rest, { children: tooltipLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { className: cvaTooltip(), disabled: showToolTip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children }) })) : (jsxRuntime.jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children })) })));
|
|
345
345
|
};
|
|
346
346
|
const cvaTh = cssClassVarianceUtilities.cvaMerge([
|
|
347
347
|
"hover:bg-neutral-200",
|
|
@@ -366,7 +366,7 @@ const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge(["max-w-full", "
|
|
|
366
366
|
*/
|
|
367
367
|
const Thead = (_a) => {
|
|
368
368
|
var { dataTestId, className, children, sticky = true } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "sticky"]);
|
|
369
|
-
return (jsxRuntime.jsx("thead", Object.assign({
|
|
369
|
+
return (jsxRuntime.jsx("thead", Object.assign({ className: cvaThead({ sticky, className }), "data-testid": dataTestId }, rest, { children: children })));
|
|
370
370
|
};
|
|
371
371
|
const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-left"], {
|
|
372
372
|
variants: {
|
|
@@ -392,7 +392,7 @@ const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-lef
|
|
|
392
392
|
*/
|
|
393
393
|
const Tr = (_a) => {
|
|
394
394
|
var { dataTestId, className, children, layout = "default" } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "layout"]);
|
|
395
|
-
return (jsxRuntime.jsx("tr", Object.assign({
|
|
395
|
+
return (jsxRuntime.jsx("tr", Object.assign({ className: cvaTr({ layout, className }), "data-testid": dataTestId, role: "row" }, rest, { children: children })));
|
|
396
396
|
};
|
|
397
397
|
const cvaTr = cssClassVarianceUtilities.cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
|
|
398
398
|
variants: {
|
package/index.esm.js
CHANGED
|
@@ -15,7 +15,7 @@ const cvaCheckboxCell = cvaMerge([""]);
|
|
|
15
15
|
* @returns {JSX.Element} CheckboxCell component
|
|
16
16
|
*/
|
|
17
17
|
const CheckboxCell = ({ checked, className, dataTestId }) => {
|
|
18
|
-
return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsx(Checkbox, {
|
|
18
|
+
return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
|
|
19
19
|
};
|
|
20
20
|
|
|
21
21
|
const cvaDateTimeCell = cvaMerge([""]);
|
|
@@ -33,7 +33,7 @@ const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, cl
|
|
|
33
33
|
return null;
|
|
34
34
|
}
|
|
35
35
|
const formattedDate = formatDateUtil(date, format, timeZone, locale);
|
|
36
|
-
return (jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsx("p", { className: cvaDateTime(), children: formattedDate }), withTimeSince ? jsx(TimeSince, { date: date,
|
|
36
|
+
return (jsxs("div", { className: cvaDateTimeCell({ className }), "data-testid": dataTestId, children: [jsx("p", { className: cvaDateTime(), children: formattedDate }), withTimeSince ? jsx(TimeSince, { date: date, locale: locale, timeZone: timeZone }) : null] }));
|
|
37
37
|
};
|
|
38
38
|
const TimeSince = ({ date, timeZone, locale }) => {
|
|
39
39
|
try {
|
|
@@ -80,7 +80,7 @@ function __rest(s, e) {
|
|
|
80
80
|
*/
|
|
81
81
|
const ImageCell = (_a) => {
|
|
82
82
|
var { imageUrl, alt = "", width = 100, height = 100, dataTestId } = _a, rest = __rest(_a, ["imageUrl", "alt", "width", "height", "dataTestId"]);
|
|
83
|
-
return jsx("img", Object.assign({
|
|
83
|
+
return jsx("img", Object.assign({ alt: alt, "data-testid": dataTestId, height: height, src: imageUrl, width: width }, rest));
|
|
84
84
|
};
|
|
85
85
|
|
|
86
86
|
/**
|
|
@@ -124,7 +124,7 @@ const MultiValueTextCell = ({ content, count, icon, iconTooltip, dataTestId, cla
|
|
|
124
124
|
const updateTooltipVisibility = (element) => {
|
|
125
125
|
setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
|
|
126
126
|
};
|
|
127
|
-
return count && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, children: [jsx(Tooltip, { disabled: !iconTooltip, label: iconTooltip !== null && iconTooltip !== void 0 ? iconTooltip : "", placement: "bottom",
|
|
127
|
+
return count && count > 0 ? (jsxs("div", { className: cvaMultiValueTextCellWrapper({ className }), "data-testid": dataTestId, children: [jsx(Tooltip, { className: "inline", disabled: !iconTooltip, label: iconTooltip !== null && iconTooltip !== void 0 ? iconTooltip : "", placement: "bottom", children: icon }), jsx("span", { className: cvaMultiValueTextCellTooltip(), ref: elementRef => updateTooltipVisibility(elementRef), children: jsx(Tooltip, { className: "inline", disabled: !isTooltipVisible, label: content !== null && content !== void 0 ? content : "", placement: "bottom", children: content !== null && content !== void 0 ? content : "" }) }), jsx("span", { className: "text-slate-500", children: count > 1 ? `+${count - 1}` : "" })] })) : null;
|
|
128
128
|
};
|
|
129
129
|
|
|
130
130
|
const cvaNumberCell = cvaMerge([
|
|
@@ -143,7 +143,7 @@ const cvaNumberCell = cvaMerge([
|
|
|
143
143
|
* @returns {JSX.Element} A React JSX element representing the NumberCell component.
|
|
144
144
|
*/
|
|
145
145
|
const NumberCell = ({ value = "", unit, className, dataTestId }) => {
|
|
146
|
-
return (jsxs("div", {
|
|
146
|
+
return (jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, children: [jsx("span", { children: value }), value && unit ? jsx("span", { children: unit }) : null] }));
|
|
147
147
|
};
|
|
148
148
|
|
|
149
149
|
/**
|
|
@@ -165,7 +165,7 @@ const ResizeHandle = (_a) => {
|
|
|
165
165
|
document.body.classList.add(resizeCursorClass);
|
|
166
166
|
onMouseDownHandler === null || onMouseDownHandler === void 0 ? void 0 : onMouseDownHandler(event);
|
|
167
167
|
};
|
|
168
|
-
return (jsx("div", Object.assign({
|
|
168
|
+
return (jsx("div", Object.assign({ className: cvaResizeHandel({ isResizing, className }), "data-testid": dataTestId, onMouseDown: event => onMouseDown(event), role: "separator" }, rest)));
|
|
169
169
|
};
|
|
170
170
|
const cvaResizeHandel = cvaMerge(["absolute", "cursor-col-resize", "right-0", "top-0", "h-full", "w-1", "select-none", "hover:bg-primary-400"], {
|
|
171
171
|
variants: {
|
|
@@ -191,7 +191,7 @@ const cvaResizeHandel = cvaMerge(["absolute", "cursor-col-resize", "right-0", "t
|
|
|
191
191
|
*/
|
|
192
192
|
const SortIndicator = (_a) => {
|
|
193
193
|
var { sortingState = false, dataTestId, className } = _a, rest = __rest(_a, ["sortingState", "dataTestId", "className"]);
|
|
194
|
-
return (jsx("span", Object.assign({
|
|
194
|
+
return (jsx("span", Object.assign({ className: cvaSortIndicator({ sortingState, className }), "data-testid": dataTestId, role: "separator" }, rest)));
|
|
195
195
|
};
|
|
196
196
|
const cvaSortIndicator = cvaMerge([
|
|
197
197
|
"relative",
|
|
@@ -237,7 +237,7 @@ const cvaSortIndicator = cvaMerge([
|
|
|
237
237
|
*/
|
|
238
238
|
const TableRoot = (_a) => {
|
|
239
239
|
var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
|
|
240
|
-
return (jsx("table", Object.assign({
|
|
240
|
+
return (jsx("table", Object.assign({ className: cvaTableRoot({ className }), "data-testid": dataTestId }, rest, { children: children })));
|
|
241
241
|
};
|
|
242
242
|
const cvaTableRoot = cvaMerge(["border-spacing-0", "min-w-full", "grid-rows-min-fr", "grid"]);
|
|
243
243
|
|
|
@@ -267,7 +267,7 @@ const TagsCell = ({ className, tags, dataTestId }) => {
|
|
|
267
267
|
*/
|
|
268
268
|
const Tbody = (_a) => {
|
|
269
269
|
var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
|
|
270
|
-
return (jsx("tbody", Object.assign({ "data-testid": dataTestId
|
|
270
|
+
return (jsx("tbody", Object.assign({ className: className, "data-testid": dataTestId }, rest, { children: children })));
|
|
271
271
|
};
|
|
272
272
|
|
|
273
273
|
/**
|
|
@@ -282,7 +282,7 @@ const Tbody = (_a) => {
|
|
|
282
282
|
*/
|
|
283
283
|
const Td = (_a) => {
|
|
284
284
|
var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
|
|
285
|
-
return (jsx("td", Object.assign({
|
|
285
|
+
return (jsx("td", Object.assign({ className: cvaTd({ className }), "data-testid": dataTestId }, rest, { children: children })));
|
|
286
286
|
};
|
|
287
287
|
const cvaTd = cvaMerge(["overflow-hidden", "align-middle", "py-table-spacing", "px-2", "whitespace-nowrap"]);
|
|
288
288
|
|
|
@@ -301,7 +301,7 @@ const TextCell = ({ content = "", className, dataTestId }) => {
|
|
|
301
301
|
const updateTooltipVisibility = (element) => {
|
|
302
302
|
setIsTooltipVisible(element ? element.scrollWidth > element.clientWidth : false);
|
|
303
303
|
};
|
|
304
|
-
return (jsx(Tooltip, { disabled: !isTooltipVisible, label: content,
|
|
304
|
+
return (jsx(Tooltip, { className: cvaTextCellTooltip(), disabled: !isTooltipVisible, label: content, placement: "bottom", children: jsx("span", { className: cvaTextCell({ className }), "data-testid": dataTestId, ref: elementRef => updateTooltipVisibility(elementRef), children: content }) }));
|
|
305
305
|
};
|
|
306
306
|
|
|
307
307
|
/**
|
|
@@ -316,7 +316,7 @@ const TextCell = ({ content = "", className, dataTestId }) => {
|
|
|
316
316
|
*/
|
|
317
317
|
const Tfoot = (_a) => {
|
|
318
318
|
var { dataTestId, className, children } = _a, rest = __rest(_a, ["dataTestId", "className", "children"]);
|
|
319
|
-
return (jsx("tfoot", Object.assign({ "data-testid": dataTestId
|
|
319
|
+
return (jsx("tfoot", Object.assign({ className: className, "data-testid": dataTestId }, rest, { children: children })));
|
|
320
320
|
};
|
|
321
321
|
|
|
322
322
|
/**
|
|
@@ -337,7 +337,7 @@ const Th = (_a) => {
|
|
|
337
337
|
useEffect(() => {
|
|
338
338
|
setShowTooltipVisible(thWidth > childrenWidth);
|
|
339
339
|
}, [thWidth, childrenWidth, tooltipLabel]);
|
|
340
|
-
return (jsx("th", Object.assign({ ref: elementRef => setThWidth(elementRef ? elementRef.clientWidth : 0)
|
|
340
|
+
return (jsx("th", Object.assign({ className: cvaTh({ className }), "data-testid": dataTestId, ref: elementRef => setThWidth(elementRef ? elementRef.clientWidth : 0) }, rest, { children: tooltipLabel ? (jsx(Tooltip, { className: cvaTooltip(), disabled: showToolTip, label: tooltipLabel, placement: "bottom", children: jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children }) })) : (jsx("div", { className: cvaChildrenContainer(), ref: elementRef => setChildrenWidth(elementRef ? elementRef.clientWidth : 0), children: children })) })));
|
|
341
341
|
};
|
|
342
342
|
const cvaTh = cvaMerge([
|
|
343
343
|
"hover:bg-neutral-200",
|
|
@@ -362,7 +362,7 @@ const cvaChildrenContainer = cvaMerge(["max-w-full", "px-3", "py-table-spacing"]
|
|
|
362
362
|
*/
|
|
363
363
|
const Thead = (_a) => {
|
|
364
364
|
var { dataTestId, className, children, sticky = true } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "sticky"]);
|
|
365
|
-
return (jsx("thead", Object.assign({
|
|
365
|
+
return (jsx("thead", Object.assign({ className: cvaThead({ sticky, className }), "data-testid": dataTestId }, rest, { children: children })));
|
|
366
366
|
};
|
|
367
367
|
const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
|
|
368
368
|
variants: {
|
|
@@ -388,7 +388,7 @@ const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
|
|
|
388
388
|
*/
|
|
389
389
|
const Tr = (_a) => {
|
|
390
390
|
var { dataTestId, className, children, layout = "default" } = _a, rest = __rest(_a, ["dataTestId", "className", "children", "layout"]);
|
|
391
|
-
return (jsx("tr", Object.assign({
|
|
391
|
+
return (jsx("tr", Object.assign({ className: cvaTr({ layout, className }), "data-testid": dataTestId, role: "row" }, rest, { children: children })));
|
|
392
392
|
};
|
|
393
393
|
const cvaTr = cvaMerge(["border-b", "border-neutral-300", "w-full", "h-max"], {
|
|
394
394
|
variants: {
|