update packages

.github/workflows/ci.yml

@@ -79,6 +79,7 @@ jobs:
     strategy:
       matrix:
         node-version: [20.x, 22.x, 24.x, 25.x]
+        react-version: [^18.2.0, ^19.0.0]
     steps:
       - uses: actions/checkout@v2
 
@@ -89,6 +90,7 @@ jobs:
           cache: "yarn"
 
       - run: yarn --frozen-lockfile
+      - run: yarn add react@${{ matrix.react-version }} react-dom@${{ matrix.react-version }} --dev
       - run: yarn lint
       - run: yarn build
       - run: yarn prettier-check

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Changed
+
+- migrated dependencies
+
 ## [5.15.0] - 2026-01-20
 
 ### Added

package.json

@@ -46,72 +46,73 @@
     "tsc": "tsc"
   },
   "dependencies": {
-    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/sortable": "^8.0.0",
     "@neolution-ch/javascript-utils": "^2.2.0",
-    "@neolution-ch/react-pattern-ui": "^5.3.0",
-    "@tanstack/react-table": "^8.12.0",
-    "@tanstack/react-virtual": "^3.13.12",
-    "react-loading-skeleton": "^3.3.1"
+    "@neolution-ch/react-pattern-ui": "https://pkg.pr.new/neolution-ch/react-pattern-ui/@neolution-ch/react-pattern-ui@80",
+    "@tanstack/react-table": "^8.21.3",
+    "@tanstack/react-virtual": "^3.13.18",
+    "react-loading-skeleton": "^3.5.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.8",
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18",
+    "@babel/core": "^7.29.0",
+    "@fortawesome/fontawesome-svg-core": "^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^7.2.0",
+    "@fortawesome/react-fontawesome": "^3.2.0",
     "@neolution-ch/eslint-config-neolution": "^2.3.0",
-    "@release-it/keep-a-changelog": "^3.1.0",
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-terser": "^0.4.1",
-    "@storybook/addon-actions": "^6.4.22",
-    "@storybook/addon-essentials": "^6.4.22",
-    "@storybook/addon-interactions": "^6.4.22",
-    "@storybook/addon-links": "^6.4.22",
-    "@storybook/react": "^6.4.22",
-    "@storybook/testing-library": "^0.0.9",
-    "@testing-library/dom": "^8.13.0",
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.1.2",
+    "@release-it/keep-a-changelog": "^7.0.1",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-actions": "^9.0.8",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/addon-links": "^10.2.8",
+    "@storybook/react": "^10.2.8",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.0.4",
-    "@types/jest": "^27.4.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/jest": "^30.0.0",
     "@types/node": "^18.16.3",
-    "@types/react": "^18.2.5",
-    "@types/react-dom": "^18.2.3",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/reactstrap": "^8.7.2",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
-    "bootstrap": "^4.0.0",
-    "concurrently": "^8.0.1",
-    "cross-env": "^7.0.3",
+    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@typescript-eslint/parser": "^8.55.0",
+    "bootstrap": "^5.3.8",
+    "concurrently": "^9.2.1",
+    "cross-env": "^10.1.0",
     "eslint": "^9.37.0",
     "eslint-plugin-storybook": "^0.10.0",
-    "gh-pages": "^5.0.0",
-    "jest": "^27.5.1",
-    "nodemon": "^2.0.22",
-    "prettier": "^3.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "reactstrap": "^8.10.1",
-    "release-it": "^15.10.3",
-    "rollup": "^3.21.4",
-    "rollup-plugin-import-css": "^3.2.1",
+    "gh-pages": "^6.3.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "nodemon": "^3.1.11",
+    "prettier": "^3.8.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "reactstrap": "^9.2.3",
+    "release-it": "^19.2.4",
+    "rollup": "^4.57.1",
+    "rollup-plugin-import-css": "^4.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-typescript2": "^0.34.1",
-    "shx": "^0.3.4",
-    "ts-jest": "^27.1.4",
-    "typescript": "^5.0.4",
-    "webpack": "^5.82.0",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "shx": "^0.4.0",
+    "ts-jest": "^29.4.6",
+    "typescript": "^5.9.3",
+    "webpack": "^5.105.2",
     "yalc": "^1.0.0-pre.53"
   },
   "peerDependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.1.1",
-    "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-fontawesome": "^0.1.18 || ^0.2.0",
-    "react": "^17.0.0 || ^18.0.0",
-    "react-dom": "^17.0.0 || ^18.0.0",
+    "@fortawesome/fontawesome-svg-core": "^6.1.1 || ^7.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1 || ^7.2.0",
+    "@fortawesome/react-fontawesome": "^0.1.18 || ^0.2.0 || ^3.2.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
     "reactstrap": "^8.0.0 || ^9.0.0"
   },
   "engines": {

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -20,7 +20,7 @@ import Skeleton from "react-loading-skeleton";
 
 interface TableInternalProps<TData, TFilter extends FilterModel = Record<string, never>> extends ReactDataTableProps<TData, TFilter> {
   virtualizer?: Virtualizer<HTMLDivElement, Element>;
-  tableRef?: React.RefObject<HTMLTableElement>;
+  tableRef?: React.RefObject<HTMLTableElement | null>;
 }
 
 const TableInternal = <TData, TFilter extends FilterModel = Record<string, never>>(props: TableInternalProps<TData, TFilter>) => {

src/lib/ReactDataTable/ReactDataTableProps.ts

@@ -9,8 +9,10 @@ import { useVirtualizationTableHeightProps } from "../hooks/useVirtualizationTab
 /**
  * The props for the ReactDataTable component
  */
-export interface ReactDataTableProps<TData, TFilter extends FilterModel>
-  extends Pick<useVirtualizationTableHeightProps, "onPseudoHeightChange"> {
+export interface ReactDataTableProps<TData, TFilter extends FilterModel> extends Pick<
+  useVirtualizationTableHeightProps,
+  "onPseudoHeightChange"
+> {
   /**
    * the table instance returned from useReactDataTable or useReactTable
    */

src/lib/ReactDataTable/TableBody.tsx

@@ -6,8 +6,10 @@ import { FilterModel } from "../types/TableState";
 import { ReactDataTableProps } from "./ReactDataTableProps";
 import { Virtualizer } from "@tanstack/react-virtual";
 
-interface TableBodyProps<TData, TFilter extends FilterModel = Record<string, never>>
-  extends Pick<ReactDataTableProps<TData, TFilter>, "enableRowClick" | "onRowClick" | "subRowComponent"> {
+interface TableBodyProps<TData, TFilter extends FilterModel = Record<string, never>> extends Pick<
+  ReactDataTableProps<TData, TFilter>,
+  "enableRowClick" | "onRowClick" | "subRowComponent"
+> {
   enableDragAndDrop: boolean;
   table: Table<TData>;
   rowStyle?: (row: TData) => CSSProperties;

src/lib/ReactDataTable/TableRows.tsx

@@ -6,8 +6,10 @@ import { getCommonPinningStyles } from "../utils/getCommonPinningStyles";
 import { FilterModel } from "../types/TableState";
 import { ReactDataTableProps } from "./ReactDataTableProps";
 
-interface TableRowProps<TData, TFilter extends FilterModel = Record<string, never>>
-  extends Pick<ReactDataTableProps<TData, TFilter>, "onRowClick" | "enableRowClick" | "subRowComponent"> {
+interface TableRowProps<TData, TFilter extends FilterModel = Record<string, never>> extends Pick<
+  ReactDataTableProps<TData, TFilter>,
+  "onRowClick" | "enableRowClick" | "subRowComponent"
+> {
   row: Row<TData>;
   enableRowSelection?: boolean | ((row: Row<TData>) => boolean);
   fullRowSelectable?: boolean;

src/lib/hooks/useVirtualizationTableHeight.tsx

@@ -2,7 +2,7 @@ import { Virtualizer } from "@tanstack/react-virtual";
 import { useCallback, useEffect, useRef, useState } from "react";
 
 const adjustTableHeight = (
-  tableRef: React.RefObject<HTMLTableElement>,
+  tableRef: React.RefObject<HTMLTableElement | null>,
   virtualHeight: number,
   onPseudoHeightChange: useVirtualizationTableHeightProps["onPseudoHeightChange"],
 ) => {
@@ -19,7 +19,7 @@ const adjustTableHeight = (
 };
 
 export interface useVirtualizationTableHeightProps {
-  parentRef: React.RefObject<HTMLDivElement>;
+  parentRef: React.RefObject<HTMLDivElement | null>;
   virtualizer: Virtualizer<HTMLDivElement, Element>;
   enabled: boolean;
   onPseudoHeightChange?: (height: number) => void;

src/lib/types/TableState.ts

@@ -10,8 +10,10 @@ type FilterModel = { [k: string]: any };
 /**
  * The table sorting state
  */
-interface TableState<TData, TFilter extends FilterModel>
-  extends Pick<CoreOptions<TData>["state"], "pagination" | "rowSelection" | "expanded"> {
+interface TableState<TData, TFilter extends FilterModel> extends Pick<
+  CoreOptions<TData>["state"],
+  "pagination" | "rowSelection" | "expanded"
+> {
   /**
    * The column filters state
    */

src/lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable.tsx

@@ -5,11 +5,10 @@ import { FilterModel, TableState } from "../types/TableState";
 
 type WithRequired<T, K extends keyof T> = T & { [P in K]-?: T[P] };
 
-interface useFullyControlledReactDataTableProps<TData, TFilter extends FilterModel>
-  extends WithRequired<
-    Omit<useReactDataTableProps<TData, TFilter>, "manualFiltering" | "manualPagination" | "manualSorting">,
-    "onColumnFiltersChange" | "onPaginationChange" | "onSortingChange"
-  > {
+interface useFullyControlledReactDataTableProps<TData, TFilter extends FilterModel> extends WithRequired<
+  Omit<useReactDataTableProps<TData, TFilter>, "manualFiltering" | "manualPagination" | "manualSorting">,
+  "onColumnFiltersChange" | "onPaginationChange" | "onSortingChange"
+> {
   state: {
     columnFilters: TableState<TData, TFilter>["columnFilters"];
     pagination: TableState<TData, TFilter>["pagination"];

src/react-table.d.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { RowData, Table } from "@tanstack/react-table";
-import { CSSProperties } from "react";
+import { CSSProperties, JSX } from "react";
 
 interface DropdownColumnFilterOption {
   label: string;

test/DataTable/DataTable.test.tsx

@@ -1,11 +1,15 @@
+import { TextDecoder, TextEncoder } from "util";
+
+global.TextEncoder = TextEncoder as unknown as typeof global.TextEncoder;
+global.TextDecoder = TextDecoder as unknown as typeof global.TextDecoder;
+
 import { render, fireEvent } from "@testing-library/react";
 import { renderHook } from "@testing-library/react-hooks/server";
 import "@testing-library/jest-dom";
 import React from "react";
 import { ReactDataTable, createReactDataTableColumnHelper, useReactDataTable } from "src";
 
 global.React = React; // this also works for other globally available libraries
-
 function padTo2Digits(num: number) {
   return num.toString().padStart(2, "0");
 }

test/DataTable/__snapshots__/DataTable.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`DataTable renders correctly 1`] = `
 <div>
@@ -82,7 +82,7 @@ exports[`DataTable renders correctly 1`] = `
         </th>
         <th>
           <select
-            class="form-control-sm form-control"
+            class="form-select-sm form-select"
           >
             <option
               value=""
@@ -103,7 +103,7 @@ exports[`DataTable renders correctly 1`] = `
         </th>
         <th>
           <select
-            class="form-control-sm form-control"
+            class="form-select-sm form-select"
           >
             <option
               value=""
@@ -325,7 +325,7 @@ exports[`DataTable renders correctly 1`] = `
     aria-live="assertive"
     id="DndLiveRegion-0"
     role="status"
-    style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
   />
   <div
     class="container-fluid paging"
@@ -352,6 +352,7 @@ exports[`DataTable renders correctly 1`] = `
           <div
             aria-hidden="true"
             class="dropdown-menu"
+            data-bs-popper="static"
             role="menu"
             tabindex="-1"
           >
@@ -574,7 +575,7 @@ exports[`DataTable renders with draggable-column correctly 1`] = `
         </th>
         <th>
           <select
-            class="form-control-sm form-control"
+            class="form-select-sm form-select"
           >
             <option
               value=""
@@ -595,7 +596,7 @@ exports[`DataTable renders with draggable-column correctly 1`] = `
         </th>
         <th>
           <select
-            class="form-control-sm form-control"
+            class="form-select-sm form-select"
           >
             <option
               value=""
@@ -847,7 +848,7 @@ exports[`DataTable renders with draggable-column correctly 1`] = `
     aria-live="assertive"
     id="DndLiveRegion-4"
     role="status"
-    style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
   />
   <div
     class="container-fluid paging"
@@ -874,6 +875,7 @@ exports[`DataTable renders with draggable-column correctly 1`] = `
           <div
             aria-hidden="true"
             class="dropdown-menu"
+            data-bs-popper="static"
             role="menu"
             tabindex="-1"
           >
@@ -1231,7 +1233,7 @@ exports[`DataTable renders without header correctly 1`] = `
     aria-live="assertive"
     id="DndLiveRegion-1"
     role="status"
-    style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
   />
   <div
     class="container-fluid paging"
@@ -1258,6 +1260,7 @@ exports[`DataTable renders without header correctly 1`] = `
           <div
             aria-hidden="true"
             class="dropdown-menu"
+            data-bs-popper="static"
             role="menu"
             tabindex="-1"
           >
@@ -1615,7 +1618,7 @@ exports[`DataTable renders without page changing correctly 1`] = `
     aria-live="assertive"
     id="DndLiveRegion-3"
     role="status"
-    style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
   />
   <div
     class="container-fluid paging"
@@ -1934,7 +1937,7 @@ exports[`DataTable renders without paging correctly 1`] = `
     aria-live="assertive"
     id="DndLiveRegion-2"
     role="status"
-    style="position: fixed; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
+    style="position: fixed; top: 0px; left: 0px; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%); white-space: nowrap;"
   />
 </div>
 `;