diff --git a/.babelrc b/.babelrc index 74afb90..66f713e 100644 --- a/.babelrc +++ b/.babelrc @@ -39,6 +39,12 @@ [ "@babel/plugin-proposal-object-rest-spread" ], + [ + "@babel/plugin-proposal-nullish-coalescing-operator" + ], + [ + "@babel/plugin-proposal-optional-chaining" + ], [ "@babel/plugin-transform-async-to-generator" ], diff --git a/README.md b/README.md index 059a465..d9e6b63 100644 --- a/README.md +++ b/README.md @@ -33,6 +33,8 @@ MUI-Datatables is a responsive datatables component built on [Material-UI](https `npm install mui-datatables --save` +React 18+ is required (both `react` and `react-dom`). This is a breaking change for projects still on React 16 or 17. + If your project doesn't already use them, you need to install MUI v7 and its icon pack: `npm --save install @mui/material @emotion/react @emotion/styled @mui/icons-material` @@ -425,7 +427,6 @@ class CustomDataTable extends React.Component { Supported customizable components: * `Checkbox` - A special 'data-description' prop lets you differentiate checkboxes [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/custom-components/index.js). Valid values: ['row-select', 'row-select-header', 'table-filter', 'table-view-col'].The dataIndex is also passed via the "data-index" prop. * `ExpandButton` [Example](https://github.com/leecalcote/mui-datatables/blob/master/examples/expandable-rows/index.js) - * `DragDropBackend` * `TableBody` * `TableViewCol` - The component that displays the view/hide list of columns on the toolbar. * `TableFilterList` - You can pass `ItemComponent` prop to render custom filter list item. diff --git a/examples/draggable-columns/index.js b/examples/draggable-columns/index.js index aecc251..fe2f53a 100644 --- a/examples/draggable-columns/index.js +++ b/examples/draggable-columns/index.js @@ -8,9 +8,6 @@ import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; import TextField from '@mui/material/TextField'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; - function Example() { const [responsive, setResponsive] = useState("vertical"); @@ -137,4 +134,4 @@ function Example() { ); } -export default Example; \ No newline at end of file +export default Example; diff --git a/package-lock.json b/package-lock.json index c0a3382..2dd022b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "license": "MIT", "dependencies": { "@babel/runtime-corejs3": "^7.12.1", + "@dnd-kit/core": "^6.3.1", "@emotion/cache": "^11.7.1", "clsx": "^1.1.1", "lodash.assignwith": "^4.2.0", @@ -22,9 +23,6 @@ "lodash.memoize": "^4.1.2", "lodash.merge": "^4.6.2", "prop-types": "^15.7.2", - "react-dnd": "^11.1.3", - "react-dnd-html5-backend": "^11.1.3", - "react-sortable-tree-patch-react-17": "^2.9.0", "react-to-print": "^2.8.0", "tss-react": "^4.9.20" }, @@ -32,7 +30,9 @@ "@babel/core": "^7.10.2", "@babel/plugin-external-helpers": "^7.10.1", "@babel/plugin-proposal-class-properties": "^7.10.1", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.10.1", + "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/plugin-transform-async-to-generator": "^7.12.1", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.1", @@ -75,11 +75,10 @@ "prismjs": "^1.20.0", "raw-loader": "^4.0.1", "react": "^18.2.0", - "react-dnd-test-backend": "^11.1.3", - "react-dnd-test-utils": "^11.1.3", "react-dom": "^18.2.0", "react-router-dom": "^5.0.1", "react-waypoint": "^10.1.0", + "regenerator-runtime": "^0.14.1", "rollup": "^2.3.4", "rollup-pluginutils": "^2.8.2", "simulant": "^0.2.2", @@ -93,8 +92,8 @@ "@emotion/react": "^11.14.0", "@mui/icons-material": "^7.3.7", "@mui/material": "^7.3.7", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" } }, "node_modules/@babel/code-frame": { @@ -666,6 +665,24 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-nullish-coalescing-operator": { + "version": "7.18.6", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.18.6.tgz", + "integrity": "sha512-wQxQzxYeJqHcfppzBDnm1yAY0jSRkUXR2z8RePZYrKwMKgMlE8+Z6LUno+bd6LvbGh8Gltvy74+9pIYkr+XkKA==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.18.6", + "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-object-rest-spread": { "version": "7.20.7", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz", @@ -687,6 +704,25 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-optional-chaining": { + "version": "7.21.0", + "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz", + "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==", + "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0", + "@babel/plugin-syntax-optional-chaining": "^7.8.3" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-private-property-in-object": { "version": "7.21.0-placeholder-for-preset-env.2", "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz", @@ -748,6 +784,19 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz", + "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-syntax-object-rest-spread": { "version": "7.8.3", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz", @@ -761,6 +810,19 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-syntax-optional-chaining": { + "version": "7.8.3", + "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz", + "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@babel/helper-plugin-utils": "^7.8.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-syntax-unicode-sets-regex": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz", @@ -1950,6 +2012,45 @@ "react-dom": ">=18" } }, + "node_modules/@dnd-kit/accessibility": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz", + "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, + "node_modules/@dnd-kit/core": { + "version": "6.3.1", + "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz", + "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==", + "license": "MIT", + "dependencies": { + "@dnd-kit/accessibility": "^3.1.1", + "@dnd-kit/utilities": "^3.2.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@dnd-kit/utilities": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz", + "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/@emnapi/runtime": { "version": "1.8.1", "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz", @@ -3190,24 +3291,6 @@ "url": "https://opencollective.com/popperjs" } }, - "node_modules/@react-dnd/asap": { - "version": "4.0.1", - "resolved": "https://registry.npmjs.org/@react-dnd/asap/-/asap-4.0.1.tgz", - "integrity": "sha512-kLy0PJDDwvwwTXxqTFNAAllPHD73AycE9ypWeln/IguoGBEbvFcPDbCV03G52bEcC5E+YgupBE0VzHGdC8SIXg==", - "license": "MIT" - }, - "node_modules/@react-dnd/invariant": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@react-dnd/invariant/-/invariant-2.0.0.tgz", - "integrity": "sha512-xL4RCQBCBDJ+GRwKTFhGUW8GXa4yoDfJrPbLblc3U09ciS+9ZJXJ3Qrcs/x2IODOdIE5kQxvMmE2UKyqUictUw==", - "license": "MIT" - }, - "node_modules/@react-dnd/shallowequal": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/@react-dnd/shallowequal/-/shallowequal-2.0.0.tgz", - "integrity": "sha512-Pc/AFTdwZwEKJxFJvlxrSmGe/di+aAOBn60sremrpLo6VI/6cmiUYNNwlI5KNYttg7uypzA3ILPMPgxB2GYZEg==", - "license": "MIT" - }, "node_modules/@rollup/plugin-babel": { "version": "5.0.2", "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.0.2.tgz", @@ -3500,18 +3583,6 @@ "@types/node": "*" } }, - "node_modules/@types/hoist-non-react-statics": { - "version": "3.3.7", - "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.7.tgz", - "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==", - "license": "MIT", - "dependencies": { - "hoist-non-react-statics": "^3.3.0" - }, - "peerDependencies": { - "@types/react": "*" - } - }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -6649,17 +6720,6 @@ "dev": true, "license": "MIT" }, - "node_modules/dnd-core": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/dnd-core/-/dnd-core-11.1.3.tgz", - "integrity": "sha512-QugF55dNW+h+vzxVJ/LSJeTeUw9MCJ2cllhmVThVPEtF16ooBkxj0WBE5RB+AceFxMFo1rO6bJKXtqKl+JNnyA==", - "license": "MIT", - "dependencies": { - "@react-dnd/asap": "^4.0.0", - "@react-dnd/invariant": "^2.0.0", - "redux": "^4.0.4" - } - }, "node_modules/dns-equal": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz", @@ -6705,6 +6765,7 @@ "version": "5.2.1", "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz", "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==", + "devOptional": true, "license": "MIT", "dependencies": { "@babel/runtime": "^7.8.7", @@ -11123,12 +11184,6 @@ "dev": true, "license": "MIT" }, - "node_modules/lodash.throttle": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz", - "integrity": "sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==", - "license": "MIT" - }, "node_modules/lodash.truncate": { "version": "4.4.2", "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz", @@ -13239,6 +13294,7 @@ "version": "2.1.0", "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz", "integrity": "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow==", + "dev": true, "license": "MIT" }, "node_modules/picocolors": { @@ -13737,6 +13793,7 @@ "version": "3.4.1", "resolved": "https://registry.npmjs.org/raf/-/raf-3.4.1.tgz", "integrity": "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==", + "dev": true, "license": "MIT", "dependencies": { "performance-now": "^2.1.0" @@ -13875,60 +13932,6 @@ "node": ">=0.10.0" } }, - "node_modules/react-display-name": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/react-display-name/-/react-display-name-0.2.5.tgz", - "integrity": "sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg==", - "license": "MIT" - }, - "node_modules/react-dnd": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-11.1.3.tgz", - "integrity": "sha512-8rtzzT8iwHgdSC89VktwhqdKKtfXaAyC4wiqp0SywpHG12TTLvfOoL6xNEIUWXwIEWu+CFfDn4GZJyynCEuHIQ==", - "license": "MIT", - "dependencies": { - "@react-dnd/shallowequal": "^2.0.0", - "@types/hoist-non-react-statics": "^3.3.1", - "dnd-core": "^11.1.3", - "hoist-non-react-statics": "^3.3.0" - }, - "peerDependencies": { - "react": ">= 16.9.0", - "react-dom": ">= 16.9.0" - } - }, - "node_modules/react-dnd-html5-backend": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-11.1.3.tgz", - "integrity": "sha512-/1FjNlJbW/ivkUxlxQd7o3trA5DE33QiRZgxent3zKme8DwF4Nbw3OFVhTRFGaYhHFNL1rZt6Rdj1D78BjnNLw==", - "license": "MIT", - "dependencies": { - "dnd-core": "^11.1.3" - } - }, - "node_modules/react-dnd-test-backend": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/react-dnd-test-backend/-/react-dnd-test-backend-11.1.3.tgz", - "integrity": "sha512-5qFm+NI2GdWIUfiYun0A8Gv0xjbq0NGOPS+f6z3x/3nTuliApjmqcM1lfTgePoz1FDG47ZofF58N8y96If62+Q==", - "dev": true, - "license": "MIT", - "dependencies": { - "dnd-core": "^11.1.3" - } - }, - "node_modules/react-dnd-test-utils": { - "version": "11.1.3", - "resolved": "https://registry.npmjs.org/react-dnd-test-utils/-/react-dnd-test-utils-11.1.3.tgz", - "integrity": "sha512-Yg+oTpXaCJ+NxEFt+qXJZX96dbar47EK410eXj7bDsIdYYTZzYO51BtEGlEvR/a9Kb4vEkhPZkJLxyCfqNrpjw==", - "dev": true, - "license": "MIT", - "peerDependencies": { - "react": ">= 16.9.0", - "react-dnd": ">= 10.0.0", - "react-dnd-test-backend": ">= 10.0.0", - "react-dom": ">= 16.9.0" - } - }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -13949,12 +13952,6 @@ "dev": true, "license": "MIT" }, - "node_modules/react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==", - "license": "MIT" - }, "node_modules/react-router": { "version": "5.3.4", "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz", @@ -14016,85 +14013,6 @@ "react": "^16.0.0 || ^17.0.0 || ^18.0.0" } }, - "node_modules/react-sortable-tree-patch-react-17": { - "version": "2.9.0", - "resolved": "https://registry.npmjs.org/react-sortable-tree-patch-react-17/-/react-sortable-tree-patch-react-17-2.9.0.tgz", - "integrity": "sha512-Ngtdbf78OfjqCxLj7+N+K4zM9d1mQ/tfnUsOfICFDzNa5JHg6AjixAj69ijvz0ykEiA9lYop+0Fm4KCOqCdlKA==", - "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", - "license": "MIT", - "dependencies": { - "lodash.isequal": "^4.5.0", - "prop-types": "^15.6.1", - "react": "^17.0.0", - "react-dnd": "^11.1.3", - "react-dnd-html5-backend": "^11.1.3", - "react-dnd-scrollzone-patch-react-17": "^1.0.2", - "react-dom": "^17.0.0", - "react-lifecycles-compat": "^3.0.4", - "react-virtualized": "^9.21.2" - }, - "peerDependencies": { - "react": "^17.0.0", - "react-dnd": "^11.1.3", - "react-dom": "^17.0.0" - } - }, - "node_modules/react-sortable-tree-patch-react-17/node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - }, - "engines": { - "node": ">=0.10.0" - } - }, - "node_modules/react-sortable-tree-patch-react-17/node_modules/react-dnd-scrollzone-patch-react-17": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/react-dnd-scrollzone-patch-react-17/-/react-dnd-scrollzone-patch-react-17-1.0.2.tgz", - "integrity": "sha512-Wfhyc/Y/Veim29REBYm8nMmtDB5IwSmPPhXIuabBgsEa1MrVsuOwK9+7LmuP+mGbDOEP/S6G8+5XvDqPlRFK2g==", - "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", - "license": "MIT", - "dependencies": { - "hoist-non-react-statics": "^3.1.0", - "lodash.throttle": "^4.0.1", - "prop-types": "^15.5.9", - "raf": "^3.2.0", - "react-display-name": "^0.2.0" - }, - "peerDependencies": { - "react": "^17.0.1", - "react-dnd": "^11.1.3", - "react-dom": "^17.0.1" - } - }, - "node_modules/react-sortable-tree-patch-react-17/node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" - }, - "peerDependencies": { - "react": "17.0.2" - } - }, - "node_modules/react-sortable-tree-patch-react-17/node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", - "license": "MIT", - "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" - } - }, "node_modules/react-to-print": { "version": "2.15.1", "resolved": "https://registry.npmjs.org/react-to-print/-/react-to-print-2.15.1.tgz", @@ -14122,24 +14040,6 @@ "react-dom": ">=16.6.0" } }, - "node_modules/react-virtualized": { - "version": "9.22.6", - "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz", - "integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.7.2", - "clsx": "^1.0.4", - "dom-helpers": "^5.1.3", - "loose-envify": "^1.4.0", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.4" - }, - "peerDependencies": { - "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" - } - }, "node_modules/react-waypoint": { "version": "10.3.0", "resolved": "https://registry.npmjs.org/react-waypoint/-/react-waypoint-10.3.0.tgz", @@ -14209,15 +14109,6 @@ "node": ">= 8" } }, - "node_modules/redux": { - "version": "4.2.1", - "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz", - "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.9.2" - } - }, "node_modules/reflect.getprototypeof": { "version": "1.0.10", "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz", @@ -14261,6 +14152,13 @@ "node": ">=4" } }, + "node_modules/regenerator-runtime": { + "version": "0.14.1", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", + "dev": true, + "license": "MIT" + }, "node_modules/regex-not": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz", @@ -16646,7 +16544,6 @@ "version": "2.8.1", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", - "dev": true, "license": "0BSD" }, "node_modules/tss-react": { diff --git a/package.json b/package.json index c59b4f6..cfc6090 100644 --- a/package.json +++ b/package.json @@ -40,12 +40,15 @@ "@babel/core": "^7.10.2", "@babel/plugin-external-helpers": "^7.10.1", "@babel/plugin-proposal-class-properties": "^7.10.1", + "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6", "@babel/plugin-proposal-object-rest-spread": "^7.10.1", + "@babel/plugin-proposal-optional-chaining": "^7.21.0", "@babel/plugin-transform-async-to-generator": "^7.12.1", "@babel/plugin-transform-runtime": "^7.12.1", "@babel/preset-env": "^7.12.1", "@babel/preset-react": "^7.12.1", "@babel/register": "^7.10.1", + "@cfaester/enzyme-adapter-react-18": "^0.8.0", "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.1", "@lopatnov/rollup-plugin-uglify": "^2.1.1", @@ -55,7 +58,6 @@ "@rollup/plugin-commonjs": "^12.0.0", "@rollup/plugin-node-resolve": "^8.0.0", "@rollup/plugin-replace": "^2.3.2", - "@cfaester/enzyme-adapter-react-18": "^0.8.0", "babel-eslint": "^10.1.0", "babel-loader": "^8.1.0", "babel-plugin-istanbul": "^6.0.0", @@ -83,11 +85,10 @@ "prismjs": "^1.20.0", "raw-loader": "^4.0.1", "react": "^18.2.0", - "react-dnd-test-backend": "^11.1.3", - "react-dnd-test-utils": "^11.1.3", "react-dom": "^18.2.0", "react-router-dom": "^5.0.1", "react-waypoint": "^10.1.0", + "regenerator-runtime": "^0.14.1", "rollup": "^2.3.4", "rollup-pluginutils": "^2.8.2", "simulant": "^0.2.2", @@ -101,13 +102,13 @@ "@emotion/react": "^11.14.0", "@mui/icons-material": "^7.3.7", "@mui/material": "^7.3.7", - "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" }, "dependencies": { "@babel/runtime-corejs3": "^7.12.1", + "@dnd-kit/core": "^6.3.1", "@emotion/cache": "^11.7.1", - "tss-react": "^4.9.20", "clsx": "^1.1.1", "lodash.assignwith": "^4.2.0", "lodash.clonedeep": "^4.5.0", @@ -119,10 +120,8 @@ "lodash.memoize": "^4.1.2", "lodash.merge": "^4.6.2", "prop-types": "^15.7.2", - "react-dnd": "^11.1.3", - "react-dnd-html5-backend": "^11.1.3", - "react-sortable-tree-patch-react-17": "^2.9.0", - "react-to-print": "^2.8.0" + "react-to-print": "^2.8.0", + "tss-react": "^4.9.20" }, "overrides": { "cheerio": "1.0.0-rc.12" diff --git a/src/MUIDataTable.js b/src/MUIDataTable.js index 9d0e5ca..0795813 100644 --- a/src/MUIDataTable.js +++ b/src/MUIDataTable.js @@ -22,8 +22,6 @@ import DefaultTableToolbar from './components/TableToolbar'; import DefaultTableToolbarSelect from './components/TableToolbarSelect'; import getTextLabels from './textLabels'; import { buildMap, getCollatorComparator, getPageValue, sortCompare, warnDeprecated, warnInfo } from './utils'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; import { load, save } from './localStorage'; const defaultTableStyles = theme => ({ @@ -280,7 +278,6 @@ class MUIDataTable extends React.Component { super(props); this.tableRef = React.createRef(); this.tableContent = React.createRef(); - this.draggableHeadCellRefs = {}; this.resizeHeadCellRefs = {}; this.timers = {}; this.setHeadResizeable = () => {}; @@ -578,7 +575,6 @@ class MUIDataTable extends React.Component { } setHeadCellRef = (index, pos, el) => { - this.draggableHeadCellRefs[index] = el; this.resizeHeadCellRefs[pos] = el; }; @@ -1834,16 +1830,7 @@ class MUIDataTable extends React.Component { classes, className, title, - components: { - TableBody, - TableFilterList, - TableFooter, - TableHead, - TableResize, - TableToolbar, - TableToolbarSelect, - DragDropBackend = HTML5Backend, - }, + components: { TableBody, TableFilterList, TableFooter, TableHead, TableResize, TableToolbar, TableToolbarSelect }, } = this.props; const { announceText, @@ -1933,11 +1920,6 @@ class MUIDataTable extends React.Component { const tableClassNames = clsx(classes.tableRoot, tableProps.className); delete tableProps.className; // remove className from props to avoid the className being applied twice - const dndProps = {}; - if (typeof window !== 'undefined') { - dndProps.context = window; - } - return ( {(this.options.selectToolbarPlacement === STP.ALWAYS || @@ -2034,10 +2016,7 @@ class MUIDataTable extends React.Component { sortOrder={sortOrder} columnOrder={columnOrder} updateColumnOrder={this.updateColumnOrder} - draggableHeadCellRefs={this.draggableHeadCellRefs} - tableRef={this.getTableContentRef} tableId={this.options.tableId} - timers={this.timers} components={this.props.components} /> ); - if (DragDropBackend) { - return ( - - {components} - - ); - } - return components; })()} diff --git a/src/components/TableHead.js b/src/components/TableHead.js index eeb58e0..02bf07a 100644 --- a/src/components/TableHead.js +++ b/src/components/TableHead.js @@ -2,9 +2,11 @@ import { makeStyles } from 'tss-react/mui'; import clsx from 'clsx'; import MuiTableHead from '@mui/material/TableHead'; import React, { useState } from 'react'; +import { DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'; import TableHeadCell from './TableHeadCell'; import TableHeadRow from './TableHeadRow'; import TableSelectCell from './TableSelectCell'; +import { reorderColumns } from '../hooks/useColumnDrop'; const useStyles = makeStyles({ name: 'MUIDataTableHead' })(theme => ({ main: {}, @@ -29,16 +31,13 @@ const TableHead = ({ components = {}, count, data, - draggableHeadCellRefs, expandedRows, options, selectedRows, selectRowUpdate, setCellRef, sortOrder = {}, - tableRef, tableId, - timers, toggleAllExpandableRows, toggleSort, updateColumnOrder, @@ -50,6 +49,34 @@ const TableHead = ({ } const [dragging, setDragging] = useState(false); + const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 5 } })); + + const handleDragStart = () => { + if (options.draggableColumns && options.draggableColumns.enabled) { + setDragging(true); + } + }; + + const handleDragCancel = () => { + setDragging(false); + }; + + const handleDragEnd = event => { + setDragging(false); + if (!options.draggableColumns || !options.draggableColumns.enabled) { + return; + } + + const { active, over } = event; + const activeIndex = active?.data?.current?.index; + const overIndex = over?.data?.current?.index; + if (activeIndex === undefined || overIndex === undefined || activeIndex === overIndex) { + return; + } + + const newOrder = reorderColumns(columnOrder, activeIndex, overIndex); + updateColumnOrder(newOrder, activeIndex, overIndex); + }; const handleToggleColumn = index => { toggleSort(index); @@ -95,74 +122,76 @@ const TableHead = ({ }); return ( - - - - {orderedColumns.map( - ({ column, index, colPos }) => - column.display === 'true' && - (column.customHeadRender ? ( - column.customHeadRender({ index, ...column }, handleToggleColumn, sortOrder) - ) : ( - - {column.customHeadLabelRender - ? column.customHeadLabelRender({ index, colPos, ...column }) - : column.label} - - )), - )} - - + + + + + {orderedColumns.map( + ({ column, index, colPos }) => + column.display === 'true' && + (column.customHeadRender ? ( + column.customHeadRender({ index, ...column }, handleToggleColumn, sortOrder) + ) : ( + + {column.customHeadLabelRender + ? column.customHeadLabelRender({ index, colPos, ...column }) + : column.label} + + )), + )} + + + ); }; diff --git a/src/components/TableHeadCell.js b/src/components/TableHeadCell.js index 8293dec..c033cb5 100644 --- a/src/components/TableHeadCell.js +++ b/src/components/TableHeadCell.js @@ -6,9 +6,8 @@ import PropTypes from 'prop-types'; import React, { useState } from 'react'; import TableCell from '@mui/material/TableCell'; import TableSortLabel from '@mui/material/TableSortLabel'; -import useColumnDrop from '../hooks/useColumnDrop.js'; import { makeStyles } from 'tss-react/mui'; -import { useDrag } from 'react-dnd'; +import { useDraggable, useDroppable } from '@dnd-kit/core'; const useStyles = makeStyles({ name: 'MUIDataTableHeadCell' })(theme => ({ root: {}, @@ -68,10 +67,7 @@ const TableHeadCell = ({ children, colPosition, column, - columns, - columnOrder = [], components = {}, - draggableHeadCellRefs, draggingHook, hint, index, @@ -80,11 +76,8 @@ const TableHeadCell = ({ setCellRef, sort, sortDirection, - tableRef, tableId, - timers, toggleSort, - updateColumnOrder, }) => { const [sortTooltipOpen, setSortTooltipOpen] = useState(false); const [hintTooltipOpen, setHintTooltipOpen] = useState(false); @@ -103,9 +96,9 @@ const TableHeadCell = ({ toggleSort(index); }; - const [dragging, setDragging] = draggingHook ? draggingHook : []; + const [dragging] = draggingHook ? draggingHook : []; - const { className, ...otherProps } = cellHeaderProps; + const { className, style: cellHeaderStyle, ...otherProps } = cellHeaderProps; const Tooltip = components.Tooltip || MuiTooltip; const sortActive = sortDirection !== 'none' && sortDirection !== undefined; const ariaSortDirection = sortDirection === 'none' ? false : sortDirection; @@ -123,46 +116,22 @@ const TableHeadCell = ({ ...(ariaSortDirection ? { direction: sortDirection } : {}), }; - const [{ opacity }, dragRef, preview] = useDrag({ - item: { - type: 'HEADER', - colIndex: index, - headCellRefs: draggableHeadCellRefs, - }, - begin: monitor => { - setTimeout(() => { - setHintTooltipOpen(false); - setSortTooltipOpen(false); - setDragging(true); - }, 0); - return null; - }, - end: (item, monitor) => { - setDragging(false); - }, - collect: monitor => { - return { - opacity: monitor.isDragging() ? 1 : 0, - }; - }, + const { attributes, listeners, setActivatorNodeRef, setNodeRef, transform, isDragging } = useDraggable({ + id: `column-${index}`, + data: { index }, + disabled: !isDraggingEnabled(), }); - - const [drop] = useColumnDrop({ - drop: (item, mon) => { - setSortTooltipOpen(false); - setHintTooltipOpen(false); - setDragging(false); - }, - index, - headCellRefs: draggableHeadCellRefs, - updateColumnOrder, - columnOrder, - columns, - transitionTime: options.draggableColumns ? options.draggableColumns.transitionTime : 300, - tableRef: tableRef ? tableRef() : null, - tableId: tableId || 'none', - timers, + const { setNodeRef: setDroppableNodeRef } = useDroppable({ + id: `column-${index}`, + data: { index }, + disabled: !isDraggingEnabled(), }); + const dragStyle = transform ? { transform: `translate3d(${transform.x}px, ${transform.y}px, 0)` } : {}; + const cellStyle = { + ...(cellHeaderStyle || {}), + ...dragStyle, + ...(isDragging ? { opacity: 0.4 } : {}), + }; const cellClass = clsx({ [classes.root]: true, @@ -191,7 +160,8 @@ const TableHeadCell = ({ return ( { - drop && drop(ref); + setNodeRef(ref); + setDroppableNodeRef(ref); setCellRef && setCellRef(index + 1, colPosition + 1, ref); }} className={cellClass} @@ -200,6 +170,7 @@ const TableHeadCell = ({ data-colindex={index} data-tableid={tableId} onMouseDown={closeTooltip} + style={cellStyle} {...otherProps}> {options.sort && sort ? ( @@ -219,7 +190,9 @@ const TableHeadCell = ({ onClick={handleSortClick} className={classes.toolButton} data-testid={`headcol-${index}`} - ref={isDraggingEnabled() ? dragRef : null}> + ref={isDraggingEnabled() ? setActivatorNodeRef : null} + {...(isDraggingEnabled() ? listeners : {})} + {...(isDraggingEnabled() ? attributes : {})}>
) : ( -
+
{children} {hint && ( { let colModel = []; let leftMostCell = headCellRefs[0] ? headCellRefs[0] : null; // left most cell is the select cell, if it exists @@ -166,18 +164,8 @@ const handleHover = opts => { } }; -const useColumnDrop = opts => { - const [{ isOver, canDrop }, drop] = useDrop({ - accept: 'HEADER', - drop: opts.drop, - hover: (item, mon) => handleHover(Object.assign({}, opts, { item, mon })), - collect: mon => ({ - isOver: !!mon.isOver(), - canDrop: !!mon.canDrop(), - }), - }); - - return [drop]; +const useColumnDrop = () => { + return [null]; }; export { getColModel, reorderColumns, handleHover }; diff --git a/test/MUIDataTableHead.test.js b/test/MUIDataTableHead.test.js index 5be5d4b..7c3c667 100644 --- a/test/MUIDataTableHead.test.js +++ b/test/MUIDataTableHead.test.js @@ -6,8 +6,6 @@ import TableHead from '../src/components/TableHead'; import TableHeadCell from '../src/components/TableHeadCell'; import Checkbox from '@mui/material/Checkbox'; import Tooltip from '@mui/material/Tooltip'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; describe('', function() { let columns; @@ -35,15 +33,13 @@ describe('', function() { const options = {}; const toggleSort = () => {}; const mountWrapper = mount( - - {}} - handleHeadUpdateRef={handleHeadUpdateRef} - toggleSort={toggleSort} - /> - , + {}} + handleHeadUpdateRef={handleHeadUpdateRef} + toggleSort={toggleSort} + />, ); const actualResult = mountWrapper.find(TableHeadCell); assert.strictEqual(actualResult.length, 4); @@ -54,15 +50,13 @@ describe('', function() { const toggleSort = () => {}; const mountWrapper = mount( - - {}} - handleHeadUpdateRef={handleHeadUpdateRef} - toggleSort={toggleSort} - /> - , + {}} + handleHeadUpdateRef={handleHeadUpdateRef} + toggleSort={toggleSort} + />, ); const labels = mountWrapper.find(TableHeadCell).map(n => n.text()); assert.deepEqual(labels, ['First Name', 'Company', 'City Label', 'States']); @@ -74,15 +68,13 @@ describe('', function() { const newColumns = columns.map(column => ({ ...column, display: false })); const mountWrapper = mount( - - {}} - handleHeadUpdateRef={handleHeadUpdateRef} - toggleSort={toggleSort} - /> - , + {}} + handleHeadUpdateRef={handleHeadUpdateRef} + toggleSort={toggleSort} + />, ); const actualResult = mountWrapper.find(TableHeadCell); assert.strictEqual(actualResult.length, 0); @@ -93,15 +85,13 @@ describe('', function() { const toggleSort = spy(); const wrapper = mount( - - {}} - handleHeadUpdateRef={handleHeadUpdateRef} - toggleSort={toggleSort} - /> - , + {}} + handleHeadUpdateRef={handleHeadUpdateRef} + toggleSort={toggleSort} + />, ); const instance = wrapper.find('th span').at(0); @@ -121,15 +111,13 @@ describe('', function() { const rowSelectUpdate = spy(); const wrapper = mount( - - {}} - handleHeadUpdateRef={handleHeadUpdateRef} - selectRowUpdate={rowSelectUpdate} - /> - , + {}} + handleHeadUpdateRef={handleHeadUpdateRef} + selectRowUpdate={rowSelectUpdate} + />, ); const instance = wrapper.find('input[type="checkbox"]'); @@ -142,14 +130,7 @@ describe('', function() { const options = { selectableRows: 'multiple' }; const mountWrapper = mount( - - {}} - handleHeadUpdateRef={handleHeadUpdateRef} - /> - , + {}} handleHeadUpdateRef={handleHeadUpdateRef} />, ); const actualResult = mountWrapper.find(Checkbox); @@ -160,14 +141,7 @@ describe('', function() { const options = { selectableRows: 'single' }; const mountWrapper = mount( - - {}} - handleHeadUpdateRef={handleHeadUpdateRef} - /> - , + {}} handleHeadUpdateRef={handleHeadUpdateRef} />, ); const actualResult = mountWrapper.find(Checkbox); @@ -178,14 +152,7 @@ describe('', function() { const options = { selectableRows: 'none' }; const mountWrapper = mount( - - {}} - handleHeadUpdateRef={handleHeadUpdateRef} - /> - , + {}} handleHeadUpdateRef={handleHeadUpdateRef} />, ); const actualResult = mountWrapper.find(Checkbox); diff --git a/test/MUIDataTableHeadCell.test.js b/test/MUIDataTableHeadCell.test.js index 2204afd..8940211 100644 --- a/test/MUIDataTableHeadCell.test.js +++ b/test/MUIDataTableHeadCell.test.js @@ -7,8 +7,7 @@ import TableHeadCell from '../src/components/TableHeadCell'; import TableCell from '@mui/material/TableCell'; import TableSortLabel from '@mui/material/TableSortLabel'; import HelpIcon from '@mui/icons-material/Help'; -import { DndProvider } from 'react-dnd'; -import { HTML5Backend } from 'react-dnd-html5-backend'; +import { DndContext } from '@dnd-kit/core'; describe('', function() { let classes; @@ -27,7 +26,7 @@ describe('', function() { const toggleExpandRow = () => {}; const mountWrapper = mount( - + ', function() { classes={classes}> some content - , + , ); const props = mountWrapper.find(TableCell).props(); @@ -53,11 +52,11 @@ describe('', function() { const toggleSort = () => {}; const wrapper = mount( - + some content - , + , ); const actualResult = wrapper.find(TableSortLabel); @@ -69,11 +68,11 @@ describe('', function() { const toggleSort = () => {}; const shallowWrapper = shallow( - + some content - , + , ); const actualResult = shallowWrapper.find(TableSortLabel); @@ -84,11 +83,11 @@ describe('', function() { const options = { sort: true, textLabels: getTextLabels() }; const wrapper = mount( - + some content - , + , ); const actualResult = wrapper.find(HelpIcon); @@ -99,11 +98,11 @@ describe('', function() { const options = { sort: true, textLabels: getTextLabels() }; const shallowWrapper = shallow( - + some content - , + , ).dive(); const actualResult = shallowWrapper.find(HelpIcon); @@ -115,7 +114,7 @@ describe('', function() { const toggleSort = spy(); const wrapper = mount( - + ', function() { classes={classes}> some content - , + , ); // Find the button with data-testid diff --git a/webpack.config.js b/webpack.config.js index 51f1fff..572b451 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -25,6 +25,25 @@ module.exports = { exclude: /(node_modules)/, use: ['babel-loader', 'eslint-loader'], }, + { + test: /\.(js|jsx)$/, + include: /node_modules\/(@mui|@emotion)/, + use: [ + { + loader: 'babel-loader', + options: { + babelrc: false, + configFile: false, + plugins: [ + '@babel/plugin-proposal-class-properties', + '@babel/plugin-proposal-nullish-coalescing-operator', + '@babel/plugin-proposal-optional-chaining', + ], + sourceType: 'unambiguous', + }, + }, + ], + }, { test: /\.css$/i, use: ['style-loader', 'css-loader'],