fix: 兼容低版本react 采用显式forward 船惨

electroluxcode · electroluxcode · commit 7a48b4b4e7b5 · 2025-09-04T18:30:51.000+08:00
diff --git a/apps/kk-adapt-app/src/components/ui/button.tsx b/apps/kk-adapt-app/src/components/ui/button.tsx
@@ -36,25 +36,31 @@ const buttonVariants = cva(
   }
 );
 
-function Button({
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<'button'> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(({
   asChild = false,
   className,
   size,
   variant,
   ...props
-}: React.ComponentProps<'button'> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
+}, ref) => {
   const Comp = asChild ? Slot : 'button';
 
   return (
     <Comp
+      ref={ref}
       className={cn(buttonVariants({ className, size, variant }))}
       data-slot="button"
       {...props}
     />
   );
-}
+});
+
+Button.displayName = 'Button';
 
 export { Button, buttonVariants };
diff --git a/apps/kk-adapt-app/src/components/ui/checkbox.tsx b/apps/kk-adapt-app/src/components/ui/checkbox.tsx
@@ -7,12 +7,16 @@ import { CheckIcon } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
 
-function Checkbox({
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentProps<typeof CheckboxPrimitive.Root>
+>(({
   className,
   ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+}, ref) => {
   return (
     <CheckboxPrimitive.Root
+      ref={ref}
       className={cn(
         'peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/30 dark:aria-invalid:ring-destructive/40 dark:data-[state=checked]:bg-primary',
         className
@@ -28,6 +32,8 @@ function Checkbox({
       </CheckboxPrimitive.Indicator>
     </CheckboxPrimitive.Root>
   );
-}
+});
+
+Checkbox.displayName = 'Checkbox';
 
 export { Checkbox };
diff --git a/apps/kk-adapt-app/src/components/ui/context-menu.tsx b/apps/kk-adapt-app/src/components/ui/context-menu.tsx
@@ -13,13 +13,20 @@ function ContextMenu({
   return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
 }
 
-function ContextMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
+const ContextMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof ContextMenuPrimitive.Trigger>,
+  React.ComponentProps<typeof ContextMenuPrimitive.Trigger>
+>(({ ...props }, ref) => {
   return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
+    <ContextMenuPrimitive.Trigger
+      ref={ref}
+      data-slot="context-menu-trigger"
+      {...props}
+    />
   );
-}
+});
+
+ContextMenuTrigger.displayName = 'ContextMenuTrigger';
 
 function ContextMenuGroup({
   ...props
diff --git a/apps/kk-adapt-app/src/components/ui/dropdown-menu.tsx b/apps/kk-adapt-app/src/components/ui/dropdown-menu.tsx
@@ -21,25 +21,43 @@ function DropdownMenuPortal({
   );
 }
 
-function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+const DropdownMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
+  React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>
+>(({ ...props }, ref) => {
+  
   return (
     <DropdownMenuPrimitive.Trigger
+      ref={ref}
       data-slot="dropdown-menu-trigger"
       {...props}
     />
   );
-}
+});
+
+DropdownMenuTrigger.displayName = 'DropdownMenuTrigger';
 
-function DropdownMenuContent({
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentProps<typeof DropdownMenuPrimitive.Content>
+>(({
   className,
   sideOffset = 4,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+}, ref) => {
+  
+  const contentRef = React.useCallback((node: HTMLDivElement | null) => {
+    if (typeof ref === 'function') {
+      ref(node);
+    } else if (ref) {
+      ref.current = node;
+    }
+  }, [ref]);
+
   return (
     <DropdownMenuPrimitive.Portal>
       <DropdownMenuPrimitive.Content
+        ref={contentRef}
         className={cn(
           'z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
           className
@@ -50,7 +68,9 @@ function DropdownMenuContent({
       />
     </DropdownMenuPrimitive.Portal>
   );
-}
+});
+
+DropdownMenuContent.displayName = 'DropdownMenuContent';
 
 function DropdownMenuGroup({
   ...props
diff --git a/apps/kk-adapt-app/src/components/ui/input.tsx b/apps/kk-adapt-app/src/components/ui/input.tsx
@@ -2,9 +2,13 @@ import * as React from 'react';
 
 import { cn } from '@/lib/utils';
 
-function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<'input'>
+>(({ className, type, ...props }, ref) => {
   return (
     <input
+      ref={ref}
       className={cn(
         'flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm dark:bg-input/30',
         'focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50',
@@ -16,6 +20,8 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
       {...props}
     />
   );
-}
+});
+
+Input.displayName = 'Input';
 
 export { Input };
diff --git a/apps/kk-adapt-app/src/components/ui/separator.tsx b/apps/kk-adapt-app/src/components/ui/separator.tsx
@@ -6,14 +6,18 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 
 import { cn } from '@/lib/utils';
 
-function Separator({
+const Separator = React.forwardRef<
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
+  React.ComponentProps<typeof SeparatorPrimitive.Root>
+>(({
   className,
   decorative = true,
   orientation = 'horizontal',
   ...props
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+}, ref) => {
   return (
     <SeparatorPrimitive.Root
+      ref={ref}
       orientation={orientation}
       className={cn(
         'shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
@@ -24,6 +28,8 @@ function Separator({
       {...props}
     />
   );
-}
+});
+
+Separator.displayName = 'Separator';
 
 export { Separator };
diff --git a/apps/kk-adapt-app/src/components/ui/skeleton.tsx b/apps/kk-adapt-app/src/components/ui/skeleton.tsx
@@ -1,13 +1,21 @@
+import * as React from 'react';
+
 import { cn } from '@/lib/utils';
 
-function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
+const Skeleton = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<'div'>
+>(({ className, ...props }, ref) => {
   return (
     <div
+      ref={ref}
       className={cn('animate-pulse rounded-md bg-accent', className)}
       data-slot="skeleton"
       {...props}
     />
   );
-}
+});
+
+Skeleton.displayName = 'Skeleton';
 
 export { Skeleton };
diff --git a/apps/kk-adapt-app/src/components/ui/toggle.tsx b/apps/kk-adapt-app/src/components/ui/toggle.tsx
@@ -32,20 +32,26 @@ const toggleVariants = cva(
   }
 );
 
-function Toggle({
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentProps<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({
   className,
   size,
   variant,
   ...props
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
+}, ref) => {
   return (
     <TogglePrimitive.Root
+      ref={ref}
       className={cn(toggleVariants({ className, size, variant }))}
       data-slot="toggle"
       {...props}
     />
   );
-}
+});
+
+Toggle.displayName = 'Toggle';
 
 export { Toggle, toggleVariants };
diff --git a/apps/kk-adapt-app/src/registry/ui/floating-toolbar.tsx b/apps/kk-adapt-app/src/registry/ui/floating-toolbar.tsx
@@ -21,14 +21,17 @@ import { cn } from '@/lib/utils';
 
 import { Toolbar } from './toolbar';
 
-export function FloatingToolbar({
+export const FloatingToolbar = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof Toolbar> & {
+    state?: FloatingToolbarState;
+  }
+>(({
   children,
   className,
   state,
   ...props
-}: React.ComponentProps<typeof Toolbar> & {
-  state?: FloatingToolbarState;
-}) {
+}, ref) => {
   const editorId = useEditorId();
   const focusedEditorId = useEventEditorValue('focus');
   const isFloatingLinkOpen = !!usePluginOption({ key: KEYS.link }, 'mode');
@@ -64,7 +67,7 @@ export function FloatingToolbar({
     ref: floatingRef,
   } = useFloatingToolbar(floatingToolbarState);
 
-  const ref = useComposedRef<HTMLDivElement>(props.ref, floatingRef);
+  const composedRef = useComposedRef(ref, floatingRef);
 
   if (hidden) return null;
 
@@ -73,7 +76,7 @@ export function FloatingToolbar({
       <Toolbar
         {...props}
         {...rootProps}
-        ref={ref}
+        ref={composedRef}
         className={cn(
           'absolute z-50 scrollbar-hide overflow-x-auto rounded-md border bg-popover p-1 whitespace-nowrap opacity-100 shadow-md print:hidden',
           'max-w-[80vw]',
@@ -84,4 +87,6 @@ export function FloatingToolbar({
       </Toolbar>
     </div>
   );
-}
+});
+
+FloatingToolbar.displayName = 'FloatingToolbar';
diff --git a/apps/kk-adapt-app/src/registry/ui/toolbar.tsx b/apps/kk-adapt-app/src/registry/ui/toolbar.tsx
