commit chnages auto dismiss infolabel when move outside the card

Author: joaojmendes

src/controls/KPIControl/KpiCard.tsx

@@ -31,6 +31,14 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
   const { dataCard } = props;
   const styles = useKpiStyles();
 
+  // State to control InfoLabel popover visibility
+  const [isInfoLabelOpen, setIsInfoLabelOpen] = React.useState(false);
+
+  // Handle card mouse leave to auto-dismiss InfoLabel
+  const handleCardMouseLeave = React.useCallback(() => {
+    setIsInfoLabelOpen(false);
+  }, []);
+
   // Determine if KPI is on track based on goal metric type
   const isOnTrack = React.useMemo(
     () =>
@@ -97,7 +105,7 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
 
   return (
     <>
-      <Card className={styles.card}>
+      <Card className={styles.card} onMouseLeave={handleCardMouseLeave}>
         {/* Glow blob effect - green for on track, red for exceeds goal */}
         <div
           className={isOnTrack ? styles.glowBlobSuccess : styles.glowBlobError}
@@ -108,6 +116,13 @@ export const KPICard: React.FunctionComponent<IKpiCardProps> = (
               <Stack direction="vertical" gap="2px">
                 <Stack direction="horizontal" alignItems="center" gap="8px">
                   <InfoLabel
+                    style={{ zIndex: 99999 }}
+                    infoButton={{
+                      popover: {
+                        open: isInfoLabelOpen,
+                        onOpenChange: (_e, data) => setIsInfoLabelOpen(data.open),
+                      },
+                    }}
                     info={
                       <>
                         <Text size={300} color="neutralSecondary">

src/controls/KPIControl/KpiCardCompact.tsx

@@ -26,6 +26,14 @@ export const KPICardCompact: React.FunctionComponent<IKpiCardProps> = (
   const { dataCard } = props;
   const styles = useKpiStyles();
 
+  // State to control InfoLabel popover visibility
+  const [isInfoLabelOpen, setIsInfoLabelOpen] = React.useState(false);
+
+  // Handle card mouse leave to auto-dismiss InfoLabel
+  const handleCardMouseLeave = React.useCallback(() => {
+    setIsInfoLabelOpen(false);
+  }, []);
+
   // Determine if KPI is on track based on goal metric type
   const isOnTrack = React.useMemo(
     () =>
@@ -56,7 +64,7 @@ export const KPICardCompact: React.FunctionComponent<IKpiCardProps> = (
 
   return (
     <>
-      <Card className={styles.card} style={{ height: 'fit-content' }}>
+      <Card className={styles.card} style={{ height: '168px' }} onMouseLeave={handleCardMouseLeave}>
         {/* Glow blob effect - green for on track, red for exceeds goal */}
         <div
           className={isOnTrack ? styles.glowBlobSuccess : styles.glowBlobError}
@@ -67,6 +75,12 @@ export const KPICardCompact: React.FunctionComponent<IKpiCardProps> = (
               <Stack direction="vertical" gap="2px">
                 <Stack direction="horizontal" alignItems="center" gap="8px">
                   <InfoLabel
+                    infoButton={{
+                      popover: {
+                        open: isInfoLabelOpen,
+                        onOpenChange: (_e, data) => setIsInfoLabelOpen(data.open),
+                      },
+                    }}
                     info={
                       <>
                         <Text size={300} color="neutralSecondary">

src/controls/KPIControl/Kpis.tsx

@@ -17,7 +17,7 @@ const mockData: IKpiCardData[] = [
     currentValue: 125.0,
     goal: 150.0,
     totalItems: 200.0,
-    description: 'Total sales revenue for Q1',
+    description: 'This is a comprehensive description of the Total Sales Revenue KPI for Q1. This metric tracks all revenue generated from product sales, service contracts, and recurring subscriptions across all business units and geographic regions. The goal is set based on historical performance, market conditions, and strategic growth objectives. Performance is evaluated weekly with detailed breakdowns by product category, sales team, and customer segment. This KPI is critical for quarterly business reviews and investor reporting.',
     goalMetric: 2,
   },
   {

src/controls/KPIControl/useKpiStyles.tsx

@@ -53,12 +53,13 @@ export const useKpiStyles = (): IKpiStyles => {
       background: tokens.colorNeutralBackground1,
       border: `1px solid ${tokens.colorNeutralStroke1}`,
       boxShadow: tokens.shadow8,
-      overflow: "hidden",
+      overflow: "visible",
       position: "relative",
       padding: "0px 15px !important",
       transition: "transform 0.25s ease, box-shadow 0.25s ease",
-      "&:hover": {
-        transform: "translateY(-3px)",
+      "&:hover, &:focus-within": {
+        zIndex: 10,
+        transform: "translateY(-2px)",
         boxShadow: tokens.shadow16, // deeper on hover
       },
     }),