Update nodes

apps/web/src/components/ui/report/Toolbar.tsx

@@ -236,24 +236,26 @@ export function ToolbarSplitButtonSecondary({
   );
 }
 
-export function ToolbarToggleItem({
+export const ToolbarToggleItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof ToolbarPrimitive.ToggleItem>,
-  size = 'sm',
+  React.ComponentProps<typeof ToolbarPrimitive.ToggleItem> &
-  variant,
+    VariantProps<typeof toolbarButtonVariants>
-  ...props
+>(function ToolbarToggleItem({ className, size = 'sm', variant, ...props }, ref) {
-}: React.ComponentProps<typeof ToolbarPrimitive.ToggleItem> &
-  VariantProps<typeof toolbarButtonVariants>) {
   return (
     <ToolbarPrimitive.ToggleItem
+      ref={ref}
       className={cn(toolbarButtonVariants({ size, variant }), className)}
       {...props}
     />
   );
-}
+});
 
-export function ToolbarGroup({ children, className }: React.ComponentProps<'div'>) {
+export const ToolbarGroup = React.forwardRef<HTMLDivElement, React.ComponentProps<'div'>>(
+  function ToolbarGroup({ children, className }, ref) {
     return (
-    <div className={cn('group/toolbar-group', 'relative hidden has-[button]:flex', className)}>
+      <div
+        ref={ref}
+        className={cn('group/toolbar-group', 'relative hidden has-[button]:flex', className)}>
         <div className="flex items-center">{children}</div>
 
         <div className="mx-1.5 py-0.5 group-last/toolbar-group:hidden!">
@@ -262,6 +264,7 @@ export function ToolbarGroup({ children, className }: React.ComponentProps<'div'
       </div>
     );
   }
+);
 
 type TooltipProps<T extends React.ElementType> = {
   tooltip?: React.ReactNode;

apps/web/src/components/ui/report/elements/BlockDraggable.tsx

@@ -19,7 +19,7 @@ import {
 import { useSelected } from 'platejs/react';
 
 import { Button } from '@/components/ui/buttons';
-import { TooltipBase, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip, TooltipBase, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 import { expandListItemsWithChildren } from '@platejs/list';
 
@@ -185,8 +185,7 @@ const DragHandle = React.memo(function DragHandle({
   const editor = useEditorRef();
   const element = useElement();
   return (
-    <TooltipBase>
+    <Tooltip title="Drag to move">
-      <TooltipTrigger asChild>
       <div
         className="flex size-full items-center justify-center"
         onClick={() => {
@@ -230,9 +229,7 @@ const DragHandle = React.memo(function DragHandle({
           <GripDotsVertical />
         </div>
       </div>
-      </TooltipTrigger>
+    </Tooltip>
-      <TooltipContent>Drag to move</TooltipContent>
-    </TooltipBase>
   );
 });
 const DropLine = React.memo(function DropLine({

apps/web/src/components/ui/report/elements/ColumnNode.tsx

@@ -27,6 +27,7 @@ import { Button } from '@/components/ui/buttons';
 import { PopoverBase, PopoverContent, PopoverAnchor } from '@/components/ui/popover';
 import { Separator } from '@/components/ui/separator';
 import {
+  Tooltip,
   TooltipBase,
   TooltipContent,
   TooltipProvider,
@@ -86,22 +87,13 @@ export const ColumnElement = withHOC(
 const ColumnDragHandle = React.memo(function ColumnDragHandle() {
   return (
     <TooltipProvider>
-      <TooltipBase>
+      <Tooltip title="Drag to move column">
-        <TooltipTrigger asChild>
+        <Button
-          <Button variant="ghost" className="h-5 !px-1">
+          variant="ghost"
-            <div
+          className="h-5 !px-1"
-              className="text-icon-color"
+          onClick={(e) => e.stopPropagation()}
-              onClick={(event) => {
+          prefix={<GripDots />}></Button>
-                event.stopPropagation();
+      </Tooltip>
-                event.preventDefault();
-              }}>
-              <GripDots />
-            </div>
-          </Button>
-        </TooltipTrigger>
-
-        <TooltipContent>Drag to move column</TooltipContent>
-      </TooltipBase>
     </TooltipProvider>
   );
 });

apps/web/src/components/ui/report/elements/EmojiToolbarButton.tsx

@@ -33,6 +33,7 @@ import {
 
 import { Button } from '@/components/ui/buttons';
 import {
+  Tooltip,
   TooltipBase,
   TooltipContent,
   TooltipProvider,
@@ -458,8 +459,7 @@ function EmojiPickerNavigation({
             .getGrid()
             .sections()
             .map(({ id }) => (
-              <TooltipBase key={id}>
+              <Tooltip key={id} title={i18n.categories[id]}>
-                <TooltipTrigger asChild>
                 <button
                   className={cn(
                     'text-muted-foreground hover:bg-muted hover:text-muted-foreground flex min-h-5 items-center justify-center rounded-full fill-current p-1.5',
@@ -475,9 +475,7 @@ function EmojiPickerNavigation({
                     {icons.categories[id].outline}
                   </div>
                 </button>
-                </TooltipTrigger>
+              </Tooltip>
-                <TooltipContent side="bottom">{i18n.categories[id]}</TooltipContent>
-              </TooltipBase>
             ))}
         </div>
       </nav>

apps/web/src/components/ui/report/elements/FontColorToolbarButton.tsx

@@ -17,6 +17,7 @@ import {
   DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu';
 import {
+  Tooltip,
   TooltipBase,
   TooltipContent,
   TooltipProvider,
@@ -333,14 +334,7 @@ function ColorDropdownMenuItem({
     />
   );
 
-  return name ? (
+  return name ? <Tooltip title={name}>{content}</Tooltip> : content;
-    <TooltipBase>
-      <TooltipTrigger>{content}</TooltipTrigger>
-      <TooltipContent className="mb-1 capitalize">{name}</TooltipContent>
-    </TooltipBase>
-  ) : (
-    content
-  );
 }
 
 export function ColorDropdownMenuItems({

apps/web/src/components/ui/report/elements/Toolbar.tsx

@@ -13,7 +13,7 @@ import {
   DropdownMenuSeparator
 } from '@/components/ui/dropdown-menu';
 import { Separator } from '@/components/ui/separator';
-import { TooltipBase, TooltipTrigger } from '@/components/ui/tooltip';
+import { Tooltip } from '@/components/ui/tooltip';
 import { cn } from '@/lib/utils';
 
 export const Toolbar = React.forwardRef<
@@ -31,17 +31,18 @@ export const Toolbar = React.forwardRef<
 
 Toolbar.displayName = 'Toolbar';
 
-export function ToolbarToggleGroup({
+export const ToolbarToggleGroup = React.forwardRef<
-  className,
+  React.ElementRef<typeof ToolbarPrimitive.ToolbarToggleGroup>,
-  ...props
+  React.ComponentProps<typeof ToolbarPrimitive.ToolbarToggleGroup>
-}: React.ComponentProps<typeof ToolbarPrimitive.ToolbarToggleGroup>) {
+>(function ToolbarToggleGroup({ className, ...props }, ref) {
   return (
     <ToolbarPrimitive.ToolbarToggleGroup
+      ref={ref}
       className={cn('flex items-center', className)}
       {...props}
     />
   );
-}
+});
 
 export function ToolbarLink({
   className,
@@ -121,18 +122,15 @@ type ToolbarButtonProps = {
 } & Omit<React.ComponentPropsWithoutRef<typeof ToolbarToggleItem>, 'asChild' | 'value'> &
   VariantProps<typeof toolbarButtonVariants>;
 
-export const ToolbarButton = withTooltip(function ToolbarButton({
+export const ToolbarButton = withTooltip(
-  children,
+  React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(function ToolbarButton(
-  className,
+    { children, className, isDropdown, pressed, size = 'sm', variant, ...props },
-  isDropdown,
+    ref
-  pressed,
+  ) {
-  size = 'sm',
-  variant,
-  ...props
-}: ToolbarButtonProps) {
     return typeof pressed === 'boolean' ? (
       <ToolbarToggleGroup disabled={props.disabled} value="single" type="single">
         <ToolbarToggleItem
+          ref={ref}
           className={cn(
             toolbarButtonVariants({
               size,
@@ -157,6 +155,7 @@ export const ToolbarButton = withTooltip(function ToolbarButton({
       </ToolbarToggleGroup>
     ) : (
       <ToolbarPrimitive.Button
+        ref={ref}
         className={cn(
           toolbarButtonVariants({
             size,
@@ -169,7 +168,8 @@ export const ToolbarButton = withTooltip(function ToolbarButton({
         {children}
       </ToolbarPrimitive.Button>
     );
-});
+  })
+);
 
 export function ToolbarSplitButton({
   className,
@@ -239,20 +239,19 @@ export function ToolbarSplitButtonSecondary({
   );
 }
 
-export function ToolbarToggleItem({
+export const ToolbarToggleItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof ToolbarPrimitive.ToggleItem>,
-  size = 'sm',
+  React.ComponentProps<typeof ToolbarPrimitive.ToggleItem> &
-  variant,
+    VariantProps<typeof toolbarButtonVariants>
-  ...props
+>(function ToolbarToggleItem({ className, size = 'sm', variant, ...props }, ref) {
-}: React.ComponentProps<typeof ToolbarPrimitive.ToggleItem> &
-  VariantProps<typeof toolbarButtonVariants>) {
   return (
     <ToolbarPrimitive.ToggleItem
+      ref={ref}
       className={cn(toolbarButtonVariants({ size, variant }), className)}
       {...props}
     />
   );
-}
+});
 
 export function ToolbarGroup({ children, className }: React.ComponentProps<'div'>) {
   return (
@@ -268,9 +267,6 @@ export function ToolbarGroup({ children, className }: React.ComponentProps<'div'
 
 type TooltipProps<T extends React.ElementType> = {
   tooltip?: React.ReactNode;
-  tooltipContentProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipContent>, 'children'>;
-  tooltipProps?: Omit<React.ComponentPropsWithoutRef<typeof TooltipBase>, 'children'>;
-  tooltipTriggerProps?: React.ComponentPropsWithoutRef<typeof TooltipTrigger>;
 } & React.ComponentProps<T>;
 
 function withTooltip<T extends React.ElementType>(Component: T) {
@@ -290,15 +286,7 @@ function withTooltip<T extends React.ElementType>(Component: T) {
       const component = React.createElement(Component, componentProps);
 
       if (tooltip && mounted) {
-        return (
+        return <Tooltip title={tooltip}>{component}</Tooltip>;
-          <TooltipBase {...tooltipProps}>
-            <TooltipTrigger asChild {...tooltipTriggerProps}>
-              {component}
-            </TooltipTrigger>
-
-            <TooltipContent {...tooltipContentProps}>{tooltip}</TooltipContent>
-          </TooltipBase>
-        );
       }
 
       return component;
@@ -310,31 +298,6 @@ function withTooltip<T extends React.ElementType>(Component: T) {
   return ExtendComponent;
 }
 
-function TooltipContent({
-  children,
-  className,
-  // CHANGE
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
-    <TooltipPrimitive.Portal>
-      <TooltipPrimitive.Content
-        className={cn(
-          'bg-primary text-primary-foreground z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
-          className
-        )}
-        data-slot="tooltip-content"
-        sideOffset={sideOffset}
-        {...props}>
-        {children}
-        {/* CHANGE */}
-        {/* <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-primary fill-primary" /> */}
-      </TooltipPrimitive.Content>
-    </TooltipPrimitive.Portal>
-  );
-}
-
 export function ToolbarMenuGroup({
   children,
   className,