Merge pull request #457 from KevinVandy/427-clear-columnfilters-searc…

…h-input-is-not-cleared-when-columnfilter-is-set-to-empty-array-using-custom-reset-button 427 clear columnfilters search input is not cleared when columnfilter is set to empty array using custom reset button
KevinVandy · Dec 10, 2024 · 3f369c1 · 3f369c1
2 parents 0446cd0 + 6b05a38
commit 3f369c1
Show file tree

Hide file tree

Showing 140 changed files with 6,819 additions and 7,934 deletions.
diff --git a/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx b/apps/mantine-react-table-docs/components/mdx/SourceCodeSnippet.tsx
@@ -183,9 +183,12 @@ export const SourceCodeSnippet = ({
                         setColorScheme(
                           value?.startsWith('dark') ? 'dark' : 'light',
                         );
-                        value === 'darkDark'
-                          ? setDarkDark(true)
-                          : setDarkDark(false);
+
+                        if (value === 'darkDark') {
+                          setDarkDark(true);
+                        } else {
+                          setDarkDark(false);
+                        }
                         plausible(`toggle-theme-${value}-mode`);
                       }}
                       className={classes.colorSchemeSelect}

diff --git a/apps/mantine-react-table-docs/components/prop-tables/CellInstanceAPIsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/CellInstanceAPIsSource.tsx
@@ -1,5 +1,6 @@
 import { Box, Text } from '@mantine/core';
 import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const TS = require('!!raw-loader!./CellInstanceAPIsTable.tsx').default;
 
 const ExampleTable = () => {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/ColumnInstanceAPIsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/ColumnInstanceAPIsSource.tsx
@@ -1,5 +1,6 @@
 import { Box, Text } from '@mantine/core';
 import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const TS = require('!!raw-loader!./ColumnInstanceAPIsTable.tsx').default;
 
 const ExampleTable = () => {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/ColumnOptionsSource.tsx
@@ -1,5 +1,6 @@
 import { Box, Text } from '@mantine/core';
 import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const TS = require('!!raw-loader!./ColumnOptionsTable.tsx').default;
 
 const ExampleTable = () => {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/RowInstanceAPIsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/RowInstanceAPIsSource.tsx
@@ -1,5 +1,6 @@
 import { Box, Text } from '@mantine/core';
 import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const TS = require('!!raw-loader!./RowInstanceAPIsTable.tsx').default;
 
 const ExampleTable = () => {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/StateOptionsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/StateOptionsSource.tsx
@@ -1,5 +1,6 @@
 import { Box, Text } from '@mantine/core';
 import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const TS = require('!!raw-loader!./StateOptionsTable.tsx').default;
 
 const ExampleTable = () => {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/TableInstanceAPIsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/TableInstanceAPIsSource.tsx
@@ -1,5 +1,6 @@
 import { Box, Text } from '@mantine/core';
 import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const TS = require('!!raw-loader!./TableInstanceAPIsTable.tsx').default;
 
 const ExampleTable = () => {

diff --git a/apps/mantine-react-table-docs/components/prop-tables/TableOptionsSource.tsx b/apps/mantine-react-table-docs/components/prop-tables/TableOptionsSource.tsx
@@ -1,5 +1,6 @@
 import { Box, Text } from '@mantine/core';
 import { SourceCodeSnippet } from '../mdx/SourceCodeSnippet';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
 const TS = require('!!raw-loader!./TableOptionsTable.tsx').default;
 
 const ExampleTable = () => {

diff --git a/apps/mantine-react-table-docs/package.json b/apps/mantine-react-table-docs/package.json
@@ -46,7 +46,7 @@
     "@types/react-dom": "^18.3.1",
     "@typescript-eslint/eslint-plugin": "^8.8.1",
     "@typescript-eslint/parser": "^8.8.1",
-    "eslint": "9.12.0",
+    "eslint": "^8.57.0",
     "eslint-config-next": "14.2.15",
     "next-plausible": "^3.12.2",
     "postcss": "^8.4.47",

diff --git a/packages/mantine-react-table/.eslintrc b/packages/mantine-react-table/.eslintrc
@@ -2,7 +2,7 @@
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:perfectionist/recommended-natural"
+    "plugin:perfectionist/recommended-natural-legacy",
   ],
   "parser": "@typescript-eslint/parser",
   "plugins": ["@typescript-eslint", "perfectionist"],
@@ -17,8 +17,8 @@
       {
         "prefer": "type-imports",
         "disallowTypeAnnotations": true,
-        "fixStyle": "inline-type-imports"
-      }
+        "fixStyle": "inline-type-imports",
+      },
     ],
     "perfectionist/sort-imports": [
       "warn",
@@ -32,12 +32,9 @@
           "tanstack",
           "mantine",
           "mrt",
-          "siblings",
-          "sibling-type",
-          "parent",
-          "parent-type"
+          ["sibling", "sibling-type", "parent", "parent-type"]
         ],
-        "custom-groups": {
+        "customGroups": {
           "value": {
             "clsx": "clsx",
             "style": ["./**.module.css"],
@@ -46,16 +43,15 @@
             "tanstack": "@tanstack/**",
             "mantine": "@mantine/**",
             "mrt": ["./MRT_**", "../**MRT_**", "../../src"],
-            "faker": "@faker/**"
+            "faker": "@faker/**",
           },
           "type": {
-            "react": "react"
-          }
+            "react": "react",
+          },
         },
-        "newlines-between": "never"
-      }
-    ]
+      },
+    ],
   },
   "root": true,
-  "ignorePatterns": ["dist/", "locales/", "node_modules/"]
+  "ignorePatterns": ["dist/", "locales/", "node_modules/"],
 }
diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json
@@ -108,7 +108,7 @@
     "@vitejs/plugin-react": "^4.3.2",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.13",
-    "eslint": "^9.12.0",
+    "eslint": "^8.57.0",
     "eslint-plugin-perfectionist": "^3.8.0",
     "mantine-contextmenu": "^7.12.2",
     "postcss": "^8.4.47",

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBody.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBody.tsx
@@ -1,14 +1,20 @@
 import clsx from 'clsx';
+
 import classes from './MRT_TableBody.module.css';
+
 import { memo, useMemo } from 'react';
+
 import {
   type TableProps,
   TableTbody,
   type TableTbodyProps,
 } from '@mantine/core';
-import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer';
+
+import { MRT_TableBodyEmptyRow } from './MRT_TableBodyEmptyRow';
+import { Memo_MRT_TableBodyRow, MRT_TableBodyRow } from './MRT_TableBodyRow';
+
 import { useMRT_Rows } from '../../hooks/useMRT_Rows';
+import { useMRT_RowVirtualizer } from '../../hooks/useMRT_RowVirtualizer';
 import {
   type MRT_ColumnVirtualizer,
   type MRT_Row,
@@ -17,7 +23,6 @@ import {
   type MRT_VirtualItem,
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
-import { MRT_TableBodyEmptyRow } from './MRT_TableBodyEmptyRow';
 
 export interface MRT_TableBodyProps<TData extends MRT_RowData>
   extends TableTbodyProps {

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -1,21 +1,26 @@
 import clsx from 'clsx';
+
 import classes from './MRT_TableBodyCell.module.css';
+
 import {
   type CSSProperties,
   type DragEvent,
+  memo,
   type MouseEvent,
   type RefObject,
-  memo,
   useEffect,
   useState,
 } from 'react';
+
 import {
   Skeleton,
   TableTd,
   type TableTdProps,
   useDirection,
 } from '@mantine/core';
+
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
+
 import {
   type MRT_Cell,
   type MRT_CellValue,

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCellValue.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCellValue.tsx
@@ -1,4 +1,5 @@
 import { Highlight, type HighlightProps } from '@mantine/core';
+
 import {
   type MRT_Cell,
   type MRT_CellValue,

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyEmptyRow.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyEmptyRow.tsx
@@ -1,14 +1,25 @@
 import clsx from 'clsx';
+
 import classes from './MRT_TableBody.module.css';
+
 import { useMemo } from 'react';
-import { type TableProps, Text, TableTd, TableTrProps } from '@mantine/core';
+
+import { createRow } from '@tanstack/react-table';
+
+import {
+  type TableProps,
+  TableTd,
+  type TableTrProps,
+  Text,
+} from '@mantine/core';
+
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
+
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { createRow } from '@tanstack/react-table';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 
 interface Props<TData extends MRT_RowData> extends TableTrProps {
@@ -54,12 +65,12 @@ export const MRT_TableBodyEmptyRow = <TData extends MRT_RowData>({
 
   return (
     <MRT_TableBodyRow
-      table={table}
-      tableProps={tableProps}
       className={clsx(
         'mrt-table-body-row',
         layoutMode?.startsWith('grid') && classes['empty-row-tr-grid'],
       )}
+      table={table}
+      tableProps={tableProps}
       {...emptyRowProps}
     >
       {renderDetailPanel && (

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyRow.tsx
@@ -1,14 +1,19 @@
 import clsx from 'clsx';
+
 import classes from './MRT_TableBodyRow.module.css';
+
 import { type DragEvent, memo, useMemo, useRef } from 'react';
+
 import {
   Box,
   type TableProps,
   TableTr,
   type TableTrProps,
 } from '@mantine/core';
-import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
+
+import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
+
 import {
   type MRT_Cell,
   type MRT_ColumnVirtualizer,
@@ -190,37 +195,39 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         {virtualPaddingLeft ? (
           <Box component="td" display="flex" w={virtualPaddingLeft} />
         ) : null}
-        {children ? children : (virtualColumns ?? row.getVisibleCells()).map(
-          (cellOrVirtualCell, renderedColumnIndex) => {
-            let cell = cellOrVirtualCell as MRT_Cell<TData>;
-            if (columnVirtualizer) {
-              renderedColumnIndex = (cellOrVirtualCell as MRT_VirtualItem)
-                .index;
-              cell = visibleCells[renderedColumnIndex];
-            }
-            const cellProps = {
-              cell,
-              numRows,
-              renderedColumnIndex,
-              renderedRowIndex,
-              rowRef,
-              table,
-              virtualCell: columnVirtualizer
-                ? (cellOrVirtualCell as MRT_VirtualItem)
-                : undefined,
-            };
-            return memoMode === 'cells' &&
-              cell.column.columnDef.columnDefType === 'data' &&
-              !draggingColumn &&
-              !draggingRow &&
-              editingCell?.id !== cell.id &&
-              editingRow?.id !== row.id ? (
-              <Memo_MRT_TableBodyCell key={cell.id} {...cellProps} />
-            ) : (
-              <MRT_TableBodyCell key={cell.id} {...cellProps} />
-            );
-          },
-        )}
+        {children
+          ? children
+          : (virtualColumns ?? row.getVisibleCells()).map(
+              (cellOrVirtualCell, renderedColumnIndex) => {
+                let cell = cellOrVirtualCell as MRT_Cell<TData>;
+                if (columnVirtualizer) {
+                  renderedColumnIndex = (cellOrVirtualCell as MRT_VirtualItem)
+                    .index;
+                  cell = visibleCells[renderedColumnIndex];
+                }
+                const cellProps = {
+                  cell,
+                  numRows,
+                  renderedColumnIndex,
+                  renderedRowIndex,
+                  rowRef,
+                  table,
+                  virtualCell: columnVirtualizer
+                    ? (cellOrVirtualCell as MRT_VirtualItem)
+                    : undefined,
+                };
+                return memoMode === 'cells' &&
+                  cell.column.columnDef.columnDefType === 'data' &&
+                  !draggingColumn &&
+                  !draggingRow &&
+                  editingCell?.id !== cell.id &&
+                  editingRow?.id !== row.id ? (
+                  <Memo_MRT_TableBodyCell key={cell.id} {...cellProps} />
+                ) : (
+                  <MRT_TableBodyCell key={cell.id} {...cellProps} />
+                );
+              },
+            )}
         {virtualPaddingRight ? (
           <Box component="td" display="flex" w={virtualPaddingRight} />
         ) : null}

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyRowGrabHandle.tsx
@@ -1,5 +1,7 @@
 import { type DragEvent, type RefObject } from 'react';
+
 import { type ActionIconProps } from '@mantine/core';
+
 import {
   type MRT_Row,
   type MRT_RowData,

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyRowPinButton.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyRowPinButton.tsx
@@ -1,4 +1,5 @@
 import { type ActionIconProps, Box } from '@mantine/core';
+
 import {
   type MRT_Row,
   type MRT_RowData,

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx b/packages/mantine-react-table/src/components/body/MRT_TableDetailPanel.tsx
@@ -1,7 +1,11 @@
 import clsx from 'clsx';
+
 import classes from './MRT_TableDetailPanel.module.css';
+
 import { type RefObject } from 'react';
+
 import { Collapse, TableTd, type TableTdProps, TableTr } from '@mantine/core';
+
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -66,7 +70,9 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     ));
 
   const DetailPanel =
-    !isLoading && row.getIsExpanded() && renderDetailPanel?.({ row, table, internalEditComponents });
+    !isLoading &&
+    row.getIsExpanded() &&
+    renderDetailPanel?.({ internalEditComponents, row, table });
 
   return (
     <TableTr

diff --git a/packages/mantine-react-table/src/components/buttons/MRT_ColumnPinningButtons.tsx b/packages/mantine-react-table/src/components/buttons/MRT_ColumnPinningButtons.tsx
@@ -1,6 +1,9 @@
 import clsx from 'clsx';
+
 import classes from './MRT_ColumnPinningButtons.module.css';
+
 import { ActionIcon, Flex, Tooltip } from '@mantine/core';
+
 import {
   type MRT_Column,
   type MRT_RowData,