chore: auto merge branches (#51331)

chore: sync master to feature

CHANGELOG.en-US.md

@@ -15,6 +15,20 @@ tag: vVERSION
 
 ---
 
+## 5.21.5
+
+`2024-10-21`
+
+- 🐞 Fix Cascader filter limitation not working when `limit` set to `false`. [#51263](https://github.com/ant-design/ant-design/pull/51263) [@dongbanban](https://github.com/dongbanban)
+- 🐞 Fix DatePicker disabled items cannot response mouse events bug. [#51294](https://github.com/ant-design/ant-design/pull/51294) [@ajenkins-mparticle](https://github.com/ajenkins-mparticle)
+- 🐞 Fix FloatButton menu problem what is difficult to click. [#51208](https://github.com/ant-design/ant-design/pull/51208) [@aojunhao123](https://github.com/aojunhao123)
+- 🐞 Fix QRCode `onRefresh` property not working properly. [#51315](https://github.com/ant-design/ant-design/pull/51315) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 Fix Typography links cannot be selected by user. [#51243](https://github.com/ant-design/ant-design/pull/51243) [@thinkasany](https://github.com/thinkasany)
+- 💄 Fix Badge incorrect token of texts. [#51252](https://github.com/ant-design/ant-design/pull/51252) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 Fix Layout lost styles of collapse button. [#51313](https://github.com/ant-design/ant-design/pull/51313) [@aojunhao123](https://github.com/aojunhao123)
+- 🛠 Improve Button event handler declaration. [#42037](https://github.com/ant-design/ant-design/pull/42037) [@SohaibRaza](https://github.com/SohaibRaza)
+- 🛠 Improve Splitter style token semantic name. [#51223](https://github.com/ant-design/ant-design/pull/51223) [@wanpan11](https://github.com/wanpan11)
+
 ## 5.21.4
 
 `2024-10-14`

CHANGELOG.zh-CN.md

@@ -15,6 +15,20 @@ tag: vVERSION
 
 ---
 
+## 5.21.5
+
+`2024-10-21`
+
+- 🐞 修复 Cascader `limit` 属性设置 `false` 不生效的问题。[#51263](https://github.com/ant-design/ant-design/pull/51263) [@dongbanban](https://github.com/dongbanban)
+- 🐞 修复 DatePicker 的禁用日期项无法响应鼠标事件的问题。[#51294](https://github.com/ant-design/ant-design/pull/51294) [@ajenkins-mparticle](https://github.com/ajenkins-mparticle)
+- 🐞 修复 FloatButton 悬浮菜单难以点击的问题。[#51208](https://github.com/ant-design/ant-design/pull/51208) [@aojunhao123](https://github.com/aojunhao123)
+- 🐞 修复 QRCode `onRefresh` 属性不生效的问题。[#51315](https://github.com/ant-design/ant-design/pull/51315) [@kiner-tang](https://github.com/kiner-tang)
+- 🐞 修复 Typography 中的超链接无法被用户选中的问题。[#51243](https://github.com/ant-design/ant-design/pull/51243) [@thinkasany](https://github.com/thinkasany)
+- 💄 修复 Badge 文本样式 token 不正确的问题。[#51252](https://github.com/ant-design/ant-design/pull/51252) [@Wxh16144](https://github.com/Wxh16144)
+- 💄 修复 Layout 折叠按钮样式缺失的问题。[#51313](https://github.com/ant-design/ant-design/pull/51313) [@aojunhao123](https://github.com/aojunhao123)
+- 🛠 优化 Button 事件处理器实现。[#42037](https://github.com/ant-design/ant-design/pull/42037) [@SohaibRaza](https://github.com/SohaibRaza)
+- 🛠 优化 Splitter 样式 token 的命名语义。[#51223](https://github.com/ant-design/ant-design/pull/51223) [@wanpan11](https://github.com/wanpan11)
+
 ## 5.21.4
 
 `2024-10-14`

components/button/button.tsx

@@ -205,15 +205,17 @@ const InternalCompoundedButton = React.forwardRef<
     }
   }, [buttonRef]);
 
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
-    const { onClick } = props;
-    // FIXME: https://github.com/ant-design/ant-design/issues/30207
-    if (innerLoading || mergedDisabled) {
-      e.preventDefault();
-      return;
-    }
-    (onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)?.(e);
-  };
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement, MouseEvent>) => {
+      // FIXME: https://github.com/ant-design/ant-design/issues/30207
+      if (innerLoading || mergedDisabled) {
+        e.preventDefault();
+        return;
+      }
+      (props.onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)?.(e);
+    },
+    [props.onClick, innerLoading, mergedDisabled],
+  );
 
   if (process.env.NODE_ENV !== 'production') {
     const warning = devUseWarning('Button');
@@ -237,7 +239,7 @@ const InternalCompoundedButton = React.forwardRef<
 
   const sizeFullName = useSize((ctxSize) => customizeSize ?? compactSize ?? groupSize ?? ctxSize);
 
-  const sizeCls = sizeFullName ? sizeClassNameMap[sizeFullName] || '' : '';
+  const sizeCls = sizeFullName ? sizeClassNameMap[sizeFullName] ?? '' : '';
 
   const iconType = innerLoading ? 'loading' : icon;
 

components/date-picker/style/panel.ts

@@ -48,8 +48,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
     },
 
     // >>> Hover
-    [`&:hover:not(${pickerCellCls}-in-view),
-    &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end)`]:
+    [`&:hover:not(${pickerCellCls}-in-view):not(${pickerCellCls}-disabled),
+    &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-disabled)`]:
       {
         [pickerCellInnerCls]: {
           background: cellHoverBg,
@@ -124,7 +124,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
     // >>> Disabled
     '&-disabled': {
       color: colorTextDisabled,
-      pointerEvents: 'none',
+      cursor: 'not-allowed',
 
       [pickerCellInnerCls]: {
         background: 'transparent',

components/qr-code/QrcodeStatus.tsx

@@ -49,5 +49,6 @@ export default function QRcodeStatus({
   return mergedStatusRender({
     status,
     locale,
+    onRefresh,
   });
 }

components/qr-code/__tests__/__snapshots__/index.test.tsx.snap

@@ -12,7 +12,15 @@ exports[`QRCode test custom status render 1`] = `
       <div
         class="custom-expired"
       >
-        QR code expired
+        <span>
+          QR code expired
+        </span>
+        <button
+          id="refresh"
+          type="button"
+        >
+          refresh
+        </button>
       </div>
     </div>
     <canvas

components/qr-code/__tests__/index.test.tsx

@@ -99,10 +99,18 @@ describe('QRCode test', () => {
     );
   });
   it('custom status render', () => {
+    const refreshCb = jest.fn();
     const customStatusRender: QRCodeProps['statusRender'] = (info) => {
       switch (info.status) {
         case 'expired':
-          return <div className="custom-expired">{info.locale?.expired}</div>;
+          return (
+            <div className="custom-expired">
+              <span>{info.locale?.expired}</span>
+              <button id="refresh" onClick={info.onRefresh} type="button">
+                refresh
+              </button>
+            </div>
+          );
         case 'loading':
           return <div className="custom-loading">Loading</div>;
         case 'scanned':
@@ -118,6 +126,7 @@ describe('QRCode test', () => {
           value="test"
           status="expired"
           statusRender={customStatusRender}
+          onRefresh={refreshCb}
         />
         <QRCode
           className="qrcode-loading"
@@ -134,8 +143,10 @@ describe('QRCode test', () => {
       </>,
     );
     expect(
-      container.querySelector<HTMLDivElement>('.qrcode-expired .custom-expired')?.textContent,
+      container.querySelector<HTMLDivElement>('.qrcode-expired .custom-expired>span')?.textContent,
     ).toBe('QR code expired');
+    fireEvent.click(container?.querySelector<HTMLButtonElement>('#refresh')!);
+    expect(refreshCb).toHaveBeenCalled();
     expect(
       container.querySelector<HTMLDivElement>('.qrcode-loading .custom-loading')?.textContent,
     ).toBe('Loading');

components/qr-code/demo/errorlevel.tsx

@@ -3,12 +3,12 @@ import type { QRCodeProps } from 'antd';
 import { QRCode, Segmented } from 'antd';
 
 const App: React.FC = () => {
-  const [level, setLevel] = useState<string | number>('L');
+  const [level, setLevel] = useState<QRCodeProps['errorLevel']>('L');
   return (
     <>
       <QRCode
         style={{ marginBottom: 16 }}
-        errorLevel={level as QRCodeProps['errorLevel']}
+        errorLevel={level}
         value="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"
       />
       <Segmented options={['L', 'M', 'Q', 'H']} value={level} onChange={setLevel} />

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "5.21.4",
+  "version": "5.21.5",
   "description": "An enterprise-class UI design language and React components implementation",
   "license": "MIT",
   "funding": {