@douyinfe/semi-foundation 2.28.0 → 2.28.2

package/datePicker/foundation.ts

@@ -175,12 +175,14 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
 export interface DatePickerFoundationState {
     panelShow: boolean;
     isRange: boolean;
+    /** value of trigger input */
     inputValue: string;
     value: Date[];
     cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     rangeInputFocus: RangeType;
     autofocus: boolean;
+    /** value of inset input */
     insetInputValue: InsetInputValue;
     triggerDisabled: boolean
 }
@@ -248,7 +250,9 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
         const result = this.parseWithTimezone(_value, timeZone, prevTimeZone);
         this._adapter.updatePrevTimezone(prevTimeZone);
+        // reset input value when value update
         this._adapter.updateInputValue(null);
+        this._adapter.updateInsetInputValue(null);
         this._adapter.updateValue(result);
         this.resetCachedSelectedValue(result);
         this.initRangeInputFocus(result);

package/datePicker/monthsGridFoundation.ts

@@ -55,7 +55,8 @@ export type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'next
 
 export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     type?: Type;
-    defaultValue?: ValueType;
+    /** may be null if selection is not complete when type is dateRange or dateTimeRange */
+    defaultValue?: (Date | null)[];
     defaultPickerValue?: ValueType;
     multiple?: boolean;
     max?: number;
@@ -96,7 +97,11 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
 }
 
 export interface MonthInfo {
+    /** The date displayed in the current date panel, update when switching year and month */
     pickerDate: Date;
+    /**
+     * Default date or selected date (when selected)
+     */
     showDate: Date;
     isTimePickerOpen: boolean;
     isYearPickerOpen: boolean
@@ -167,22 +172,22 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         }
     }
 
-    updateSelectedFromProps(values: ValueType, refreshPicker = true) {
+    updateSelectedFromProps(values: (Date | null)[], refreshPicker = true) {
         const type: Type = this.getProp('type');
         const { selected, rangeStart, rangeEnd } = this.getStates();
-        if (values && (values as BaseValueType[]).length) {
+        if (values && values?.length) {
             switch (type) {
                 case 'date':
-                    this._initDatePickerFromValue(values as BaseValueType[], refreshPicker);
+                    this._initDatePickerFromValue(values, refreshPicker);
                     break;
                 case 'dateRange':
-                    this._initDateRangePickerFromValue(values as BaseValueType[]);
+                    this._initDateRangePickerFromValue(values);
                     break;
                 case 'dateTime':
-                    this._initDateTimePickerFromValue(values as BaseValueType[]);
+                    this._initDateTimePickerFromValue(values);
                     break;
                 case 'dateTimeRange':
-                    this._initDateTimeRangePickerFormValue(values as BaseValueType[]);
+                    this._initDateTimeRangePickerFormValue(values);
                     break;
                 default:
                     break;
@@ -222,7 +227,7 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         }
     }
 
-    _initDatePickerFromValue(values: BaseValueType[], refreshPicker = true) {
+    _initDatePickerFromValue(values: Date[], refreshPicker = true) {
         const monthLeft = this.getState('monthLeft');
         const newMonthLeft = { ...monthLeft };
         // REMOVE:
@@ -244,16 +249,32 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         this._adapter.updateDaySelected(newSelected);
     }
 
-    _initDateRangePickerFromValue(values: BaseValueType[], withTime = false) {
+    _initDateRangePickerFromValue(values: (Date | null)[], withTime = false) {
         // init month panel
-        const monthLeft = this.getState('monthLeft');
-        const monthRight = this.getState('monthRight');
+        const monthLeft = this.getState('monthLeft') as MonthsGridFoundationState['monthLeft'];
+        const monthRight = this.getState('monthRight') as MonthsGridFoundationState['monthRight'];
         const adjustResult = this._autoAdjustMonth(
             { ...monthLeft, pickerDate: values[0] || monthLeft.pickerDate },
             { ...monthRight, pickerDate: values[1] || monthRight.pickerDate }
         );
-        this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
-        this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+
+        const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
+        if (validValue) {
+            this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+            this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+        } else {
+            const selectedDate = values.find(item => item) as Date;
+            // 如果日期不完整且输入日期不在面板范围内，则更新面板
+            if (selectedDate) {                
+                const notLeftPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthLeft.pickerDate)) > 0;
+                const notRightPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthRight.pickerDate)) > 0;
+    
+                if (notLeftPanelDate && notRightPanelDate) {
+                    this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+                    this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+                }
+            }
+        }
 
         // init range
         const formatToken = withTime ? strings.FORMAT_DATE_TIME : strings.FORMAT_FULL_DATE;
@@ -268,11 +289,11 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         this._adapter.setHoverDay(rangeEnd);
     }
 
-    _initDateTimePickerFromValue(values: BaseValueType[]) {
+    _initDateTimePickerFromValue(values: Date[]) {
         this._initDatePickerFromValue(values);
     }
 
-    _initDateTimeRangePickerFormValue(values: BaseValueType[]) {
+    _initDateTimeRangePickerFormValue(values: (Date | null)[]) {
         this._initDateRangePickerFromValue(values, true);
     }
 

package/input/input.scss

@@ -623,6 +623,10 @@ $module: #{$prefix}-input;
             }
         }
 
+        .#{$prefix}-select{
+            overflow-y: visible;
+        }
+        
         .#{$prefix}-input-number,
         .#{$prefix}-datepicker,
         .#{$prefix}-timepicker,

package/lib/cjs/datePicker/foundation.d.ts

@@ -142,12 +142,14 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
 export interface DatePickerFoundationState {
     panelShow: boolean;
     isRange: boolean;
+    /** value of trigger input */
     inputValue: string;
     value: Date[];
     cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     rangeInputFocus: RangeType;
     autofocus: boolean;
+    /** value of inset input */
     insetInputValue: InsetInputValue;
     triggerDisabled: boolean;
 }

package/lib/cjs/datePicker/foundation.js

@@ -124,10 +124,13 @@ class DatePickerFoundation extends _foundation.default {
 
     const result = this.parseWithTimezone(_value, timeZone, prevTimeZone);
 
-    this._adapter.updatePrevTimezone(prevTimeZone);
+    this._adapter.updatePrevTimezone(prevTimeZone); // reset input value when value update
+
 
     this._adapter.updateInputValue(null);
 
+    this._adapter.updateInsetInputValue(null);
+
     this._adapter.updateValue(result);
 
     this.resetCachedSelectedValue(result);

package/lib/cjs/datePicker/monthsGridFoundation.d.ts

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
-import { BaseValueType, PresetPosition, ValueType } from './foundation';
+import { PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
 declare type Type = ArrayElement<typeof strings.TYPE_SET>;
@@ -15,7 +15,8 @@ export declare type PanelType = 'left' | 'right';
 export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
 export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     type?: Type;
-    defaultValue?: ValueType;
+    /** may be null if selection is not complete when type is dateRange or dateTimeRange */
+    defaultValue?: (Date | null)[];
     defaultPickerValue?: ValueType;
     multiple?: boolean;
     max?: number;
@@ -58,7 +59,11 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     renderDateInput?: any;
 }
 export interface MonthInfo {
+    /** The date displayed in the current date panel, update when switching year and month */
     pickerDate: Date;
+    /**
+     * Default date or selected date (when selected)
+     */
     showDate: Date;
     isTimePickerOpen: boolean;
     isYearPickerOpen: boolean;
@@ -101,12 +106,12 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     constructor(adapter: MonthsGridAdapter);
     init(): void;
     initDefaultPickerValue(): void;
-    updateSelectedFromProps(values: ValueType, refreshPicker?: boolean): void;
+    updateSelectedFromProps(values: (Date | null)[], refreshPicker?: boolean): void;
     calcDisabledTime(panelType: PanelType): any;
-    _initDatePickerFromValue(values: BaseValueType[], refreshPicker?: boolean): void;
-    _initDateRangePickerFromValue(values: BaseValueType[], withTime?: boolean): void;
-    _initDateTimePickerFromValue(values: BaseValueType[]): void;
-    _initDateTimeRangePickerFormValue(values: BaseValueType[]): void;
+    _initDatePickerFromValue(values: Date[], refreshPicker?: boolean): void;
+    _initDateRangePickerFromValue(values: (Date | null)[], withTime?: boolean): void;
+    _initDateTimePickerFromValue(values: Date[]): void;
+    _initDateTimeRangePickerFormValue(values: (Date | null)[]): void;
     destroy(): void;
     /**
      * sync change another panel month when change months from the else yam panel

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -79,7 +79,7 @@ class MonthsGridFoundation extends _foundation.default {
       rangeEnd
     } = this.getStates();
 
-    if (values && values.length) {
+    if (values && (values === null || values === void 0 ? void 0 : values.length)) {
       switch (type) {
         case 'date':
           this._initDatePickerFromValue(values, refreshPicker);
@@ -191,8 +191,25 @@ class MonthsGridFoundation extends _foundation.default {
       pickerDate: values[1] || monthRight.pickerDate
     }));
 
-    this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
-    this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate); // init range
+    const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
+
+    if (validValue) {
+      this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+      this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+    } else {
+      const selectedDate = values.find(item => item); // 如果日期不完整且输入日期不在面板范围内，则更新面板
+
+      if (selectedDate) {
+        const notLeftPanelDate = Math.abs((0, _dateFns.differenceInCalendarMonths)(selectedDate, monthLeft.pickerDate)) > 0;
+        const notRightPanelDate = Math.abs((0, _dateFns.differenceInCalendarMonths)(selectedDate, monthRight.pickerDate)) > 0;
+
+        if (notLeftPanelDate && notRightPanelDate) {
+          this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+          this.handleShowDateAndTime(_constants.strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+        }
+      }
+    } // init range
+
 
     const formatToken = withTime ? _constants.strings.FORMAT_DATE_TIME : _constants.strings.FORMAT_FULL_DATE;
     let rangeStart = values[0] && (0, _dateFns.format)(values[0], formatToken);

package/lib/cjs/input/input.css

@@ -486,6 +486,9 @@
   top: 1px;
   bottom: 1px;
 }
+.semi-input-group .semi-select {
+  overflow-y: visible;
+}
 .semi-input-group .semi-input-number,
 .semi-input-group .semi-datepicker,
 .semi-input-group .semi-timepicker,

package/lib/cjs/input/input.scss

@@ -623,6 +623,10 @@ $module: #{$prefix}-input;
             }
         }
 
+        .#{$prefix}-select{
+            overflow-y: visible;
+        }
+        
         .#{$prefix}-input-number,
         .#{$prefix}-datepicker,
         .#{$prefix}-timepicker,

package/lib/cjs/select/select.css

@@ -431,6 +431,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: not-allowed;
+  height: 20px;
 }
 
 .semi-rtl .semi-select,

package/lib/cjs/select/select.scss

@@ -463,6 +463,8 @@ $overflowList: #{$prefix}-overflow-list;
     padding-top: $spacing-select_loading_wrapper-paddingTop;
     padding-bottom: $spacing-select_loading_wrapper-paddingBottom;
     cursor: not-allowed;
+    // make sure that spin align vertical, no need to make 20px as a spacing token here
+    height: 20px;
 }
 
 @import './rtl.scss';

package/lib/cjs/table/table.css

@@ -86,7 +86,7 @@
   z-index: 102;
 }
 .semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-body {
   overflow: auto;
@@ -103,7 +103,7 @@
   width: 48px;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head {
-  background-color: transparent;
+  background-color: var(--semi-color-bg-1);
   color: var(--semi-color-text-2);
   font-weight: 600;
   text-align: left;
@@ -120,10 +120,10 @@
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
   z-index: 101;
   position: sticky;
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right::before {
-  background-color: transparent;
+  background-color: var(--semi-color-bg-1);
   content: "";
   position: absolute;
   left: 0;
@@ -200,7 +200,7 @@
   background-color: var(--semi-color-fill-0);
 }
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right {
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left::before, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right::before {
   background-color: var(--semi-color-fill-0);
@@ -224,6 +224,7 @@
   box-sizing: border-box;
   position: relative;
   vertical-align: middle;
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
   border-right: 2px solid var(--semi-color-primary);
@@ -234,7 +235,7 @@
 .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
   z-index: 101;
   position: sticky;
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
   border-right: 1px solid var(--semi-color-border);

package/lib/cjs/table/table.scss

@@ -238,6 +238,7 @@ $module: #{$prefix}-table;
                 box-sizing: border-box;
                 position: relative;
                 vertical-align: middle;
+                background-color: $color-table_body-bg-default;
 
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;

package/lib/cjs/table/variables.scss

@@ -47,18 +47,18 @@ $height-table_pagination_outer_min: 60px; // 表格分页器高度
 // Color no need to change
 $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
 $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
-$color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
+$color-table-bg-default: var(--semi-color-bg-1); // 单元格默认背景颜色
 $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
 
 $color-table-border-default: var(--semi-color-border); // 表格描边颜色
 $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
 $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
-$color-table_th-bg-default: transparent; // 表头背景色
+$color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
 $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
 $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
 
 $color-table_pl-bg-default: transparent;
-$color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
+$color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认
 $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
 $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
 $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认

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

@@ -142,12 +142,14 @@ export interface DatePickerFoundationProps extends ElementProps, RenderProps, Ev
 export interface DatePickerFoundationState {
     panelShow: boolean;
     isRange: boolean;
+    /** value of trigger input */
     inputValue: string;
     value: Date[];
     cachedSelectedValue: Date[];
     prevTimeZone: string | number;
     rangeInputFocus: RangeType;
     autofocus: boolean;
+    /** value of inset input */
     insetInputValue: InsetInputValue;
     triggerDisabled: boolean;
 }

package/lib/es/datePicker/foundation.js

@@ -100,10 +100,13 @@ export default class DatePickerFoundation extends BaseFoundation {
 
     const result = this.parseWithTimezone(_value, timeZone, prevTimeZone);
 
-    this._adapter.updatePrevTimezone(prevTimeZone);
+    this._adapter.updatePrevTimezone(prevTimeZone); // reset input value when value update
+
 
     this._adapter.updateInputValue(null);
 
+    this._adapter.updateInsetInputValue(null);
+
     this._adapter.updateValue(result);
 
     this.resetCachedSelectedValue(result);

package/lib/es/datePicker/monthsGridFoundation.d.ts

@@ -1,7 +1,7 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { strings } from './constants';
 import { WeekStartNumber } from './_utils/getMonthTable';
-import { BaseValueType, PresetPosition, ValueType } from './foundation';
+import { PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
 declare type Type = ArrayElement<typeof strings.TYPE_SET>;
@@ -15,7 +15,8 @@ export declare type PanelType = 'left' | 'right';
 export declare type YearMonthChangeType = 'prevMonth' | 'nextMonth' | 'prevYear' | 'nextYear';
 export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     type?: Type;
-    defaultValue?: ValueType;
+    /** may be null if selection is not complete when type is dateRange or dateTimeRange */
+    defaultValue?: (Date | null)[];
     defaultPickerValue?: ValueType;
     multiple?: boolean;
     max?: number;
@@ -58,7 +59,11 @@ export interface MonthsGridFoundationProps extends MonthsGridElementProps {
     renderDateInput?: any;
 }
 export interface MonthInfo {
+    /** The date displayed in the current date panel, update when switching year and month */
     pickerDate: Date;
+    /**
+     * Default date or selected date (when selected)
+     */
     showDate: Date;
     isTimePickerOpen: boolean;
     isYearPickerOpen: boolean;
@@ -101,12 +106,12 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
     constructor(adapter: MonthsGridAdapter);
     init(): void;
     initDefaultPickerValue(): void;
-    updateSelectedFromProps(values: ValueType, refreshPicker?: boolean): void;
+    updateSelectedFromProps(values: (Date | null)[], refreshPicker?: boolean): void;
     calcDisabledTime(panelType: PanelType): any;
-    _initDatePickerFromValue(values: BaseValueType[], refreshPicker?: boolean): void;
-    _initDateRangePickerFromValue(values: BaseValueType[], withTime?: boolean): void;
-    _initDateTimePickerFromValue(values: BaseValueType[]): void;
-    _initDateTimeRangePickerFormValue(values: BaseValueType[]): void;
+    _initDatePickerFromValue(values: Date[], refreshPicker?: boolean): void;
+    _initDateRangePickerFromValue(values: (Date | null)[], withTime?: boolean): void;
+    _initDateTimePickerFromValue(values: Date[]): void;
+    _initDateTimeRangePickerFormValue(values: (Date | null)[]): void;
     destroy(): void;
     /**
      * sync change another panel month when change months from the else yam panel

package/lib/es/datePicker/monthsGridFoundation.js

@@ -58,7 +58,7 @@ export default class MonthsGridFoundation extends BaseFoundation {
       rangeEnd
     } = this.getStates();
 
-    if (values && values.length) {
+    if (values && (values === null || values === void 0 ? void 0 : values.length)) {
       switch (type) {
         case 'date':
           this._initDatePickerFromValue(values, refreshPicker);
@@ -170,8 +170,25 @@ export default class MonthsGridFoundation extends BaseFoundation {
       pickerDate: values[1] || monthRight.pickerDate
     }));
 
-    this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
-    this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate); // init range
+    const validValue = Array.isArray(values) && values.filter(item => item).length > 1;
+
+    if (validValue) {
+      this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+      this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+    } else {
+      const selectedDate = values.find(item => item); // 如果日期不完整且输入日期不在面板范围内，则更新面板
+
+      if (selectedDate) {
+        const notLeftPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthLeft.pickerDate)) > 0;
+        const notRightPanelDate = Math.abs(differenceInCalendarMonths(selectedDate, monthRight.pickerDate)) > 0;
+
+        if (notLeftPanelDate && notRightPanelDate) {
+          this.handleShowDateAndTime(strings.PANEL_TYPE_LEFT, adjustResult.monthLeft.pickerDate);
+          this.handleShowDateAndTime(strings.PANEL_TYPE_RIGHT, adjustResult.monthRight.pickerDate);
+        }
+      }
+    } // init range
+
 
     const formatToken = withTime ? strings.FORMAT_DATE_TIME : strings.FORMAT_FULL_DATE;
     let rangeStart = values[0] && format(values[0], formatToken);

package/lib/es/input/input.css

@@ -486,6 +486,9 @@
   top: 1px;
   bottom: 1px;
 }
+.semi-input-group .semi-select {
+  overflow-y: visible;
+}
 .semi-input-group .semi-input-number,
 .semi-input-group .semi-datepicker,
 .semi-input-group .semi-timepicker,

package/lib/es/input/input.scss

@@ -623,6 +623,10 @@ $module: #{$prefix}-input;
             }
         }
 
+        .#{$prefix}-select{
+            overflow-y: visible;
+        }
+        
         .#{$prefix}-input-number,
         .#{$prefix}-datepicker,
         .#{$prefix}-timepicker,

package/lib/es/select/select.css

@@ -431,6 +431,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: not-allowed;
+  height: 20px;
 }
 
 .semi-rtl .semi-select,

package/lib/es/select/select.scss

@@ -463,6 +463,8 @@ $overflowList: #{$prefix}-overflow-list;
     padding-top: $spacing-select_loading_wrapper-paddingTop;
     padding-bottom: $spacing-select_loading_wrapper-paddingBottom;
     cursor: not-allowed;
+    // make sure that spin align vertical, no need to make 20px as a spacing token here
+    height: 20px;
 }
 
 @import './rtl.scss';

package/lib/es/table/table.css

@@ -86,7 +86,7 @@
   z-index: 102;
 }
 .semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-body {
   overflow: auto;
@@ -103,7 +103,7 @@
   width: 48px;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head {
-  background-color: transparent;
+  background-color: var(--semi-color-bg-1);
   color: var(--semi-color-text-2);
   font-weight: 600;
   text-align: left;
@@ -120,10 +120,10 @@
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
   z-index: 101;
   position: sticky;
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left::before, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right::before {
-  background-color: transparent;
+  background-color: var(--semi-color-bg-1);
   content: "";
   position: absolute;
   left: 0;
@@ -200,7 +200,7 @@
   background-color: var(--semi-color-fill-0);
 }
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right {
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-left::before, .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell.semi-table-cell-fixed-right::before {
   background-color: var(--semi-color-fill-0);
@@ -224,6 +224,7 @@
   box-sizing: border-box;
   position: relative;
   vertical-align: middle;
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
   border-right: 2px solid var(--semi-color-primary);
@@ -234,7 +235,7 @@
 .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left, .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-right {
   z-index: 101;
   position: sticky;
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row > .semi-table-cell-fixed-left-last {
   border-right: 1px solid var(--semi-color-border);

package/lib/es/table/table.scss

@@ -238,6 +238,7 @@ $module: #{$prefix}-table;
                 box-sizing: border-box;
                 position: relative;
                 vertical-align: middle;
+                background-color: $color-table_body-bg-default;
 
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;

package/lib/es/table/variables.scss

@@ -47,18 +47,18 @@ $height-table_pagination_outer_min: 60px; // 表格分页器高度
 // Color no need to change
 $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
 $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
-$color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
+$color-table-bg-default: var(--semi-color-bg-1); // 单元格默认背景颜色
 $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
 
 $color-table-border-default: var(--semi-color-border); // 表格描边颜色
 $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
 $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
-$color-table_th-bg-default: transparent; // 表头背景色
+$color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
 $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
 $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
 
 $color-table_pl-bg-default: transparent;
-$color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
+$color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认
 $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
 $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
 $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.28.0",
+    "version": "2.28.2",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "4465cecb0aa8f51f0c559eb829eeec8b567e1876",
+    "gitHead": "d9651593e39ad3333e0f138a678460e959d01bbd",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/select/select.scss

@@ -463,6 +463,8 @@ $overflowList: #{$prefix}-overflow-list;
     padding-top: $spacing-select_loading_wrapper-paddingTop;
     padding-bottom: $spacing-select_loading_wrapper-paddingBottom;
     cursor: not-allowed;
+    // make sure that spin align vertical, no need to make 20px as a spacing token here
+    height: 20px;
 }
 
 @import './rtl.scss';

package/table/table.scss

@@ -238,6 +238,7 @@ $module: #{$prefix}-table;
                 box-sizing: border-box;
                 position: relative;
                 vertical-align: middle;
+                background-color: $color-table_body-bg-default;
 
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;

package/table/variables.scss

@@ -47,18 +47,18 @@ $height-table_pagination_outer_min: 60px; // 表格分页器高度
 // Color no need to change
 $color-table_panel-bg-default: var(--semi-color-primary); // 操作区域样式默认背景颜色
 $color-table_panel-text-default: var(--semi-color-primary-light-active); // 操作区域样式默认文字颜色
-$color-table-bg-default: var(--semi-color-bg-2); // 单元格默认背景颜色
+$color-table-bg-default: var(--semi-color-bg-1); // 单元格默认背景颜色
 $color-table-text-default: var(--semi-color-text-0); // 单元格默认文字颜色
 
 $color-table-border-default: var(--semi-color-border); // 表格描边颜色
 $color-table_shadow-bg-default: var(--semi-color-shadow); // 表格滚动后阴影颜色
 $color-table_shadow-border-default: var(--semi-color-border); // 表格拟阴影 描边颜色
-$color-table_th-bg-default: transparent; // 表头背景色
+$color-table_th-bg-default: var(--semi-color-bg-1); // 表头背景色
 $color-table_th-border-default: var(--semi-color-border); // 表头底部分割线颜色
 $color-table_th-text-default: var(--semi-color-text-2); // 表头文字颜色
 
 $color-table_pl-bg-default: transparent;
-$color-table_body-bg-default: var(--semi-color-bg-2); // 表格背景颜色 - 默认
+$color-table_body-bg-default: var(--semi-color-bg-1); // 表格背景颜色 - 默认
 $color-table_body-bg-hover: var(--semi-color-fill-0); // 表格背景颜色 - 悬浮
 $color-table_footer-bg-default: var(--semi-color-fill-0); // 表格 footer 背景颜色 - 默认
 $color-table_row_expanded-bg-default: var(--semi-color-fill-0); // 表格展开行背景颜色 - 默认