feat(tooltip, listing): fixes and improvements (#44)

* feat(tooltip, listing): fixes and improvements * feat(tooltip, listing): fixes and improvements
goto · Jun 4, 2024 · 790afc4 · 790afc4
1 parent 9761f9e
commit 790afc4
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
     );