[website] X component section improvements (#36598)

Co-authored-by: Jose Rodolfo Freitas <[email protected]>
Co-authored-by: Marija Najdova <[email protected]>

docs/data/material/components/table/DataTable.js

@@ -40,8 +40,7 @@ export default function DataTable() {
       <DataGrid
         rows={rows}
         columns={columns}
-        pageSize={5}
-        rowsPerPageOptions={[5]}
+        paginationModel={{ page: 0, pageSize: 5 }}
         checkboxSelection
       />
     </div>

docs/data/material/components/table/DataTable.tsx

@@ -40,8 +40,7 @@ export default function DataTable() {
       <DataGrid
         rows={rows}
         columns={columns}
-        pageSize={5}
-        rowsPerPageOptions={[5]}
+        paginationModel={{ page: 0, pageSize: 5 }}
         checkboxSelection
       />
     </div>

docs/data/material/components/table/DataTable.tsx.preview

@@ -1,7 +1,6 @@
 <DataGrid
   rows={rows}
   columns={columns}
-  pageSize={5}
-  rowsPerPageOptions={[5]}
+  paginationModel={{ page: 0, pageSize: 5 }}
   checkboxSelection
 />

docs/package.json

@@ -44,12 +44,12 @@
     "@mui/styles": "^5.12.0",
     "@mui/system": "^5.12.1",
     "@mui/types": "^7.2.4",
-    "@mui/x-data-grid": "6.0.0-alpha.14",
-    "@mui/x-data-grid-generator": "6.0.0-alpha.14",
-    "@mui/x-data-grid-pro": "6.0.0-alpha.14",
-    "@mui/x-date-pickers": "6.0.0-alpha.14",
-    "@mui/x-date-pickers-pro": "6.0.0-alpha.14",
-    "@mui/x-license-pro": "6.0.0-alpha.14",
+    "@mui/x-data-grid": "6.2.0",
+    "@mui/x-data-grid-generator": "6.2.0",
+    "@mui/x-data-grid-pro": "6.2.0",
+    "@mui/x-date-pickers": "6.2.0",
+    "@mui/x-date-pickers-pro": "6.2.0",
+    "@mui/x-license-pro": "6.0.4",
     "@react-spring/web": "^9.7.2",
     "@trendmicro/react-interpolate": "^0.5.5",
     "@types/autosuggest-highlight": "^3.2.0",

docs/src/components/action/Frame.tsx

@@ -49,12 +49,12 @@ function Frame(props: BoxProps) {
         display: 'flex',
         flexDirection: 'column',
         '& > div:first-of-type': {
-          borderTopLeftRadius: '10px',
-          borderTopRightRadius: '10px',
+          borderTopLeftRadius: '12px',
+          borderTopRightRadius: '12px',
         },
         '& > div:last-of-type': {
-          borderBottomLeftRadius: '10px',
-          borderBottomRightRadius: '10px',
+          borderBottomLeftRadius: '12px',
+          borderBottomRightRadius: '12px',
         },
         ...props.sx,
       }}

docs/src/components/productX/XComponents.tsx

@@ -81,7 +81,7 @@ function PrefetchImages() {
 }
 
 export default function XComponents() {
-  const [demo, setDemo] = React.useState(DEMOS[0]);
+  const [demo, setDemo] = React.useState(DEMOS[1]);
   const icons = {
     [DEMOS[0]]: <TableChartRounded fontSize="small" />,
     [DEMOS[1]]: <DateRangeRounded fontSize="small" />,

docs/src/components/productX/XDateRangeDemo.tsx

@@ -1,22 +1,99 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import Chip from '@mui/material/Chip';
+import Button from '@mui/material/Button';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
-import TextField from '@mui/material/TextField';
-import { DateRange } from '@mui/x-date-pickers-pro/DateRangePicker';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Frame from 'docs/src/components/action/Frame';
 import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
+import { PickersShortcutsItem, PickersShortcutsProps, DateRange } from '@mui/x-date-pickers-pro';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
-import Frame from 'docs/src/components/action/Frame';
+import { startOfWeek, endOfWeek, subDays } from 'date-fns';
 
 const startDate = new Date();
 startDate.setDate(10);
 const endDate = new Date();
 endDate.setDate(endDate.getDate() + 28);
 
+function CustomRangeShortcuts(props: PickersShortcutsProps<DateRange<Date>>) {
+  const { items, onChange, isValid } = props;
+
+  if (items == null || items.length === 0) {
+    return null;
+  }
+
+  const resolvedItems = items.map((item: PickersShortcutsItem<DateRange<Date>>) => {
+    const newValue = item.getValue({ isValid });
+
+    return {
+      label: item.label,
+      onClick: () => {
+        onChange(newValue);
+      },
+      disabled: !isValid(newValue),
+    };
+  });
+
+  return (
+    <Box
+      sx={{
+        gridRow: 1,
+        gridColumn: 2,
+      }}
+    >
+      <List
+        dense
+        sx={(theme) => ({
+          display: 'flex',
+          px: theme.spacing(4),
+          '& .MuiListItem-root': {
+            py: 2,
+            pr: theme.spacing(1),
+          },
+        })}
+      >
+        {resolvedItems.map((item) => {
+          return (
+            <ListItem key={item.label}>
+              <Chip {...item} />
+            </ListItem>
+          );
+        })}
+      </List>
+      <Divider />
+    </Box>
+  );
+}
+
 export default function XDateRangeDemo() {
-  const [value, setValue] = React.useState<DateRange<Date>>([startDate, endDate]);
+  const today = new Date();
+  const shortcutsItems: PickersShortcutsItem<DateRange<Date>>[] = [
+    {
+      label: 'This Week',
+      getValue: () => {
+        return [startOfWeek(today), endOfWeek(today)];
+      },
+    },
+    {
+      label: 'Last Week',
+      getValue: () => {
+        const prevWeek = subDays(today, 7);
+        return [startOfWeek(prevWeek), endOfWeek(prevWeek)];
+      },
+    },
+    {
+      label: 'Last 7 Days',
+      getValue: () => {
+        return [subDays(today, 7), today];
+      },
+    },
+    { label: 'Reset', getValue: () => [null, null] },
+  ];
+
   return (
     <Frame>
       <Frame.Demo sx={{ p: 2 }}>
@@ -67,17 +144,15 @@ export default function XDateRangeDemo() {
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <StaticDateRangePicker
               displayStaticWrapperAs="desktop"
-              value={value}
-              onChange={(newValue) => {
-                setValue(newValue);
+              value={[startDate, endDate]}
+              slots={{
+                shortcuts: CustomRangeShortcuts,
+              }}
+              slotProps={{
+                shortcuts: {
+                  items: shortcutsItems,
+                },
               }}
-              renderInput={(startProps, endProps) => (
-                <React.Fragment>
-                  <TextField {...startProps} />
-                  <Box sx={{ mx: 2 }}> to </Box>
-                  <TextField {...endProps} />
-                </React.Fragment>
-              )}
             />
           </LocalizationProvider>
         </Paper>
@@ -87,20 +162,20 @@ export default function XDateRangeDemo() {
           sx={{
             display: 'flex',
             alignItems: 'center',
-            lineHeight: 1,
-            mb: 0.5,
+            justifyContent: 'space-between',
           }}
         >
           <Typography variant="body2" fontWeight="bold" sx={{ mr: 1 }}>
-            Available now for your project.
+            🎉&nbsp;&nbsp;&nbsp;Stable version available now for your project!
           </Typography>
-          <Chip
-            label="See docs"
-            size="small"
-            href="/x/react-date-pickers/date-range-picker/"
+          <Button
+            variant="outlined"
+            href="/x/react-Date-pickers/Date-range-picker/"
             component="a"
-            sx={{ fontWeight: 500, cursor: 'pointer' }}
-          />
+            sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300' }}
+          >
+            View more demos
+          </Button>
         </Box>
       </Frame.Info>
     </Frame>

docs/src/components/productX/XGridFullDemo.tsx

@@ -63,6 +63,7 @@ function SettingsPanel(props: GridToolbarContainerProps) {
       sx={{
         flexDirection: { xs: 'column', sm: 'row' },
         alignContent: { xs: 'start', sm: 'center' },
+        alignItems: { xs: 'start', sm: 'center' },
         '& > *': {
           '&:not(:first-child)': { ml: { xs: 0, sm: 1 } },
           '&:last-child': { ml: 'auto' },
@@ -102,7 +103,11 @@ function SettingsPanel(props: GridToolbarContainerProps) {
           <MenuItem value={1000}>{Number(1000).toLocaleString()}</MenuItem>
         </Select>
       </FormControl>
-      <Button onClick={handleApplyChanges} sx={{ mt: { xs: 2, sm: 0 } }}>
+      <Button
+        variant="outlined"
+        onClick={handleApplyChanges}
+        sx={{ mt: { xs: 2, sm: 0 }, color: 'primary.300', height: 'fit-content' }}
+      >
         Apply changes
       </Button>
     </FormGroup>
@@ -222,7 +227,7 @@ export default function XGridFullDemo() {
           />
         </Paper>
       </Frame.Demo>
-      <Frame.Info data-mui-color-scheme="dark" sx={{ p: 1 }}>
+      <Frame.Info data-mui-color-scheme="dark" sx={{ pl: 1, pr: 2, py: 2 }}>
         <SettingsPanel onApply={handleApplyClick} size={size} type={type} />
       </Frame.Info>
     </Frame>