@trackunit/react-table 1.7.122 → 1.7.125

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
@@ -183,14 +183,14 @@ const ActionButton = ({ action, id, ...rest }) => {
183
183
  const actionDataToMenuItem = (action, dataTestId) => {
184
184
  const props = "url" in action
185
185
  ? {
186
- dataTestId,
186
+ "data-testid": dataTestId,
187
187
  }
188
188
  : {
189
189
  id: action.id,
190
190
  key: action.label,
191
- dataTestId,
191
+ "data-testid": dataTestId,
192
192
  };
193
- const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "medium", style: action.style })) : null, stopPropagation: false }, action.label));
193
+ const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", "data-testid": `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "medium", style: action.style })) : null, stopPropagation: false }, action.label));
194
194
  if ("url" in action) {
195
195
  return (jsxRuntime.jsx(reactRouter.Link, { id: action.id, to: action.url, children: item }, action.label));
196
196
  }
@@ -205,7 +205,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
205
205
  * @param {string} [dataTestId] - Optional data test ID.
206
206
  * @returns {ReactElement} - The ActionButton component for the given action.
207
207
  */
208
- const actionDataToActionButton = (action) => (jsxRuntime.jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.dataTestId || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, action.id));
208
+ const actionDataToActionButton = (action) => (jsxRuntime.jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", "data-testid": action["data-testid"] || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, action.id));
209
209
  /**
210
210
  * Renders the icon for an action button.
211
211
  * Should not be used outside the ActionSheet component.
@@ -225,10 +225,10 @@ const ActionIcon = ({ action }) => {
225
225
  * @param {object} props - Props for the component.
226
226
  * @param {ActionModel[]} props.actions - Array of action models to be rendered.
227
227
  * @param {ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>} props.moreActions - Additional actions that can be rendered in the MoreMenu.
228
- * @param {string} [props.dataTestId] - Data test id for the component, useful in testing.
228
+ * @param {string} [props."data-testid"] - Data test id for the component, useful in testing.
229
229
  * @returns {ReactElement} The rendered component.
230
230
  */
231
- const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dataTestId, }) => {
231
+ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, "data-testid": dataTestId, }) => {
232
232
  const children = react.useMemo(() => actions.map(action => actionDataToActionButton(action)), [actions]);
233
233
  const { overflowContainerRef, itemOverflowMap } = reactComponents.useOverflowItems({
234
234
  children,
@@ -248,9 +248,9 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
248
248
  });
249
249
  }) }), jsxRuntime.jsxs("div", { className: cvaMoreContainer({ isDropdown: dropdownActions !== undefined }), children: [dropdownActions
250
250
  ? dropdownActions.map(action => {
251
- return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.Button, { dataTestId: action.dataTestId, id: action.id, loading: action.loading, onClick: action.method, prefix: jsxRuntime.jsx(ActionIcon, { action: action }), children: action.label }), dataTestId: `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: !action.loading ? action.dropdown : null }, action.id));
251
+ return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.Button, { "data-testid": action["data-testid"], id: action.id, loading: action.loading, onClick: action.method, prefix: jsxRuntime.jsx(ActionIcon, { action: action }), children: action.label }), "data-testid": `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: !action.loading ? action.dropdown : null }, action.id));
252
252
  })
253
- : null, react.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, iconProps: { color: "white" }, popoverProps: { placement: "top-end" }, children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
253
+ : null, react.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { "data-testid": `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, iconProps: { color: "white" }, popoverProps: { placement: "top-end" }, children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
254
254
  return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
255
255
  })] })) })) : null] })] }));
256
256
  };
@@ -263,9 +263,9 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
263
263
  * @param {ActionSheetProps} props - The props for the ActionSheet component
264
264
  * @returns {ReactElement} ActionSheet component
265
265
  */
266
- const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
266
+ const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, "data-testid": dataTestId, }) => {
267
267
  const [t] = useTranslation();
268
- return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { className: "row-start-1", dataTestId: "XButton", onClick: resetSelection, prefix: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsxRuntime.jsx(reactComponents.Spacer, { border: true, className: cvaDivider() }), jsxRuntime.jsx(ActionContainerAndOverflow, { dataTestId,
268
+ return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { className: "row-start-1", "data-testid": "XButton", onClick: resetSelection, prefix: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsxRuntime.jsx(reactComponents.Spacer, { border: true, className: cvaDivider() }), jsxRuntime.jsx(ActionContainerAndOverflow, { "data-testid": dataTestId,
269
269
  actions,
270
270
  dropdownActions,
271
271
  moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
@@ -403,7 +403,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
403
403
  const visibleColumnsCount = react.useMemo(() => {
404
404
  return columns.filter(col => col.getIsVisible()).length;
405
405
  }, [columns]);
406
- return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Cog6Tooth", size: "small" }), size: "small", variant: "secondary" }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: t("table.search.placeholder"), value: searchText }), jsxRuntime.jsx(reactComponents.Button, { dataTestId: "resetColumnState", onClick: resetColumnState, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
406
+ return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Cog6Tooth", size: "small" }), size: "small", variant: "secondary" }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: t("table.search.placeholder"), value: searchText }), jsxRuntime.jsx(reactComponents.Button, { "data-testid": "resetColumnState", onClick: resetColumnState, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
407
407
  };
408
408
  const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
409
409
  const [localColumns, setLocalColumns] = react.useState(columns);
@@ -946,7 +946,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
946
946
  header.column.getToggleSortingHandler()?.(event);
947
947
  }
948
948
  }, [props]);
949
- return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableScrollElementRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
949
+ return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableScrollElementRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
950
950
  height: hasResults ? "auto" : "100%",
951
951
  width: "100%",
952
952
  position: "relative",
@@ -995,7 +995,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
995
995
  : "default",
996
996
  selection: "auto",
997
997
  focus: "unfocused",
998
- })), dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
998
+ })), "data-testid": `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
999
999
  if (props.onRowClick) {
1000
1000
  props.onRowClick(row);
1001
1001
  }
package/index.esm.js CHANGED
@@ -182,14 +182,14 @@ const ActionButton = ({ action, id, ...rest }) => {
182
182
  const actionDataToMenuItem = (action, dataTestId) => {
183
183
  const props = "url" in action
184
184
  ? {
185
- dataTestId,
185
+ "data-testid": dataTestId,
186
186
  }
187
187
  : {
188
188
  id: action.id,
189
189
  key: action.label,
190
- dataTestId,
190
+ "data-testid": dataTestId,
191
191
  };
192
- const item = (jsx(MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsx(Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "medium", style: action.style })) : null, stopPropagation: false }, action.label));
192
+ const item = (jsx(MenuItem, { props, className: "flex justify-center", "data-testid": `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsx(Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "medium", style: action.style })) : null, stopPropagation: false }, action.label));
193
193
  if ("url" in action) {
194
194
  return (jsx(Link, { id: action.id, to: action.url, children: item }, action.label));
195
195
  }
@@ -204,7 +204,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
204
204
  * @param {string} [dataTestId] - Optional data test ID.
205
205
  * @returns {ReactElement} - The ActionButton component for the given action.
206
206
  */
207
- const actionDataToActionButton = (action) => (jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.dataTestId || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, action.id));
207
+ const actionDataToActionButton = (action) => (jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", "data-testid": action["data-testid"] || action.id, disabled: action.loading || action.disabled, id: action.id, variant: action.disabled ? "ghost" : undefined }, action.id));
208
208
  /**
209
209
  * Renders the icon for an action button.
210
210
  * Should not be used outside the ActionSheet component.
@@ -224,10 +224,10 @@ const ActionIcon = ({ action }) => {
224
224
  * @param {object} props - Props for the component.
225
225
  * @param {ActionModel[]} props.actions - Array of action models to be rendered.
226
226
  * @param {ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>} props.moreActions - Additional actions that can be rendered in the MoreMenu.
227
- * @param {string} [props.dataTestId] - Data test id for the component, useful in testing.
227
+ * @param {string} [props."data-testid"] - Data test id for the component, useful in testing.
228
228
  * @returns {ReactElement} The rendered component.
229
229
  */
230
- const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dataTestId, }) => {
230
+ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, "data-testid": dataTestId, }) => {
231
231
  const children = useMemo(() => actions.map(action => actionDataToActionButton(action)), [actions]);
232
232
  const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
233
233
  children,
@@ -247,9 +247,9 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
247
247
  });
248
248
  }) }), jsxs("div", { className: cvaMoreContainer({ isDropdown: dropdownActions !== undefined }), children: [dropdownActions
249
249
  ? dropdownActions.map(action => {
250
- return (jsx(MoreMenu, { customButton: jsx(Button, { dataTestId: action.dataTestId, id: action.id, loading: action.loading, onClick: action.method, prefix: jsx(ActionIcon, { action: action }), children: action.label }), dataTestId: `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: !action.loading ? action.dropdown : null }, action.id));
250
+ return (jsx(MoreMenu, { customButton: jsx(Button, { "data-testid": action["data-testid"], id: action.id, loading: action.loading, onClick: action.method, prefix: jsx(ActionIcon, { action: action }), children: action.label }), "data-testid": `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: !action.loading ? action.dropdown : null }, action.id));
251
251
  })
252
- : null, Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, { dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, iconProps: { color: "white" }, popoverProps: { placement: "top-end" }, children: close => (jsxs(MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
252
+ : null, Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, { "data-testid": `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, iconProps: { color: "white" }, popoverProps: { placement: "top-end" }, children: close => (jsxs(MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
253
253
  return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
254
254
  })] })) })) : null] })] }));
255
255
  };
@@ -262,9 +262,9 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
262
262
  * @param {ActionSheetProps} props - The props for the ActionSheet component
263
263
  * @returns {ReactElement} ActionSheet component
264
264
  */
265
- const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
265
+ const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, "data-testid": dataTestId, }) => {
266
266
  const [t] = useTranslation();
267
- return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsx(Button, { className: "row-start-1", dataTestId: "XButton", onClick: resetSelection, prefix: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsx(Spacer, { border: true, className: cvaDivider() }), jsx(ActionContainerAndOverflow, { dataTestId,
267
+ return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsx(Button, { className: "row-start-1", "data-testid": "XButton", onClick: resetSelection, prefix: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsx(Spacer, { border: true, className: cvaDivider() }), jsx(ActionContainerAndOverflow, { "data-testid": dataTestId,
268
268
  actions,
269
269
  dropdownActions,
270
270
  moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
@@ -402,7 +402,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
402
402
  const visibleColumnsCount = useMemo(() => {
403
403
  return columns.filter(col => col.getIsVisible()).length;
404
404
  }, [columns]);
405
- return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { icon: jsx(Icon, { name: "Cog6Tooth", size: "small" }), size: "small", variant: "secondary" }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsx(Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: t("table.search.placeholder"), value: searchText }), jsx(Button, { dataTestId: "resetColumnState", onClick: resetColumnState, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
405
+ return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(IconButton, { icon: jsx(Icon, { name: "Cog6Tooth", size: "small" }), size: "small", variant: "secondary" }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsx(Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: t("table.search.placeholder"), value: searchText }), jsx(Button, { "data-testid": "resetColumnState", onClick: resetColumnState, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
406
406
  };
407
407
  const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
408
408
  const [localColumns, setLocalColumns] = useState(columns);
@@ -945,7 +945,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
945
945
  header.column.getToggleSortingHandler()?.(event);
946
946
  }
947
947
  }, [props]);
948
- return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableScrollElementRef, children: jsxs(TableRoot, { style: {
948
+ return (jsxs(Card, { className: twMerge("table-compact flex flex-col overflow-hidden", props.className), "data-testid": props["data-testid"], children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center gap-2", children: props.headerLeftActions }), jsx("div", { className: "flex items-center gap-2", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-neutral-200", ref: tableScrollElementRef, children: jsxs(TableRoot, { style: {
949
949
  height: hasResults ? "auto" : "100%",
950
950
  width: "100%",
951
951
  position: "relative",
@@ -994,7 +994,7 @@ const Table = ({ rowHeight = 50, ...props }) => {
994
994
  : "default",
995
995
  selection: "auto",
996
996
  focus: "unfocused",
997
- })), dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
997
+ })), "data-testid": `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
998
998
  if (props.onRowClick) {
999
999
  props.onRowClick(row);
1000
1000
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-table",
3
- "version": "1.7.122",
3
+ "version": "1.7.125",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -14,14 +14,14 @@
14
14
  "react-dnd-html5-backend": "16.0.1",
15
15
  "@tanstack/react-router": "1.114.29",
16
16
  "tailwind-merge": "^2.0.0",
17
- "@trackunit/react-components": "1.10.49",
18
- "@trackunit/shared-utils": "1.9.75",
19
- "@trackunit/css-class-variance-utilities": "1.7.75",
20
- "@trackunit/ui-icons": "1.7.76",
21
- "@trackunit/react-table-base-components": "1.7.118",
22
- "@trackunit/react-form-components": "1.8.116",
23
- "@trackunit/i18n-library-translation": "1.7.92",
24
- "@trackunit/iris-app-runtime-core-api": "1.7.84",
17
+ "@trackunit/react-components": "1.10.52",
18
+ "@trackunit/shared-utils": "1.9.77",
19
+ "@trackunit/css-class-variance-utilities": "1.7.77",
20
+ "@trackunit/ui-icons": "1.7.78",
21
+ "@trackunit/react-table-base-components": "1.7.121",
22
+ "@trackunit/react-form-components": "1.8.119",
23
+ "@trackunit/i18n-library-translation": "1.7.95",
24
+ "@trackunit/iris-app-runtime-core-api": "1.7.87",
25
25
  "graphql": "^16.10.0"
26
26
  },
27
27
  "module": "./index.esm.js",
@@ -13,8 +13,8 @@ interface ActionContainerAndOverflowProps extends CommonProps {
13
13
  * @param {object} props - Props for the component.
14
14
  * @param {ActionModel[]} props.actions - Array of action models to be rendered.
15
15
  * @param {ReactElement<SidebarItemProps>[] | ReactElement<SidebarItemProps>} props.moreActions - Additional actions that can be rendered in the MoreMenu.
16
- * @param {string} [props.dataTestId] - Data test id for the component, useful in testing.
16
+ * @param {string} [props."data-testid"] - Data test id for the component, useful in testing.
17
17
  * @returns {ReactElement} The rendered component.
18
18
  */
19
- export declare const ActionContainerAndOverflow: ({ actions, dropdownActions, moreActions, dataTestId, }: ActionContainerAndOverflowProps) => import("react/jsx-runtime").JSX.Element;
19
+ export declare const ActionContainerAndOverflow: ({ actions, dropdownActions, moreActions, "data-testid": dataTestId, }: ActionContainerAndOverflowProps) => import("react/jsx-runtime").JSX.Element;
20
20
  export {};
@@ -30,4 +30,4 @@ export interface ActionSheetProps extends CommonProps {
30
30
  * @param {ActionSheetProps} props - The props for the ActionSheet component
31
31
  * @returns {ReactElement} ActionSheet component
32
32
  */
33
- export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;
33
+ export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, "data-testid": dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;