Merge branch 'master' into fix/19340

Author: MBilalShafi

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@8e8c483db84b4bee98b60c0593521ed34d9990e8 # v6.0.1
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/init@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8
         with:
           languages: typescript
           # If you wish to specify custom queries, you can do so here or in a config file.
@@ -29,4 +29,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/analyze@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8

.github/workflows/scorecards.yml

@@ -40,6 +40,6 @@ jobs:
           publish_results: true
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@cf1bb45a277cb3c205638b2cd5c984db1c46a412 # v4.31.7
+        uses: github/codeql-action/upload-sarif@1b168cd39490f61582a9beae412bb7057a6b2c4e # v4.31.8
         with:
           sarif_file: results.sarif

docs/data/charts/accessibility/accessibility.md

@@ -86,11 +86,11 @@ When focused, the chart highlights a value item that can be modified with arrow
 The focus highlight is done with a dedicated SVG element.
 When using composition, you've to add this component to make the focus visible.
 
-Each series type has its own component.
-Exception for the pie chart that has the focus directly managed in the `<PieArcPlot />`.
+Each series type has its own component:
 
 ```js
 import { FocusedBar } from '@mui/x-charts/BarChart';
+import { FocusedPieArc } from '@mui/x-charts/BarChart';
 import { FocusedLineMark } from '@mui/x-charts/LineChart';
 import { FocusedScatterMark } from '@mui/x-charts/ScatterChart';
 ```

docs/data/data-grid/api-object/api-object.md

@@ -4,39 +4,44 @@
 
 The API object is an interface containing the state and all the methods available to programmatically interact with the Data Grid.
 
-You can find the list of all the API methods on the [GridApi page](/x/api/data-grid/grid-api/).
+You can find the list of all the API methods on the [`GridApi` page](/x/api/data-grid/grid-api/).
 
 :::warning
-All methods prefixed by `unstable_` are related to experimental features and may be removed, renamed, or reworked at any time.
+New and experimental features are prefixed with `unstable_` and may be removed, renamed, or reworked at any time.
 :::
 
 ## How to use the API object
 
 The API object is accessible through the `apiRef` variable.
-To access this variable, use `useGridApiContext` (inside the Data Grid) or `useGridApiRef` (outside the Data Grid).
+To access this variable, use `useGridApiContext` (inside `DataGrid`) or `useGridApiRef` (outside `DataGrid`).
 
 ### Inside the Data Grid
 
-To access the API object inside component slots or inside renders (for instance, `renderCell` or `renderHeader`), use the `useGridApiContext` hook:
+To access the API object inside component slots or inside renders (for instance, `renderCell` or `renderHeader`), use the `useGridApiContext` hook.
+The snippet below renders `Button` inside the Grid's `GridToolbarContainer`:
 
 ```tsx
-function CustomFooter() {
+function CustomToolbar() {
   const apiRef = useGridApiContext();
 
-  return <Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>;
+  return (
+    <GridToolbarContainer>
+      <Button onClick={() => apiRef.current.setPage(1)}>Go to page 1</Button>
+    </GridToolbarContainer>
+  );
 }
 ```
 
 :::info
-You don't need to initialize the API object using `useGridApiRef` to be able to use it inside the Data Grid components.
+You don't need to initialize the API object using `useGridApiRef` to be able to use it inside Data Grid components.
 :::
 
 {{"demo": "UseGridApiContext.js", "bg": "inline", "defaultCodeOpen": false}}
 
 ### Outside the Data Grid
 
-When using the API object outside the Data Grid components, you need to initialize it using the `useGridApiRef` hook.
-You can then pass it to the Data Grid's `apiRef` prop:
+When using the API object outside Data Grid components, you must initialize it using the `useGridApiRef` hook.
+You can then pass it to the `apiRef` prop on the `DataGrid`:
 
 ```tsx
 function CustomDataGrid(props) {
@@ -52,7 +57,7 @@ function CustomDataGrid(props) {
 ```
 
 :::warning
-The API object is populated by the Data Grid's various plugins during the first render of the component.
+The API object is populated by the `DataGrid`'s various plugins during the first render of the component.
 If you try to use it in the first render of the component, it will crash because not all methods are registered yet.
 :::
 
@@ -64,7 +69,7 @@ If you try to use it in the first render of the component, it will crash because
 
 You can control the disabled features of a column (for example hiding, sorting, filtering, pinning, grouping, etc) programmatically using `initialState`, controlled models, or the API object.
 
-In the example below, API object is used to build a custom sorting for the _firstName_ column which is not sortable by the default grid UI (using the `colDef.sortable` property set to `false`).
+In the example below, the API object is used to build a custom sorting for the `firstName` column which is not sortable by the default grid UI (using the `colDef.sortable` property set to `false`).
 
 ```tsx
 const columns = [{ field: 'rating', sortable: false }, ...otherColumns];
@@ -93,15 +98,15 @@ function CustomDataGrid(props) {
 
 ### Retrieve data from the state
 
-You can find a detailed example on the [State page](/x/react-data-grid/state/#access-the-state).
+See [State—Access the state](/x/react-data-grid/state/#access-the-state) for a detailed example.
 
 ### Listen to grid events
 
-You can find a detailed example on the [Events page](/x/react-data-grid/events/#subscribing-to-events).
+See [Events—Subscribing to events](/x/react-data-grid/events/#subscribing-to-events) for a detailed example.
 
 ## API
 
-- [GridApi](/x/api/data-grid/grid-api/)
-- [DataGrid](/x/api/data-grid/data-grid/)
-- [DataGridPro](/x/api/data-grid/data-grid-pro/)
-- [DataGridPremium](/x/api/data-grid/data-grid-premium/)
+- [`GridApi`](/x/api/data-grid/grid-api/)
+- [`DataGrid`](/x/api/data-grid/data-grid/)
+- [`DataGridPro`](/x/api/data-grid/data-grid-pro/)
+- [`DataGridPremium`](/x/api/data-grid/data-grid-premium/)

docs/data/scheduler/timezone-support/TimezoneDataset.js

@@ -63,7 +63,7 @@ export default function TimezoneDataset() {
         defaultVisibleDate={defaultVisibleDate}
         onEventsChange={setEvents}
         defaultPreferences={{ isSidePanelOpen: false }}
-        timezone="Europe/Paris"
+        displayTimezone="Europe/Paris"
         areEventsDraggable
         areEventsResizable
         eventModelStructure={eventModelStructure}

docs/data/scheduler/timezone-support/TimezoneDataset.tsx

@@ -64,7 +64,7 @@ export default function TimezoneDataset() {
         defaultVisibleDate={defaultVisibleDate}
         onEventsChange={setEvents}
         defaultPreferences={{ isSidePanelOpen: false }}
-        timezone="Europe/Paris"
+        displayTimezone="Europe/Paris"
         areEventsDraggable
         areEventsResizable
         eventModelStructure={eventModelStructure}

docs/data/scheduler/timezone-support/TimezoneDataset.tsx.preview

@@ -4,7 +4,7 @@
   defaultVisibleDate={defaultVisibleDate}
   onEventsChange={setEvents}
   defaultPreferences={{ isSidePanelOpen: false }}
-  timezone="Europe/Paris"
+  displayTimezone="Europe/Paris"
   areEventsDraggable
   areEventsResizable
   eventModelStructure={eventModelStructure}

docs/src/modules/components/ChartComponentsUpcoming.js

@@ -16,6 +16,16 @@ function getComponents() {
       title: 'Bubble Chart',
       href: 'https://github.com/mui/mui-x/issues/17275',
     },
+    {
+      title: 'Range Bar',
+      href: 'https://github.com/mui/mui-x/issues/20350',
+      premium: true,
+    },
+    {
+      title: 'Range Area',
+      href: 'https://github.com/mui/mui-x/issues/13988',
+      premium: true,
+    },
     {
       title: 'Treemap',
       href: '/x/react-charts/treemap/',
@@ -37,13 +47,13 @@ function getComponents() {
       pro: true,
     },
     {
-      title: 'Gantt Chart',
-      href: '/x/react-charts/gantt/',
+      title: 'Waterfall Chart',
+      href: 'https://github.com/mui/mui-x/issues/11318',
       premium: true,
     },
     {
-      title: 'Waterfall Chart',
-      href: 'https://github.com/mui/mui-x/issues/11318',
+      title: 'Gantt Chart',
+      href: '/x/react-charts/gantt/',
       premium: true,
     },
     {

docs/src/modules/components/demos/data-grid/DemoContainer.tsx

@@ -1,8 +1,19 @@
 import * as React from 'react';
 import { Theme, ThemeProvider, useTheme } from '@mui/material/styles';
 import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import GitHubIcon from '@mui/icons-material/GitHub';
 
-function DemoContainer({ theme, children }: { theme: Theme; children: React.ReactNode }) {
+function DemoContainer({
+  theme,
+  children,
+  href,
+}: {
+  theme: Theme;
+  children: React.ReactNode;
+  href: string;
+}) {
   const docsTheme = useTheme();
   const docsMode = docsTheme?.palette?.mode;
 
@@ -15,6 +26,37 @@ function DemoContainer({ theme, children }: { theme: Theme; children: React.Reac
 
   return (
     <ThemeProvider theme={modifiedTheme}>
+      <Stack direction="row" spacing={2} sx={{ mb: 2, justifyContent: 'end' }}>
+        <Button
+          startIcon={<GitHubIcon />}
+          sx={(containerTheme) => ({
+            padding: '5px 12px',
+            background: '#fff',
+            borderRadius: '10px',
+            whiteSpace: 'nowrap',
+            textTransform: 'none',
+            color: 'primary.main',
+            fontFamily: 'IBM Plex Sans, sans-serif',
+            border: '1px solid',
+            letterSpacing: '0.01em',
+            borderColor: 'divider',
+            boxShadow: '1px 1px 2px rgba(0, 0, 0, 0.1)',
+            ...containerTheme.applyStyles('dark', {
+              color: '#f2eff3',
+              background: '#1d2329',
+            }),
+            '&:hover': {
+              backgroundColor: '#faf8ff',
+              ...containerTheme.applyStyles('dark', {
+                backgroundColor: '#252d34',
+              }),
+            },
+          })}
+          href={href}
+        >
+          See on GitHub
+        </Button>
+      </Stack>
       <Box
         sx={{
           height: { xs: 'calc(100vh - 300px)', md: 'calc(100vh - 250px)' }, // TODO: Find a way to fill height without magic number,

docs/src/modules/components/demos/data-grid/Inventory/InventoryDashboard.tsx

@@ -236,7 +236,10 @@ function InventoryDashboard() {
   );
 
   return (
-    <DemoContainer theme={inventoryTheme}>
+    <DemoContainer
+      theme={inventoryTheme}
+      href="https://github.com/mui/mui-x/tree/master/docs/src/modules/components/demos/data-grid/Inventory"
+    >
       <ThemeProvider theme={inventoryTheme}>
         <Box
           sx={{