Merge branch 'master' into master-merge-feature

.dumi/pages/index/components/ComponentsList.tsx

@@ -257,7 +257,7 @@ const ComponentsList: React.FC = () => {
             style={{ width: 400 }}
             message="Ant Design 5.0"
             description={locale.sampleContent}
-            closable
+            closable={{ closeIcon: true, disabled: true }}
           />
         ),
       },

.dumi/theme/slots/Header/index.tsx

@@ -93,6 +93,7 @@ const useStyle = createStyles(({ token, css }) => {
         .dumi-default-search-popover {
           inset-inline-start: ${token.paddingSM}px;
           inset-inline-end: unset;
+          z-index: 1;
           &::before {
             inset-inline-start: 100px;
             inset-inline-end: unset;

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -23,7 +23,7 @@ import { useLocale } from '../../locale';
 import { useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
-import { getRangePlaceholder, transPlacement2DropdownAlign, useIcons } from '../util';
+import { getRangePlaceholder, useIcons } from '../util';
 import { TIME } from './constant';
 import type { RangePickerProps } from './interface';
 import useComponents from './useComponents';
@@ -117,7 +117,6 @@ const generateRangePicker = <DateType extends AnyObject = AnyObject>(
           }
           disabled={mergedDisabled}
           ref={innerRef as any} // Need to modify PickerRef
-          popupAlign={transPlacement2DropdownAlign(direction, placement)}
           placement={placement}
           placeholder={getRangePlaceholder(locale, picker, placeholder)}
           suffixIcon={suffixNode}

components/date-picker/generatePicker/generateSinglePicker.tsx

@@ -23,7 +23,7 @@ import { useLocale } from '../../locale';
 import { useCompactItemContext } from '../../space/Compact';
 import enUS from '../locale/en_US';
 import useStyle from '../style';
-import { getPlaceholder, transPlacement2DropdownAlign, useIcons } from '../util';
+import { getPlaceholder, useIcons } from '../util';
 import {
   MONTH,
   MONTHPICKER,
@@ -160,7 +160,6 @@ const generatePicker = <DateType extends AnyObject = AnyObject>(
             ref={innerRef}
             placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
             suffixIcon={suffixNode}
-            dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
             placement={placement}
             prevIcon={<span className={`${prefixCls}-prev-icon`} />}
             nextIcon={<span className={`${prefixCls}-next-icon`} />}

components/date-picker/index.tsx

@@ -8,7 +8,6 @@ import type {
   PickerProps,
   PickerPropsWithMultiple,
 } from './generatePicker/interface';
-import { transPlacement2DropdownAlign } from './util';
 
 export type DatePickerProps<ValueType = Dayjs | Dayjs> = PickerPropsWithMultiple<
   Dayjs,
@@ -30,24 +29,11 @@ export type DatePickerType = typeof DatePicker & {
   generatePicker: typeof generatePicker;
 };
 
-function postPureProps(props: DatePickerProps) {
-  const dropdownAlign = transPlacement2DropdownAlign(props.direction, props.placement);
-
-  dropdownAlign.overflow!.adjustY = false;
-  dropdownAlign.overflow!.adjustX = false;
-
-  return {
-    ...props,
-    dropdownAlign,
-    popupAlign: dropdownAlign,
-  };
-}
-
 // We don't care debug panel
 /* istanbul ignore next */
-const PurePanel = genPurePanel(DatePicker, 'picker', null, postPureProps);
+const PurePanel = genPurePanel(DatePicker, 'picker', null);
 (DatePicker as DatePickerType)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
-const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker', null, postPureProps);
+const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker', null);
 (DatePicker as DatePickerType)._InternalRangePanelDoNotUseOrYouWillBeFired = PureRangePanel;
 (DatePicker as DatePickerType).generatePicker = generatePicker;
 

components/date-picker/style/panel.ts

@@ -33,6 +33,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
       height: cellHeight,
       transform: 'translateY(-50%)',
       content: '""',
+      pointerEvents: 'none',
     },
 
     // >>> Default
@@ -464,11 +465,9 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
             },
           },
 
-          '&:hover td': {
+          '&:hover td:before': {
-            '&:before': {
             background: cellHoverBg,
           },
-          },
 
           '&-range-start td, &-range-end td, &-selected td, &-hover td': {
             // Rise priority to override hover style

components/date-picker/util.ts

@@ -1,9 +1,6 @@
 import * as React from 'react';
-import type { AlignType } from '@rc-component/trigger';
 import type { PickerMode } from 'rc-picker/lib/interface';
 
-import type { SelectCommonPlacement } from '../_util/motion';
-import type { DirectionType } from '../config-provider';
 import useSelectIcons from '../select/useIcons';
 import type { PickerLocale, PickerProps } from './generatePicker';
 
@@ -61,53 +58,6 @@ export function getRangePlaceholder(
   return locale.lang.rangePlaceholder;
 }
 
-export function transPlacement2DropdownAlign(
-  direction: DirectionType,
-  placement?: SelectCommonPlacement,
-): AlignType {
-  const overflow = {
-    adjustX: 1,
-    adjustY: 1,
-  };
-  switch (placement) {
-    case 'bottomLeft': {
-      return {
-        points: ['tl', 'bl'],
-        offset: [0, 4],
-        overflow,
-      };
-    }
-    case 'bottomRight': {
-      return {
-        points: ['tr', 'br'],
-        offset: [0, 4],
-        overflow,
-      };
-    }
-    case 'topLeft': {
-      return {
-        points: ['bl', 'tl'],
-        offset: [0, -4],
-        overflow,
-      };
-    }
-    case 'topRight': {
-      return {
-        points: ['br', 'tr'],
-        offset: [0, -4],
-        overflow,
-      };
-    }
-    default: {
-      return {
-        points: direction === 'rtl' ? ['tr', 'br'] : ['tl', 'bl'],
-        offset: [0, 4],
-        overflow,
-      };
-    }
-  }
-}
-
 export function useIcons(props: Pick<PickerProps, 'allowClear' | 'removeIcon'>, prefixCls: string) {
   const { allowClear = true } = props;
 

components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -3981,7 +3981,7 @@ Array [
         tabindex="-1"
       >
         <span
-          class="ant-dropdown-menu-title-content"
+          class="ant-dropdown-menu-title-content ant-dropdown-menu-title-content-with-extra"
         >
           Profile
           <span
@@ -4015,7 +4015,7 @@ Array [
         tabindex="-1"
       >
         <span
-          class="ant-dropdown-menu-title-content"
+          class="ant-dropdown-menu-title-content ant-dropdown-menu-title-content-with-extra"
         >
           Billing
           <span
@@ -4068,7 +4068,7 @@ Array [
           </svg>
         </span>
         <span
-          class="ant-dropdown-menu-title-content"
+          class="ant-dropdown-menu-title-content ant-dropdown-menu-title-content-with-extra"
         >
           Settings
           <span

components/dropdown/__tests__/index.test.tsx

@@ -360,6 +360,9 @@ describe('Dropdown', () => {
       </Dropdown>,
     );
 
+    expect(
+      container.querySelector('.ant-dropdown-menu-title-content-with-extra'),
+    ).toBeInTheDocument();
     expect(container.querySelector('.ant-dropdown-menu-item-extra')?.textContent).toBe(text);
   });
 });

components/dropdown/style/index.ts

@@ -242,10 +242,14 @@ const genBaseStyle: GenerateStyle<DropdownToken> = (token) => {
           },
 
           [`${menuCls}-title-content`]: {
-            display: 'flex',
-            alignItems: 'center',
             flex: 'auto',
 
+            '&-with-extra': {
+              display: 'inline-flex',
+              alignItems: 'center',
+              width: '100%',
+            },
+
             '> a': {
               color: 'inherit',
               transition: `all ${motionDurationMid}`,

components/menu/MenuItem.tsx

@@ -36,7 +36,7 @@ type GenericComponent = Omit<MenuItemComponent, ''> &
   ) => ReturnType<MenuItemComponent>);
 
 const MenuItem: GenericComponent = (props) => {
-  const { className, children, icon, title, danger } = props;
+  const { className, children, icon, title, danger, extra } = props;
   const {
     prefixCls,
     firstLevel,
@@ -47,7 +47,15 @@ const MenuItem: GenericComponent = (props) => {
   const renderItemChildren = (inlineCollapsed: boolean) => {
     const label = (children as React.ReactNode[])?.[0];
 
-    const wrapNode = <span className={`${prefixCls}-title-content`}>{children}</span>;
+    const wrapNode = (
+      <span
+        className={classNames(`${prefixCls}-title-content`, {
+          [`${prefixCls}-title-content-with-extra`]: !!extra || extra === 0,
+        })}
+      >
+        {children}
+      </span>
+    );
     // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
     // ref: https://github.com/ant-design/ant-design/pull/23456
     if (!icon || (React.isValidElement(children) && children.type === 'span')) {

components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -1700,6 +1700,357 @@ exports[`renders components/menu/demo/component-token.tsx extend context correct
 
 exports[`renders components/menu/demo/component-token.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/menu/demo/extra-style.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
+      data-menu-list="true"
+      role="menu"
+      style="width: 256px;"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open ant-menu-submenu-selected"
+        role="none"
+      >
+        <div
+          aria-controls="rc-menu-uuid-test-sub1-popup"
+          aria-expanded="true"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          data-menu-id="rc-menu-uuid-test-sub1"
+          role="menuitem"
+          style="padding-left: 24px;"
+          tabindex="-1"
+        >
+          <span
+            aria-label="mail"
+            class="anticon anticon-mail ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="mail"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation One
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <div
+          class="ant-menu-submenu ant-menu-submenu-popup ant-menu ant-menu-light"
+          style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+        >
+          <ul
+            class="ant-menu ant-menu-sub ant-menu-inline"
+            data-menu-list="true"
+            id="rc-menu-uuid-test-sub1-popup"
+            role="menu"
+          >
+            <li
+              class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
+              data-menu-id="rc-menu-uuid-test-1"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content"
+              >
+                <div
+                  class="ant-flex ant-flex-justify-space-between"
+                >
+                  <span>
+                    Option 1
+                  </span>
+                  <span
+                    aria-label="down"
+                    class="anticon anticon-down"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="down"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+            <li
+              class="ant-menu-item"
+              data-menu-id="rc-menu-uuid-test-2"
+              role="menuitem"
+              style="padding-left: 48px;"
+              tabindex="-1"
+            >
+              <span
+                class="ant-menu-title-content ant-menu-title-content-with-extra"
+              >
+                Option 2
+                <span
+                  class="ant-menu-item-extra"
+                >
+                  ⌘P
+                </span>
+              </span>
+            </li>
+            <div
+              class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+              style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+            >
+              <div
+                class="ant-tooltip-arrow"
+                style="position: absolute; top: 0px; left: 0px;"
+              />
+              <div
+                class="ant-tooltip-content"
+              >
+                <div
+                  class="ant-tooltip-inner"
+                  role="tooltip"
+                />
+              </div>
+            </div>
+          </ul>
+        </div>
+        <ul
+          class="ant-menu ant-menu-sub ant-menu-inline"
+          data-menu-list="true"
+          id="rc-menu-uuid-test-sub1-popup"
+          role="menu"
+        >
+          <li
+            class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
+            data-menu-id="rc-menu-uuid-test-1"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              <div
+                class="ant-flex ant-flex-justify-space-between"
+              >
+                <span>
+                  Option 1
+                </span>
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+          <li
+            class="ant-menu-item"
+            data-menu-id="rc-menu-uuid-test-2"
+            role="menuitem"
+            style="padding-left: 48px;"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content ant-menu-title-content-with-extra"
+            >
+              Option 2
+              <span
+                class="ant-menu-item-extra"
+              >
+                ⌘P
+              </span>
+            </span>
+          </li>
+          <div
+            class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+            style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+          >
+            <div
+              class="ant-tooltip-arrow"
+              style="position: absolute; top: 0px; left: 0px;"
+            />
+            <div
+              class="ant-tooltip-content"
+            >
+              <div
+                class="ant-tooltip-inner"
+                role="tooltip"
+              />
+            </div>
+          </div>
+        </ul>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display: none;"
+    />
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark"
+      data-menu-list="true"
+      role="menu"
+      style="width: 256px;"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-item"
+        data-menu-id="rc-menu-uuid-test-1"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content ant-menu-title-content-with-extra"
+        >
+          Users
+          <span
+            class="ant-menu-item-extra"
+          >
+            ⌘U
+          </span>
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+      <li
+        class="ant-menu-item"
+        data-menu-id="rc-menu-uuid-test-2"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content ant-menu-title-content-with-extra"
+        >
+          Profile
+          <span
+            class="ant-menu-item-extra"
+          >
+            ⌘P
+          </span>
+        </span>
+      </li>
+      <div
+        class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-menu-inline-collapsed-tooltip ant-tooltip-placement-right"
+        style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
+      >
+        <div
+          class="ant-tooltip-arrow"
+          style="position: absolute; top: 0px; left: 0px;"
+        />
+        <div
+          class="ant-tooltip-content"
+        >
+          <div
+            class="ant-tooltip-inner"
+            role="tooltip"
+          />
+        </div>
+      </div>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display: none;"
+    />
+  </div>
+</div>
+`;
+
+exports[`renders components/menu/demo/extra-style.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/menu/demo/horizontal.tsx extend context correctly 1`] = `
 Array [
   <ul

components/menu/__tests__/__snapshots__/demo.test.tsx.snap

@@ -780,6 +780,178 @@ exports[`renders components/menu/demo/component-token.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/menu/demo/extra-style.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-vertical ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
+      data-menu-list="true"
+      role="menu"
+      style="width:256px"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
+        role="none"
+      >
+        <div
+          aria-expanded="true"
+          aria-haspopup="true"
+          class="ant-menu-submenu-title"
+          role="menuitem"
+          style="padding-left:24px"
+          tabindex="-1"
+        >
+          <span
+            aria-label="mail"
+            class="anticon anticon-mail ant-menu-item-icon"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="mail"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+              />
+            </svg>
+          </span>
+          <span
+            class="ant-menu-title-content"
+          >
+            Navigation One
+          </span>
+          <i
+            class="ant-menu-submenu-arrow"
+          />
+        </div>
+        <ul
+          class="ant-menu ant-menu-sub ant-menu-inline"
+          data-menu-list="true"
+          role="menu"
+        >
+          <li
+            class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content"
+            >
+              <div
+                class="ant-flex ant-flex-justify-space-between"
+              >
+                <span>
+                  Option 1
+                </span>
+                <span
+                  aria-label="down"
+                  class="anticon anticon-down"
+                  role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    data-icon="down"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
+                  >
+                    <path
+                      d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                    />
+                  </svg>
+                </span>
+              </div>
+            </span>
+          </li>
+          <li
+            class="ant-menu-item"
+            role="menuitem"
+            style="padding-left:48px"
+            tabindex="-1"
+          >
+            <span
+              class="ant-menu-title-content ant-menu-title-content-with-extra"
+            >
+              Option 2
+              <span
+                class="ant-menu-item-extra"
+              >
+                ⌘P
+              </span>
+            </span>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display:none"
+    />
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <ul
+      class="ant-menu ant-menu-root ant-menu-vertical ant-menu-dark"
+      data-menu-list="true"
+      role="menu"
+      style="width:256px"
+      tabindex="0"
+    >
+      <li
+        class="ant-menu-item"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content ant-menu-title-content-with-extra"
+        >
+          Users
+          <span
+            class="ant-menu-item-extra"
+          >
+            ⌘U
+          </span>
+        </span>
+      </li>
+      <li
+        class="ant-menu-item"
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span
+          class="ant-menu-title-content ant-menu-title-content-with-extra"
+        >
+          Profile
+          <span
+            class="ant-menu-item-extra"
+          >
+            ⌘P
+          </span>
+        </span>
+      </li>
+    </ul>
+    <div
+      aria-hidden="true"
+      style="display:none"
+    />
+  </div>
+</div>
+`;
+
 exports[`renders components/menu/demo/horizontal.tsx correctly 1`] = `
 Array [
   <ul

components/menu/__tests__/index.test.tsx

@@ -1162,6 +1162,7 @@ describe('Menu', () => {
     const text = '⌘P';
     const { container } = render(<Menu items={[{ label: 'profile', key: '1', extra: text }]} />);
 
+    expect(container.querySelector('.ant-menu-title-content-with-extra')).toBeInTheDocument();
     expect(container.querySelector('.ant-menu-item-extra')?.textContent).toBe(text);
   });
 });

components/menu/demo/extra-style.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+调试使用
+
+## en-US
+
+Debug usage

components/menu/demo/extra-style.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { DownOutlined, MailOutlined } from '@ant-design/icons';
+import type { MenuProps } from 'antd';
+import { Flex, Menu, Space } from 'antd';
+
+type MenuItem = Required<MenuProps>['items'][number];
+
+const items1: MenuItem[] = [
+  {
+    key: 'sub1',
+    icon: <MailOutlined />,
+    label: 'Navigation One',
+    children: [
+      {
+        key: '1',
+        label: (
+          <Flex justify="space-between">
+            <span>Option 1</span>
+            <DownOutlined />
+          </Flex>
+        ),
+      },
+      {
+        key: '2',
+        label: 'Option 2',
+        extra: '⌘P',
+      },
+    ],
+  },
+];
+
+const items2: MenuItem[] = [
+  { key: '1', label: 'Users', extra: '⌘U' },
+  { key: '2', label: 'Profile', extra: '⌘P' },
+];
+
+const App: React.FC = () => (
+  <Space direction="vertical">
+    <Menu
+      mode="inline"
+      defaultOpenKeys={['sub1']}
+      defaultSelectedKeys={['1']}
+      style={{ width: 256 }}
+      items={items1}
+    />
+    <Menu theme="dark" style={{ width: 256 }} items={items2} />
+  </Space>
+);
+
+export default App;

components/menu/index.en-US.md

@@ -33,6 +33,7 @@ More layouts with navigation: [Layout](/components/layout).
 <code src="./demo/style-debug.tsx" debug>Style debug</code>
 <code src="./demo/menu-v4.tsx" debug>Menu v4</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
+<code src="./demo/extra-style.tsx" debug>Extra Style debug</code>
 
 ## API
 

components/menu/index.zh-CN.md

@@ -34,6 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA
 <code src="./demo/style-debug.tsx" debug>Style debug</code>
 <code src="./demo/menu-v4.tsx" debug>v4 版本 Menu</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
+<code src="./demo/extra-style.tsx" debug>Extra Style debug</code>
 
 ## API
 

components/menu/style/index.ts

@@ -635,12 +635,12 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
         },
 
         [`${componentCls}-title-content`]: {
-          display: 'inline-flex',
-          alignItems: 'center',
           transition: `color ${motionDurationSlow}`,
 
-          '> a:first-child': {
+          '&-with-extra': {
-            flexGrow: 1,
+            display: 'inline-flex',
+            alignItems: 'center',
+            width: '100%',
           },
 
           // https://github.com/ant-design/ant-design/issues/41143
@@ -653,7 +653,6 @@ const getBaseStyle: GenerateStyle<MenuToken> = (token) => {
             marginInlineStart: 'auto',
             paddingInlineStart: token.padding,
             fontSize: token.fontSizeSM,
-            color: token.colorTextDescription,
           },
         },
 

components/menu/style/theme.ts

@@ -61,9 +61,11 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
       },
 
       // ======================== Item ========================
-      [`${componentCls}-item-group-title`]: {
+      [`${componentCls}-item`]: {
+        '&-group-title, &-extra': {
           color: groupTitleColor,
         },
+      },
 
       [`${componentCls}-submenu-selected`]: {
         [`> ${componentCls}-submenu-title`]: {

components/splitter/style/index.ts

@@ -112,14 +112,14 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
           zIndex: 1,
 
           // Hover background
-          '&:before': {
+          '&::before': {
             content: '""',
             background: controlItemBgHover,
             ...centerStyle,
           },
 
           // Spinner
-          '&:after': {
+          '&::after': {
             content: '""',
             background: colorFill,
             ...centerStyle,
@@ -127,7 +127,7 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
 
           // Hover
           [`&:hover:not(${splitBarCls}-dragger-active)`]: {
-            '&:before': {
+            '&::before': {
               background: controlItemBgActive,
             },
           },
@@ -136,7 +136,7 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
           '&-active': {
             zIndex: 2,
 
-            '&:before': {
+            '&::before': {
               background: controlItemBgActiveHover,
             },
           },
@@ -147,12 +147,12 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
 
             '&, &:hover, &-active': {
               cursor: 'default',
-              '&:before': {
+              '&::before': {
                 background: controlItemBgHover,
               },
             },
 
-            '&:after': {
+            '&::after': {
               display: 'none',
             },
           },
@@ -223,12 +223,12 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
             height: '100%',
             width: splitTriggerSize,
 
-            '&:before': {
+            '&::before': {
               height: '100%',
               width: splitBarSize,
             },
 
-            '&:after': {
+            '&::after': {
               height: splitBarDraggableSize,
               width: splitBarSize,
             },
@@ -278,12 +278,12 @@ const genSplitterStyle: GenerateStyle<SplitterToken> = (token: SplitterToken): C
             width: '100%',
             height: splitTriggerSize,
 
-            '&:before': {
+            '&::before': {
               width: '100%',
               height: splitBarSize,
             },
 
-            '&:after': {
+            '&::after': {
               width: splitBarDraggableSize,
               height: splitBarSize,
             },

package.json

@@ -130,8 +130,8 @@
     "rc-image": "~7.11.0",
     "rc-input": "~1.6.3",
     "rc-input-number": "~9.3.0",
-    "rc-mentions": "~2.16.1",
+    "rc-mentions": "~2.17.0",
-    "rc-menu": "~9.15.1",
+    "rc-menu": "~9.16.0",
     "rc-motion": "^2.9.3",
     "rc-notification": "~5.6.2",
     "rc-pagination": "~4.3.0",
@@ -145,7 +145,7 @@
     "rc-steps": "~6.0.1",
     "rc-switch": "~4.1.0",
     "rc-table": "~7.48.1",
-    "rc-tabs": "~15.3.0",
+    "rc-tabs": "~15.4.0",
     "rc-textarea": "~1.8.2",
     "rc-tooltip": "~6.2.1",
     "rc-tree": "~5.10.1",