Merge pull request #671 from icflorescu/next

Release 7.14.2
icflorescu · Nov 26, 2024 · 6056847 · 6056847
2 parents 2d198b2 + 8eae852
commit 6056847
Show file tree

Hide file tree

Showing 19 changed files with 1,338 additions and 12,198 deletions.
diff --git a/.github/workflows/publish-and-deploy.yml b/.github/workflows/publish-and-deploy.yml
@@ -29,7 +29,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '22.6'
+          node-version: '22.11'
           cache: yarn
       - name: Restore cache
         uses: actions/cache@v4

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,14 @@
 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.
 
+## 7.14.2 (2024-10-26)
+
+- Fix [#659](https://github.com/icflorescu/mantine-datatable/issues/659) - filter popup not closing after clicking outside
+- Fix [#645](https://github.com/icflorescu/mantine-datatable/issues/645) - implement `filterPopoverProps` to allow overriding the default filter popover behavior
+- Update dev dependencies to ensure compatibility with Mantine 7.14.2 and Next.js 15
+- Update build workflow Node.js version
+- Minor docs app fixes
+
 ## 7.12.4 (2024-09-04)
 
 - Fix [#627](https://github.com/icflorescu/mantine-datatable/issues/627)

diff --git a/README.md b/README.md
@@ -54,6 +54,10 @@ If you're using Mantine DataTable in your project, please drop me a line at the
 
 Visit [icflorescu.github.io/mantine-datatable](https://icflorescu.github.io/mantine-datatable/) to view the full documentation and learn how to use it by browsing a comprehensive list of examples.
 
+## Mantine DataTable AI Bot
+
+[Mantine DataTable AI Bot](https://codeparrot.ai/oracle?owner=icflorescu&repo=mantine-datatable), kindly provided by [CodeParrot](https://codeparrot.ai), will help you understand this repository better. You can ask for code examples, installation guide, debugging help and much more.
+
 ## Quickstart
 
 Create a new [application with Mantine](https://mantine.dev/getting-started/), make sure to have the `clsx` peer dependency installed,

diff --git a/app/examples/searching-and-filtering/SearchingAndFilteringExample.tsx b/app/examples/searching-and-filtering/SearchingAndFilteringExample.tsx
@@ -90,6 +90,7 @@ export function SearchingAndFilteringExample() {
               placeholder="Search departments…"
               onChange={setSelectedDepartments}
               leftSection={<IconSearch size={16} />}
+              comboboxProps={{ withinPortal: false }}
               clearable
               searchable
             />

diff --git a/app/examples/searching-and-filtering/page.tsx b/app/examples/searching-and-filtering/page.tsx
@@ -2,6 +2,7 @@ import { Code } from '@mantine/core';
 import type { Route } from 'next';
 import { PRODUCT_NAME } from '~/app/config';
 import { CodeBlock } from '~/components/CodeBlock';
+import { ExternalLink } from '~/components/ExternalLink';
 import { InternalLink } from '~/components/InternalLink';
 import { PageNavigation } from '~/components/PageNavigation';
 import { PageTitle } from '~/components/PageTitle';
@@ -32,6 +33,12 @@ export default async function SearchingAndFilteringExamplePage() {
       <SearchingAndFilteringExample />
       <Txt>The code for this example is as follows:</Txt>
       <CodeBlock code={code} />
+      <Txt idea>
+        To use the Mantine Component with a popover inside the filter column property, you need to render the child
+        properties without using a Portal. Please refer to the Mantine documentation on{' '}
+        <ExternalLink to="https://mantine.dev/core/popover/#nested-popovers">Nested Popovers</ExternalLink> for more
+        details.
+      </Txt>
       <Txt info title="Why no built-in “Excel-like” searching and filtering support?">
         You’ll often have to implement searching and filtering data in your projects.
         <br />

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -24,7 +24,7 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <head>
         <ColorSchemeScript defaultColorScheme="auto" />
       </head>

diff --git a/app/manifest.webmanifest/route.ts b/app/manifest.webmanifest/route.ts
@@ -7,6 +7,8 @@ import { PRODUCT_DESCRIPTION, PRODUCT_NAME } from '~/app/config';
  * (@see https://github.com/vercel/next.js/issues/56687)
  */
 
+export const dynamic = 'force-static';
+
 const data: MetadataRoute.Manifest = {
   name: PRODUCT_NAME,
   short_name: PRODUCT_NAME,

diff --git a/app/robots.ts b/app/robots.ts
@@ -1,6 +1,8 @@
 import type { MetadataRoute } from 'next';
 import { WEBSITE_LINK } from './config';
 
+export const dynamic = 'force-static';
+
 export default function robots(): MetadataRoute.Robots {
   return {
     rules: {

diff --git a/app/sitemap.ts b/app/sitemap.ts
@@ -1,6 +1,8 @@
 import type { MetadataRoute } from 'next';
 import { ROUTES, WEBSITE_LINK } from './config';
 
+export const dynamic = 'force-static';
+
 export default function sitemap(): MetadataRoute.Sitemap {
   return [
     {

diff --git a/components/PackageUsers.tsx b/components/PackageUsers.tsx
@@ -20,12 +20,19 @@ const USERS: {
     logo: { base: 'easywp', ext: 'svg', themed: true },
     link: 'https://www.easywp.com',
   },
+  {
+    name: 'CodeParrot.AI',
+    showText: true,
+    logo: { base: 'codeparrot', ext: 'svg', shift: 3, scale: 110 },
+    link: 'https://codeparrot.ai',
+    shift: 1,
+  },
   {
     name: 'SegmentX',
     showText: true,
-    logo: { base: 'segmentx', ext: 'png', shift: 6, scale: 110 },
+    logo: { base: 'segmentx', ext: 'png', shift: 5, scale: 110 },
     link: 'https://segmentx.ai',
-    shift: 1.75,
+    shift: 1.5,
   },
   {
     name: 'Aquarino',

diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const withPWA = require('@ducanh2912/next-pwa').default({ dest: 'public' });
+/* eslint-disable @typescript-eslint/no-require-imports */
 const { name: PACKAGE_NAME, version: PACKAGE_VERSION } = require('./package.json');
 
 module.exports = async () => {
@@ -35,5 +34,5 @@ module.exports = async () => {
 
   if (process.env.GITHUB_PAGES) config.basePath = '/mantine-datatable';
 
-  return withPWA(config);
+  return config;
 };
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.12.4",
+  "version": "7.14.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",
@@ -71,51 +71,49 @@
     "format": "prettier --write ."
   },
   "devDependencies": {
-    "@docsearch/react": "^3.6.1",
-    "@ducanh2912/next-pwa": "^10.2.8",
-    "@faker-js/faker": "^8.4.1",
+    "@docsearch/react": "^3.8.0",
+    "@faker-js/faker": "^9.2.0",
     "@formkit/auto-animate": "^0.8.2",
-    "@hello-pangea/dnd": "^16.6.0",
-    "@mantine/code-highlight": "^7.12.2",
-    "@mantine/core": "^7.12.2",
-    "@mantine/dates": "^7.12.2",
-    "@mantine/hooks": "^7.12.2",
-    "@mantine/modals": "^7.12.2",
-    "@mantine/notifications": "^7.12.2",
-    "@tabler/icons-react": "^3.14.0",
-    "@tanstack/react-query": "^5.54.1",
-    "@types/lodash": "^4.17.7",
-    "@types/node": "^22.5.3",
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.4.0",
-    "@typescript-eslint/parser": "^8.4.0",
+    "@hello-pangea/dnd": "^17.0.0",
+    "@mantine/code-highlight": "^7.14.2",
+    "@mantine/core": "^7.14.2",
+    "@mantine/dates": "^7.14.2",
+    "@mantine/hooks": "^7.14.2",
+    "@mantine/modals": "^7.14.2",
+    "@mantine/notifications": "^7.14.2",
+    "@tabler/icons-react": "^3.22.0",
+    "@tanstack/react-query": "^5.61.3",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "^22.10.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
     "clsx": "^2.1.1",
-    "cssnano": "^7.0.5",
+    "cssnano": "^7.0.6",
     "dayjs": "^1.11.13",
     "eslint": "^8",
-    "eslint-config-next": "^14.2.7",
+    "eslint-config-next": "^15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.12.2",
-    "next": "^14.2.7",
-    "postcss": "^8.4.44",
+    "mantine-contextmenu": "^7.14.2",
+    "next": "^15.0.3",
+    "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
     "postcss-preset-mantine": "^1.17.0",
     "postcss-simple-vars": "^7.0.1",
-    "prettier": "^3.3.3",
+    "prettier": "^3.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "sharp": "^0.33.5",
     "swr": "^2.2.5",
-    "tsup": "^8.2.4",
-    "typescript": "^5.5.4",
-    "webpack": "^5.94.0"
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "@mantine/core": ">=7.11",
-    "@mantine/hooks": ">=7.11",
+    "@mantine/core": ">=7.14",
+    "@mantine/hooks": ">=7.14",
     "clsx": ">=2",
     "react": ">=18.2"
   }

diff --git a/package/DataTableHeader.tsx b/package/DataTableHeader.tsx
@@ -61,7 +61,6 @@ export const DataTableHeader = forwardRef(function DataTableHeader<T>(
     selectorCellShadowVisible,
     selectionColumnClassName,
     selectionColumnStyle,
-    // draggableRows,
   }: DataTableHeaderProps<T>,
   ref: React.ForwardedRef<HTMLTableSectionElement>
 ) {
@@ -130,6 +129,7 @@ export const DataTableHeader = forwardRef(function DataTableHeader<T>(
             titleClassName,
             titleStyle,
             filter,
+            filterPopoverProps,
             filtering,
             sortKey,
           } = { ...defaultColumnProps, ...columnProps };
@@ -147,14 +147,14 @@ export const DataTableHeader = forwardRef(function DataTableHeader<T>(
               sortable={sortable}
               draggable={draggable}
               toggleable={toggleable}
-              // we won't display the resize handle for the last column
-              // to avoid overflow render issues
+              // we won't display the resize handle for the last column to avoid overflow render issues
               resizable={resizable && index < columns.length - 1}
               sortStatus={sortStatus}
               sortIcons={sortIcons}
               sortKey={sortKey}
               onSortStatusChange={onSortStatusChange}
               filter={filter}
+              filterPopoverProps={filterPopoverProps}
               filtering={filtering}
             />
           );

diff --git a/package/DataTableHeaderCell.tsx b/package/DataTableHeaderCell.tsx
@@ -31,6 +31,7 @@ type DataTableHeaderCellProps<T> = {
   | 'textAlign'
   | 'width'
   | 'filter'
+  | 'filterPopoverProps'
   | 'filtering'
   | 'sortKey'
 >;
@@ -51,6 +52,7 @@ export function DataTableHeaderCell<T>({
   sortStatus,
   onSortStatusChange,
   filter,
+  filterPopoverProps,
   filtering,
   sortKey,
 }: DataTableHeaderCellProps<T>) {
@@ -75,7 +77,7 @@ export function DataTableHeaderCell<T>({
                 ? sortStatus.direction === 'asc'
                   ? 'desc'
                   : 'asc'
-                : sortStatus?.direction ?? 'asc',
+                : (sortStatus?.direction ?? 'asc'),
           });
         }
       : undefined;
@@ -217,7 +219,11 @@ export function DataTableHeaderCell<T>({
             )}
           </>
         ) : null}
-        {filter ? <DataTableHeaderCellFilter isActive={!!filtering}>{filter}</DataTableHeaderCellFilter> : null}
+        {filter ? (
+          <DataTableHeaderCellFilter filterPopoverProps={filterPopoverProps} isActive={!!filtering}>
+            {filter}
+          </DataTableHeaderCellFilter>
+        ) : null}
       </Group>
       {resizable ? <DataTableResizableHeaderHandle accessor={accessor as string} columnRef={columnRef} /> : null}
     </TableTh>

diff --git a/package/DataTableHeaderCellFilter.tsx b/package/DataTableHeaderCellFilter.tsx
@@ -1,20 +1,28 @@
 import { ActionIcon, Popover, PopoverDropdown, PopoverTarget } from '@mantine/core';
-import { useDisclosure } from '@mantine/hooks';
+import { useClickOutside, useDisclosure } from '@mantine/hooks';
 import { IconFilter } from './icons/IconFilter';
 import { IconFilterFilled } from './icons/IconFilterFilled';
 import type { DataTableColumn } from './types';
 
 type DataTableHeaderCellFilterProps<T> = {
   children: DataTableColumn<T>['filter'];
+  filterPopoverProps: DataTableColumn<T>['filterPopoverProps'];
   isActive: boolean;
 };
 
-export function DataTableHeaderCellFilter<T>({ children, isActive }: DataTableHeaderCellFilterProps<T>) {
+export function DataTableHeaderCellFilter<T>({
+  children,
+  isActive,
+  filterPopoverProps,
+}: DataTableHeaderCellFilterProps<T>) {
   const [isOpen, { close, toggle }] = useDisclosure(false);
   const Icon = isActive ? IconFilterFilled : IconFilter;
+  const ref = useClickOutside(close);
+
+  console.log({ filterPopoverProps });
 
   return (
-    <Popover withArrow withinPortal shadow="md" opened={isOpen} onClose={close} trapFocus>
+    <Popover withArrow shadow="md" opened={isOpen} onClose={close} trapFocus {...filterPopoverProps}>
       <PopoverTarget>
         <ActionIcon
           className="mantine-datatable-header-cell-filter-action-icon"
@@ -25,11 +33,12 @@ export function DataTableHeaderCellFilter<T>({ children, isActive }: DataTableHe
             e.preventDefault();
             toggle();
           }}
+          onKeyDown={(e) => e.stopPropagation()}
         >
           <Icon />
         </ActionIcon>
       </PopoverTarget>
-      <PopoverDropdown onClick={(e) => e.stopPropagation()}>
+      <PopoverDropdown ref={ref} onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
         {typeof children === 'function' ? children({ close }) : children}
       </PopoverDropdown>
     </Popover>

diff --git a/package/types/DataTableColumn.ts b/package/types/DataTableColumn.ts
@@ -1,4 +1,4 @@
-import type { MantineStyleProp, MantineTheme } from '@mantine/core';
+import type { MantineStyleProp, MantineTheme, PopoverProps } from '@mantine/core';
 import type { DataTableColumnTextAlign } from './DataTableColumnTextAlign';
 
 export type DataTableColumn<T = Record<string, unknown>> = {
@@ -83,6 +83,11 @@ export type DataTableColumn<T = Record<string, unknown>> = {
    */
   filter?: React.ReactNode | ((params: { close: () => void }) => React.ReactNode);
 
+  /**
+   * Filter popover props; override if necessary.
+   */
+  filterPopoverProps?: PopoverProps;
+
   /**
    * If true, filter icon will be styled differently to indicate the filter is in effect.
    */