From 992174ef1cb84d9f4f411a9dcd4a33212c128378 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 17 Aug 2024 23:57:44 +0200
Subject: [PATCH 1/2] [docs] Fix pickers link 301

---
 .../components/overview/CommunityOrPro.tsx    |  6 ++--
 .../modules/components/overview/InfoCard.tsx  | 33 +++++++++++--------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/docs/src/modules/components/overview/CommunityOrPro.tsx b/docs/src/modules/components/overview/CommunityOrPro.tsx
index 7e6dcbf3de21..835491349883 100644
--- a/docs/src/modules/components/overview/CommunityOrPro.tsx
+++ b/docs/src/modules/components/overview/CommunityOrPro.tsx
@@ -40,7 +40,7 @@ export default function CommunityOrPro() {
 
           <Button
             size="small"
-            href="/x/introduction/licensing"
+            href="/x/introduction/licensing/"
             endIcon={<ArrowForwardIcon />}
             sx={{ width: 'fit-content' }}
           >
@@ -60,7 +60,7 @@ export default function CommunityOrPro() {
                 'Free forever under an MIT license. Includes Date Pickers, Time Pickers, and Date Time Pickers.',
               ]}
               backgroundColor="subtle"
-              link="/pricing"
+              link="/pricing/"
             />
           </Box>
           <Box sx={{ flexBasis: '50%' }}>
@@ -71,7 +71,7 @@ export default function CommunityOrPro() {
                 'Requires a commercial license. Includes all Community components plus the Date and Time Range Pickers.',
               ]}
               backgroundColor="subtle"
-              link="/pricing"
+              link="/pricing/"
             />
           </Box>
         </Stack>
diff --git a/docs/src/modules/components/overview/InfoCard.tsx b/docs/src/modules/components/overview/InfoCard.tsx
index aaaebb419a61..c13bbfec8cd4 100644
--- a/docs/src/modules/components/overview/InfoCard.tsx
+++ b/docs/src/modules/components/overview/InfoCard.tsx
@@ -6,23 +6,24 @@ import Stack from '@mui/material/Stack';
 import Paper from '@mui/material/Paper';
 
 type InfoCardProps = {
-  title: string;
-  description?: string | string[];
-  icon?: React.ReactNode;
-  onClick?: () => void;
   active?: boolean;
   backgroundColor?: 'gradient' | 'subtle';
+  description?: string | string[];
+  icon?: React.ReactNode;
   link?: string;
+  onClick?: () => void;
+  title: string;
 };
-export default function InfoCard({
-  title,
-  description,
-  icon: Icon,
-  onClick,
-  active,
-  backgroundColor = 'gradient',
-  link,
-}: InfoCardProps) {
+export default function InfoCard(props: InfoCardProps) {
+  const {
+    active,
+    backgroundColor = 'gradient',
+    description,
+    icon: Icon,
+    link,
+    onClick,
+    title,
+  } = props;
   const clickable = Boolean(onClick);
 
   return (
@@ -78,7 +79,11 @@ export default function InfoCard({
         }),
       })}
     >
-      <Stack direction="row" spacing={2} sx={{ mb: description ? 2 : 0, width: '100%' }}>
+      <Stack
+        direction="row"
+        spacing={2}
+        sx={{ mb: description ? 2 : 0, width: '100%', alignItems: 'center' }}
+      >
         {Icon}
         <Typography
           gutterBottom

From 28680d74f552ad713cbbfce4c2054b6b543b5a42 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 18 Aug 2024 00:02:07 +0200
Subject: [PATCH 2/2] [pickers][docs] Fix missing leading slashes in URLs

---
 .../components/overview/CommunityOrPro.tsx    |  4 +--
 .../overview/Internationalization.tsx         |  6 ++--
 .../modules/components/overview/Keyboard.tsx  | 33 +++++++++----------
 3 files changed, 21 insertions(+), 22 deletions(-)

diff --git a/docs/src/modules/components/overview/CommunityOrPro.tsx b/docs/src/modules/components/overview/CommunityOrPro.tsx
index 835491349883..3e6dc197bf71 100644
--- a/docs/src/modules/components/overview/CommunityOrPro.tsx
+++ b/docs/src/modules/components/overview/CommunityOrPro.tsx
@@ -60,7 +60,7 @@ export default function CommunityOrPro() {
                 'Free forever under an MIT license. Includes Date Pickers, Time Pickers, and Date Time Pickers.',
               ]}
               backgroundColor="subtle"
-              link="/pricing/"
+              link="https://mui.com/pricing/"
             />
           </Box>
           <Box sx={{ flexBasis: '50%' }}>
@@ -71,7 +71,7 @@ export default function CommunityOrPro() {
                 'Requires a commercial license. Includes all Community components plus the Date and Time Range Pickers.',
               ]}
               backgroundColor="subtle"
-              link="/pricing/"
+              link="https://mui.com/pricing/"
             />
           </Box>
         </Stack>
diff --git a/docs/src/modules/components/overview/Internationalization.tsx b/docs/src/modules/components/overview/Internationalization.tsx
index a78b12fb5349..b0f898001d8a 100644
--- a/docs/src/modules/components/overview/Internationalization.tsx
+++ b/docs/src/modules/components/overview/Internationalization.tsx
@@ -112,7 +112,7 @@ function TimezonesDemo() {
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoWrapper link="/x/react-date-pickers/timezone">
+      <DemoWrapper link="/x/react-date-pickers/timezone/">
         <Stack
           spacing={2}
           flexGrow={1}
@@ -230,7 +230,7 @@ function LanguagesDemo() {
             selectedLanguage={selectedLanguage}
           />
         }
-        link="/x/react-date-pickers/localization"
+        link="/x/react-date-pickers/localization/"
       >
         <ThemeProvider theme={theme}>
           <Stack
@@ -290,7 +290,7 @@ function ValidationDemo() {
 
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoWrapper link="/x/react-date-pickers/validation">
+      <DemoWrapper link="/x/react-date-pickers/validation/">
         <ThemeProvider theme={theme}>
           <Stack
             spacing={2}
diff --git a/docs/src/modules/components/overview/Keyboard.tsx b/docs/src/modules/components/overview/Keyboard.tsx
index 78ab99afc94f..3d9fe387525c 100644
--- a/docs/src/modules/components/overview/Keyboard.tsx
+++ b/docs/src/modules/components/overview/Keyboard.tsx
@@ -316,11 +316,11 @@ export function KeyboardSvg({ selectedKey, handleKeySelection }: KeyboardSvgProp
                         selectedKey.key.toLowerCase() === label.toLowerCase() &&
                         selectedKey.location === location,
                     })}
-                    onMouseDown={(e) => {
+                    onMouseDown={(event) => {
                       if (shouldSelect) {
-                        e.preventDefault();
+                        event.preventDefault();
 
-                        handleKeySelection(e, {
+                        handleKeySelection(event, {
                           key: label,
                           location: location || 0,
                           code: code || label,
@@ -328,9 +328,9 @@ export function KeyboardSvg({ selectedKey, handleKeySelection }: KeyboardSvgProp
                         });
                       }
                     }}
-                    onMouseUp={(e) => {
+                    onMouseUp={(event) => {
                       if (shouldSelect) {
-                        handleKeySelection(e, null);
+                        handleKeySelection(event, null);
                       }
                     }}
                   >
@@ -370,12 +370,12 @@ export function KeyboardSvg({ selectedKey, handleKeySelection }: KeyboardSvgProp
               className={clsx(key, 'key-root', {
                 selected: selectedKey && selectedKey.key.toLowerCase() === key.toLowerCase(),
               })}
-              onMouseDown={(e) => {
-                e.preventDefault();
-                handleKeySelection(e, { key, location, code, keyCode });
+              onMouseDown={(event) => {
+                event.preventDefault();
+                handleKeySelection(event, { key, location, code, keyCode });
               }}
-              onMouseUp={(e) => {
-                handleKeySelection(e, null);
+              onMouseUp={(event) => {
+                handleKeySelection(event, null);
               }}
             >
               <KeyRectangle
@@ -400,7 +400,7 @@ type SelectedKey = {
   code?: string;
   keyCode?: number;
 };
-type HandleKeySelection = (e: React.SyntheticEvent, key: SelectedKey | null) => void;
+type HandleKeySelection = (event: React.SyntheticEvent, key: SelectedKey | null) => void;
 
 export default function Keyboard() {
   const [selectedKey, setSelectedKey] = React.useState<SelectedKey | null>(null);
@@ -463,10 +463,9 @@ export default function Keyboard() {
             }
             description="The MUI X Date Pickers feature advanced keyboard support that's compliant with WCAG and WAI-ARIA standards, so users who require assistive technology can navigate your interface with ease."
           />
-
           <Button
             size="small"
-            href="/x/react-date-pickers/accessibility"
+            href="/x/react-date-pickers/accessibility/"
             endIcon={<ArrowForwardIcon />}
             sx={{ width: 'fit-content' }}
           >
@@ -478,11 +477,11 @@ export default function Keyboard() {
             <DateField
               defaultValue={dayjs('12/12/2023')}
               ref={ref}
-              onKeyDown={(e: React.KeyboardEvent) => {
+              onKeyDown={(event: React.KeyboardEvent) => {
                 setSelectedKey({
-                  key: e.key,
-                  code: e.code,
-                  location: e.location,
+                  key: event.key,
+                  code: event.code,
+                  location: event.location,
                 });
               }}
               onKeyUp={() => {