@douyinfe/semi-foundation 2.34.1-alpha.3 → 2.34.1

package/breadcrumb/breadcrumb.scss

@@ -82,14 +82,14 @@ $module: #{$prefix}-breadcrumb;
         }
     }
 
-    &-item-icon+&-item-title {
-        margin-left: $spacing-breadcrumb_item_text-marginLeft;
-    }
+    // &-item-icon+&-item-title {
+    //     margin-left: $spacing-breadcrumb_item_text-marginLeft;
+    // }
 
     &-item-link {
         display: inline-flex;
         align-items: center;
-        column-gap: 4px;
+        column-gap: $spacing-breadcrumb_item_text-marginLeft;
         text-decoration: inherit;
         transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
         transform: scale($transform_scale-breadcrumb_link-text);

package/calendar/eventUtil.ts

@@ -96,9 +96,9 @@ export interface DateObj {
     month: string
 }
 
-export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export type weekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
-export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => {
     const today = getCurrDate();
     const arr: Array<DateObj> = [];
     [...Array(rangeLen).keys()].map(ind => {
@@ -121,15 +121,17 @@ export const calcRangeData = (value: Date, start: Date, rangeLen: number, mode:
 
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export const calcWeekData = (value: Date, mode = 'week', locale: Locale, weekStartsOn: weeekStartsOnEnum) => {
+export const calcWeekData = (value: Date, monthStart: Date | null, mode = 'week', locale: Locale, weekStartsOn: weekStartsOnEnum) => {
     const start = startOfWeek(value, { weekStartsOn });
-    return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
+    const realValue = monthStart || value;
+    return calcRangeData(realValue, start, 7, mode, locale, weekStartsOn);
 };
 
 /**
@@ -250,7 +252,7 @@ export const filterEvents = (events: Map<string, EventObject[]>, start: Date, en
  * filter out event that is not in the week range
  */
 // eslint-disable-next-line max-len
-export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
+export const filterWeeklyEvents = (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weekStartsOnEnum ) => filterEvents(events, weekStart, addDays(endOfWeek(weekStart, { weekStartsOn }), 1));
 
 /**
  * @returns {arr}
@@ -309,7 +311,7 @@ export const parseWeeklyAllDayEvent = (
     startDate: Date,
     weekStart: Date,
     parsed: Array<Array<ParsedRangeEvent>>,
-    weekStartsOn: weeekStartsOnEnum
+    weekStartsOn: weekStartsOnEnum
 ) => parseRangeAllDayEvent(event, startDate, weekStart, addDays(endOfWeek(startDate, { weekStartsOn }), 1), parsed);
 
 

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;
@@ -191,7 +191,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;
     }
@@ -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;

package/card/card.scss

@@ -45,8 +45,7 @@ $module: #{$prefix}-card;
         &-wrapper {
             display: flex;
             align-items: flex-start;
-            flex-direction: row;
-            // flex-direction: row-reverse;
+            flex-direction: row-reverse;
             justify-content: space-between;
 
             &-spacing {

package/cascader/foundation.ts

@@ -92,9 +92,9 @@ export interface BasicTriggerRenderProps {
      * customized by triggerRender is updated to synchronize the state
      * with Cascader. */
     onSearch: (inputValue: string) => void;
-    /* This function is the same as onSearch (supported since v2.32.0), 
-     * because this function was used before, and to align with TreeSelect, 
-     * use onSearch instead of onChange is more suitable, 
+    /* This function is the same as onSearch (supported since v2.32.0),
+     * because this function was used before, and to align with TreeSelect,
+     * use onSearch instead of onChange is more suitable,
      * onChange needs to be deleted in the next Major
     */
     onChange: (inputValue: string) => void;
@@ -203,6 +203,7 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     updateInputValue: (value: string) => void;
     updateInputPlaceHolder: (value: string) => void;
     focusInput: () => void;
+    blurInput: () => void;
     registerClickOutsideHandler: (cb: (e: any) => void) => void;
     unregisterClickOutsideHandler: () => void;
     rePositionDropdown: () => void;
@@ -259,7 +260,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         if (multiple) {
             const valuePath: BasicValue = [];
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore 
+            // @ts-ignore
             item.forEach((checkedKey: string) => {
                 const valuePathItem = this.getItemPropPath(checkedKey, valueProp);
                 valuePath.push(valuePathItem as any);
@@ -449,7 +450,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
                 if (filterable && !multiple) {
                     const displayText = this.renderDisplayText(selectedKey, keyEntities);
                     updateStates.inputPlaceHolder = displayText;
-                    /* 
+                    /*
                      *  displayText should not be assign to inputValue,
                      *  cause inputValue should only change by user enter
                      */
@@ -484,7 +485,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
             if (filterable && !multiple) {
                 const displayText = this._defaultRenderText(valuePath);
                 updateStates.inputPlaceHolder = displayText;
-                /* 
+                /*
                  *  displayText should not be assign to inputValue,
                  *  cause inputValue should only change by user enter
                  */
@@ -555,20 +556,30 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         this._notifyBlur(e);
     }
 
+    focus() {
+        const { filterTreeNode } = this.getProps();
+        if (filterTreeNode) {
+            this._adapter.focusInput();
+        }
+        this._adapter.updateFocusState(true);
+    }
+
+    blur() {
+        const { filterTreeNode } = this.getProps();
+        if (filterTreeNode) {
+            this._adapter.blurInput();
+        }
+        this._adapter.updateFocusState(false);
+    }
+
     toggle2SearchInput(isShow: boolean) {
         if (isShow) {
-            this._adapter.toggleInputShow(isShow, () => this.focusInput());
+            this._adapter.toggleInputShow(isShow, () => this.focus());
         } else {
             this._adapter.toggleInputShow(isShow, () => undefined);
         }
     }
 
-    focusInput() {
-        this._adapter.focusInput();
-        this._adapter.updateFocusState(true);
-    }
-
-
     updateSearching = (isSearching: boolean)=>{
         this._adapter.updateStates({ isSearching: false });
     }

package/lib/cjs/breadcrumb/breadcrumb.css

@@ -54,9 +54,6 @@
 .semi-breadcrumb-item-more svg {
   vertical-align: middle;
 }
-.semi-breadcrumb-item-icon + .semi-breadcrumb-item-title {
-  margin-left: 4px;
-}
 .semi-breadcrumb-item-link {
   display: inline-flex;
   align-items: center;

package/lib/cjs/breadcrumb/breadcrumb.scss

@@ -82,14 +82,14 @@ $module: #{$prefix}-breadcrumb;
         }
     }
 
-    &-item-icon+&-item-title {
-        margin-left: $spacing-breadcrumb_item_text-marginLeft;
-    }
+    // &-item-icon+&-item-title {
+    //     margin-left: $spacing-breadcrumb_item_text-marginLeft;
+    // }
 
     &-item-link {
         display: inline-flex;
         align-items: center;
-        column-gap: 4px;
+        column-gap: $spacing-breadcrumb_item_text-marginLeft;
         text-decoration: inherit;
         transition: color $transition_duration-breadcrumb_link-text $transition-function_breadcrumb_link-text $transition_delay-breadcrumb_link-text;
         transform: scale($transform_scale-breadcrumb_link-text);

package/lib/cjs/calendar/eventUtil.d.ts

@@ -30,17 +30,18 @@ export interface DateObj {
     isSameMonth: boolean;
     month: string;
 }
-export declare type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
-export declare const calcRangeData: (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => DateObj[];
+export declare type weekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export declare const calcRangeData: (value: Date, start: Date, rangeLen: number, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => DateObj[];
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
  * create weekly object array
  */
-export declare const calcWeekData: (value: Date, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => DateObj[];
+export declare const calcWeekData: (value: Date, monthStart: Date | null, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => DateObj[];
 /**
  *
  * @param {object} event
@@ -74,7 +75,7 @@ export declare const filterEvents: (events: Map<string, EventObject[]>, start: D
  * @returns {arr}
  * filter out event that is not in the week range
  */
-export declare const filterWeeklyEvents: (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum) => Map<string, EventObject[]>;
+export declare const filterWeeklyEvents: (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weekStartsOnEnum) => Map<string, EventObject[]>;
 /**
  * @returns {arr}
  * arrange and sort all day event for a range
@@ -84,7 +85,7 @@ export declare const parseRangeAllDayEvent: (event: EventObject[], startDate: Da
  * @returns {arr}
  * arrange and sort weekly all day event
  */
-export declare const parseWeeklyAllDayEvent: (event: EventObject[], startDate: Date, weekStart: Date, parsed: Array<Array<ParsedRangeEvent>>, weekStartsOn: weeekStartsOnEnum) => ParsedRangeEvent[][];
+export declare const parseWeeklyAllDayEvent: (event: EventObject[], startDate: Date, weekStart: Date, parsed: Array<Array<ParsedRangeEvent>>, weekStartsOn: weekStartsOnEnum) => ParsedRangeEvent[][];
 export declare const collectDailyEvents: (events: ParsedRangeEvent[][]) => ParsedRangeEvent[][];
 export declare const renderDailyEvent: (event: EventObject) => {
     startPos: number;

package/lib/cjs/calendar/eventUtil.js

@@ -127,7 +127,8 @@ const calcRangeData = (value, start, rangeLen, mode, locale, weekStartsOn) => {
 };
 /**
  *
- * @param {value} date
+ * @param {Date} date
+ * @param {Date} monthStart current month start date, using for month mode
  * @param {string} mode
  * @param {string} locale
  * @returns {object[]} { date: Date, dayString: string, ind: number, isToday: boolean, isWeekend: boolean, weekday: string }
@@ -137,14 +138,15 @@ const calcRangeData = (value, start, rangeLen, mode, locale, weekStartsOn) => {
 
 exports.calcRangeData = calcRangeData;
 
-const calcWeekData = function (value) {
-  let mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'week';
-  let locale = arguments.length > 2 ? arguments[2] : undefined;
-  let weekStartsOn = arguments.length > 3 ? arguments[3] : undefined;
+const calcWeekData = function (value, monthStart) {
+  let mode = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'week';
+  let locale = arguments.length > 3 ? arguments[3] : undefined;
+  let weekStartsOn = arguments.length > 4 ? arguments[4] : undefined;
   const start = (0, _dateFns.startOfWeek)(value, {
     weekStartsOn
   });
-  return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
+  const realValue = monthStart || value;
+  return calcRangeData(realValue, start, 7, mode, locale, weekStartsOn);
 };
 /**
  *

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

@@ -1,8 +1,8 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 import { Locale } from 'date-fns';
 import { DateObj } from './eventUtil';
-import type { weeekStartsOnEnum } from './eventUtil';
-export { weeekStartsOnEnum };
+import type { weekStartsOnEnum } from './eventUtil';
+export { weekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;
     key: string;

package/lib/cjs/calendar/foundation.js

@@ -119,7 +119,7 @@ class CalendarFoundation extends _foundation.default {
       locale: dateFnsLocale,
       weekStartsOn
     });
-    data.week = (0, _eventUtil.calcWeekData)(value, 'week', dateFnsLocale, weekStartsOn);
+    data.week = (0, _eventUtil.calcWeekData)(value, null, 'week', dateFnsLocale, weekStartsOn);
 
     this._adapter.setWeeklyData(data);
 
@@ -154,7 +154,7 @@ class CalendarFoundation extends _foundation.default {
       weekStartsOn
     });
     [...Array(numberOfWeek).keys()].map(ind => {
-      data[ind] = (0, _eventUtil.calcWeekData)((0, _dateFns.addDays)(monthStart, ind * 7), 'month', dateFnsLocale, weekStartsOn);
+      data[ind] = (0, _eventUtil.calcWeekData)((0, _dateFns.addDays)(monthStart, ind * 7), monthStart, 'month', dateFnsLocale, weekStartsOn);
     });
 
     this._adapter.setMonthlyData(data);

package/lib/cjs/card/card.css

@@ -37,7 +37,7 @@
 .semi-card-header-wrapper {
   display: flex;
   align-items: flex-start;
-  flex-direction: row;
+  flex-direction: row-reverse;
   justify-content: space-between;
 }
 .semi-card-header-wrapper-spacing {

package/lib/cjs/card/card.scss

@@ -45,8 +45,7 @@ $module: #{$prefix}-card;
         &-wrapper {
             display: flex;
             align-items: flex-start;
-            flex-direction: row;
-            // flex-direction: row-reverse;
+            flex-direction: row-reverse;
             justify-content: space-between;
 
             &-spacing {

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

@@ -149,6 +149,7 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     updateInputValue: (value: string) => void;
     updateInputPlaceHolder: (value: string) => void;
     focusInput: () => void;
+    blurInput: () => void;
     registerClickOutsideHandler: (cb: (e: any) => void) => void;
     unregisterClickOutsideHandler: () => void;
     rePositionDropdown: () => void;
@@ -196,8 +197,9 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
     open(): void;
     reCalcActiveKeys(): void;
     close(e: any, key?: string): void;
+    focus(): void;
+    blur(): void;
     toggle2SearchInput(isShow: boolean): void;
-    focusInput(): void;
     updateSearching: (isSearching: boolean) => void;
     handleItemClick(e: any, item: BasicEntity | BasicData): void;
     handleItemHover(e: any, item: BasicEntity): void;

package/lib/cjs/cascader/foundation.js

@@ -79,7 +79,7 @@ class CascaderFoundation extends _foundation.default {
 
     if (multiple) {
       const valuePath = []; // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore 
+      // @ts-ignore
 
       item.forEach(checkedKey => {
         const valuePathItem = this.getItemPropPath(checkedKey, valueProp);
@@ -449,20 +449,38 @@ class CascaderFoundation extends _foundation.default {
     this._notifyBlur(e);
   }
 
+  focus() {
+    const {
+      filterTreeNode
+    } = this.getProps();
+
+    if (filterTreeNode) {
+      this._adapter.focusInput();
+    }
+
+    this._adapter.updateFocusState(true);
+  }
+
+  blur() {
+    const {
+      filterTreeNode
+    } = this.getProps();
+
+    if (filterTreeNode) {
+      this._adapter.blurInput();
+    }
+
+    this._adapter.updateFocusState(false);
+  }
+
   toggle2SearchInput(isShow) {
     if (isShow) {
-      this._adapter.toggleInputShow(isShow, () => this.focusInput());
+      this._adapter.toggleInputShow(isShow, () => this.focus());
     } else {
       this._adapter.toggleInputShow(isShow, () => undefined);
     }
   }
 
-  focusInput() {
-    this._adapter.focusInput();
-
-    this._adapter.updateFocusState(true);
-  }
-
   handleItemClick(e, item) {
     const isDisabled = this._isDisabled();
 

package/lib/cjs/radio/radio.css

@@ -301,6 +301,7 @@
 .semi-radioGroup-horizontal {
   display: inline-flex;
   flex-wrap: wrap;
+  vertical-align: bottom;
   gap: 16px;
 }
 .semi-radioGroup-buttonRadio {

package/lib/cjs/radio/radio.scss

@@ -416,6 +416,7 @@ $inner-width: $width-icon-medium;
     &-horizontal {
         display: inline-flex;
         flex-wrap: wrap;
+        vertical-align: bottom; // Fix 1573
         gap: $spacing-radio_group_horizontal-marginRight;
     }
 

package/lib/cjs/steps/bacisSteps.scss

@@ -173,7 +173,7 @@ $basicType: #{$module}-basic;
         
         transform:scale($transform_scale-step-item);
 
-        &:hover {
+        &-hover:hover {
 
             .#{$item}-title {
                 color: $color-steps_item_title-text-hover;
@@ -267,7 +267,7 @@ $basicType: #{$module}-basic;
                 }
             }
 
-            &:hover {
+            &-hover:hover {
                 .#{$item}-left {
 
                     .#{$item}-icon {

package/lib/cjs/steps/fillSteps.scss

@@ -92,7 +92,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_success-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background-color: $color-steps-bg-hover;
 
                 .#{$prefix}-icon,
@@ -118,7 +118,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_danger-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background: $color-steps-bg-hover;
 
                 .#{$prefix}-icon,
@@ -144,7 +144,7 @@ $module: #{$prefix}-steps;
                 color: $color-steps_warning-text-default;
             }
 
-            &:hover {
+            &-hover:hover {
                 background: $color-steps-bg-hover;
 
                 .#{$module}-item-title,

package/lib/cjs/steps/steps.css

@@ -64,11 +64,11 @@
 .semi-steps .semi-steps-item-finish .semi-steps-item-title {
   color: var(--semi-color-success);
 }
-.semi-steps .semi-steps-item-finish:hover {
+.semi-steps .semi-steps-item-finish-hover:hover {
   background-color: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-finish:hover .semi-icon,
-.semi-steps .semi-steps-item-finish:hover .semi-steps-item-title {
+.semi-steps .semi-steps-item-finish-hover:hover .semi-icon,
+.semi-steps .semi-steps-item-finish-hover:hover .semi-steps-item-title {
   color: var(--semi-color-success-hover);
 }
 .semi-steps .semi-steps-item-finish:active {
@@ -82,11 +82,11 @@
 .semi-steps .semi-steps-item-error .semi-steps-item-title {
   color: var(--semi-color-danger);
 }
-.semi-steps .semi-steps-item-error:hover {
+.semi-steps .semi-steps-item-error-hover:hover {
   background: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-error:hover .semi-icon,
-.semi-steps .semi-steps-item-error:hover .semi-steps-item-title {
+.semi-steps .semi-steps-item-error-hover:hover .semi-icon,
+.semi-steps .semi-steps-item-error-hover:hover .semi-steps-item-title {
   color: var(--semi-color-danger-hover);
 }
 .semi-steps .semi-steps-item-error:active {
@@ -100,11 +100,11 @@
 .semi-steps .semi-steps-item-warning .semi-icon {
   color: var(--semi-color-warning);
 }
-.semi-steps .semi-steps-item-warning:hover {
+.semi-steps .semi-steps-item-warning-hover:hover {
   background: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-warning:hover .semi-steps-item-title,
-.semi-steps .semi-steps-item-warning:hover .semi-icon {
+.semi-steps .semi-steps-item-warning-hover:hover .semi-steps-item-title,
+.semi-steps .semi-steps-item-warning-hover:hover .semi-icon {
   color: var(--semi-color-warning-hover);
 }
 .semi-steps .semi-steps-item-warning:active {
@@ -264,10 +264,10 @@
   transition: color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
   transform: scale(var(--semi-transform_scale-small));
 }
-.semi-steps-basic .semi-steps-item:hover .semi-steps-item-title {
+.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-title {
   color: var(--semi-color-focus-border);
 }
-.semi-steps-basic .semi-steps-item:hover .semi-steps-item-description {
+.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-description {
   color: var(--semi-color-focus-border);
 }
 .semi-steps-basic .semi-steps-item .semi-steps-item-container {
@@ -330,7 +330,7 @@
   background: var(--semi-color-fill-0);
   color: var(--semi-color-text-2);
 }
-.semi-steps-basic .semi-steps-item-wait:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+.semi-steps-basic .semi-steps-item-wait-hover:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
   background: var(--semi-color-secondary-light-default);
   color: var(--semi-color-focus-border);
 }

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

@@ -32,6 +32,7 @@ export interface BaseColumnProps<RecordType> {
     title?: any;
     useFullRender?: boolean;
     width?: string | number;
+    ellipsis?: BaseEllipsis;
 }
 export interface TableAdapter<RecordType> extends DefaultAdapter {
     resetScrollY: () => void;
@@ -81,6 +82,7 @@ export interface TableAdapter<RecordType> extends DefaultAdapter {
     getHandleColumns: () => (queries: BaseColumnProps<RecordType>[], cachedColumns: BaseColumnProps<RecordType>[]) => BaseColumnProps<RecordType>[];
     getMergePagination: () => (pagination: BasePagination) => BasePagination;
     setBodyHasScrollbar: (bodyHasScrollBar: boolean) => void;
+    getTableLayout: () => 'fixed' | 'auto';
 }
 declare class TableFoundation<RecordType> extends BaseFoundation<TableAdapter<RecordType>> {
     memoizedWithFnsColumns: (queries: BaseColumnProps<RecordType>[], cachedColumns: BaseColumnProps<RecordType>[], rowSelectionUpdate: boolean, hideExpandedColumn: boolean, bodyHasScrollBar: boolean) => BaseColumnProps<RecordType>[];
@@ -366,4 +368,7 @@ export interface BaseChangeInfoSorter<RecordType> {
 export declare type BaseIncludeGroupRecord<RecordType> = RecordType | {
     groupKey: string;
 };
+export declare type BaseEllipsis = boolean | {
+    showTitle: boolean;
+};
 export default TableFoundation;

package/lib/cjs/table/table.css

@@ -94,6 +94,10 @@
 .semi-table-header-sticky .semi-table-thead > .semi-table-row > .semi-table-row-head {
   background-color: var(--semi-color-bg-1);
 }
+.semi-table-operate-wrapper {
+  display: flex;
+  justify-content: flex-start;
+}
 .semi-table-body {
   overflow: auto;
   width: 100%;
@@ -119,8 +123,7 @@
   padding-top: 8px;
   padding-bottom: 8px;
   vertical-align: middle;
-  word-break: break-all;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   position: relative;
 }
 .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 {
@@ -173,6 +176,16 @@
   display: inline-flex;
   align-items: center;
 }
+.semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.semi-table-thead > .semi-table-row > .semi-table-row-head-ellipsis .semi-table-row-head-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .semi-table-thead > .semi-table-row .react-resizable {
   position: relative;
   background-clip: padding-box;
@@ -223,8 +236,7 @@
 }
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   display: table-cell;
-  word-wrap: break-word;
-  word-break: break-all;
+  overflow-wrap: break-word;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid var(--semi-color-border);
@@ -236,6 +248,11 @@
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell.resizing {
   border-right: 2px solid var(--semi-color-primary);
 }
+.semi-table-tbody > .semi-table-row > .semi-table-row-cell-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .semi-table-tbody > .semi-table-row.semi-table-row-expand > .semi-table-row-cell {
   background-color: var(--semi-color-fill-0);
 }
@@ -336,9 +353,10 @@
   text-align: center;
 }
 .semi-table .semi-table-column-sorter-wrapper {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   cursor: pointer;
+  overflow: hidden;
 }
 .semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down {
   height: 0;