@trackunit/react-table 1.3.28 → 1.3.34

package/index.cjs.js

@@ -156,7 +156,7 @@ const cvaMoreContainer = cssClassVarianceUtilities.cvaMerge([
  * @param {ActionModel} props.action - The action model defining what action to perform.
  * @param {string} [props.id] - The optional ID for the button.
  * @param {...any} [props.rest] - Any additional button properties.
- * @returns {JSX.Element} - The action button component.
+ * @returns {ReactElement} - The action button component.
  */
 const ActionButton = ({ action, id, ...rest }) => {
     if (action.type === "route") {
@@ -175,7 +175,7 @@ const ActionButton = ({ action, id, ...rest }) => {
  *
  * @param {ActionModel} action - The action model to convert.
  * @param {string} [dataTestId] - Optional data test ID.
- * @returns {JSX.Element} - The MenuItem component for the given action.
+ * @returns {ReactElement} - The MenuItem component for the given action.
  */
 const actionDataToMenuItem = (action, dataTestId) => {
     const props = "url" in action
@@ -200,7 +200,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
  *
  * @param {ActionModel} action - The action model to convert.
  * @param {string} [dataTestId] - Optional data test ID.
- * @returns {JSX.Element} - The ActionButton component for the given action.
+ * @returns {ReactElement} - The ActionButton component for the given action.
  */
 const actionDataToActionButton = (action) => (jsxRuntime.jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.dataTestId || action.id, disabled: action.loading, id: action.id }, action.id));
 /**
@@ -209,7 +209,7 @@ const actionDataToActionButton = (action) => (jsxRuntime.jsx(ActionButton, { act
  *
  * @param {InnerActionButtonProps} props - The properties for the action icon.
  * @param {ActionModel} props.action - The action model defining what action to perform.
- * @returns {JSX.Element | null} - The icon for the action button, or null if no icon is defined.
+ * @returns {ReactElement | null} - The icon for the action button, or null if no icon is defined.
  */
 const ActionIcon = ({ action }) => {
     return action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "small", style: action.style })) : null;
@@ -260,7 +260,7 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
  * If the page supports more than 3 actions, the ones that are performed less often can be placed in a contextual menu, represented by the ‘three dots’ icon.
  *
  * @param {ActionSheetProps} props - The props for the ActionSheet component
- * @returns {JSX.Element} ActionSheet component
+ * @returns {ReactElement} ActionSheet component
  */
 const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
     const [t] = useTranslation();
@@ -285,7 +285,7 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
  * @template TColumnFilter - The type representing the data model associated with the columns.
  * @template TColumnFilterValue - The type representing the value of columns.
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
- * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
+ * @returns {ReactElement | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
     const [t] = useTranslation();
@@ -420,7 +420,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
  * RowSpacing component for managing the density of table rows.
  *
  * @param {RowDensityProps} props - The props object containing row density properties.
- * @returns {JSX.Element} A React JSX element representing the RowSpacing component.
+ * @returns {ReactElement} A React JSX element representing the RowSpacing component.
  */
 const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
     const [t] = useTranslation();
@@ -448,7 +448,7 @@ const CompactIcon = () => {
  * @template TSorting - The type representing the data model associated with the columns.
  * @template TSortingValue - The type representing the value of columns.
  * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
- * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
+ * @returns {ReactElement | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
 const Sorting = ({ columns, }) => {
     const [t] = useTranslation();
@@ -475,7 +475,10 @@ const Sorting = ({ columns, }) => {
  * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
  *
  * @param {ReactTable} props - The props for the Table component
- * @returns {JSX.Element} Table component
+ * @returns {ReactElement} Table component
+ */
+/**
+ *
  */
 const Table = ({ rowHeight = 75, ...props }) => {
     //we need a reference to the scrolling element for logic down below

package/index.esm.js

@@ -155,7 +155,7 @@ const cvaMoreContainer = cvaMerge([
  * @param {ActionModel} props.action - The action model defining what action to perform.
  * @param {string} [props.id] - The optional ID for the button.
  * @param {...any} [props.rest] - Any additional button properties.
- * @returns {JSX.Element} - The action button component.
+ * @returns {ReactElement} - The action button component.
  */
 const ActionButton = ({ action, id, ...rest }) => {
     if (action.type === "route") {
@@ -174,7 +174,7 @@ const ActionButton = ({ action, id, ...rest }) => {
  *
  * @param {ActionModel} action - The action model to convert.
  * @param {string} [dataTestId] - Optional data test ID.
- * @returns {JSX.Element} - The MenuItem component for the given action.
+ * @returns {ReactElement} - The MenuItem component for the given action.
  */
 const actionDataToMenuItem = (action, dataTestId) => {
     const props = "url" in action
@@ -199,7 +199,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
  *
  * @param {ActionModel} action - The action model to convert.
  * @param {string} [dataTestId] - Optional data test ID.
- * @returns {JSX.Element} - The ActionButton component for the given action.
+ * @returns {ReactElement} - The ActionButton component for the given action.
  */
 const actionDataToActionButton = (action) => (jsx(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.dataTestId || action.id, disabled: action.loading, id: action.id }, action.id));
 /**
@@ -208,7 +208,7 @@ const actionDataToActionButton = (action) => (jsx(ActionButton, { action: action
  *
  * @param {InnerActionButtonProps} props - The properties for the action icon.
  * @param {ActionModel} props.action - The action model defining what action to perform.
- * @returns {JSX.Element | null} - The icon for the action button, or null if no icon is defined.
+ * @returns {ReactElement | null} - The icon for the action button, or null if no icon is defined.
  */
 const ActionIcon = ({ action }) => {
     return action.icon ? (jsx(Icon, { color: "white", "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "small", style: action.style })) : null;
@@ -259,7 +259,7 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
  * If the page supports more than 3 actions, the ones that are performed less often can be placed in a contextual menu, represented by the ‘three dots’ icon.
  *
  * @param {ActionSheetProps} props - The props for the ActionSheet component
- * @returns {JSX.Element} ActionSheet component
+ * @returns {ReactElement} ActionSheet component
  */
 const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
     const [t] = useTranslation();
@@ -284,7 +284,7 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
  * @template TColumnFilter - The type representing the data model associated with the columns.
  * @template TColumnFilterValue - The type representing the value of columns.
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
- * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
+ * @returns {ReactElement | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
 const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
     const [t] = useTranslation();
@@ -419,7 +419,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
  * RowSpacing component for managing the density of table rows.
  *
  * @param {RowDensityProps} props - The props object containing row density properties.
- * @returns {JSX.Element} A React JSX element representing the RowSpacing component.
+ * @returns {ReactElement} A React JSX element representing the RowSpacing component.
  */
 const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
     const [t] = useTranslation();
@@ -447,7 +447,7 @@ const CompactIcon = () => {
  * @template TSorting - The type representing the data model associated with the columns.
  * @template TSortingValue - The type representing the value of columns.
  * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
- * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
+ * @returns {ReactElement | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
 const Sorting = ({ columns, }) => {
     const [t] = useTranslation();
@@ -474,7 +474,10 @@ const Sorting = ({ columns, }) => {
  * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
  *
  * @param {ReactTable} props - The props for the Table component
- * @returns {JSX.Element} Table component
+ * @returns {ReactElement} Table component
+ */
+/**
+ *
  */
 const Table = ({ rowHeight = 75, ...props }) => {
     //we need a reference to the scrolling element for logic down below

package/package.json

@@ -1,29 +1,29 @@
 {
   "name": "@trackunit/react-table",
-  "version": "1.3.28",
+  "version": "1.3.34",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
     "node": ">=20.x"
   },
   "dependencies": {
-    "react": "18.3.1",
-    "@tanstack/react-table": "^8.10.7",
+    "react": "19.0.0",
+    "@tanstack/react-table": "^8.20.6",
     "immutability-helper": "^3.1.1",
-    "react-dnd": "14.0.5",
-    "react-dnd-html5-backend": "14.1.0",
+    "react-dnd": "16.0.1",
+    "react-dnd-html5-backend": "16.0.1",
     "jest-fetch-mock": "^3.0.3",
     "@tanstack/react-router": "1.47.1",
     "tailwind-merge": "^2.0.0",
-    "@trackunit/react-components": "1.4.21",
-    "@trackunit/shared-utils": "1.5.21",
-    "@trackunit/css-class-variance-utilities": "1.3.21",
-    "@trackunit/ui-icons": "1.3.21",
-    "@trackunit/react-table-base-components": "1.3.26",
-    "@trackunit/react-table-pagination": "1.3.21",
-    "@trackunit/react-form-components": "1.3.26",
-    "@trackunit/i18n-library-translation": "1.3.22",
-    "@trackunit/react-core-contexts-api": "1.4.22"
+    "@trackunit/react-components": "1.4.27",
+    "@trackunit/shared-utils": "1.5.27",
+    "@trackunit/css-class-variance-utilities": "1.3.27",
+    "@trackunit/ui-icons": "1.3.27",
+    "@trackunit/react-table-base-components": "1.3.32",
+    "@trackunit/react-table-pagination": "1.3.27",
+    "@trackunit/react-form-components": "1.3.32",
+    "@trackunit/i18n-library-translation": "1.3.28",
+    "@trackunit/react-core-contexts-api": "1.4.28"
   },
   "module": "./index.esm.js",
   "main": "./index.cjs.js",

package/src/ActionSheet/ActionSheet.d.ts

@@ -28,6 +28,6 @@ export interface ActionSheetProps extends CommonProps {
  * If the page supports more than 3 actions, the ones that are performed less often can be placed in a contextual menu, represented by the ‘three dots’ icon.
  *
  * @param {ActionSheetProps} props - The props for the ActionSheet component
- * @returns {JSX.Element} ActionSheet component
+ * @returns {ReactElement} ActionSheet component
  */
 export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;

package/src/ActionSheet/ActionSheetElementUtils.d.ts

@@ -14,7 +14,7 @@ interface ActionButtonProps extends ButtonCommonProps {
  * @param {ActionModel} props.action - The action model defining what action to perform.
  * @param {string} [props.id] - The optional ID for the button.
  * @param {...any} [props.rest] - Any additional button properties.
- * @returns {JSX.Element} - The action button component.
+ * @returns {ReactElement} - The action button component.
  */
 export declare const ActionButton: ({ action, id, ...rest }: ActionButtonProps) => import("react/jsx-runtime").JSX.Element;
 /**
@@ -24,7 +24,7 @@ export declare const ActionButton: ({ action, id, ...rest }: ActionButtonProps)
  *
  * @param {ActionModel} action - The action model to convert.
  * @param {string} [dataTestId] - Optional data test ID.
- * @returns {JSX.Element} - The MenuItem component for the given action.
+ * @returns {ReactElement} - The MenuItem component for the given action.
  */
 export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: string) => import("react/jsx-runtime").JSX.Element;
 /**
@@ -34,7 +34,7 @@ export declare const actionDataToMenuItem: (action: ActionModel, dataTestId?: st
  *
  * @param {ActionModel} action - The action model to convert.
  * @param {string} [dataTestId] - Optional data test ID.
- * @returns {JSX.Element} - The ActionButton component for the given action.
+ * @returns {ReactElement} - The ActionButton component for the given action.
  */
 export declare const actionDataToActionButton: (action: ActionModel) => import("react/jsx-runtime").JSX.Element;
 interface InnerActionButtonProps {
@@ -46,7 +46,7 @@ interface InnerActionButtonProps {
  *
  * @param {InnerActionButtonProps} props - The properties for the action icon.
  * @param {ActionModel} props.action - The action model defining what action to perform.
- * @returns {JSX.Element | null} - The icon for the action button, or null if no icon is defined.
+ * @returns {ReactElement | null} - The icon for the action button, or null if no icon is defined.
  */
 export declare const ActionIcon: ({ action }: InnerActionButtonProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/src/Table.d.ts

@@ -1,13 +1,14 @@
 import { Table as ReactTable, Row } from "@tanstack/react-table";
 import { CommonProps, EmptyStateProps } from "@trackunit/react-components";
 import { RelayPagination } from "@trackunit/react-table-pagination";
+import { ReactElement, ReactNode } from "react";
 export interface TableProps<TData extends object> extends ReactTable<TData>, CommonProps {
     pagination?: RelayPagination;
-    headerLeftActions?: React.ReactNode;
-    headerRightActions?: React.ReactNode;
-    footerRightActions?: React.ReactNode;
+    headerLeftActions?: ReactNode;
+    headerRightActions?: ReactNode;
+    footerRightActions?: ReactNode;
     onRowClick?: (row: Row<TData>) => void;
-    noDataMessage?: JSX.Element | string;
+    noDataMessage?: ReactElement | string;
     loading?: boolean;
     rowHeight?: number;
     hideFooter?: boolean;
@@ -19,6 +20,9 @@ export interface TableProps<TData extends object> extends ReactTable<TData>, Com
  * Table component for displaying large sets of data in tables with infinite scroll, sorting, filtering and others.
  *
  * @param {ReactTable} props - The props for the Table component
- * @returns {JSX.Element} Table component
+ * @returns {ReactElement} Table component
+ */
+/**
+ *
  */
 export declare const Table: <TData extends object>({ rowHeight, ...props }: TableProps<TData>) => import("react/jsx-runtime").JSX.Element;

package/src/menus/ColumnFilter.d.ts

@@ -12,7 +12,7 @@ export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterVa
  * @template TColumnFilter - The type representing the data model associated with the columns.
  * @template TColumnFilterValue - The type representing the value of columns.
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
- * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
+ * @returns {ReactElement | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
  */
 export declare const ColumnFilter: <TColumnFilter extends object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => import("react/jsx-runtime").JSX.Element;
 export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends object, TColumnFiltersDragAndDropValue> {

package/src/menus/RowSpacing.d.ts

@@ -8,7 +8,7 @@ interface RowDensityProps {
  * RowSpacing component for managing the density of table rows.
  *
  * @param {RowDensityProps} props - The props object containing row density properties.
- * @returns {JSX.Element} A React JSX element representing the RowSpacing component.
+ * @returns {ReactElement} A React JSX element representing the RowSpacing component.
  */
 export declare const RowSpacing: ({ density, setRowDensity, onUserEvent }: RowDensityProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/src/menus/Sorting.d.ts

@@ -1,4 +1,5 @@
 import { Column } from "@tanstack/react-table";
+import { ReactElement } from "react";
 interface SortingProps<TSorting extends object, TSortingValue> {
     columns: Column<TSorting, TSortingValue>[];
 }
@@ -8,7 +9,7 @@ interface SortingProps<TSorting extends object, TSortingValue> {
  * @template TSorting - The type representing the data model associated with the columns.
  * @template TSortingValue - The type representing the value of columns.
  * @param {SortingProps<TSorting, TSortingValue>} props - The props object containing sorting properties.
- * @returns {JSX.Element | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
+ * @returns {ReactElement | null} A React JSX element representing the Sorting component or null if there are no sortable columns.
  */
-export declare const Sorting: <TSorting extends object, TSortingValue>({ columns, }: SortingProps<TSorting, TSortingValue>) => JSX.Element | null;
+export declare const Sorting: <TSorting extends object, TSortingValue>({ columns, }: SortingProps<TSorting, TSortingValue>) => ReactElement | null;
 export {};