Merge pull request #458 from icflorescu/next

Switch to tsup bundling, etc.

.github/workflows/publish-and-deploy.yml

@@ -29,7 +29,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: yarn
       - name: Restore cache
         uses: actions/cache@v3

CHANGELOG.md

@@ -3,6 +3,10 @@
 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.1.2 (2023-11-06)
+
+- Switch to `tsup` building, to fix usage issues with Remix & Next.js
+
 ## 7.1.1 (2023-11-03)
 
 - Switch to `esm` export only, to fix this issue: https://github.com/icflorescu/mantine-datatable/issues/451  

app/layout.css

@@ -2,7 +2,7 @@
 @import '@mantine/dates/esm/index.css' layer(mantine-dates);
 @import '@mantine/notifications/esm/index.css' layer(mantine-notifications);
 @import '@mantine/code-highlight/esm/index.css' layer(mantine-code-highlight);
-@import 'mantine-contextmenu/dist/css/styles.css' layer(mantine-contextmenu);
+@import 'mantine-contextmenu/dist/styles.css' layer(mantine-contextmenu);
 @import '../package/styles.css' layer(mantine-datatable);
 @import '@docsearch/css';
 @import './docsearch-overrides.css';

app/styling/examples/fine-grained/layout.css

@@ -2,7 +2,7 @@
 @import '@mantine/core/esm/index.css' layer(mantine-core);
 
 /* 👇 Expressly import the mantine-datatable styles into mantine-datatable layer */
-@import '__PACKAGE__/dist/css/styles.css' layer(mantine-datatable);
+@import '__PACKAGE__/dist/styles.css' layer(mantine-datatable);
 
 /* 👇 Make sure the styles are applied in the correct order */
 @layer mantine-core, mantine-datatable;

data/async.ts

@@ -1,6 +1,6 @@
+import type { DataTableSortStatus } from '__PACKAGE__';
 import dayjs, { type Dayjs } from 'dayjs';
 import { get, sortBy } from 'lodash';
-import type { DataTableSortStatus } from '~/dist/types';
 import { delay, type DelayOptions } from '~/lib/examples';
 import { companies, departments, employees, type Employee } from '.';
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mantine-datatable",
-  "version": "7.1.1",
+  "version": "7.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",
@@ -40,16 +40,20 @@
     "type": "github",
     "url": "https://github.com/sponsors/icflorescu"
   },
-  "types": "./dist/types/index.d.ts",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": {
-        "types": "./dist/types/index.d.ts",
-        "default": "./dist/esm/index.js"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
-    "./styles.css": "./dist/css/styles.css",
-    "./styles.layer.css": "./dist/css/styles.layer.css"
+    "./styles.css": "./dist/styles.css",
+    "./styles.layer.css": "./dist/styles.layer.css"
   },
   "files": [
     "./dist",
@@ -58,7 +62,7 @@
   ],
   "scripts": {
     "dev": "next dev",
-    "build:package": "rm -rf dist; tsc -p package/tsconfig.build.json; postcss package/styles*.css --dir dist/css",
+    "build:package": "rm -rf dist; tsup --config scripts/tsup.esm.ts; tsup --config scripts/tsup.cjs.ts; tsup --config scripts/tsup.dts.ts; postcss package/styles*.css --dir dist",
     "build:docs": "next build",
     "build": "yarn build:package && yarn build:docs",
     "lint": "eslint . && tsc --noEmit --pretty",
@@ -76,37 +80,40 @@
     "@mantine/modals": "^7.1.7",
     "@mantine/notifications": "^7.1.7",
     "@tabler/icons-react": "^2.40.0",
-    "@tanstack/react-query": "^5.4.3",
+    "@tanstack/react-query": "^5.7.2",
     "@types/lodash": "^4.14.200",
     "@types/node": "^20.8.10",
-    "@types/react": "^18.2.34",
+    "@types/react": "^18.2.36",
     "@types/react-dom": "^18.2.14",
     "@typescript-eslint/eslint-plugin": "^6.9.1",
     "@typescript-eslint/parser": "^6.9.1",
     "clsx": "^2.0.0",
+    "cssnano": "^6.0.1",
     "dayjs": "^1.11.10",
-    "eslint": "^8.52.0",
+    "eslint": "^8.53.0",
     "eslint-config-next": "^14.0.1",
     "eslint-config-prettier": "^9.0.0",
     "lodash": "^4.17.21",
-    "mantine-contextmenu": "^7.1.8",
+    "mantine-contextmenu": "^7.1.9",
     "next": "14.0.1",
     "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
-    "postcss-preset-mantine": "^1.9.0",
+    "postcss-preset-mantine": "^1.9.1",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sharp": "^0.32.6",
     "swr": "^2.2.4",
+    "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "webpack": "^5.89.0"
   },
   "peerDependencies": {
     "@mantine/core": ">=7",
     "@mantine/hooks": ">=7",
-    "clsx": ">=2"
+    "clsx": ">=2",
+    "react": ">=18"
   }
 }

package/DataTable.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Box, Table, type MantineSize } from '@mantine/core';
 import { useMergedRef } from '@mantine/hooks';
 import clsx from 'clsx';

package/DataTableColumnGroupHeaderCell.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { TableTh } from '@mantine/core';
 import clsx from 'clsx';
 import { useMemo } from 'react';

package/DataTableHeader.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { TableThead, TableTr, type CheckboxProps, type MantineStyleProp } from '@mantine/core';
 import clsx from 'clsx';
 import { forwardRef } from 'react';

package/DataTableHeaderCell.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Box, Center, Group, MantineStyleProp, TableTh, type MantineTheme } from '@mantine/core';
 import clsx from 'clsx';
 import { DataTableHeaderCellFilter } from './DataTableHeaderCellFilter';

package/DataTableHeaderCellFilter.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { ActionIcon, Popover, PopoverTarget } from '@mantine/core';
 import { useDisclosure } from '@mantine/hooks';
 import { IconFilter } from './icons/IconFilter';

package/DataTableHeaderSelectorCell.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Checkbox, TableTh, type CheckboxProps } from '@mantine/core';
 import { POINTER_CURSOR } from './utilityClasses';
 

package/DataTablePageSizeSelector.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import {
   Button,
   Group,

package/DataTablePagination.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Box, Pagination, Text, rem, type MantineSpacing, type MantineStyleProp } from '@mantine/core';
 import clsx from 'clsx';
 import { forwardRef, type ForwardedRef } from 'react';

package/DataTableRow.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { TableTr, type CheckboxProps, type MantineColor, type MantineStyleProp } from '@mantine/core';
 import clsx from 'clsx';
 import { DataTableRowCell } from './DataTableRowCell';

package/DataTableRowCell.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { TableTd, type MantineStyleProp } from '@mantine/core';
 import clsx from 'clsx';
 import { useMediaQueryStringOrFunction } from './hooks';

package/DataTableRowExpansion.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Collapse, TableTd, TableTr } from '@mantine/core';
 import { useRowExpansionStatus } from './hooks';
 import type { DataTableRowExpansionCollapseProps } from './types';

package/DataTableRowSelectorCell.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Checkbox, TableTd, type CheckboxProps } from '@mantine/core';
 import { POINTER_CURSOR } from './utilityClasses';
 

package/DataTableScrollArea.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { Box, ScrollArea, rem, type ScrollAreaProps } from '@mantine/core';
 import clsx from 'clsx';
 

package/cssVariables.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { parseThemeColor, type MantineColor, type MantineTheme } from '@mantine/core';
 import type { DataTableProps } from './types';
 

package/hooks/useElementOuterSize.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useResizeObserver } from '@mantine/hooks';
 
 export function useElementOuterSize<T extends HTMLElement>() {

package/hooks/useIsomorphicLayoutEffect.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useLayoutEffect } from 'react';
 
 export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/hooks/useLastSelectionChangeIndex.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useEffect, useState } from 'react';
 
 export function useLastSelectionChangeIndex(recordIds: unknown[] | undefined) {

package/hooks/useMediaQueries.ts

@@ -1,5 +1,3 @@
-'use client';
-
 // Modified from https://github.com/mantinedev/mantine/blob/8c12a76c56da51af34213f18dd67c8b72a0ddb44/src/mantine-hooks/src/use-media-query/use-media-query.ts
 
 import { useEffect, useRef, useState } from 'react';

package/hooks/useMediaQueriesStringOrFunction.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useMantineTheme, type MantineTheme } from '@mantine/core';
 import { useMemo } from 'react';
 import { useMediaQueries } from './useMediaQueries';

package/hooks/useMediaQueryStringOrFunction.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useMantineTheme, type MantineTheme } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 

package/hooks/useRowExpansion.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useState } from 'react';
 import { DataTableRowExpansionProps } from '../types/DataTableRowExpansionProps';
 import { getRecordId } from '../utils';

package/hooks/useRowExpansionStatus.ts

@@ -1,5 +1,3 @@
-'use client';
-
 import { useTimeout } from '@mantine/hooks';
 import { useEffect, useState } from 'react';
 

package/index.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export { DataTable } from './DataTable';
 export * from './types';
 export * from './utils';

postcss.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  map: { inline: false },
   plugins: {
     'postcss-import': {},
     'postcss-preset-mantine': {},
@@ -12,4 +13,5 @@ module.exports = {
       },
     },
   },
+  cssnano: { preset: 'default' },
 };

scripts/tsconfig.tsup.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx"
+  }
+}

scripts/tsup.cjs.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['package/index.ts'],
+  format: 'cjs',
+  tsconfig: 'scripts/tsconfig.tsup.json',
+  target: 'esnext',
+  minify: true,
+  sourcemap: true,
+  clean: false,
+});

scripts/tsup.dts.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['package/index.ts'],
+  dts: { only: true, compilerOptions: { incremental: false } },
+  clean: false,
+});

scripts/tsup.esm.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['package/index.ts'],
+  format: 'esm',
+  tsconfig: 'scripts/tsconfig.tsup.json',
+  target: 'esnext',
+  minify: true,
+  sourcemap: true,
+  clean: false,
+});