From 790afc45f1c59fa2cee23529f6176b7a569601e5 Mon Sep 17 00:00:00 2001
From: Abhishek Verma <abhishek.verma@gojek.com>
Date: Tue, 4 Jun 2024 10:48:18 +0530
Subject: [PATCH] feat(tooltip, listing): fixes and improvements (#44)

* feat(tooltip, listing): fixes and improvements

* feat(tooltip, listing): fixes and improvements
---
 .../apsara-ui/src/Listing/Filters/index.tsx     |  2 +-
 packages/apsara-ui/src/Listing/Listing.tsx      |  2 ++
 .../apsara-ui/src/Listing/Listing.types.tsx     |  1 +
 packages/apsara-ui/src/Tooltip/Tooltip.tsx      | 17 +++++++++++++----
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/packages/apsara-ui/src/Listing/Filters/index.tsx b/packages/apsara-ui/src/Listing/Filters/index.tsx
index f34b5baa..3c9ade53 100644
--- a/packages/apsara-ui/src/Listing/Filters/index.tsx
+++ b/packages/apsara-ui/src/Listing/Filters/index.tsx
@@ -93,7 +93,7 @@ const Filters = ({ filteredFieldData, label = "Filters", disabled = false, ...pr
 
     return (
         <StyledPopover open={open} onOpenChange={(open) => setOpen(open)}>
-            <PopoverTrigger asChild>
+            <PopoverTrigger asChild className="popover-trigger">
                 <span aria-label="Update dimensions">
                     <StyledBadge dot={!!filteredFieldDataLength}>
                         <FilterButton type="default" disabled={disabled}>
diff --git a/packages/apsara-ui/src/Listing/Listing.tsx b/packages/apsara-ui/src/Listing/Listing.tsx
index 7544c7b0..840f8679 100644
--- a/packages/apsara-ui/src/Listing/Listing.tsx
+++ b/packages/apsara-ui/src/Listing/Listing.tsx
@@ -15,6 +15,7 @@ function Listing<T>({
     renderHeader = null,
     renderBody = null,
     renderExtraFilters = null,
+    renderExtraItems = null,
     resourcePath = "/",
     calculateRowHeight,
     calculateColumnWidth,
@@ -58,6 +59,7 @@ function Listing<T>({
                     />
                 )}
                 {renderExtraFilters}
+                {renderExtraItems}
             </ListingSearch>
         );
     }
diff --git a/packages/apsara-ui/src/Listing/Listing.types.tsx b/packages/apsara-ui/src/Listing/Listing.types.tsx
index a1432f54..5a1d20ae 100644
--- a/packages/apsara-ui/src/Listing/Listing.types.tsx
+++ b/packages/apsara-ui/src/Listing/Listing.types.tsx
@@ -25,6 +25,7 @@ export interface ListingProps<T> {
     calculateRowHeight?: (index: number, defaultRowHeight: number) => number;
     calculateColumnWidth?: (index: number, defaultColumnWidth: number) => number;
     renderExtraFilters?: React.ReactNode;
+    renderExtraItems?: React.ReactNode;
     renderHeader?: React.ReactNode;
     renderBody?: React.ReactNode;
     rowClick?: (props: any) => any;
diff --git a/packages/apsara-ui/src/Tooltip/Tooltip.tsx b/packages/apsara-ui/src/Tooltip/Tooltip.tsx
index e8e49197..23937044 100644
--- a/packages/apsara-ui/src/Tooltip/Tooltip.tsx
+++ b/packages/apsara-ui/src/Tooltip/Tooltip.tsx
@@ -34,10 +34,19 @@ const Tooltip = ({
                 <RadixTooltip.Trigger asChild>
                     <span>{children}</span>
                 </RadixTooltip.Trigger>
-                <TooltipContent className="TooltipContent" sideOffset={5} side={placement} style={style} avoidCollisions={avoidCollisions} {...props}>
-                    {title}
-                    <RadixTooltip.Arrow className="TooltipArrow" />
-                </TooltipContent>
+                <RadixTooltip.Portal>
+                    <TooltipContent
+                        className="TooltipContent"
+                        sideOffset={5}
+                        side={placement}
+                        style={style}
+                        avoidCollisions={avoidCollisions}
+                        {...props}
+                    >
+                        {title}
+                        <RadixTooltip.Arrow className="TooltipArrow" />
+                    </TooltipContent>
+                </RadixTooltip.Portal>
             </RadixTooltip.Root>
         </RadixTooltip.Provider>
     );