Merge remote-tracking branch 'upstream/master' into bubble

Author: alexfauquette

.gitignore

@@ -5,6 +5,7 @@
 .cursor
 .claude/settings.local.json
 .claude/worktrees/
+.claude/scheduled_tasks.lock
 .junie
 
 __diff_output__

docs/package.json

@@ -30,7 +30,7 @@
     "@mui/icons-material": "catalog:",
     "@mui/base": "^5.0.0-beta.70",
     "@mui/internal-core-docs": "catalog:",
-    "@mui/internal-docs-infra": "^0.11.1-canary.8",
+    "@mui/internal-docs-infra": "^0.11.1-canary.11",
     "@mui/lab": "^9.0.0-beta.3",
     "@mui/material": "catalog:",
     "@mui/material-nextjs": "^9.0.1",

docs/src/modules/components/overview/pickers/MainDemo.tsx

@@ -77,7 +77,7 @@ export default function MainDemo() {
   const brandingTheme = useTheme();
   const isMobile = useMediaQuery(brandingTheme.breakpoints.down('sm'));
   const isTablet = useMediaQuery(brandingTheme.breakpoints.up('md'));
-  const isDesktop = useMediaQuery(brandingTheme.breakpoints.up('xl'));
+  const isDesktop = useMediaQuery(brandingTheme.breakpoints.up('lg'));
 
   const [showCustomTheme, setShowCustomTheme] = React.useState(false);
 

docs/src/modules/components/overview/pickers/mainDemo/DateRangeWithShortcuts.tsx

@@ -66,9 +66,10 @@ function CustomLayout(props: CustomLayoutProps) {
       ownerState={ownerState}
       sx={{
         overflow: 'auto',
+        gridAutoColumns: isHorizontal ? 'auto auto auto' : undefined,
         [`.${pickersLayoutClasses.shortcuts}`]: isHorizontal
           ? {
-              gridColumn: 2,
+              gridColumn: '2/4',
               gridRow: 1,
               display: 'flex',
               flexGrow: 1,

docs/src/modules/components/overview/pickers/themes/customTheme.ts

@@ -327,6 +327,16 @@ export const getCustomTheme = (mode: PaletteMode, config: Config): ThemeOptions
           }),
           root: ({ theme }) => ({
             width: theme.mixins.density.width * 7 + theme.mixins.density.spacing * 6,
+            // `DateRangeCalendar` hard-codes `minWidth: 312` / `minHeight: 240`
+            // on the day-grid wrapper for the default 36px cells; when this
+            // composite shrinks them via `theme.mixins.density`, that hard-coded
+            // floor leaks past the cells and shifts the day grid one column
+            // right of the weekday header. Track the density values to avoid
+            // that mismatch.
+            '& .MuiDayCalendar-slideTransition': {
+              minWidth: theme.mixins.density.width * 7 + theme.mixins.density.spacing * 6,
+              minHeight: theme.mixins.density.height * 6 + 4 * 6,
+            },
           }),
           weekContainer: ({ theme }) => ({
             height: theme.mixins.density.height,

packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx

@@ -58,7 +58,19 @@ describe('<DataGridPro /> - Lazy loader', () => {
   // Needs layout
   it.skipIf(isJSDOM)('should not call onFetchRows if the viewport is fully loaded', () => {
     const handleFetchRows = spy();
-    const rows = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }];
+    // The virtualizer renders one row past the visible viewport + buffer (see
+    // `getIndexesToRender`), so the loaded section must cover that extra row
+    // to keep the rendered range skeleton-free.
+    const rows = [
+      { id: 1 },
+      { id: 2 },
+      { id: 3 },
+      { id: 4 },
+      { id: 5 },
+      { id: 6 },
+      { id: 7 },
+      { id: 8 },
+    ];
     render(<TestLazyLoader onFetchRows={handleFetchRows} rowCount={50} rows={rows} />);
     expect(handleFetchRows.callCount).to.equal(0);
   });

packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx

@@ -453,12 +453,14 @@ describe('<DataGridPro /> - Rows', () => {
       const { setProps } = render(
         <TestCaseVirtualization nbRows={5} nbCols={2} height={160} rowBufferPx={0} />,
       );
-      expect(getRows()).to.have.length(1);
+      // `getIndexesToRender` renders one extra row past the visible viewport so
+      // there is no empty space if the user starts scrolling, hence the +1.
+      expect(getRows()).to.have.length(2);
       setProps({
         height: 220,
       });
       await waitFor(() => {
-        expect(getRows()).to.have.length(3);
+        expect(getRows()).to.have.length(4);
       });
     });
 
@@ -529,6 +531,9 @@ describe('<DataGridPro /> - Rows', () => {
       const n = 2;
       const columnWidth = 100;
       const columnBufferPx = n * columnWidth;
+      // `getIndexesToRender` renders one extra column past the visible viewport
+      // (or past the buffer) so a horizontal scroll does not leave empty space.
+      const extra = 1;
       render(
         <TestCaseVirtualization
           width={width + border * 2}
@@ -537,12 +542,14 @@ describe('<DataGridPro /> - Rows', () => {
         />,
       );
       const firstRow = getRow(0);
-      expect($$(firstRow, '[role="gridcell"]')).to.have.length(Math.floor(width / columnWidth) + n);
+      expect($$(firstRow, '[role="gridcell"]')).to.have.length(
+        Math.floor(width / columnWidth) + n + extra,
+      );
       const virtualScroller = document.querySelector('.MuiDataGrid-virtualScroller')!;
       await act(async () => virtualScroller.scrollTo({ left: 301 }));
       await waitFor(() => {
         expect($$(firstRow, '[role="gridcell"]')).to.have.length(
-          n + 1 + Math.floor(width / columnWidth) + n,
+          n + 1 + Math.floor(width / columnWidth) + n + extra,
         );
       });
     });

packages/x-data-grid/src/tests/rows.DataGrid.test.tsx

@@ -1078,20 +1078,23 @@ describe('<DataGrid /> - Rows', () => {
         const border = 1;
         const defaultRowHeight = 52;
         const measuredRowHeight = 101;
+        // The virtualizer renders one extra row past the visible viewport (see
+        // `getIndexesToRender`), so a single-row viewport measures the first
+        // two rows; the rest are left at the default height.
+        const measuredRowCount = 2;
         render(
           <TestCase
             columnHeaderHeight={columnHeaderHeight}
-            height={columnHeaderHeight + 20 + border * 2} // Force to only measure the first row
+            height={columnHeaderHeight + 20 + border * 2}
             getBioContentHeight={() => measuredRowHeight}
             getRowHeight={() => 'auto'}
             rowBufferPx={0}
           />,
         );
         const element = document.querySelector('.MuiDataGrid-contentFiller');
         const expectedHeight =
-          measuredRowHeight +
-          border + // Measured rows also include the border
-          (baselineProps.rows.length - 1) * defaultRowHeight;
+          measuredRowCount * (measuredRowHeight + border) + // Measured rows also include the border
+          (baselineProps.rows.length - measuredRowCount) * defaultRowHeight;
 
         await waitFor(() => {
           expect(element).toHaveComputedStyle({ height: `${expectedHeight}px` });
@@ -1103,20 +1106,24 @@ describe('<DataGrid /> - Rows', () => {
         const border = 1;
         const measuredRowHeight = 100;
         const estimatedRowHeight = 90;
+        // See `getIndexesToRender` — a single-row viewport still measures the
+        // first two rows because of the trailing render-context safety row.
+        const measuredRowCount = 2;
         render(
           <TestCase
             columnHeaderHeight={columnHeaderHeight}
-            height={columnHeaderHeight + 20 + border * 2} // Force to only measure the first row
+            height={columnHeaderHeight + 20 + border * 2}
             getBioContentHeight={() => measuredRowHeight}
             getEstimatedRowHeight={() => estimatedRowHeight}
             getRowHeight={() => 'auto'}
             rowBufferPx={0}
           />,
         );
         const element = document.querySelector('.MuiDataGrid-contentFiller');
-        const firstRowHeight = measuredRowHeight + border; // Measured rows also include the border
+        const measuredHeight = measuredRowHeight + border; // Measured rows also include the border
         const expectedHeight =
-          firstRowHeight + (baselineProps.rows.length - 1) * estimatedRowHeight;
+          measuredRowCount * measuredHeight +
+          (baselineProps.rows.length - measuredRowCount) * estimatedRowHeight;
 
         await waitFor(() => {
           expect(element).toHaveComputedStyle({ height: `${expectedHeight}px` });
@@ -1187,8 +1194,11 @@ describe('<DataGrid /> - Rows', () => {
         );
         const virtualScroller = grid('virtualScroller')!;
 
+        // With one row of viewport, `getIndexesToRender` still renders (and
+        // therefore measures) the next row past the visible area, so the first
+        // two rows are measured before any scroll happens.
         await waitFor(() => {
-          expect(virtualScroller.scrollHeight).to.equal(columnHeaderHeight + 101 + 52 + 52);
+          expect(virtualScroller.scrollHeight).to.equal(columnHeaderHeight + 101 + 101 + 52);
         });
 
         // It calculates the entire height of the scrollbar whenever the scroll event happens

packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx

@@ -60,6 +60,10 @@ export const PickersInputBaseRoot = styled('div', {
   position: 'relative',
   boxSizing: 'border-box', // Prevent padding issue with fullWidth.
   letterSpacing: `${round(0.15 / 16)}em`,
+  [`&.${pickersInputBaseClasses.disabled}`]: {
+    color: (theme.vars || theme).palette.action.disabled,
+    cursor: 'default',
+  },
   variants: [
     {
       props: { isInputInFullWidth: true },

packages/x-date-pickers/src/PickersTextField/PickersOutlinedInput/PickersOutlinedInput.tsx

@@ -53,9 +53,6 @@ const PickersOutlinedInputRoot = styled(PickersInputBaseRoot, {
       [`& .${pickersOutlinedInputClasses.notchedOutline}`]: {
         borderColor: (theme.vars || theme).palette.action.disabled,
       },
-      '*': {
-        color: (theme.vars || theme).palette.action.disabled,
-      },
     },
     variants: Object.keys((theme.vars ?? theme).palette)
       // @ts-ignore