Update dependency @mui/x-date-pickers to v6

.yarn/patches/@mui-x-date-pickers-npm-6.18.1-79bdefe4ec.patch

@@ -0,0 +1,31 @@
+diff --git a/internals/hooks/useField/useField.js b/internals/hooks/useField/useField.js
+index 10a6c2874e2acdf072cd05de26711d704332ada1..30499fd39c69812775a48d8aa3d4ba6812eeb9c3 100644
+--- a/internals/hooks/useField/useField.js
++++ b/internals/hooks/useField/useField.js
+@@ -333,7 +333,7 @@ export const useField = params => {
+       // On multi input range pickers we want to update selection range only for the active input
+       // This helps to avoid the focus jumping on Safari https://github.com/mui/mui-x/issues/9003
+       // because WebKit implements the `setSelectionRange` based on the spec: https://bugs.webkit.org/show_bug.cgi?id=224425
+-      if (inputRef.current === getActiveElement(document)) {
++      if (inputRef.current === getActiveElement(inputRef.current.ownerDocument)) {
+         inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+       }
+       // Even reading this variable seems to do the trick, but also setting it just to make use of it
+@@ -360,7 +360,7 @@ export const useField = params => {
+
+   React.useEffect(() => {
+     // Select the right section when focused on mount (`autoFocus = true` on the input)
+-    if (inputRef.current && inputRef.current === document.activeElement) {
++    if (inputRef.current && inputRef.current === inputRef.current.ownerDocument.activeElement) {
+       setSelectedSections('all');
+     }
+     return () => window.clearTimeout(focusTimeoutRef.current);
+@@ -390,7 +390,7 @@ export const useField = params => {
+     }
+     return 'numeric';
+   }, [selectedSectionIndexes, state.sections]);
+-  const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(document);
++  const inputHasFocus = inputRef.current && inputRef.current === getActiveElement(inputRef.current.ownerDocument);
+   const areAllSectionsEmpty = valueManager.areValuesEqual(utils, state.value, valueManager.emptyValue);
+   const shouldShowPlaceholder = !inputHasFocus && areAllSectionsEmpty;
+   React.useImperativeHandle(unstableFieldRef, () => ({

cypress/e2e/search.cy.ts

@@ -39,23 +39,7 @@ describe('Search', () => {
         });
       }).as('getSettings');
 
-      cy.visit('/', {
-        // need these to ensure Date picker media queries pass
-        // ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
-        onBeforeLoad: (win) => {
-          cy.stub(win, 'matchMedia')
-            .withArgs('(pointer: fine)')
-            .returns({
-              matches: true,
-              addListener: () => {
-                // no-op
-              },
-              removeListener: () => {
-                // no-op
-              },
-            });
-        },
-      }).wait(['@getSettings']);
+      cy.visit('/').wait(['@getSettings']);
 
       cy.findByRole('progressbar').should('be.visible');
       cy.findByRole('progressbar').should('not.exist');
@@ -657,8 +641,8 @@ describe('Search', () => {
 
       // From Date is above the To Date
 
-      cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
-      cy.findByLabelText('to, date-time input').type('2021-01-01 00:00');
+      cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');
+      cy.findByLabelText('to, date-time input').type('2021-01-01_00:00');
 
       cy.findByLabelText('date-time search box').should(
         'have.css',
@@ -675,7 +659,7 @@ describe('Search', () => {
       cy.findByLabelText('from, date-time input').clear();
       cy.findByLabelText('to, date-time input').clear();
 
-      cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
+      cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');
 
       cy.findByLabelText('date-time search box').should(
         'have.css',
@@ -689,10 +673,11 @@ describe('Search', () => {
 
       // Only the To date is defined
 
-      cy.findByLabelText('from, date-time input').clear();
+      // cy.findByLabelText('from, date-time input').clear();
+      cy.findByLabelText('from, date-time input').type('{ctrl+a}{backspace}');
       cy.findByLabelText('to, date-time input').clear();
 
-      cy.findByLabelText('to, date-time input').type('2022-01-01 00:00');
+      cy.findByLabelText('to, date-time input').type('2022-01-01_00:00');
 
       cy.findByLabelText('date-time search box').should(
         'have.css',
@@ -866,8 +851,8 @@ describe('Search', () => {
     });
 
     it('changes to and from dateTimes to use 0 seconds and 59 seconds respectively', () => {
-      cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
-      cy.findByLabelText('to, date-time input').type('2022-01-02 00:00');
+      cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');
+      cy.findByLabelText('to, date-time input').type('2022-01-02_00:00');
 
       const expectedToDate = new Date('2022-01-02 00:00:59');
       const expectedFromDate = new Date('2022-01-01 00:00:00');
@@ -939,15 +924,13 @@ describe('Search', () => {
       cy.findByLabelText('from, date-time picker').click();
       cy.findByRole('dialog').contains(13).click();
       cy.findByLabelText('from, date-time picker').click();
-
       cy.findByLabelText('open experiment search box')
         .contains('ID 22110007')
         .should('exist');
 
       cy.findByLabelText('to, date-time picker').click();
       cy.findByRole('dialog').contains(14).click();
       cy.findByLabelText('to, date-time picker').click();
-
       cy.findByLabelText('open experiment search box')
         .contains('ID 22110007')
         .should('exist');
@@ -1123,28 +1106,12 @@ describe('Search', () => {
         });
       }).as('getSettings');
 
-      cy.visit('/', {
-        // need these to ensure Date picker media queries pass
-        // ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
-        onBeforeLoad: (win) => {
-          cy.stub(win, 'matchMedia')
-            .withArgs('(pointer: fine)')
-            .returns({
-              matches: true,
-              addListener: () => {
-                // no-op
-              },
-              removeListener: () => {
-                // no-op
-              },
-            });
-        },
-      }).wait(['@getSettings']);
+      cy.visit('/').wait(['@getSettings']);
     });
 
     it('displays appropriate tooltips', () => {
-      cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
-      cy.findByLabelText('to, date-time input').type('2023-01-01 00:00');
+      cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');
+      cy.findByLabelText('to, date-time input').type('2023-01-01_00:00');
 
       cy.startSnoopingBrowserMockedRequest();
 
@@ -1215,8 +1182,10 @@ describe('Search', () => {
         );
       });
 
-      cy.findByLabelText('from, date-time input').clear();
-      cy.findByLabelText('from, date-time input').type('2022-01-11 00:00');
+      // .clear doesn't work with datepickers in v6
+      // cy.findByLabelText('from, date-time input').clear();
+      cy.findByLabelText('from, date-time input').type('{ctrl+a}{backspace}');
+      cy.findByLabelText('from, date-time input').type('2022-01-11_00:00');
 
       cy.contains('Search').click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting
@@ -1227,8 +1196,10 @@ describe('Search', () => {
 
       cy.clearMocks();
 
-      cy.findByLabelText('from, date-time input').clear();
-      cy.findByLabelText('from, date-time input').type('2022-01-02 00:00');
+      // .clear doesn't work with datepickers in v6
+      // cy.findByLabelText('from, date-time input').clear();
+      cy.findByLabelText('from, date-time input').type('{ctrl+a}{backspace}');
+      cy.findByLabelText('from, date-time input').type('2022-01-02_00:00');
 
       cy.contains('Search').click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting
@@ -1281,8 +1252,10 @@ describe('Search', () => {
         expect(gte).equal('2022-01-02T00:00:00');
       });
 
-      cy.findByLabelText('from, date-time input').clear();
-      cy.findByLabelText('from, date-time input').type('2022-01-01 00:00');
+      // .clear doesn't work with datepickers in v6
+      // cy.findByLabelText('from, date-time input').clear();
+      cy.findByLabelText('from, date-time input').type('{ctrl+a}{backspace}');
+      cy.findByLabelText('from, date-time input').type('2022-01-01_00:00');
 
       cy.contains('Search').click();
       // eslint-disable-next-line cypress/no-unnecessary-waiting

cypress/e2e/table.cy.ts

@@ -8,23 +8,7 @@ const verifyColumnOrder = (columns: string[]): void => {
 
 describe('Table Component', () => {
   beforeEach(() => {
-    cy.visit('/', {
-      // need these to ensure Date picker media queries pass
-      // ref: https://mui.com/x/react-date-pickers/getting-started/#testing-caveats
-      onBeforeLoad: (win) => {
-        cy.stub(win, 'matchMedia')
-          .withArgs('(pointer: fine)')
-          .returns({
-            matches: true,
-            addListener: () => {
-              // no-op
-            },
-            removeListener: () => {
-              // no-op
-            },
-          });
-      },
-    });
+    cy.visit('/');
   });
 
   it('adds columns in the order they are selected', () => {

e2e/plotting.spec.ts

@@ -279,12 +279,19 @@ test('user can add from and to dates to timestamp on x-axis', async ({
 
   await popup.locator('[aria-label="line chart"]').click();
 
-  await popup
-    .locator('[aria-label="from, date-time input"]')
-    .fill('2022-01-03 00:00:00');
-  await popup
-    .locator('[aria-label="to, date-time input"]')
-    .fill('2022-01-10 00:00:00');
+  // .fill doesn't work with date-pickers v6
+  // await popup
+  //   .locator('[aria-label="from, date-time input"]')
+  //   .fill('2022-01-03 00:00');
+  await popup.locator('[aria-label="to, date-time input"]').click();
+  await popup.keyboard.type('202201100000');
+
+  // .fill doesn't work with date-pickers v6
+  // await popup
+  //   .locator('[aria-label="to, date-time input"]')
+  //   .fill('2022-01-10 00:00');
+  await popup.locator('[aria-label="from, date-time input"]').click();
+  await popup.keyboard.type('202201030000');
 
   await popup.locator('label:has-text("Search all channels")').fill('Shot Num');
 

package.json

@@ -7,10 +7,11 @@
     "@emotion/cache": "11.11.0",
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
+    "@mui/base": "5.0.0-beta.12",
     "@mui/icons-material": "5.14.16",
     "@mui/material": "5.14.16",
     "@mui/system": "5.14.16",
-    "@mui/x-date-pickers": "5.0.7",
+    "@mui/x-date-pickers": "6.18.1",
     "@reduxjs/toolkit": "1.9.0",
     "@tanstack/react-query": "4.29.5",
     "@tanstack/react-query-devtools": "4.29.6",
@@ -47,7 +48,8 @@
   "resolutions": {
     "@typescript-eslint/eslint-plugin": "6.2.1",
     "@typescript-eslint/parser": "6.2.1",
-    "@testing-library/react/@testing-library/dom": "9.3.1"
+    "@testing-library/react/@testing-library/dom": "9.3.1",
+    "@mui/[email protected]": "patch:@mui/x-date-pickers@npm%3A6.18.1#./.yarn/patches/@mui-x-date-pickers-npm-6.18.1-79bdefe4ec.patch"
   },
   "scripts": {
     "lint:js": "eslint --max-warnings=0 --ext=tsx --ext=ts --ext=js --ext=jsx --fix ./src",

src/plotting/plotSettings/__snapshots__/xAxisTab.component.test.tsx.snap

@@ -348,19 +348,20 @@ exports[`x-axis tab renders correctly with timestamp x axis 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-z3c6am-MuiFormControl-root-MuiTextField-root"
         >
           <div
             class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-v4u5dn-MuiInputBase-root-MuiInput-root"
           >
             <input
               aria-invalid="false"
               aria-label="from, date-time input"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1x51dt5-MuiInputBase-input-MuiInput-input"
+              autocomplete="off"
+              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1pd62rs-MuiInputBase-input-MuiInput-input"
               id="from date-time"
+              inputmode="text"
               placeholder="From..."
-              style="font-size: 10px;"
-              type="tel"
+              type="text"
               value=""
             />
             <div
@@ -395,19 +396,20 @@ exports[`x-axis tab renders correctly with timestamp x axis 1`] = `
         class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-6 css-1osj8n2-MuiGrid-root"
       >
         <div
-          class="MuiFormControl-root MuiTextField-root css-1u3bzj6-MuiFormControl-root-MuiTextField-root"
+          class="MuiFormControl-root MuiTextField-root css-z3c6am-MuiFormControl-root-MuiTextField-root"
         >
           <div
             class="MuiInputBase-root MuiInput-root MuiInput-underline MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedEnd css-v4u5dn-MuiInputBase-root-MuiInput-root"
           >
             <input
               aria-invalid="false"
               aria-label="to, date-time input"
-              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1x51dt5-MuiInputBase-input-MuiInput-input"
+              autocomplete="off"
+              class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd css-1pd62rs-MuiInputBase-input-MuiInput-input"
               id="to date-time"
+              inputmode="text"
               placeholder="To..."
-              style="font-size: 10px;"
-              type="tel"
+              type="text"
               value=""
             />
             <div