[website] X component section improvements

docs/package.json

@@ -44,12 +44,12 @@
     "@mui/styles": "^5.11.13",
     "@mui/system": "^5.11.13",
     "@mui/types": "^7.2.3",
-    "@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.0.3",
+    "@mui/x-data-grid-generator": "6.0.3",
+    "@mui/x-data-grid-pro": "6.0.3",
+    "@mui/x-date-pickers": "6.0.3",
+    "@mui/x-date-pickers-pro": "6.0.3",
+    "@mui/x-license-pro": "6.0.3",
     "@react-spring/web": "^9.7.1",
     "@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,111 @@
 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 { PickersShortcutsItem, DateRange } from '@mui/x-date-pickers-pro';
 import { StaticDateRangePicker } from '@mui/x-date-pickers-pro/StaticDateRangePicker';
 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, startOfMonth, endOfMonth, addMonths } from 'date-fns';
+import { Chip, Divider, List, ListItem } from '@mui/material';
 
 const startDate = new Date();
 startDate.setDate(10);
 const endDate = new Date();
 endDate.setDate(endDate.getDate() + 28);
 
+function CustomRangeShortcuts(props: PickersShortcutsProps<DateRange<Dayjs>>) {
+  const { items, onChange, isValid } = props;
+
+  if (items == null || items.length === 0) {
+    return null;
+  }
+
+  const resolvedItems = items.map((item) => {
+    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,
+            pl: 0,
+            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: 'Current Month',
+      getValue: () => {
+        return [startOfMonth(today), endOfMonth(today)];
+      },
+    },
+    {
+      label: 'Next Month',
+      getValue: () => {
+        const nextMonth = addMonths(today, 1);
+        return [startOfMonth(nextMonth), endOfMonth(nextMonth)];
+      },
+    },
+    { label: 'Reset', getValue: () => [null, null] },
+  ];
+
   return (
     <Frame>
       <Frame.Demo sx={{ p: 2 }}>
@@ -71,13 +160,14 @@ export default function XDateRangeDemo() {
               onChange={(newValue) => {
                 setValue(newValue);
               }}
-              renderInput={(startProps, endProps) => (
-                <React.Fragment>
-                  <TextField {...startProps} />
-                  <Box sx={{ mx: 2 }}> to </Box>
-                  <TextField {...endProps} />
-                </React.Fragment>
-              )}
+              slots={{
+                shortcuts: CustomRangeShortcuts,
+              }}
+              slotProps={{
+                shortcuts: {
+                  items: shortcutsItems,
+                },
+              }}
             />
           </LocalizationProvider>
         </Paper>
@@ -87,20 +177,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' }}
+          >
+            Check the docs
+          </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>