From 960d7192d3f57768d215c2822f929e1ef1b5bb8d Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Fri, 22 Sep 2023 16:08:41 +0100 Subject: [PATCH 1/7] chore: added clsx and ts CSS modules config --- packages/mantine-react-table/package.json | 4 +- .../mantine-react-table/rollup.config.mjs | 4 +- packages/mantine-react-table/tsconfig.json | 3 +- pnpm-lock.yaml | 176 +++++++++++++++++- 4 files changed, 182 insertions(+), 5 deletions(-) diff --git a/packages/mantine-react-table/package.json b/packages/mantine-react-table/package.json index 6f36aed62..a75e172df 100644 --- a/packages/mantine-react-table/package.json +++ b/packages/mantine-react-table/package.json @@ -105,12 +105,14 @@ "storybook-dark-mode": "^3.0.1", "tslib": "^2.6.2", "typescript": "^5.2.2", + "typescript-plugin-css-modules": "^5.0.1", "vite": "^4.4.9" }, "dependencies": { "@tanstack/match-sorter-utils": "8.8.4", "@tanstack/react-table": "8.10.1", - "@tanstack/react-virtual": "3.0.0-beta.60" + "@tanstack/react-virtual": "3.0.0-beta.60", + "clsx": "^2.0.0" }, "peerDependencies": { "@mantine/core": "^7", diff --git a/packages/mantine-react-table/rollup.config.mjs b/packages/mantine-react-table/rollup.config.mjs index 01586cc0e..7eacb31a6 100644 --- a/packages/mantine-react-table/rollup.config.mjs +++ b/packages/mantine-react-table/rollup.config.mjs @@ -3,11 +3,11 @@ import external from 'rollup-plugin-peer-deps-external'; import resolve from '@rollup/plugin-node-resolve'; import typescript from '@rollup/plugin-typescript'; import postcss from 'rollup-plugin-postcss'; -import copy from 'rollup-plugin-copy'; -import { babel } from '@rollup/plugin-babel'; +import {babel} from '@rollup/plugin-babel'; export default [ { + preserveModules: true, external: [ '@mantine/core', '@mantine/dates', diff --git a/packages/mantine-react-table/tsconfig.json b/packages/mantine-react-table/tsconfig.json index 8b83293b7..f74e0c4ca 100644 --- a/packages/mantine-react-table/tsconfig.json +++ b/packages/mantine-react-table/tsconfig.json @@ -27,10 +27,11 @@ "sourceMap": true, "strict": true, "target": "ES6", + "plugins": [{ "name": "typescript-plugin-css-modules" }] }, "references": [ { "path": "./tsconfig.node.json" } ] -} \ No newline at end of file +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 3e5c249d9..8e4cf5149 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -147,6 +147,9 @@ importers: '@tanstack/react-virtual': specifier: 3.0.0-beta.60 version: 3.0.0-beta.60(react@18.2.0) + clsx: + specifier: ^2.0.0 + version: 2.0.0 devDependencies: '@babel/core': specifier: ^7.22.20 @@ -283,6 +286,9 @@ importers: typescript: specifier: ^5.2.2 version: 5.2.2 + typescript-plugin-css-modules: + specifier: ^5.0.1 + version: 5.0.1(typescript@5.2.2) vite: specifier: ^4.4.9 version: 4.4.9(@types/node@20.6.3) @@ -294,6 +300,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /@adobe/css-tools@4.3.1: + resolution: {integrity: sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==} + dev: true + /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.8.2): resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==} dependencies: @@ -4941,6 +4951,18 @@ packages: resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==} dev: true + /@types/postcss-modules-local-by-default@4.0.0: + resolution: {integrity: sha512-0VLab/pcLTLcfbxi6THSIMVYcw9hEUBGvjwwaGpW77mMgRXfGF+a76t7BxTGyLh1y68tBvrffp8UWnqvm76+yg==} + dependencies: + postcss: 8.4.30 + dev: true + + /@types/postcss-modules-scope@3.0.1: + resolution: {integrity: sha512-LNkp3c4ML9EQj2dgslp4i80Jxj72YK3HjYzrTn6ftUVylW1zaKFGqrMlNIyqBmPWmIhZ/Y5r0Y4T49Hk1IuDUg==} + dependencies: + postcss: 8.4.30 + dev: true + /@types/pretty-hrtime@1.0.1: resolution: {integrity: sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==} dev: true @@ -6220,6 +6242,12 @@ packages: engines: {node: '>= 0.6'} dev: true + /copy-anything@2.0.6: + resolution: {integrity: sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==} + dependencies: + is-what: 3.14.1 + dev: true + /core-js-compat@3.32.2: resolution: {integrity: sha512-+GjlguTDINOijtVRUxrQOv3kfu9rl+qPNdX2LTbJ/ZyVTuxK+ksVSAGX1nHstu4hrv1En/uPTtWgq2gI5wt4AQ==} dependencies: @@ -6684,6 +6712,15 @@ packages: hasBin: true dev: true + /errno@0.1.8: + resolution: {integrity: sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==} + hasBin: true + requiresBuild: true + dependencies: + prr: 1.0.1 + dev: true + optional: true + /error-ex@1.3.2: resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} dependencies: @@ -7978,6 +8015,15 @@ packages: safer-buffer: 2.1.2 dev: true + /iconv-lite@0.6.3: + resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==} + engines: {node: '>=0.10.0'} + requiresBuild: true + dependencies: + safer-buffer: 2.1.2 + dev: true + optional: true + /icss-replace-symbols@1.1.0: resolution: {integrity: sha512-chIaY3Vh2mh2Q3RGXttaDIzeiPvaVXJ+C4DAh/w3c37SKZ/U6PGMmuicR2EQQp9bKG8zLMCl7I+PtIoOOPp8Gg==} dev: true @@ -8000,6 +8046,18 @@ packages: engines: {node: '>= 4'} dev: true + /image-size@0.5.5: + resolution: {integrity: sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==} + engines: {node: '>=0.10.0'} + hasBin: true + requiresBuild: true + dev: true + optional: true + + /immutable@4.3.4: + resolution: {integrity: sha512-fsXeu4J4i6WNWSikpI88v/PcVflZz+6kMhUfIwc5SY+poQRPnaf5V7qds6SUyUN3cVxEzuCab7QIoLOQ+DQ1wA==} + dev: true + /import-cwd@3.0.0: resolution: {integrity: sha512-4pnzH16plW+hgvRECbDWpQl3cqtvSofHWh44met7ESfZ8UZOWWddm8hEyDTqREJ9RbYHY8gi8DqmaelApoOGMg==} engines: {node: '>=8'} @@ -8375,6 +8433,10 @@ packages: get-intrinsic: 1.2.1 dev: true + /is-what@3.14.1: + resolution: {integrity: sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==} + dev: true + /is-wsl@2.2.0: resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==} engines: {node: '>=8'} @@ -8698,6 +8760,26 @@ packages: dotenv-expand: 10.0.0 dev: true + /less@4.2.0: + resolution: {integrity: sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==} + engines: {node: '>=6'} + hasBin: true + dependencies: + copy-anything: 2.0.6 + parse-node-version: 1.0.1 + tslib: 2.6.2 + optionalDependencies: + errno: 0.1.8 + graceful-fs: 4.2.11 + image-size: 0.5.5 + make-dir: 2.1.0 + mime: 1.6.0 + needle: 3.2.0 + source-map: 0.6.1 + transitivePeerDependencies: + - supports-color + dev: true + /leven@3.1.0: resolution: {integrity: sha512-qsda+H8jTaUaN/x5vzW2rzc+8Rw4TAQ/4KjB46IwK5VH+IlVeeeje/EoZRpiXvIqjFgK84QffqPztGI3VBLG1A==} engines: {node: '>=6'} @@ -9454,6 +9536,20 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true + /needle@3.2.0: + resolution: {integrity: sha512-oUvzXnyLiVyVGoianLijF9O/RecZUf7TkBfimjGrLM4eQhXyeJwM6GeAWccwfQ9aa4gMCZKqhAOuLaMIcQxajQ==} + engines: {node: '>= 4.4.x'} + hasBin: true + requiresBuild: true + dependencies: + debug: 3.2.7 + iconv-lite: 0.6.3 + sax: 1.2.4 + transitivePeerDependencies: + - supports-color + dev: true + optional: true + /negotiator@0.6.3: resolution: {integrity: sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==} engines: {node: '>= 0.6'} @@ -9836,6 +9932,11 @@ packages: lines-and-columns: 1.2.4 dev: true + /parse-node-version@1.0.1: + resolution: {integrity: sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==} + engines: {node: '>= 0.10'} + dev: true + /parseurl@1.3.3: resolution: {integrity: sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==} engines: {node: '>= 0.8'} @@ -9922,6 +10023,7 @@ packages: /pify@4.0.1: resolution: {integrity: sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==} engines: {node: '>=6'} + requiresBuild: true dev: true /pify@5.0.0: @@ -10500,6 +10602,12 @@ packages: resolution: {integrity: sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==} dev: true + /prr@1.0.1: + resolution: {integrity: sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==} + requiresBuild: true + dev: true + optional: true + /pump@2.0.1: resolution: {integrity: sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==} dependencies: @@ -11011,6 +11119,10 @@ packages: engines: {node: '>=0.10.0'} dev: true + /reserved-words@0.1.2: + resolution: {integrity: sha512-0S5SrIUJ9LfpbVl4Yzij6VipUdafHrOTzvmfazSw/jeZrZtQK303OPZW+obtkaw7jQlTQppy0UvZWm9872PbRw==} + dev: true + /resolve-from@4.0.0: resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==} engines: {node: '>=4'} @@ -11203,6 +11315,20 @@ packages: resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==} dev: true + /sass@1.68.0: + resolution: {integrity: sha512-Lmj9lM/fef0nQswm1J2HJcEsBUba4wgNx2fea6yJHODREoMFnwRpZydBnX/RjyXw2REIwdkbqE4hrTo4qfDBUA==} + engines: {node: '>=14.0.0'} + hasBin: true + dependencies: + chokidar: 3.5.3 + immutable: 4.3.4 + source-map-js: 1.0.2 + dev: true + + /sax@1.2.4: + resolution: {integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==} + dev: true + /scheduler@0.23.0: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} dependencies: @@ -11382,7 +11508,6 @@ packages: /source-map@0.7.4: resolution: {integrity: sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA==} engines: {node: '>= 8'} - dev: false /space-separated-tokens@1.1.5: resolution: {integrity: sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==} @@ -11645,6 +11770,19 @@ packages: postcss-selector-parser: 6.0.13 dev: true + /stylus@0.59.0: + resolution: {integrity: sha512-lQ9w/XIOH5ZHVNuNbWW8D822r+/wBSO/d6XvtyHLF7LW4KaCIDeVbvn5DF8fGCJAUCwVhVi/h6J0NUcnylUEjg==} + hasBin: true + dependencies: + '@adobe/css-tools': 4.3.1 + debug: 4.3.4 + glob: 7.2.3 + sax: 1.2.4 + source-map: 0.7.4 + transitivePeerDependencies: + - supports-color + dev: true + /sugarss@4.0.1(postcss@8.4.30): resolution: {integrity: sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==} engines: {node: '>=12.0'} @@ -11897,6 +12035,15 @@ packages: strip-bom: 3.0.0 dev: true + /tsconfig-paths@4.2.0: + resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==} + engines: {node: '>=6'} + dependencies: + json5: 2.2.3 + minimist: 1.2.8 + strip-bom: 3.0.0 + dev: true + /tslib@1.14.1: resolution: {integrity: sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==} dev: true @@ -12050,6 +12197,33 @@ packages: resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==} dev: true + /typescript-plugin-css-modules@5.0.1(typescript@5.2.2): + resolution: {integrity: sha512-hKXObfwfjx2/myRq4JeQ8D3xIWYTFqusi0hS/Aka7RFX1xQEoEkdOGDWyXNb8LmObawsUzbI30gQnZvqYXCrkA==} + peerDependencies: + typescript: '>=4.0.0' + dependencies: + '@types/postcss-modules-local-by-default': 4.0.0 + '@types/postcss-modules-scope': 3.0.1 + dotenv: 16.3.1 + icss-utils: 5.1.0(postcss@8.4.30) + less: 4.2.0 + lodash.camelcase: 4.3.0 + postcss: 8.4.30 + postcss-load-config: 3.1.4(postcss@8.4.30) + postcss-modules-extract-imports: 3.0.0(postcss@8.4.30) + postcss-modules-local-by-default: 4.0.3(postcss@8.4.30) + postcss-modules-scope: 3.0.0(postcss@8.4.30) + reserved-words: 0.1.2 + sass: 1.68.0 + source-map-js: 1.0.2 + stylus: 0.59.0 + tsconfig-paths: 4.2.0 + typescript: 5.2.2 + transitivePeerDependencies: + - supports-color + - ts-node + dev: true + /typescript@5.2.2: resolution: {integrity: sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==} engines: {node: '>=14.17'} From a94b885e6a471ffff0e09f90022307b77f987384 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Fri, 22 Sep 2023 16:10:02 +0100 Subject: [PATCH 2/7] refactor: MRT_TableBodyRow to CSS modules --- .../src/body/MRT_TableBodyCellValue.tsx | 2 +- .../MRT_TableBodyRow.module.css | 33 +++++++++++++++ .../MRT_TableBodyRow.tsx | 42 +++++++++---------- .../src/body/MRT_TableBodyRow/index.ts | 4 ++ 4 files changed, 59 insertions(+), 22 deletions(-) create mode 100644 packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.module.css rename packages/mantine-react-table/src/body/{ => MRT_TableBodyRow}/MRT_TableBodyRow.tsx (81%) create mode 100644 packages/mantine-react-table/src/body/MRT_TableBodyRow/index.ts diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx index 4b890769c..5986e9785 100644 --- a/packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx +++ b/packages/mantine-react-table/src/body/MRT_TableBodyCellValue.tsx @@ -76,7 +76,7 @@ export const MRT_TableBodyCellValue = = {}>({ renderedCellValue = ( diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.module.css b/packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.module.css new file mode 100644 index 000000000..9c86b5387 --- /dev/null +++ b/packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.module.css @@ -0,0 +1,33 @@ +.MRT_TableBodyRow { + box-sizing: border-box; + width: 100%; + transition: all 100ms ease-in-out; + &--layout-grid { + display: flex; + } + + &--layout-table-row { + display: table-row; + } + + &--virtual { + position: absolute; + top: 0; + transition: none !important; + } + + &--hover { + &:hover td[data-selected="true"] { + background-color: var(--mantine-primary-color-filled) + } + + &:hover td[data-selected="false"] { + @mixin light { + background-color: rgba(var(--mantine-color-white), 0.05); + } + @mixin dark { + background-color: rgba(var(--mantine-color-dark-7), 0.12); + } + } + } +} diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.tsx similarity index 81% rename from packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx rename to packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.tsx index 88bd43f46..238216c5b 100644 --- a/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx +++ b/packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.tsx @@ -1,15 +1,20 @@ import { type DragEvent, memo, useRef } from 'react'; -import { Box, darken, lighten, rgba } from '@mantine/core'; -import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell'; -import { MRT_TableDetailPanel } from './MRT_TableDetailPanel'; -import { getPrimaryColor } from '../column.utils'; +import { Box } from '@mantine/core'; +import clsx from 'clsx'; +import { + Memo_MRT_TableBodyCell, + MRT_TableBodyCell, +} from '../MRT_TableBodyCell'; +import { MRT_TableDetailPanel } from '../MRT_TableDetailPanel'; import { type MRT_Cell, type MRT_Row, type MRT_TableInstance, type MRT_VirtualItem, type MRT_Virtualizer, -} from '../types'; +} from '../../types'; + +import classes from './MRT_TableBodyRow.module.css'; interface Props = {}> { columnVirtualizer?: MRT_Virtualizer; @@ -24,6 +29,7 @@ interface Props = {}> { virtualPaddingLeft?: number; virtualPaddingRight?: number; virtualRow?: MRT_VirtualItem; + className?: string | string[]; } export const MRT_TableBodyRow = = {}>({ @@ -39,6 +45,7 @@ export const MRT_TableBodyRow = = {}>({ virtualPaddingLeft, virtualPaddingRight, virtualRow, + className, }: Props) => { const { getState, @@ -70,9 +77,18 @@ export const MRT_TableBodyRow = = {}>({ return ( <> { if (node) { rowRef.current = node; @@ -81,27 +97,11 @@ export const MRT_TableBodyRow = = {}>({ }} {...tableRowProps} style={(theme) => ({ - boxSizing: 'border-box', - display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1, - position: virtualRow ? 'absolute' : undefined, - top: virtualRow ? 0 : undefined, - transition: virtualRow ? 'none' : 'all 100ms ease-in-out', - width: '100%', transform: virtualRow ? `translateY(${virtualRow?.start}px)` : undefined, - '&:hover td': { - backgroundColor: - enableHover !== false - ? row.getIsSelected() - ? rgba(getPrimaryColor(theme), 0.2) - : theme.colorScheme === 'dark' - ? `${lighten(theme.colors.dark[7], 0.12)}` - : `${darken(theme.white, 0.05)}` - : undefined, - }, ...(tableRowProps?.style instanceof Function ? tableRowProps.style(theme) : (tableRowProps?.style as any)), diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow/index.ts b/packages/mantine-react-table/src/body/MRT_TableBodyRow/index.ts new file mode 100644 index 000000000..edb6504fa --- /dev/null +++ b/packages/mantine-react-table/src/body/MRT_TableBodyRow/index.ts @@ -0,0 +1,4 @@ +export { + Memo_MRT_TableBodyRow, + MRT_TableBodyRow +} from './MRT_TableBodyRow' From e5487465c4089444155301a1957be47c60ae3fa8 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Fri, 22 Sep 2023 21:02:24 +0100 Subject: [PATCH 3/7] refactor: moved files back one folder --- .../body/{MRT_TableBodyRow => }/MRT_TableBodyRow.module.css | 0 .../src/body/{MRT_TableBodyRow => }/MRT_TableBodyRow.tsx | 6 +++--- .../mantine-react-table/src/body/MRT_TableBodyRow/index.ts | 4 ---- 3 files changed, 3 insertions(+), 7 deletions(-) rename packages/mantine-react-table/src/body/{MRT_TableBodyRow => }/MRT_TableBodyRow.module.css (100%) rename packages/mantine-react-table/src/body/{MRT_TableBodyRow => }/MRT_TableBodyRow.tsx (97%) delete mode 100644 packages/mantine-react-table/src/body/MRT_TableBodyRow/index.ts diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.module.css b/packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css similarity index 100% rename from packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.module.css rename to packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.tsx b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx similarity index 97% rename from packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.tsx rename to packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx index 238216c5b..49470b279 100644 --- a/packages/mantine-react-table/src/body/MRT_TableBodyRow/MRT_TableBodyRow.tsx +++ b/packages/mantine-react-table/src/body/MRT_TableBodyRow.tsx @@ -4,15 +4,15 @@ import clsx from 'clsx'; import { Memo_MRT_TableBodyCell, MRT_TableBodyCell, -} from '../MRT_TableBodyCell'; -import { MRT_TableDetailPanel } from '../MRT_TableDetailPanel'; +} from './MRT_TableBodyCell'; +import { MRT_TableDetailPanel } from './MRT_TableDetailPanel'; import { type MRT_Cell, type MRT_Row, type MRT_TableInstance, type MRT_VirtualItem, type MRT_Virtualizer, -} from '../../types'; +} from '../types'; import classes from './MRT_TableBodyRow.module.css'; diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow/index.ts b/packages/mantine-react-table/src/body/MRT_TableBodyRow/index.ts deleted file mode 100644 index edb6504fa..000000000 --- a/packages/mantine-react-table/src/body/MRT_TableBodyRow/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export { - Memo_MRT_TableBodyRow, - MRT_TableBodyRow -} from './MRT_TableBodyRow' From 4fc9879f7017125b76ca9ba41a69a4cc8291c3e3 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Sat, 23 Sep 2023 16:40:43 +0100 Subject: [PATCH 4/7] refactor: MRT_TableFooter to CSS modules --- .../src/footer/MRT_TableFooter.module.css | 24 +++++++++++++++++++ .../src/footer/MRT_TableFooter.tsx | 19 +++++++-------- 2 files changed, 33 insertions(+), 10 deletions(-) create mode 100644 packages/mantine-react-table/src/footer/MRT_TableFooter.module.css diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooter.module.css b/packages/mantine-react-table/src/footer/MRT_TableFooter.module.css new file mode 100644 index 000000000..12e827e42 --- /dev/null +++ b/packages/mantine-react-table/src/footer/MRT_TableFooter.module.css @@ -0,0 +1,24 @@ +.MRT_TableFooter { + &--grid { + display: grid; + } + + &--table-row-group { + display: table-row-group; + } + + &--sticky { + bottom: 0; + opacity: 0.97; + position: sticky; + z-index: 1; + + @mixin light { + outline: 1px solid var(--mantine-color-gray-3); + } + + @mixin dark { + outline: 1px solid var(--mantine-color-gray-7); + } + } +} diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx index a5ea4370b..02c07ed15 100644 --- a/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx +++ b/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx @@ -1,6 +1,8 @@ import { Box } from '@mantine/core'; +import clsx from 'clsx'; import { MRT_TableFooterRow } from './MRT_TableFooterRow'; import { type MRT_TableInstance, type MRT_VirtualItem } from '../types'; +import classes from './MRT_TableFooter.module.css'; interface Props = {}> { table: MRT_TableInstance; @@ -34,17 +36,14 @@ export const MRT_TableFooter = = {}>({ ({ - bottom: stickFooter ? 0 : undefined, - display: layoutMode === 'grid' ? 'grid' : 'table-row-group', - opacity: stickFooter ? 0.97 : undefined, - outline: stickFooter - ? theme.colorScheme === 'light' - ? `1px solid ${theme.colors.gray[3]}` - : `1px solid ${theme.colors.gray[7]}` - : undefined, - position: stickFooter ? 'sticky' : undefined, - zIndex: stickFooter ? 1 : undefined, ...(tableFooterProps?.style instanceof Function ? tableFooterProps?.style(theme) : (tableFooterProps?.style as any)), From 77cda94c030fcc6b24e85df685179995e199d693 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Sat, 23 Sep 2023 21:14:08 +0100 Subject: [PATCH 5/7] refactor: footer components to CSS modules --- .../mantine-react-table/src/column.utils.ts | 10 ++++++++-- .../src/footer/MRT_TableFooterCell.module.css | 18 ++++++++++++++++++ .../src/footer/MRT_TableFooterCell.tsx | 17 +++++++++++------ .../src/footer/MRT_TableFooterRow.module.css | 16 ++++++++++++++++ .../src/footer/MRT_TableFooterRow.tsx | 19 +++++++++++-------- 5 files changed, 64 insertions(+), 16 deletions(-) create mode 100644 packages/mantine-react-table/src/footer/MRT_TableFooterCell.module.css create mode 100644 packages/mantine-react-table/src/footer/MRT_TableFooterRow.module.css diff --git a/packages/mantine-react-table/src/column.utils.ts b/packages/mantine-react-table/src/column.utils.ts index e297b6be9..687e394d3 100644 --- a/packages/mantine-react-table/src/column.utils.ts +++ b/packages/mantine-react-table/src/column.utils.ts @@ -8,7 +8,13 @@ import { import { type MRT_AggregationFns } from './aggregationFns'; import { type MRT_FilterFns } from './filterFns'; import { type MRT_SortingFns } from './sortingFns'; -import { rgba, type BoxProps, type MantineTheme, darken, lighten } from '@mantine/core'; +import { + rgba, + type BoxProps, + type MantineTheme, + darken, + lighten, +} from '@mantine/core'; import { type MRT_TableOptions, type MantineShade, @@ -281,7 +287,7 @@ export const getCanRankRows = = {}>( !Object.values(expanded).some(Boolean) ); }; - +// TODO: this needs to be refactored out to use CSS classes/styles export const getCommonCellStyles = = {}>({ column, header, diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterCell.module.css b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.module.css new file mode 100644 index 000000000..550a844db --- /dev/null +++ b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.module.css @@ -0,0 +1,18 @@ +.MRT_TableFooterCell { + font-weight: bold; + // Not resolved? + padding: rem(9px); + vertical-align: top; + + &--center-column { + justify-content: center; + } + + &--grid { + display: grid; + } + + &--table-cell { + display: table-cell; + } +} diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx index 4f9c1e35f..c3fba6118 100644 --- a/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx +++ b/packages/mantine-react-table/src/footer/MRT_TableFooterCell.tsx @@ -1,6 +1,8 @@ import { Box } from '@mantine/core'; +import clsx from 'clsx'; import { getCommonCellStyles } from '../column.utils'; import { type MRT_Header, type MRT_TableInstance } from '../types'; +import classes from './MRT_TableFooterCell.module.css'; interface Props = {}> { footer: MRT_Header; @@ -28,7 +30,7 @@ export const MRT_TableFooterCell = = {}>({ ? columnDef.mantineTableFooterCellProps({ column, table }) : columnDef.mantineTableFooterCellProps; - const tableCellProps = { + const { className, ...tableCellProps } = { ...mTableFooterCellProps, ...mcTableFooterCellProps, }; @@ -39,12 +41,15 @@ export const MRT_TableFooterCell = = {}>({ align={columnDefType === 'group' ? 'center' : 'left'} colSpan={footer.colSpan} {...tableCellProps} + className={clsx( + classes.MRT_TableFooterCell, + layoutMode === 'grid' + ? classes.MRT_TableFooterCellGrid + : classes.MRT_TableFooterCellTableCell, + columnDefType === 'group' && classes.MRT_TableFooterCellCenterColumn, + className, + )} style={(theme) => ({ - display: layoutMode === 'grid' ? 'grid' : 'table-cell', - fontWeight: 'bold', - justifyContent: columnDefType === 'group' ? 'center' : undefined, - padding: '8px', - verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1, ...getCommonCellStyles({ column, diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.module.css b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.module.css new file mode 100644 index 000000000..19258d056 --- /dev/null +++ b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.module.css @@ -0,0 +1,16 @@ +.MRT_TableFooterRow { + width: 100%; + @mixin light { + background-color: rgba(var(--mantine-color-white), 0.06); + } + @mixin dark { + background-color: rgba(var(--mantine-color-dark-7), 0.06); + } + + &--grid { + display: grid; + } + &--table-row { + display: table-row; + } +} diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx index ab6169d0e..39ad6dbd1 100644 --- a/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx +++ b/packages/mantine-react-table/src/footer/MRT_TableFooterRow.tsx @@ -1,4 +1,5 @@ -import { Box, lighten } from '@mantine/core'; +import { Box } from '@mantine/core'; +import clsx from 'clsx'; import { MRT_TableFooterCell } from './MRT_TableFooterCell'; import { type MRT_Header, @@ -6,6 +7,7 @@ import { type MRT_TableInstance, type MRT_VirtualItem, } from '../types'; +import classes from './MRT_TableFooterRow.module.css'; interface Props = {}> { footerGroup: MRT_HeaderGroup; @@ -37,7 +39,7 @@ export const MRT_TableFooterRow = = {}>({ ) return null; - const tableRowProps = + const { className, ...tableRowProps } = mantineTableFooterRowProps instanceof Function ? mantineTableFooterRowProps({ footerGroup, table }) : mantineTableFooterRowProps; @@ -45,14 +47,15 @@ export const MRT_TableFooterRow = = {}>({ return ( ({ - backgroundColor: lighten( - theme.colorScheme === 'dark' ? theme.colors.dark[7] : theme.white, - 0.06, - ), - display: layoutMode === 'grid' ? 'flex' : 'table-row', - width: '100%', ...(tableRowProps?.style instanceof Function ? tableRowProps?.style(theme) : (tableRowProps?.style as any)), From 253a27ddd881c80f0f534a198af2964aec55ef10 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Sat, 23 Sep 2023 21:16:57 +0100 Subject: [PATCH 6/7] refactor: use hover mixin for MRT_TableBodyRow.module.css --- .../src/body/MRT_TableBodyRow.module.css | 21 ++++++++++++------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css b/packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css index 9c86b5387..7a16e35e9 100644 --- a/packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css +++ b/packages/mantine-react-table/src/body/MRT_TableBodyRow.module.css @@ -2,6 +2,7 @@ box-sizing: border-box; width: 100%; transition: all 100ms ease-in-out; + &--layout-grid { display: flex; } @@ -17,16 +18,20 @@ } &--hover { - &:hover td[data-selected="true"] { - background-color: var(--mantine-primary-color-filled) + td[data-selected="true"] { + @mixin hover { + background-color: var(--mantine-primary-color-filled) + } } - &:hover td[data-selected="false"] { - @mixin light { - background-color: rgba(var(--mantine-color-white), 0.05); - } - @mixin dark { - background-color: rgba(var(--mantine-color-dark-7), 0.12); + td[data-selected="false"] { + @mixin hover { + @mixin light { + background-color: rgba(var(--mantine-color-white), 0.05); + } + @mixin dark { + background-color: rgba(var(--mantine-color-dark-7), 0.12); + } } } } From 323469834853484835fd46a32be8ac0f5325c8c7 Mon Sep 17 00:00:00 2001 From: Alessandro Cuppari Date: Sat, 23 Sep 2023 21:19:49 +0100 Subject: [PATCH 7/7] refactor: destructure classname --- packages/mantine-react-table/src/footer/MRT_TableFooter.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx b/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx index 02c07ed15..5d47ea22e 100644 --- a/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx +++ b/packages/mantine-react-table/src/footer/MRT_TableFooter.tsx @@ -24,7 +24,7 @@ export const MRT_TableFooter = = {}>({ } = table; const { isFullScreen } = getState(); - const tableFooterProps = + const { className, ...tableFooterProps } = mantineTableFooterProps instanceof Function ? mantineTableFooterProps({ table }) : mantineTableFooterProps; @@ -41,7 +41,7 @@ export const MRT_TableFooter = = {}>({ layoutMode === 'grid' ? classes.MRT_TableFooterGrid : classes.MRT_TableFooterTableRowGroup, - tableFooterProps?.className, + className, )} style={(theme) => ({ ...(tableFooterProps?.style instanceof Function