[docs] Add the slots concept introduction page

docs/data/common-concepts/custom-components/CustomSlot.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomSlot() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker slots={{ openPickerIcon: FlightTakeoffIcon }} />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/CustomSlot.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomSlot() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker slots={{ openPickerIcon: FlightTakeoffIcon }} />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/CustomSlot.tsx.preview

@@ -0,0 +1 @@
+<DatePicker slots={{ openPickerIcon: FlightTakeoffIcon }} />

docs/data/common-concepts/custom-components/CustomSlotAndSlotProps.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomSlotAndSlotProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        slots={{ openPickerIcon: FlightTakeoffIcon }}
+        slotProps={{
+          openPickerIcon: {
+            color: 'primary',
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/CustomSlotAndSlotProps.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomSlotAndSlotProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        slots={{ openPickerIcon: FlightTakeoffIcon }}
+        slotProps={{
+          openPickerIcon: {
+            color: 'primary',
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/CustomSlotAndSlotProps.tsx.preview

@@ -0,0 +1,8 @@
+<DatePicker
+  slots={{ openPickerIcon: FlightTakeoffIcon }}
+  slotProps={{
+    openPickerIcon: {
+      color: 'primary',
+    },
+  }}
+/>

docs/data/common-concepts/custom-components/CustomSlotProps.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomSlotProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        slotProps={{
+          openPickerIcon: {
+            color: 'primary',
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/CustomSlotProps.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomSlotProps() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        slotProps={{
+          openPickerIcon: {
+            color: 'primary',
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/CustomSlotProps.tsx.preview

@@ -0,0 +1,7 @@
+<DatePicker
+  slotProps={{
+    openPickerIcon: {
+      color: 'primary',
+    },
+  }}
+/>

docs/data/common-concepts/custom-components/CustomSlotPropsCallback.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomSlotPropsCallback() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        slotProps={{
+          openPickerIcon: (ownerState) => ({
+            color: ownerState.open ? 'secondary' : 'primary',
+          }),
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+
+export default function CustomSlotPropsCallback() {
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DatePicker
+        slotProps={{
+          openPickerIcon: (ownerState) => ({
+            color: ownerState.open ? 'secondary' : 'primary',
+          }),
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/CustomSlotPropsCallback.tsx.preview

@@ -0,0 +1,7 @@
+<DatePicker
+  slotProps={{
+    openPickerIcon: (ownerState) => ({
+      color: ownerState.open ? 'secondary' : 'primary',
+    }),
+  }}
+/>

docs/data/common-concepts/custom-components/TypescriptCasting.js

@@ -0,0 +1,63 @@
+import * as React from 'react';
+
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateCalendar } from '@mui/x-date-pickers/DateCalendar';
+
+import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
+
+function DisplayWeekNumberToggle({ value, onChange }) {
+  return (
+    <FormControlLabel
+      sx={{ ml: 2 }}
+      control={
+        <Switch
+          checked={value}
+          onChange={(event) => onChange(event.target.checked)}
+        />
+      }
+      label="Display week number"
+    />
+  );
+}
+
+function CustomCalendarHeader({
+  displayWeekNumber,
+  setDisplayWeekNumber,
+  ...other
+}) {
+  return (
+    <Stack>
+      <DisplayWeekNumberToggle
+        value={displayWeekNumber}
+        onChange={setDisplayWeekNumber}
+      />
+      <PickersCalendarHeader {...other} />
+    </Stack>
+  );
+}
+
+export default function TypescriptCasting() {
+  const [displayWeekNumber, setDisplayWeekNumber] = React.useState(false);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateCalendar
+        displayWeekNumber={displayWeekNumber}
+        // Cast the custom component to the type expected by the X component
+        slots={{
+          calendarHeader: CustomCalendarHeader,
+        }}
+        slotProps={{
+          calendarHeader: {
+            displayWeekNumber,
+            setDisplayWeekNumber,
+          },
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/TypescriptCasting.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { Dayjs } from 'dayjs';
+import Stack from '@mui/material/Stack';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import {
+  DateCalendar,
+  DateCalendarSlots,
+  DateCalendarSlotProps,
+} from '@mui/x-date-pickers/DateCalendar';
+import { PropsFromSlot } from '@mui/x-date-pickers/models';
+import { PickersCalendarHeader } from '@mui/x-date-pickers/PickersCalendarHeader';
+
+function DisplayWeekNumberToggle({
+  value,
+  onChange,
+}: {
+  value: boolean;
+  onChange: (value: boolean) => void;
+}) {
+  return (
+    <FormControlLabel
+      sx={{ ml: 2 }}
+      control={
+        <Switch
+          checked={value}
+          onChange={(event) => onChange(event.target.checked)}
+        />
+      }
+      label="Display week number"
+    />
+  );
+}
+
+interface CustomCalendarHeaderProps
+  extends PropsFromSlot<DateCalendarSlots<Dayjs>['calendarHeader']> {
+  displayWeekNumber: boolean;
+  setDisplayWeekNumber: (displayWeekNumber: boolean) => void;
+}
+
+function CustomCalendarHeader({
+  displayWeekNumber,
+  setDisplayWeekNumber,
+  ...other
+}: CustomCalendarHeaderProps) {
+  return (
+    <Stack>
+      <DisplayWeekNumberToggle
+        value={displayWeekNumber}
+        onChange={setDisplayWeekNumber}
+      />
+      <PickersCalendarHeader {...other} />
+    </Stack>
+  );
+}
+
+export default function TypescriptCasting() {
+  const [displayWeekNumber, setDisplayWeekNumber] = React.useState(false);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <DateCalendar
+        displayWeekNumber={displayWeekNumber}
+        // Cast the custom component to the type expected by the X component
+        slots={{
+          calendarHeader:
+            CustomCalendarHeader as DateCalendarSlots<Dayjs>['calendarHeader'],
+        }}
+        slotProps={{
+          calendarHeader: {
+            displayWeekNumber,
+            setDisplayWeekNumber,
+          } as DateCalendarSlotProps<Dayjs>['calendarHeader'],
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

docs/data/common-concepts/custom-components/TypescriptCasting.tsx.preview

@@ -0,0 +1,14 @@
+<DateCalendar
+  displayWeekNumber={displayWeekNumber}
+  // Cast the custom component to the type expected by the X component
+  slots={{
+    calendarHeader:
+      CustomCalendarHeader as DateCalendarSlots<Dayjs>['calendarHeader'],
+  }}
+  slotProps={{
+    calendarHeader: {
+      displayWeekNumber,
+      setDisplayWeekNumber,
+    } as DateCalendarSlotProps<Dayjs>['calendarHeader'],
+  }}
+/>