@cutting/material-react-table 4.0.3 → 4.0.4

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.3",
+  "version": "4.0.4",
   "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.",

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,
+    }));
+};