From cdc8bac634608efb8832da0e3ae561204a1502bf Mon Sep 17 00:00:00 2001
From: Julia Wegmayr <julia.wegmayr@vivid-planet.com>
Date: Mon, 29 Jan 2024 09:20:25 +0100
Subject: [PATCH] use a popover slot to allow overriding styles with slotProps
 and sx

---
 .changeset/tender-dots-warn.md                     |  7 +++++++
 .../FilterBarPopoverFilter.tsx                     | 14 ++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/tender-dots-warn.md

diff --git a/.changeset/tender-dots-warn.md b/.changeset/tender-dots-warn.md
new file mode 100644
index 0000000000..91caa1f8ed
--- /dev/null
+++ b/.changeset/tender-dots-warn.md
@@ -0,0 +1,7 @@
+---
+"@comet/admin": major
+---
+
+Remove the `paper` class key
+
+Instead of using `styleOverrides` for `paper` in the theme, use the `slotProps` and `sx` props.
diff --git a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx
index 516a5a4e97..e141421d8b 100644
--- a/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx
+++ b/packages/admin/admin/src/table/filterbar/filterBarPopoverFilter/FilterBarPopoverFilter.tsx
@@ -1,5 +1,5 @@
 import { Check, Reset } from "@comet/admin-icons";
-import { Button, ButtonProps, ComponentsOverrides, Popover, Theme } from "@mui/material";
+import { Button, ButtonProps, ComponentsOverrides, Popover as MuiPopover, Theme } from "@mui/material";
 import { css, styled, useThemeProps } from "@mui/material/styles";
 import { ThemedComponentBaseProps } from "helpers/ThemedComponentBaseProps";
 import * as React from "react";
@@ -15,7 +15,7 @@ import { FilterBarButton, FilterBarButtonProps } from "../filterBarButton/Filter
 /**
  * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
  */
-export type FilterBarPopoverFilterClassKey = "root" | "fieldBarWrapper" | "popoverContentContainer" | "buttonsContainer";
+export type FilterBarPopoverFilterClassKey = "root" | "fieldBarWrapper" | "popoverContentContainer" | "buttonsContainer" | "popover";
 
 const Root = styled("div", {
     name: "CometAdminFilterBarPopoverFilter",
@@ -80,6 +80,14 @@ const ButtonsContainer = styled("div", {
     `,
 );
 
+const Popover = styled(MuiPopover, {
+    name: "CometAdminFilterBarPopoverFilter",
+    slot: "popover",
+    overridesResolver(_, styles) {
+        return [styles.popover];
+    },
+})();
+
 /**
  * @deprecated Use MUI X Data Grid in combination with `useDataGridRemote` instead.
  */
@@ -90,6 +98,7 @@ export interface FilterBarPopoverFilterProps
         popoverContentContainer: "div";
         buttonsContainer: "div";
         contentContainer: "div";
+        popover: typeof Popover;
     }> {
     label: string;
     dirtyFieldsBadge?: React.ComponentType<FilterBarActiveFilterBadgeProps>;
@@ -149,6 +158,7 @@ export function FilterBarPopoverFilter(inProps: React.PropsWithChildren<FilterBa
                             <Popover
                                 open={open}
                                 anchorEl={anchorEl}
+                                {...slotProps?.popover}
                                 onClose={() => {
                                     setAnchorEl(null);
                                     handleSubmit();