diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index dca5b67..dda2427 100644 --- a/.github/workflows/ci.yml +++ b/.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 diff --git a/CHANGELOG.md b/CHANGELOG.md index 38ebdd5..f77e1cf 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index a30e974..da1a80c 100644 --- a/package.json +++ b/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": { diff --git a/src/lib/ReactDataTable/ReactDataTable.tsx b/src/lib/ReactDataTable/ReactDataTable.tsx index 62c24ad..dcd72e6 100644 --- a/src/lib/ReactDataTable/ReactDataTable.tsx +++ b/src/lib/ReactDataTable/ReactDataTable.tsx @@ -20,7 +20,7 @@ import Skeleton from "react-loading-skeleton"; interface TableInternalProps> extends ReactDataTableProps { virtualizer?: Virtualizer; - tableRef?: React.RefObject; + tableRef?: React.RefObject; } const TableInternal = >(props: TableInternalProps) => { diff --git a/src/lib/ReactDataTable/ReactDataTableProps.ts b/src/lib/ReactDataTable/ReactDataTableProps.ts index d202824..7fb4a99 100644 --- a/src/lib/ReactDataTable/ReactDataTableProps.ts +++ b/src/lib/ReactDataTable/ReactDataTableProps.ts @@ -9,8 +9,10 @@ import { useVirtualizationTableHeightProps } from "../hooks/useVirtualizationTab /** * The props for the ReactDataTable component */ -export interface ReactDataTableProps - extends Pick { +export interface ReactDataTableProps extends Pick< + useVirtualizationTableHeightProps, + "onPseudoHeightChange" +> { /** * the table instance returned from useReactDataTable or useReactTable */ diff --git a/src/lib/ReactDataTable/TableBody.tsx b/src/lib/ReactDataTable/TableBody.tsx index 2cac981..e85ef4d 100644 --- a/src/lib/ReactDataTable/TableBody.tsx +++ b/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> - extends Pick, "enableRowClick" | "onRowClick" | "subRowComponent"> { +interface TableBodyProps> extends Pick< + ReactDataTableProps, + "enableRowClick" | "onRowClick" | "subRowComponent" +> { enableDragAndDrop: boolean; table: Table; rowStyle?: (row: TData) => CSSProperties; diff --git a/src/lib/ReactDataTable/TableRows.tsx b/src/lib/ReactDataTable/TableRows.tsx index e312c71..d223215 100644 --- a/src/lib/ReactDataTable/TableRows.tsx +++ b/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> - extends Pick, "onRowClick" | "enableRowClick" | "subRowComponent"> { +interface TableRowProps> extends Pick< + ReactDataTableProps, + "onRowClick" | "enableRowClick" | "subRowComponent" +> { row: Row; enableRowSelection?: boolean | ((row: Row) => boolean); fullRowSelectable?: boolean; diff --git a/src/lib/hooks/useVirtualizationTableHeight.tsx b/src/lib/hooks/useVirtualizationTableHeight.tsx index e89650d..f324880 100644 --- a/src/lib/hooks/useVirtualizationTableHeight.tsx +++ b/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, + tableRef: React.RefObject, virtualHeight: number, onPseudoHeightChange: useVirtualizationTableHeightProps["onPseudoHeightChange"], ) => { @@ -19,7 +19,7 @@ const adjustTableHeight = ( }; export interface useVirtualizationTableHeightProps { - parentRef: React.RefObject; + parentRef: React.RefObject; virtualizer: Virtualizer; enabled: boolean; onPseudoHeightChange?: (height: number) => void; diff --git a/src/lib/types/TableState.ts b/src/lib/types/TableState.ts index bbf8a1a..5d2f18e 100644 --- a/src/lib/types/TableState.ts +++ b/src/lib/types/TableState.ts @@ -10,8 +10,10 @@ type FilterModel = { [k: string]: any }; /** * The table sorting state */ -interface TableState - extends Pick["state"], "pagination" | "rowSelection" | "expanded"> { +interface TableState extends Pick< + CoreOptions["state"], + "pagination" | "rowSelection" | "expanded" +> { /** * The column filters state */ diff --git a/src/lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable.tsx b/src/lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable.tsx index 9dbce79..c39f0a3 100644 --- a/src/lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable.tsx +++ b/src/lib/useFullyControlledReactDataTable/useFullyControlledReactDataTable.tsx @@ -5,11 +5,10 @@ import { FilterModel, TableState } from "../types/TableState"; type WithRequired = T & { [P in K]-?: T[P] }; -interface useFullyControlledReactDataTableProps - extends WithRequired< - Omit, "manualFiltering" | "manualPagination" | "manualSorting">, - "onColumnFiltersChange" | "onPaginationChange" | "onSortingChange" - > { +interface useFullyControlledReactDataTableProps extends WithRequired< + Omit, "manualFiltering" | "manualPagination" | "manualSorting">, + "onColumnFiltersChange" | "onPaginationChange" | "onSortingChange" +> { state: { columnFilters: TableState["columnFilters"]; pagination: TableState["pagination"]; diff --git a/src/react-table.d.ts b/src/react-table.d.ts index 51029df..47af6ce 100644 --- a/src/react-table.d.ts +++ b/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; diff --git a/test/DataTable/DataTable.test.tsx b/test/DataTable/DataTable.test.tsx index 1bd4fc9..5178e8f 100644 --- a/test/DataTable/DataTable.test.tsx +++ b/test/DataTable/DataTable.test.tsx @@ -1,3 +1,8 @@ +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"; @@ -5,7 +10,6 @@ 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"); } diff --git a/test/DataTable/__snapshots__/DataTable.test.tsx.snap b/test/DataTable/__snapshots__/DataTable.test.tsx.snap index 3b7a458..459a214 100644 --- a/test/DataTable/__snapshots__/DataTable.test.tsx.snap +++ b/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`] = `
@@ -82,7 +82,7 @@ exports[`DataTable renders correctly 1`] = `