@douyinfe/semi-foundation 2.32.0-beta.0 → 2.32.1-alpha.0

package/autoComplete/autoComplete.scss

@@ -27,6 +27,8 @@ $module: #{$prefix}-autocomplete;
         padding-top: $spacing-autoComplete_loading_wrapper-paddingTop;
         padding-bottom: $spacing-autoComplete_loading_wrapper-paddingBottom;
         cursor: not-allowed;
+        // make sure that spin align vertical, no need to make 20px as a spacing token here
+        height: 20px;
         // height: $spacing-extra-loose;
         // @include all-center;
         .#{$prefix}-spin {

package/datePicker/_utils/isValidTimeZone.ts

@@ -0,0 +1,3 @@
+export default function isValidTimeZone(timeZone?: string | number) {
+    return ['string', 'number'].includes(typeof timeZone) && timeZone !== '';
+}

package/datePicker/foundation.ts

@@ -19,6 +19,7 @@ import type { ArrayElement, Motion } from '../utils/type';
 import type { Type, DateInputFoundationProps, InsetInputValue } from './inputFoundation';
 import type { MonthsGridFoundationProps } from './monthsGridFoundation';
 import type { WeekStartNumber } from './_utils/getMonthTable';
+import isValidTimeZone from './_utils/isValidTimeZone';
 
 export type ValidateStatus = ArrayElement<typeof strings.STATUS>;
 export type InputSize = ArrayElement<typeof strings.SIZE_SET>;
@@ -240,13 +241,6 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         this.initPanelOpenStatus(this.getProp('defaultOpen'));
     }
 
-    isValidTimeZone(timeZone?: string | number) {
-        const propTimeZone = this.getProp('timeZone');
-        const _timeZone = isNullOrUndefined(timeZone) ? propTimeZone : timeZone;
-
-        return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
-    }
-
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & { prevTimeZone?: string | number }) {
         const _value = (Array.isArray(value) ? [...value] : (value || value === 0) && [value]) || [];
 
@@ -275,17 +269,28 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         }
     }
 
+    /**
+     * value 可能是 UTC value 也可能是 zoned value
+     * 
+     * UTC value -> 受控传入的 value
+     * 
+     * zoned value -> statue.value，保存的是当前计算机时区下选择的日期
+     * 
+     * 如果是时区变化，则需要将旧 zoned value 转为新时区下的 zoned value
+     * 
+     * 如果是 value 变化，则不需要传入之前的时区，将 UTC value 转为 zoned value 即可
+     * 
+     */
     parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number) {
         const result: Date[] = [];
         if (Array.isArray(value) && value.length) {
             for (const v of value) {
                 let parsedV = (v || v === 0) && this._parseValue(v);
                 if (parsedV) {
-                    if (this.isValidTimeZone(prevTimeZone)) {
-                        parsedV = zonedTimeToUtc(parsedV, prevTimeZone as string);
+                    if (isValidTimeZone(prevTimeZone)) {
+                        parsedV = zonedTimeToUtc(parsedV, prevTimeZone);
                     }
-
-                    result.push(this.isValidTimeZone(timeZone) ? utcToZonedTime(parsedV, timeZone as string) : parsedV);
+                    result.push(isValidTimeZone(timeZone) ? utcToZonedTime(parsedV, timeZone) : parsedV);
                 }
             }
         }
@@ -541,7 +546,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
             this._updateValueAndInput(result, input === '', input);
             // Updates the selected value when entering a valid date
             const changedDates = this._getChangedDates(result);
-            if (!this._someDateDisabled(changedDates)) {
+            if (!this._someDateDisabled(changedDates, result)) {
                 if (!isEqual(result, stateValue)) {
                     this._notifyChange(result);
                 }
@@ -566,7 +571,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
         if ((result && result.length)) {
             const changedDates = this._getChangedDates(result);
-            if (!this._someDateDisabled(changedDates)) {
+            if (!this._someDateDisabled(changedDates, result)) {
                 if (!isEqual(result, stateValue)) {
                     if (!this._isControlledComponent() && !this._adapter.needConfirm()) {
                         this._adapter.updateValue(result);
@@ -586,7 +591,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     _updateCachedSelectedValueFromInput(input: string) {
         const looseResult = this.getLooseDateFromInput(input);
         const changedLooseResult = this._getChangedDates(looseResult);
-        if (!this._someDateDisabled(changedLooseResult)) {
+        if (!this._someDateDisabled(changedLooseResult, looseResult)) {
             this.resetCachedSelectedValue(looseResult);
         }
     }
@@ -678,7 +683,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         this._updateValueAndInput(parsedResult);
         const { value: stateValue } = this.getStates();
         const changedDates = this._getChangedDates(parsedResult);
-        if (!this._someDateDisabled(changedDates) && !isEqual(parsedResult, stateValue)) {
+        if (!this._someDateDisabled(changedDates, parsedResult) && !isEqual(parsedResult, stateValue)) {
             this._notifyChange(parsedResult);
         }
     }
@@ -978,7 +983,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
             const changedDates = this._getChangedDates(_value);
             // You cannot update the value directly when needConfirm, you can only change the value through handleConfirm
-            if (!this._isControlledComponent() && !this._someDateDisabled(changedDates) && !this._adapter.needConfirm()) {
+            if (!this._isControlledComponent() && !this._someDateDisabled(changedDates, _value) && !this._adapter.needConfirm()) {
                 this._adapter.updateValue(_value);
             }
         }
@@ -1007,7 +1012,7 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
         const changedDates = this._getChangedDates(dates);
 
         let inputValue, insetInputValue;
-        if (!this._someDateDisabled(changedDates)) {
+        if (!this._someDateDisabled(changedDates, dates)) {
             this.resetCachedSelectedValue(dates);
             inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
             if (insetInput) {
@@ -1155,9 +1160,9 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      */
     disposeCallbackArgs(value: Date | Date[]) {
         let _value = Array.isArray(value) ? value : (value && [value]) || [];
+        const timeZone = this.getProp('timeZone');
 
-        if (this.isValidTimeZone()) {
-            const timeZone = this.getProp('timeZone');
+        if (isValidTimeZone(timeZone)) {
             _value = _value.map(date => zonedTimeToUtc(date, timeZone));
         }
         const type = this.getProp('type');
@@ -1247,22 +1252,22 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
 
     /**
      * Whether a date is disabled
-     * @param {Array} value
+     * @param value The date that needs to be judged whether to disable
+     * @param selectedValue Selected date, when selecting a range, pass this date to the second parameter of `disabledDate`
      */
-    _someDateDisabled(value: Date[]) {
-        const stateValue = this.getState('value');
+    _someDateDisabled(value: Date[], selectedValue: Date[]) {
         const { rangeInputFocus } = this.getStates();
         const disabledOptions = { rangeStart: '', rangeEnd: '', rangeInputFocus };
 
         // DisabledDate needs to pass the second parameter
-        if (this._isRangeType() && Array.isArray(stateValue)) {
-            if (isValid(stateValue[0])) {
-                const rangeStart = format(stateValue[0], 'yyyy-MM-dd');
+        if (this._isRangeType() && Array.isArray(selectedValue)) {
+            if (isValid(selectedValue[0])) {
+                const rangeStart = format(selectedValue[0], 'yyyy-MM-dd');
                 disabledOptions.rangeStart = rangeStart;
             }
 
-            if (isValid(stateValue[1])) {
-                const rangeEnd = format(stateValue[1], 'yyyy-MM-dd');
+            if (isValid(selectedValue[1])) {
+                const rangeEnd = format(selectedValue[1], 'yyyy-MM-dd');
                 disabledOptions.rangeEnd = rangeEnd;
             }
         }

package/datePicker/inputFoundation.ts

@@ -276,7 +276,7 @@ export default class InputFoundation extends BaseFoundation<DateInputAdapter> {
      * 
      * Parse out insetInputValue from current date value or inputValue
      */
-    getInsetInputValue({ value, insetInputValue } : { value: BaseValueType[]; insetInputValue: InsetInputValue }) {
+    getInsetInputValue({ value, insetInputValue }: { value: BaseValueType[]; insetInputValue: InsetInputValue }) {
         const { type, rangeSeparator, format } = this._adapter.getProps();
 
         let inputValueStr = '';

package/datePicker/monthsGridFoundation.ts

@@ -23,6 +23,7 @@ import isNullOrUndefined from '../utils/isNullOrUndefined';
 import { BaseValueType, DateInputFoundationProps, PresetPosition, ValueType } from './foundation';
 import { MonthDayInfo } from './monthFoundation';
 import { ArrayElement } from '../utils/type';
+import isValidTimeZone from './_utils/isValidTimeZone';
 
 const dateDiffFns = {
     month: differenceInCalendarMonths,
@@ -448,13 +449,6 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
         return format(date, token, { locale: dateFnsLocale });
     }
 
-    isValidTimeZone(timeZone?: string | number) {
-        const propTimeZone = this.getProp('timeZone');
-        const _timeZone = isNullOrUndefined(timeZone) ? propTimeZone : timeZone;
-
-        return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
-    }
-
     /**
      * 根据 type 处理 onChange 返回的参数
      *
@@ -484,9 +478,9 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      */
     disposeCallbackArgs(value: Date | Date[]) {
         let _value = Array.isArray(value) ? value : (value && [value]) || [];
+        const timeZone = this.getProp('timeZone');
 
-        if (this.isValidTimeZone()) {
-            const timeZone = this.getProp('timeZone');
+        if (isValidTimeZone(timeZone)) {
             _value = _value.map(date => zonedTimeToUtc(date, timeZone));
         }
         const type = this.getProp('type');

package/lib/cjs/autoComplete/autoComplete.css

@@ -94,6 +94,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   cursor: not-allowed;
+  height: 20px;
 }
 .semi-autocomplete-loading-wrapper .semi-spin {
   width: 100%;

package/lib/cjs/autoComplete/autoComplete.scss

@@ -27,6 +27,8 @@ $module: #{$prefix}-autocomplete;
         padding-top: $spacing-autoComplete_loading_wrapper-paddingTop;
         padding-bottom: $spacing-autoComplete_loading_wrapper-paddingBottom;
         cursor: not-allowed;
+        // make sure that spin align vertical, no need to make 20px as a spacing token here
+        height: 20px;
         // height: $spacing-extra-loose;
         // @include all-center;
         .#{$prefix}-spin {

package/lib/cjs/datePicker/_utils/isValidTimeZone.d.ts

@@ -0,0 +1 @@
+export default function isValidTimeZone(timeZone?: string | number): boolean;

package/lib/cjs/datePicker/_utils/isValidTimeZone.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isValidTimeZone;
+
+function isValidTimeZone(timeZone) {
+  return ['string', 'number'].includes(typeof timeZone) && timeZone !== '';
+}

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

@@ -192,7 +192,6 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     clickConfirmButton: boolean;
     constructor(adapter: DatePickerAdapter);
     init(): void;
-    isValidTimeZone(timeZone?: string | number): boolean;
     initFromProps({ value, timeZone, prevTimeZone }: Pick<DatePickerFoundationProps, 'value' | 'timeZone'> & {
         prevTimeZone?: string | number;
     }): void;
@@ -202,6 +201,18 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
      * If the user passes an empty value, you need to set the range input focus to rangeStart, so that the user can continue to select from the beginning after clearing
      */
     initRangeInputFocus(result: Date[]): void;
+    /**
+     * value 可能是 UTC value 也可能是 zoned value
+     *
+     * UTC value -> 受控传入的 value
+     *
+     * zoned value -> statue.value，保存的是当前计算机时区下选择的日期
+     *
+     * 如果是时区变化，则需要将旧 zoned value 转为新时区下的 zoned value
+     *
+     * 如果是 value 变化，则不需要传入之前的时区，将 UTC value 转为 zoned value 即可
+     *
+     */
     parseWithTimezone(value: ValueType, timeZone: string | number, prevTimeZone: string | number): Date[];
     _isMultiple(): boolean;
     /**
@@ -464,9 +475,10 @@ export default class DatePickerFoundation extends BaseFoundation<DatePickerAdapt
     _getChangedDates(dates: Date[]): any[];
     /**
      * Whether a date is disabled
-     * @param {Array} value
+     * @param value The date that needs to be judged whether to disable
+     * @param selectedValue Selected date, when selecting a range, pass this date to the second parameter of `disabledDate`
      */
-    _someDateDisabled(value: Date[]): boolean;
+    _someDateDisabled(value: Date[], selectedValue: Date[]): boolean;
     /**
      * Format locale date
      * locale get from LocaleProvider

package/lib/cjs/datePicker/foundation.js

@@ -37,6 +37,8 @@ var _getInsetInputFormatToken = _interopRequireDefault(require("./_utils/getInse
 
 var _getInsetInputValueFromInsetInputStr = _interopRequireDefault(require("./_utils/getInsetInputValueFromInsetInputStr"));
 
+var _isValidTimeZone = _interopRequireDefault(require("./_utils/isValidTimeZone"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /* eslint-disable no-nested-ternary */
@@ -105,14 +107,6 @@ class DatePickerFoundation extends _foundation.default {
     this.initPanelOpenStatus(this.getProp('defaultOpen'));
   }
 
-  isValidTimeZone(timeZone) {
-    const propTimeZone = this.getProp('timeZone');
-
-    const _timeZone = (0, _isNullOrUndefined.default)(timeZone) ? propTimeZone : timeZone;
-
-    return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
-  }
-
   initFromProps(_ref) {
     let {
       value,
@@ -154,6 +148,19 @@ class DatePickerFoundation extends _foundation.default {
       this._adapter.setRangeInputFocus('rangeStart');
     }
   }
+  /**
+   * value 可能是 UTC value 也可能是 zoned value
+   *
+   * UTC value -> 受控传入的 value
+   *
+   * zoned value -> statue.value，保存的是当前计算机时区下选择的日期
+   *
+   * 如果是时区变化，则需要将旧 zoned value 转为新时区下的 zoned value
+   *
+   * 如果是 value 变化，则不需要传入之前的时区，将 UTC value 转为 zoned value 即可
+   *
+   */
+
 
   parseWithTimezone(value, timeZone, prevTimeZone) {
     const result = [];
@@ -163,11 +170,11 @@ class DatePickerFoundation extends _foundation.default {
         let parsedV = (v || v === 0) && this._parseValue(v);
 
         if (parsedV) {
-          if (this.isValidTimeZone(prevTimeZone)) {
+          if ((0, _isValidTimeZone.default)(prevTimeZone)) {
             parsedV = (0, _dateFnsExtra.zonedTimeToUtc)(parsedV, prevTimeZone);
           }
 
-          result.push(this.isValidTimeZone(timeZone) ? (0, _dateFnsExtra.utcToZonedTime)(parsedV, timeZone) : parsedV);
+          result.push((0, _isValidTimeZone.default)(timeZone) ? (0, _dateFnsExtra.utcToZonedTime)(parsedV, timeZone) : parsedV);
         }
       }
     }
@@ -469,7 +476,7 @@ class DatePickerFoundation extends _foundation.default {
 
       const changedDates = this._getChangedDates(result);
 
-      if (!this._someDateDisabled(changedDates)) {
+      if (!this._someDateDisabled(changedDates, result)) {
         if (!(0, _isEqual2.default)(result, stateValue)) {
           this._notifyChange(result);
         }
@@ -505,7 +512,7 @@ class DatePickerFoundation extends _foundation.default {
     if (result && result.length) {
       const changedDates = this._getChangedDates(result);
 
-      if (!this._someDateDisabled(changedDates)) {
+      if (!this._someDateDisabled(changedDates, result)) {
         if (!(0, _isEqual2.default)(result, stateValue)) {
           if (!this._isControlledComponent() && !this._adapter.needConfirm()) {
             this._adapter.updateValue(result);
@@ -532,7 +539,7 @@ class DatePickerFoundation extends _foundation.default {
 
     const changedLooseResult = this._getChangedDates(looseResult);
 
-    if (!this._someDateDisabled(changedLooseResult)) {
+    if (!this._someDateDisabled(changedLooseResult, looseResult)) {
       this.resetCachedSelectedValue(looseResult);
     }
   }
@@ -637,7 +644,7 @@ class DatePickerFoundation extends _foundation.default {
 
     const changedDates = this._getChangedDates(parsedResult);
 
-    if (!this._someDateDisabled(changedDates) && !(0, _isEqual2.default)(parsedResult, stateValue)) {
+    if (!this._someDateDisabled(changedDates, parsedResult) && !(0, _isEqual2.default)(parsedResult, stateValue)) {
       this._notifyChange(parsedResult);
     }
   }
@@ -991,7 +998,7 @@ class DatePickerFoundation extends _foundation.default {
       const changedDates = this._getChangedDates(_value); // You cannot update the value directly when needConfirm, you can only change the value through handleConfirm
 
 
-      if (!this._isControlledComponent() && !this._someDateDisabled(changedDates) && !this._adapter.needConfirm()) {
+      if (!this._isControlledComponent() && !this._someDateDisabled(changedDates, _value) && !this._adapter.needConfirm()) {
         this._adapter.updateValue(_value);
       }
     }
@@ -1034,7 +1041,7 @@ class DatePickerFoundation extends _foundation.default {
 
     let inputValue, insetInputValue;
 
-    if (!this._someDateDisabled(changedDates)) {
+    if (!this._someDateDisabled(changedDates, dates)) {
       this.resetCachedSelectedValue(dates);
       inputValue = this._isMultiple() ? this.formatMultipleDates(dates) : this.formatDates(dates);
 
@@ -1230,8 +1237,9 @@ class DatePickerFoundation extends _foundation.default {
   disposeCallbackArgs(value) {
     let _value = Array.isArray(value) ? value : value && [value] || [];
 
-    if (this.isValidTimeZone()) {
-      const timeZone = this.getProp('timeZone');
+    const timeZone = this.getProp('timeZone');
+
+    if ((0, _isValidTimeZone.default)(timeZone)) {
       _value = _value.map(date => (0, _dateFnsExtra.zonedTimeToUtc)(date, timeZone));
     }
 
@@ -1340,12 +1348,12 @@ class DatePickerFoundation extends _foundation.default {
   }
   /**
    * Whether a date is disabled
-   * @param {Array} value
+   * @param value The date that needs to be judged whether to disable
+   * @param selectedValue Selected date, when selecting a range, pass this date to the second parameter of `disabledDate`
    */
 
 
-  _someDateDisabled(value) {
-    const stateValue = this.getState('value');
+  _someDateDisabled(value, selectedValue) {
     const {
       rangeInputFocus
     } = this.getStates();
@@ -1355,14 +1363,14 @@ class DatePickerFoundation extends _foundation.default {
       rangeInputFocus
     }; // DisabledDate needs to pass the second parameter
 
-    if (this._isRangeType() && Array.isArray(stateValue)) {
-      if ((0, _dateFns.isValid)(stateValue[0])) {
-        const rangeStart = (0, _dateFns.format)(stateValue[0], 'yyyy-MM-dd');
+    if (this._isRangeType() && Array.isArray(selectedValue)) {
+      if ((0, _dateFns.isValid)(selectedValue[0])) {
+        const rangeStart = (0, _dateFns.format)(selectedValue[0], 'yyyy-MM-dd');
         disabledOptions.rangeStart = rangeStart;
       }
 
-      if ((0, _dateFns.isValid)(stateValue[1])) {
-        const rangeEnd = (0, _dateFns.format)(stateValue[1], 'yyyy-MM-dd');
+      if ((0, _dateFns.isValid)(selectedValue[1])) {
+        const rangeEnd = (0, _dateFns.format)(selectedValue[1], 'yyyy-MM-dd');
         disabledOptions.rangeEnd = rangeEnd;
       }
     }

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

@@ -158,7 +158,6 @@ export default class MonthsGridFoundation extends BaseFoundation<MonthsGridAdapt
      * @returns
      */
     localeFormat(date: Date, token: string): string;
-    isValidTimeZone(timeZone?: string | number): boolean;
     /**
      * 根据 type 处理 onChange 返回的参数
      *

package/lib/cjs/datePicker/monthsGridFoundation.js

@@ -27,7 +27,7 @@ var _dateFnsExtra = require("../utils/date-fns-extra");
 
 var _getDefaultFormatToken = require("./_utils/getDefaultFormatToken");
 
-var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
+var _isValidTimeZone = _interopRequireDefault(require("./_utils/isValidTimeZone"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -438,14 +438,6 @@ class MonthsGridFoundation extends _foundation.default {
       locale: dateFnsLocale
     });
   }
-
-  isValidTimeZone(timeZone) {
-    const propTimeZone = this.getProp('timeZone');
-
-    const _timeZone = (0, _isNullOrUndefined.default)(timeZone) ? propTimeZone : timeZone;
-
-    return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
-  }
   /**
    * 根据 type 处理 onChange 返回的参数
    *
@@ -478,8 +470,9 @@ class MonthsGridFoundation extends _foundation.default {
   disposeCallbackArgs(value) {
     let _value = Array.isArray(value) ? value : value && [value] || [];
 
-    if (this.isValidTimeZone()) {
-      const timeZone = this.getProp('timeZone');
+    const timeZone = this.getProp('timeZone');
+
+    if ((0, _isValidTimeZone.default)(timeZone)) {
       _value = _value.map(date => (0, _dateFnsExtra.zonedTimeToUtc)(date, timeZone));
     }
 

package/lib/cjs/overflowList/constants.d.ts

@@ -2,7 +2,7 @@ declare const cssClasses: {
     PREFIX: string;
 };
 declare const strings: {
-    BOUNDARY_SET: ("end" | "start")[];
+    BOUNDARY_SET: ("start" | "end")[];
     POSITION_SET: string[];
     MODE_SET: string[];
     MODE_MAP: {

package/lib/cjs/spin/spin.css

@@ -26,6 +26,7 @@
 .semi-spin-wrapper > svg {
   animation: 600ms linear infinite semi-animation-rotate;
   animation-fill-mode: forwards;
+  vertical-align: top;
   width: 20px;
   height: 20px;
 }

package/lib/cjs/spin/spin.scss

@@ -29,6 +29,7 @@ $module: #{$prefix}-spin;
         & > svg {
             animation: $animation_duration-spin_wrapper-spin linear infinite #{$prefix}-animation-rotate;
             animation-fill-mode: forwards;
+            vertical-align: top;
             @include size($width-spin_middle);
         }
     }

package/lib/cjs/table/table.css

@@ -201,12 +201,14 @@
 }
 .semi-table-tbody > .semi-table-row {
   display: table-row;
+  background-color: var(--semi-color-bg-1);
 }
 .semi-table-tbody > .semi-table-row:hover > .semi-table-row-cell {
-  background-color: var(--semi-color-fill-0);
+  background-image: linear-gradient(0deg, var(--semi-color-fill-0), var(--semi-color-fill-0));
+  background-color: var(--semi-color-bg-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-1);
+  background-image: linear-gradient(0deg, var(--semi-color-bg-1), 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);
@@ -230,7 +232,6 @@
   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);

package/lib/cjs/table/table.scss

@@ -209,15 +209,19 @@ $module: #{$prefix}-table;
         display: table-row-group;
         & > .#{$module}-row {
             display: table-row;
+            background-color: $color-table_body-bg-default;
 
             &:hover {
                 & > .#{$module}-row-cell {
-                    background-color: $color-table_body-bg-hover;
+                    // $color-table_body-bg-hover has transparency，will reveal the background color $color-table_body-bg-default\
+                    // combine background-image and background-color to make the non-fixed column color does not show through the bottom color
+                    background-image: linear-gradient(0deg, $color-table_body-bg-hover, $color-table_body-bg-hover);
+                    background-color: $color-table_cell-bg-hover;
 
                     &.#{$module}-cell-fixed {
                         &-left,
                         &-right {
-                            background-color: $color-table_body-bg-default;
+                            background-image: linear-gradient(0deg, $color-table_body-bg-default, $color-table_body-bg-default);
 
                             &::before {
                                 background-color: $color-table_body-bg-hover;
@@ -246,7 +250,6 @@ $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/utils.d.ts

@@ -1,8 +1,6 @@
 import { strings } from './constants';
-export declare function cloneDeep(value: any, customizer?: (v: any) => any): any;
 export declare function equalWith(value: any, other: any, customizer?: (...args: any[]) => boolean): boolean;
 export declare function getColumnKey(column: any, keyPropNames: any[]): any;
-export declare function mergeColumns(oldColumns?: any[], newColumns?: any[], keyPropNames?: any[], deep?: boolean): any[];
 /**
  *
  * @param {Array<number>} arr
@@ -81,7 +79,58 @@ export declare function mergeQueries(query: Record<string, any>, queries?: Recor
  * @param {Object[]} columns columns retain the column width after resize
  * @param {Object[]} newColumns
  */
-export declare function withResizeWidth(columns: Record<string, any>[], newColumns: Record<string, any>[]): any;
+export declare function withResizeWidth(columns: Record<string, any>[], newColumns: Record<string, any>[]): {
+    [x: number]: Record<string, any>;
+    length: number;
+    toString(): string;
+    toLocaleString(): string;
+    pop(): Record<string, any>;
+    push(...items: Record<string, any>[]): number;
+    concat(...items: ConcatArray<Record<string, any>>[]): Record<string, any>[];
+    concat(...items: (Record<string, any> | ConcatArray<Record<string, any>>)[]): Record<string, any>[];
+    join(separator?: string): string;
+    reverse(): Record<string, any>[];
+    shift(): Record<string, any>;
+    slice(start?: number, end?: number): Record<string, any>[];
+    sort(compareFn?: (a: Record<string, any>, b: Record<string, any>) => number): Record<string, any>[];
+    splice(start: number, deleteCount?: number): Record<string, any>[];
+    splice(start: number, deleteCount: number, ...items: Record<string, any>[]): Record<string, any>[];
+    unshift(...items: Record<string, any>[]): number;
+    indexOf(searchElement: Record<string, any>, fromIndex?: number): number;
+    lastIndexOf(searchElement: Record<string, any>, fromIndex?: number): number;
+    every<S extends Record<string, any>>(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => value is S, thisArg?: any): this is S[];
+    every(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => unknown, thisArg?: any): boolean;
+    some(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => unknown, thisArg?: any): boolean;
+    forEach(callbackfn: (value: Record<string, any>, index: number, array: Record<string, any>[]) => void, thisArg?: any): void;
+    map<U>(callbackfn: (value: Record<string, any>, index: number, array: Record<string, any>[]) => U, thisArg?: any): U[];
+    filter<S_1 extends Record<string, any>>(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => value is S_1, thisArg?: any): S_1[];
+    filter(predicate: (value: Record<string, any>, index: number, array: Record<string, any>[]) => unknown, thisArg?: any): Record<string, any>[];
+    reduce(callbackfn: (previousValue: Record<string, any>, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => Record<string, any>): Record<string, any>;
+    reduce(callbackfn: (previousValue: Record<string, any>, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => Record<string, any>, initialValue: Record<string, any>): Record<string, any>;
+    reduce<U_1>(callbackfn: (previousValue: U_1, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => U_1, initialValue: U_1): U_1;
+    reduceRight(callbackfn: (previousValue: Record<string, any>, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => Record<string, any>): Record<string, any>;
+    reduceRight(callbackfn: (previousValue: Record<string, any>, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => Record<string, any>, initialValue: Record<string, any>): Record<string, any>;
+    reduceRight<U_2>(callbackfn: (previousValue: U_2, currentValue: Record<string, any>, currentIndex: number, array: Record<string, any>[]) => U_2, initialValue: U_2): U_2;
+    find<S_2 extends Record<string, any>>(predicate: (this: void, value: Record<string, any>, index: number, obj: Record<string, any>[]) => value is S_2, thisArg?: any): S_2;
+    find(predicate: (value: Record<string, any>, index: number, obj: Record<string, any>[]) => unknown, thisArg?: any): Record<string, any>;
+    findIndex(predicate: (value: Record<string, any>, index: number, obj: Record<string, any>[]) => unknown, thisArg?: any): number;
+    fill(value: Record<string, any>, start?: number, end?: number): Record<string, any>[];
+    copyWithin(target: number, start: number, end?: number): Record<string, any>[];
+    entries(): IterableIterator<[number, Record<string, any>]>;
+    keys(): IterableIterator<number>;
+    values(): IterableIterator<Record<string, any>>;
+    includes(searchElement: Record<string, any>, fromIndex?: number): boolean;
+    [Symbol.iterator](): IterableIterator<Record<string, any>>;
+    [Symbol.unscopables](): {
+        copyWithin: boolean;
+        entries: boolean;
+        fill: boolean;
+        find: boolean;
+        findIndex: boolean;
+        keys: boolean;
+        values: boolean;
+    };
+};
 /**
  * Pure function version of the same function in table foundation
  * This is not accessible in getDerivedStateFromProps, so fork one out