Merge branch 'enabledAccessibleFieldDOMStructure' into remove-tdate

mui · Oct 18, 2024 · e9d3833 · e9d3833
2 parents 25f4e36 + bf76526
commit e9d3833
Show file tree

Hide file tree

Showing 162 changed files with 5,105 additions and 595 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/changelogOld/CHANGELOG.v6.md b/changelogOld/CHANGELOG.v6.md
@@ -1485,7 +1485,7 @@ Same changes as in `@mui/[email protected]`, plus:
 - [docs] Fix charts demo using too deep import (#10263) @LukasTy
 - [docs] Fix `e.g.` typo @oliviertassinari
 - [docs] Fix npm package indentation @oliviertassinari
-- [docs] Fix typo in tree view docs @oliviertassinari
+- [docs] Fix typo in Tree View docs @oliviertassinari
 - [docs] Improve the week picker example (#8257) @flaviendelangle
 - [docs] Include code links in the Data Grid demo (#10219) @cherniavskii
 - [docs] Polish page for SEO (#10216) @oliviertassinari
@@ -1546,7 +1546,7 @@ Same changes as in `@mui/[email protected]`.
 
 - [docs] Add `DemoContainer` and `DemoItem` JSDoc (#10186) @LukasTy
 - [docs] Add link to `custom layout` page (#10184) @LukasTy
-- [docs] Add tree view nav item (#10181) @LukasTy
+- [docs] Add Tree View nav item (#10181) @LukasTy
 - [docs] Fix wrong chart tooltip reference (#10169) @oliviertassinari
 - [docs] Improve chart SEO (#10170) @oliviertassinari
 - [docs] Precise expired license key condition (#10165) @oliviertassinari
@@ -1748,7 +1748,7 @@ _Aug 4, 2023_
 
 We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
 
-- ⌚️ Move the tree view component from `@mui/lab` package
+- ⌚️ Move the Tree View component from `@mui/lab` package
 
   The `<TreeView />` component has been moved to the MUI X repository.
   It is now accessible from its own package: `@mui/x-tree-view`.
@@ -1804,7 +1804,7 @@ Same changes as in `@mui/[email protected]`.
 ### Tree View / `@mui/[email protected]`
 
 - [TreeView] Add missing exported types (#9862) @flaviendelangle
-- [TreeView] Add tree view to changelog generator script (#9903) @MBilalShafi
+- [TreeView] Add Tree View to changelog generator script (#9903) @MBilalShafi
 - [TreeView] Create the package on the X repository (#9798) @flaviendelangle
 - [TreeView] Improve props typing (#9855) @flaviendelangle
 

diff --git a/docs/data/common-concepts/custom-components/custom-components.md b/docs/data/common-concepts/custom-components/custom-components.md
@@ -11,7 +11,7 @@ This is the role of all the `baseXXX` component on the Data Grid component (`bas
 These slots receive props that should be as generic as possible so that it is easy to interface any other design system.
 
 Other slots allow you to override parts of the MUI X UI components with a custom UI built specifically for this component.
-This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the `RichTreeView` component.
+This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the Rich Tree View component.
 These slots receive props specific to this part of the UI and will most likely not be re-use throughout your application.
 
 ## Basic usage

diff --git a/docs/data/data-grid/list-view/ListView.js b/docs/data/data-grid/list-view/ListView.js
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import Box from '@mui/material/Box';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Stack from '@mui/material/Stack';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import MessageIcon from '@mui/icons-material/Message';
+
+function MessageAction(params) {
+  const handleMessage = () => {
+    console.log(`send message to ${params.row.phone}`);
+  };
+  return (
+    <IconButton aria-label="Message" onClick={handleMessage}>
+      <MessageIcon />
+    </IconButton>
+  );
+}
+
+function ListViewCell(params) {
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        alignItems: 'center',
+        height: '100%',
+        gap: 2,
+      }}
+    >
+      <Avatar sx={{ width: 32, height: 32, backgroundColor: params.row.avatar }} />
+      <Stack sx={{ flexGrow: 1 }}>
+        <Typography variant="body2" fontWeight={500}>
+          {params.row.name}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {params.row.position}
+        </Typography>
+      </Stack>
+      <MessageAction {...params} />
+    </Stack>
+  );
+}
+
+const listColDef = {
+  field: 'listColumn',
+  renderCell: ListViewCell,
+};
+
+const VISIBLE_FIELDS = ['avatar', 'name', 'position'];
+
+export default function ListView() {
+  const [isListView, setIsListView] = React.useState(true);
+
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 20,
+    visibleFields: VISIBLE_FIELDS,
+  });
+
+  const columns = React.useMemo(() => {
+    return [
+      ...data.columns,
+      {
+        type: 'actions',
+        field: 'actions',
+        width: 75,
+        getActions: (params) => [<MessageAction {...params} />],
+      },
+    ];
+  }, [data.columns]);
+
+  const rowHeight = isListView ? 64 : 52;
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={isListView}
+            onChange={(event) => setIsListView(event.target.checked)}
+          />
+        }
+        label="Enable list view"
+      />
+      <Box
+        sx={{
+          width: '100%',
+          maxWidth: isListView ? 360 : undefined,
+          height: 600,
+          margin: '0 auto',
+        }}
+      >
+        <DataGridPro
+          {...data}
+          columns={columns}
+          rowHeight={rowHeight}
+          unstable_listView={isListView}
+          unstable_listColumn={listColDef}
+        />
+      </Box>
+    </Box>
+  );
+}
diff --git a/docs/data/data-grid/list-view/ListView.tsx b/docs/data/data-grid/list-view/ListView.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  GridRenderCellParams,
+  GridListColDef,
+  GridColDef,
+  GridRowParams,
+} from '@mui/x-data-grid-pro';
+import Box from '@mui/material/Box';
+import { useDemoData } from '@mui/x-data-grid-generator';
+import Stack from '@mui/material/Stack';
+import Avatar from '@mui/material/Avatar';
+import Typography from '@mui/material/Typography';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import IconButton from '@mui/material/IconButton';
+import MessageIcon from '@mui/icons-material/Message';
+
+function MessageAction(params: Pick<GridRowParams, 'row'>) {
+  const handleMessage = () => {
+    console.log(`send message to ${params.row.phone}`);
+  };
+  return (
+    <IconButton aria-label="Message" onClick={handleMessage}>
+      <MessageIcon />
+    </IconButton>
+  );
+}
+
+function ListViewCell(params: GridRenderCellParams) {
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        alignItems: 'center',
+        height: '100%',
+        gap: 2,
+      }}
+    >
+      <Avatar sx={{ width: 32, height: 32, backgroundColor: params.row.avatar }} />
+      <Stack sx={{ flexGrow: 1 }}>
+        <Typography variant="body2" fontWeight={500}>
+          {params.row.name}
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          {params.row.position}
+        </Typography>
+      </Stack>
+      <MessageAction {...params} />
+    </Stack>
+  );
+}
+
+const listColDef: GridListColDef = {
+  field: 'listColumn',
+  renderCell: ListViewCell,
+};
+
+const VISIBLE_FIELDS = ['avatar', 'name', 'position'];
+
+export default function ListView() {
+  const [isListView, setIsListView] = React.useState(true);
+
+  const { data } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 20,
+    visibleFields: VISIBLE_FIELDS,
+  });
+
+  const columns: GridColDef[] = React.useMemo(() => {
+    return [
+      ...data.columns,
+      {
+        type: 'actions',
+        field: 'actions',
+        width: 75,
+        getActions: (params) => [<MessageAction {...params} />],
+      },
+    ];
+  }, [data.columns]);
+
+  const rowHeight = isListView ? 64 : 52;
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <FormControlLabel
+        control={
+          <Checkbox
+            checked={isListView}
+            onChange={(event) => setIsListView(event.target.checked)}
+          />
+        }
+        label="Enable list view"
+      />
+      <Box
+        sx={{
+          width: '100%',
+          maxWidth: isListView ? 360 : undefined,
+          height: 600,
+          margin: '0 auto',
+        }}
+      >
+        <DataGridPro
+          {...data}
+          columns={columns}
+          rowHeight={rowHeight}
+          unstable_listView={isListView}
+          unstable_listColumn={listColDef}
+        />
+      </Box>
+    </Box>
+  );
+}