From 7c2d31913bbd9d30156ede24800f921d6b85ff98 Mon Sep 17 00:00:00 2001
From: Marco Schumacher <marco@schumacher.dev>
Date: Fri, 23 Dec 2022 11:13:30 +0100
Subject: [PATCH] feat: classNames for popover and its backdrop

---
 src/components/filterControl.tsx   | 14 +++++++++++++-
 src/theme/defaultTheme/popover.tsx | 12 +++++++++++-
 src/types.ts                       |  5 +++++
 3 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/components/filterControl.tsx b/src/components/filterControl.tsx
index d7578e1..ad36285 100644
--- a/src/components/filterControl.tsx
+++ b/src/components/filterControl.tsx
@@ -23,6 +23,10 @@ export function FilterControl<T>(): JSX.Element | null {
     const filterValue = state.filterValues.get(columnId);
     return filter !== undefined && filterValue !== undefined && filter.isActive(filterValue);
   });
+  const filterClassNames = table.useState((state) => {
+    const filter = state.filters.get(columnId);
+    return filter?.classNames;
+  });
   const filter = table.useState((state) => state.activeColumns.find((column) => column.id === columnId)?.filter);
 
   function reset() {
@@ -77,7 +81,15 @@ export function FilterControl<T>(): JSX.Element | null {
           e.stopPropagation();
         }}
       >
-        <Popover open hidden={!anchor} onClose={() => setAnchor(null)} anchorEl={anchor ?? document.body} css={cssVariables}>
+        <Popover
+          open
+          hidden={!anchor}
+          onClose={() => setAnchor(null)}
+          anchorEl={anchor ?? document.body}
+          css={cssVariables}
+          className={filterClassNames?.popover}
+          backdropClassName={filterClassNames?.popoverBackdrop}
+        >
           {filter}
         </Popover>
       </div>
diff --git a/src/theme/defaultTheme/popover.tsx b/src/theme/defaultTheme/popover.tsx
index 2675e66..5502037 100644
--- a/src/theme/defaultTheme/popover.tsx
+++ b/src/theme/defaultTheme/popover.tsx
@@ -8,7 +8,16 @@ const MAX_OFFSET = 20;
 
 export const PopoverContext = createContext({ depth: 0, visible: false });
 
-export const Popover: TableTheme['components']['Popover'] = ({ anchorEl, open, hidden, onClose, children, className, align }) => {
+export const Popover: TableTheme['components']['Popover'] = ({
+  anchorEl,
+  open,
+  hidden,
+  onClose,
+  children,
+  className,
+  backdropClassName,
+  align,
+}) => {
   const popper = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState<{ left: number; top: number }>();
 
@@ -73,6 +82,7 @@ export const Popover: TableTheme['components']['Popover'] = ({ anchorEl, open, h
       {createPortal(
         <>
           <div
+            className={backdropClassName}
             css={[
               {
                 position: 'fixed',
diff --git a/src/types.ts b/src/types.ts
index d32499e..3a5678a 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -62,6 +62,7 @@ export interface TableTheme<T = unknown> {
       onClose: () => void;
       children: ReactNode;
       className?: string;
+      backdropClassName?: string;
       align?: 'center' | 'left';
     }>;
     Badge: ComponentType<{ children: ReactNode; badgeContent: ReactNode }>;
@@ -352,6 +353,10 @@ export type CommonFilterProps<T, V, F, S extends SerializableValue> = {
    * @default true
    */
   persist?: boolean;
+  classNames?: {
+    popover?: string;
+    popoverBackdrop?: string;
+  };
 };
 
 export type FilterImplementation<T, V, F, S extends SerializableValue> = CommonFilterProps<T, V, F, S> & {