@douyinfe/semi-foundation 2.20.3 → 2.20.5-alpha.0

package/avatar/avatar.scss

@@ -43,6 +43,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-extra-small {
         width: $width-avatar_extra_extra_small;
         height: $width-avatar_extra_extra_small;
+        border-radius: $radius-avatar_extra_extra_small;
 
         .#{$module}-content {
             transform-origin: center;
@@ -58,6 +59,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-small {
         width: $width-avatar_extra_small;
         height: $width-avatar_extra_small;
+        border-radius: $radius-avatar_extra_small;
 
         .#{$module}-content {
             transform-origin: center;
@@ -73,6 +75,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-small {
         width: $width-avatar_small;
         height: $width-avatar_small;
+        border-radius: $radius-avatar_small;
 
         .#{$module}-label {
             @include font-size-small;
@@ -82,6 +85,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-default {
         width: $width-avatar_default;
         height: $width-avatar_default;
+        border-radius: $radius-avatar_default;
 
         .#{$module}-label {
             @include font-size-header-5;
@@ -91,6 +95,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-medium {
         width: $width-avatar_medium;
         height: $width-avatar_medium;
+        border-radius: $radius-avatar_medium;
 
         .#{$module}-label {
             @include font-size-header-4;
@@ -100,6 +105,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-large {
         width: $width-avatar_large;
         height: $width-avatar_large;
+        border-radius: $radius-avatar_large;
 
         .#{$module}-label {
             @include font-size-header-1;
@@ -109,6 +115,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-large {
         width: $width-avatar_extra_large;
         height: $width-avatar_extra_large;
+        border-radius: $radius-avatar_extra_large;
 
         .#{$module}-label {
             font-size: $font-avatar_extra_large-size;

package/avatar/variables.scss

@@ -45,4 +45,13 @@ $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 $width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
 
-$width-avatar-outline: 2px; //头像聚焦轮廓宽度
+$width-avatar-outline: 2px; //头像聚焦轮廓宽度
+
+// radius
+$radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
+$radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
+$radius-avatar_small: 3px; // 小尺寸头像的圆角
+$radius-avatar_default: 3px; // 默认尺寸头像的圆角
+$radius-avatar_medium: 3px; // 中尺寸头像的圆角
+$radius-avatar_large: 6px; // 大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角

package/carousel/foundation.ts

@@ -47,6 +47,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     }
 
     next(): void {
+        this.stop();
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(stateActiveIndex + 1);
         this._adapter.setIsReverse(false);
@@ -56,9 +57,11 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
             this._notifyChange(targetIndex);
             this.handleNewActiveIndex(targetIndex);
         }
+        this.handleAutoPlay();
     }
 
     prev(): void {
+        this.stop();
         const { activeIndex: stateActiveIndex } = this.getStates();
         const targetIndex = this.getValidIndex(stateActiveIndex - 1);
         this._adapter.setIsReverse(true);
@@ -68,6 +71,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
             this._notifyChange(targetIndex);
             this.handleNewActiveIndex(targetIndex);
         }
+        this.handleAutoPlay();
     }
 
     destroy(): void {

package/datePicker/inputFoundation.ts

@@ -190,7 +190,7 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
         const { valuePath, insetInputValue, format } = options;
         const { type, defaultPickerValue, dateFnsLocale } = this._adapter.getProps();
         const insetInputValueWithTime = cloneDeep(insetInputValue);
-        const { nowDate, nextDate } = getDefaultPickerDate({ defaultPickerValue, format, dateFnsLocale  });
+        const { nowDate, nextDate } = getDefaultPickerDate({ defaultPickerValue, format, dateFnsLocale });
 
         if (type.includes('Time')) {
             let timeStr = '';

package/lib/cjs/avatar/avatar.css

@@ -34,6 +34,7 @@
 .semi-avatar-extra-extra-small {
   width: 20px;
   height: 20px;
+  border-radius: 3px;
 }
 .semi-avatar-extra-extra-small .semi-avatar-content {
   transform-origin: center;
@@ -46,6 +47,7 @@
 .semi-avatar-extra-small {
   width: 24px;
   height: 24px;
+  border-radius: 3px;
 }
 .semi-avatar-extra-small .semi-avatar-content {
   transform-origin: center;
@@ -58,6 +60,7 @@
 .semi-avatar-small {
   width: 32px;
   height: 32px;
+  border-radius: 3px;
 }
 .semi-avatar-small .semi-avatar-label {
   font-size: 12px;
@@ -67,6 +70,7 @@
 .semi-avatar-default {
   width: 40px;
   height: 40px;
+  border-radius: 3px;
 }
 .semi-avatar-default .semi-avatar-label {
   font-size: 18px;
@@ -76,6 +80,7 @@
 .semi-avatar-medium {
   width: 48px;
   height: 48px;
+  border-radius: 3px;
 }
 .semi-avatar-medium .semi-avatar-label {
   font-size: 20px;
@@ -85,6 +90,7 @@
 .semi-avatar-large {
   width: 72px;
   height: 72px;
+  border-radius: 6px;
 }
 .semi-avatar-large .semi-avatar-label {
   font-size: 32px;
@@ -94,6 +100,7 @@
 .semi-avatar-extra-large {
   width: 128px;
   height: 128px;
+  border-radius: 12px;
 }
 .semi-avatar-extra-large .semi-avatar-label {
   font-size: 64px;

package/lib/cjs/avatar/avatar.scss

@@ -43,6 +43,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-extra-small {
         width: $width-avatar_extra_extra_small;
         height: $width-avatar_extra_extra_small;
+        border-radius: $radius-avatar_extra_extra_small;
 
         .#{$module}-content {
             transform-origin: center;
@@ -58,6 +59,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-small {
         width: $width-avatar_extra_small;
         height: $width-avatar_extra_small;
+        border-radius: $radius-avatar_extra_small;
 
         .#{$module}-content {
             transform-origin: center;
@@ -73,6 +75,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-small {
         width: $width-avatar_small;
         height: $width-avatar_small;
+        border-radius: $radius-avatar_small;
 
         .#{$module}-label {
             @include font-size-small;
@@ -82,6 +85,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-default {
         width: $width-avatar_default;
         height: $width-avatar_default;
+        border-radius: $radius-avatar_default;
 
         .#{$module}-label {
             @include font-size-header-5;
@@ -91,6 +95,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-medium {
         width: $width-avatar_medium;
         height: $width-avatar_medium;
+        border-radius: $radius-avatar_medium;
 
         .#{$module}-label {
             @include font-size-header-4;
@@ -100,6 +105,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-large {
         width: $width-avatar_large;
         height: $width-avatar_large;
+        border-radius: $radius-avatar_large;
 
         .#{$module}-label {
             @include font-size-header-1;
@@ -109,6 +115,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-large {
         width: $width-avatar_extra_large;
         height: $width-avatar_extra_large;
+        border-radius: $radius-avatar_extra_large;
 
         .#{$module}-label {
             font-size: $font-avatar_extra_large-size;

package/lib/cjs/avatar/variables.scss

@@ -45,4 +45,13 @@ $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 $width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
 
-$width-avatar-outline: 2px; //头像聚焦轮廓宽度
+$width-avatar-outline: 2px; //头像聚焦轮廓宽度
+
+// radius
+$radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
+$radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
+$radius-avatar_small: 3px; // 小尺寸头像的圆角
+$radius-avatar_default: 3px; // 默认尺寸头像的圆角
+$radius-avatar_medium: 3px; // 中尺寸头像的圆角
+$radius-avatar_large: 6px; // 大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角

package/lib/cjs/carousel/foundation.js

@@ -55,6 +55,7 @@ class CarouselFoundation extends _foundation.default {
   }
 
   next() {
+    this.stop();
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
@@ -69,9 +70,12 @@ class CarouselFoundation extends _foundation.default {
 
       this.handleNewActiveIndex(targetIndex);
     }
+
+    this.handleAutoPlay();
   }
 
   prev() {
+    this.stop();
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
@@ -86,6 +90,8 @@ class CarouselFoundation extends _foundation.default {
 
       this.handleNewActiveIndex(targetIndex);
     }
+
+    this.handleAutoPlay();
   }
 
   destroy() {

package/lib/cjs/select/foundation.js

@@ -669,24 +669,30 @@ class SelectFoundation extends _foundation.default {
   }
 
   clearInput() {
-    this._adapter.updateInputValue('');
+    const {
+      inputValue
+    } = this.getStates(); // only when input is not null, select should notifySearch and updateOptions
 
-    this._adapter.notifySearch(''); // reset options filter
+    if (inputValue !== '') {
+      this._adapter.updateInputValue('');
 
+      this._adapter.notifySearch(''); // reset options filter
 
-    const {
-      options
-    } = this.getStates();
-    const {
-      remote
-    } = this.getProps();
-    let optionsAfterFilter = options;
 
-    if (!remote) {
-      optionsAfterFilter = this._filterOption(options, '');
-    }
+      const {
+        options
+      } = this.getStates();
+      const {
+        remote
+      } = this.getProps();
+      let optionsAfterFilter = options;
 
-    this._adapter.updateOptions(optionsAfterFilter);
+      if (!remote) {
+        optionsAfterFilter = this._filterOption(options, '');
+      }
+
+      this._adapter.updateOptions(optionsAfterFilter);
+    }
   }
 
   focusInput() {

package/lib/es/avatar/avatar.css

@@ -34,6 +34,7 @@
 .semi-avatar-extra-extra-small {
   width: 20px;
   height: 20px;
+  border-radius: 3px;
 }
 .semi-avatar-extra-extra-small .semi-avatar-content {
   transform-origin: center;
@@ -46,6 +47,7 @@
 .semi-avatar-extra-small {
   width: 24px;
   height: 24px;
+  border-radius: 3px;
 }
 .semi-avatar-extra-small .semi-avatar-content {
   transform-origin: center;
@@ -58,6 +60,7 @@
 .semi-avatar-small {
   width: 32px;
   height: 32px;
+  border-radius: 3px;
 }
 .semi-avatar-small .semi-avatar-label {
   font-size: 12px;
@@ -67,6 +70,7 @@
 .semi-avatar-default {
   width: 40px;
   height: 40px;
+  border-radius: 3px;
 }
 .semi-avatar-default .semi-avatar-label {
   font-size: 18px;
@@ -76,6 +80,7 @@
 .semi-avatar-medium {
   width: 48px;
   height: 48px;
+  border-radius: 3px;
 }
 .semi-avatar-medium .semi-avatar-label {
   font-size: 20px;
@@ -85,6 +90,7 @@
 .semi-avatar-large {
   width: 72px;
   height: 72px;
+  border-radius: 6px;
 }
 .semi-avatar-large .semi-avatar-label {
   font-size: 32px;
@@ -94,6 +100,7 @@
 .semi-avatar-extra-large {
   width: 128px;
   height: 128px;
+  border-radius: 12px;
 }
 .semi-avatar-extra-large .semi-avatar-label {
   font-size: 64px;

package/lib/es/avatar/avatar.scss

@@ -43,6 +43,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-extra-small {
         width: $width-avatar_extra_extra_small;
         height: $width-avatar_extra_extra_small;
+        border-radius: $radius-avatar_extra_extra_small;
 
         .#{$module}-content {
             transform-origin: center;
@@ -58,6 +59,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-small {
         width: $width-avatar_extra_small;
         height: $width-avatar_extra_small;
+        border-radius: $radius-avatar_extra_small;
 
         .#{$module}-content {
             transform-origin: center;
@@ -73,6 +75,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-small {
         width: $width-avatar_small;
         height: $width-avatar_small;
+        border-radius: $radius-avatar_small;
 
         .#{$module}-label {
             @include font-size-small;
@@ -82,6 +85,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-default {
         width: $width-avatar_default;
         height: $width-avatar_default;
+        border-radius: $radius-avatar_default;
 
         .#{$module}-label {
             @include font-size-header-5;
@@ -91,6 +95,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-medium {
         width: $width-avatar_medium;
         height: $width-avatar_medium;
+        border-radius: $radius-avatar_medium;
 
         .#{$module}-label {
             @include font-size-header-4;
@@ -100,6 +105,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-large {
         width: $width-avatar_large;
         height: $width-avatar_large;
+        border-radius: $radius-avatar_large;
 
         .#{$module}-label {
             @include font-size-header-1;
@@ -109,6 +115,7 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
     &-extra-large {
         width: $width-avatar_extra_large;
         height: $width-avatar_extra_large;
+        border-radius: $radius-avatar_extra_large;
 
         .#{$module}-label {
             font-size: $font-avatar_extra_large-size;

package/lib/es/avatar/variables.scss

@@ -45,4 +45,13 @@ $spacing-avatar_extra_small-marginLeft: -10px; // 头像左侧外边距 - 超小
 $width-avatar_extra_extra_small-border: 1px; // 头像描边尺寸 - 极小
 $spacing-avatar_extra_extra_small-marginLeft: -4px; // 头像左侧外边距 - 极小
 
-$width-avatar-outline: 2px; //头像聚焦轮廓宽度
+$width-avatar-outline: 2px; //头像聚焦轮廓宽度
+
+// radius
+$radius-avatar_extra_extra_small: 3px; // 极小尺寸头像的圆角
+$radius-avatar_extra_small: 3px; // 超小尺寸头像的圆角
+$radius-avatar_small: 3px; // 小尺寸头像的圆角
+$radius-avatar_default: 3px; // 默认尺寸头像的圆角
+$radius-avatar_medium: 3px; // 中尺寸头像的圆角
+$radius-avatar_large: 6px; // 大尺寸头像的圆角
+$radius-avatar_extra_large: 12px; // 超大尺寸头像的圆角

package/lib/es/carousel/foundation.js

@@ -43,6 +43,7 @@ class CarouselFoundation extends BaseFoundation {
   }
 
   next() {
+    this.stop();
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
@@ -57,9 +58,12 @@ class CarouselFoundation extends BaseFoundation {
 
       this.handleNewActiveIndex(targetIndex);
     }
+
+    this.handleAutoPlay();
   }
 
   prev() {
+    this.stop();
     const {
       activeIndex: stateActiveIndex
     } = this.getStates();
@@ -74,6 +78,8 @@ class CarouselFoundation extends BaseFoundation {
 
       this.handleNewActiveIndex(targetIndex);
     }
+
+    this.handleAutoPlay();
   }
 
   destroy() {

package/lib/es/select/foundation.js

@@ -647,24 +647,30 @@ export default class SelectFoundation extends BaseFoundation {
   }
 
   clearInput() {
-    this._adapter.updateInputValue('');
+    const {
+      inputValue
+    } = this.getStates(); // only when input is not null, select should notifySearch and updateOptions
 
-    this._adapter.notifySearch(''); // reset options filter
+    if (inputValue !== '') {
+      this._adapter.updateInputValue('');
 
+      this._adapter.notifySearch(''); // reset options filter
 
-    const {
-      options
-    } = this.getStates();
-    const {
-      remote
-    } = this.getProps();
-    let optionsAfterFilter = options;
 
-    if (!remote) {
-      optionsAfterFilter = this._filterOption(options, '');
-    }
+      const {
+        options
+      } = this.getStates();
+      const {
+        remote
+      } = this.getProps();
+      let optionsAfterFilter = options;
 
-    this._adapter.updateOptions(optionsAfterFilter);
+      if (!remote) {
+        optionsAfterFilter = this._filterOption(options, '');
+      }
+
+      this._adapter.updateOptions(optionsAfterFilter);
+    }
   }
 
   focusInput() {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.20.3",
+    "version": "2.20.5-alpha.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "f3c92641b8e004623a6e644af93eb0718290956d",
+    "gitHead": "c6aaa7f57e7fc8482c831b2ef5b98951a6a2adf6",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/rating/foundation.ts

@@ -126,7 +126,7 @@ export default class RatingFoundation<P = Record<string, any>, S = Record<string
         let tempValue: number;
         let newValue: number;
         if (key === 'ArrowRight' || key === 'ArrowUp') {
-            tempValue = value + (reverse ?  - step : step);
+            tempValue = value + (reverse ? - step : step);
         } else if (key === 'ArrowLeft' || key === 'ArrowDown') {
             tempValue = value + (reverse ? step : - step);
         }

package/select/foundation.ts

@@ -523,16 +523,20 @@ export default class SelectFoundation extends BaseFoundation<SelectAdapter> {
     }
 
     clearInput() {
-        this._adapter.updateInputValue('');
-        this._adapter.notifySearch('');
-        // reset options filter
-        const { options } = this.getStates();
-        const { remote } = this.getProps();
-        let optionsAfterFilter = options;
-        if (!remote) {
-            optionsAfterFilter = this._filterOption(options, '');
+        const { inputValue } = this.getStates();
+        // only when input is not null, select should notifySearch and updateOptions
+        if (inputValue !== ''){
+            this._adapter.updateInputValue('');
+            this._adapter.notifySearch('');
+            // reset options filter
+            const { options } = this.getStates();
+            const { remote } = this.getProps();
+            let optionsAfterFilter = options;
+            if (!remote) {
+                optionsAfterFilter = this._filterOption(options, '');
+            }
+            this._adapter.updateOptions(optionsAfterFilter);
         }
-        this._adapter.updateOptions(optionsAfterFilter);
     }
 
     focusInput() {

package/tabs/foundation.ts

@@ -116,12 +116,12 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
         const isVertical = tabPosition === 'left';
 
         if (isVertical) {
-            if (event.key ===  "ArrowUp" || event.key ===  "ArrowDown") {
+            if (event.key === "ArrowUp" || event.key === "ArrowDown") {
                 this.switchTabOnArrowPress(event, tabs);
                 this.handlePrevent(event);
             }
         } else {
-            if (event.key ===  "ArrowLeft" || event.key === "ArrowRight") {
+            if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
                 this.switchTabOnArrowPress(event, tabs);
                 this.handlePrevent(event);
             }
@@ -158,7 +158,7 @@ class TabsFoundation<P = Record<string, any>, S = Record<string, any>> extends B
                     tabs[index+ direction[event.key]].focus({ preventScroll });
                 } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
                     tabs[tabs.length - 1].focus({ preventScroll }); // focus last tab
-                } else if (event.key ===  "ArrowRight" || event.key == "ArrowDown") {
+                } else if (event.key === "ArrowRight" || event.key == "ArrowDown") {
                     tabs[0].focus({ preventScroll }); // focus first tab
                 }
             }

package/utils/getMotionObjFromProps.ts

@@ -27,7 +27,7 @@ export interface MergeMotionProps {
  * @param { props: Object } 
  * @returns { motion: Object }
  */
-export default function getMotionObjFromProps(props: MergeMotionProps)  {
+export default function getMotionObjFromProps(props: MergeMotionProps) {
     if (typeof props !== 'object' || props === null) {
         throw new TypeError(`props should be object type, got ${typeof props}`);
     }