fix: minor refactoring changes for state dropdowns

packages/ui/src/tooltip/tooltip.tsx

@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
 import { Tooltip2 } from "@blueprintjs/popover2";
+import React, { useEffect, useRef, useState } from "react";
 // helpers
 import { cn } from "../../helpers";
 
@@ -23,7 +23,6 @@ export type TPosition =
 interface ITooltipProps {
   tooltipHeading?: string;
   tooltipContent: string | React.ReactNode;
-  jsxContent?: string | React.ReactNode;
   position?: TPosition;
   children: JSX.Element;
   disabled?: boolean;
@@ -39,14 +38,13 @@ export const Tooltip: React.FC<ITooltipProps> = ({
   tooltipContent,
   position = "top",
   children,
-  jsxContent,
   disabled = false,
   className = "",
   openDelay = 200,
   closeDelay,
   isMobile = false,
   renderByDefault = true, //FIXME: tooltip should always render on hover and not by default, this is a temporary fix
-}: ITooltipProps) => {
+}) => {
   const toolTipRef = useRef<HTMLDivElement | null>(null);
 
   const [shouldRender, setShouldRender] = useState(renderByDefault);
@@ -81,22 +79,18 @@ export const Tooltip: React.FC<ITooltipProps> = ({
       hoverOpenDelay={openDelay}
       hoverCloseDelay={closeDelay}
       content={
-        jsxContent ? (
-          <>{jsxContent}</>
-        ) : (
-          <div
-            className={cn(
-              "relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md",
-              {
-                hidden: isMobile,
-              },
-              className
-            )}
-          >
-            {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
-            {tooltipContent}
-          </div>
-        )
+        <div
+          className={cn(
+            "relative block z-50 max-w-xs gap-1 overflow-hidden break-words rounded-md bg-custom-background-100 p-2 text-xs text-custom-text-200 shadow-md",
+            {
+              hidden: isMobile,
+            },
+            className
+          )}
+        >
+          {tooltipHeading && <h5 className="font-medium text-custom-text-100">{tooltipHeading}</h5>}
+          {tooltipContent}
+        </div>
       }
       position={position}
       renderTarget={({