refactor: remove unnecessary object spread syntax for genFocusOutline calls (#54622)

Co-authored-by: lijianan <574980606@qq.com>

components/_util/wave/style.ts

@@ -41,4 +41,4 @@ const genWaveStyle: GenerateStyle<WaveToken> = (token) => {
   };
 };
 
-export default genComponentStyleHook('Wave', (token) => [genWaveStyle(token)]);
+export default genComponentStyleHook('Wave', genWaveStyle);

components/calendar/style/index.ts

@@ -269,7 +269,7 @@ export default genStyleHooks(
         .equal() as number,
     });
 
-    return [genCalendarStyles(calendarToken)];
+    return genCalendarStyles(calendarToken);
   },
   prepareComponentToken,
 );

components/cascader/style/index.ts

@@ -109,7 +109,7 @@ export const prepareComponentToken = (token: GlobalToken) => {
   };
 };
 
-export default genStyleHooks('Cascader', (token) => [genBaseStyle(token)], prepareComponentToken, {
+export default genStyleHooks('Cascader', genBaseStyle, prepareComponentToken, {
   unitless: {
     optionSelectedFontWeight: true,
   },

components/cascader/style/panel.ts

@@ -37,8 +37,4 @@ const genPanelStyle: GenerateStyle<CascaderToken> = (token: CascaderToken): CSSO
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook(
-  ['Cascader', 'Panel'],
-  (token) => genPanelStyle(token),
-  prepareComponentToken,
-);
+export default genComponentStyleHook(['Cascader', 'Panel'], genPanelStyle, prepareComponentToken);

components/checkbox/style/index.ts

@@ -101,9 +101,7 @@ export const genCheckboxStyle: GenerateStyle<CheckboxToken> = (token) => {
           opacity: 0,
           margin: 0,
 
-          [`&:focus-visible + ${checkboxCls}-inner`]: {
-            ...genFocusOutline(token),
-          },
+          [`&:focus-visible + ${checkboxCls}-inner`]: genFocusOutline(token),
         },
 
         // Wrapper > Checkbox > inner
@@ -278,7 +276,7 @@ export function getStyle(prefixCls: string, token: FullToken<'Checkbox'>) {
     checkboxSize: token.controlInteractiveSize,
   });
 
-  return [genCheckboxStyle(checkboxToken)];
+  return genCheckboxStyle(checkboxToken);
 }
 
 export default genStyleHooks('Checkbox', (token, { prefixCls }) => [getStyle(prefixCls, token)]);

components/color-picker/style/index.ts

@@ -353,5 +353,5 @@ export default genStyleHooks('ColorPicker', (token) => {
       .equal() as number,
   });
 
-  return [genColorPickerStyle(colorPickerToken)];
+  return genColorPickerStyle(colorPickerToken);
 });

components/empty/style/index.ts

@@ -107,5 +107,5 @@ export default genStyleHooks('Empty', (token) => {
     emptyImgHeightSM: calc(controlHeightLG).mul(0.875).equal(),
   });
 
-  return [genSharedEmptyStyle(emptyToken)];
+  return genSharedEmptyStyle(emptyToken);
 });

components/form/style/fallbackCmp.ts

@@ -27,5 +27,5 @@ const genFallbackStyle: GenerateStyle<FormToken> = (token) => {
 export default genSubStyleComponent(['Form', 'item-item'], (token, { rootPrefixCls }) => {
   const formToken = prepareToken(token, rootPrefixCls);
 
-  return [genFallbackStyle(formToken)];
+  return genFallbackStyle(formToken);
 });

components/input/style/otp.ts

@@ -63,8 +63,7 @@ export default genStyleHooks(
   ['Input', 'OTP'],
   (token) => {
     const inputToken = mergeToken<InputToken>(token, initInputToken(token));
-
-    return [genOTPStyle(inputToken)];
+    return genOTPStyle(inputToken);
   },
   initComponentToken,
 );

components/input/style/textarea.ts

@@ -124,8 +124,7 @@ export default genStyleHooks(
   ['Input', 'TextArea'],
   (token) => {
     const inputToken = mergeToken<InputToken>(token, initInputToken(token));
-
-    return [genTextAreaStyle(inputToken)];
+    return genTextAreaStyle(inputToken);
   },
   initComponentToken,
   {

components/layout/style/index.ts

@@ -224,6 +224,6 @@ export const DEPRECATED_TOKENS: [keyof ComponentToken, keyof ComponentToken][] =
   ['colorBgTrigger', 'triggerBg'],
 ];
 
-export default genStyleHooks('Layout', (token) => [genLayoutStyle(token)], prepareComponentToken, {
+export default genStyleHooks('Layout', genLayoutStyle, prepareComponentToken, {
   deprecatedTokens: DEPRECATED_TOKENS,
 });

components/layout/style/sider.ts

@@ -128,11 +128,6 @@ const genSiderStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
   };
 };
 
-export default genStyleHooks(
-  ['Layout', 'Sider'],
-  (token) => [genSiderStyle(token)],
-  prepareComponentToken,
-  {
-    deprecatedTokens: DEPRECATED_TOKENS,
-  },
-);
+export default genStyleHooks(['Layout', 'Sider'], genSiderStyle, prepareComponentToken, {
+  deprecatedTokens: DEPRECATED_TOKENS,
+});

components/mentions/style/index.ts

@@ -306,7 +306,7 @@ export default genStyleHooks(
   'Mentions',
   (token) => {
     const mentionsToken = mergeToken<MentionsToken>(token, initInputToken(token));
-    return [genMentionsStyle(mentionsToken)];
+    return genMentionsStyle(mentionsToken);
   },
   prepareComponentToken,
 );

components/menu/style/theme.ts

@@ -4,9 +4,7 @@ import type { CSSInterpolation } from '@ant-design/cssinjs';
 import type { MenuToken } from '.';
 import { genFocusOutline } from '../../style';
 
-const accessibilityFocus = (token: MenuToken) => ({
-  ...genFocusOutline(token),
-});
+const accessibilityFocus = (token: MenuToken) => genFocusOutline(token);
 
 const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation => {
   const {

components/message/style/index.ts

@@ -213,7 +213,7 @@ export default genStyleHooks(
     const combinedToken = mergeToken<MessageToken>(token, {
       height: 150,
     });
-    return [genMessageStyle(combinedToken)];
+    return genMessageStyle(combinedToken);
   },
   prepareComponentToken,
 );

components/modal/style/confirm.ts

@@ -127,7 +127,7 @@ export default genSubStyleComponent(
   (token) => {
     const modalToken = prepareToken(token);
 
-    return [genModalConfirmStyle(modalToken)];
+    return genModalConfirmStyle(modalToken);
   },
   prepareComponentToken,
   {

components/pagination/style/bordered.ts

@@ -105,8 +105,7 @@ export default genSubStyleComponent(
   ['Pagination', 'bordered'],
   (token) => {
     const paginationToken = prepareToken(token);
-
-    return [genBorderedStyle(paginationToken)];
+    return genBorderedStyle(paginationToken);
   },
   prepareComponentToken,
 );

components/pagination/style/index.ts

@@ -683,9 +683,7 @@ const genPaginationFocusStyle: GenerateStyle<PaginationToken> = (token) => {
       },
 
       [`${componentCls}-prev, ${componentCls}-next`]: {
-        [`&:focus-visible ${componentCls}-item-link`]: {
-          ...genFocusOutline(token),
-        },
+        [`&:focus-visible ${componentCls}-item-link`]: genFocusOutline(token),
       },
     },
   };

components/radio/style/index.ts

@@ -227,9 +227,7 @@ const getRadioBasicStyle: GenerateStyle<RadioToken> = (token) => {
         borderColor: colorPrimary,
       },
 
-      [`${componentCls}-input:focus-visible + ${radioInnerPrefixCls}`]: {
-        ...genFocusOutline(token),
-      },
+      [`${componentCls}-input:focus-visible + ${radioInnerPrefixCls}`]: genFocusOutline(token),
 
       [`${componentCls}:hover::after, ${componentCls}-wrapper:hover &::after`]: {
         visibility: 'visible',
@@ -475,9 +473,7 @@ const getRadioButtonStyle: GenerateStyle<RadioToken> = (token) => {
         color: colorPrimary,
       },
 
-      '&:has(:focus-visible)': {
-        ...genFocusOutline(token),
-      },
+      '&:has(:focus-visible)': genFocusOutline(token),
 
       [`${componentCls}-inner, input[type='checkbox'], input[type='radio']`]: {
         width: 0,

components/rate/style/index.ts

@@ -140,7 +140,7 @@ export default genStyleHooks(
   'Rate',
   (token) => {
     const rateToken = mergeToken<RateToken>(token, {});
-    return [genRateStyle(rateToken)];
+    return genRateStyle(rateToken);
   },
   prepareComponentToken,
 );

components/segmented/style/index.ts

@@ -157,9 +157,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
           color: token.itemSelectedColor,
         },
 
-        '&-focused': {
-          ...genFocusOutline(token),
-        },
+        '&-focused': genFocusOutline(token),
 
         '&::after': {
           content: '""',
@@ -311,7 +309,7 @@ export default genStyleHooks(
       segmentedPaddingHorizontal: calc(token.controlPaddingHorizontal).sub(lineWidth).equal(),
       segmentedPaddingHorizontalSM: calc(token.controlPaddingHorizontalSM).sub(lineWidth).equal(),
     });
-    return [genSegmentedStyle(segmentedToken)];
+    return genSegmentedStyle(segmentedToken);
   },
   prepareComponentToken,
 );

components/skeleton/style/index.ts

@@ -404,7 +404,7 @@ export default genStyleHooks(
       skeletonLoadingBackground: `linear-gradient(90deg, ${token.gradientFromColor} 25%, ${token.gradientToColor} 37%, ${token.gradientFromColor} 63%)`,
       skeletonLoadingMotionDuration: '1.4s',
     });
-    return [genBaseStyle(skeletonToken)];
+    return genBaseStyle(skeletonToken);
   },
   prepareComponentToken,
   {

components/spin/style/index.ts

@@ -335,7 +335,7 @@ export default genStyleHooks(
     const spinToken = mergeToken<SpinToken>(token, {
       spinDotDefault: token.colorTextDescription,
     });
-    return [genSpinStyle(spinToken)];
+    return genSpinStyle(spinToken);
   },
   prepareComponentToken,
 );

components/splitter/style/index.ts

@@ -397,8 +397,4 @@ export const prepareComponentToken: GetDefaultToken<'Splitter'> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genStyleHooks(
-  'Splitter',
-  (token) => [genSplitterStyle(token)],
-  prepareComponentToken,
-);
+export default genStyleHooks('Splitter', genSplitterStyle, prepareComponentToken);

components/statistic/style/index.ts

@@ -79,7 +79,7 @@ export default genStyleHooks(
   'Statistic',
   (token) => {
     const statisticToken = mergeToken<StatisticToken>(token, {});
-    return [genStatisticStyle(statisticToken)];
+    return genStatisticStyle(statisticToken);
   },
   prepareComponentToken,
 );

components/steps/style/index.ts

@@ -213,11 +213,7 @@ const genStepsItemStyle: GenerateStyle<StepsToken, CSSObject> = (token) => {
     [`${stepsItemCls}-container`]: {
       outline: 'none',
 
-      '&:focus-visible': {
-        [stepItemIconCls]: {
-          ...genFocusOutline(token),
-        },
-      },
+      [`&:focus-visible ${stepItemIconCls}`]: genFocusOutline(token),
     },
     [`${stepItemIconCls}, ${stepsItemCls}-content`]: {
       display: 'inline-block',
@@ -477,7 +473,7 @@ export default genStyleHooks(
       inlineTailColor: colorBorderSecondary,
     });
 
-    return [genStepsStyle(stepsToken)];
+    return genStepsStyle(stepsToken);
   },
   prepareComponentToken,
 );

components/style/index.tsx

@@ -139,9 +139,7 @@ export const genFocusOutline = (token: AliasToken, offset?: number): CSSObject =
 });
 
 export const genFocusStyle = (token: AliasToken, offset?: number): CSSObject => ({
-  '&:focus-visible': {
-    ...genFocusOutline(token, offset),
-  },
+  '&:focus-visible': genFocusOutline(token, offset),
 });
 
 export const genIconStyle = (iconPrefixCls: string): CSSObject => ({

components/theme/util/useResetIconStyle.ts

@@ -19,7 +19,7 @@ const useResetIconStyle = (iconPrefixCls: string, csp?: CSPConfig) => {
         name: 'antd',
       },
     },
-    () => [genIconStyle(iconPrefixCls)],
+    () => genIconStyle(iconPrefixCls),
   );
 };
 

components/timeline/style/index.ts

@@ -270,7 +270,7 @@ export default genStyleHooks(
       paddingInlineEnd: 2,
     });
 
-    return [genTimelineStyle(timeLineToken)];
+    return genTimelineStyle(timeLineToken);
   },
   prepareComponentToken,
 );

components/tour/style/index.ts

@@ -287,7 +287,7 @@ export default genStyleHooks(
       indicatorHeight: 6,
       tourBorderRadius: borderRadiusLG,
     });
-    return [genBaseStyle(TourToken)];
+    return genBaseStyle(TourToken);
   },
   prepareComponentToken,
 );

components/tree-select/style/index.ts

@@ -88,7 +88,7 @@ export default function useTreeSelectStyle(
     'TreeSelect',
     (token) => {
       const treeSelectToken = mergeToken<TreeSelectToken>(token, { treePrefixCls });
-      return [genBaseStyle(treeSelectToken)];
+      return genBaseStyle(treeSelectToken);
     },
     initComponentToken,
   )(prefixCls, rootCls);

components/tree/style/index.ts

@@ -138,9 +138,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject =>
         transform: 'rotate(90deg)',
       },
 
-      [`&-focused:not(:hover):not(${treeCls}-active-focused)`]: {
-        ...genFocusOutline(token),
-      },
+      [`&-focused:not(:hover):not(${treeCls}-active-focused)`]: genFocusOutline(token),
 
       // =================== Virtual List ===================
       [`${treeCls}-list-holder-inner`]: {

components/typography/style/index.ts

@@ -136,8 +136,4 @@ export const prepareComponentToken: GetDefaultToken<'Typography'> = () => ({
 });
 
 // ============================== Export ==============================
-export default genStyleHooks(
-  'Typography',
-  (token) => [genTypographyStyle(token)],
-  prepareComponentToken,
-);
+export default genStyleHooks('Typography', genTypographyStyle, prepareComponentToken);