docs(:sparkles:): release 4.24.16 (ant-design#47932)

* docs(:sparkles:): release 4.24.16

* chore: upgrade rc-segmented to fix types

* type: fix ref type

* docs: update changelog

* demo: fix Segmented demos

CHANGELOG.en-US.md

@@ -15,6 +15,15 @@ timeline: true
 
 ---
 
+## 4.24.16
+
+`2024-03-18`
+
+- 🐞 Fix Select that scrollbar is not displayed when there are few options. [#47050](https://github.com/ant-design/ant-design/pull/47050)
+- 🐞 Fix Transfer cannot invert current page correctly. [#47134](https://github.com/ant-design/ant-design/pull/47134) [@linxianxi](https://github.com/linxianxi)
+- 🐞 Fix that clicking Form tooltip icon should not trigger Switch. [#46159](https://github.com/ant-design/ant-design/pull/46159) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Segmented `options` className being overrided by `className`. [rc-segmented#175](https://github.com/react-component/segmented/pull/175/) [@stoil-terziev](https://github.com/stoil-terziev)
+
 ## 4.24.15
 
 `2023-11-21`

CHANGELOG.zh-CN.md

@@ -15,6 +15,15 @@ timeline: true
 
 ---
 
+## 4.24.16
+
+`2024-03-18`
+
+- 🐞 修复 Select 组件在选项较少时不显示滚动条的问题。[#47050](https://github.com/ant-design/ant-design/pull/47050)
+- 🐞 修复 Transfer 反选当页错误的问题。[#47134](https://github.com/ant-design/ant-design/pull/47134) [@linxianxi](https://github.com/linxianxi)
+- 🐞 修复点击 Form `tooltip` 图标会触发 Switch 切换的问题。[#46159](https://github.com/ant-design/ant-design/pull/46159) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Segmented `options` 内 `className` 会覆盖组件自带 `className` 的问题。[rc-segmented#175](https://github.com/react-component/segmented/pull/175/) [@stoil-terziev](https://github.com/stoil-terziev)
+
 ## 4.24.15
 
 `2023-11-21`

components/_util/wave.tsx

@@ -22,7 +22,7 @@ function getValidateContainer(nodeRoot: Node): Element {
   }
 
   return Array.from(nodeRoot.childNodes).find(
-    ele => ele?.nodeType === Node.ELEMENT_NODE,
+    (ele) => ele?.nodeType === Node.ELEMENT_NODE,
   ) as Element;
 }
 
@@ -115,19 +115,17 @@ class Wave extends React.Component<WaveProps> {
 
       styleForPseudo = updateCSS(
         `
-      [${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls(
-          '',
-        )}-click-animating-node {
+      [${getPrefixCls('')}-click-animating-without-extra-node='true']::after, .${getPrefixCls('')}-click-animating-node {
         --antd-wave-shadow-color: ${waveColor};
       }`,
         'antd-wave',
         { csp: this.csp, attachTo: nodeBody },
-      );
+      ) as HTMLStyleElement;
     }
     if (insertExtraNode) {
       node.appendChild(extraNode);
     }
-    ['transition', 'animation'].forEach(name => {
+    ['transition', 'animation'].forEach((name) => {
       node.addEventListener(`${name}start`, this.onTransitionStart);
       node.addEventListener(`${name}end`, this.onTransitionEnd);
     });
@@ -213,7 +211,7 @@ class Wave extends React.Component<WaveProps> {
     if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
       node.removeChild(this.extraNode);
     }
-    ['transition', 'animation'].forEach(name => {
+    ['transition', 'animation'].forEach((name) => {
       node.removeEventListener(`${name}start`, this.onTransitionStart);
       node.removeEventListener(`${name}end`, this.onTransitionEnd);
     });

components/form/demo/disabled.md

@@ -124,5 +124,5 @@ const FormDisabledDemo = () => {
   );
 };
 
-export default () => <FormDisabledDemo />;
+export default FormDisabledDemo;
 ```

components/modal/demo/dark.md

@@ -297,7 +297,7 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
   </Transfer>
 );
 
-export default () => {
+const Demo = () => {
   const [open, setOpen] = useState(false);
   const [targetKeys, setTargetKeys] = useState(oriTargetKeys);
   const [selectedKeys, setSelectedKeys] = useState([]);
@@ -574,6 +574,8 @@ export default () => {
     </>
   );
 };
+
+export default Demo;
 ```
 
 <style>

components/radio/__tests__/group.test.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
-import type { RefAttributes } from 'react';
 import type { RadioGroupProps } from '..';
 import { render, fireEvent } from '../../../tests/utils';
 import Radio from '..';
 
 describe('Radio Group', () => {
-  function createRadioGroup(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
+  function createRadioGroup(
+    props?: RadioGroupProps & {
+      ref?: React.Ref<HTMLDivElement> | undefined;
+    },
+  ) {
     return (
       <Radio.Group {...props}>
         <Radio value="A">A</Radio>
@@ -15,7 +18,11 @@ describe('Radio Group', () => {
     );
   }
 
-  function createRadioGroupByOption(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
+  function createRadioGroupByOption(
+    props?: RadioGroupProps & {
+      ref?: React.Ref<HTMLDivElement> | undefined;
+    },
+  ) {
     const options = [
       { label: 'A', value: 'A' },
       { label: 'B', value: 'B' },
@@ -68,7 +75,7 @@ describe('Radio Group', () => {
 
     const RadioGroup: React.FC<
       RadioGroupProps & { onChangeRadioGroup: RadioGroupProps['onChange'] }
-    > = props => (
+    > = (props) => (
       <Radio.Group onChange={props.onChangeRadioGroup}>
         <Radio value="A" onChange={props.onChange}>
           A
@@ -97,7 +104,7 @@ describe('Radio Group', () => {
   it('Trigger onChange when both of radioButton and radioGroup exists', () => {
     const onChange = jest.fn();
 
-    const RadioGroup: React.FC<RadioGroupProps> = props => (
+    const RadioGroup: React.FC<RadioGroupProps> = (props) => (
       <Radio.Group {...props}>
         <Radio.Button value="A">A</Radio.Button>
         <Radio.Button value="B">B</Radio.Button>
@@ -155,7 +162,7 @@ describe('Radio Group', () => {
     const GROUP_NAME = 'GROUP_NAME';
     const { container } = render(createRadioGroup({ name: GROUP_NAME }));
 
-    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach(el => {
+    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((el) => {
       expect(el.name).toEqual(GROUP_NAME);
     });
   });
@@ -230,7 +237,7 @@ describe('Radio Group', () => {
       expect(container.querySelectorAll('.ant-radio-wrapper-checked').length).toBe(1);
     });
 
-    [undefined, null].forEach(newValue => {
+    [undefined, null].forEach((newValue) => {
       it(`should set value back when value change back to ${newValue}`, () => {
         const options = [{ label: 'Bamboo', value: 'bamboo' }];
         const { container, rerender } = render(<Radio.Group value="bamboo" options={options} />);

components/radio/__tests__/radio-button.test.tsx

@@ -1,4 +1,3 @@
-import type { RefAttributes } from 'react';
 import React from 'react';
 import type { RadioGroupProps } from '..';
 import Radio, { Button } from '..';
@@ -36,7 +35,11 @@ describe('Radio Button', () => {
 });
 
 describe('Radio Group', () => {
-  function createRadioGroup(props?: RadioGroupProps & RefAttributes<HTMLDivElement>) {
+  function createRadioGroup(
+    props?: RadioGroupProps & {
+      ref?: React.Ref<HTMLDivElement> | undefined;
+    },
+  ) {
     return (
       <Radio.Group {...props}>
         <Button value="A">A</Button>
@@ -154,7 +157,7 @@ describe('Radio Group', () => {
     const GROUP_NAME = 'GROUP_NAME';
     const { container } = render(createRadioGroup({ name: GROUP_NAME }));
 
-    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach(el => {
+    container.querySelectorAll<HTMLInputElement>('input[type="radio"]').forEach((el) => {
       expect(el.name).toEqual(GROUP_NAME);
     });
   });
@@ -230,7 +233,7 @@ describe('Radio Group', () => {
       expect(container.querySelectorAll('.ant-radio-button-wrapper-checked').length).toBe(1);
     });
 
-    [undefined, null].forEach(newValue => {
+    [undefined, null].forEach((newValue) => {
       it(`should set value back when value change back to ${newValue}`, () => {
         const { container, rerender } = render(
           <Radio.Group value="bamboo">

components/segmented/demo/basic.md

@@ -16,7 +16,9 @@ The most basic usage.
 ```jsx
 import { Segmented } from 'antd';
 
-export default () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
+const Demo = () => <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />;
+
+export default Demo;
 ```
 
 ```css

components/segmented/demo/block.md

@@ -16,7 +16,7 @@ title:
 ```jsx
 import { Segmented } from 'antd';
 
-export default () => (
-  <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />
-);
+const Demo = () => <Segmented block options={[123, 456, 'longtext-longtext-longtext-longtext']} />;
+
+export default Demo;
 ```

components/segmented/demo/custom.md

@@ -17,7 +17,7 @@ Custom each Segmented Item by ReactNode.
 import { Avatar, Segmented } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-export default () => (
+const Demo = () => (
   <>
     <Segmented
       options={[
@@ -93,4 +93,6 @@ export default () => (
     />
   </>
 );
+
+export default Demo;
 ```

components/segmented/demo/disabled.md

@@ -16,7 +16,7 @@ Disabled Segmented.
 ```jsx
 import { Segmented } from 'antd';
 
-export default () => (
+const Demo = () => (
   <>
     <Segmented options={['Map', 'Transit', 'Satellite']} disabled />
     <br />
@@ -31,4 +31,6 @@ export default () => (
     />
   </>
 );
+
+export default Demo;
 ```

components/segmented/demo/icon-only.md

@@ -17,7 +17,7 @@ Set `icon` without `label` for Segmented Item.
 import { Segmented } from 'antd';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 
-export default () => (
+const Demo = () => (
   <Segmented
     options={[
       {
@@ -31,4 +31,6 @@ export default () => (
     ]}
   />
 );
+
+export default Demo;
 ```

components/segmented/demo/size-consistent.md

@@ -17,7 +17,7 @@ Keep consistent height with other components.
 ```jsx
 import { Button, Input, Select, Segmented } from 'antd';
 
-export default () => (
+const Demo = () => (
   <>
     <div>
       <Segmented style={{ marginRight: 6 }} size="large" options={['Daily', 'Weekly', 'Monthly']} />
@@ -37,4 +37,6 @@ export default () => (
     </div>
   </>
 );
+
+export default Demo;
 ```

components/segmented/demo/size.md

@@ -16,7 +16,7 @@ There are three sizes of an Segmented: `large` (40px), `default` (32px) and `sma
 ```jsx
 import { Segmented } from 'antd';
 
-export default () => (
+const Demo = () => (
   <>
     <Segmented size="large" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
     <br />
@@ -25,4 +25,6 @@ export default () => (
     <Segmented size="small" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
   </>
 );
+
+export default Demo;
 ```

components/segmented/demo/with-icon.md

@@ -17,7 +17,7 @@ Set `icon` for Segmented Item.
 import { Segmented } from 'antd';
 import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';
 
-export default () => (
+const Demo = () => (
   <Segmented
     options={[
       {
@@ -33,4 +33,6 @@ export default () => (
     ]}
   />
 );
+
+export default Demo;
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.24.15",
+  "version": "4.24.16",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -143,7 +143,7 @@
     "rc-progress": "~3.4.2",
     "rc-rate": "~2.9.3",
     "rc-resize-observer": "^1.3.1",
-    "rc-segmented": "~2.1.2",
+    "rc-segmented": "~2.3.0",
     "rc-select": "~14.1.18",
     "rc-slider": "~10.0.1",
     "rc-steps": "~5.0.0",