@cutting/material-react-table 4.0.3 → 4.0.5

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.3",
+  "version": "4.0.5",
   "license": "MIT",
   "name": "@cutting/material-react-table",
   "description": "Maintenance fork of material-react-table updated for Material UI v9. A fully featured Material UI implementation of TanStack React Table V8.",
@@ -55,47 +55,47 @@
     "@emotion/styled": "^11.14.1",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^10.0.1",
-    "@faker-js/faker": "^10.4.0",
-    "@mui/icons-material": "^9.0.1",
-    "@mui/material": "^9.0.1",
-    "@mui/x-date-pickers": "^9.3.0",
+    "@faker-js/faker": "^10.5.0",
+    "@mui/icons-material": "^9.1.1",
+    "@mui/material": "^9.1.1",
+    "@mui/x-date-pickers": "^9.6.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@size-limit/preset-small-lib": "^12.1.0",
-    "@storybook/addon-a11y": "^10.4.0",
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-links": "^10.4.0",
-    "@storybook/react-vite": "^10.4.0",
+    "@storybook/addon-a11y": "^10.4.6",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-links": "^10.4.6",
+    "@storybook/react-vite": "^10.4.6",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.9.1",
-    "@types/react": "^19.2.15",
+    "@types/node": "^26.0.0",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@typescript-eslint/eslint-plugin": "^8.59.4",
-    "@typescript-eslint/parser": "^8.59.4",
+    "@typescript-eslint/eslint-plugin": "^8.61.1",
+    "@typescript-eslint/parser": "^8.61.1",
     "@vitejs/plugin-react": "^6.0.2",
-    "dayjs": "^1.11.20",
-    "eslint": "^10.4.0",
+    "dayjs": "^1.11.21",
+    "eslint": "^10.5.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^5.9.0",
-    "eslint-plugin-storybook": "^10.4.0",
+    "eslint-plugin-perfectionist": "^5.9.1",
+    "eslint-plugin-storybook": "^10.4.6",
     "globals": "^17.6.0",
     "jsdom": "^29.1.1",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "react-is": "^19.2.6",
-    "rollup": "^4.60.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-is": "^19.2.7",
+    "rollup": "^4.62.0",
     "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-delete": "^3.0.2",
     "rollup-plugin-dts": "^6.4.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^12.1.0",
-    "storybook": "^10.4.0",
+    "storybook": "^10.4.6",
     "storybook-dark-mode": "^5.0.0",
     "tslib": "^2.8.1",
     "typescript": "6.0.3",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.7"
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.13",
@@ -109,7 +109,7 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.19.4",
     "@tanstack/react-table": "8.21.3",
-    "@tanstack/react-virtual": "3.13.25",
+    "@tanstack/react-virtual": "3.14.3",
     "highlight-words": "2.0.0"
   },
   "scripts": {

package/src/MaterialReactTable.smoke.test.tsx

@@ -53,4 +53,23 @@ describe('MaterialReactTable smoke', () => {
     );
     expect(firstBodyRow?.textContent).toContain('Aaron');
   });
+
+  test('wraps matching text in a highlight span when global filter is active', () => {
+    render(
+      <MaterialReactTable
+        columns={columns}
+        data={data}
+        enableFilterMatchHighlighting
+        enableGlobalFilter
+        initialState={{ globalFilter: 'Sar', showGlobalFilter: true }}
+      />,
+    );
+
+    const highlightWrapper = screen.getByRole('note', { name: 'Sara' });
+    expect(highlightWrapper).toBeInTheDocument();
+
+    const matchSpans = highlightWrapper.querySelectorAll('span');
+    expect(matchSpans.length).toBeGreaterThan(1);
+    expect(highlightWrapper.textContent).toBe('Sara');
+  });
 });

package/src/components/body/MRT_TableBodyCellValue.tsx

@@ -1,5 +1,4 @@
 import { Box } from '@mui/material';
-import highlightWords from 'highlight-words';
 import { type ReactNode, type RefObject } from 'react';
 
 import {
@@ -7,6 +6,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { highlightWords } from '../../utils/highlight.utils';
 
 const allowedTypes = ['string', 'number'];
 
@@ -78,7 +78,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
         allowedTypes.includes(typeof globalFilter) &&
         column.getCanGlobalFilter()))
   ) {
-    const chunks = highlightWords?.({
+    const chunks = highlightWords({
       matchExactly:
         (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
       query: (filterValue ?? globalFilter ?? '').toString(),

package/src/utils/highlight.utils.ts

@@ -0,0 +1,52 @@
+export interface HighlightChunk {
+  key: string;
+  match: boolean;
+  text: string;
+}
+
+interface HighlightWordsArgs {
+  matchExactly?: boolean;
+  query: string;
+  text: string;
+}
+
+const escapeRegExp = (term: string): string =>
+  term.replace(/[|\\{}()[\]^$+*?.-]/g, (char) => `\\${char}`);
+
+const termsToRegExpString = (terms: string): string =>
+  terms.replace(/\s{2,}/g, ' ').split(' ').join('|');
+
+const buildRegExp = (terms: string, matchExactly: boolean): RegExp => {
+  const fromString = /^([/~@;%#'])(.*?)\1([gimsuy]*)$/.exec(terms);
+  if (fromString) {
+    return new RegExp(fromString[2], fromString[3]);
+  }
+  const escaped = escapeRegExp(terms.trim());
+  const pattern = matchExactly ? escaped : termsToRegExpString(escaped);
+  return new RegExp(`(${pattern})`, 'ig');
+};
+
+let uidCounter = 0;
+const uid = (): string => `mrt-hl-${(uidCounter += 1).toString(36)}`;
+
+export const highlightWords = ({
+  matchExactly = false,
+  query,
+  text,
+}: HighlightWordsArgs): HighlightChunk[] => {
+  const safeQuery = typeof query === 'string' ? query.trim() : query;
+  if (safeQuery === '') {
+    return [{ key: uid(), match: false, text }];
+  }
+  const searchRegexp = buildRegExp(query, matchExactly);
+  return text
+    .split(searchRegexp)
+    .filter((str) => str.length > 0)
+    .map((str) => ({
+      key: uid(),
+      match: matchExactly
+        ? str.toLowerCase() === safeQuery.toLowerCase()
+        : searchRegexp.test(str),
+      text: str,
+    }));
+};