fix: fixed tooltip warnings in React 18 (#4794)

dream-num · Mar 8, 2025 · 55ba301 · 55ba301
1 parent d2a4e12
commit 55ba301
Show file tree

Hide file tree

Showing 78 changed files with 1,250 additions and 1,320 deletions.
diff --git a/common/shared/package.json b/common/shared/package.json
@@ -24,28 +24,28 @@
         "univer-cli": "bin/index.ts"
     },
     "dependencies": {
-        "@typescript-eslint/parser": "^8.24.1",
+        "@typescript-eslint/parser": "^8.26.0",
         "@vitejs/plugin-react": "^4.3.4",
         "@vitejs/plugin-vue": "^5.2.1",
-        "@vitest/coverage-istanbul": "^3.0.7",
+        "@vitest/coverage-istanbul": "^3.0.8",
         "autoprefixer": "^10.4.20",
-        "eslint-plugin-readable-tailwind": "^1.9.0",
+        "eslint-plugin-readable-tailwind": "^1.9.1",
         "fs-extra": "^11.3.0",
         "happy-dom": "15.0.0",
         "javascript-obfuscator": "^4.1.1",
         "postcss-preset-env": "^10.1.5",
         "sort-keys": "^5.1.0",
         "tailwind-scrollbar": "^3.1.0",
         "tailwindcss": "^3.4.17",
-        "vite": "^6.2.0",
-        "vite-plugin-dts": "^4.5.0",
+        "vite": "^6.2.1",
+        "vite-plugin-dts": "^4.5.3",
         "vite-plugin-external": "^6.0.1",
-        "vitest": "^3.0.7"
+        "vitest": "^3.0.8"
     },
     "devDependencies": {
         "@types/fs-extra": "^11.0.4",
-        "@univerjs/icons": "^0.2.20",
-        "@univerjs/icons-svg": "^0.2.20",
-        "@univerjs/protocol": "0.1.43"
+        "@univerjs/icons": "^0.2.21",
+        "@univerjs/icons-svg": "^0.2.21",
+        "@univerjs/protocol": "0.1.44"
     }
 }
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
     "type": "module",
     "version": "0.6.4",
     "private": true,
-    "packageManager": "pnpm@10.5.2",
+    "packageManager": "pnpm@10.6.1",
     "author": "DreamNum Co., Ltd. <[email protected]>",
     "license": "Apache-2.0",
     "funding": {
@@ -44,21 +44,21 @@
         "release": "release-it"
     },
     "devDependencies": {
-        "@antfu/eslint-config": "4.5.1",
-        "@commitlint/cli": "^19.7.1",
-        "@commitlint/config-conventional": "^19.7.1",
-        "@eslint-react/eslint-plugin": "^1.30.2",
-        "@playwright/test": "^1.50.1",
+        "@antfu/eslint-config": "4.8.1",
+        "@commitlint/cli": "^19.8.0",
+        "@commitlint/config-conventional": "^19.8.0",
+        "@eslint-react/eslint-plugin": "^1.31.0",
+        "@playwright/test": "^1.51.0",
         "@release-it-plugins/workspaces": "^4.2.0",
         "@release-it/conventional-changelog": "^9.0.4",
         "@storybook/react": "8.6.4",
-        "@types/node": "^22.13.9",
+        "@types/node": "^22.13.10",
         "@types/react": "^19.0.10",
         "@types/react-dom": "^19.0.4",
         "@univerjs-infra/shared": "workspace:*",
         "@univerjs/design": "workspace:*",
         "@vitejs/plugin-react": "^4.3.4",
-        "eslint": "9.21.0",
+        "eslint": "9.22.0",
         "eslint-plugin-format": "^1.0.1",
         "eslint-plugin-header": "^3.1.1",
         "eslint-plugin-jsdoc": "^50.6.3",
@@ -69,15 +69,15 @@
         "eslint-plugin-react-refresh": "^0.4.19",
         "husky": "^9.1.7",
         "lint-staged": "^15.4.3",
-        "posthog-node": "^4.10.0",
+        "posthog-node": "^4.10.1",
         "react": "19.0.0",
         "react-dom": "19.0.0",
         "release-it": "^17.11.0",
         "serve": "^14.2.4",
         "tsx": "^4.19.3",
         "turbo": "^2.4.4",
         "typescript": "^5.8.2",
-        "vitest": "^3.0.7"
+        "vitest": "^3.0.8"
     },
     "pnpm": {
         "onlyBuiltDependencies": [

diff --git a/packages-experimental/action-recorder/package.json b/packages-experimental/action-recorder/package.json
@@ -81,7 +81,7 @@
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages-experimental/debugger/package.json b/packages-experimental/debugger/package.json
@@ -84,8 +84,8 @@
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7",
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8",
         "vue": "^3.5.13"
     }
 }
diff --git a/packages-experimental/sheets-source-binding/package.json b/packages-experimental/sheets-source-binding/package.json
@@ -72,7 +72,7 @@
         "@univerjs-infra/shared": "workspace:*",
         "rxjs": "^7.8.1",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages-experimental/uni-docs-ui/package.json b/packages-experimental/uni-docs-ui/package.json
@@ -73,7 +73,7 @@
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages-experimental/uni-formula-ui/package.json b/packages-experimental/uni-formula-ui/package.json
@@ -86,7 +86,7 @@
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages-experimental/uni-formula/package.json b/packages-experimental/uni-formula/package.json
@@ -61,7 +61,7 @@
     "devDependencies": {
         "@univerjs-infra/shared": "workspace:*",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages-experimental/uni-sheets-ui/package.json b/packages-experimental/uni-sheets-ui/package.json
@@ -78,7 +78,7 @@
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages-experimental/uni-slides-ui/package.json b/packages-experimental/uni-slides-ui/package.json
@@ -75,7 +75,7 @@
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages-experimental/uniui/package.json b/packages-experimental/uniui/package.json
@@ -80,7 +80,7 @@
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -74,7 +74,7 @@
         "fast-diff": "1.3.0",
         "kdbush": "^4.0.2",
         "lodash-es": "^4.17.21",
-        "nanoid": "5.1.2",
+        "nanoid": "5.1.3",
         "numeral": "^2.0.6",
         "numfmt": "^2.5.2",
         "ot-json1": "^1.0.2",
@@ -87,7 +87,7 @@
         "@univerjs-infra/shared": "workspace:*",
         "rxjs": "^7.8.1",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages/data-validation/package.json b/packages/data-validation/package.json
@@ -70,7 +70,7 @@
         "@univerjs/sheets": "workspace:*",
         "rxjs": "^7.8.1",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages/design/package.json b/packages/design/package.json
@@ -101,7 +101,7 @@
         "tailwindcss": "^3.4.17",
         "tailwindcss-animate": "^1.0.7",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages/design/src/components/dropdown/Dropdown.stories.tsx b/packages/design/src/components/dropdown/Dropdown.stories.tsx
@@ -52,7 +52,13 @@ export const Playground = {
                         </div>
                     )}
                 >
-                    <a className="univer-cursor-pointer univer-border univer-rounded-lg univer-border-gray-200 univer-px-4 univer-py-2 univer-border-solid hover:univer-bg-gray-100 univer-transition-all">
+                    <a
+                        className={`
+                          univer-cursor-pointer univer-rounded-lg univer-border univer-border-solid
+                          univer-border-gray-200 univer-px-4 univer-py-2 univer-transition-all
+                          hover:univer-bg-gray-100
+                        `}
+                    >
                         Click me
                     </a>
                 </Dropdown>

diff --git a/packages/design/src/components/tooltip/Tooltip.stories.tsx b/packages/design/src/components/tooltip/Tooltip.stories.tsx
@@ -35,9 +35,11 @@ export const Playground = {
         return (
             <>
                 <div
-                    className="univer-box-border univer-relative univer-w-96 univer-p-4 univer-bg-gray-50 univer-h-48 univer-flex univer-justify-center univer-items-center"
+                    className={`
+                      univer-relative univer-box-border univer-flex univer-h-48 univer-w-96 univer-items-center
+                      univer-justify-center univer-bg-gray-50 univer-p-4
+                    `}
                 >
-
                     <div className="univer-absolute univer-top-0">
                         <Tooltip title="hello world" placement="top">
                             <Button>top</Button>
@@ -62,7 +64,7 @@ export const Playground = {
 
                 <div>
                     <Tooltip title="Just a tooltip">
-                        <a className="px-4 py-2 bg-blue-500 text-white rounded">
+                        <a className="rounded bg-blue-500 px-4 py-2 text-white">
                             Hover me
                         </a>
                     </Tooltip>

diff --git a/packages/design/src/components/tooltip/TooltipPrimitive.tsx b/packages/design/src/components/tooltip/TooltipPrimitive.tsx
@@ -14,76 +14,49 @@
  * limitations under the License.
  */
 
-import type { ComponentProps } from 'react';
+import type { ComponentPropsWithoutRef, ElementRef } from 'react';
 import { Arrow, Content, Portal, Provider, Root, Trigger } from '@radix-ui/react-tooltip';
+import { forwardRef } from 'react';
 import { clsx } from '../../helper/clsx';
 
-function TooltipProvider({
-    delayDuration = 0,
-    ...props
-}: ComponentProps<typeof Provider>) {
-    return (
-        <Provider
-            data-slot="tooltip-provider"
-            delayDuration={delayDuration}
-            {...props}
-        />
-    );
-}
-
-function TooltipPrimitive({
-    ...props
-}: ComponentProps<typeof Root>) {
-    return (
-        <TooltipProvider>
-            <Root data-slot="tooltip" {...props} />
-        </TooltipProvider>
-    );
-}
+const TooltipProvider = Provider;
 
-function TooltipTrigger({
-    ...props
-}: ComponentProps<typeof Trigger>) {
-    return <Trigger data-slot="tooltip-trigger" {...props} />;
-}
+const TooltipPrimitive = Root;
 
-function TooltipContent({
-    className,
-    sideOffset = 0,
-    children,
-    ...props
-}: ComponentProps<typeof Content>) {
-    return (
-        <Portal>
-            <Content
-                data-slot="tooltip-content"
-                sideOffset={sideOffset}
-                className={clsx(
-                    `
-                      univer-z-[1080] univer-box-border univer-w-fit univer-text-balance univer-rounded-lg
-                      univer-bg-gray-700 univer-px-3 univer-py-2.5 univer-text-xs univer-font-medium univer-text-white
-                      univer-animate-in univer-fade-in-0 univer-zoom-in-95
-                      data-[side=bottom]:univer-slide-in-from-top-2
-                      data-[side=left]:univer-slide-in-from-right-2
-                      data-[side=right]:univer-slide-in-from-left-2
-                      data-[side=top]:univer-slide-in-from-bottom-2
-                      data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0
-                      data-[state=closed]:univer-zoom-out-95
-                    `,
-                    className
-                )}
-                {...props}
-            >
-                {children}
-                <Arrow
-                    className={`
-                      univer-z-[1080] univer-size-2.5 univer-translate-y-[calc(-50%_-_2px)] univer-rotate-45
-                      univer-rounded-[2px] univer-bg-gray-700 univer-fill-gray-700
-                    `}
-                />
-            </Content>
-        </Portal>
-    );
-}
+const TooltipTrigger = Trigger;
 
+const TooltipContent = forwardRef<
+    ElementRef<typeof Content>,
+    ComponentPropsWithoutRef<typeof Content>
+>(({ className, sideOffset = 4, children, ...props }, ref) => (
+    <Portal>
+        <Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={clsx(
+                `
+                  univer-z-[1080] univer-box-border univer-w-fit univer-text-balance univer-rounded-lg
+                  univer-bg-gray-700 univer-px-3 univer-py-2.5 univer-text-xs univer-font-medium univer-text-white
+                  univer-animate-in univer-fade-in-0 univer-zoom-in-95
+                  data-[side=bottom]:univer-slide-in-from-top-2
+                  data-[side=left]:univer-slide-in-from-right-2
+                  data-[side=right]:univer-slide-in-from-left-2
+                  data-[side=top]:univer-slide-in-from-bottom-2
+                  data-[state=closed]:univer-animate-out data-[state=closed]:univer-fade-out-0
+                  data-[state=closed]:univer-zoom-out-95
+                `,
+                className
+            )}
+            {...props}
+        >
+            {children}
+            <Arrow
+                className={`
+                  univer-z-[1080] univer-size-2.5 univer-translate-y-[calc(-50%_-_2px)] univer-rotate-45
+                  univer-rounded-[2px] univer-bg-gray-700 univer-fill-gray-700
+                `}
+            />
+        </Content>
+    </Portal>
+));
 export { TooltipContent, TooltipPrimitive, TooltipProvider, TooltipTrigger };
diff --git a/packages/docs-drawing-ui/package.json b/packages/docs-drawing-ui/package.json
@@ -85,7 +85,7 @@
         "rxjs": "^7.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }
diff --git a/packages/docs-drawing/package.json b/packages/docs-drawing/package.json
@@ -62,7 +62,7 @@
     "devDependencies": {
         "@univerjs-infra/shared": "workspace:*",
         "typescript": "^5.8.2",
-        "vite": "^6.2.0",
-        "vitest": "^3.0.7"
+        "vite": "^6.2.1",
+        "vitest": "^3.0.8"
     }
 }