From 04184ebe887d93758b1c558183c08e0698e18ff5 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 24 May 2024 11:21:37 +0300
Subject: [PATCH 1/4] Refactor `shortcuts` and `actionBar` slotProps to avoid
 legacy `ref` type issue

---
 .../src/PickersLayout/PickersLayout.types.ts    | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
index 32cb59af51f4..c7ea79e908dc 100644
--- a/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
+++ b/packages/x-date-pickers/src/PickersLayout/PickersLayout.types.ts
@@ -1,14 +1,17 @@
 import * as React from 'react';
 import { SxProps, Theme } from '@mui/material/styles';
 import { SlotComponentProps } from '@mui/base/utils';
-import { PickersActionBarProps } from '../PickersActionBar';
+import { PickersActionBar, PickersActionBarProps } from '../PickersActionBar';
 import { BaseToolbarProps, ExportedBaseToolbarProps } from '../internals/models/props/toolbar';
 import { BaseTabsProps, ExportedBaseTabsProps } from '../internals/models/props/tabs';
 import { UsePickerLayoutPropsResponseLayoutProps } from '../internals/hooks/usePicker/usePickerLayoutProps';
 import { PickersLayoutClasses } from './pickersLayoutClasses';
 import { DateOrTimeViewWithMeridiem, WrapperVariant } from '../internals/models/common';
 import { PickersShortcutsProps } from '../PickersShortcuts';
-import { ExportedPickersShortcutProps } from '../PickersShortcuts/PickersShortcuts';
+import {
+  ExportedPickersShortcutProps,
+  PickersShortcuts,
+} from '../PickersShortcuts/PickersShortcuts';
 import { PickerValidDate } from '../models';
 
 export interface ExportedPickersLayoutSlots<
@@ -56,20 +59,14 @@ export interface ExportedPickersLayoutSlotProps<
    * Props passed down to the action bar component.
    */
   actionBar?: SlotComponentProps<
-    React.ComponentType<
-      Omit<PickersActionBarProps, 'onAccept' | 'onClear' | 'onCancel' | 'onSetToday'>
-    >,
+    typeof PickersActionBar,
     {},
     PickersLayoutActionBarOwnerState<TValue, TDate, TView>
   >;
   /**
    * Props passed down to the shortcuts component.
    */
-  shortcuts?: SlotComponentProps<
-    React.ComponentType<PickersShortcutsProps<TValue>>,
-    {},
-    PickersShortcutsOwnerState<TValue>
-  >;
+  shortcuts?: SlotComponentProps<typeof PickersShortcuts, {}, PickersShortcutsOwnerState<TValue>>;
   /**
    * Props passed down to the layoutRoot component.
    */

From 063a1094de77f2a421efa81104a50561b0dbbed5 Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 24 May 2024 11:22:57 +0300
Subject: [PATCH 2/4] Refactor toolbar component type declaration

---
 .../components/PickersToolbarButton.tsx       | 52 ++++++++++---------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx b/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
index f49ced45e02c..17b44028ca76 100644
--- a/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
+++ b/packages/x-date-pickers/src/internals/components/PickersToolbarButton.tsx
@@ -38,30 +38,32 @@ const PickersToolbarButtonRoot = styled(Button, {
   textTransform: 'none',
 });
 
-export const PickersToolbarButton: React.FunctionComponent<PickersToolbarButtonProps> =
-  React.forwardRef(function PickersToolbarButton(inProps, ref) {
-    const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbarButton' });
-    const { align, className, selected, typographyClassName, value, variant, width, ...other } =
-      props;
+export const PickersToolbarButton = React.forwardRef(function PickersToolbarButton(
+  inProps: PickersToolbarButtonProps,
+  ref: React.Ref<HTMLButtonElement>,
+) {
+  const props = useThemeProps({ props: inProps, name: 'MuiPickersToolbarButton' });
+  const { align, className, selected, typographyClassName, value, variant, width, ...other } =
+    props;
 
-    const classes = useUtilityClasses(props);
+  const classes = useUtilityClasses(props);
 
-    return (
-      <PickersToolbarButtonRoot
-        data-mui-test="toolbar-button"
-        variant="text"
-        ref={ref}
-        className={clsx(className, classes.root)}
-        {...(width ? { sx: { width } } : {})}
-        {...other}
-      >
-        <PickersToolbarText
-          align={align}
-          className={typographyClassName}
-          variant={variant}
-          value={value}
-          selected={selected}
-        />
-      </PickersToolbarButtonRoot>
-    );
-  });
+  return (
+    <PickersToolbarButtonRoot
+      data-mui-test="toolbar-button"
+      variant="text"
+      ref={ref}
+      className={clsx(className, classes.root)}
+      {...(width ? { sx: { width } } : {})}
+      {...other}
+    >
+      <PickersToolbarText
+        align={align}
+        className={typographyClassName}
+        variant={variant}
+        value={value}
+        selected={selected}
+      />
+    </PickersToolbarButtonRoot>
+  );
+});

From a89fdb19172bf43caa9673763f7d423ba5b9ca9b Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 24 May 2024 11:58:48 +0300
Subject: [PATCH 3/4] Fix `textField` slotProps TS `ref` error

---
 packages/x-date-pickers-pro/src/models/fields.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/x-date-pickers-pro/src/models/fields.ts b/packages/x-date-pickers-pro/src/models/fields.ts
index 7bb292bc8e51..3f3b0c3d499b 100644
--- a/packages/x-date-pickers-pro/src/models/fields.ts
+++ b/packages/x-date-pickers-pro/src/models/fields.ts
@@ -9,9 +9,11 @@ import {
 } from '@mui/x-date-pickers/models';
 import { UseClearableFieldResponse } from '@mui/x-date-pickers/hooks';
 import { SxProps } from '@mui/material/styles';
+import TextField from '@mui/material/TextField';
+import { RangePosition } from './range';
 
 export interface RangeFieldSection extends FieldSection {
-  dateName: 'start' | 'end';
+  dateName: RangePosition;
 }
 
 export type FieldType = 'single-input' | 'multi-input';
@@ -86,9 +88,9 @@ export interface BaseMultiInputFieldProps<
       Record<string, any>
     >;
     textField?: SlotComponentProps<
-      React.ElementType<MultiInputFieldSlotTextFieldProps>,
+      typeof TextField,
       {},
-      { position?: 'start' | 'end' } & Record<string, any>
+      { position?: RangePosition } & Record<string, any>
     >;
   };
 }

From fbdb0ca9743fe87eac0a0c6cdf20933c05ea991f Mon Sep 17 00:00:00 2001
From: Lukas <llukas.tyla@gmail.com>
Date: Fri, 24 May 2024 14:55:07 +0300
Subject: [PATCH 4/4] Avoid "props object containing a "key" prop is being
 spread into JSX" error

---
 .../GridFilterInputMultipleSingleSelect.tsx   | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
index 1319523e7948..0e1674bb1255 100644
--- a/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
+++ b/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputMultipleSingleSelect.tsx
@@ -108,14 +108,18 @@ function GridFilterInputMultipleSingleSelect(props: GridFilterInputMultipleSingl
       onChange={handleChange}
       getOptionLabel={getOptionLabel}
       renderTags={(value, getTagProps) =>
-        value.map((option, index) => (
-          <rootProps.slots.baseChip
-            variant="outlined"
-            size="small"
-            label={getOptionLabel(option)}
-            {...getTagProps({ index })}
-          />
-        ))
+        value.map((option, index) => {
+          const { key, ...tagProps } = getTagProps({ index });
+          return (
+            <rootProps.slots.baseChip
+              key={key}
+              variant="outlined"
+              size="small"
+              label={getOptionLabel(option)}
+              {...tagProps}
+            />
+          );
+        })
       }
       renderInput={(params) => (
         <rootProps.slots.baseTextField