enh(sparkles) - forwardRef Chip and Tooltip (#9244)

* enh: turn Tooltip and Chip into forwardRefs * chore: bump sparkles version
dust-tt · Dec 10, 2024 · 9d43958 · 9d43958
1 parent d03679b
commit 9d43958
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 41 deletions.
diff --git a/sparkle/src/components/Chip.tsx b/sparkle/src/components/Chip.tsx
@@ -78,22 +78,18 @@ const chipVariants = cva("s-inline-flex s-box-border s-items-center", {
   },
 });
 
-export function Chip({
-  size,
-  color,
-  label,
-  children,
-  className,
-  isBusy,
-  icon,
-}: ChipProps) {
-  return (
+const Chip = React.forwardRef<HTMLDivElement, ChipProps>(
+  (
+    { size, color, label, children, className, isBusy, icon }: ChipProps,
+    ref
+  ) => (
     <div
       className={cn(
         chipVariants({ size, background: color, text: color }),
         className
       )}
       aria-label={label}
+      ref={ref}
     >
       {icon && <Icon visual={icon} size={size as IconProps["size"]} />}
       {label && (
@@ -107,26 +103,9 @@ export function Chip({
       )}
       {children}
     </div>
-  );
-}
+  )
+);
 
-interface ListChipProps {
-  children: ReactNode;
-  className?: string;
-  isWrapping?: boolean;
-}
+Chip.displayName = "Chip";
 
-Chip.List = function ({ children, className, isWrapping }: ListChipProps) {
-  return (
-    <div className={cn("s-flex", className)}>
-      <div
-        className={cn(
-          "s-flex s-flex-row s-gap-2",
-          isWrapping ? "s-flex-wrap" : ""
-        )}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
+export { Chip };
diff --git a/sparkle/src/components/Tooltip.tsx b/sparkle/src/components/Tooltip.tsx
@@ -36,23 +36,23 @@ interface TooltipProps extends TooltipContentProps {
   triggerAsChild?: boolean;
 }
 
-function Tooltip({
-  trigger,
-  tooltipTriggerAsChild = false,
-  label,
-  ...props
-}: TooltipProps) {
-  return (
+const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
+  (
+    { trigger, tooltipTriggerAsChild = false, label, ...props }: TooltipProps,
+    ref
+  ) => (
     <TooltipProvider>
       <TooltipRoot>
         <TooltipTrigger asChild={tooltipTriggerAsChild}>
           {trigger}
         </TooltipTrigger>
-        <TooltipContent {...props}>{label}</TooltipContent>
+        <TooltipContent {...props} ref={ref}>
+          {label}
+        </TooltipContent>
       </TooltipRoot>
     </TooltipProvider>
-  );
-}
+  )
+);
 
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;