Merge remote-tracking branch 'upstream/master' into yarn-to-pnpm

docs/data/charts/bars/BorderRadius.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
+
+export default function BorderRadius() {
+  return (
+    <div style={{ width: '100%' }}>
+      <BarChart
+        dataset={dataset}
+        {...chartSetting}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 10px 10px 0px 0px)`,
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+const dataset = [
+  [59, 57, 86, 21, 'Jan'],
+  [50, 52, 78, 28, 'Fev'],
+  [47, 53, 106, 41, 'Mar'],
+  [54, 56, 92, 73, 'Apr'],
+  [57, 69, 92, 99, 'May'],
+  [60, 63, 103, 144, 'June'],
+  [59, 60, 105, 319, 'July'],
+  [65, 60, 106, 249, 'Aug'],
+  [51, 51, 95, 131, 'Sept'],
+  [60, 65, 97, 55, 'Oct'],
+  [67, 64, 76, 48, 'Nov'],
+  [61, 70, 103, 25, 'Dec'],
+].map(([london, paris, newYork, seoul, month]) => ({
+  london,
+  paris,
+  newYork,
+  seoul,
+  month,
+}));
+
+const valueFormatter = (value) => `${value}mm`;
+
+const chartSetting = {
+  series: [{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }],
+  height: 300,
+  sx: {
+    [`& .${axisClasses.directionY} .${axisClasses.label}`]: {
+      transform: 'translateX(-10px)',
+    },
+  },
+};

docs/data/charts/bars/BorderRadius.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { axisClasses } from '@mui/x-charts/ChartsAxis';
+
+export default function BorderRadius() {
+  return (
+    <div style={{ width: '100%' }}>
+      <BarChart
+        dataset={dataset}
+        {...chartSetting}
+        slotProps={{
+          bar: {
+            clipPath: `inset(0px round 10px 10px 0px 0px)`,
+          },
+        }}
+      />
+    </div>
+  );
+}
+
+const dataset = [
+  [59, 57, 86, 21, 'Jan'],
+  [50, 52, 78, 28, 'Fev'],
+  [47, 53, 106, 41, 'Mar'],
+  [54, 56, 92, 73, 'Apr'],
+  [57, 69, 92, 99, 'May'],
+  [60, 63, 103, 144, 'June'],
+  [59, 60, 105, 319, 'July'],
+  [65, 60, 106, 249, 'Aug'],
+  [51, 51, 95, 131, 'Sept'],
+  [60, 65, 97, 55, 'Oct'],
+  [67, 64, 76, 48, 'Nov'],
+  [61, 70, 103, 25, 'Dec'],
+].map(([london, paris, newYork, seoul, month]) => ({
+  london,
+  paris,
+  newYork,
+  seoul,
+  month,
+}));
+
+const valueFormatter = (value: number | null) => `${value}mm`;
+
+const chartSetting = {
+  series: [{ dataKey: 'seoul', label: 'Seoul rainfall', valueFormatter }],
+  height: 300,
+  sx: {
+    [`& .${axisClasses.directionY} .${axisClasses.label}`]: {
+      transform: 'translateX(-10px)',
+    },
+  },
+};

docs/data/charts/bars/BorderRadius.tsx.preview

@@ -0,0 +1,9 @@
+<BarChart
+  dataset={dataset}
+  {...chartSetting}
+  slotProps={{
+    bar: {
+      clipPath: `inset(0px round 10px 10px 0px 0px)`,
+    },
+  }}
+/>

docs/data/charts/bars/bars.md

@@ -100,6 +100,27 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts
 
 {{"demo": "ColorScaleNoSnap.js"}}
 
+### Border Radius
+
+The border radius can be set by using a [clipPath](https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path) with
+[inset](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/inset) on the BarChart's `bar` [slot](/x/api/charts/bar-chart/#bar-chart-prop-slots)
+
+You can customize any of properties inside `inset`, the first property is "distance from border" and should be left at `0px` else it might break the bars alignment.
+
+```css
+inset(0px round <top-left> <top-right> <bottom-right> <bottom-left>)
+```
+
+{{"demo": "BorderRadius.js"}}
+
+:::warning
+There are few limitations to this method though.
+
+- [Stacking](/x/react-charts/bars/#stacking) won't look right with border radius.
+- On charts containing `Negative` and `Positive` values, rounding will apply to all of them in the same way, which might be undesirable.
+
+:::
+
 ## Click event
 
 Bar charts provides two click handlers:

docs/data/migration/migration-data-grid-v6/migration-data-grid-v6.md

@@ -147,7 +147,7 @@ Here is an example of how you can transpile these features on Webpack 4 using th
 The Data Grid's layout has been substantially altered to use CSS sticky positioned elements.
 As a result, the following changes have been made:
 
-- The main element now corresponds to the virtal scroller element.
+- The main element now corresponds to the virtual scroller element.
 - Headers are now contained in the virtual scroller.
 - Pinned row and column sections are now contained in the virtual scroller.
 - The cell inner wrapper `.MuiDataGrid-cellContent` has been removed.
@@ -409,7 +409,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)
 
 ### Filtering
 
-- The `getApplyFilterFnV7` in `GridFilterOperator` was renamed to `getApplyFilterFn`.
+- The `getApplyFilterFnV7` in `GridFilterOperator` has been renamed to `getApplyFilterFn`.
   If you use `getApplyFilterFnV7` directly - rename it to `getApplyFilterFn`.
 
 - The signature of the function returned by `getApplyFilterFn` has changed for performance reasons:
@@ -560,7 +560,7 @@ See the [Direct state access](/x/react-data-grid/state/#direct-selector-access)
 
 - The `columnHeader--showColumnBorder` class was replaced by `columnHeader--withLeftBorder` and `columnHeader--withRightBorder`.
 - The `columnHeadersInner`, `columnHeadersInner--scrollable`, and `columnHeaderDropZone` classes were removed since the inner wrapper was removed in our effort to simplify the DOM structure and improve accessibility.
-- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes were removed along with the element they were applied to.
+- The `pinnedColumnHeaders`, `pinnedColumnHeaders--left`, and `pinnedColumnHeaders--right` classes have been removed along with the element they were applied to.
   The pinned column headers now use `position: 'sticky'` and are rendered in the same row element as the regular column headers.
 - The column headers and pinned section now require an explicit color. By default, the MUI `theme.palette.background.default` color will be used. To customize it, see https://mui.com/material-ui/customization/palette/#customization
   We will be adding a new color name to the palette for additional customization, read [#12443](https://github.com/mui/mui-x/issues/12443) for more details.

docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md

@@ -447,10 +447,12 @@ For example, if you were writing a test with `react-testing-library`, here is wh
  it('test example on first item', () => {
    const { getByRole } = render(
      <SimpleTreeView>
-       <TreeItem itemId="one">One</TreeItem>
-       <TreeItem itemId="two">Two</TreeItem>
+       <TreeItem itemId="one" id="one">One</TreeItem>
+       <TreeItem itemId="two" id="two">Two</TreeItem>
     </SimpleTreeView>
    );
+
+   // Set the focus to the item "One"
 -  const tree = getByRole('tree');
 +  const treeItem = getByRole('treeitem', { name: 'One' });
    act(() => {
@@ -459,6 +461,10 @@ For example, if you were writing a test with `react-testing-library`, here is wh
    });
 -  fireEvent.keyDown(tree, { key: 'ArrowDown' });
 +  fireEvent.keyDown(treeItem, { key: 'ArrowDown' });
+
+  // Check if the new focused item is "Two"
+- expect(tree)to.have.attribute('aria-activedescendant', 'two');
++ expect(document.activeElement).to.have.attribute('id', 'two');
  })
 ```
 

packages/x-charts/src/ChartsTooltip/ChartsTooltipTable.ts

@@ -1,15 +1,15 @@
-import Box from '@mui/system/Box';
 import { styled } from '@mui/material/styles';
+import { shouldForwardProp } from '@mui/system';
 import { chartsTooltipClasses } from './chartsTooltipClasses';
 
 export const ChartsTooltipPaper = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Container',
 })(({ theme }) => ({
+  boxShadow: theme.shadows[1],
   backgroundColor: (theme.vars || theme).palette.background.paper,
   color: (theme.vars || theme).palette.text.primary,
   transition: theme.transitions.create('box-shadow'),
-  border: `1px solid ${(theme.vars || theme).palette.divider}`,
   borderRadius: theme.shape.borderRadius,
 }));
 
@@ -41,15 +41,13 @@ export const ChartsTooltipCell = styled('td', {
 })(({ theme }) => ({
   verticalAlign: 'middle',
   color: (theme.vars || theme).palette.text.secondary,
-
   [`&.${chartsTooltipClasses.labelCell}`]: {
     paddingLeft: theme.spacing(1),
   },
   [`&.${chartsTooltipClasses.valueCell}`]: {
     paddingLeft: theme.spacing(4),
     color: (theme.vars || theme).palette.text.primary,
   },
-
   'td:first-of-type&': {
     paddingLeft: theme.spacing(2),
   },
@@ -58,15 +56,16 @@ export const ChartsTooltipCell = styled('td', {
   },
 }));
 
-// eslint-disable-next-line material-ui/no-styled-box
-export const ChartsTooltipMark = styled(Box, {
+export const ChartsTooltipMark = styled('div', {
   name: 'MuiChartsTooltip',
   slot: 'Mark',
-})<{ ownerState: { color: string } }>(({ theme, ownerState }) => ({
+  shouldForwardProp: (prop) => shouldForwardProp(prop) && prop !== 'color',
+})<{ color: string }>(({ theme, color }) => ({
   width: theme.spacing(1),
   height: theme.spacing(1),
   borderRadius: '50%',
-  backgroundColor: ownerState.color,
+  boxShadow: theme.shadows[1],
+  backgroundColor: color,
   borderColor: (theme.vars || theme).palette.background.paper,
   border: `solid ${(theme.vars || theme).palette.background.paper} ${theme.spacing(0.25)}`,
   boxSizing: 'content-box',

packages/x-charts/src/ChartsTooltip/DefaultChartsAxisTooltipContent.tsx

@@ -50,16 +50,13 @@ function DefaultChartsAxisTooltipContent(props: ChartsAxisContentProps) {
                 <ChartsTooltipRow key={id} className={classes.row}>
                   <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
                     <ChartsTooltipMark
-                      ownerState={{ color: getColor(dataIndex) ?? color }}
-                      boxShadow={1}
+                      color={getColor(dataIndex) ?? color}
                       className={classes.mark}
                     />
                   </ChartsTooltipCell>
-
                   <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
                     {label ? <Typography>{label}</Typography> : null}
                   </ChartsTooltipCell>
-
                   <ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
                     <Typography>{formattedValue}</Typography>
                   </ChartsTooltipCell>

packages/x-charts/src/ChartsTooltip/DefaultChartsItemTooltipContent.tsx

@@ -41,13 +41,11 @@ function DefaultChartsItemTooltipContent<T extends ChartSeriesType = ChartSeries
         <tbody>
           <ChartsTooltipRow className={classes.row}>
             <ChartsTooltipCell className={clsx(classes.markCell, classes.cell)}>
-              <ChartsTooltipMark ownerState={{ color }} className={classes.mark} />
+              <ChartsTooltipMark color={color} className={classes.mark} />
             </ChartsTooltipCell>
-
             <ChartsTooltipCell className={clsx(classes.labelCell, classes.cell)}>
               {displayedLabel}
             </ChartsTooltipCell>
-
             <ChartsTooltipCell className={clsx(classes.valueCell, classes.cell)}>
               {formattedValue}
             </ChartsTooltipCell>

packages/x-data-grid/src/hooks/features/columnResize/useGridColumnResize.tsx

@@ -12,6 +12,7 @@ import {
   findRightPinnedCellsBeforeCol,
   getFieldFromHeaderElem,
   findHeaderElementFromField,
+  getFieldsFromGroupHeaderElem,
   findGroupHeaderElementsFromField,
   findGridHeader,
   findGridCells,
@@ -428,6 +429,24 @@ export const useGridColumnResize = (
     if (refs.colDef) {
       apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width!);
       logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
+
+      const columnsState = gridColumnsStateSelector(apiRef.current.state);
+      refs.groupHeaderElements!.forEach((element) => {
+        const fields = getFieldsFromGroupHeaderElem(element);
+        const div = element as HTMLDivElement;
+
+        const newWidth = fields.reduce((acc, field) => {
+          if (columnsState.columnVisibilityModel[field] !== false) {
+            return acc + columnsState.lookup[field].computedWidth;
+          }
+          return acc;
+        }, 0);
+        const finalWidth: `${number}px` = `${newWidth}px`;
+
+        div.style.width = finalWidth;
+        div.style.minWidth = finalWidth;
+        div.style.maxWidth = finalWidth;
+      });
     }
 
     stopResizeEventTimeout.start(0, () => {

packages/x-data-grid/src/utils/domUtils.ts

@@ -71,6 +71,11 @@ export function findHeaderElementFromField(elem: Element, field: string): HTMLDi
   return elem.querySelector(`[data-field="${field}"]`)!;
 }
 
+export function getFieldsFromGroupHeaderElem(colCellEl: Element): string[] {
+  const fieldsString = colCellEl.getAttribute('data-fields');
+  return fieldsString?.startsWith('|-') ? fieldsString!.slice(2, -2).split('-|-') : [];
+}
+
 export function findGroupHeaderElementsFromField(elem: Element, field: string): Element[] {
   return Array.from(elem.querySelectorAll<HTMLDivElement>(`[data-fields*="|-${field}-|"]`) ?? []);
 }

packages/x-tree-view/src/TreeItem/TreeItem.test.tsx

@@ -226,17 +226,13 @@ describe('<TreeItem />', () => {
   });
 
   it('should be able to use a custom id', () => {
-    const { getByRole, getByTestId } = render(
+    const { getByRole } = render(
       <SimpleTreeView>
         <TreeItem id="customId" itemId="one" data-testid="one" />
       </SimpleTreeView>,
     );
 
-    act(() => {
-      getByTestId('one').focus();
-    });
-
-    expect(getByRole('tree')).to.have.attribute('aria-activedescendant', 'customId');
+    expect(getByRole('treeitem')).to.have.attribute('id', 'customId');
   });
 
   describe('Accessibility', () => {
@@ -1007,7 +1003,7 @@ describe('<TreeItem />', () => {
       describe('range selection', () => {
         it('keyboard arrow', () => {
           const { getByTestId, queryAllByRole, getByText } = render(
-            <SimpleTreeView multiSelect defaultExpandedItems={['two']}>
+            <SimpleTreeView multiSelect>
               <TreeItem itemId="one" label="one" data-testid="one" />
               <TreeItem itemId="two" label="two" data-testid="two" />
               <TreeItem itemId="three" label="three" data-testid="three" />
@@ -1085,7 +1081,7 @@ describe('<TreeItem />', () => {
 
         it('keyboard arrow merge', () => {
           const { getByTestId, getByText, queryAllByRole } = render(
-            <SimpleTreeView multiSelect defaultExpandedItems={['two']}>
+            <SimpleTreeView multiSelect>
               <TreeItem itemId="one" label="one" data-testid="one" />
               <TreeItem itemId="two" label="two" data-testid="two" />
               <TreeItem itemId="three" label="three" data-testid="three" />
@@ -1207,7 +1203,7 @@ describe('<TreeItem />', () => {
           expect(getByTestId('eight')).to.have.attribute('aria-selected', 'true');
           expect(getByTestId('nine')).to.have.attribute('aria-selected', 'true');
 
-          fireEvent.keyDown(getByTestId('nine'), {
+          fireEvent.keyDown(getByTestId('five'), {
             key: 'Home',
             shiftKey: true,
             ctrlKey: true,

packages/x-tree-view/src/TreeItem/useTreeItemState.ts

@@ -39,7 +39,7 @@ export function useTreeItemState(itemId: string) {
 
       if (multiple) {
         if (event.shiftKey) {
-          instance.selectRange(event, { end: itemId });
+          instance.expandSelectionRange(event, itemId);
         } else {
           instance.selectItem(event, itemId, true);
         }

packages/x-tree-view/src/hooks/useTreeItem2Utils/useTreeItem2Utils.tsx

@@ -63,7 +63,7 @@ export const useTreeItem2Utils = ({
 
     if (multiple) {
       if (event.shiftKey) {
-        instance.selectRange(event, { end: itemId });
+        instance.expandSelectionRange(event, itemId);
       } else {
         instance.selectItem(event, itemId, true);
       }