feat: mentions support cssVar (#45796)

* feat: mentions support cssVar

* feat: optimize code

components/mentions/index.tsx

@@ -18,6 +18,8 @@ import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
 import { FormItemInputContext } from '../form/context';
 import Spin from '../spin';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export const { Option } = RcMentions;
 
@@ -154,7 +156,9 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
   const prefixCls = getPrefixCls('mentions', customizePrefixCls);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
 
   const mergedClassName = classNames(
     {
@@ -167,6 +171,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
     !hasFeedback && className,
     rootClassName,
     hashId,
+    rootCls,
   );
 
   const mentions = (
@@ -181,7 +186,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
       filterOption={mentionsfilterOption}
       onFocus={onFocus}
       onBlur={onBlur}
-      dropdownClassName={classNames(popupClassName, rootClassName, hashId)}
+      dropdownClassName={classNames(popupClassName, rootClassName, hashId, rootCls)}
       ref={mergedRef}
       options={mergedOptions}
       suffix={hasFeedback && feedbackIcon}
@@ -191,7 +196,7 @@ const InternalMentions: React.ForwardRefRenderFunction<MentionsRef, MentionProps
     </RcMentions>
   );
 
-  return wrapSSR(mentions);
+  return wrapCSSVar(mentions);
 };
 
 const Mentions = React.forwardRef<MentionsRef, MentionProps>(

components/mentions/style/cssVar.ts

@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Mentions', prepareComponentToken);

components/mentions/style/index.ts

@@ -8,8 +8,9 @@ import {
   initInputToken,
 } from '../../input/style';
 import { resetComponent, textEllipsis } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+import { unit } from '@ant-design/cssinjs';
 
 export interface ComponentToken extends SharedComponentToken {
   /**
@@ -29,7 +30,10 @@ export interface ComponentToken extends SharedComponentToken {
   controlItemWidth: number;
 }
 
-type MentionsToken = FullToken<'Mentions'> & SharedInputToken;
+type MentionsToken = FullToken<'Mentions'> &
+  SharedInputToken & {
+    itemPaddingVertical: string | number;
+  };
 
 const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
   const {
@@ -49,12 +53,9 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
     borderRadius,
     borderRadiusLG,
     boxShadowSecondary,
+    itemPaddingVertical,
   } = token;
 
-  const itemPaddingVertical = Math.round(
-    (token.controlHeight - token.fontSize * token.lineHeight) / 2,
-  );
-
   return {
     [componentCls]: {
       ...resetComponent(token),
@@ -92,9 +93,9 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
       [`> textarea, ${componentCls}-measure`]: {
         color: colorText,
         boxSizing: 'border-box',
-        minHeight: controlHeight - 2,
+        minHeight: token.calc(controlHeight).sub(2),
         margin: 0,
-        padding: `${paddingBlock}px ${paddingInline}px`,
+        padding: `${unit(paddingBlock)} ${unit(paddingInline)}`,
         overflow: 'inherit',
         overflowX: 'hidden',
         overflowY: 'auto',
@@ -176,7 +177,7 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
             position: 'relative',
             display: 'block',
             minWidth: token.controlItemWidth,
-            padding: `${itemPaddingVertical}px ${controlPaddingHorizontal}px`,
+            padding: `${unit(itemPaddingVertical)} ${unit(controlPaddingHorizontal)}`,
             color: colorText,
             borderRadius,
             fontWeight: 'normal',
@@ -215,6 +216,14 @@ const genMentionsStyle: GenerateStyle<MentionsToken> = (token) => {
   };
 };
 
+export const prepareComponentToken: GetDefaultToken<'Mentions'> = (token) => ({
+  ...initComponentToken(token),
+  dropdownHeight: 250,
+  controlItemWidth: 100,
+  zIndexPopup: token.zIndexPopupBase + 50,
+  itemPaddingVertical: token.controlHeight - token.fontHeight,
+});
+
 // ============================== Export ==============================
 export default genComponentStyleHook(
   'Mentions',
@@ -222,10 +231,5 @@ export default genComponentStyleHook(
     const mentionsToken = mergeToken<MentionsToken>(token, initInputToken(token));
     return [genMentionsStyle(mentionsToken)];
   },
-  (token) => ({
+  prepareComponentToken,
-    ...initComponentToken(token),
-    dropdownHeight: 250,
-    controlItemWidth: 100,
-    zIndexPopup: token.zIndexPopupBase + 50,
-  }),
 );