Merge branch 'main' into release

content/input/checkbox/index-en-US.md

@@ -425,9 +425,10 @@ import { CheckboxGroup, Checkbox, Row, Col } from '@douyinfe/semi-ui';
 | value        | Specify selected options                                                | any\[]              | \[]        |
 | onChange     | Callback function when selected options change                          | function(checkedValue) | -          |
 
-### Method
+## Methods
 
-#### Checkbox
+Some internal methods provided by Checkbox can be accessed through ref:
+### Checkbox
 
 | Name    | Description  |
 | ------- | ------------ |

content/input/input/index-en-US.md

@@ -473,6 +473,8 @@ Common attributes will be set to the child elements of InputGroup, such as disab
 
 ## Methods
 
+Some internal methods provided by Input can be accessed through ref:
+
 | Name    | Description  |
 |---------|--------------|
 | blur()  | Remove focus |

content/input/input/index.md

@@ -482,6 +482,8 @@ import { Input, Typography, Form, TextArea, Button } from '@douyinfe/semi-ui';
 
 ## Methods
 
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
+
 | 名称    | 描述     |
 |---------|--------|
 | blur()  | 移出焦点 |

content/input/inputnumber/index-en-US.md

@@ -233,6 +233,8 @@ function Demo () {
 
 ## Methods
 
+Some internal methods provided by InputNumber can be accessed through ref:
+
 | Name    | Description     |
 | ------- | --------------- |
 | blur()  | Move the focus. |

content/input/inputnumber/index.md

@@ -207,6 +207,8 @@ function Demo () {
 
 ## Methods
 
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
+
 | 名称    | 描述     |
 | ------- | -------- |
 | blur()  | 移出焦点 |

content/input/radio/index-en-US.md

@@ -412,7 +412,7 @@ class App extends React.Component {
 | value | Used to set the currently selected value | string \| number | - |
 | type | Set the type of radio, one of `default`, `button`, `card`, `pureCard` <br/>**This api is provided after v1.26.0, and card and pureCard are in v1.30.0 Provided after ** | string | `default` |
 | onChange | Callback function when the selected option changes | Function (e: Event) | - |
-## Method
+## Methods
 
 ### Radio
 

content/input/radio/index.md

@@ -361,7 +361,7 @@ class App extends React.Component {
 |type|设置所有radio的样式类型，可选值为：`default`、`button`、`card`、`pureCard` <br/>**该 api 在 v1.26.0 后提供，其中 card 和 pureCard 在 v1.30.0 后提供**    |string|`default`|
 | onChange     | 选项变化时的回调函数                                                                        | function(e:Event)                                                         | -            |
 
-## 方法
+## Methods
 
 ### Radio
 

content/input/select/index-en-US.md

@@ -1403,7 +1403,8 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | label      | Text displayed.    | ReactNode | v0.31.0 |
 | style      | Inline Style       | object    | v0.31.0 |
 
-### Method()
+## Methods
+Some internal methods provided by Select can be accessed through ref:
 
 | Method      | Instructions                    | Version |
 | ----------- | ------------------------------- | ------- |

content/input/select/index.md

@@ -1472,9 +1472,9 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | label     | 展示的文本 | ReactNode | v0.31.0 |
 | style     | 样式       | object    | v0.31.0 |
 
-### Method()
+## Methods
 
-绑定在 ref 上的方法，可以通过 ref 调用实现某些特殊交互
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
 
 | 方法        | 说明                                | 版本    |
 | ----------- | ----------------------------------- | ------- |

content/input/taginput/index-en-US.md

@@ -471,6 +471,7 @@ import { TagInput } from '@douyinfe/semi-ui';
 |onRemove      |Callback invoked when tags are removed           |(removedValue: string, idx: number) => void                                 | -        |1.19.0|
 
 ## Methods
+Some internal methods provided by TagInput can be accessed through ref:
 
 |Name   |Description |Version |
 |-------|------------|--------|

content/input/taginput/index.md

@@ -471,7 +471,9 @@ import { TagInput } from '@douyinfe/semi-ui';
 |onKeyDown    |keydown 回调                             |(e: React.KeyboardEvent) => void          | -        |2.1.0|
 |onRemove     |移除标签时的回调                                     |(removedValue: string, idx: number) => void     | -        |1.19.0|
 
-## 方法
+## Methods
+
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
 
 |名称    |描述   |版本     |
 |-------|------|---------|

content/input/timepicker/index-en-US.md

@@ -344,7 +344,8 @@ function Demo(props = {}) {
 | onFocus | Callback when focus is obtained | (e: domEvent) => void | () => {} | **1.0.0** |
 | onOpenChange | A callback when the panel is on / off | (isOpen: boolean) => void |  |
 
-## Method
+## Methods
+Some internal methods provided by TimePicker can be accessed through ref:
 
 | Name    | Description   |
 | ------- | ------------- |

content/input/timepicker/index.md

@@ -335,7 +335,9 @@ function Demo(props = {}) {
 | onFocus             | 获得焦点时的回调                                       | (e: domEvent) => void                                                             | () => {}                                                          | **1.0.0**          |
 | onOpenChange        | 面板打开/关闭时的回调                                  | Function(isOpen: boolean): void                                                   | 无                                                                |                    |
 
-## 方法
+## Methods
+
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
 
 | 名称    | 描述     |
 | ------- | -------- |

content/input/transfer/index-en-US.md

@@ -969,9 +969,12 @@ TreeItem inherits all the properties of Item
 | -------- | -------------- | ---------------- | ------- |
 | children | Children Items | array<TreeItem\> |         |
 
-### Method
+## Methods
+Some internal methods provided by Transfer can be accessed through ref:
 
-- search(value: string): You can call this method through ref to search, and the search value will be set to Input.
+| Name    | Description   |
+| ------- | ------------- |
+| search(value: string)  |  You can call this method through ref to search, and the search value will be set to Input.  |
 
 ## Design Tokens
 <DesignToken/>

content/input/transfer/index.md

@@ -971,9 +971,12 @@ TreeItem 继承 Item 的所有属性
 | -------- | ------ | ---------------- | ------ |
 | children | 子元素 | Array<TreeItem\> |        |
 
-### Method
+## Methods
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
 
-- search(value: string)：可通过 ref 调用该方法进行搜索，该搜索值会被置给 Input。
+| Name    | Description   |
+| ------- | ------------- |
+| search(value: string)  |  可通过 ref 调用该方法进行搜索，该搜索值会被置给 Input。  |
 
 ## 设计变量
 <DesignToken/>

content/input/treeselect/index-en-US.md

@@ -1464,9 +1464,12 @@ function Demo() {
 | key        | Required and must be unique                 | string            | -       |
 | isLeaf     | Whether it is a leaf node | boolean |-|
 
-### Method
-- search(sugInput: string)
-For custom rendering of input box.
+## Methods
+Some internal methods provided by TreeSelect can be accessed through ref:
+
+| Name    | Description  |
+|---------|--------------|
+| search(sugInput: string)  | If you need to customize the search box externally, you can actively call this method when the value of the custom search box changes to change the filtering results |
 
 ## Accessibility
 

content/input/treeselect/index.md

@@ -1448,9 +1448,14 @@ function Demo() {
 | isLeaf| 是否为叶子节点 | boolean |-|
 
 
-### Method
-- search(sugInput: string)
-如果需要自定义搜索框可以使用该方法。
+### Methods
+
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
+
+| Name    | Description  |
+|---------|--------------|
+| search(sugInput: string)  | 如果需要在外部自定义搜索框，可以在自定义搜索框值变更时主动调用该方法，改变筛选结果 |
+
 
 ## Accessibility
 

content/input/upload/index-en-US.md

@@ -1309,6 +1309,9 @@ interface FileItem {
 ```
 
 ## Methods
+
+Some internal methods provided by Upload can be accessed through ref:
+
 |Name | Description | Type | Version|
 |----|----|----|----|
 | insert | Upload file, when index is passed, it will be inserted at the specified position, if not passed, it will be inserted at the end | (files: Array<File\>, index?: number) => void | 2.2.0 |

content/input/upload/index.md

@@ -1309,6 +1309,9 @@ interface FileItem {
 ```
 
 ## Methods
+
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
+
 |名称 | 描述 | 类型 | 版本 |
 |----|----|----|----|
 | insert | 上传文件，当index传入时，会插入到指定位置，不传则插入到最后 | (files: Array<File\>, index?: number) => void | 2.2.0 |

content/navigation/tree/index-en-US.md

@@ -2193,7 +2193,9 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | itemSize | Height for each line of treeNode, required | number | - |
 | width | Width | number\|string | '100%' |
 
-### Methods
+## Methods
+Some internal methods provided by Tree can be accessed through ref:
+
 |Name | Description | Type | Version |
 |----|----|----|----|
 | search | Trigger search manually | (value: string) => void |-|

content/navigation/tree/index.md

@@ -2185,7 +2185,9 @@ import { IconFixedStroked, IconSectionStroked, IconAbsoluteStroked, IconInnerSec
 | itemSize | 每行的treeNode的高度，必传 | number | - |
 | width | 宽度值 | number\|string | '100%' |
 
-### Methods
+## Methods
+
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
 
 |名称 | 描述 | 类型 | 版本  |
 |----|----|----|----|

content/show/carousel/index-en-US.md

@@ -681,7 +681,8 @@ class CarouselDemo extends React.Component {
 |props           |Parameters on the arrow div, including style, onClick events, etc                                      |DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement\>, HTMLDivElement\>         |-     |2.10.0|
 |children         |Arrow custom icon                                              |React.ReactNode      |-     |2.10.0|
 
-**Method()**
+## Methods
+Some internal methods provided by Carousel can be accessed through ref:
 
 | Method             | Instructions                    | Version |
 | ------------------ | ------------------------------- | ------- |

content/show/carousel/index.md

@@ -679,8 +679,9 @@ class CarouselDemo extends React.Component {
 |------------------|---------------------------------------------------------------|------------------|------|------|
 |props             |箭头div上的可传参数，包括style, onClick事件等                                                  | React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement\>, HTMLDivElement\>       |-     |2.10.0|
 |children          |箭头自定义Icon                                                   |React.ReactNode      |-     |2.10.0|
+## Methods
 
-**Method()**
+绑定在组件实例上的方法，可以通过 ref 调用实现某些特殊交互
 
 | 方法               | 说明                        | 版本    |
 | ----------------- | --------------------------  | ------ |

packages/semi-foundation/select/foundation.ts

@@ -11,7 +11,6 @@ import { handlePrevent } from '../utils/a11y';
 
 export interface SelectAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     getTriggerWidth(): number;
-    setOptionsWidth?(): any;
     updateFocusState(focus: boolean): void;
     focusTrigger(): void;
     unregisterClickOutsideHandler(): void;
@@ -197,7 +196,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
 
     // call when props.value change
     handleValueChange(value: PropValue) {
-        const { allowCreate } = this.getProps();
+        const { allowCreate, autoClearSearchValue } = this.getProps();
+        const { inputValue } = this.getStates();
         let originalOptions;
         // AllowCreate and controlled mode, no need to re-collect optionList
         if (allowCreate && this._isControlledComponent()) {
@@ -205,11 +205,17 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
             originalOptions.forEach(item => (item._show = true));
         } else {
             // originalOptions = this.getState('options');
-            // The options in state cannot be used directly here, because it is possible to update the optionList and props.value at the same time, and the options in state are still old at this time
+            // The options in state cannot be used directly here,
+            // because it is possible to update the optionList and props.value at the same time, and the options in state are still old at this time
             originalOptions = this._adapter.getOptionsFromChildren();
         }
         // Multi-selection, controlled mode, you need to reposition the drop-down menu after updating
         this._adapter.rePositionDropdown();
+
+        if (this._isFilterable() && !autoClearSearchValue && inputValue) {
+            originalOptions = this._filterOption(originalOptions, inputValue);
+        }
+
         this._update(value, originalOptions);
     }
 
@@ -226,6 +232,8 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
         // Update the text in the selection box
         this._adapter.updateSelection(selections);
         // Update the selected item in the drop-down box
+
+
         this.updateOptionsActiveStatus(selections, originalOptions);
     }
 

packages/semi-ui/overflowList/_story/overflowList.stories.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Icon, Tag, Table, Slider } from '../../index';
+import { Icon, Tag, Table, Slider, Button } from '../../index';
 import OverflowList from '..';
 import {
   IconAlarm,
@@ -438,22 +438,8 @@ export const OverflowListWithSlide = () =>{
 OverflowListWithSlide.story = {
   name: 'overflowList with slide',
 };
-
-export const FixDisplayFlexDemo = () =>{
-    const [width, setWidth] = useState(100);
-    const renderOverflow = items => {
-          return items.length ? <Tag style={{ flex: '0 0 auto' }}>+{items.length}</Tag> : null;
-      };
-    const renderItem = (item, ind) => {
-        return (
-            <Tag color="blue" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>
-                {item.icon}
-                {item.key}
-            </Tag>
-        );
-    };
-
-    const items = [
+export const Fix1362 = () =>{
+  const items1 = [
         { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },
         { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },
         { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },
@@ -462,22 +448,91 @@ export const FixDisplayFlexDemo = () =>{
         { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },
     ];
 
+  const items2 = [
+      { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'newAlarm' },
+      { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'newBookmark' },
+      { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'newCamera' },
+      { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'newDuration' },
+  ];
+
+  const [items, setItem] = useState(items1);
+  const [flag, setFlag] = useState(false);
+
+  const renderOverflow = items => {
+    return items.map(item => <Tag>{item.length}</Tag>);
+  };
+  const renderItem = (item, ind) => {
     return (
-        <div>
-            <Slider step={1} value={width} onChange={value => setWidth(value)} />
-            <br />
-            <br />
-            <div style={{ width: `${width}%`, display: 'flex' }}>
-                <OverflowList
-                    style={{ width: '100%' }}
-                    items={items}
-                    minVisibleItems={3}
-                    overflowRenderer={renderOverflow}
-                    visibleItemRenderer={renderItem}
-                />
-            </div>
-        </div>
+      <div key={item.key} style={{ marginRight: 8 }}>
+        {item.key}
+      </div>
     );
+  };
+
+  const change = () =>{
+    setItem(flag ? items1: items2)
+    setFlag(!flag)
+  }
+
+  return (
+      <div style={{ marginTop: 100, height: 1000 }}>
+          <Button onClick={change}>change</Button>
+          <br />
+          <br />
+          <div style={{ width: 500 }}>
+              <OverflowList
+                  renderMode='scroll'
+                  items={items}
+                  overflowRenderer={renderOverflow}
+                  visibleItemRenderer={renderItem}
+              />
+          </div>
+      </div>
+  );
+}
+Fix1362.story = {
+  name: 'fix #1362',
+};
+
+export const FixDisplayFlexDemo = () =>{
+  const [width, setWidth] = useState(100);
+  const renderOverflow = items => {
+        return items.length ? <Tag style={{ flex: '0 0 auto' }}>+{items.length}</Tag> : null;
+    };
+  const renderItem = (item, ind) => {
+      return (
+          <Tag color="blue" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>
+              {item.icon}
+              {item.key}
+          </Tag>
+      );
+  };
+
+  const items = [
+      { icon: <IconAlarm style={{ marginRight: 4 }} />, key: 'alarm' },
+      { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },
+      { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },
+      { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },
+      { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },
+      { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },
+  ];
+
+  return (
+      <div>
+          <Slider step={1} value={width} onChange={value => setWidth(value)} />
+          <br />
+          <br />
+          <div style={{ width: `${width}%`, display: 'flex' }}>
+              <OverflowList
+                  style={{ width: '100%' }}
+                  items={items}
+                  minVisibleItems={3}
+                  overflowRenderer={renderOverflow}
+                  visibleItemRenderer={renderItem}
+              />
+          </div>
+      </div>
+  );
 }
 
 FixDisplayFlexDemo.story = {
@@ -485,48 +540,48 @@ FixDisplayFlexDemo.story = {
 };
 
 export const FixFirstLongTagDemo = () =>{
-    const [width, setWidth] = useState(20);
-    const renderOverflow = items => {
-          return items.length ? <Tag style={{ flex: '0 0 auto' }}>+{items.length}</Tag> : null;
-      };
-    const renderItem = (item, ind) => {
-        return (
-            <Tag color="blue" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>
-                {item.icon}
-                {item.key}
-            </Tag>
-        );
+  const [width, setWidth] = useState(20);
+  const renderOverflow = items => {
+        return items.length ? <Tag style={{ flex: '0 0 auto' }}>+{items.length}</Tag> : null;
     };
+  const renderItem = (item, ind) => {
+      return (
+          <Tag color="blue" key={item.key} style={{ marginRight: 8, flex: '0 0 auto' }}>
+              {item.icon}
+              {item.key}
+          </Tag>
+      );
+  };
 
-    const items = [
-        { icon: <IconAlarm style={{ marginRight: 4, width: 400 }} />, key: 'alarm' },
-        { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },
-        { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },
-        { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },
-        { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },
-        { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },
-    ];
+  const items = [
+      { icon: <IconAlarm style={{ marginRight: 4, width: 400 }} />, key: 'alarm' },
+      { icon: <IconBookmark style={{ marginRight: 4 }} />, key: 'bookmark' },
+      { icon: <IconCamera style={{ marginRight: 4 }} />, key: 'camera' },
+      { icon: <IconDuration style={{ marginRight: 4 }} />, key: 'duration' },
+      { icon: <IconEdit style={{ marginRight: 4 }} />, key: 'edit' },
+      { icon: <IconFolder style={{ marginRight: 4 }} />, key: 'folder' },
+  ];
 
-    return (
-        <div>
-            <div>修复第一个item就溢出, 不触发 onOverflow 问题</div>
-            <Slider step={1} value={width} onChange={value => setWidth(value)} />
-            <br />
-            <br />
-            <div style={{ width: `${width}%` }}>
-                <OverflowList
-                    items={items}
-                    onOverflow={(items)=>{
-                      console.log('触发了onOverflow', items);
-                    }}
-                    overflowRenderer={renderOverflow}
-                    visibleItemRenderer={renderItem}
-                />
-            </div>
-        </div>
-    );
+  return (
+      <div>
+          <div>修复第一个item就溢出, 不触发 onOverflow 问题</div>
+          <Slider step={1} value={width} onChange={value => setWidth(value)} />
+          <br />
+          <br />
+          <div style={{ width: `${width}%` }}>
+              <OverflowList
+                  items={items}
+                  onOverflow={(items)=>{
+                    console.log('触发了onOverflow', items);
+                  }}
+                  overflowRenderer={renderOverflow}
+                  visibleItemRenderer={renderItem}
+              />
+          </div>
+      </div>
+  );
 }
 
 FixFirstLongTagDemo.story = {
   name: 'overflowList with first long tag',
-};
+};

packages/semi-ui/overflowList/index.tsx

@@ -173,6 +173,7 @@ class OverflowList extends BaseComponent<OverflowListProps, OverflowListState> {
 
         if (!isEqual(prevProps.items, this.props.items)) {
             this.itemRefs = {};
+            this.setState({ visibleState: new Map() });
         }
 
         const { overflow, containerWidth, visible, overflowStatus } = this.state;

packages/semi-ui/select/_story/select.stories.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect } from 'react';
 
 import './select.scss';
-import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space, Tag } from '../../index';
+import { Input, Select, Button, Icon, Avatar, Checkbox, Form, withField, Space, Tag, Switch } from '../../index';
 import CustomTrigger from './CustomTrigger';
 import classNames from 'classnames';
 const Option = Select.Option;
@@ -2897,6 +2897,7 @@ SelectInputPropsDemo.story = {
 
 export const AutoClearSearchValue = () => {
     const [val, setVal] = useState(['semi1']);
+    const [clear, setClear] = useState(false);
     const optionList = [
         { label: 'semi1', value: 'semi1' },
         { label: 'semi2', value: 'semi2' },
@@ -2907,20 +2908,23 @@ export const AutoClearSearchValue = () => {
     ];
 
     return (
-        <>
+        <>  
+            <h4>autoClearSearchValue</h4>
+            <Switch checked={clear} onChange={checked => setClear(checked)}></Switch>
+
             <h4>Controlled mode + multiple</h4>
-            <Select style={{ width: 400 }} multiple optionList={optionList} filter value={val} onChange={value => setVal(value)} autoClearSearchValue={false}></Select>
+            <Select style={{ width: 400 }} multiple optionList={optionList} filter value={val} onChange={value => setVal(value)} autoClearSearchValue={clear}></Select>
             <br />
             <br />
             <h4>Uncontrolled mode + multiple</h4>
-            <Select style={{ width: 400 }} multiple optionList={optionList} filter autoClearSearchValue={false}></Select>
+            <Select style={{ width: 400 }} multiple optionList={optionList} filter autoClearSearchValue={clear}></Select>
             <h4>Uncontrolled mode + multiple + defaultValue</h4>
-            <Select style={{ width: 400 }}  multiple optionList={optionList} filter defaultValue={['semi2']} autoClearSearchValue={false}></Select>
+            <Select style={{ width: 400 }} multiple optionList={optionList} filter defaultValue={['semi2']} autoClearSearchValue={clear}></Select>
         </>
     )
 }
 
-SelectInputPropsDemo.story = {
+AutoClearSearchValue.story = {
   name: 'AutoClearSearchValue',
 };
 
@@ -3204,3 +3208,4 @@ export const emptyContent = () => {
     <Select placeholder='请选择业务线' emptyContent={null} style={{ width: 180 }} optionList={list} defaultOpen={true}/>
   )
 }
+