@douyinfe/semi-foundation 2.62.1 → 2.63.0

package/lib/es/datePicker/datePicker.scss

@@ -319,6 +319,7 @@ $module-list: #{$prefix}-scrolllist;
         @include font-size-small;
         font-weight: $font-weight-bold;
         color: $color-datepicker_day-text-default;
+        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
 
         &-item {
             width: $width-datepicker_day;
@@ -327,8 +328,6 @@ $module-list: #{$prefix}-scrolllist;
             text-align: center;
             display: inline-block;
         }
-
-        border-bottom: $width-datepicker-border solid $color-datepicker_border-bg-default;
     }
 
     // 月面板-月周

package/lib/es/dropdown/dropdown.scss

@@ -33,11 +33,12 @@ $module: #{$prefix}-dropdown;
         padding-bottom: $spacing-dropdown_title-paddingBottom;
         padding-left: $spacing-dropdown_title-paddingLeft;
         padding-right: $spacing-dropdown_title-paddingRight;
+        @include font-size-small;
+        cursor: default;
+        
         &-withTick {
             padding-left: $spacing-dropdown_title_withTick-paddingLeft;
         }
-        @include font-size-small;
-        cursor: default;
     }
     &-item {
         padding: $spacing-dropdown_item-paddingY $spacing-dropdown_item-paddingX;

package/lib/es/form/form.scss

@@ -263,15 +263,16 @@ $rating: #{$prefix}-rating;
 
 .#{$form}-vertical {
     .#{$form}-field-group {
-        .#{$field} {
-            margin-top: 0;
-            margin-bottom: 0;
-        }
         margin-top: 0;
         margin-bottom: 0;
         padding-top: $spacing-form_field_group_vertical-paddingTop;
         padding-bottom: $spacing-form_field_group_vertical-paddingBottom;
         overflow: hidden;
+        
+        .#{$field} {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
     }
 }
 

package/lib/es/form/interface.d.ts

@@ -58,6 +58,8 @@ export interface BaseFormApi<T extends object = any> {
     getFieldExist: <K extends keyof T>(field: K) => boolean;
     /** get formState of form */
     getFormState: () => FormState<T extends object ? T : object>;
+    /** get formProps of form */
+    getFormProps: (keys?: Array<string>) => ComponentProps;
     /** submit form manual */
     submitForm: () => void;
     /** reset form manual */

package/lib/es/grid/grid.css

@@ -2,13 +2,13 @@
 /* sizing */
 /* spacing */
 .semi-row {
+  display: block;
+  box-sizing: border-box;
   position: relative;
   height: auto;
   margin-right: 0;
   margin-left: 0;
   zoom: 1;
-  display: block;
-  box-sizing: border-box;
 }
 .semi-row::before, .semi-row::after {
   display: table;

package/lib/es/grid/grid.scss

@@ -4,9 +4,9 @@
 $module: #{$prefix};
 
 .#{$module}-row {
-    @include make-row();
     display: block;
     box-sizing: border-box;
+    @include make-row();
 }
 
 .#{$module}-row-flex {

package/lib/es/input/input.scss

@@ -562,14 +562,13 @@ $module: #{$prefix}-input;
 
         background-color: $color-input_default-bg-default;
         color: $color-input_prefix-text-default;
+        @include font-size-regular;
+        flex-shrink: 0;
 
         &-icon,
         &-text {
             padding: $spacing-input_prepend-paddingY $spacing-input_prepend-paddingX;
         }
-
-        @include font-size-regular;
-        flex-shrink: 0;
     }
 
     &-append {
@@ -692,6 +691,8 @@ $module: #{$prefix}-input;
 
 .#{$module}-only_border{
     background: transparent;
+    border-color: $color_input-default-border-only_border-default;
+    
     &:hover{
         background: transparent;
         border-color: $color_input-default-border-only_border-hover;
@@ -699,7 +700,6 @@ $module: #{$prefix}-input;
     &:focus-within{
         background: transparent;
     }
-    border-color: $color_input-default-border-only_border-default;
 
 }
 

package/lib/es/input/textareaFoundation.js

@@ -178,6 +178,13 @@ export default class TextAreaFoundation extends BaseFoundation {
     this._adapter.notifyBlur(realValue, e);
   }
   handleKeyDown(e) {
+    const {
+      disabledEnterStartNewLine
+    } = this.getProps();
+    if (disabledEnterStartNewLine && e.key === 'Enter' && !e.shiftKey) {
+      // Prevent default line wrapping behavior
+      e.preventDefault();
+    }
     this._adapter.notifyKeyDown(e);
     if (e.keyCode === 13) {
       this._adapter.notifyPressEnter(e);

package/lib/es/navigation/navigation.css

@@ -401,11 +401,13 @@
   font-weight: 600;
   background-color: var(--semi-color-primary-light-default);
   color: var(--semi-color-text-0);
-  background-color: transparent;
 }
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected .semi-navigation-item-icon:first-child {
   color: var(--semi-color-primary);
 }
+.semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected {
+  background-color: transparent;
+}
 .semi-navigation-vertical .semi-navigation-list > .semi-navigation-sub-wrap > .semi-navigation-sub-title-selected.semi-navigation-sub-title-disabled {
   background-color: transparent;
   color: var(--semi-color-primary-disabled);

package/lib/es/navigation/navigation.scss

@@ -438,7 +438,9 @@ $module: #{$prefix}-navigation;
                 &-selected {
                     font-weight: $font-navigation_sub_selected-fontWeight;
                     @include item-selected;
-                    background-color: $color-navigation_itemL1-bg-default;
+                    & {
+                        background-color: $color-navigation_itemL1-bg-default;
+                    }
 
                     &.#{$module}-sub-title-disabled {
                         @include item-disabled-selected;

package/lib/es/popconfirm/popconfirm.scss

@@ -46,10 +46,11 @@ $module: #{$prefix}-popconfirm;
     }
 
     &-body {
+        color: $color-popconfirm_body-text;
+
         &-withIcon {
             margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
         }
-        color: $color-popconfirm_body-text;
 
         & > p {
             margin: $spacing-popconfirm_body_p-margin;

package/lib/es/radio/radio.scss

@@ -13,17 +13,16 @@ $inner-width: $width-icon-medium;
     column-gap: $spacing-radio_addon-paddingLeft;
     transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
     border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
-
-    &.#{$module}-vertical {
-        display: block;
-    }
-
     min-height: $height-radio_inner_min;
     min-width: $width-radio_inner;
     cursor: pointer;
     vertical-align: bottom;
     text-align: left;
 
+    &.#{$module}-vertical {
+        display: block;
+    }
+
     input[type="checkbox"],
     input[type="radio"] {
         position: absolute;
@@ -114,10 +113,11 @@ $inner-width: $width-icon-medium;
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
+            flex-shrink: 0;
+
             &-display {
                 background: $color-radio_card-bg-default;
             }
-            flex-shrink: 0;
         }
 
         .#{$module}-addon {

package/lib/es/select/select.scss

@@ -185,12 +185,11 @@ $overflowList: #{$prefix}-overflow-list;
         }
 
         .#{$prefix}-tag {
+            @include select-tag-margin;
 
             &:nth-of-type(1) {
                 margin-left: 0;
             }
-
-            @include select-tag-margin;
         }
 
         .#{$prefix}-tag-group {

package/lib/es/steps/bacisSteps.scss

@@ -5,6 +5,9 @@ $basicType: #{$module}-basic;
 .#{$basicType} {
 
     &.#{$module}-horizontal {
+        display: flex;
+        flex-flow: row nowrap;
+
         &.#{$module}-hasline {
             .#{$item}-title {
 
@@ -21,9 +24,6 @@ $basicType: #{$module}-basic;
             }
         }
 
-        display: flex;
-        flex-flow: row nowrap;
-
         .#{$item} {
             padding-left: $spacing-steps_basic_item-paddingLeft;
 

package/lib/es/switch/switch.scss

@@ -116,11 +116,6 @@ $module: #{$prefix}-switch;
     }
 
     &-native-control {
-
-        &[type="checkbox"] {
-            width: inherit;
-            height: inherit;
-        }
         width: 100%;
         height: 100%;
         opacity: 0;
@@ -130,6 +125,11 @@ $module: #{$prefix}-switch;
         position: absolute;
         top: 0;
         left: 0;
+
+        &[type="checkbox"] {
+            width: inherit;
+            height: inherit;
+        }
     }
 
     &-checked-text,

package/lib/es/table/table.scss

@@ -66,12 +66,12 @@ $module: #{$prefix}-table;
 
     &-header {
         overflow: hidden;
+        scrollbar-base-color: transparent;
 
         &::-webkit-scrollbar {
             background-color: transparent;
             border-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default;
         }
-        scrollbar-base-color: transparent;
 
         &-sticky {
             position: sticky;

package/lib/es/tabs/tabs.scss

@@ -326,13 +326,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
                 transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
                     color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
-                
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
+
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
 
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
@@ -694,13 +693,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
                 transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
                     color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
                 
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
 
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }

package/lib/es/tag/tag.scss

@@ -159,14 +159,13 @@ $types: "ghost", "solid", "light";
 
 .#{$module}-group {
     display: block;
+    height: auto;
 
     .#{$module} {
         margin-bottom: $spacing-tag_group-marginBottom;
         margin-right: $spacing-tag_group-marginRight;
     }
 
-    height: auto;
-
     &-max.#{$module}-group-small {
         height: ($height-tag_small + 2);
     }

package/lib/es/timePicker/utils/index.js

@@ -18,6 +18,7 @@ export const parseToDate = function (input) {
   } else if (typeof input === 'number') {
     return new Date(_toNumber(input));
   } else if (typeof input === 'string') {
+    if (input === '') return undefined;
     let curDate = new Date();
     // console.log(input, formatToken);
     curDate = parse(input, formatToken, curDate, {

package/lib/es/tree/tree.scss

@@ -211,11 +211,12 @@ $module: #{$prefix}-tree;
 
         &-drag-over.#{$module}-option-draggable,
         &-drag-over.#{$module}-option-fullLabel-draggable {
+            border: $width-tree_option_draggable-border solid $color-tree_option_draggable_insert-border-default;
+
             .#{$module}-option-label {
                 border-top: 0;
                 border-bottom: 0;
             }
-            border: $width-tree_option_draggable-border solid $color-tree_option_draggable_insert-border-default;
 
             // selected solid background will overlap with drag over border-bottom
             // add an extra border to complement
@@ -397,11 +398,12 @@ $module: #{$prefix}-tree;
         &-spin-icon {
             display: flex;
             line-height: 0; // make the spin icon in the center
+            color: $color-tree_option_loading-icon-default;
+
             & svg {
                 width: $width-tree_spinIcon;
                 height: $width-tree_spinIcon;
             }
-            color: $color-tree_option_loading-icon-default;
         }
 
         &-selected {

package/lib/es/upload/foundation.d.ts

@@ -40,6 +40,7 @@ export interface AfterUploadResult {
     status?: string;
     validateMessage?: unknown;
     name?: string;
+    url?: string;
 }
 export interface UploadAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyFileSelect: (files: Array<CustomFile>) => void;

package/lib/es/upload/foundation.js

@@ -688,7 +688,8 @@ class UploadFoundation extends BaseFoundation {
         autoRemove,
         status,
         validateMessage,
-        name
+        name,
+        url
       } = this._adapter.notifyAfterUpload({
         response: body,
         file: newFileList[index],
@@ -697,6 +698,7 @@ class UploadFoundation extends BaseFoundation {
       status ? newFileList[index].status = status : null;
       validateMessage ? newFileList[index].validateMessage = validateMessage : null;
       name ? newFileList[index].name = name : null;
+      url ? newFileList[index].url = url : null;
       autoRemove ? newFileList.splice(index, 1) : null;
     }
     this._adapter.notifySuccess(body, fileInstance, newFileList);

package/lib/es/upload/upload.css

@@ -206,7 +206,7 @@
   width: 24px;
   flex-shrink: 0;
 }
-.semi-upload-file-card-icon-loading, .semi-upload-file-card-icon-error {
+.semi-upload-file-card-icon-loading, .semi-upload-file-card-icon-error.semi-icon {
   font-size: 11px;
   margin-right: 2px;
 }

package/lib/es/upload/upload.scss

@@ -109,6 +109,7 @@ $module: #{$prefix}-upload;
         &-title {
             @include font-size-small;
             color: $color-upload_assist-text;
+            margin-bottom: $spacing-upload_title-marginBottom;
 
             &-choosen {
                 margin-right: $spacing-upload_title_choosen-marginRight;
@@ -118,8 +119,6 @@ $module: #{$prefix}-upload;
                 cursor: pointer;
                 color: $color-upload_clear-text;
             }
-
-            margin-bottom: $spacing-upload_title-marginBottom;
         }
     }
 
@@ -247,7 +246,7 @@ $module: #{$prefix}-upload;
 
         &-icon {
             &-loading,
-            &-error {
+            &-error.#{$prefix}-icon {
                 font-size: $width-upload_file_card-icon;
                 margin-right: $spacing-upload_file_card_icon-marginRight;
             }

package/navigation/navigation.scss

@@ -438,7 +438,9 @@ $module: #{$prefix}-navigation;
                 &-selected {
                     font-weight: $font-navigation_sub_selected-fontWeight;
                     @include item-selected;
-                    background-color: $color-navigation_itemL1-bg-default;
+                    & {
+                        background-color: $color-navigation_itemL1-bg-default;
+                    }
 
                     &.#{$module}-sub-title-disabled {
                         @include item-disabled-selected;

package/package.json

@@ -1,13 +1,13 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.62.1",
+    "version": "2.63.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
         "prepublishOnly": "npm run build:lib"
     },
     "dependencies": {
-        "@douyinfe/semi-animation": "2.62.1",
+        "@douyinfe/semi-animation": "2.63.0",
         "@mdx-js/mdx": "^3.0.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
@@ -28,7 +28,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "99b473508df61ea87098d68db7d0d8a07c8c42b8",
+    "gitHead": "1016b6bee4b1837a3971d3c446132b1f49adff08",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/popconfirm/popconfirm.scss

@@ -46,10 +46,11 @@ $module: #{$prefix}-popconfirm;
     }
 
     &-body {
+        color: $color-popconfirm_body-text;
+
         &-withIcon {
             margin-left: $width-popconfirm-icon + $spacing-popconfirm_header_icon-marginRight;
         }
-        color: $color-popconfirm_body-text;
 
         & > p {
             margin: $spacing-popconfirm_body_p-margin;

package/radio/radio.scss

@@ -13,17 +13,16 @@ $inner-width: $width-icon-medium;
     column-gap: $spacing-radio_addon-paddingLeft;
     transition: background-color $transition_duration-radio-bg $transition_function-radio-bg $transition_delay-radio-bg,
     border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
-
-    &.#{$module}-vertical {
-        display: block;
-    }
-
     min-height: $height-radio_inner_min;
     min-width: $width-radio_inner;
     cursor: pointer;
     vertical-align: bottom;
     text-align: left;
 
+    &.#{$module}-vertical {
+        display: block;
+    }
+
     input[type="checkbox"],
     input[type="radio"] {
         position: absolute;
@@ -114,10 +113,11 @@ $inner-width: $width-icon-medium;
         border $transition_duration-radio-border $transition_function-radio-border $transition_delay-radio-border;
 
         .#{$module}-inner {
+            flex-shrink: 0;
+
             &-display {
                 background: $color-radio_card-bg-default;
             }
-            flex-shrink: 0;
         }
 
         .#{$module}-addon {

package/select/select.scss

@@ -185,12 +185,11 @@ $overflowList: #{$prefix}-overflow-list;
         }
 
         .#{$prefix}-tag {
+            @include select-tag-margin;
 
             &:nth-of-type(1) {
                 margin-left: 0;
             }
-
-            @include select-tag-margin;
         }
 
         .#{$prefix}-tag-group {

package/steps/bacisSteps.scss

@@ -5,6 +5,9 @@ $basicType: #{$module}-basic;
 .#{$basicType} {
 
     &.#{$module}-horizontal {
+        display: flex;
+        flex-flow: row nowrap;
+
         &.#{$module}-hasline {
             .#{$item}-title {
 
@@ -21,9 +24,6 @@ $basicType: #{$module}-basic;
             }
         }
 
-        display: flex;
-        flex-flow: row nowrap;
-
         .#{$item} {
             padding-left: $spacing-steps_basic_item-paddingLeft;
 

package/switch/switch.scss

@@ -116,11 +116,6 @@ $module: #{$prefix}-switch;
     }
 
     &-native-control {
-
-        &[type="checkbox"] {
-            width: inherit;
-            height: inherit;
-        }
         width: 100%;
         height: 100%;
         opacity: 0;
@@ -130,6 +125,11 @@ $module: #{$prefix}-switch;
         position: absolute;
         top: 0;
         left: 0;
+
+        &[type="checkbox"] {
+            width: inherit;
+            height: inherit;
+        }
     }
 
     &-checked-text,

package/table/table.scss

@@ -66,12 +66,12 @@ $module: #{$prefix}-table;
 
     &-header {
         overflow: hidden;
+        scrollbar-base-color: transparent;
 
         &::-webkit-scrollbar {
             background-color: transparent;
             border-bottom: $width-table_header_border $border-table_base-borderStyle $color-table_th-border-default;
         }
-        scrollbar-base-color: transparent;
 
         &-sticky {
             position: sticky;

package/tabs/tabs.scss

@@ -326,13 +326,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
                 transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
                     color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
-                
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
+
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
 
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }
@@ -694,13 +693,12 @@ $ignoreIcon: '.#{$prefix}-icon-checkbox_tick, .#{$prefix}-icon-radio, .#{$prefix
                 padding: $spacing-tabs_bar_line_tab-paddingTop $spacing-tabs_bar_line_tab-paddingRight $spacing-tabs_bar_line_tab-paddingBottom $spacing-tabs_bar_line_tab-paddingLeft;
                 transition: border-bottom-color $transition_duration-tabs_tab_line-border $transition_function-tabs_tab_line-border $transition_delay-tabs_tab_line-border,
                     color $transition_duration-tabs_tab_line-text $transition_function-tabs_tab_line-text $transition_delay-tabs_tab_line-text; //线条式tabs的border-color 的 transition
+                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
                 
                 &:nth-of-type(1) {
                     padding-left: 0;
                 }
 
-                border-bottom: $width-tabs_bar_line_tab-border solid transparent;
-
                 &:hover {
                     border-bottom: $width-tabs_bar_line_tab-border solid $color-tabs_tab_line_default-border-hover;
                 }

package/tag/tag.scss

@@ -159,14 +159,13 @@ $types: "ghost", "solid", "light";
 
 .#{$module}-group {
     display: block;
+    height: auto;
 
     .#{$module} {
         margin-bottom: $spacing-tag_group-marginBottom;
         margin-right: $spacing-tag_group-marginRight;
     }
 
-    height: auto;
-
     &-max.#{$module}-group-small {
         height: ($height-tag_small + 2);
     }

package/timePicker/utils/index.ts

@@ -17,6 +17,8 @@ export const parseToDate = (input: string | Date | number, formatToken = strings
     } else if (typeof input === 'number') {
         return new Date(toNumber(input));
     } else if (typeof input === 'string') {
+        if (input === '') return undefined;
+
         let curDate = new Date();
 
         // console.log(input, formatToken);