Merge pull request #725 from icflorescu/next

icflorescu · web-flow · commit b63bbd0548cc · 2025-06-24T15:58:24.000+03:00
Use ref prop instead of forwardRef, which was deprecated in React 19
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,11 +3,16 @@
 The following is a list of notable changes to the Mantine DataTable component.  
 Minor versions that are not listed in the changelog are bug fixes and small improvements.
 
-## 8.1.0 (2025-03-16)
+## 8.1.2 (2025-03-24)
+
+- Use `ref` prop instead of `forwardRef`, which was deprecated in React 19
+- Update dev deps
+
+## 8.1.1 (2025-06-16)
 
 - Update dependencies to ensure compatibility with Mantine 8.1.1
 
-## 8.1.0 (2025-03-11)
+## 8.1.0 (2025-06-11)
 
 - Update dependencies to ensure compatibility with Mantine 8.1 and Next.js 15.3
 - Fix [#698](https://github.com/icflorescu/mantine-datatable/issues/698) - first column header not pinned when using row selection
diff --git a/app/config.ts b/app/config.ts
@@ -1,5 +1,5 @@
 import type { MantineColor } from '@mantine/core';
-import type { Icon, IconProps } from '@tabler/icons-react';
+import type { Icon } from '@tabler/icons-react';
 import {
   IconAdjustments,
   IconBrandCss3,
@@ -11,7 +11,6 @@ import {
   IconThumbUp,
 } from '@tabler/icons-react';
 import type { Route } from 'next';
-import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 export const PRODUCT_NAME = 'Mantine DataTable';
 export const PRODUCT_DESCRIPTION =
@@ -47,10 +46,7 @@ export type RouteInfo = {
   href: Route;
   title: string;
   description: string;
-} & (
-  | { icon?: never; color?: never }
-  | { icon: ForwardRefExoticComponent<Omit<IconProps, 'ref'> & RefAttributes<Icon>>; color: MantineColor }
-);
+} & ({ icon?: never; color?: never } | { icon: Icon; color: MantineColor });
 
 export const EXAMPLES_ROUTE_COLOR: MantineColor = 'green';
 
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "8.1.1",
+  "version": "8.1.2",
   "description": "The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more",
   "keywords": [
     "mantine",
@@ -84,32 +84,32 @@
     "@mantine/modals": "^8.1.1",
     "@mantine/notifications": "^8.1.1",
     "@tabler/icons-react": "^3.34.0",
-    "@tanstack/react-query": "^5.80.7",
-    "@types/lodash": "^4.17.17",
+    "@tanstack/react-query": "^5.81.2",
+    "@types/lodash": "^4.17.18",
     "@types/node": "^24.0.3",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
-    "@typescript-eslint/eslint-plugin": "^8.34.0",
-    "@typescript-eslint/parser": "^8.34.0",
+    "@typescript-eslint/eslint-plugin": "^8.35.0",
+    "@typescript-eslint/parser": "^8.35.0",
     "clsx": "^2.1.1",
     "cssnano": "^7.0.7",
     "dayjs": "^1.11.13",
     "eslint": "^9.29.0",
-    "eslint-config-next": "^15.3.3",
+    "eslint-config-next": "^15.3.4",
     "eslint-config-prettier": "^10.1.5",
     "lodash": "^4.17.21",
     "mantine-contextmenu": "^8.1.2",
-    "next": "^15.3.3",
-    "postcss": "^8.5.5",
+    "next": "^15.3.4",
+    "postcss": "^8.5.6",
     "postcss-cli": "^11.0.1",
-    "postcss-import": "^16.1.0",
+    "postcss-import": "^16.1.1",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.5.3",
+    "prettier": "^3.6.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "sharp": "^0.34.2",
-    "shiki": "^3.6.0",
+    "shiki": "^3.7.0",
     "swr": "^2.3.3",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3"
diff --git a/package/DataTableFooter.tsx b/package/DataTableFooter.tsx
@@ -1,6 +1,5 @@
 import { TableTfoot, TableTr, rem, type MantineStyleProp } from '@mantine/core';
 import clsx from 'clsx';
-import { forwardRef, type JSX } from 'react';
 import { DataTableFooterCell } from './DataTableFooterCell';
 import { DataTableFooterSelectorPlaceholderCell } from './DataTableFooterSelectorPlaceholderCell';
 import type { DataTableColumn, DataTableDefaultColumnProps } from './types';
@@ -13,20 +12,19 @@ type DataTableFooterProps<T> = {
   selectionVisible: boolean;
   selectorCellShadowVisible: boolean;
   scrollDiff: number;
+  ref: React.Ref<HTMLTableSectionElement>;
 };
 
-export const DataTableFooter = forwardRef(function DataTableFooter<T>(
-  {
-    className,
-    style,
-    columns,
-    defaultColumnProps,
-    selectionVisible,
-    selectorCellShadowVisible,
-    scrollDiff,
-  }: DataTableFooterProps<T>,
-  ref: React.ForwardedRef<HTMLTableSectionElement>
-) {
+export function DataTableFooter<T>({
+  className,
+  style,
+  columns,
+  defaultColumnProps,
+  selectionVisible,
+  selectorCellShadowVisible,
+  scrollDiff,
+  ref,
+}: DataTableFooterProps<T>) {
   const relative = scrollDiff < 0;
   return (
     <TableTfoot
@@ -74,4 +72,4 @@ export const DataTableFooter = forwardRef(function DataTableFooter<T>(
       </TableTr>
     </TableTfoot>
   );
-}) as <T>(props: DataTableFooterProps<T> & { ref: React.ForwardedRef<HTMLTableSectionElement> }) => JSX.Element;
+}
diff --git a/package/DataTableHeader.tsx b/package/DataTableHeader.tsx
@@ -11,7 +11,7 @@ import {
   type MantineStyleProp,
 } from '@mantine/core';
 import clsx from 'clsx';
-import { forwardRef, useState, type JSX } from 'react';
+import { useState } from 'react';
 import { DataTableColumnGroupHeaderCell } from './DataTableColumnGroupHeaderCell';
 import { useDataTableColumnsContext } from './DataTableColumns.context';
 import { DataTableHeaderCell } from './DataTableHeaderCell';
@@ -39,31 +39,30 @@ type DataTableHeaderProps<T> = {
   selectorCellShadowVisible: boolean;
   selectionColumnClassName: string | undefined;
   selectionColumnStyle: MantineStyleProp;
+  ref: React.Ref<HTMLTableSectionElement>;
 };
 
-export const DataTableHeader = forwardRef(function DataTableHeader<T>(
-  {
-    selectionColumnHeaderRef,
-    className,
-    style,
-    sortStatus,
-    sortIcons,
-    onSortStatusChange,
-    columns,
-    defaultColumnProps,
-    groups,
-    selectionTrigger,
-    selectionVisible,
-    selectionChecked,
-    selectionIndeterminate,
-    onSelectionChange,
-    selectionCheckboxProps,
-    selectorCellShadowVisible,
-    selectionColumnClassName,
-    selectionColumnStyle,
-  }: DataTableHeaderProps<T>,
-  ref: React.ForwardedRef<HTMLTableSectionElement>
-) {
+export function DataTableHeader<T>({
+  selectionColumnHeaderRef,
+  className,
+  style,
+  sortStatus,
+  sortIcons,
+  onSortStatusChange,
+  columns,
+  defaultColumnProps,
+  groups,
+  selectionTrigger,
+  selectionVisible,
+  selectionChecked,
+  selectionIndeterminate,
+  onSelectionChange,
+  selectionCheckboxProps,
+  selectorCellShadowVisible,
+  selectionColumnClassName,
+  selectionColumnStyle,
+  ref,
+}: DataTableHeaderProps<T>) {
   const allRecordsSelectorCell = selectionVisible ? (
     <DataTableHeaderSelectorCell
       ref={selectionColumnHeaderRef}
@@ -200,4 +199,4 @@ export const DataTableHeader = forwardRef(function DataTableHeader<T>(
   ) : (
     content
   );
-}) as <T>(props: DataTableHeaderProps<T> & { ref: React.ForwardedRef<HTMLTableSectionElement> }) => JSX.Element;
+}
diff --git a/package/DataTableHeaderSelectorCell.tsx b/package/DataTableHeaderSelectorCell.tsx
@@ -1,7 +1,6 @@
 import type { MantineStyleProp } from '@mantine/core';
 import { Checkbox, TableTh, type CheckboxProps } from '@mantine/core';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
 import type { DataTableSelectionTrigger } from './types';
 import { POINTER_CURSOR } from './utilityClasses';
 
@@ -15,22 +14,21 @@ type DataTableHeaderSelectorCellProps = {
   checkboxProps: CheckboxProps;
   onChange: (() => void) | undefined;
   rowSpan: number | undefined;
+  ref: React.Ref<HTMLTableCellElement>;
 };
 
-export const DataTableHeaderSelectorCell = forwardRef(function DataTableHeaderSelectorCell(
-  {
-    className,
-    style,
-    trigger,
-    shadowVisible,
-    checked,
-    indeterminate,
-    checkboxProps,
-    onChange,
-    rowSpan,
-  }: DataTableHeaderSelectorCellProps,
-  ref: React.ForwardedRef<HTMLTableCellElement>
-) {
+export function DataTableHeaderSelectorCell({
+  className,
+  style,
+  trigger,
+  shadowVisible,
+  checked,
+  indeterminate,
+  checkboxProps,
+  onChange,
+  rowSpan,
+  ref,
+}: DataTableHeaderSelectorCellProps) {
   const enabled = !checkboxProps.disabled;
 
   return (
@@ -56,4 +54,4 @@ export const DataTableHeaderSelectorCell = forwardRef(function DataTableHeaderSe
       />
     </TableTh>
   );
-});
+}
diff --git a/package/DataTablePagination.tsx b/package/DataTablePagination.tsx
@@ -1,6 +1,6 @@
 import { Box, Pagination, Text, rem, type MantineSpacing, type MantineStyleProp } from '@mantine/core';
 import clsx from 'clsx';
-import { forwardRef, type ForwardedRef, type JSX } from 'react';
+import { type ForwardedRef } from 'react';
 import { DataTablePageSizeSelector } from './DataTablePageSizeSelector';
 import { getPaginationCssVariables } from './cssVariables';
 import { useMediaQueryStringOrFunction } from './hooks';
@@ -20,35 +20,34 @@ type DataTablePaginationComponentProps = WithOptionalProperty<
   recordsLength: number | undefined;
   horizontalSpacing: MantineSpacing | undefined;
   noRecordsText: string;
+  ref: ForwardedRef<HTMLDivElement>;
 };
 
-export const DataTablePagination = forwardRef(function DataTablePagination(
-  {
-    className,
-    style,
-    fetching,
-    page,
-    onPageChange,
-    paginationWithEdges,
-    paginationWithControls,
-    paginationActiveTextColor,
-    paginationActiveBackgroundColor,
-    paginationSize,
-    loadingText,
-    noRecordsText,
-    paginationText,
-    totalRecords,
-    recordsPerPage,
-    onRecordsPerPageChange,
-    recordsPerPageLabel,
-    recordsPerPageOptions,
-    recordsLength,
-    horizontalSpacing,
-    paginationWrapBreakpoint,
-    getPaginationControlProps,
-  }: DataTablePaginationComponentProps,
-  ref: ForwardedRef<HTMLDivElement>
-) {
+export function DataTablePagination({
+  className,
+  style,
+  fetching,
+  page,
+  onPageChange,
+  paginationWithEdges,
+  paginationWithControls,
+  paginationActiveTextColor,
+  paginationActiveBackgroundColor,
+  paginationSize,
+  loadingText,
+  noRecordsText,
+  paginationText,
+  totalRecords,
+  recordsPerPage,
+  onRecordsPerPageChange,
+  recordsPerPageLabel,
+  recordsPerPageOptions,
+  recordsLength,
+  horizontalSpacing,
+  paginationWrapBreakpoint,
+  getPaginationControlProps,
+  ref,
+}: DataTablePaginationComponentProps) {
   let paginationTextValue: React.ReactNode;
   if (totalRecords) {
     const from = (page - 1) * recordsPerPage + 1;
@@ -112,4 +111,4 @@ export const DataTablePagination = forwardRef(function DataTablePagination(
       />
     </Box>
   );
-}) as (props: DataTablePaginationComponentProps & { ref: ForwardedRef<HTMLDivElement> }) => JSX.Element;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
