Merge branch main into release

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

@@ -955,7 +955,7 @@ import { Select } from '@douyinfe/semi-ui';
 Turn on list virtualization when passing in `virtualize` to optimize performance when there are a large number of Option nodes
 virtualize is an object containing the following values:
 
-- height: Option list height value, default 300
+- height: Option list height value, default 270 （before v2.20.8 was 300）
 - width: Option list width value, default 100%
 - itemSize: The height of each line of Option, must be passed
 
@@ -975,7 +975,7 @@ class VirtualizeDemo extends React.Component {
     render() {
         let { groups, optionList } = this.state;
         let virtualize = {
-            height: 300,
+            height: 270,
             width: '100%',
             itemSize: 36, // px
         };
@@ -1278,7 +1278,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | loading | Does the drop-down list show the loading animation | boolean | false |
 | max | Maximum number of choices, effective only in multi-selection mode | number |  |
 | maxTagCount | In multi-selection mode, when the option is beyond maxTag Count, the subsequent option is rendered in the form of + N | number |  |
-| maxHeight | Maximum height of `optionList` in the pop-up layer | string | number | 300 |
+| maxHeight | Maximum height of `optionList` in the pop-up layer | string | number | 270 |
 | multiple | Whether allow multiple selection | boolean | false |
 | outerBottomSlot | Rendered at the bottom of the pop-up layer, custom slot level with optionList | ReactNode |  |
 | outerTopSlot | Rendered at the top of the pop-up layer, custom slot level with optionList <br/>**supported after v1.6.0** |

content/input/select/index.md

@@ -1018,7 +1018,7 @@ import { Select } from '@douyinfe/semi-ui';
 传入`virtualize`时开启列表虚拟化，用于大量 Option 节点的情况优化性能  
 virtualize 是一个包含下列值的对象：
 
--   height: Option 列表高度值，默认 300
+-   height: Option 列表高度值，默认 270 (v2.20.8 前为 300)
 -   width: Option 列表宽度值，默认 100%
 -   itemSize: 每行 Option 的高度，必传
  
@@ -1051,7 +1051,7 @@ class VirtualizeDemo extends React.Component {
     render() {
         let { groups, optionList } = this.state;
         let virtualize = {
-            height: 300,
+            height: 270,
             width: '100%',
             itemSize: 36, // px
         };
@@ -1332,7 +1332,7 @@ import { Select, Checkbox } from '@douyinfe/semi-ui';
 | loading                  | 下拉列表是否展示加载动画                                                                                                                                                                                  | boolean                               | false                             |
 | maxTagCount              | 多选模式下，已选项超出 maxTagCount 时，后续选项会被渲染成+N 的形式                                                                                                                                        | number                                |                                   |
 | max                      | 最多可选几项，仅在多选模式下生效                                                                                                                                                                          | number                                |                                   |
-| maxHeight                | 下拉菜单中 `optionList` 的最大高度                                                                                                                                                                        | string\|number                        | 300                               |
+| maxHeight                | 下拉菜单中 `optionList` 的最大高度                                                                                                                                                                        | string\|number                        | 270                               |
 | multiple                 | 是否多选                                                                                                                                                                                                  | boolean                               | false                             |
 | outerTopSlot             | 渲染在弹出层顶部，与 optionList 平级的自定义 slot                                                                                                                          | ReactNode                             |                                   |
 | outerBottomSlot          | 渲染在弹出层底部，与 optionList 平级的自定义 slot                                                                                                                                                         | ReactNode                             |                                   |

content/start/changelog/index-en-US.md

@@ -16,6 +16,13 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.21.0 (2022-10-12)
+- 【Fix】
+  - ix the problem that the timer is not updated when carousel switches the index through the left and right buttons or methods
+
+- 【Docs】
+  - Update docsite homepage, add showcase
+
 #### 🎉 2.21.0-beta.1 (2022-10-10)
 - 【Fix】
   - fix AutoComplete e.target is null in onBlur callback
@@ -32,17 +39,32 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
   - fix Select when the filter is true and the input box is empty, after closing panel trigger onSearch function issue
 - 【Style】
   - add rounded corners to square avatars
+#### 🎉 2.20.8 (2022-10-11)
+- 【Fix】
+  - Fixed the problem that the position of the first Option option is offset when the Select is virtualized  [#1178](https://github.com/DouyinFE/semi-design/pull/1178)
+- 【Style】
+  - The default maxHeight value of Select (the max height of the Option floating layer), the default height of virtualization is `300px` -> `270px`
+  - Select Design Token changed, abandoned `$spacing-select_option_first-marginTop`、`$spacing-select_option_last-marginBottom` ；
+Change ：`$spacing-select_option_list-paddingTop` 、`$spacing-select_option_list-paddingBottom` ， from 0 to `$spacing-extra-tight` (4px)
+- 【Chore】
+    - Form export RuleItem Interface  
+
+
+
+#### 🎉 2.20.7 (2022-10-10)
+- 【Fix】
+  - Fix the problem that the style is lost when only ImagePreview is introduced and used alone, and the Image component is not introduced[#1175](https://github.com/DouyinFE/semi-design/pull/1175)
 
 #### 🎉 2.20.3 (2022-09-28)
 - 【Fix】
-   - Fix the ButtonGroup key warning problem
-   - Fix SSR setting withField、Form Field related problem with useLayoutEffect warning [#1140](https://github.com/DouyinFE/semi-design/pull/1140)
-   - Fix the problem of some type errors under typescript 4.8.3
-   - Modify the modal focus logic to automatically focus on the first focusable element in the pop-up window
+  - Fix the ButtonGroup key warning problem
+  - Fix SSR setting withField、Form Field related problem with useLayoutEffect warning [#1140](https://github.com/DouyinFE/semi-design/pull/1140)
+  - Fix the problem of some type errors under typescript 4.8.3
+  - Modify the modal focus logic to automatically focus on the first focusable element in the pop-up window
 
 #### 🎉 2.20.2 (2022-09-27)
 - 【Fix】
-   - Fix warning about corejs in @douyinfe/semi-icons 
+  - Fix warning about corejs in @douyinfe/semi-icons 
 
 #### 🎉 2.20.1 (2022-09-27)
 - 【Style】

content/start/changelog/index.md

@@ -15,13 +15,22 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 
 
 ---
+
+#### 🎉 2.21.0 (2022-10-12)
+- 【Fix】
+  - 修复carousel通过左右按钮或者方法切换 index 时没有更新计时器问题
+
+- 【Docs】
+  - 文档站点首页更新，增加 showcase
+
+
 #### 🎉 2.21.0-beta.1 (2022-10-10)
 - 【Fix】
   - 修复 AutoComplete 在 onBlur 回调中 e.target 是 null 的问题
 
 #### 🎉 2.21.0-beta.0 (2022-10-08)
 - 【Feat】
-  - Table 新增表头  sticky  API
+  - Table 新增表头 sticky API
   - AutoComplete 新增 onKeyDown API
   - Upload 组件对外暴露 openFileDialog 方法，使用户可以手动打开文件选择窗口。
   - LocaleProvider 新增罗马尼亚语（ro） [@jacob-lcs](https://github.com/jacob-lcs)
@@ -32,6 +41,21 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 - 【Style】
   - Avatar 方形头像增加圆角
   
+#### 🎉 2.20.8 (2022-10-11)
+- 【Fix】
+  - 修复 Select 虚拟化时，第一个 Option 选项位置偏移的问题  [#1178](https://github.com/DouyinFE/semi-design/pull/1178)
+- 【Style】
+  - Select 的 maxHeight 默认值 （Option 浮层最大高度）、虚拟化默认高度由 300px -> 270px
+  - Select Design Token 变更，废弃 `$spacing-select_option_first-marginTop`、`$spacing-select_option_last-marginBottom` 两个 Token ；
+修改 以下 Token 默认值：`$spacing-select_option_list-paddingTop` 、`$spacing-select_option_list-paddingBottom` ， 由 0 变更为 `$spacing-extra-tight` (4px)
+- 【Chore】
+    - Form 增加 RuleItem Interface export 
+
+
+#### 🎉 2.20.7 (2022-10-10)
+- 【Fix】
+  - 修复只引入 ImagePreview 单独使用，未引入 Image 组件时样式丢失的问题 [#1175](https://github.com/DouyinFE/semi-design/pull/1175)
+
 #### 🎉 2.20.3 (2022-09-28)
 - 【Fix】
   - 修复 ButtonGroup 关于 key warning的问题

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.21.0-beta.1"
+    "version": "2.20.8"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.21.0-beta.1",
+  "version": "2.20.8",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@douyinfe/semi-animation": "2.12.0",
-    "@douyinfe/semi-animation-styled": "2.21.0-beta.1",
+    "@douyinfe/semi-animation-styled": "2.20.8",
     "classnames": "^2.2.6"
   },
   "devDependencies": {

packages/semi-animation-styled/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-styled",
-  "version": "2.21.0-beta.1",
+  "version": "2.20.8",
   "description": "semi styled animation",
   "keywords": [
     "semi",

packages/semi-animation/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation",
-  "version": "2.21.0-beta.1",
+  "version": "2.20.8",
   "description": "animation base library for semi-ui",
   "keywords": [
     "animation",

packages/semi-eslint-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-semi-design",
-  "version": "2.21.0-beta.1",
+  "version": "2.20.8",
   "description": "semi ui eslint plugin",
   "keywords": [
     "semi",

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.21.0-beta.1",
+    "version": "2.20.8",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",

packages/semi-foundation/select/constants.ts

@@ -16,6 +16,6 @@ const strings = {
     STATUS: VALIDATE_STATUS,
 } as const;
 
-const numbers = { LIST_HEIGHT: 300 };
+const numbers = { LIST_HEIGHT: 270 };
 
 export { cssClasses, strings, numbers };

packages/semi-foundation/select/option.scss

@@ -85,11 +85,11 @@ $multiple: #{$module}-multiple;
         background-color: $color-select_option-bg-hover;
     }
 
-    &:first-of-type {
-        margin-top: $spacing-select_option_first-marginTop;
-    }
+    // &:first-of-type {
+    // margin-top: $spacing-select_option_first-marginTop;
+    // }
 
-    &:last-of-type {
-        margin-bottom: $spacing-select_option_last-marginBottom;
-    }
+    // &:last-of-type {
+    // margin-bottom: $spacing-select_option_last-marginBottom;
+    // }
 }

packages/semi-foundation/select/select.scss

@@ -22,9 +22,8 @@ $multiple: #{$module}-multiple;
     position: relative;
     outline: none;
     cursor: pointer;
-    transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg,
-    border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
-    transform:scale($transform_scale-select);
+    transition: background-color $transition_duration-select-bg $transition_function-select-bg $transition_delay-select-bg, border $transition_duration-select-border $transition_function-select-border $transition_delay-select-border;
+    transform: scale($transform_scale-select);
     &:hover {
         background-color: $color-select-bg-hover;
         border: $width-select-border-hover solid $color-select-border-hover;
@@ -394,10 +393,16 @@ $multiple: #{$module}-multiple;
     }
 }
 
+.#{$module}-option-list-wrapper {
+    padding-top: $spacing-select_option_list-paddingTop;
+    padding-bottom: $spacing-select_option_list-paddingBottom;
+    padding-left: $spacing-select_option_list-paddingLeft;
+    padding-right: $spacing-select_option_list-paddingRight;
+}
+
 .#{$module}-option-list {
     overflow-x: hidden;
     overflow-y: auto;
-    padding: $spacing-select_option_list-paddingTop $spacing-select_option_list-paddingRight $spacing-select_option_list-paddingBottom $spacing-select_option_list-paddingLeft;
     &-chosen {
         .#{$module}-option-icon {
             display: flex;

packages/semi-foundation/select/variables.scss

@@ -84,16 +84,21 @@ $spacing-select_option-paddingLeft: $spacing-base-tight; // 选择器菜单项
 $spacing-select_option-paddingRight: $spacing-base-tight; // 选择器菜单项右侧内边距
 $spacing-select_option-paddingTop: $spacing-tight; // 选择器菜单项顶部内边距
 $spacing-select_option-paddingBottom: $spacing-tight; // 选择器菜单项底部内边距
-$spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
-$spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
+
+
+// $spacing-select_option_first-marginTop: $spacing-extra-tight; // 选择器第一个菜单项顶部外边距
+// $spacing-select_option_last-marginBottom: $spacing-extra-tight; // 选择器最后一个菜单项顶部外边距
+
+
 $spacing-select_tag-marginTop: $spacing-super-tight - 1px; // 多项选择器标签顶部外边距
 $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签右侧外边距
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1px; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
-$spacing-select_option_list-paddingTop: 0px; // 选择器内容区顶部内边距
+
+$spacing-select_option_list-paddingTop: $spacing-extra-tight; // 选择器内容区顶部内边距
 $spacing-select_option_list-paddingRight: 0px; // 选择器内容区右侧内边距
-$spacing-select_option_list-paddingBottom: 0px; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingBottom: $spacing-extra-tight; // 选择器内容区底部内边距
 $spacing-select_option_list-paddingLeft: 0px; // 选择器内容区左侧内边距
 
 // Radius

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.21.0-beta.1",
+  "version": "2.20.8",
   "description": "semi icons",
   "keywords": [
     "semi",
@@ -35,7 +35,7 @@
   "devDependencies": {
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@douyinfe/semi-webpack-plugin": "2.21.0-beta.1",
+    "@douyinfe/semi-webpack-plugin": "2.20.8",
     "babel-loader": "^8.2.2",
     "css-loader": "4.3.0",
     "del": "^6.0.0",

packages/semi-illustrations/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-illustrations",
-  "version": "2.21.0-beta.1",
+  "version": "2.20.8",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.21.0-beta.1",
+    "version": "2.20.8",
     "description": "Plugin that support Semi Design in Next.js",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",
@@ -23,7 +23,7 @@
         "typescript": "^4"
     },
     "dependencies": {
-        "@douyinfe/semi-webpack-plugin": "2.21.0-beta.1"
+        "@douyinfe/semi-webpack-plugin": "2.20.8"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.21.0-beta.1",
+  "version": "2.20.8",
   "description": "compile semi scss to css",
   "author": "[email protected]",
   "license": "MIT",

packages/semi-theme-default/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-theme-default",
-    "version": "2.21.0-beta.1",
+    "version": "2.20.8",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/form/interface.ts

@@ -15,7 +15,7 @@ import { RadioProps } from '../radio/index';
 import { ErrorMessageProps, ReactFieldError as FieldError } from './errorMessage';
 import { LabelProps } from './label';
 
-export { FormState, FormApi, WithFieldOption };
+export { FormState, FormApi, WithFieldOption, RuleItem };
 
 export type CommonFieldProps = {
     /** Field is required (except Form. Checkbox within the Group, Form. Radio) */

packages/semi-ui/image/image.tsx

@@ -8,13 +8,13 @@ import { cssClasses } from "@douyinfe/semi-foundation/image/constants";
 import cls from "classnames";
 import { IconUploadError, IconEyeOpened } from "@douyinfe/semi-icons";
 import PreviewInner from "./previewInner";
-import "@douyinfe/semi-foundation/image/image.scss";
 import { PreviewContext, PreviewContextProps } from "./previewContext";
 import ImageFoundation, { ImageAdapter } from "@douyinfe/semi-foundation/image/imageFoundation";
 import LocaleConsumer from "../locale/localeConsumer";
 import { Locale } from "../locale/interface";
 import { isObject } from "lodash";
 import Skeleton from "../skeleton";
+import "@douyinfe/semi-foundation/image/image.scss";
 
 const prefixCls = cssClasses.PREFIX;
 

packages/semi-ui/image/index.tsx

@@ -1,6 +1,7 @@
 import Image from "./image";
 import PreviewInner from "./previewInner";
 import Preview from "./preview";
+import "@douyinfe/semi-foundation/image/image.scss";
 
 export default Image;
 export {

packages/semi-ui/image/preview.tsx

@@ -8,6 +8,7 @@ import PreviewFoundation from "@douyinfe/semi-foundation/image/previewFoundation
 import { getUuidShort } from "@douyinfe/semi-foundation/utils/uuid";
 import { cssClasses } from "@douyinfe/semi-foundation/image/constants";
 import { isObject } from "lodash";
+import "@douyinfe/semi-foundation/image/image.scss";
 
 const prefixCls = cssClasses.PREFIX;
 
@@ -28,10 +29,10 @@ export default class Preview extends BaseComponent<PreviewProps, PreviewState> {
         closeOnEsc: PropTypes.bool,
         prevTip: PropTypes.string,
         nextTip: PropTypes.string,
-        zoomInTip:PropTypes.string,
+        zoomInTip: PropTypes.string,
         zoomOutTip: PropTypes.string,
         downloadTip: PropTypes.string,
-        adaptiveTip:PropTypes.string,
+        adaptiveTip: PropTypes.string,
         originTip: PropTypes.string,
         lazyLoad: PropTypes.bool,
         lazyLoadMargin: PropTypes.string,

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.21.0-beta.1",
+    "version": "2.20.8",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -18,11 +18,11 @@
     ],
     "dependencies": {
         "@douyinfe/semi-animation": "2.12.0",
-        "@douyinfe/semi-animation-react": "2.21.0-beta.1",
-        "@douyinfe/semi-foundation": "2.21.0-beta.1",
-        "@douyinfe/semi-icons": "2.21.0-beta.1",
+        "@douyinfe/semi-animation-react": "2.20.8",
+        "@douyinfe/semi-foundation": "2.20.8",
+        "@douyinfe/semi-icons": "2.20.8",
         "@douyinfe/semi-illustrations": "2.15.0",
-        "@douyinfe/semi-theme-default": "2.21.0-beta.1",
+        "@douyinfe/semi-theme-default": "2.20.8",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",
         "@babel/preset-react": "^7.14.5",
-        "@douyinfe/semi-scss-compile": "2.21.0-beta.1",
+        "@douyinfe/semi-scss-compile": "2.20.8",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "@types/react": ">=16.0.0",

packages/semi-ui/select/index.tsx

@@ -25,14 +25,14 @@ import Spin from '../spin';
 import Trigger from '../trigger';
 import { IconChevronDown, IconClear } from '@douyinfe/semi-icons';
 import { isSemiIcon, getFocusableElements, getActiveElement } from '../_utils';
-import { Subtract } from 'utility-types';
-
 import warning from '@douyinfe/semi-foundation/utils/warning';
 import { getUuidShort } from '@douyinfe/semi-foundation/utils/uuid';
 
 import '@douyinfe/semi-foundation/select/select.scss';
-import { Locale } from '../locale/interface';
-import { Position, TooltipProps } from '../tooltip';
+import type { Locale } from '../locale/interface';
+import type { Position, TooltipProps } from '../tooltip';
+import type { Subtract } from 'utility-types';
+
 
 export type { OptionProps } from './option';
 export type { OptionGroupProps } from './optionGroup';
@@ -303,7 +303,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
         onBlur: noop,
         onClear: noop,
         onListScroll: noop,
-        maxHeight: 300,
+        maxHeight: numbers.LIST_HEIGHT,
         dropdownMatchSelectWidth: true,
         defaultActiveFirstOption: true, // In order to meet the needs of A11y, change to true
         showArrow: true,
@@ -867,8 +867,8 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions
             <div 
                 id={`${prefixcls}-${this.selectOptionListID}`} 
-                className={dropdownClassName} 
-                style={style} 
+                className={cls(`${prefixcls}-option-list-wrapper`, dropdownClassName)} 
+                style={style}
                 ref={this.setOptionContainerEl} 
                 onKeyDown={e => this.foundation.handleContainerKeyDown(e)}
             >

packages/semi-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-webpack-plugin",
-    "version": "2.21.0-beta.1",
+    "version": "2.20.8",
     "description": "",
     "author": "伍浩威 <[email protected]>",
     "homepage": "",