@trackunit/react-table-base-components 1.3.28 → 1.3.32

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 CHANGED
@@ -13,7 +13,7 @@ var sharedUtils = require('@trackunit/shared-utils');
13
13
  * The ButtonCell is used to render buttons in a table cell
14
14
  *
15
15
  * @param {ButtonCellProps} props - The props for the ButtonCell component
16
- * @returns {JSX.Element} ButtonCell component
16
+ * @returns {ReactElement} ButtonCell component
17
17
  */
18
18
  const ButtonCell = ({ dataTestId, children, iconName, iconColor = "primary", variant = "ghost-neutral", ...rest }) => {
19
19
  return (jsxRuntime.jsx(reactComponents.Button, { prefix: iconName ? jsxRuntime.jsx(reactComponents.Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, dataTestId: `button-cell-${dataTestId}`, variant: variant, children: children }));
@@ -26,7 +26,7 @@ const cvaCheckboxCell = cssClassVarianceUtilities.cvaMerge([""]);
26
26
  * The checkbox is not editable.
27
27
  *
28
28
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
29
- * @returns {JSX.Element} CheckboxCell component
29
+ * @returns {ReactElement} CheckboxCell component
30
30
  */
31
31
  const CheckboxCell = ({ checked, className, dataTestId }) => {
32
32
  return (jsxRuntime.jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsxRuntime.jsx(reactFormComponents.Checkbox, { checked: checked, readOnly: true }) }));
@@ -40,7 +40,7 @@ const cvaDateTimeSince$1 = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "
40
40
  * DateTimeCell is used for render a date and or time in a table cell.
41
41
  *
42
42
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
43
- * @returns {JSX.Element} DateTimeCell component
43
+ * @returns {ReactElement} DateTimeCell component
44
44
  */
45
45
  const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, dataTestId, }) => {
46
46
  if (!date) {
@@ -63,7 +63,7 @@ const TimeSince = ({ date, timeZone, locale }) => {
63
63
  * The `<ImageCell>` component is used for displaying images in a table cell.
64
64
  *
65
65
  * @param {ImageCellProps} props - The props for the Image component.
66
- * @returns {JSX.Element} The Image component.
66
+ * @returns {ReactElement} The Image component.
67
67
  */
68
68
  const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, dataTestId, ...rest }) => {
69
69
  return jsxRuntime.jsx("img", { alt: alt, "data-testid": dataTestId, height: height, src: imageUrl, width: width, ...rest });
@@ -73,7 +73,7 @@ const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, dataTestId,
73
73
  * The IndicatorCell is used for render an indicator in a table cell
74
74
  *
75
75
  * @param {IndicatorCellProps} props - The props for the LinkCell component
76
- * @returns {JSX.Element} LinkCell component
76
+ * @returns {ReactElement} LinkCell component
77
77
  */
78
78
  const IndicatorCell = ({ ...rest }) => {
79
79
  return jsxRuntime.jsx(reactComponents.Indicator, { ...rest });
@@ -83,7 +83,7 @@ const IndicatorCell = ({ ...rest }) => {
83
83
  * The LinkCell is used for render a list of tags in a table cell
84
84
  *
85
85
  * @param {LinkCellProps} props - The props for the LinkCell component
86
- * @returns {JSX.Element} LinkCell component
86
+ * @returns {ReactElement} LinkCell component
87
87
  */
88
88
  const LinkCell = ({ link, type, ...rest }) => {
89
89
  const linkPrefix = type === "LINK" ? "" : type === "PHONE" ? "tel:" : "mailto:";
@@ -102,7 +102,7 @@ const cvaSecondaryRowText = cssClassVarianceUtilities.cvaMerge(["overflow-hidden
102
102
  * The MultiRowTableCell component helps to display two rows inside a table cell.
103
103
  *
104
104
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
105
- * @returns {JSX.Element} MultiRowTableCell component
105
+ * @returns {ReactElement} MultiRowTableCell component
106
106
  */
107
107
  const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
108
108
  return (jsxRuntime.jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxRuntime.jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsxRuntime.jsx("div", { className: cvaMainRowText(), children: main }) : main, secondary && typeof secondary === "string" ? (jsxRuntime.jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
@@ -116,7 +116,7 @@ const cvaMultiValueTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["whites
116
116
  * The text content is not editable and will be truncated if the cell is too narrow.
117
117
  *
118
118
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
119
- * @returns {JSX.Element} MultiValueTextCell component
119
+ * @returns {ReactElement} MultiValueTextCell component
120
120
  */
121
121
  const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, dataTestId, className, }) => {
122
122
  const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
@@ -130,7 +130,7 @@ const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, d
130
130
  * The NoticeCell is used for rendering a Notice in a table cell
131
131
  *
132
132
  * @param {NoticeCellProps} props - The props for the NoticeCell component
133
- * @returns {JSX.Element} NoticeCell component
133
+ * @returns {ReactElement} NoticeCell component
134
134
  */
135
135
  const NoticeCell = ({ ...rest }) => {
136
136
  return jsxRuntime.jsx(reactComponents.Notice, { ...rest });
@@ -149,7 +149,7 @@ const cvaNumberCell = cssClassVarianceUtilities.cvaMerge([
149
149
  * The `<NumberCell>` component is used for displaying numbers with units in a table cell.
150
150
  *
151
151
  * @param {NumberCellProps} props - The props for the NumberCell component.
152
- * @returns {JSX.Element} A React JSX element representing the NumberCell component.
152
+ * @returns {ReactElement} A React JSX element representing the NumberCell component.
153
153
  */
154
154
  const NumberCell = ({ value = "", unit, className, dataTestId }) => {
155
155
  return (jsxRuntime.jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx("span", { children: value }), value && unit ? jsxRuntime.jsx("span", { children: unit }) : null] }));
@@ -163,7 +163,7 @@ const cvaDateTimeSince = cssClassVarianceUtilities.cvaMerge(["slashed-zero", "te
163
163
  * PlainDateCell is used for render a date and or time in a table cell.
164
164
  *
165
165
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
166
- * @returns {JSX.Element} PlainDateCell component
166
+ * @returns {ReactElement} PlainDateCell component
167
167
  */
168
168
  const PlainDateCell = ({ locale, date, withDaysSince = true, className, dataTestId }) => {
169
169
  if (!date) {
@@ -267,7 +267,7 @@ const cvaSortIndicator = cssClassVarianceUtilities.cvaMerge([
267
267
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
268
268
  *
269
269
  * @param {TableRootProps} props - The props for the TableRoot component
270
- * @returns {JSX.Element} TableRoot component
270
+ * @returns {ReactElement} TableRoot component
271
271
  */
272
272
  const TableRoot = ({ dataTestId, className, children, ...rest }) => {
273
273
  return (jsxRuntime.jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
@@ -280,7 +280,7 @@ const cvaTagsCell = cssClassVarianceUtilities.cvaMerge(["flex", "gap-2"]);
280
280
  * The TagsCell is used for render a list of tags in a table cell
281
281
  *
282
282
  * @param {TagsCellProps} props - The props for the TagsCell component
283
- * @returns {JSX.Element} TagsCell component
283
+ * @returns {ReactElement} TagsCell component
284
284
  */
285
285
  const TagsCell = ({ className, tags, dataTestId }) => {
286
286
  return (jsxRuntime.jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, children: tags.map((tag, index) => (jsxRuntime.jsx(reactComponents.Tag, { color: "primary",
@@ -296,7 +296,7 @@ const TagsCell = ({ className, tags, dataTestId }) => {
296
296
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
297
297
  *
298
298
  * @param {TbodyProps} props - The props for the Tbody component
299
- * @returns {JSX.Element} Tbody component
299
+ * @returns {ReactElement} Tbody component
300
300
  */
301
301
  const Tbody = ({ dataTestId, className, children, ...rest }) => {
302
302
  return (jsxRuntime.jsx("tbody", { className: className, "data-testid": dataTestId, ...rest, children: children }));
@@ -310,7 +310,7 @@ const Tbody = ({ dataTestId, className, children, ...rest }) => {
310
310
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
311
311
  *
312
312
  * @param {TdProps} props - The props for the Td component
313
- * @returns {JSX.Element} Td component
313
+ * @returns {ReactElement} Td component
314
314
  */
315
315
  const Td = ({ dataTestId, className, children, ...rest }) => {
316
316
  return (jsxRuntime.jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: children }));
@@ -325,7 +325,7 @@ const cvaTextCellTooltip = cssClassVarianceUtilities.cvaMerge(["grid"]);
325
325
  * The text is not editable and will be truncated if the cell is too narrow.
326
326
  *
327
327
  * @param {TextCellProps} props - The props for the TextCell component
328
- * @returns {JSX.Element} TextCell component
328
+ * @returns {ReactElement} TextCell component
329
329
  */
330
330
  const TextCell = ({ content = "", className, dataTestId }) => {
331
331
  const [isTooltipVisible, setIsTooltipVisible] = react.useState(false);
@@ -343,7 +343,7 @@ const TextCell = ({ content = "", className, dataTestId }) => {
343
343
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
344
344
  *
345
345
  * @param {TfootProps} props - The props for the Tfoot component
346
- * @returns {JSX.Element} Tfoot component
346
+ * @returns {ReactElement} Tfoot component
347
347
  */
348
348
  const Tfoot = ({ dataTestId, className, children, ...rest }) => {
349
349
  return (jsxRuntime.jsx("tfoot", { className: className, "data-testid": dataTestId, ...rest, children: children }));
@@ -357,7 +357,7 @@ const Tfoot = ({ dataTestId, className, children, ...rest }) => {
357
357
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
358
358
  *
359
359
  * @param {ThProps} props - The props for the Th component
360
- * @returns {JSX.Element} Th component
360
+ * @returns {ReactElement} Th component
361
361
  */
362
362
  const Th = ({ dataTestId, className, children, tooltipLabel, ...rest }) => {
363
363
  const [showToolTip, setShowTooltipVisible] = react.useState(false);
@@ -387,7 +387,7 @@ const cvaChildrenContainer = cssClassVarianceUtilities.cvaMerge(["max-w-full", "
387
387
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
388
388
  *
389
389
  * @param {TheadProps} props - The props for the Thead component
390
- * @returns {JSX.Element} Thead component
390
+ * @returns {ReactElement} Thead component
391
391
  */
392
392
  const Thead = ({ dataTestId, className, children, sticky = true, ...rest }) => {
393
393
  return (jsxRuntime.jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ...rest, children: children }));
@@ -412,7 +412,7 @@ const cvaThead = cssClassVarianceUtilities.cvaMerge(["bg-neutral-100", "text-lef
412
412
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
413
413
  *
414
414
  * @param {TrProps} props - The props for the Tr component
415
- * @returns {JSX.Element} Tr component
415
+ * @returns {ReactElement} Tr component
416
416
  */
417
417
  const Tr = ({ dataTestId, className, children, layout = "default", ...rest }) => {
418
418
  return (jsxRuntime.jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, role: "row", ...rest, children: children }));
package/index.esm.js CHANGED
@@ -11,7 +11,7 @@ import { DateTimeFormat } from '@trackunit/shared-utils';
11
11
  * The ButtonCell is used to render buttons in a table cell
12
12
  *
13
13
  * @param {ButtonCellProps} props - The props for the ButtonCell component
14
- * @returns {JSX.Element} ButtonCell component
14
+ * @returns {ReactElement} ButtonCell component
15
15
  */
16
16
  const ButtonCell = ({ dataTestId, children, iconName, iconColor = "primary", variant = "ghost-neutral", ...rest }) => {
17
17
  return (jsx(Button, { prefix: iconName ? jsx(Icon, { color: iconColor, name: iconName, size: "small", type: "solid" }) : null, ...rest, dataTestId: `button-cell-${dataTestId}`, variant: variant, children: children }));
@@ -24,7 +24,7 @@ const cvaCheckboxCell = cvaMerge([""]);
24
24
  * The checkbox is not editable.
25
25
  *
26
26
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
27
- * @returns {JSX.Element} CheckboxCell component
27
+ * @returns {ReactElement} CheckboxCell component
28
28
  */
29
29
  const CheckboxCell = ({ checked, className, dataTestId }) => {
30
30
  return (jsx("div", { className: cvaCheckboxCell({ className }), "data-testid": dataTestId, children: jsx(Checkbox, { checked: checked, readOnly: true }) }));
@@ -38,7 +38,7 @@ const cvaDateTimeSince$1 = cvaMerge(["slashed-zero", "text-neutral-500", "text-s
38
38
  * DateTimeCell is used for render a date and or time in a table cell.
39
39
  *
40
40
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
41
- * @returns {JSX.Element} DateTimeCell component
41
+ * @returns {ReactElement} DateTimeCell component
42
42
  */
43
43
  const DateTimeCell = ({ format, timeZone, locale, date, withTimeSince = true, className, dataTestId, }) => {
44
44
  if (!date) {
@@ -61,7 +61,7 @@ const TimeSince = ({ date, timeZone, locale }) => {
61
61
  * The `<ImageCell>` component is used for displaying images in a table cell.
62
62
  *
63
63
  * @param {ImageCellProps} props - The props for the Image component.
64
- * @returns {JSX.Element} The Image component.
64
+ * @returns {ReactElement} The Image component.
65
65
  */
66
66
  const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, dataTestId, ...rest }) => {
67
67
  return jsx("img", { alt: alt, "data-testid": dataTestId, height: height, src: imageUrl, width: width, ...rest });
@@ -71,7 +71,7 @@ const ImageCell = ({ imageUrl, alt = "", width = 100, height = 100, dataTestId,
71
71
  * The IndicatorCell is used for render an indicator in a table cell
72
72
  *
73
73
  * @param {IndicatorCellProps} props - The props for the LinkCell component
74
- * @returns {JSX.Element} LinkCell component
74
+ * @returns {ReactElement} LinkCell component
75
75
  */
76
76
  const IndicatorCell = ({ ...rest }) => {
77
77
  return jsx(Indicator, { ...rest });
@@ -81,7 +81,7 @@ const IndicatorCell = ({ ...rest }) => {
81
81
  * The LinkCell is used for render a list of tags in a table cell
82
82
  *
83
83
  * @param {LinkCellProps} props - The props for the LinkCell component
84
- * @returns {JSX.Element} LinkCell component
84
+ * @returns {ReactElement} LinkCell component
85
85
  */
86
86
  const LinkCell = ({ link, type, ...rest }) => {
87
87
  const linkPrefix = type === "LINK" ? "" : type === "PHONE" ? "tel:" : "mailto:";
@@ -100,7 +100,7 @@ const cvaSecondaryRowText = cvaMerge(["overflow-hidden", "text-ellipsis", "text-
100
100
  * The MultiRowTableCell component helps to display two rows inside a table cell.
101
101
  *
102
102
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
103
- * @returns {JSX.Element} MultiRowTableCell component
103
+ * @returns {ReactElement} MultiRowTableCell component
104
104
  */
105
105
  const MultiRowTableCell = ({ main, secondary, dataTestId, className }) => {
106
106
  return (jsx("div", { className: cvaMultiRowTableCell({ className }), children: jsxs("section", { className: cvaMultiRowTableCellSection(), "data-testid": dataTestId, children: [typeof main === "string" ? jsx("div", { className: cvaMainRowText(), children: main }) : main, secondary && typeof secondary === "string" ? (jsx("div", { className: cvaSecondaryRowText(), children: secondary })) : (secondary)] }) }));
@@ -114,7 +114,7 @@ const cvaMultiValueTextCellTooltip = cvaMerge(["whitespace-no-wrap", "overflow-h
114
114
  * The text content is not editable and will be truncated if the cell is too narrow.
115
115
  *
116
116
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
117
- * @returns {JSX.Element} MultiValueTextCell component
117
+ * @returns {ReactElement} MultiValueTextCell component
118
118
  */
119
119
  const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, dataTestId, className, }) => {
120
120
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
@@ -128,7 +128,7 @@ const MultiValueTextCell = ({ content, count, countTooltip, icon, iconTooltip, d
128
128
  * The NoticeCell is used for rendering a Notice in a table cell
129
129
  *
130
130
  * @param {NoticeCellProps} props - The props for the NoticeCell component
131
- * @returns {JSX.Element} NoticeCell component
131
+ * @returns {ReactElement} NoticeCell component
132
132
  */
133
133
  const NoticeCell = ({ ...rest }) => {
134
134
  return jsx(Notice, { ...rest });
@@ -147,7 +147,7 @@ const cvaNumberCell = cvaMerge([
147
147
  * The `<NumberCell>` component is used for displaying numbers with units in a table cell.
148
148
  *
149
149
  * @param {NumberCellProps} props - The props for the NumberCell component.
150
- * @returns {JSX.Element} A React JSX element representing the NumberCell component.
150
+ * @returns {ReactElement} A React JSX element representing the NumberCell component.
151
151
  */
152
152
  const NumberCell = ({ value = "", unit, className, dataTestId }) => {
153
153
  return (jsxs("div", { className: cvaNumberCell({ className }), "data-testid": dataTestId, children: [jsx("span", { children: value }), value && unit ? jsx("span", { children: unit }) : null] }));
@@ -161,7 +161,7 @@ const cvaDateTimeSince = cvaMerge(["slashed-zero", "text-neutral-500", "text-sm"
161
161
  * PlainDateCell is used for render a date and or time in a table cell.
162
162
  *
163
163
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
164
- * @returns {JSX.Element} PlainDateCell component
164
+ * @returns {ReactElement} PlainDateCell component
165
165
  */
166
166
  const PlainDateCell = ({ locale, date, withDaysSince = true, className, dataTestId }) => {
167
167
  if (!date) {
@@ -265,7 +265,7 @@ const cvaSortIndicator = cvaMerge([
265
265
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
266
266
  *
267
267
  * @param {TableRootProps} props - The props for the TableRoot component
268
- * @returns {JSX.Element} TableRoot component
268
+ * @returns {ReactElement} TableRoot component
269
269
  */
270
270
  const TableRoot = ({ dataTestId, className, children, ...rest }) => {
271
271
  return (jsx("table", { className: cvaTableRoot({ className }), "data-testid": dataTestId, ...rest, children: children }));
@@ -278,7 +278,7 @@ const cvaTagsCell = cvaMerge(["flex", "gap-2"]);
278
278
  * The TagsCell is used for render a list of tags in a table cell
279
279
  *
280
280
  * @param {TagsCellProps} props - The props for the TagsCell component
281
- * @returns {JSX.Element} TagsCell component
281
+ * @returns {ReactElement} TagsCell component
282
282
  */
283
283
  const TagsCell = ({ className, tags, dataTestId }) => {
284
284
  return (jsx("div", { className: cvaTagsCell({ className }), "data-testid": dataTestId, children: tags.map((tag, index) => (jsx(Tag, { color: "primary",
@@ -294,7 +294,7 @@ const TagsCell = ({ className, tags, dataTestId }) => {
294
294
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
295
295
  *
296
296
  * @param {TbodyProps} props - The props for the Tbody component
297
- * @returns {JSX.Element} Tbody component
297
+ * @returns {ReactElement} Tbody component
298
298
  */
299
299
  const Tbody = ({ dataTestId, className, children, ...rest }) => {
300
300
  return (jsx("tbody", { className: className, "data-testid": dataTestId, ...rest, children: children }));
@@ -308,7 +308,7 @@ const Tbody = ({ dataTestId, className, children, ...rest }) => {
308
308
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
309
309
  *
310
310
  * @param {TdProps} props - The props for the Td component
311
- * @returns {JSX.Element} Td component
311
+ * @returns {ReactElement} Td component
312
312
  */
313
313
  const Td = ({ dataTestId, className, children, ...rest }) => {
314
314
  return (jsx("td", { className: cvaTd({ className }), "data-testid": dataTestId, ...rest, children: children }));
@@ -323,7 +323,7 @@ const cvaTextCellTooltip = cvaMerge(["grid"]);
323
323
  * The text is not editable and will be truncated if the cell is too narrow.
324
324
  *
325
325
  * @param {TextCellProps} props - The props for the TextCell component
326
- * @returns {JSX.Element} TextCell component
326
+ * @returns {ReactElement} TextCell component
327
327
  */
328
328
  const TextCell = ({ content = "", className, dataTestId }) => {
329
329
  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
@@ -341,7 +341,7 @@ const TextCell = ({ content = "", className, dataTestId }) => {
341
341
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
342
342
  *
343
343
  * @param {TfootProps} props - The props for the Tfoot component
344
- * @returns {JSX.Element} Tfoot component
344
+ * @returns {ReactElement} Tfoot component
345
345
  */
346
346
  const Tfoot = ({ dataTestId, className, children, ...rest }) => {
347
347
  return (jsx("tfoot", { className: className, "data-testid": dataTestId, ...rest, children: children }));
@@ -355,7 +355,7 @@ const Tfoot = ({ dataTestId, className, children, ...rest }) => {
355
355
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
356
356
  *
357
357
  * @param {ThProps} props - The props for the Th component
358
- * @returns {JSX.Element} Th component
358
+ * @returns {ReactElement} Th component
359
359
  */
360
360
  const Th = ({ dataTestId, className, children, tooltipLabel, ...rest }) => {
361
361
  const [showToolTip, setShowTooltipVisible] = useState(false);
@@ -385,7 +385,7 @@ const cvaChildrenContainer = cvaMerge(["max-w-full", "px-3", "py-table-spacing"]
385
385
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
386
386
  *
387
387
  * @param {TheadProps} props - The props for the Thead component
388
- * @returns {JSX.Element} Thead component
388
+ * @returns {ReactElement} Thead component
389
389
  */
390
390
  const Thead = ({ dataTestId, className, children, sticky = true, ...rest }) => {
391
391
  return (jsx("thead", { className: cvaThead({ sticky, className }), "data-testid": dataTestId, ...rest, children: children }));
@@ -410,7 +410,7 @@ const cvaThead = cvaMerge(["bg-neutral-100", "text-left"], {
410
410
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
411
411
  *
412
412
  * @param {TrProps} props - The props for the Tr component
413
- * @returns {JSX.Element} Tr component
413
+ * @returns {ReactElement} Tr component
414
414
  */
415
415
  const Tr = ({ dataTestId, className, children, layout = "default", ...rest }) => {
416
416
  return (jsx("tr", { className: cvaTr({ layout, className }), "data-testid": dataTestId, role: "row", ...rest, children: children }));
package/package.json CHANGED
@@ -1,20 +1,20 @@
1
1
  {
2
2
  "name": "@trackunit/react-table-base-components",
3
- "version": "1.3.28",
3
+ "version": "1.3.32",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
7
7
  "node": ">=20.x"
8
8
  },
9
9
  "dependencies": {
10
- "react": "18.3.1",
10
+ "react": "19.0.0",
11
11
  "@js-temporal/polyfill": "^0.4.4",
12
- "@trackunit/react-components": "1.4.23",
13
- "@trackunit/ui-icons": "1.3.23",
14
- "@trackunit/react-form-components": "1.3.28",
15
- "@trackunit/css-class-variance-utilities": "1.3.23",
16
- "@trackunit/date-and-time-utils": "1.3.23",
17
- "@trackunit/shared-utils": "1.5.23"
12
+ "@trackunit/react-components": "1.4.27",
13
+ "@trackunit/ui-icons": "1.3.27",
14
+ "@trackunit/react-form-components": "1.3.32",
15
+ "@trackunit/css-class-variance-utilities": "1.3.27",
16
+ "@trackunit/date-and-time-utils": "1.3.27",
17
+ "@trackunit/shared-utils": "1.5.27"
18
18
  },
19
19
  "module": "./index.esm.js",
20
20
  "main": "./index.cjs.js",
@@ -10,6 +10,6 @@ export interface ButtonCellProps extends ButtonCommonProps {
10
10
  * The ButtonCell is used to render buttons in a table cell
11
11
  *
12
12
  * @param {ButtonCellProps} props - The props for the ButtonCell component
13
- * @returns {JSX.Element} ButtonCell component
13
+ * @returns {ReactElement} ButtonCell component
14
14
  */
15
15
  export declare const ButtonCell: ({ dataTestId, children, iconName, iconColor, variant, ...rest }: ButtonCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -7,6 +7,6 @@ export interface CheckboxCellProps extends CommonProps {
7
7
  * The checkbox is not editable.
8
8
  *
9
9
  * @param {CheckboxCellProps} props - The props for the CheckboxCell component
10
- * @returns {JSX.Element} CheckboxCell component
10
+ * @returns {ReactElement} CheckboxCell component
11
11
  */
12
12
  export declare const CheckboxCell: ({ checked, className, dataTestId }: CheckboxCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -34,7 +34,7 @@ export interface DateTimeCellProps extends CommonProps {
34
34
  * DateTimeCell is used for render a date and or time in a table cell.
35
35
  *
36
36
  * @param {DateTimeCellProps} props - The props for the DateTimeCell component
37
- * @returns {JSX.Element} DateTimeCell component
37
+ * @returns {ReactElement} DateTimeCell component
38
38
  */
39
39
  export declare const DateTimeCell: ({ format, timeZone, locale, date, withTimeSince, className, dataTestId, }: DateTimeCellProps) => import("react/jsx-runtime").JSX.Element | null;
40
40
  export interface TimeSinceProps extends Pick<DateTimeCellProps, "date" | "timeZone" | "locale"> {
@@ -25,6 +25,6 @@ export interface ImageCellProps extends CommonProps {
25
25
  * The `<ImageCell>` component is used for displaying images in a table cell.
26
26
  *
27
27
  * @param {ImageCellProps} props - The props for the Image component.
28
- * @returns {JSX.Element} The Image component.
28
+ * @returns {ReactElement} The Image component.
29
29
  */
30
30
  export declare const ImageCell: ({ imageUrl, alt, width, height, dataTestId, ...rest }: ImageCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,9 +1,10 @@
1
1
  import { IndicatorProps } from "@trackunit/react-components";
2
+ import { ReactElement } from "react";
2
3
  export interface IndicatorCellProps extends IndicatorProps, React.HTMLAttributes<HTMLTableSectionElement> {
3
4
  /**
4
5
  * The icon to be rendered inside the indicator component
5
6
  */
6
- icon: JSX.Element;
7
+ icon: ReactElement;
7
8
  /**
8
9
  * A color token used to style the icon and the icon background
9
10
  */
@@ -29,6 +30,6 @@ export interface IndicatorCellProps extends IndicatorProps, React.HTMLAttributes
29
30
  * The IndicatorCell is used for render an indicator in a table cell
30
31
  *
31
32
  * @param {IndicatorCellProps} props - The props for the LinkCell component
32
- * @returns {JSX.Element} LinkCell component
33
+ * @returns {ReactElement} LinkCell component
33
34
  */
34
35
  export declare const IndicatorCell: ({ ...rest }: IndicatorCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,6 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- export interface LinkCellProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
2
+ import { HTMLAttributes } from "react";
3
+ export interface LinkCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
3
4
  /**
4
5
  * A id that can be used in tests to get the component
5
6
  */
@@ -21,6 +22,6 @@ export interface LinkCellProps extends CommonProps, React.HTMLAttributes<HTMLTab
21
22
  * The LinkCell is used for render a list of tags in a table cell
22
23
  *
23
24
  * @param {LinkCellProps} props - The props for the LinkCell component
24
- * @returns {JSX.Element} LinkCell component
25
+ * @returns {ReactElement} LinkCell component
25
26
  */
26
27
  export declare const LinkCell: ({ link, type, ...rest }: LinkCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,18 +1,19 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
+ import { ReactNode } from "react";
2
3
  export interface MultiRowTableCellProps extends CommonProps {
3
4
  /**
4
5
  * Main row of the cell.
5
6
  */
6
- main: React.ReactNode;
7
+ main: ReactNode;
7
8
  /**
8
9
  * Secondary row of the cell rendered below the main row.
9
10
  */
10
- secondary: React.ReactNode;
11
+ secondary: ReactNode;
11
12
  }
12
13
  /**
13
14
  * The MultiRowTableCell component helps to display two rows inside a table cell.
14
15
  *
15
16
  * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
16
- * @returns {JSX.Element} MultiRowTableCell component
17
+ * @returns {ReactElement} MultiRowTableCell component
17
18
  */
18
19
  export declare const MultiRowTableCell: ({ main, secondary, dataTestId, className }: MultiRowTableCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,7 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- import { ReactNode } from "react";
2
+ import { ReactElement, ReactNode } from "react";
3
3
  export interface MultiValueTextCellProps extends CommonProps {
4
- icon?: JSX.Element;
4
+ icon?: ReactElement;
5
5
  iconTooltip?: string;
6
6
  content?: string;
7
7
  count?: number | null;
@@ -12,6 +12,6 @@ export interface MultiValueTextCellProps extends CommonProps {
12
12
  * The text content is not editable and will be truncated if the cell is too narrow.
13
13
  *
14
14
  * @param {MultiValueTextCellProps} props - The props for the MultiValueTextCell component
15
- * @returns {JSX.Element} MultiValueTextCell component
15
+ * @returns {ReactElement} MultiValueTextCell component
16
16
  */
17
17
  export declare const MultiValueTextCell: ({ content, count, countTooltip, icon, iconTooltip, dataTestId, className, }: MultiValueTextCellProps) => import("react/jsx-runtime").JSX.Element | null;
@@ -5,6 +5,6 @@ export interface NoticeCellProps extends NoticeProps {
5
5
  * The NoticeCell is used for rendering a Notice in a table cell
6
6
  *
7
7
  * @param {NoticeCellProps} props - The props for the NoticeCell component
8
- * @returns {JSX.Element} NoticeCell component
8
+ * @returns {ReactElement} NoticeCell component
9
9
  */
10
10
  export declare const NoticeCell: ({ ...rest }: NoticeCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -22,6 +22,6 @@ export interface NumberCellProps extends CommonProps {
22
22
  * The `<NumberCell>` component is used for displaying numbers with units in a table cell.
23
23
  *
24
24
  * @param {NumberCellProps} props - The props for the NumberCell component.
25
- * @returns {JSX.Element} A React JSX element representing the NumberCell component.
25
+ * @returns {ReactElement} A React JSX element representing the NumberCell component.
26
26
  */
27
27
  export declare const NumberCell: ({ value, unit, className, dataTestId }: NumberCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -23,7 +23,7 @@ export interface PlainDateCellProps extends CommonProps {
23
23
  * PlainDateCell is used for render a date and or time in a table cell.
24
24
  *
25
25
  * @param {PlainDateCellProps} props - The props for the PlainDateCell component
26
- * @returns {JSX.Element} PlainDateCell component
26
+ * @returns {ReactElement} PlainDateCell component
27
27
  */
28
28
  export declare const PlainDateCell: ({ locale, date, withDaysSince, className, dataTestId }: PlainDateCellProps) => import("react/jsx-runtime").JSX.Element | null;
29
29
  export interface DaysSinceProps extends Pick<PlainDateCellProps, "date" | "locale"> {
@@ -1,6 +1,6 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- import { ReactNode } from "react";
3
- export interface TableRootProps extends CommonProps, React.HTMLAttributes<HTMLTableElement> {
2
+ import { HTMLAttributes, ReactNode } from "react";
3
+ export interface TableRootProps extends CommonProps, HTMLAttributes<HTMLTableElement> {
4
4
  /**
5
5
  * A id that can be used in tests to get the component
6
6
  */
@@ -22,6 +22,6 @@ export interface TableRootProps extends CommonProps, React.HTMLAttributes<HTMLTa
22
22
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
23
23
  *
24
24
  * @param {TableRootProps} props - The props for the TableRoot component
25
- * @returns {JSX.Element} TableRoot component
25
+ * @returns {ReactElement} TableRoot component
26
26
  */
27
27
  export declare const TableRoot: ({ dataTestId, className, children, ...rest }: TableRootProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,5 +1,6 @@
1
1
  import { CommonProps, TagProps } from "@trackunit/react-components";
2
- export interface TagsCellProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
2
+ import { HTMLAttributes } from "react";
3
+ export interface TagsCellProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
3
4
  /**
4
5
  * A id that can be used in tests to get the component
5
6
  */
@@ -17,6 +18,6 @@ export interface TagsCellProps extends CommonProps, React.HTMLAttributes<HTMLTab
17
18
  * The TagsCell is used for render a list of tags in a table cell
18
19
  *
19
20
  * @param {TagsCellProps} props - The props for the TagsCell component
20
- * @returns {JSX.Element} TagsCell component
21
+ * @returns {ReactElement} TagsCell component
21
22
  */
22
23
  export declare const TagsCell: ({ className, tags, dataTestId }: TagsCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- import { ReactNode } from "react";
3
- export interface TbodyProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
2
+ import { HTMLAttributes, ReactNode } from "react";
3
+ export interface TbodyProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
4
4
  /**
5
5
  * A id that can be used in tests to get the component
6
6
  */
@@ -22,6 +22,6 @@ export interface TbodyProps extends CommonProps, React.HTMLAttributes<HTMLTableS
22
22
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
23
23
  *
24
24
  * @param {TbodyProps} props - The props for the Tbody component
25
- * @returns {JSX.Element} Tbody component
25
+ * @returns {ReactElement} Tbody component
26
26
  */
27
27
  export declare const Tbody: ({ dataTestId, className, children, ...rest }: TbodyProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- import { ReactNode } from "react";
3
- export interface TdProps extends CommonProps, React.HTMLAttributes<HTMLTableCellElement> {
2
+ import { HTMLAttributes, ReactNode } from "react";
3
+ export interface TdProps extends CommonProps, HTMLAttributes<HTMLTableCellElement> {
4
4
  /**
5
5
  * A id that can be used in tests to get the component
6
6
  */
@@ -22,6 +22,6 @@ export interface TdProps extends CommonProps, React.HTMLAttributes<HTMLTableCell
22
22
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
23
23
  *
24
24
  * @param {TdProps} props - The props for the Td component
25
- * @returns {JSX.Element} Td component
25
+ * @returns {ReactElement} Td component
26
26
  */
27
27
  export declare const Td: ({ dataTestId, className, children, ...rest }: TdProps) => import("react/jsx-runtime").JSX.Element;
@@ -7,6 +7,6 @@ export interface TextCellProps extends CommonProps {
7
7
  * The text is not editable and will be truncated if the cell is too narrow.
8
8
  *
9
9
  * @param {TextCellProps} props - The props for the TextCell component
10
- * @returns {JSX.Element} TextCell component
10
+ * @returns {ReactElement} TextCell component
11
11
  */
12
12
  export declare const TextCell: ({ content, className, dataTestId }: TextCellProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- import { ReactNode } from "react";
3
- export interface TfootProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
2
+ import { HTMLAttributes, ReactNode } from "react";
3
+ export interface TfootProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
4
4
  /**
5
5
  * A id that can be used in tests to get the component
6
6
  */
@@ -22,6 +22,6 @@ export interface TfootProps extends CommonProps, React.HTMLAttributes<HTMLTableS
22
22
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
23
23
  *
24
24
  * @param {TfootProps} props - The props for the Tfoot component
25
- * @returns {JSX.Element} Tfoot component
25
+ * @returns {ReactElement} Tfoot component
26
26
  */
27
27
  export declare const Tfoot: ({ dataTestId, className, children, ...rest }: TfootProps) => import("react/jsx-runtime").JSX.Element;
@@ -26,6 +26,6 @@ export interface ThProps extends CommonProps, React.HTMLAttributes<HTMLTableCell
26
26
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
27
27
  *
28
28
  * @param {ThProps} props - The props for the Th component
29
- * @returns {JSX.Element} Th component
29
+ * @returns {ReactElement} Th component
30
30
  */
31
31
  export declare const Th: ({ dataTestId, className, children, tooltipLabel, ...rest }: ThProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- import { ReactNode } from "react";
3
- export interface TheadProps extends CommonProps, React.HTMLAttributes<HTMLTableSectionElement> {
2
+ import { HTMLAttributes, ReactNode } from "react";
3
+ export interface TheadProps extends CommonProps, HTMLAttributes<HTMLTableSectionElement> {
4
4
  /**
5
5
  * A id that can be used in tests to get the component
6
6
  */
@@ -29,6 +29,6 @@ export interface TheadProps extends CommonProps, React.HTMLAttributes<HTMLTableS
29
29
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
30
30
  *
31
31
  * @param {TheadProps} props - The props for the Thead component
32
- * @returns {JSX.Element} Thead component
32
+ * @returns {ReactElement} Thead component
33
33
  */
34
34
  export declare const Thead: ({ dataTestId, className, children, sticky, ...rest }: TheadProps) => import("react/jsx-runtime").JSX.Element;
@@ -1,6 +1,6 @@
1
1
  import { CommonProps } from "@trackunit/react-components";
2
- import { ReactNode } from "react";
3
- export interface TrProps extends CommonProps, React.HTMLAttributes<HTMLTableRowElement> {
2
+ import { HTMLAttributes, ReactNode } from "react";
3
+ export interface TrProps extends CommonProps, HTMLAttributes<HTMLTableRowElement> {
4
4
  /**
5
5
  * A id that can be used in tests to get the component
6
6
  */
@@ -30,6 +30,6 @@ export interface TrProps extends CommonProps, React.HTMLAttributes<HTMLTableRowE
30
30
  * However, if you need to construct a custom table, the Table Base Components can be utilized.
31
31
  *
32
32
  * @param {TrProps} props - The props for the Tr component
33
- * @returns {JSX.Element} Tr component
33
+ * @returns {ReactElement} Tr component
34
34
  */
35
35
  export declare const Tr: ({ dataTestId, className, children, layout, ...rest }: TrProps) => import("react/jsx-runtime").JSX.Element;