feat: classNames for popover and its backdrop

schummar · Dec 23, 2022 · 7c2d319 · 7c2d319
1 parent 23e4370
commit 7c2d319
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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> & {