Support MUI 6

CHANGELOG.md

@@ -4,6 +4,7 @@
     Thanks @rhallerman1 (PR #900, #896) (issues #287, #250, #344, #336)
   - Support import/export of functions for SpEL (PR #900) (issue #754)
   - Fix issue with `fieldName` (PR #900) (issues #929, #609)
+  - Support `@mui/x-date-pickers` v6 (PR #951) (issue #910)
 - 6.3.0
   - Allow saving and loading config from server (PR #866) (issue #817)
     - New utils: `compressConfig()`, `decompressConfig()`

packages/examples/package.json

@@ -35,10 +35,11 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/pickers": "^3.3.10",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@popperjs/core": "^2.11.6",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/bootstrap": "workspace:^",

packages/mui/README.md

@@ -8,7 +8,7 @@ This packages provides [MUI](https://mui.com/) widgets
 
 Peer dependencies that needs to be installed:
 ```
-npm i @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-date-pickers --save
+npm i @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/x-date-pickers @mui/base --save
 ```
 
 Install:

packages/mui/modules/widgets/index.jsx

@@ -3,7 +3,9 @@ import { ThemeProvider, createTheme } from "@mui/material/styles";
 import { ConfirmProvider, useConfirm } from "material-ui-confirm";
 import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
 import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment"; // TODO: set moment to dayjs
+import { DatePicker } from "@mui/x-date-pickers/DatePicker"; // to determine version
 
+const isV6 = !!DatePicker?.propTypes?.format;
 
 // value widgets
 import MuiTextWidget from "./value/MuiText";
@@ -35,6 +37,7 @@ import MuiConfirm from "./core/MuiConfirm";
 const MuiProvider = ({config, children}) => {
   const settingsTheme = config.settings.theme || {};
   const settingsLocale = config.settings.locale || {};
+  const momentLocale = settingsLocale.moment;
   const themeConfig = settingsTheme.mui;
   const locale = settingsLocale.mui;
   const theme = createTheme(themeConfig, locale, { 
@@ -46,9 +49,15 @@ const MuiProvider = ({config, children}) => {
     }
   });
 
+  const locProviderProps = isV6 ? {
+    locale: momentLocale,
+  } : {
+    adapterLocale: momentLocale,
+  };
+
   const base = (<div className="mui">{children}</div>);
   const withProviders = (
-    <LocalizationProvider dateAdapter={AdapterMoment} >
+    <LocalizationProvider dateAdapter={AdapterMoment} {...locProviderProps} >
       <ConfirmProvider>
         {base}
       </ConfirmProvider>

packages/mui/modules/widgets/value/MuiDate.jsx

@@ -2,10 +2,14 @@ import React from "react";
 import { DatePicker } from "@mui/x-date-pickers/DatePicker";
 import FormControl from "@mui/material/FormControl";
 import TextField from "@mui/material/TextField";
+import { Utils } from "@react-awesome-query-builder/ui";
+const { moment } = Utils;
 
 export default (props) => {
   const {value, setValue, readonly, customProps, dateFormat, valueFormat, placeholder} = props;
 
+  const isV6 = !!DatePicker?.propTypes?.format;
+
   const formatSingleValue = (value) => {
     return value && value.isValid() ? value.format(valueFormat) : undefined;
   };
@@ -23,17 +27,34 @@ export default (props) => {
 
   const desktopModeMediaQuery = "@media (pointer: fine), (pointer: none)";
 
+  const pickerProps = isV6 ? {
+    format: dateFormat,
+    slotProps: {
+      textField: {
+        size: 'small',
+        variant: 'standard'
+      },
+      toolbar: {
+        toolbarPlaceholder: !readonly ? placeholder : "",
+      },
+    },
+  } : {
+    inputFormat: dateFormat,
+    renderInput,
+    toolbarPlaceholder: !readonly ? placeholder : "",
+  };
+
+  const aValue = value ? (isV6 && typeof value === "string" ? moment(value, valueFormat) : value) : null;
+
   return (
     <FormControl>
       <DatePicker
         desktopModeMediaQuery={desktopModeMediaQuery}
         readOnly={readonly}
         disabled={readonly}
-        toolbarPlaceholder={!readonly ? placeholder : ""}
-        inputFormat={dateFormat}
-        value={value || null}
+        value={aValue}
         onChange={handleChange}
-        renderInput={renderInput}
+        {...pickerProps}
         {...customProps}
       />
     </FormControl>

packages/mui/modules/widgets/value/MuiDateTime.jsx

@@ -2,10 +2,14 @@ import React from "react";
 import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
 import FormControl from "@mui/material/FormControl";
 import TextField from "@mui/material/TextField";
+import { Utils } from "@react-awesome-query-builder/ui";
+const { moment } = Utils;
 
 export default (props) => {
   const {value, setValue, use12Hours, readonly, placeholder, dateFormat, timeFormat, valueFormat, customProps} = props;
 
+  const isV6 = !!DateTimePicker?.propTypes?.format;
+
   const formatSingleValue = (value) => {
     return value && value.isValid() ? value.format(valueFormat) : undefined;
   };
@@ -25,18 +29,35 @@ export default (props) => {
 
   const desktopModeMediaQuery = "@media (pointer: fine), (pointer: none)";
 
+  const pickerProps = isV6 ? {
+    format: dateTimeFormat,
+    slotProps: {
+      textField: {
+        size: 'small',
+        variant: 'standard'
+      },
+      toolbar: {
+        toolbarPlaceholder: !readonly ? placeholder : "",
+      },
+    },
+  } : {
+    inputFormat: dateTimeFormat,
+    renderInput,
+    toolbarPlaceholder: !readonly ? placeholder : "",
+  };
+
+  const aValue = value ? (isV6 && typeof value === "string" ? moment(value, valueFormat) : value) : null;
+
   return (
     <FormControl>
       <DateTimePicker
         desktopModeMediaQuery={desktopModeMediaQuery}
         readOnly={readonly}
         disabled={readonly}
         ampm={!!use12Hours}
-        toolbarPlaceholder={!readonly ? placeholder : ""}
-        inputFormat={dateTimeFormat}
-        value={value || null}
+        value={aValue}
         onChange={handleChange}
-        renderInput={renderInput}
+        {...pickerProps}
         {...customProps}
       />
     </FormControl>

packages/mui/modules/widgets/value/MuiTime.jsx

@@ -8,6 +8,8 @@ const { moment } = Utils;
 export default (props) => {
   const {value, setValue, use12Hours, readonly, placeholder, timeFormat, valueFormat, customProps} = props;
 
+  const isV6 = !!TimePicker?.propTypes?.format;
+
   const formatSingleValue = (value) => {
     return value && value.isValid() ? value.format(valueFormat) : undefined;
   };
@@ -28,19 +30,34 @@ export default (props) => {
 
   const desktopModeMediaQuery = "@media (pointer: fine), (pointer: none)";
 
+  const pickerProps = isV6 ? {
+    format: timeFormat,
+    slotProps: {
+      textField: {
+        size: 'small',
+        variant: 'standard'
+      },
+      toolbar: {
+        toolbarPlaceholder: !readonly ? placeholder : "",
+      },
+    },
+  } : {
+    inputFormat: timeFormat,
+    renderInput,
+    toolbarPlaceholder: !readonly ? placeholder : "",
+  };
+
   return (
     <FormControl>
       <TimePicker
         desktopModeMediaQuery={desktopModeMediaQuery}
         readOnly={readonly}
         disabled={readonly}
         ampm={!!use12Hours}
-        toolbarPlaceholder={!readonly ? placeholder : ""}
-        inputFormat={timeFormat}
-        value={timeValue || null}
+        value={timeValue}
         onChange={handleChange}
         views={hasSeconds ? ["hours", "minutes", "seconds"] : ["hours", "minutes"]}
-        renderInput={renderInput}
+        {...pickerProps}
         {...customProps}
       />
     </FormControl>

packages/mui/package.json

@@ -66,10 +66,11 @@
     "@babel/runtime": "^7.14.5",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@types/react": "^17.0.39",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
@@ -80,7 +81,8 @@
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^5.2.4",
     "@mui/material": "^5.2.4",
-    "@mui/x-date-pickers": "^5.0.0-beta.2",
+    "@mui/base": "^5.0.0-alpha.87",
+    "@mui/x-date-pickers": "^5.0.0-beta.2 || ^6.0.0",
     "react": "^16.8.4 || ^17.0.1 || ^18.0.0",
     "react-dom": "^16.8.4 || ^17.0.1 || ^18.0.0"
   }

packages/sandbox/package.json

@@ -36,10 +36,11 @@
     "@ant-design/icons": "^4.7.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/mui": "workspace:^",
     "antd": "^5.1.2",

packages/sandbox_next/package.json

@@ -35,10 +35,11 @@
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@react-awesome-query-builder/core": "workspace:^",
     "@react-awesome-query-builder/mui": "workspace:^",
     "lodash": "^4.17.21",

packages/tests/package.json

@@ -34,10 +34,11 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/pickers": "^3.3.10",
+    "@mui/base": "^5.0.0-beta.0",
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.3",
     "@mui/system": "^5.12.3",
-    "@mui/x-date-pickers": "^5.0.20",
+    "@mui/x-date-pickers": "^6.3.1",
     "@popperjs/core": "^2.11.6",
     "@react-awesome-query-builder/antd": "workspace:^",
     "@react-awesome-query-builder/bootstrap": "workspace:^",

packages/tests/specs/WidgetsMui.test.ts

@@ -41,12 +41,23 @@ describe("mui widgets interactions", () => {
       }
 
       // click on 3rd week, 2nd day of week (should be sunday, 10 day for default US locale)
-      const dayBtn = document.querySelector<HTMLElement>(
-        ".MuiCalendarPicker-root" 
-        + " .MuiDayPicker-monthContainer"
-        + " .MuiDayPicker-weekContainer:nth-child(3)" 
+      let dayBtn;
+      // v6
+      dayBtn = document.querySelector<HTMLElement>(
+        ".MuiDateCalendar-root" 
+        + " .MuiDayCalendar-monthContainer"
+        + " .MuiDayCalendar-weekContainer:nth-child(3)" 
         + " > .MuiPickersDay-root:nth-child(2)" 
       );
+      // v5
+      if (!dayBtn) {
+        dayBtn = document.querySelector<HTMLElement>(
+          ".MuiCalendarPicker-root" 
+          + " .MuiDayPicker-monthContainer"
+          + " .MuiDayPicker-weekContainer:nth-child(3)" 
+          + " > .MuiPickersDay-root:nth-child(2)" 
+        );
+      }
       expect(dayBtn, "dayBtn").to.exist;
       expect(dayBtn?.innerText, "dayBtn").to.eq("11");
       dayBtn?.click();
@@ -79,15 +90,54 @@ describe("mui widgets interactions", () => {
       expect(timeInput, "timeInput").to.have.length(1);
       timeInput.simulate("click");
       const clockPicker = document.querySelector<HTMLElement>(".MuiClockPicker-root");
+      const clockBtn = qb.find(".rule--widget--TIME .MuiInputAdornment-root .MuiButtonBase-root");
+      let changeIndex = 0;
       if (clockPicker) {
-        // mobile mode
+        // v5 mobile mode
         // should not happen, see `desktopModeMediaQuery`
         if (window?.matchMedia?.("(pointer:none)")?.matches) {
           throw new Error("Pointer media feature is neither coarse nor fine");
         }
         this.skip();
+      } else if (clockBtn.length) {
+        // v6 desktop mode
+        clockBtn.at(0).simulate("click");
+        const dclockPicker = document.querySelector<HTMLElement>(".MuiMultiSectionDigitalClock-root");
+        expect(dclockPicker, "dclockPicker").to.exist;
+
+        const hourBtn = document.querySelector<HTMLElement>(
+          ".MuiMultiSectionDigitalClock-root" 
+          + " > .MuiMultiSectionDigitalClock-root:nth-child(1)" 
+          + " > .MuiMenuItem-root:nth-child(11)" 
+        );
+        expect(hourBtn, "hourBtn").to.exist;
+        expect(hourBtn?.innerText, "hourBtn").to.eq("10");
+        hourBtn?.click();
+
+        const minBtn = document.querySelector<HTMLElement>(
+          ".MuiMultiSectionDigitalClock-root" 
+          + " > .MuiMultiSectionDigitalClock-root:nth-child(2)" 
+          + " > .MuiMenuItem-root:nth-child(7)" 
+        );
+        expect(minBtn, "minBtn").to.exist;
+        expect(minBtn?.innerText, "minBtn").to.eq("30");
+        minBtn?.click();
+
+        const okBtn = document.querySelector<HTMLElement>(
+          ".MuiPickersLayout-root"
+          + " .MuiDialogActions-root" 
+          + " .MuiButton-root" 
+        );
+        expect(okBtn, "okBtn").to.exist;
+        okBtn?.click();
+
+        const timeInputValue = timeInput.getDOMNode().getAttribute("value");
+        expect(timeInputValue, "timeInputValue").to.eq("10:30");
+
+        // for v6 onChange is fired 2 times: on hour change and on time change
+        changeIndex = 1;
       } else {
-        // desktop mode
+        // v5 desktop mode
         qb
           .find(".rule--widget--TIME .MuiInput-input")
           .at(1)
@@ -96,7 +146,7 @@ describe("mui widgets interactions", () => {
 
       expect_jlogic([null,
         { "and": [{ "==": [ { "var": "time" }, 60*60*10+60*30 ] }] }
-      ]);
+      ], changeIndex);
     }, {
       ignoreLog: ignoreLogDatePicker,
     });