@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/calendar/foundation.ts

@@ -33,9 +33,9 @@ import {
     DateObj,
     checkWeekend,
 } from './eventUtil';
-import type { weeekStartsOnEnum } from './eventUtil';
+import type { weekStartsOnEnum } from './eventUtil';
 
-export { weeekStartsOnEnum };
+export { weekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;
     key: string;
@@ -114,7 +114,6 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         super({ ...adapter });
     }
 
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
     init() {
 
     }
@@ -191,7 +190,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const data = {} as WeeklyData;
         const { weekStartsOn } = this.getProps();
         data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
-        data.week = calcWeekData(value, 'week', dateFnsLocale, weekStartsOn);
+        data.week = calcWeekData(value, null, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setWeeklyData(data);
         return data;
     }
@@ -201,7 +200,8 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const { range, weekStartsOn } = this.getProps();
         const len = differenceInCalendarDays(range[1], range[0]);
         data.month = format(value, 'LLL', { locale: dateFnsLocale, weekStartsOn });
-        data.week = calcRangeData(value, range[0], len, 'week', dateFnsLocale, weekStartsOn);
+        const startDate = startOfDay(range[0]);
+        data.week = calcRangeData(value, startDate, len, 'week', dateFnsLocale, weekStartsOn);
         this._adapter.setRangeData(data);
         return data;
     }
@@ -212,7 +212,7 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
         const { weekStartsOn } = this.getProps();
         const numberOfWeek = getWeeksInMonth(value, { weekStartsOn });
         [...Array(numberOfWeek).keys()].map(ind => {
-            data[ind] = calcWeekData(addDays(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
+            data[ind] = calcWeekData(addDays(monthStart, ind * 7), monthStart, 'month', dateFnsLocale, weekStartsOn);
         });
         this._adapter.setMonthlyData(data);
         return data;
@@ -320,13 +320,13 @@ export default class CalendarFoundation<P = Record<string, any>, S = Record<stri
 
     convertMapToArray(weekMap: Map<string, EventObject[]>, weekStart: Date) {
         const eventArray = [];
+        const map = new Map();
         for (const entry of weekMap.entries()) {
             const [key, value] = entry;
-            const map = new Map();
             map.set(key, value);
-            const weekEvents = this._parseWeeklyEvents(map, weekStart);
-            eventArray.push(...weekEvents);
         }
+        const weekEvents = this._parseWeeklyEvents(map, weekStart);
+        eventArray.push(...weekEvents);
         return eventArray;
     }
 

package/carousel/carousel.scss

@@ -44,21 +44,25 @@ $module: #{$prefix}-carousel;
             .#{$module}-content-item-slide-out {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-out;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 display: block;
                 animation: #{$module}-content-item-keyframe-slide-in;
+                animation-fill-mode: forwards;
             }
         }
 
         &-reverse {
             .#{$module}-content-item-slide-out {
                 animation: #{$module}-content-item-keyframe-slide-out-reverse;
+                animation-fill-mode: forwards;
             }
 
             .#{$module}-content-item-slide-in {
                 animation: #{$module}-content-item-keyframe-slide-in-reverse;
+                animation-fill-mode: forwards;
             }
         }
     }

package/carousel/foundation.ts

@@ -1,7 +1,6 @@
 import { isObject, get } from 'lodash';
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { numbers } from './constants';
-import { throttle } from 'lodash';
 
 export interface CarouselAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyChange: (activeIndex: number, preIndex: number) => void;
@@ -18,6 +17,11 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     }
 
     _interval = null;
+    _forcePlay = false;
+
+    setForcePlay(forcePlay: boolean) {
+        this._forcePlay = forcePlay;
+    }
 
     play(interval: number): void {
         if (this._interval) {
@@ -29,7 +33,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     }
 
     stop(): void {
-        if (this._interval){
+        if (this._interval) {
             clearInterval(this._interval);
         }
     }
@@ -88,7 +92,7 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
 
     _notifyChange(activeIndex: number): void {
         const { activeIndex: stateActiveIndex, isInit } = this.getStates();
-        if (isInit){
+        if (isInit) {
             this._adapter.setIsInit(false);
         }
         if (stateActiveIndex !== activeIndex) {
@@ -105,10 +109,10 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     getSwitchingTime(): number {
         const { autoPlay, speed } = this.getProps(); 
         const autoPlayType = typeof autoPlay;
-        if (autoPlayType === 'boolean' && autoPlay){
+        if (autoPlayType === 'boolean') { 
             return numbers.DEFAULT_INTERVAL + speed;
         }
-        if (isObject(autoPlay)){
+        if (isObject(autoPlay)) {
             return get(autoPlay, 'interval', numbers.DEFAULT_INTERVAL) + speed;
         }
         return speed;
@@ -121,12 +125,13 @@ class CarouselFoundation<P = Record<string, any>, S = Record<string, any>> exten
     handleAutoPlay(): void { 
         const { autoPlay } = this.getProps(); 
         const autoPlayType = typeof autoPlay;
-        if ((autoPlayType === 'boolean' && autoPlay) || isObject(autoPlay)){
+        // when user manually call the play function, force play
+        if ((autoPlayType === 'boolean' && autoPlay) || isObject(autoPlay) || this._forcePlay) {
             this.play(this.getSwitchingTime());
         }
     }
 
-    handleKeyDown(event: any): void{
+    handleKeyDown(event: any): void {
         if (event.key === 'ArrowLeft') {
             this.prev();
         }

package/cascader/cascader.scss

@@ -25,6 +25,17 @@ $module: #{$prefix}-cascader;
         border: $width-cascader_hover-border $color-cascader_default-border-hover solid;
     }
 
+    &:focus:not(&-disabled) {
+        border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
+        background-color: $color-cascader_default-bg-default;
+        outline: 0;
+    }
+
+
+    &:active {
+        background-color: $color-cascader_default-bg-active;
+    }
+
     &-small {
         min-height: $height-cascader_small;
         line-height: $height-cascader_small;
@@ -41,11 +52,13 @@ $module: #{$prefix}-cascader;
     &-focus {
         border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         outline: 0;
-        &:hover,
-        &:active {
+        &:hover{
             background-color: $color-cascader_default-bg-default;
             border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
         }
+        &:active {
+            background-color: $color-cascader_default-bg-active;
+        }
     }
 
     &-warning {
@@ -124,6 +137,7 @@ $module: #{$prefix}-cascader;
 
             &-disabled.#{$prefix}-tag {
                 color: $color-cascader_input_disabled-text-default;
+                background-color: $color-cascader_tag_disabled-bg-default;
                 cursor: not-allowed;
 
                 .#{$prefix}-tag-close {
@@ -161,22 +175,17 @@ $module: #{$prefix}-cascader;
         }
         
         .#{$prefix}-tagInput {
-            &-wrapper {
-                &-default {
-                    min-height: $height-cascader_selection_tagInput_wrapper_default;
-                }
-    
-                &-small {
-                    min-height: $height-cascader_selection_tagInput_wrapper_small;
-                }
-    
-                &-large {
-                    min-height: $height-cascader_selection_tagInput_wrapper_large;
-                }
+            min-height: $height-cascader_selection_tagInput_wrapper_default;
+
+            &-small {
+                min-height: $height-cascader_selection_tagInput_wrapper_small;
+            }
+
+            &-large {
+                min-height: $height-cascader_selection_tagInput_wrapper_large;
             }
 
             .#{$prefix}-input-wrapper {
-                // height: $height-cascader_selection_tagInput_input_default;
 
                 margin-left: $spacing-cascader_selection_input-marginLeft;
                 .#{$prefix}-input {
@@ -193,13 +202,6 @@ $module: #{$prefix}-cascader;
                     margin-bottom: $spacing-cascader_selection_tag-marginY;
                 }
             }
-
-            // .#{$prefix}-input-wrapper-small {
-            //     height: $height-cascader_selection_tagInput_input_small;
-            // }
-            // .#{$prefix}-input-wrapper-large {
-            //     height: $height-cascader_selection_tagInput_input_large;
-            // }
         }
 
         &-text {
@@ -256,7 +258,7 @@ $module: #{$prefix}-cascader;
     &-inset-label {
         display: inline;
         margin-right: $spacing-cascader_label-marginRight;
-        font-weight: 600;
+        font-weight: $font-weight-bold;
         @include font-size-regular;
         color: $color-cascader_label-text-default;
         flex-shrink: 0;
@@ -336,6 +338,14 @@ $module: #{$prefix}-cascader;
             align-items: center;
             position: relative;
 
+            &-small {
+                height: $height-cascader_selection_wrapper_small;
+            }
+
+            &-large {
+                height: $height-cascader_selection_wrapper_large;
+            }
+
             .#{$prefix}-input-wrapper {
                 position: absolute;
                 top: 0;
@@ -385,6 +395,7 @@ $module: #{$prefix}-cascader;
         padding-right: $spacing-cascader_option-paddingRight;
     }
 
+
     .#{$module}-option-list {
         box-sizing: border-box;
         display: inline-block;
@@ -499,4 +510,36 @@ $module: #{$prefix}-cascader;
     }
 }
 
+.#{$module}-borderless{
+    &:not(:focus-within):not(:hover){
+        background-color:transparent;
+        border-color: transparent;
+        .#{$module}-arrow {
+            opacity: 0;
+        }
+    }
+
+    &:focus-within:not(:active){
+        background-color:transparent;
+    }
+
+    &.#{$module}-error:not(:focus-within){
+        border-color: $color-cascader_danger-border-focus;
+    }
+
+    &.#{$module}-warning:not(:focus-within){
+        border-color: $color-cascader_warning-border-focus;
+    }
+
+    &.#{$module}-error:focus-within{
+        border-color: $color-cascader_danger-border-focus;
+    }
+
+    &.#{$module}-warning:focus-within{
+        border-color: $color-cascader_warning-border-focus;
+    }
+
+
+}
+
 @import './rtl.scss';

package/cascader/constants.ts

@@ -16,6 +16,8 @@ const strings = {
     LEAF_ONLY_MERGE_TYPE: 'leafOnly',
     AUTO_MERGE_VALUE_MERGE_TYPE: 'autoMergeValue',
     NONE_MERGE_TYPE: 'none',
+    SEARCH_POSITION_TRIGGER: 'trigger',
+    SEARCH_POSITION_CUSTOM: 'custom',
 } as const;
 
 const numbers = {};
@@ -24,4 +26,6 @@ export {
     cssClasses,
     strings,
     numbers
-};
+};
+
+export const VALUE_SPLIT = '_SEMI_CASCADER_SPLIT_';