From ffb8504b0981cf043cb708540f06962b49e17c82 Mon Sep 17 00:00:00 2001
From: p-sw <shinwoo.park@psw.kr>
Date: Tue, 11 Jun 2024 20:30:53 +0900
Subject: [PATCH] feat(tooltip): enhance Tooltip with AsChild property

This update enhances the Tooltip component in the react/components package by adding the AsChild property. Now, users of the Tooltip component have flexibility to use it as a child of another component. A conditional logic is added to choose either Slot or "div" based on the asChild property. And rest of the properties are extracted into extractedRest for avoiding passing of asChild downstream.
---
 packages/react/components/Tooltip.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react/components/Tooltip.tsx b/packages/react/components/Tooltip.tsx
index 0a27845..5dd0227 100644
--- a/packages/react/components/Tooltip.tsx
+++ b/packages/react/components/Tooltip.tsx
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { VariantProps, vcn } from "@pswui-lib";
+import { AsChild, Slot, VariantProps, vcn } from "@pswui-lib";
 
 interface TooltipContextBody {
   position: "top" | "bottom" | "left" | "right";
@@ -48,18 +48,26 @@ const [tooltipVariant, resolveTooltipVariantProps] = vcn({
 
 interface TooltipProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof tooltipVariant> {}
+    VariantProps<typeof tooltipVariant>,
+    AsChild {}
 
 const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>((props, ref) => {
   const [variantProps, rest] = resolveTooltipVariantProps(props);
+  const { asChild, ...extractedRest } = rest;
   const contextState = useState<TooltipContextBody>({
     ...tooltipContextInitial,
     ...variantProps,
   });
 
+  const Comp = asChild ? Slot : "div";
+
   return (
     <TooltipContext.Provider value={contextState}>
-      <div ref={ref} className={tooltipVariant(variantProps)} {...rest} />
+      <Comp
+        ref={ref}
+        className={tooltipVariant(variantProps)}
+        {...extractedRest}
+      />
     </TooltipContext.Provider>
   );
 });