Merge branch 'main' of https://github.com/DouyinFE/semi-design into release

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

@@ -66,6 +66,8 @@ import { Input } from '@douyinfe/semi-ui';
 
 ### Prefix/Suffix
 
+When the content of `prefix` and `suffix` is text or Semi Icon, the left and right margin will be automatically added. If it is a custom ReactNode, the left and right margin will be 0
+
 ```jsx live=true
 import React from 'react';
 import { Input, Typography } from '@douyinfe/semi-ui';
@@ -86,6 +88,8 @@ import { IconSearch } from '@douyinfe/semi-icons';
 
 ### Addon
 
+When the content of `addonBefore` and `addonAfter` is text or Semi Icon, the left and right margin will be automatically added. If it is a custom ReactNode, the left and right margin will be 0.
+
 ```jsx live=true
 import React from 'react';
 import { Input } from '@douyinfe/semi-ui';

content/input/input/index.md

@@ -68,7 +68,10 @@ import { Input } from '@douyinfe/semi-ui';
 
 ### 前缀/后缀
 
-在输入框上增加前缀、后缀图标，可以是 ReactNode 。
+在输入框上增加前缀、后缀图标，可以是 ReactNode
+
+当 prefix、suffix 传入的内容为文本或者 Semi Icon 时，会自动带上左右间隔，若为自定义 ReactNode，则左右间隔为 0
+
 
 ```jsx live=true
 import React from 'react';
@@ -92,6 +95,8 @@ import { IconSearch } from '@douyinfe/semi-icons';
 
 在输入框上增加前置/后置标签
 
+当 addonBefore、addonAfter 传入的内容为文本或者 Semi Icon 时，会自动带上左右间隔，若为自定义 ReactNode，则左右间隔为 0
+
 ```jsx live=true
 import React from 'react';
 import { Input } from '@douyinfe/semi-ui';

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

@@ -277,7 +277,7 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
                     },
                     { 
                         path: '/breadcrumb', 
-                        href: '/components/breadcrumb', 
+                        href: '/en-US/navigation/breadcrumb', 
                         name: 'breadcrumb', 
                         icon: <IconArticle />
                     },
@@ -345,4 +345,4 @@ After **v>=1.16.0**, other props in Breadcrumb.Item are also supported correspon
 <!-- ## Related Material
 ```material
 87
-``` -->
+``` -->

content/navigation/breadcrumb/index.md

@@ -280,7 +280,7 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
                     },
                     {
                         path: '/breadcrumb',
-                        href: '/components/breadcrumb',
+                        href: '/zh-CN/navigation/breadcrumb',
                         name: 'breadcrumb',
                         icon: <IconArticle size="small" />
                     },
@@ -347,4 +347,4 @@ import { IconHome, IconArticle } from '@douyinfe/semi-icons';
 <!-- ## 相关物料
 ```material
 87
-``` -->
+``` -->

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

@@ -16,6 +16,23 @@ Version：Major.Minor.Patch
 
 ---
 
+#### 🎉 2.4.1 (2022-2-16)
+- 【Fix】
+    - `@douyinfe/semi-ui` Add dependency declaration: `@douyinfe/semi-animation` to avoid the problem of missing dependency declarations that may exist in pnpm scenarios [#626](https://github.com/DouyinFE/semi-design/issues/626)
+    - Avoid waring about passing insetLabelId/onChangeWithDateFirst to origin input/text dom in component Form.Input/TextArea/TimePicker [#624](https://github.com/DouyinFE/semi-design/issues/624)
+- 【Style】
+    - Optimize TagInput component Sass variable reference relationship [@Carlosfengv](https://github.com/Carlosfengv)
+
+#### 🎉 2.4.0 (2022-2-11)
+- 【Fix】
+    - TimePicker crash issue  [#585](https://github.com/DouyinFE/semi-design/issues/585)
+    - Fix Nav limitIndent in the collapsed state, when the submenu is displayed in the form of dropdown, it is also consumed, which leads to the problem of redundant blank space
+    - fix Typograph ellipsis error when set whiteSpace 'pre-line' and expandable
+    - Fix TreeSelect When treeData is large, update becomes very slow due to redundant operations of converting to Set  [#521 ](https://github.com/DouyinFE/semi-design/issues/521)
+    - Fix that when TreeSelect is uncontrolled single-selection mode, after treeData is updated, the selected value will be emptied unexpectedly  [#515](https://github.com/DouyinFE/semi-design/issues/515)
+- 【Style】
+    - Update some Sass variables in Button, Input, Modal, Select, ScrollList and TreeSelect components. Extract the default style as a Sass variable to facilitate DSM to modify the default style of these components [#570](https://github.com/DouyinFE/semi-design/pull/570)
+
 #### 🎉 2.4.0-beta.0 (2022-01-28)
 - 【Feat】
     - TimePicker add support for `onChangeWithDateFirst` API  [#555](https://github.com/DouyinFE/semi-design/issues/555)

content/start/changelog/index.md

@@ -15,6 +15,22 @@ Semi 版本号遵循**Semver**规范（主版本号-次版本号-修订版本号
 
 ---
 
+#### 🎉 2.4.1 (2022-2-16)
+- 【Fix】
+    - @douyinfe/semi-ui 添加 dependency声明：@douyinfe/semi-animation，避免在 pnpm 场景下可能存在的依赖声明缺失问题 [#626](https://github.com/DouyinFE/semi-design/issues/626)
+    - 修复使用 Form.Input/TextArea 且labelPosition设置为inset时，insetLabelId 被意外透传至 input/textarea dom上导致 warning 的问题，修复TimePicker onChangeWithDateFirst 被意外透传至 input dom上导致 warning 的问题 [#624](https://github.com/DouyinFE/semi-design/issues/624)
+- 【Style】
+    - 优化 TagInput 组件样式变量引用关系 [@Carlosfengv](https://github.com/Carlosfengv)
+#### 🎉 2.4.0 (2022-02-11)
+- 【Fix】
+    - TimePicker 崩溃问题  [#585](https://github.com/DouyinFE/semi-design/issues/585)
+    - 修复 Nav limitIndent 在折叠态后，子菜单通过 dropdown 形式展示时，也被消费，从而导致了多余的空白间隔的问题
+    - 修复 Typograph 组件截断错误，当设置 whiteSpace 为 'pre-line' 且 expandable
+    - 修复 TreeSelect 当 treeData 较大时，由于多余的转化为 Set 的操作，造成 update 变得很慢  [#521 ](https://github.com/DouyinFE/semi-design/issues/521)
+    - 修复 TreeSelect 在单选且非受控时，treeData 更新后，已选值会被异常清空的问题  [#515](https://github.com/DouyinFE/semi-design/issues/515)
+- 【Style】
+    - 更新了 Button、Input、Modal、Select、ScrollList、TreeSelect 的部分 Sass 变量，抽取了部分默认样式为 Sass 变量以方便 DSM 修改组件默认样式 [#570](https://github.com/DouyinFE/semi-design/pull/570)
+
 #### 🎉 2.4.0-beta.0 (2022-01-28)
 - 【Feat】
     - TimePicker 支持 `onChangeWithDateFirst` API  [#555](https://github.com/DouyinFE/semi-design/issues/555)

lerna.json

@@ -1,5 +1,5 @@
 {
     "useWorkspaces": true,
     "npmClient": "yarn",
-    "version": "2.4.0-beta.0"
+    "version": "2.4.1"
 }

packages/semi-animation-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-animation-react",
-  "version": "2.4.0-beta.0",
+  "version": "2.4.1",
   "description": "motion library for semi-ui-react",
   "keywords": [
     "motion",
@@ -26,8 +26,8 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.15.4",
-    "@douyinfe/semi-animation": "2.4.0-beta.0",
-    "@douyinfe/semi-animation-styled": "2.4.0-beta.0",
+    "@douyinfe/semi-animation": "2.4.1",
+    "@douyinfe/semi-animation-styled": "2.4.1",
     "classnames": "^2.2.6"
   },
   "peerDependencies": {

packages/semi-animation-styled/package.json

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

packages/semi-animation/package.json

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

packages/semi-foundation/button/button.scss

@@ -112,21 +112,27 @@ $module: #{$prefix}-button;
     }
     &-borderless {
         background-color: transparent;
+        border: $width-button_borderless-border $color-button_borderless-border-default solid;
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_borderless-bg-hover;
+            border: $width-button_borderless-border $color-button_borderless-border-hover solid;
         }
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_borderless-bg-active;
+            border: $width-button_borderless-border $color-button_borderless-border-active solid;
         }
     }
 
     &-light {
         background-color: $color-button_light-bg-default;
+        border: $width-button_light-border $color-button_light-border-default solid;
         &:not(.#{$module}-disabled):hover {
             background-color: $color-button_light-bg-hover;
+            border: $width-button_light-border $color-button_light-border-hover solid;
         }
         &:not(.#{$module}-disabled):active {
             background-color: $color-button_light-bg-active;
+            border: $width-button_light-border $color-button_light-border-active solid;
         }
     }
     &-size-small {

packages/semi-foundation/button/variables.scss

@@ -76,11 +76,19 @@ $color-button_disabled-bg-hover: var(--semi-color-disabled-bg); // 禁用按钮
 $color-button_light-bg-default: var(--semi-color-fill-0); // 浅色按钮背景颜色
 $color-button_light-bg-hover: var(--semi-color-fill-1); // 禁用按钮背景颜色 - 悬浮
 $color-button_light-bg-active: var(--semi-color-fill-2); // 禁用按钮背景颜色 - 按下
+$color-button_light-border-default: transparent; // 浅色按钮描边颜色 
+$color-button_light-border-hover: $color-button_light-border-default; // 浅色按钮描边颜色 - 悬浮
+$color-button_light-border-active: $color-button_light-border-hover; // 浅色按钮描边颜色 - 按下
+$width-button_light-border: 0;  // 浅色按钮描边宽度
 
 // borderless
 $color-button_borderless-text-default: var(--semi-color-primary); // 无背景按钮背景颜色
 $color-button_borderless-bg-hover: var(--semi-color-fill-0); // 无背景按钮背景颜色 - 悬浮
 $color-button_borderless-bg-active: var(--semi-color-fill-1); // 无背景按钮背景颜色 - 按下
+$color-button_borderless-border-default: transparent; // 无背景按钮描边颜色
+$color-button_borderless-border-hover: $color-button_borderless-border-default; // 无背景按钮描边颜色 - 悬浮
+$color-button_borderless-border-active: $color-button_borderless-border-hover; // 无背景按钮描边颜色 - 按下
+$width-button_borderless-border: 0; // 无背景按钮描边宽度
 
 // buttongroup
 
@@ -125,4 +133,4 @@ $height-button_default: $height-control-default; // 按钮高度 - 默认
 
 $width-button-border: $border-thickness;  // 按钮描边宽度
 $radius-button: var(--semi-border-radius-small); // 按钮圆角大小
-$radius-button_group: $radius-button; // 按钮组圆角大小
+$radius-button_group: $radius-button; // 按钮组圆角大小

packages/semi-foundation/cascader/cascader.scss

@@ -20,6 +20,7 @@ $module: #{$prefix}-cascader;
 
     &:hover {
         background-color: $color-cascader_default-bg-hover;
+        border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
     &-small {

packages/semi-foundation/cascader/variables.scss

@@ -1,9 +1,10 @@
 $radius-cascader: var(--semi-border-radius-small); // 级联选择菜单圆角
 
-$color-cascader_default-border-default: transparent; // 级联选择描边颜色
+$color-cascader_default-border-default: transparent; // 级联选择描边颜色 - 默认
+$color-cascader_default-border-hover: transparent; // 级联选择描边颜色 - 悬浮
+$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
 $color-cascader_default-bg-default: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 默认
 $color-cascader_default-bg-hover: var(--semi-color-fill-1); // 级联选择菜单项背景颜色 - 悬浮
-$color-cascader_default-border-focus: var(--semi-color-focus-border); // 级联选择描边颜色 - 选中
 $color-cascader_option_list-border-default: var(--semi-color-fill-0); // 级联选择各级菜单分割线颜色
 $color-cascader_option_main-text-default: var(--semi-color-text-0); // 级联选择菜单项文字颜色
 $color-cascader_option-bg-hover: var(--semi-color-fill-0); // 级联选择菜单项背景颜色 - 悬浮
@@ -83,6 +84,7 @@ $width-cascader:  80px; // 级联选择触发器最小宽度
 $height-cascader_default:  $height-control-default; // 级联选择触发器高度 - 默认
 $height-cascader_small: $height-control-small; // 级联选择触发器高度 - 小尺寸
 $height-cascader_large: $height-control-large; // 级联选择触发器高度 - 大尺寸
+$width-cascader_hover-border: $width-cascader-border; // 级联选择触发器描边宽度 - 悬浮
 $width-cascader_focus-border: $border-thickness-control-focus; // 级联选择触发器描边宽度 - 选中态
 $width-cascader_search-border: 1px; // 级联选择触搜索描边宽度
 $width-cascader-icon: 16px; // 级联选择图标尺寸

packages/semi-foundation/input/textarea.scss

@@ -136,12 +136,15 @@ $module: #{$prefix}-input;
     background-color: transparent;
     border: $width-textarea-border solid $color-textarea-border-default;
     vertical-align: bottom;
-
     width: 100%;
     outline: none;
     cursor: text;
     box-sizing: border-box;
     color: $color-input_default-text-default;
+    
+    &:hover {
+        border-color: $color-textarea-border-hover;
+    }
 
     &::placeholder {
         color: $color-input_placeholder-text-default;

packages/semi-foundation/input/variables.scss

@@ -100,6 +100,7 @@ $spacing-textarea_counter-paddingLeft: 12px; // 多行文本字数统计左侧
 $width-textarea-border: $border-thickness; // 多行文本描边宽度
 $height-textarea_counter: 24px; // 多行文本字数统计最小高度
 $color-textarea-border-default: transparent; // 多行文本描边颜色
+$color-textarea-border-hover: $color-textarea-border-default; // 多行文本描边颜色 - 悬浮
 
 $color-textarea-icon-default: var(--semi-color-text-2); // 多行文本 clear 图标颜色
 $color-textarea-icon-hover: var(--semi-color-primary-hover); // 多行文本 clear 图标颜色 - 悬浮

packages/semi-foundation/modal/modal.scss

@@ -84,6 +84,7 @@ $module: #{$prefix}-modal;
         padding: $spacing-modal_header-paddingY $spacing-modal_header-paddingX;
         font-size: $font-modal_header-fontSize;
         font-weight: $font-modal_header-fontWeight;
+        background-color: $color-modal_header-bg;
         color: $color-modal_main-text;
         border-bottom: $width-modal_header-border solid $color-modal_header-border;
     }
@@ -112,6 +113,7 @@ $module: #{$prefix}-modal;
         text-align: right;
         border-radius: $radius-modal_footer;
         border-top: $width-modal_footer-border solid $color-modal_footer-border;
+        background-color: $color-modal_footer-bg;
         
         .#{$prefix}-button {
             margin-left: $spacing-modal_footer_button-marginLeft;

packages/semi-foundation/modal/variables.scss

@@ -8,6 +8,8 @@ $color-modal_success-icon: var(--semi-color-success); // 模态框成功图标
 $color-modal_danger-icon: var(--semi-color-danger); // 模态框危险图标颜色
 $color-modal_warning-icon: var(--semi-color-warning); // 模态框警告图标颜色
 $color-modal_content-border: var(--semi-color-border); // 模态框描边颜色
+$color-modal_header-bg: transparent;  // 模态框 header 背景填充色
+$color-modal_footer-bg: transparent;  // 模态框 footer 背景填充色
 
 // Spacing
 $spacing-modal-marginY: 80px; // 模态框距容器顶部外边距
@@ -62,8 +64,9 @@ $font-modal_header-fontSize: $font-size-regular; // 模态框 title 字号
 $font-modal_header-fontWeight: $font-weight-bold; // 模态框 title 字重
 
 //border
-$color-modal_header-border:transparent;
-$width-modal_header-border:0;
-$color-modal_footer-border:transparent;
-$width-modal_footer-border:0;
+$color-modal_header-border:transparent;  // 模态框 header 底部描边颜色
+$width-modal_header-border:0; // 模态框 header 底部描边宽度
+$color-modal_footer-border:transparent; // 模态框 footer 顶部描边颜色
+$width-modal_footer-border:0; // 模态框 footer 顶部描边宽度
+
 

packages/semi-foundation/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.4.0-beta.0",
+    "version": "2.4.1",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -8,7 +8,7 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation": "2.4.0-beta.0",
+        "@douyinfe/semi-animation": "2.4.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "date-fns": "^2.9.0",

packages/semi-foundation/scrollList/scrollList.scss

@@ -24,6 +24,7 @@ $module: #{$prefix}-scrolllist;
         &-title {
             padding: $spacing-scrollList_header_title-paddingY $spacing-scrollList_header_title-paddingX;
             font-weight: $font-scrollList_header_title-fontWeight;
+            color: $color-scrollList_header-title;
 
             @include font-size-regular;
         }

packages/semi-foundation/scrollList/variables.scss

@@ -1,18 +1,19 @@
 // Color
-$color-scrollList-bg: var(--semi-color-bg-3);
-$color-scrollList-border: var(--semi-color-border);
-$color-scrollList_item-bg: transparent;
-$color-scrollList_item-text: var(--semi-color-text-0);
-$color-scrollList_disabled_item-text: var(--semi-color-disabled-text);
-$color-scrollList_item-text-hover: var(--semi-color-fill-1);
-$color-scrollList_item-bg-active: var(--semi-color-fill-2);
-$color-scrollList_selected_item-bg: var(--semi-color-primary-light-default);
-$color-scrollList_selected_item-text: var(--semi-color-text-0);
-$color-scrollList_selected_item-icon: var(--semi-color-text-2);
-$color-scrollList_footer-border: var(--semi-color-border);
+$color-scrollList-bg: var(--semi-color-bg-3); // 滚动列表背景色
+$color-scrollList-border: var(--semi-color-border); // 滚动列表描边颜色
+$color-scrollList_header-title: var(--semi-color-text-0); // 滚动列表标题颜色
+$color-scrollList_item-bg: transparent; // 滚动列表选项背景色
+$color-scrollList_item-text: var(--semi-color-text-0); // 滚动列表选项文字颜色
+$color-scrollList_disabled_item-text: var(--semi-color-disabled-text); // 滚动列表选项背景色 - 禁用
+$color-scrollList_item-text-hover: var(--semi-color-fill-1); // 滚动列表选项文字颜色 - 悬浮
+$color-scrollList_item-bg-active: var(--semi-color-fill-2); // 滚动列表选项文字颜色 - 选中
+$color-scrollList_selected_item-bg: var(--semi-color-primary-light-default); // 滚动列表选中选项背景颜色
+$color-scrollList_selected_item-text: var(--semi-color-text-0); // 滚动列表选中选项文字颜色
+$color-scrollList_selected_item-icon: var(--semi-color-text-2); // 滚动列表选中选项图标颜色
+$color-scrollList_footer-border: var(--semi-color-border); // 滚动列表底部描边颜色
 
 // Width/Height
-$height-scrollList: 300px;
+$height-scrollList: 300px; 
 $height-scrollList_item: 36px;
 $width-scrollList_item-border: $border-thickness-control;
 $width-scrollList_item_sel_svg: 16px;

packages/semi-foundation/select/option.scss

@@ -13,6 +13,7 @@ $multiple: #{$module}-multiple;
     padding-top: $spacing-select_option-paddingTop;
     padding-bottom: $spacing-select_option-paddingBottom;
     color: $color-select_option_main-text;
+    border-radius: $radius-select_option;
     position: relative;
     display: flex;
     flex-wrap: nowrap;

packages/semi-foundation/select/optionFoundation.ts

@@ -29,13 +29,13 @@ export default class OptionFoundation extends BaseFoundation<OptionDefaultAdapte
     destroy() {}
 
     onOptionClick(option: BasicOptionProps) {
-        const isDisbled = this.isDisbled_();
-        if (!isDisbled) {
+        const isDisabled = this._isDisabled();
+        if (!isDisabled) {
             this._adapter.notifyClick(option);
         }
     }
 
-    isDisbled_() {
+    _isDisabled() {
         return this.getProp('disabled');
     }
 }

packages/semi-foundation/select/select.scss

@@ -24,14 +24,16 @@ $multiple: #{$module}-multiple;
 
     &:hover {
         background-color: $color-select-bg-hover;
+        border: $width-select-border-hover solid $color-select-border-hover;
     }
 
     &:active {
         background-color: $color-select-bg-active;
+        border: $width-select-border-active solid $color-select-border-active;
     }
 
     &:focus {
-        border: $border-thickness-control-focus solid $color-select_default-border-focus;
+        border: $width-select-border-focus solid $color-select-border-focus;
         outline: 0;
     }
 
@@ -383,7 +385,7 @@ $multiple: #{$module}-multiple;
 .#{$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

@@ -3,6 +3,9 @@ $color-select-bg-default: var(--semi-color-fill-0); // 选择器输入框背景
 $color-select-bg-hover: var(--semi-color-fill-1); // 选择器输入框背景色 - 悬停态
 $color-select-bg-active: var(--semi-color-fill-2); // 选择器输入框背景色 - 按下态
 $color-select-border-default: transparent; // 选择器输入框描边颜色
+$color-select-border-hover: $color-select-border-default;  // 选择器输入框描边颜色 - 悬浮
+$color-select-border-active: var(--semi-color-focus-border); // 选择器输入框描边颜色 - 按下态
+$color-select-border-focus: $color-select-border-active;// 选择器输入框描边颜色 - 悬停态
 $color-select_warning-bg-default: var(--semi-color-warning-light-default); // 警示选择器输入框背景色 - 默认态
 $color-select_warning-border-default: var(--semi-color-warning-light-default); // 警示选择器输入框描边颜色 - 默认态
 $color-select_warning-bg-hover: var(--semi-color-warning-light-hover); // 警示选择器输入框背景色 - 悬停态
@@ -56,7 +59,9 @@ $width-select_arrow_empty: 12px; // 选择器输入框下拉箭头为空时（
 $width-select_clear-icon: 32px; // 选择器输入框清空按钮宽度
 $width-select_group_top-border: $border-thickness-control; // 选择器菜单分组标题描边宽度
 $height-select_multiple_content_wrapper-minHeight: $height-select_default - 2; // 多项选择器标签组最小宽度
-
+$width-select-border-hover: $width-select-border;  // 选择器输入框描边宽度 - 悬浮
+$width-select-border-focus: $width-select-border-hover; // 选择器输入框描边宽度 - 按下
+$width-select-border-active: $width-select-border-focus; // 选择器输入框描边宽度 - 选中
 // Spacing
 $spacing-select_option_tick-marginRight: $spacing-tight; // 选择器菜单选中对勾右侧外边距
 $spacing-select_prefix_suffix_text-marginX: $spacing-base-tight; // 选择器输入框前后缀文本水平内边距
@@ -86,9 +91,14 @@ $spacing-select_tag-marginRight: $spacing-extra-tight; // 多项选择器标签
 $spacing-select_tag-marginBottom: $spacing-super-tight - 1; // 多项选择器标签底部外边距
 $spacing-select_selection-marginLeft: $spacing-base-tight; // 选择器内容区左侧外边距
 $spacing-select_insetLabel-marginRight: $spacing-base-tight; // 选择器内嵌标签右侧外边距
+$spacing-select_option_list-paddingTop: 0; // 选择器内容区顶部内边距
+$spacing-select_option_list-paddingRight: 0; // 选择器内容区右侧内边距
+$spacing-select_option_list-paddingBottom: 0; // 选择器内容区底部内边距
+$spacing-select_option_list-paddingLeft: 0; // 选择器内容区左侧内边距
 
 // Radius
 $radius-select: var(--semi-border-radius-small); // 选择器输入框圆角
+$radius-select_option: 0; // 选择器待选项圆角
 
 // Font
 $font-select-fontWeight: $font-weight-regular; // 选择器文本字重

packages/semi-foundation/tagInput/tagInput.scss

@@ -4,7 +4,7 @@ $module: #{$prefix}-tagInput;
 
 .#{$module} {
     background-color: $color-tagInput_default-bg-default;
-    border: $border-thickness-control-focus $color-textarea-border-default solid;
+    border: $width-tagInput-border-default $color-tagInput-border-default solid;
     border-radius: $radius-tagInput;
     display: inline-flex;
     font-weight: $font-weight-regular;
@@ -13,11 +13,12 @@ $module: #{$prefix}-tagInput;
     
     &-hover {
         background-color: $color-tagInput_default-bg-hover;
+        border: $width-tagInput-border-hover $color-tagInput-border-hover solid;
     }
     
     &-focus {
         background-color: $color-tagInput_default-bg-focus;
-        border: $border-thickness-control-focus $color-tagInput_default-border-focus solid;
+        border: $width-tagInput-border-focus $color-tagInput-border-focus solid;
     }
 
     &-warning {

packages/semi-foundation/tagInput/variables.scss

@@ -3,13 +3,16 @@ $color-tagInput-maxTagCount-default: var(--semi-color-text-0); // 标签输入
 $color-tagInput-icon-hover: var(--semi-color-primary-hover); // 标签输入框图标颜色 - 悬浮
 $color-tagInput_disabled-text-default: var(--semi-color-disabled-text); // 标签输入框禁用文字颜色
 $color-tagInput_default-bg-focus: var(--semi-color-fill-0); // 标签输入框背景颜色 - 选中态
-$color-tagInput_default-border-focus: var(--semi-color-focus-border); // 标签输入框描边颜色 - 选中态
+
+$color-tagInput-border-default: transparent; // 标签输入框描边颜色 - 默认
+$color-tagInput-border-hover: transparent ; // 标签输入框描边颜色 - 悬浮
+$color-tagInput-border-focus: var(--semi-color-focus-border); // 标签输入框描边颜色 - 选中态
 $color-tagInput_prefix-default: var(--semi-color-text-2); // 标签输入框 prefix 颜色
 $color-tagInput_suffix-default: var(--semi-color-text-1); // 标签输入框 suffix 颜色
 
 $color-tagInput_default-bg-default: var(--semi-color-fill-0); // 标签输入框背景颜色 - 默认
 $color-tagInput_default-bg-hover: var(--semi-color-fill-1); // 标签输入框背景颜色 - 悬浮
-$color-textarea-border-default: transparent; // 标签输入框描边颜色 - 默认
+// $color-textarea-border-default: transparent; // 标签输入框描边颜色 - 默认，已废弃 deprecated-v2.4
 
 $color-tagInput_warning-bg-default: var(--semi-color-warning-light-default); // 警告标签输入框背景颜色 - 默认
 $color-tagInput_warning-border-default: var(--semi-color-warning-light-default); // 警告标签输入框描边颜色 - 默认
@@ -35,5 +38,8 @@ $height-tagInput-default: $height-control-default; // 默认尺寸标签输入
 $height-tagInput-small: $height-control-small; // 小尺寸标签输入框高度
 
 $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空按钮宽度
+$width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
+$width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框描边描边宽度 - 悬浮
+$width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
 
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角

packages/semi-foundation/treeSelect/treeSelect.scss

@@ -18,6 +18,7 @@ $module: #{$prefix}-tree-select;
 
     &:hover {
         background-color: $color-treeSelect_default-bg-hover;
+        border: $width-treeSelect_hover-border solid $color-treeSelect_default-border-hover;
     }
 
     &-focus {
@@ -329,4 +330,4 @@ $module: #{$prefix}-tree-select;
     }
 }
 
-@import './rtl.scss';
+@import './rtl.scss';

packages/semi-foundation/treeSelect/variables.scss

@@ -6,6 +6,7 @@ $color-treeSelect_default-icon-hover: var(--semi-color-primary-hover); // 树选
 $color-treeSelect_default-icon-active: var(--semi-color-primary-active); // 树选择器选择框清空按钮颜色 - 按下
 $color-treeSelect_default-bg-hover: var(--semi-color-fill-1); // 树选择器选择框背景颜色 - 悬停
 
+$color-treeSelect_default-border-hover: inherit; // 树选择器选择框描边颜色 - 悬浮
 $color-treeSelect_default-border-focus: var(--semi-color-focus-border);// 树选择器选择框描边颜色 - 选中
 
 $color-treeSelect_search-border-default: var(--semi-color-fill-0); // 树选择器菜单搜索框描边颜色 - 默认
@@ -46,7 +47,8 @@ $radius-treeSelect: var(--semi-border-radius-small); // 树选择器圆角
 $width-treeSelect-border: 1px; // 树选择器描边宽度
 $width-treeSelect_search_wrapper-border: 1px; // 树选择器搜索框描边宽度
 
-$width-treeSelect_focus-border: $border-thickness-control-focus; // 树选择器选择框描边宽度
+$width-treeSelect_hover-border: $border-thickness-control-focus; // 树选择器选择框描边宽度 - 悬浮
+$width-treeSelect_focus-border: $width-treeSelect_hover-border; // 树选择器选择框描边宽度 - 选中
 
 $width-treeSelect_default: 80px; // 树选择器最小宽度
 $height-treeSelect_default: $height-control-default; // 树选择器选择器高度 - 默认

packages/semi-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-icons",
-  "version": "2.4.0-beta.0",
+  "version": "2.4.1",
   "description": "semi icons",
   "keywords": [
     "semi",
@@ -38,7 +38,7 @@
     "@babel/plugin-transform-runtime": "^7.15.8",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-react": "^7.14.5",
-    "@douyinfe/semi-webpack-plugin": "2.4.0-beta.0",
+    "@douyinfe/semi-webpack-plugin": "2.4.1",
     "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.4.0-beta.0",
+  "version": "2.4.1",
   "description": "semi illustrations",
   "keywords": [
     "semi",

packages/semi-next/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-next",
-    "version": "2.4.0-beta.0",
+    "version": "2.4.1",
     "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.4.0-beta.0"
+        "@douyinfe/semi-webpack-plugin": "2.4.1"
     },
     "gitHead": "eb34a4f25f002bb4cbcfa51f3df93bed868c831a"
 }

packages/semi-scss-compile/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@douyinfe/semi-scss-compile",
-  "version": "2.4.0-beta.0",
+  "version": "2.4.1",
   "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.4.0-beta.0",
+    "version": "2.4.1",
     "description": "semi-theme-default",
     "keywords": [
         "semi-theme",

packages/semi-ui/datePicker/datePicker.tsx

@@ -525,6 +525,7 @@ export default class DatePicker extends BaseComponent<DatePickerProps, DatePicke
         };
 
         return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
             <div
                 onClick={this.handleTriggerWrapperClick}
                 className={inputCls}>

packages/semi-ui/form/_story/demo.jsx

@@ -179,6 +179,7 @@ class BasicDemoWithInit extends Component {
                 <BasicSelect onChange={this.changeLabelPos} value={labelPosition}>
                     <BasicSelect.Option value='top'>top</BasicSelect.Option>
                     <BasicSelect.Option value='left'>left</BasicSelect.Option>
+                    <BasicSelect.Option value='inset'>inset</BasicSelect.Option>
                 </BasicSelect>
                 <BasicSelect onChange={this.changeLabelAlign} value={labelAlign}>
                     <BasicSelect.Option value='left'>left</BasicSelect.Option>

packages/semi-ui/input/index.tsx

@@ -387,6 +387,7 @@ class Input extends BaseComponent<InputProps, InputState> {
             prefix,
             mode,
             insetLabel,
+            insetLabelId,
             validateStatus,
             type,
             readonly,

packages/semi-ui/input/textarea.tsx

@@ -313,7 +313,7 @@ class TextArea extends BaseComponent<TextAreaProps, TextAreaState> {
             }
         );
         const itemProps = {
-            ...omit(rest, 'insetLabel', 'getValueLength', 'onClear', 'showClear'),
+            ...omit(rest, 'insetLabel', 'insetLabelId', 'getValueLength', 'onClear', 'showClear'),
             className: itemCls,
             disabled,
             readOnly: readonly,

packages/semi-ui/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.4.0-beta.0",
+    "version": "2.4.1",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -14,11 +14,12 @@
     },
     "dependencies": {
         "@babel/runtime-corejs3": "^7.15.4",
-        "@douyinfe/semi-animation-react": "2.4.0-beta.0",
-        "@douyinfe/semi-foundation": "2.4.0-beta.0",
-        "@douyinfe/semi-icons": "2.4.0-beta.0",
-        "@douyinfe/semi-illustrations": "2.4.0-beta.0",
-        "@douyinfe/semi-theme-default": "2.4.0-beta.0",
+        "@douyinfe/semi-animation": "2.4.1",
+        "@douyinfe/semi-animation-react": "2.4.1",
+        "@douyinfe/semi-foundation": "2.4.1",
+        "@douyinfe/semi-icons": "2.4.1",
+        "@douyinfe/semi-illustrations": "2.4.1",
+        "@douyinfe/semi-theme-default": "2.4.1",
         "@types/react-window": "^1.8.2",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -74,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.4.0-beta.0",
+        "@douyinfe/semi-scss-compile": "2.4.1",
         "@storybook/addon-knobs": "^6.3.1",
         "@types/lodash": "^4.14.176",
         "babel-loader": "^8.2.2",

packages/semi-ui/select/option.tsx

@@ -57,8 +57,8 @@ class Option extends PureComponent<OptionProps> {
 
     onClick({ value, label, children, ...rest }: Partial<OptionProps>, event: React.MouseEvent) {
         const { props } = this;
-        const isDisbled = props.disabled;
-        if (!isDisbled) {
+        const isDisabled = props.disabled;
+        if (!isDisabled) {
             props.onSelect({ ...rest, value, label: label || children }, event);
         }
     }

packages/semi-ui/tabs/interface.ts

@@ -58,7 +58,7 @@ export interface TabBarProps {
 export interface TabPaneProps {
     className?: string;
     disabled?: boolean;
-    icon?: string;
+    icon?: ReactNode;
     itemKey?: string;
     style?: CSSProperties;
     tab?: ReactNode;

packages/semi-ui/timePicker/TimePicker.tsx

@@ -449,6 +449,7 @@ export default class TimePicker extends BaseComponent<TimePickerProps, TimePicke
             panelFooter,
             rangeSeparator,
             onOpenChange,
+            onChangeWithDateFirst,
             popupClassName: propPopupClassName,
             hideDisabledOptions,
             use12Hours,

packages/semi-webpack/package.json

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

src/styles/layout.scss

@@ -453,7 +453,7 @@ $spCol: var(--semi-color-primary);
     }
 }
 
-@media (max-width: 1500px) {
+@media (max-width: 1400px) {
 
     .pageAnchor {
         display: none;