Merge branch 'master' into release-charts-premium

Author: JCQuintas

docs/data/data-grid/pivoting/GridGetPivotDerivedColumns.js

@@ -8,13 +8,15 @@ const getPivotDerivedColumns = (column) => {
       {
         field: `${field}-year`,
         headerName: `${column.headerName} (Year)`,
-        valueGetter: (value, row) => new Date(row[field]).getFullYear(),
+        valueGetter: (_, row) => new Date(row[field]).getFullYear(),
       },
       {
         field: `${field}-month`,
         headerName: `${column.headerName} (Month)`,
-        valueGetter: (value, row) =>
-          `M${`${new Date(row[field]).getMonth() + 1}`.padStart(2, '0')}`,
+        type: 'number',
+        valueGetter: (_, row) => new Date(row[field]).getMonth(),
+        valueFormatter: (month) =>
+          new Date(0, month).toLocaleString(undefined, { month: 'long' }),
       },
     ];
   }
@@ -71,7 +73,7 @@ export default function GridGetPivotDerivedColumns() {
           getPivotDerivedColumns={getPivotDerivedColumns}
           initialState={{
             pivoting: {
-              enabled: false,
+              enabled: true,
               model: pivotModel,
             },
             sidebar: {

docs/data/data-grid/pivoting/GridGetPivotDerivedColumns.tsx

@@ -16,14 +16,16 @@ const getPivotDerivedColumns: DataGridPremiumProps['getPivotDerivedColumns'] = (
       {
         field: `${field}-year`,
         headerName: `${column.headerName} (Year)`,
-        valueGetter: (value, row) => new Date(row[field]).getFullYear(),
+        valueGetter: (_, row) => new Date(row[field]).getFullYear(),
       },
 
       {
         field: `${field}-month`,
         headerName: `${column.headerName} (Month)`,
-        valueGetter: (value, row) =>
-          `M${`${new Date(row[field]).getMonth() + 1}`.padStart(2, '0')}`,
+        type: 'number',
+        valueGetter: (_, row) => new Date(row[field]).getMonth(),
+        valueFormatter: (month) =>
+          new Date(0, month).toLocaleString(undefined, { month: 'long' }),
       },
     ];
   }
@@ -81,7 +83,7 @@ export default function GridGetPivotDerivedColumns() {
           getPivotDerivedColumns={getPivotDerivedColumns}
           initialState={{
             pivoting: {
-              enabled: false,
+              enabled: true,
               model: pivotModel,
             },
             sidebar: {

docs/data/data-grid/pivoting/pivoting.md

@@ -123,6 +123,10 @@ The **Transaction Date** column is represented by additional columns in pivot mo
 Use the `getPivotDerivedColumns` prop to customize derived columns.
 This prop is called for each original column and returns an array of derived columns, or `undefined` if no derived columns are needed.
 
+:::success
+To sort the derived columns by a value different than the column header name—to display months of the year, define both `valueGetter` and `valueFormatter` for the derived column.
+:::
+
 {{"demo": "GridGetPivotDerivedColumns.js", "bg": "inline", "defaultCodeOpen": true}}
 
 ## Sticky column groups

package.json

@@ -93,7 +93,7 @@
     "@mui/internal-markdown": "^2.0.6",
     "@mui/internal-test-utils": "catalog:",
     "@mui/material": "catalog:",
-    "@mui/monorepo": "github:mui/material-ui#6c9df3c694eb89755d6687f555553916f3b4c189",
+    "@mui/monorepo": "github:mui/material-ui#318f6ffee1bb664f7171ca9293d3548dbafe5913",
     "@mui/utils": "catalog:",
     "@next/eslint-plugin-next": "15.4.4",
     "@octokit/plugin-retry": "^8.0.1",

packages/x-data-grid-premium/src/hooks/features/pivoting/utils.ts

@@ -1,7 +1,6 @@
 import {
   GridColDef,
   GridColumnGroup,
-  GridColumnGroupingModel,
   GridColumnNode,
   GridRowModel,
   isLeaf,
@@ -19,6 +18,11 @@ import { isGroupingColumn } from '../rowGrouping';
 import type { GridPivotingPropsOverrides, GridPivotModel } from './gridPivotingInterfaces';
 import { defaultGetAggregationPosition } from '../aggregation/gridAggregationUtils';
 
+interface GridColumnGroupPivoting extends Omit<GridColumnGroup, 'children'> {
+  rawHeaderName: string;
+  children: GridColumnGroupPivoting[];
+}
+
 const columnGroupIdSeparator = '>->';
 
 export const isPivotingAvailable = (
@@ -74,7 +78,7 @@ export const getInitialColumns = (
 };
 
 function sortColumnGroups(
-  columnGroups: GridColumnNode[],
+  columnGroups: GridColumnGroupPivoting[],
   pivotModelColumns: GridPivotModel['columns'],
   depth = 0,
 ) {
@@ -97,7 +101,7 @@ function sortColumnGroups(
     }
     return (
       (sort === 'asc' ? 1 : -1) *
-      gridStringOrNumberComparator(a.headerName, b.headerName, {} as any, {} as any)
+      gridStringOrNumberComparator(a.rawHeaderName, b.rawHeaderName, {} as any, {} as any)
     );
   });
 }
@@ -176,8 +180,8 @@ export const getPivotedData = ({
 
   const aggregationModel: GridAggregationModel = {};
 
-  const columnGroupingModel: GridColumnGroupingModel = [];
-  const columnGroupingModelLookup = new Map<string, GridColumnGroup>();
+  const columnGroupingModel: GridColumnGroupPivoting[] = [];
+  const columnGroupingModelLookup = new Map<string, GridColumnGroupPivoting>();
 
   let newRows: GridRowModel[] = [];
 
@@ -213,13 +217,15 @@ export const getPivotedData = ({
           colValue = String(colValue);
         }
 
+        const formattedHeaderName = apiRef.current.getRowFormattedValue(row, column) || colValue;
         columnGroupPath.push(colValue);
         const groupId = columnGroupPath.join(columnGroupIdSeparator);
 
         if (!columnGroupingModelLookup.has(groupId)) {
-          const columnGroup: GridColumnGroupingModel[number] = {
+          const columnGroup: GridColumnGroupPivoting = {
             groupId,
-            headerName: colValue,
+            headerName: formattedHeaderName,
+            rawHeaderName: colValue,
             children: [],
           };
           columnGroupingModelLookup.set(groupId, columnGroup);

packages/x-date-pickers/src/PickersLayout/PickersLayout.tsx

@@ -37,20 +37,28 @@ export const PickersLayoutRoot = styled('div', {
   [`& .${pickersLayoutClasses.actionBar}`]: { gridColumn: '1 / 4', gridRow: 3 },
   variants: [
     {
-      props: { pickerOrientation: 'landscape' },
+      props: { pickerOrientation: 'landscape', hasShortcuts: false },
       style: {
         [`& .${pickersLayoutClasses.toolbar}`]: {
           gridColumn: 1,
-          gridRow: '2 / 3',
+          gridRow: '1 / 3',
         },
-        [`.${pickersLayoutClasses.shortcuts}`]: { gridColumn: '2 / 4', gridRow: 1 },
       },
     },
     {
-      props: { pickerOrientation: 'landscape', layoutDirection: 'rtl' },
+      props: {
+        pickerOrientation: 'landscape',
+        hasShortcuts: true,
+      },
       style: {
         [`& .${pickersLayoutClasses.toolbar}`]: {
-          gridColumn: 3,
+          gridColumn: '2 / 4',
+          gridRow: 1,
+          maxWidth: 'max-content',
+        },
+        [`& .${pickersLayoutClasses.shortcuts}`]: {
+          gridColumn: 1,
+          gridRow: 2,
         },
       },
     },
@@ -65,7 +73,7 @@ export const PickersLayoutRoot = styled('div', {
       },
     },
     {
-      props: { pickerOrientation: 'portrait', layoutDirection: 'rtl' },
+      props: { hasShortcuts: true, layoutDirection: 'rtl' },
       style: {
         [`& .${pickersLayoutClasses.shortcuts}`]: {
           gridColumn: 4,

packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts

@@ -41,6 +41,11 @@ export interface PickerLayoutOwnerState extends PickerOwnerState {
    * Is equal to "rtl" when the layout is in right-to-left direction.
    */
   layoutDirection: 'ltr' | 'rtl';
+  /**
+   * Whether the layout should display the shortcuts panel or not.
+   * This flag is used to adjust the layout accordingly.
+   */
+  hasShortcuts: boolean;
 }
 
 export interface ExportedPickersLayoutSlotProps<TValue extends PickerValidValue> {

packages/x-date-pickers/src/PickersLayout/usePickerLayout.tsx

@@ -6,7 +6,7 @@ import { useRtl } from '@mui/system/RtlProvider';
 import { PickersActionBar } from '../PickersActionBar';
 import { PickerLayoutOwnerState, PickersLayoutProps, SubComponents } from './PickersLayout.types';
 import { getPickersLayoutUtilityClass, PickersLayoutClasses } from './pickersLayoutClasses';
-import { PickersShortcuts } from '../PickersShortcuts';
+import { PickersShortcuts, PickersShortcutsProps } from '../PickersShortcuts';
 import { BaseToolbarProps } from '../internals/models/props/toolbar';
 import { PickerValidValue } from '../internals/models';
 import { usePickerPrivateContext } from '../internals/hooks/usePickerPrivateContext';
@@ -48,7 +48,7 @@ const usePickerLayout = <TValue extends PickerValidValue>(
   const { children, slots, slotProps, classes: classesProp } = props;
 
   const ownerState = React.useMemo<PickerLayoutOwnerState>(
-    () => ({ ...pickerOwnerState, layoutDirection: isRtl ? 'rtl' : 'ltr' }),
+    () => ({ ...pickerOwnerState, layoutDirection: isRtl ? 'rtl' : 'ltr', hasShortcuts: false }),
     [pickerOwnerState, isRtl],
   );
   const classes = useUtilityClasses(classesProp, ownerState);
@@ -94,7 +94,10 @@ const usePickerLayout = <TValue extends PickerValidValue>(
     externalSlotProps: slotProps?.shortcuts,
     className: classes.shortcuts,
     ownerState,
-  });
+  }) as PickersShortcutsProps<TValue>;
+
+  const hasShortcuts = Array.isArray(shortcutsProps?.items) && shortcutsProps.items.length > 0;
+
   const shortcuts = view && !!Shortcuts ? <Shortcuts {...shortcutsProps} /> : null;
 
   return {
@@ -103,7 +106,7 @@ const usePickerLayout = <TValue extends PickerValidValue>(
     tabs,
     actionBar,
     shortcuts,
-    ownerState,
+    ownerState: { ...ownerState, hasShortcuts },
   };
 };