Support @mui/x-date-pickers 7 (#1088)

ukrbublik · web-flow · commit cf87d446c8b4 · 2024-07-11T19:28:45.000+03:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
   - Fixed issue with rendering func select inside func (PR #1086) (issue #1085)
   - Added `DefaultUtils` typings to `index.d.ts` (PR #1078) (issue #1079)
   - Added config option `exportPreserveGroups` (PR #1077) (issue #1074)
+  - Support `@mui/x-date-pickers` v7 (PR #1088) (issue #1087)
 - 6.6.1
   - Operators reverse on "NOT" is now optional, disabled by default to preserve orignal query (PR #1068) (issue #1059).  
     Added settings `reverseOperatorsForNot` and `canShortMongoQuery`
diff --git a/packages/examples/package.json b/packages/examples/package.json
@@ -39,7 +39,7 @@
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/system": "^5.15.15",
-    "@mui/x-date-pickers": "^6.19.12",
+    "@mui/x-date-pickers": "^7.9.0",
     "@popperjs/core": "^2.11.8",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/bootstrap": "workspace:^",
diff --git a/packages/mui/modules/widgets/index.jsx b/packages/mui/modules/widgets/index.jsx
@@ -5,7 +5,7 @@ import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; // TODO: set moment to dayjs
 import xdpPackage from "@mui/x-date-pickers/package.json"; // to determine version
 
-const xdpVersion = xdpPackage?.version?.split(".")?.[0];
+const xdpVersion = parseInt(xdpPackage?.version?.split(".")?.[0] ?? "0");
 
 // value widgets
 import MuiTextWidget from "./value/MuiText";
@@ -50,7 +50,7 @@ const MuiProvider = ({config, children}) => {
     }
   });
 
-  const locProviderProps = xdpVersion === "6" ? {
+  const locProviderProps = xdpVersion >= 6 ? {
     locale: momentLocale,
   } : {
     adapterLocale: momentLocale,
diff --git a/packages/mui/modules/widgets/value/MuiDate.jsx b/packages/mui/modules/widgets/value/MuiDate.jsx
@@ -5,7 +5,7 @@ import FormControl from "@mui/material/FormControl";
 import TextField from "@mui/material/TextField";
 import { Utils } from "@react-awesome-query-builder/ui";
 const { moment } = Utils;
-const xdpVersion = xdpPackage?.version?.split(".")?.[0];
+const xdpVersion = parseInt(xdpPackage?.version?.split(".")?.[0] ?? "0");
 
 export default (props) => {
   const {value, setValue, readonly, customProps, dateFormat, valueFormat, placeholder} = props;
@@ -27,7 +27,7 @@ export default (props) => {
 
   const desktopModeMediaQuery = "@media (pointer: fine), (pointer: none)";
 
-  const pickerProps = xdpVersion === "6" ? {
+  const pickerProps = xdpVersion >= 6 ? {
     format: dateFormat,
     slotProps: {
       textField: {
@@ -44,7 +44,7 @@ export default (props) => {
     toolbarPlaceholder: !readonly ? placeholder : "",
   };
 
-  const aValue = value ? (xdpVersion === "6" ? moment(value, valueFormat) : value) : null;
+  const aValue = value ? (xdpVersion >= 6 ? moment(value, valueFormat) : value) : null;
 
   return (
     <FormControl>
diff --git a/packages/mui/modules/widgets/value/MuiDateTime.jsx b/packages/mui/modules/widgets/value/MuiDateTime.jsx
@@ -5,7 +5,7 @@ import FormControl from "@mui/material/FormControl";
 import TextField from "@mui/material/TextField";
 import { Utils } from "@react-awesome-query-builder/ui";
 const { moment } = Utils;
-const xdpVersion = xdpPackage?.version?.split(".")?.[0];
+const xdpVersion = parseInt(xdpPackage?.version?.split(".")?.[0] ?? "0");
 
 export default (props) => {
   const {value, setValue, use12Hours, readonly, placeholder, dateFormat, timeFormat, valueFormat, customProps} = props;
@@ -29,7 +29,7 @@ export default (props) => {
 
   const desktopModeMediaQuery = "@media (pointer: fine), (pointer: none)";
 
-  const pickerProps = xdpVersion === "6" ? {
+  const pickerProps = xdpVersion >= 6 ? {
     format: dateTimeFormat,
     slotProps: {
       textField: {
@@ -46,7 +46,7 @@ export default (props) => {
     toolbarPlaceholder: !readonly ? placeholder : "",
   };
 
-  const aValue = value ? (xdpVersion === "6" ? moment(value, valueFormat) : value) : null;
+  const aValue = value ? (xdpVersion >= 6 ? moment(value, valueFormat) : value) : null;
 
   return (
     <FormControl>
diff --git a/packages/mui/modules/widgets/value/MuiTime.jsx b/packages/mui/modules/widgets/value/MuiTime.jsx
@@ -5,7 +5,7 @@ import { Utils } from "@react-awesome-query-builder/ui";
 import { TimePicker } from "@mui/x-date-pickers/TimePicker";
 import xdpPackage from "@mui/x-date-pickers/package.json"; // to determine version
 const { moment } = Utils;
-const xdpVersion = xdpPackage?.version?.split(".")?.[0];
+const xdpVersion = parseInt(xdpPackage?.version?.split(".")?.[0] ?? "0");
 
 export default (props) => {
   const {value, setValue, use12Hours, readonly, placeholder, timeFormat, valueFormat, customProps} = props;
@@ -30,7 +30,7 @@ export default (props) => {
 
   const desktopModeMediaQuery = "@media (pointer: fine), (pointer: none)";
 
-  const pickerProps = xdpVersion === "6" ? {
+  const pickerProps = xdpVersion >= 6 ? {
     format: timeFormat,
     slotProps: {
       textField: {
diff --git a/packages/mui/package.json b/packages/mui/package.json
@@ -70,7 +70,7 @@
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/system": "^5.15.15",
-    "@mui/x-date-pickers": "^6.19.12",
+    "@mui/x-date-pickers": "^7.9.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
     "react": "^17.0.2",
@@ -83,7 +83,7 @@
     "@mui/base": "^5.0.0-alpha.87",
     "@mui/icons-material": "^5.2.4",
     "@mui/material": "^5.2.4",
-    "@mui/x-date-pickers": "^5.0.0-beta.2 || ^6.0.0",
+    "@mui/x-date-pickers": "^5.0.0-beta.2 || ^6.0.0 || ^7.0.0",
     "react": "^16.8.4 || ^17.0.1 || ^18.0.0",
     "react-dom": "^16.8.4 || ^17.0.1 || ^18.0.0"
   }
diff --git a/packages/sandbox/package.json b/packages/sandbox/package.json
@@ -40,7 +40,7 @@
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/system": "^5.15.15",
-    "@mui/x-date-pickers": "^6.19.12",
+    "@mui/x-date-pickers": "^7.9.0",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/mui": "workspace:^",
     "antd": "^5.18.3",
diff --git a/packages/sandbox_next/package.json b/packages/sandbox_next/package.json
@@ -39,7 +39,7 @@
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/system": "^5.15.15",
-    "@mui/x-date-pickers": "^6.19.12",
+    "@mui/x-date-pickers": "^7.9.0",
     "@react-awesome-query-builder/core": "workspace:^",
     "@react-awesome-query-builder/mui": "workspace:^",
     "@upstash/redis": "^1.31.1",
diff --git a/packages/tests/package.json b/packages/tests/package.json
@@ -39,7 +39,7 @@
     "@mui/icons-material": "^5.15.18",
     "@mui/material": "^5.15.18",
     "@mui/system": "^5.15.15",
-    "@mui/x-date-pickers": "^6.19.12",
+    "@mui/x-date-pickers": "^7.9.0",
     "@popperjs/core": "^2.11.8",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/bootstrap": "workspace:^",
diff --git a/packages/tests/specs/WidgetsMui.test.ts b/packages/tests/specs/WidgetsMui.test.ts
@@ -160,7 +160,7 @@ describe("mui widgets interactions", () => {
         }
         this.skip();
       } else if (clockBtn.length) {
-        // v6 desktop mode
+        // v6-7 desktop mode
         clockBtn.last().simulate("click");
         const dclockPicker = document.querySelector<HTMLElement>(".MuiMultiSectionDigitalClock-root");
         expect(dclockPicker, "dclockPicker").to.exist;
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
