From 7ff84645cbf66cb7228760ab6e860ac2fea25455 Mon Sep 17 00:00:00 2001 From: Domino987 Date: Fri, 2 Jul 2021 00:31:36 +0200 Subject: [PATCH] refactor :adapt to mui beta --- package-lock.json | 214 ++++++++---------- package.json | 17 +- src/components/MTableHeader/index.js | 26 ++- src/components/MTablePagination/index.js | 22 +- .../MTableSteppedPaginationInner/index.js | 22 +- src/components/MTableSummaryRow/index.js | 5 +- src/components/MTableToolbar/index.js | 17 +- src/components/Overlay/OverlayError.js | 4 +- src/components/Overlay/OverlayLoading.js | 5 +- src/index.js | 22 +- src/material-table.js | 11 +- 11 files changed, 166 insertions(+), 199 deletions(-) diff --git a/package-lock.json b/package-lock.json index 840d18a0..1dd95f42 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2105,17 +2105,16 @@ } }, "@material-ui/core": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-5.0.0-alpha.35.tgz", - "integrity": "sha512-IEEjG0PTjsraPMd/I/CxFnCK1kTzibAOAlZ5a8F98JzJiKIl0FuXtJZU3mVDUUYN3Hr5V//sw9hKRS2Uqep+5A==", + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-5.0.0-beta.0.tgz", + "integrity": "sha512-QU3ylBrILAUU04og7QZxYxwb14usCDTtuj/2ILjIfGNqhneSPMsg1bMKFXZQXo3tGlFBfZpDxet7AIjlxBKpcA==", + "dev": true, "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/private-theming": "5.0.0-alpha.35", - "@material-ui/styled-engine": "5.0.0-alpha.34", - "@material-ui/system": "5.0.0-alpha.35", + "@material-ui/system": "5.0.0-beta.0", "@material-ui/types": "6.0.1", - "@material-ui/unstyled": "5.0.0-alpha.35", - "@material-ui/utils": "5.0.0-alpha.35", + "@material-ui/unstyled": "5.0.0-alpha.39", + "@material-ui/utils": "5.0.0-beta.0", "@popperjs/core": "^2.4.4", "@types/react-transition-group": "^4.2.0", "clsx": "^1.0.4", @@ -2129,22 +2128,24 @@ "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", - "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" + "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", + "dev": true } } }, "@material-ui/lab": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-5.0.0-alpha.35.tgz", - "integrity": "sha512-AvPVSN17Oh9LBbfOkpBue5cn/IRk2F++8Hnuw+Jl0ZafyAUWAl4B9XIXwBkCp4UIWYlUFiuKWm854P1duYkILg==", + "version": "5.0.0-alpha.39", + "resolved": "https://registry.npmjs.org/@material-ui/lab/-/lab-5.0.0-alpha.39.tgz", + "integrity": "sha512-is8nRR/2lwWBTihE6nie2zphBESCf1EDUxVaC8mL9fiSfYkmA9L2X/JO4mn5QS2RXCKBBIm+qF2BMXKDdepGRA==", "requires": { "@babel/runtime": "^7.4.4", "@date-io/date-fns": "^2.10.6", "@date-io/dayjs": "^2.10.6", "@date-io/luxon": "^2.10.6", "@date-io/moment": "^2.10.6", - "@material-ui/system": "5.0.0-alpha.35", - "@material-ui/utils": "5.0.0-alpha.35", + "@material-ui/system": "5.0.0-beta.0", + "@material-ui/unstyled": "5.0.0-alpha.39", + "@material-ui/utils": "5.0.0-beta.0", "clsx": "^1.0.4", "prop-types": "^15.7.2", "react-is": "^17.0.0", @@ -2165,36 +2166,6 @@ "@date-io/core": "^2.10.11" } }, - "@material-ui/system": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-5.0.0-alpha.35.tgz", - "integrity": "sha512-Jz21xD1ieOxesAxRv0eNWZFgZsUqO4cLnkoJV57ldtnLAaSKJ7hPiHCo28gTezEij7MQbHlmSCAlndlKate0GA==", - "requires": { - "@babel/runtime": "^7.4.4", - "@material-ui/styled-engine": "5.0.0-alpha.34", - "@material-ui/types": "6.0.1", - "@material-ui/utils": "5.0.0-alpha.35", - "csstype": "^3.0.2", - "prop-types": "^15.7.2" - } - }, - "@material-ui/types": { - "version": "6.0.1", - "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-6.0.1.tgz", - "integrity": "sha512-t53C2BZE59e8ao38EDIZdM2smPDSEo5Xx9XxQ/MNM9Ph63Mu4vj5pmECiXkYp0y2OrvFiiZhcqRWV34SBOA18g==" - }, - "@material-ui/utils": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-5.0.0-alpha.35.tgz", - "integrity": "sha512-Msu+zIXd7Y2JrTU9JIf0xjjjAMdWEIdlj2Tmj9bSYFF6bgStrQ1WXXZxxFz5GmdzT7FcLi5U3PqBynSNX/QDGA==", - "requires": { - "@babel/runtime": "^7.4.4", - "@types/prop-types": "^15.7.3", - "@types/react-is": "^16.7.1 || ^17.0.0", - "prop-types": "^15.7.2", - "react-is": "^17.0.0" - } - }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -2203,19 +2174,19 @@ } }, "@material-ui/private-theming": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/private-theming/-/private-theming-5.0.0-alpha.35.tgz", - "integrity": "sha512-D02L9kYjnMd8PtJUSXpiBk13+FnjQIDWINzBtRJXpwDooA7M3ejtTGPp+YJnP/wYs4nKdh852/+WiRk3VI5q4Q==", + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/@material-ui/private-theming/-/private-theming-5.0.0-beta.0.tgz", + "integrity": "sha512-qML7cZBD7XSvxQPdkhj6dieOgTLJ9WzAI8IMpy3Fqvb0YUXRZGPhb4znM5uko19k1D10bC4xb+0k0cAeWWwJxA==", "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/utils": "5.0.0-alpha.35", + "@material-ui/utils": "5.0.0-beta.0", "prop-types": "^15.7.2" } }, "@material-ui/styled-engine": { - "version": "5.0.0-alpha.34", - "resolved": "https://registry.npmjs.org/@material-ui/styled-engine/-/styled-engine-5.0.0-alpha.34.tgz", - "integrity": "sha512-1j+4tIxS6x3McJ+3O9mxwzjkci/uu09nnON7ZDgqX9O3f15D8CP8cmAy0PDm47M4utMwIqj+EaS4Y6d2PZWF5Q==", + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/@material-ui/styled-engine/-/styled-engine-5.0.0-beta.0.tgz", + "integrity": "sha512-+pqTBL6p2XdQk7icyI2tQoPxQUya5AJRTa7S6rHO14B8t2fUdLM4CXuJetkj+bLjQCpIQOewTqs0PniGvpKHkw==", "requires": { "@babel/runtime": "^7.4.4", "@emotion/cache": "^11.0.0", @@ -2223,15 +2194,15 @@ } }, "@material-ui/styles": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-5.0.0-alpha.35.tgz", - "integrity": "sha512-GQ99bQkKjyC6AJXEdYvRcZ6k4xarZl3ybxQ3UPGlDxlLUbtE5dHT5Mg88NON7kVhSZOS4sTqE+c2ggvvLYja5g==", + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-5.0.0-beta.0.tgz", + "integrity": "sha512-dJkijxZtCwNvtLU1ur3fl1RpCxoL0Ko6I/ht7FVvxCZkNT0XntxmvgG0wm0P/3Fk4NNRzpoRosPnAOsBpthkhQ==", "requires": { "@babel/runtime": "^7.4.4", "@emotion/hash": "^0.8.0", - "@material-ui/private-theming": "5.0.0-alpha.35", + "@material-ui/private-theming": "5.0.0-beta.0", "@material-ui/types": "6.0.1", - "@material-ui/utils": "5.0.0-alpha.35", + "@material-ui/utils": "5.0.0-beta.0", "clsx": "^1.0.4", "csstype": "^3.0.2", "hoist-non-react-statics": "^3.3.2", @@ -2247,14 +2218,16 @@ } }, "@material-ui/system": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-5.0.0-alpha.35.tgz", - "integrity": "sha512-Jz21xD1ieOxesAxRv0eNWZFgZsUqO4cLnkoJV57ldtnLAaSKJ7hPiHCo28gTezEij7MQbHlmSCAlndlKate0GA==", + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-5.0.0-beta.0.tgz", + "integrity": "sha512-JqdRYgm0df8tBX0j8NjM2AP+HdJKn0wUVcDviSe8j4wd60xwltooMSqQNqCrELFhyDMtagF2PLhc0gChRyaZ9g==", "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/styled-engine": "5.0.0-alpha.34", + "@material-ui/private-theming": "5.0.0-beta.0", + "@material-ui/styled-engine": "5.0.0-beta.0", "@material-ui/types": "6.0.1", - "@material-ui/utils": "5.0.0-alpha.35", + "@material-ui/utils": "5.0.0-beta.0", + "clsx": "^1.0.4", "csstype": "^3.0.2", "prop-types": "^15.7.2" } @@ -2265,12 +2238,12 @@ "integrity": "sha512-t53C2BZE59e8ao38EDIZdM2smPDSEo5Xx9XxQ/MNM9Ph63Mu4vj5pmECiXkYp0y2OrvFiiZhcqRWV34SBOA18g==" }, "@material-ui/unstyled": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/unstyled/-/unstyled-5.0.0-alpha.35.tgz", - "integrity": "sha512-iTlwlftnH/3w4hU/xaJePMDVsL/JtYJhruJxZ2Tt/2eVzGTvYq88PLQ5+o2VBRROnxQGKRjpNuX3nss+/RudPg==", + "version": "5.0.0-alpha.39", + "resolved": "https://registry.npmjs.org/@material-ui/unstyled/-/unstyled-5.0.0-alpha.39.tgz", + "integrity": "sha512-RUryD7sA+pd/ZXdLRmds7m0JYSttKtrju5mkSb6eK7mIIdSUWXiQXukDW5kidYNBdXkqPzyrKw0h0qV3yrj6aw==", "requires": { "@babel/runtime": "^7.4.4", - "@material-ui/utils": "5.0.0-alpha.35", + "@material-ui/utils": "5.0.0-beta.0", "clsx": "^1.0.4", "prop-types": "^15.7.2", "react-is": "^17.0.0" @@ -2284,9 +2257,9 @@ } }, "@material-ui/utils": { - "version": "5.0.0-alpha.35", - "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-5.0.0-alpha.35.tgz", - "integrity": "sha512-Msu+zIXd7Y2JrTU9JIf0xjjjAMdWEIdlj2Tmj9bSYFF6bgStrQ1WXXZxxFz5GmdzT7FcLi5U3PqBynSNX/QDGA==", + "version": "5.0.0-beta.0", + "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-5.0.0-beta.0.tgz", + "integrity": "sha512-eBBqd+53NBUCgTU6TFGlhN0GsAPmnrHwdVBW6y4t/jP6sEXgDjVaJm5FKSYKkkCl+iRfZEAfdYyCeAn04eummw==", "requires": { "@babel/runtime": "^7.4.4", "@types/prop-types": "^15.7.3", @@ -2331,7 +2304,8 @@ "@popperjs/core": { "version": "2.9.2", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz", - "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==" + "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==", + "dev": true }, "@sinonjs/commons": { "version": "1.8.1", @@ -2518,18 +2492,19 @@ "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==" }, "@types/react": { - "version": "17.0.0", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.0.tgz", - "integrity": "sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==", + "version": "17.0.13", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.13.tgz", + "integrity": "sha512-D/G3PiuqTfE3IMNjLn/DCp6umjVCSvtZTPdtAFy5+Ved6CsdRvivfKeCzw79W4AatShtU4nGqgvOv5Gro534vQ==", "requires": { "@types/prop-types": "*", + "@types/scheduler": "*", "csstype": "^3.0.2" } }, "@types/react-is": { - "version": "17.0.0", - "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.0.tgz", - "integrity": "sha512-A0DQ1YWZ0RG2+PV7neAotNCIh8gZ3z7tQnDJyS2xRPDNtAtSPcJ9YyfMP8be36Ha0kQRzbZCrrTMznA4blqO5g==", + "version": "17.0.1", + "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.1.tgz", + "integrity": "sha512-X6jVqDIibL2sY0Qtth5EzNeUgPyoCWeBZdmE5xKr7hI4zaQDwN0VaQd7pJnlOB0mDGnOVH0cZZVXg9cnWhztQg==", "requires": { "@types/react": "*" } @@ -2538,10 +2513,16 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz", "integrity": "sha512-vIo69qKKcYoJ8wKCJjwSgCTM+z3chw3g18dkrDfVX665tMH7tmbDxEAnPdey4gTlwZz5QuHGzd+hul0OVZDqqQ==", + "dev": true, "requires": { "@types/react": "*" } }, + "@types/scheduler": { + "version": "0.16.1", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.1.tgz", + "integrity": "sha512-EaCxbanVeyxDRTQBkdLb3Bvl/HK7PBK6UJjsSixB0iHKoWxE5uu2Q/DgtpOhPIojN0Zl1whvOd7PoHs2P0s5eA==" + }, "@types/stack-utils": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.0.tgz", @@ -4633,9 +4614,9 @@ } }, "dom-helpers": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.0.tgz", - "integrity": "sha512-Ru5o9+V8CpunKnz5LGgWXkmrH/20cGKwcHwS4m73zIvs54CN9epEmT/HLqFJW3kXpakAFkEdzgy1hzlJe3E4OQ==", + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", + "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", "requires": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" @@ -6548,14 +6529,6 @@ "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=", "dev": true }, - "indefinite-observable": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/indefinite-observable/-/indefinite-observable-2.0.1.tgz", - "integrity": "sha512-G8vgmork+6H9S8lUAg1gtXEj2JxIQTo0g2PbFiYOdjkziSI0F7UYBiVwhZRuixhBCNGczAls34+5HJPyZysvxQ==", - "requires": { - "symbol-observable": "1.2.0" - } - }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -8854,82 +8827,81 @@ } }, "jss": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss/-/jss-10.6.0.tgz", - "integrity": "sha512-n7SHdCozmxnzYGXBHe0NsO0eUf9TvsHVq2MXvi4JmTn3x5raynodDVE/9VQmBdWFyyj9HpHZ2B4xNZ7MMy7lkw==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss/-/jss-10.7.1.tgz", + "integrity": "sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==", "requires": { "@babel/runtime": "^7.3.1", "csstype": "^3.0.2", - "indefinite-observable": "^2.0.1", "is-in-browser": "^1.1.3", "tiny-warning": "^1.0.2" } }, "jss-plugin-camel-case": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.6.0.tgz", - "integrity": "sha512-JdLpA3aI/npwj3nDMKk308pvnhoSzkW3PXlbgHAzfx0yHWnPPVUjPhXFtLJzgKZge8lsfkUxvYSQ3X2OYIFU6A==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz", + "integrity": "sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==", "requires": { "@babel/runtime": "^7.3.1", "hyphenate-style-name": "^1.0.3", - "jss": "10.6.0" + "jss": "10.7.1" } }, "jss-plugin-default-unit": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.6.0.tgz", - "integrity": "sha512-7y4cAScMHAxvslBK2JRK37ES9UT0YfTIXWgzUWD5euvR+JR3q+o8sQKzBw7GmkQRfZijrRJKNTiSt1PBsLI9/w==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz", + "integrity": "sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.6.0" + "jss": "10.7.1" } }, "jss-plugin-global": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.6.0.tgz", - "integrity": "sha512-I3w7ji/UXPi3VuWrTCbHG9rVCgB4yoBQLehGDTmsnDfXQb3r1l3WIdcO8JFp9m0YMmyy2CU7UOV6oPI7/Tmu+w==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz", + "integrity": "sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.6.0" + "jss": "10.7.1" } }, "jss-plugin-nested": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.6.0.tgz", - "integrity": "sha512-fOFQWgd98H89E6aJSNkEh2fAXquC9aZcAVjSw4q4RoQ9gU++emg18encR4AT4OOIFl4lQwt5nEyBBRn9V1Rk8g==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz", + "integrity": "sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.6.0", + "jss": "10.7.1", "tiny-warning": "^1.0.2" } }, "jss-plugin-props-sort": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.6.0.tgz", - "integrity": "sha512-oMCe7hgho2FllNc60d9VAfdtMrZPo9n1Iu6RNa+3p9n0Bkvnv/XX5San8fTPujrTBScPqv9mOE0nWVvIaohNuw==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz", + "integrity": "sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.6.0" + "jss": "10.7.1" } }, "jss-plugin-rule-value-function": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.6.0.tgz", - "integrity": "sha512-TKFqhRTDHN1QrPTMYRlIQUOC2FFQb271+AbnetURKlGvRl/eWLswcgHQajwuxI464uZk91sPiTtdGi7r7XaWfA==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz", + "integrity": "sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==", "requires": { "@babel/runtime": "^7.3.1", - "jss": "10.6.0", + "jss": "10.7.1", "tiny-warning": "^1.0.2" } }, "jss-plugin-vendor-prefixer": { - "version": "10.6.0", - "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.6.0.tgz", - "integrity": "sha512-doJ7MouBXT1lypLLctCwb4nJ6lDYqrTfVS3LtXgox42Xz0gXusXIIDboeh6UwnSmox90QpVnub7au8ybrb0krQ==", + "version": "10.7.1", + "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz", + "integrity": "sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==", "requires": { "@babel/runtime": "^7.3.1", "css-vendor": "^2.0.8", - "jss": "10.6.0" + "jss": "10.7.1" } }, "jsx-ast-utils": { @@ -10422,9 +10394,9 @@ } }, "react-transition-group": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz", - "integrity": "sha512-Djqr7OQ2aPUiYurhPalTrVy9ddmFCCzwhqQmtN+J3+3DzLO209Fdr70QrN8Z3DsglWql6iY1lDWAfpFiBtuKGw==", + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", + "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", "requires": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", diff --git a/package.json b/package.json index e55ffc33..961ff81f 100644 --- a/package.json +++ b/package.json @@ -61,7 +61,7 @@ "@babel/plugin-transform-runtime": "^7.12.10", "@babel/preset-env": "^7.12.11", "@babel/preset-react": "^7.12.10", - "@material-ui/core": "^4.11.2", + "@material-ui/core": "^5.0.0-beta.0", "@types/jest": "^26.0.20", "@webpack-cli/serve": "^1.2.1", "@wojtekmaj/enzyme-adapter-react-17": "^0.4.1", @@ -101,21 +101,20 @@ }, "dependencies": { "@babel/runtime": "^7.12.5", + "@date-io/core": "^1.3.13", "@date-io/date-fns": "^1.3.13", + "@emotion/core": "^11.0.0", + "@emotion/react": "^11.0.0", + "@emotion/styled": "^11.0.0", + "@material-ui/lab": "^5.0.0-alpha.39", + "@material-ui/styles": "^5.0.0-beta.0", "classnames": "^2.2.6", "date-fns": "^2.16.1", "debounce": "^1.2.0", "fast-deep-equal": "^3.1.3", "prop-types": "^15.7.2", "react-beautiful-dnd": "^13.0.0", - "react-double-scrollbar": "0.0.15", - "@date-io/core": "^1.3.13", - "@material-ui/core": "^5.0.0-alpha.36", - "@material-ui/styles": "^5.0.0-alpha.35", - "@material-ui/lab": "^5.0.0-alpha.36", - "@emotion/core": "^11.0.0", - "@emotion/react": "^11.0.0", - "@emotion/styled": "^11.0.0" + "react-double-scrollbar": "0.0.15" }, "peerDependencies": { "react": ">=16.8.0", diff --git a/src/components/MTableHeader/index.js b/src/components/MTableHeader/index.js index 8e105414..7b159fc8 100644 --- a/src/components/MTableHeader/index.js +++ b/src/components/MTableHeader/index.js @@ -6,11 +6,12 @@ import TableCell from '@material-ui/core/TableCell'; import TableSortLabel from '@material-ui/core/TableSortLabel'; import Checkbox from '@material-ui/core/Checkbox'; import { Draggable } from 'react-beautiful-dnd'; -import { Tooltip } from '@material-ui/core'; -import { withStyles } from '@material-ui/styles'; +import { Tooltip, useTheme } from '@material-ui/core'; +import { makeStyles } from '@material-ui/styles'; import * as CommonValues from '../../utils/common-values'; export function MTableHeader({ onColumnResized, ...props }) { + const classes = useStyles(); const [ { resizingColumnDef, lastX, lastAdditionalWidth }, // Extract the props to use instead of the whole state object setState @@ -69,7 +70,7 @@ export function MTableHeader({ onColumnResized, ...props }) { @@ -256,7 +257,7 @@ export function MTableHeader({ onColumnResized, ...props }) { {props.showSelectAllCheckbox && ( @@ -282,7 +283,7 @@ export function MTableHeader({ onColumnResized, ...props }) { ); @@ -322,7 +323,7 @@ export function MTableHeader({ onColumnResized, ...props }) { ); @@ -336,7 +337,7 @@ export function MTableHeader({ onColumnResized, ...props }) { ); }); @@ -391,7 +392,7 @@ MTableHeader.propTypes = { tooltip: PropTypes.string }; -export const styles = (theme) => ({ +export const useStyles = makeStyles((theme) => ({ header: { // display: 'inline-block', position: 'sticky', @@ -399,10 +400,11 @@ export const styles = (theme) => ({ zIndex: 10, backgroundColor: theme.palette.background.paper // Change according to theme, } -}); +})); const MTableHeaderRef = React.forwardRef(function MTableHeaderRef(props, ref) { - return ; + const theme = useTheme(); + return ; }); -export default withStyles(styles, { withTheme: true })(MTableHeaderRef); +export default MTableHeaderRef; diff --git a/src/components/MTablePagination/index.js b/src/components/MTablePagination/index.js index 0ca4275a..2817da9e 100644 --- a/src/components/MTablePagination/index.js +++ b/src/components/MTablePagination/index.js @@ -1,13 +1,16 @@ /* eslint-disable no-unused-vars */ import IconButton from '@material-ui/core/IconButton'; -import { withStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/styles'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; import PropTypes from 'prop-types'; import React from 'react'; +import { useTheme } from '@material-ui/core'; /* eslint-enable no-unused-vars */ function MTablePagination(props) { + const classes = useStyles(); + const theme = useTheme(); const handleFirstPageButtonClick = (event) => { props.onPageChange(event, 0); }; @@ -28,14 +31,7 @@ function MTablePagination(props) { }; function render() { - const { - classes, - count, - page, - rowsPerPage, - theme, - showFirstLastPageButtons - } = props; + const { count, page, rowsPerPage, showFirstLastPageButtons } = props; const localization = { ...MTablePagination.defaultProps.localization, @@ -135,14 +131,14 @@ function MTablePagination(props) { return render(); } -const actionsStyles = (theme) => ({ +const useStyles = makeStyles((theme) => ({ root: { flexShrink: 0, color: theme.palette.text.secondary, display: 'flex' // lineHeight: '48px' } -}); +})); MTablePagination.propTypes = { onChangePage: PropTypes.func, @@ -178,8 +174,6 @@ const MTableGroupRowRef = React.forwardRef(function MTablePaginationRef( return ; }); -const MTablePaginationOuter = withStyles(actionsStyles, { withTheme: true })( - MTableGroupRowRef -); +const MTablePaginationOuter = MTableGroupRowRef; export default MTablePaginationOuter; diff --git a/src/components/MTableSteppedPaginationInner/index.js b/src/components/MTableSteppedPaginationInner/index.js index 4cb6938f..5c670e72 100644 --- a/src/components/MTableSteppedPaginationInner/index.js +++ b/src/components/MTableSteppedPaginationInner/index.js @@ -1,12 +1,15 @@ import IconButton from '@material-ui/core/IconButton'; -import { withStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/styles'; import Tooltip from '@material-ui/core/Tooltip'; import Box from '@material-ui/core/Box'; import Button from '@material-ui/core/Button'; import PropTypes from 'prop-types'; import React from 'react'; +import { useTheme } from '@material-ui/core'; function MTablePaginationInner(props) { + const classes = useStyles(); + const theme = useTheme(); const handleFirstPageButtonClick = (event) => { props.onPageChange(event, 0); }; @@ -58,14 +61,7 @@ function MTablePaginationInner(props) { } function render() { - const { - classes, - count, - page, - rowsPerPage, - theme, - showFirstLastPageButtons - } = props; + const { count, page, rowsPerPage, showFirstLastPageButtons } = props; const localization = { ...MTablePaginationInner.defaultProps.localization, @@ -143,13 +139,13 @@ function MTablePaginationInner(props) { return render(); } -const actionsStyles = (theme) => ({ +const useStyles = makeStyles((theme) => ({ root: { flexShrink: 0, color: theme.palette.text.secondary, marginLeft: theme.spacing(2.5) } -}); +})); MTablePaginationInner.propTypes = { onPageChange: PropTypes.func, @@ -183,8 +179,6 @@ const MTableSteppedPaginationRef = React.forwardRef( } ); -const MTableSteppedPagination = withStyles(actionsStyles, { withTheme: true })( - MTableSteppedPaginationRef -); +const MTableSteppedPagination = MTableSteppedPaginationRef; export default MTableSteppedPagination; diff --git a/src/components/MTableSummaryRow/index.js b/src/components/MTableSummaryRow/index.js index c94a2364..e77e2390 100644 --- a/src/components/MTableSummaryRow/index.js +++ b/src/components/MTableSummaryRow/index.js @@ -1,6 +1,5 @@ import * as React from 'react'; import { TableRow, TableCell } from '@material-ui/core'; -import { withStyles } from '@material-ui/styles'; import { getStyle } from '../MTableCell/utils'; import * as CommonValues from '../../utils/common-values'; import PropTypes from 'prop-types'; @@ -113,6 +112,4 @@ MTableSummaryRow.propTypes = { renderSummaryRow: PropTypes.func }; -export const styles = (theme) => ({}); - -export default withStyles(styles)(MTableSummaryRow); +export default MTableSummaryRow; diff --git a/src/components/MTableToolbar/index.js b/src/components/MTableToolbar/index.js index adf773c9..74e19ca6 100644 --- a/src/components/MTableToolbar/index.js +++ b/src/components/MTableToolbar/index.js @@ -8,12 +8,13 @@ import Toolbar from '@material-ui/core/Toolbar'; import Tooltip from '@material-ui/core/Tooltip'; import Typography from '@material-ui/core/Typography'; import { lighten } from '@material-ui/core'; -import { withStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/styles'; import classNames from 'classnames'; import PropTypes from 'prop-types'; import React from 'react'; export function MTableToolbar(props) { + const classes = useStyles(); const [state, setState] = React.useState(() => ({ columnsButtonAnchorEl: null, exportButtonAnchorEl: null, @@ -70,7 +71,7 @@ export function MTableToolbar(props) { className={ props.searchFieldAlignment === 'left' && props.showTitle === false ? null - : props.classes.searchField + : classes.searchField } value={state.searchText} onChange={(event) => onSearchChange(event.target.value)} @@ -115,7 +116,6 @@ export function MTableToolbar(props) { ...MTableToolbar.defaultProps.localization, ...props.localization }; - const { classes } = props; return (
@@ -258,8 +258,6 @@ export function MTableToolbar(props) { } function renderActions() { - const { classes } = props; - return (
@@ -272,7 +270,6 @@ export function MTableToolbar(props) { } function renderToolbarTitle(title) { - const { classes } = props; const toolBarTitle = // eslint-disable-next-line multiline-ternary typeof title === 'string' ? ( @@ -294,7 +291,6 @@ export function MTableToolbar(props) { } function render() { - const { classes } = props; const localization = { ...MTableToolbar.defaultProps.localization, ...props.localization @@ -390,11 +386,10 @@ MTableToolbar.propTypes = { handler: PropTypes.func }) ), - classes: PropTypes.object, searchAutoFocus: PropTypes.bool }; -export const styles = (theme) => ({ +export const useStyles = makeStyles((theme) => ({ root: { paddingRight: theme.spacing(1), paddingLeft: theme.spacing(2) @@ -426,7 +421,7 @@ export const styles = (theme) => ({ paddingLeft: theme.spacing(1), paddingRight: theme.spacing(1) } -}); +})); const MTableToolbarRef = React.forwardRef(function MTableToolbarRef( props, @@ -435,4 +430,4 @@ const MTableToolbarRef = React.forwardRef(function MTableToolbarRef( return ; }); -export default withStyles(styles)(MTableToolbarRef); +export default MTableToolbarRef; diff --git a/src/components/Overlay/OverlayError.js b/src/components/Overlay/OverlayError.js index c2140950..f7122e95 100644 --- a/src/components/Overlay/OverlayError.js +++ b/src/components/Overlay/OverlayError.js @@ -1,7 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { useTheme } from '@material-ui/core'; function OverlayError(props) { + const theme = useTheme(); return (
diff --git a/src/components/Overlay/OverlayLoading.js b/src/components/Overlay/OverlayLoading.js index 6db1c97b..ca732b35 100644 --- a/src/components/Overlay/OverlayLoading.js +++ b/src/components/Overlay/OverlayLoading.js @@ -1,8 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; -import { CircularProgress } from '@material-ui/core'; +import { CircularProgress, useTheme } from '@material-ui/core'; function OverlayLoading(props) { + const theme = useTheme(); return (
diff --git a/src/index.js b/src/index.js index 76138620..9ef13070 100644 --- a/src/index.js +++ b/src/index.js @@ -3,12 +3,13 @@ import React from 'react'; import { defaultProps } from './defaults'; import { propTypes } from './prop-types'; import MaterialTable from './material-table'; -import { withStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/styles'; +import { useTheme } from '@material-ui/core'; MaterialTable.defaultProps = defaultProps; MaterialTable.propTypes = propTypes; -const styles = { +const useStyles = makeStyles({ paginationRoot: { width: '100%' }, @@ -22,11 +23,20 @@ const styles = { paginationSelectRoot: { margin: 0 } -}; +}); -export default withStyles(styles, { withTheme: true })((props) => ( - -)); +export default function Table(props) { + const classes = useStyles(); + const theme = useTheme(); + return ( + + ); +} export { MTableAction, diff --git a/src/material-table.js b/src/material-table.js index efaaec08..64291423 100644 --- a/src/material-table.js +++ b/src/material-table.js @@ -11,7 +11,7 @@ import DataManager from './utils/data-manager'; import { debounce } from 'debounce'; import equal from 'fast-deep-equal/react'; import * as CommonValues from './utils/common-values'; -import { withStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/styles'; /* eslint-enable no-unused-vars */ @@ -1185,7 +1185,7 @@ export default class MaterialTable extends React.Component { } } -const style = () => ({ +const useStyles = makeStyles(() => ({ horizontalScrollContainer: { '& ::-webkit-scrollbar': { '-webkit-appearance': 'none' @@ -1199,9 +1199,10 @@ const style = () => ({ backgroundColor: 'rgba(0, 0, 0, .3)' } } -}); +})); -const ScrollBar = withStyles(style)(({ double, children, classes }) => { +const ScrollBar = ({ double, children }) => { + const classes = useStyles(); if (double) { return {children}; } else { @@ -1214,4 +1215,4 @@ const ScrollBar = withStyles(style)(({ double, children, classes }) => {
); } -}); +};