✨ feat: Update antd

Author: canisminor1990

package.json

@@ -87,6 +87,7 @@
     ]
   },
   "dependencies": {
+    "@ant-design/cssinjs": "^1.22.0",
     "@babel/runtime": "^7.26.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^8.0.0",
@@ -96,19 +97,32 @@
     "@emoji-mart/react": "^1.1.1",
     "@floating-ui/react": "^0.26.28",
     "@giscus/react": "^3.1.0",
+    "@lobehub/fluent-emoji": "^1.0.0",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@radix-ui/react-slot": "^1.1.1",
     "@shikijs/transformers": "^1.26.1",
+    "@splinetool/runtime": "^0.9.0",
+    "ahooks": "^3.8.0",
+    "antd-style": "^3.7.0",
+    "chroma-js": "^3.0.0",
+    "class-variance-authority": "^0.7.0",
+    "dayjs": "^1.11.0",
     "emoji-mart": "^5.6.0",
+    "fast-deep-equal": "^3.0.0",
     "immer": "^10.1.1",
     "leva": "^0.9.35",
+    "lodash-es": "^4.0.0",
+    "lucide-react": "^0.469.0",
     "mermaid": "^11.4.1",
     "numeral": "^2.0.6",
+    "polished": "^4.0.0",
+    "query-string": "^9.0.0",
     "rc-footer": "^0.6.8",
     "re-resizable": "^6.10.3",
     "react-avatar-editor": "^13.0.2",
     "react-error-boundary": "^4.1.2",
+    "react-layout-kit": "^1.0.0",
     "react-markdown": "^8.0.7",
     "react-merge-refs": "^2.1.1",
     "react-rnd": "^10.4.14",
@@ -118,10 +132,16 @@
     "remark-gfm": "^3.0.1",
     "remark-math": "^5.1.1",
     "shiki": "^1.26.1",
-    "unified": "^10.1.2"
+    "swr": "^2.3.0",
+    "ts-md5": "^1.0.0",
+    "unified": "^10.1.2",
+    "url-join": "^5.0.0",
+    "use-merge-value": "^1.2.0",
+    "uuid": "^11.0.0"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.5.2",
+    "@babel/runtime": "^7.0.0",
     "@commitlint/cli": "^19.6.1",
     "@lobehub/lint": "^1.24.4",
     "@testing-library/react": "^14.3.1",
@@ -131,7 +151,7 @@
     "@types/numeral": "^2.0.5",
     "@types/pangu": "^4.0.2",
     "@types/query-string": "^6.3.0",
-    "@types/react": "^19.0.2",
+    "@types/react": "^19.0.3",
     "@types/react-avatar-editor": "^13.0.3",
     "@types/react-dom": "^19.0.2",
     "@types/unist": "^3.0.3",
@@ -161,29 +181,9 @@
     "vitest": "~1.2.2"
   },
   "peerDependencies": {
-    "@ant-design/cssinjs": "^1.22.0",
-    "@babel/runtime": "^7.0.0",
-    "@lobehub/fluent-emoji": "^1.0.0",
-    "@splinetool/runtime": "^0.9.0",
-    "ahooks": "^3.8.0",
-    "antd": "^5.22.0",
-    "antd-style": "^3.7.0",
-    "chroma-js": "^3.0.0",
-    "class-variance-authority": "^0.7.0",
-    "dayjs": "^1.11.0",
-    "fast-deep-equal": "^3.0.0",
-    "lodash-es": "^4.0.0",
-    "lucide-react": "^0.469.0",
-    "polished": "^4.0.0",
-    "query-string": "^9.0.0",
+    "antd": "^5.23.0",
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "react-layout-kit": "^1.0.0",
-    "swr": "^2.3.0",
-    "ts-md5": "^1.0.0",
-    "url-join": "^5.0.0",
-    "use-merge-value": "^1.2.0",
-    "uuid": "^11.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public",

src/ActionIcon/index.tsx

@@ -1,14 +1,7 @@
 'use client';
 
 import { Loader2 } from 'lucide-react';
-import {
-  type CSSProperties,
-  MouseEventHandler,
-  forwardRef,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
+import { MouseEventHandler, forwardRef, useCallback, useMemo, useState } from 'react';
 import { Flexbox, type FlexboxProps } from 'react-layout-kit';
 
 import Icon, {
@@ -43,6 +36,7 @@ export interface ActionIconProps extends LucideIconProps, FlexboxProps {
    * @default false
    */
   arrow?: boolean;
+  classNames?: TooltipProps['classNames'];
   disable?: boolean;
   /**
    * @description Glass blur style
@@ -54,7 +48,8 @@ export interface ActionIconProps extends LucideIconProps, FlexboxProps {
    * @description Set the loading status of ActionIcon
    */
   loading?: boolean;
-  overlayStyle?: CSSProperties;
+  overlayClassName?: TooltipProps['overlayClassName'];
+  overlayStyle?: TooltipProps['overlayStyle'];
   /**
    * @description The position of the tooltip relative to the target
    * @enum ["top","left","right","bottom","topLeft","topRight","bottomLeft","bottomRight","leftTop","leftBottom","rightTop","rightBottom"]
@@ -72,6 +67,7 @@ export interface ActionIconProps extends LucideIconProps, FlexboxProps {
    * @default false
    */
   spotlight?: boolean;
+  styles?: TooltipProps['styles'];
   /**
    * @description The text shown in the tooltip
    */
@@ -101,18 +97,18 @@ const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
       onClick,
       children,
       loading,
-      overlayStyle,
       tooltipDelay = 0.5,
       fillOpacity,
       fillRule,
       focusable,
       disable,
       spin: iconSpinning,
+      styles,
       ...rest
     },
     ref,
   ) => {
-    const { styles, cx } = useStyles({ active: Boolean(active), glass: Boolean(glass) });
+    const { styles: s, cx } = useStyles({ active: Boolean(active), glass: Boolean(glass) });
     const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);
 
     const iconProps = {
@@ -125,7 +121,7 @@ const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
     };
 
     const content = icon && (
-      <Icon className={styles.icon} icon={icon} {...iconProps} spin={iconSpinning} />
+      <Icon className={s.icon} icon={icon} {...iconProps} spin={iconSpinning} />
     );
 
     const spin = <Icon icon={Loader2} {...iconProps} spin />;
@@ -144,7 +140,7 @@ const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
     const actionIconBlock = (
       <Flexbox
         align={'center'}
-        className={cx(styles.block, disable ? styles.disabled : styles.normal, className)}
+        className={cx(s.block, disable ? s.disabled : s.normal, className)}
         horizontal
         justify={'center'}
         onClick={handleClick}
@@ -166,8 +162,11 @@ const ActionIcon = forwardRef<HTMLDivElement, ActionIconProps>(
         mouseEnterDelay={tooltipDelay}
         onOpenChange={setTooltipOpen}
         open={tooltipOpen}
-        overlayStyle={{ pointerEvents: 'none', ...overlayStyle }}
         placement={placement}
+        styles={{
+          ...styles,
+          root: { pointerEvents: 'none', ...styles?.root },
+        }}
         title={title}
       >
         {actionIconBlock}

src/Tooltip/index.tsx

@@ -10,7 +10,15 @@ export type TooltipProps = AntdTooltipProps;
 const Tooltip = memo<TooltipProps>(({ className, arrow = false, ...rest }) => {
   const { styles, cx } = useStyles();
 
-  return <AntdTooltip arrow={arrow} overlayClassName={cx(styles.tooltip, className)} {...rest} />;
+  return (
+    <AntdTooltip
+      arrow={arrow}
+      classNames={{
+        root: cx(styles.tooltip, className),
+      }}
+      {...rest}
+    />
+  );
 });
 
 export default Tooltip;