Merge branch 'main' into enhance/select

components/Cascader/README.en-US.md

@@ -32,6 +32,7 @@ Display options in a multi-level cascading dropdown component.
 |autoWidth|auto width. minWidth defaults to 0, maxWidth defaults to 100%|\| boolean\| { minWidth?: CSSProperties['minWidth']; maxWidth?: CSSProperties['maxWidth'] } |`-`|2.54.0|
 |checkedStrategy|Customize the return value<br/> parent:Only return the parent node when all child nodes are selected <br/> child: Return child nodes|'parent' \| 'child' |`child`|2.31.0|
 |expandTrigger|Set the way to display the next level menu. One of hover and click|'click' \| 'hover' |`click`|-|
+|maxTagCount|The maximum number of `tags` is displayed, only valid in `multiple` and `label` mode. Setting the number of `responsive` responsive display tags is not recommended when there are many options, as there may be performance issues.|\| number\| 'responsive'\| {count: number \| 'responsive';render?: (invisibleTagCount: number) => ReactNode;} |`-`|Object type in 2.37.0. `responsive ` in `2.62.0`|
 |mode|Set mode|'multiple' |`-`|-|
 |showSearch|Whether single mode Select is searchable. `{ retainInputValue: true }` to retain the existing content when the search box is focused,`{ retainInputValueWhileSelect: true }` to retain the existing content when multiple selection is selected.`{ panelMode: 'select' }` Display options as a search panel (`2.39.0`)`renderOption` Custom rendering search option (`2.39.0`)|\| boolean\| {panelMode?: 'cascader' \| 'select';renderOption?: (inputValue: string,option: NodeProps&lt;T&gt;,options: [extraOptions](#extraoptions)) =&gt; ReactNode;retainInputValue?: boolean;retainInputValueWhileSelect?: boolean;} |`-`|-|
 |size|Height of element, `24px` `28px` `32px` `36px`|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
@@ -61,7 +62,6 @@ Display options in a multi-level cascading dropdown component.
 |dropdownColumnRender|Customize columns of the menu.|(menu: ReactNode, level: number) => ReactNode |`-`|2.15.0, `level` in 2.17.0|
 |dropdownRender|Customize the popup menu.|(menu: ReactNode) => ReactNode |`-`|2.15.0|
 |getPopupContainer|ParentNode which the selector should be rendered to.|(node: HTMLElement) => Element |`-`|-|
-|maxTagCount|The maximum number of `tags` is displayed, only valid in `multiple` and `label` mode.|\| number\| {count: number;render?: (invisibleTagCount: number) => ReactNode;} |`-`|Object type in 2.37.0|
 |onChange|Callback when finishing select.|(value: (string \| string[])[],selectedOptions,extra: { dropdownVisible?: boolean }) => void |`-`|-|
 |onClear|Callback when click clear icon.|(visible: boolean) => void |`-`|-|
 |onClick|Callback when the mouse clicks on the drop-down box|(e) => void |`-`|-|

components/Cascader/README.zh-CN.md

@@ -32,6 +32,7 @@
 |autoWidth|设置宽度自适应。minWidth 默认为 0，maxWidth 默认为 100%|\| boolean\| { minWidth?: CSSProperties['minWidth']; maxWidth?: CSSProperties['maxWidth'] } |`-`|2.54.0|
 |checkedStrategy|定制回填方式 <br/> parent: 子节点都被选中时候返回父节点 <br/> child: 返回子节点|'parent' \| 'child' |`child`|2.31.0|
 |expandTrigger|展开下一级方式|'click' \| 'hover' |`click`|-|
+|maxTagCount|最多显示多少个 `tag`，仅在多选或标签模式有效。设置 `responsive` 响应式显示标签数不建议在选项较多时使用，可能存在性能问题，|\| number\| 'responsive'\| {count: number \| 'responsive';render?: (invisibleTagCount: number) => ReactNode;} |`-`|Object type in 2.37.0. `responsive ` in `2.62.0`|
 |mode|是否开启多选|'multiple' |`-`|-|
 |showSearch|使单选模式可搜索，传入 `{ retainInputValue: true }` 在搜索框聚焦时保留现有内容传入 `{ retainInputValueWhileSelect: true }` 在多选选择时保留输入框内容。传入 `{ panelMode: 'select' }` 以搜索面板形式展示可选项 (`2.39.0`)`renderOption` 自定义渲染搜索项 (`2.39.0`)|\| boolean\| {panelMode?: 'cascader' \| 'select';renderOption?: (inputValue: string,option: NodeProps&lt;T&gt;,options: [extraOptions](#extraoptions)) =&gt; ReactNode;retainInputValue?: boolean;retainInputValueWhileSelect?: boolean;} |`-`|-|
 |size|分别不同尺寸的选择器。对应 `24px`, `28px`, `32px`, `36px`|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
@@ -61,7 +62,6 @@
 |dropdownColumnRender|自定义下拉菜单每一列的展示。|(menu: ReactNode, level: number) => ReactNode |`-`|2.15.0, `level` in 2.17.0|
 |dropdownRender|自定义下拉菜单的展示。|(menu: ReactNode) => ReactNode |`-`|2.15.0|
 |getPopupContainer|弹出框挂在的父节点|(node: HTMLElement) => Element |`-`|-|
-|maxTagCount|最多显示多少个 `tag`，仅在多选或标签模式有效。|\| number\| {count: number;render?: (invisibleTagCount: number) => ReactNode;} |`-`|Object type in 2.37.0|
 |onChange|点击选择框的回调。|(value: (string \| string[])[],selectedOptions,extra: { dropdownVisible?: boolean }) => void |`-`|-|
 |onClear|点击清除时触发，参数是当前下拉框的展开状态。|(visible: boolean) => void |`-`|-|
 |onClick|鼠标点击下拉框时的回调|(e) => void |`-`|-|

components/InputNumber/__demo__/format.md

@@ -33,6 +33,7 @@ function App() {
         value={value}
         onChange={setValue}
         prefix="¥"
+        // 正则表达式：(/\B(?=(\d{3})+(?!\d))/g, ',')}
         formatter={(value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
         parser={(value) => value.replace(/,/g, '')}
       />

components/InputTag/README.en-US.md

@@ -25,6 +25,7 @@ An input box which will display your input as tags.
 |saveOnBlur|Whether to automatically store the text entering when blur InputTag|boolean |`-`|2.25.0|
 |inputValue|To set input value|string |`-`|-|
 |placeholder|Placeholder of input element|string |`-`|-|
+|maxTagCount|The maximum number of `tags` is displayed|\| number\| 'responsive'\| {count: number \| 'responsive';render?: (invisibleTagCount: number, value: T[]) => ReactNode;popoverProps?: Partial<[PopoverProps](popover#popover)>;} |`-`|2.59.0. `responsive ` in `2.62.0`|
 |size|Different sizes|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
 |status|Status|'error' \| 'warning' |`-`|2.45.0|
 |addAfter|The label text displayed after (on the right side of) the input-tag field|ReactNode |`-`|2.47.0|
@@ -38,7 +39,6 @@ An input box which will display your input as tags.
 |tokenSeparators|Separator used to tokenize|string[] |`-`|2.44.0|
 |validate|Function to check user's input, which is triggered when `Enter` is pressed|(inputValue: string, values: T[]) =&gt; boolean \| Promise&lt;boolean&gt; \| T \| Promise&lt;T&gt; |`(inputValue, values) => inputValue && values.every((item) => item !== inputValue)`|return type T and `Promise<T>` in 2.37.0|
 |value|To set value|T[] |`-`|-|
-|maxTagCount|The maximum number of `tags` is displayed|\| number\| {count: number;render?: (invisibleTagCount: number, value: T[]) => ReactNode;} |`-`|2.59.0|
 |onBlur|Callback when input is blurred|(e) => void |`-`|-|
 |onChange|Callback when value changes|(value: T[], reason: [ValueChangeReason](#valuechangereason)) => void |`-`|`reason` in 2.27.0|
 |onClear|Callback when clear button is clicked|() => void |`-`|2.20.0|

components/InputTag/README.zh-CN.md

@@ -25,6 +25,7 @@
 |saveOnBlur|是否在失焦时自动存储正在输入的文本|boolean |`-`|2.25.0|
 |inputValue|控件的输入框内的值|string |`-`|-|
 |placeholder|预设文案|string |`-`|-|
+|maxTagCount|最多显示多少个 `tag`|\| number\| 'responsive'\| {count: number \| 'responsive';render?: (invisibleTagCount: number, value: T[]) => ReactNode;popoverProps?: Partial<[PopoverProps](popover#popover)>;} |`-`|2.59.0. `responsive ` in `2.62.0`|
 |size|不同尺寸|'mini' \| 'small' \| 'default' \| 'large' |`-`|-|
 |status|状态|'error' \| 'warning' |`-`|2.45.0|
 |addAfter|输入框后添加元素|ReactNode |`-`|2.47.0|
@@ -38,7 +39,6 @@
 |tokenSeparators|触发自动分词的分隔符|string[] |`-`|2.44.0|
 |validate|校验函数，默认在 按下enter时候触发。|(inputValue: string, values: T[]) =&gt; boolean \| Promise&lt;boolean&gt; \| T \| Promise&lt;T&gt; |`(inputValue, values) => inputValue && values.every((item) => item !== inputValue)`|return type T and `Promise<T>` in 2.37.0|
 |value|控件值|T[] |`-`|-|
-|maxTagCount|最多显示多少个 `tag`|\| number\| {count: number;render?: (invisibleTagCount: number, value: T[]) => ReactNode;} |`-`|2.59.0|
 |onBlur|失去焦点时候触发|(e) => void |`-`|-|
 |onChange|控件值改变时触发|(value: T[], reason: [ValueChangeReason](#valuechangereason)) => void |`-`|`reason` in 2.27.0|
 |onClear|点击清除按钮的回调|() => void |`-`|2.20.0|

components/InputTag/__demo__/responsive-tag.md

@@ -0,0 +1,48 @@
+---
+order: 9
+title:
+  zh-CN: 响应式显示Tag
+  en-US: Responsive Tags
+---
+
+## zh-CN
+
+通过 `maxTagCount=responsive` 设置根据容器尺寸动态显示 Tag 数。会监听所有 Tag 及容器的尺寸变化，所以在标签数较多时不建议使用，可能存在性能问题。
+此时拖拽和动画效果不可用。
+
+
+## en-US
+
+Use `maxTagCount=responsive` to dynamically display the number of Tags based on the container size. It will monitor the size changes of all Tags and containers, so it is not recommended to use it when there are a large number of tags, as there may be performance issues.
+
+Drag and animation effects are not available at this time.
+
+```js
+import { InputTag, Space } from '@arco-design/web-react';
+
+const App = () => {
+  return (
+    <div>
+      <Space style={{marginBottom: 20}}>
+        <InputTag
+          style={{ width: 300 }}
+          placeholder="Please input"
+          defaultValue={['label 1', 'label 2', 'label 3', 'label 4', 'label 5']}
+          maxTagCount="responsive"
+        />
+        <InputTag
+          style={{ width: 300 }}
+          placeholder="Please input"
+          defaultValue={['label 1', 'label 2', 'label 3', 'label 4', 'label 5']}
+          maxTagCount={{
+            count: 'responsive',
+            render: (invisibleTagCount) => <span style={{ marginLeft: 4, fontSize: 12 }}>+{invisibleTagCount} More</span>,
+          }}
+        />
+      </Space>
+    </div>
+  );
+};
+
+export default App;
+```