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

package/lib/cjs/table/table.scss

@@ -83,11 +83,6 @@ $module: #{$prefix}-table;
         }
     }
 
-    &-operate-wrapper {
-        display: flex;
-        justify-content: flex-start;
-    }
-
     &-body {
         overflow: auto;
         width: 100%;
@@ -120,9 +115,8 @@ $module: #{$prefix}-table;
                 padding-top: $spacing-table_row_head-paddingY;
                 padding-bottom: $spacing-table_row_head-paddingY;
                 vertical-align: middle;
-                overflow-wrap: break-word;
-                // word-break: break-all;
-                // word-wrap: break-word;
+                word-break: break-all;
+                word-wrap: break-word;
                 position: relative;
 
                 &.#{$module}-cell-fixed {
@@ -183,14 +177,6 @@ $module: #{$prefix}-table;
                     display: inline-flex;
                     align-items: center;
                 }
-
-                &-ellipsis {
-                    @include text-overflow-hidden;
-
-                    .#{$module}-row-head-title {
-                        @include text-overflow-hidden;
-                    }
-                }
             }
 
             .react-resizable {
@@ -255,9 +241,8 @@ $module: #{$prefix}-table;
 
             & > .#{$module}-row-cell {
                 display: table-cell;
-                overflow-wrap: break-word;
-                // word-wrap: break-word;
-                // word-break: break-all;
+                word-wrap: break-word;
+                word-break: break-all;
                 border-left: none;
                 border-right: none;
                 border-bottom: $width-table_base_border $border-table_base-borderStyle $color-table-border-default;
@@ -269,10 +254,6 @@ $module: #{$prefix}-table;
                 &.resizing {
                     border-right: $width-table_resizer_border solid $color-table_resizer-bg-default;
                 }
-
-                &-ellipsis {
-                    @include text-overflow-hidden;
-                }
             }
             &.#{$module}-row {
                 &-expand {
@@ -420,10 +401,9 @@ $module: #{$prefix}-table;
             text-align: center;
 
             &-wrapper {
-                display: flex;
+                display: inline-flex;
                 align-items: center;
                 cursor: pointer;
-                overflow: hidden;
             }
 
             &-up,

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

@@ -1,5 +1,4 @@
 import { strings } from './constants';
-import type { BaseEllipsis } from './foundation';
 export declare function equalWith(value: any, other: any, customizer?: (...args: any[]) => boolean): boolean;
 export declare function getColumnKey(column: any, keyPropNames: any[]): any;
 /**
@@ -152,4 +151,3 @@ export declare function isTreeTable({ dataSource, childrenRecordName }: {
     childrenRecordName?: string;
 }): boolean;
 export declare function getRTLAlign(align: typeof strings.ALIGNS[number], direction?: 'ltr' | 'rtl'): typeof strings.ALIGNS[number];
-export declare function shouldShowEllipsisTitle(ellipsis: BaseEllipsis): any;

package/lib/cjs/table/utils.js

@@ -38,7 +38,6 @@ exports.isSelected = isSelected;
 exports.isSelectionColumn = isSelectionColumn;
 exports.isTreeTable = isTreeTable;
 exports.mergeQueries = mergeQueries;
-exports.shouldShowEllipsisTitle = shouldShowEllipsisTitle;
 exports.sliceColumnsByLevel = sliceColumnsByLevel;
 exports.warnIfNoDataIndex = warnIfNoDataIndex;
 exports.withResizeWidth = withResizeWidth;
@@ -593,9 +592,4 @@ function getRTLAlign(align, direction) {
   }
 
   return align;
-}
-
-function shouldShowEllipsisTitle(ellipsis) {
-  const shouldShowTitle = ellipsis === true || (0, _get2.default)(ellipsis, 'showTitle', true);
-  return shouldShowTitle;
 }

package/lib/cjs/timePicker/foundation.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
-
 var _split2 = _interopRequireDefault(require("lodash/split"));
 
 var _constants = require("./constants");
@@ -376,19 +374,7 @@ class TimePickerFoundation extends _foundation.default {
     }
 
     if (_dates && Array.isArray(_dates)) {
-      const result = _dates.map(date => {
-        let str;
-
-        if ((0, _isUndefined2.default)(date)) {
-          str = '';
-        } else {
-          str = (0, _utils.formatToString)(date, validFormat, dateFnsLocale);
-        }
-
-        return str;
-      });
-
-      return result.join(rangeSeparator);
+      return _dates.map(date => (0, _utils.formatToString)(date, validFormat, dateFnsLocale)).join(rangeSeparator);
     }
 
     return undefined;

package/lib/cjs/typography/typography.css

@@ -98,19 +98,11 @@
   -webkit-box-orient: vertical;
   overflow: hidden;
 }
-.semi-typography-ellipsis-multiple-line.semi-typography-ellipsis-multiple-line-text {
-  display: -webkit-inline-box;
-}
 .semi-typography-ellipsis-overflow-ellipsis {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-.semi-typography-ellipsis-overflow-ellipsis.semi-typography-ellipsis-overflow-ellipsis-text {
-  display: inline-block;
-  max-width: 100%;
-  vertical-align: top;
-}
 .semi-typography-ellipsis-expand {
   display: inline;
   margin-left: 8px;

package/lib/cjs/typography/typography.scss

@@ -123,25 +123,12 @@ $module: #{$prefix}-typography;
         display: -webkit-box;
         -webkit-box-orient: vertical;
         overflow: hidden;
-
-        &.#{$module}-ellipsis-multiple-line-text {
-            // inline-block only works in the Text component, keeping the original external inline performance
-            display: -webkit-inline-box;
-        }
     }
 
     &-ellipsis-overflow-ellipsis {
         display: block;
         white-space: nowrap;
         text-overflow: ellipsis;
-
-        &.#{$module}-ellipsis-overflow-ellipsis-text {
-            // inline-block only works in the Text component, keeping the original external inline performance
-            display: inline-block;
-            // Ensure that Text component can be limited by the parent's width when no specific width is set
-            max-width: 100%;
-            vertical-align: top;
-        }
     }
 
     &-ellipsis-expand {

package/lib/es/breadcrumb/breadcrumb.css

@@ -54,6 +54,9 @@
 .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/es/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: $spacing-breadcrumb_item_text-marginLeft;
+        column-gap: 4px;
         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/es/calendar/eventUtil.d.ts

@@ -30,18 +30,17 @@ export interface DateObj {
     isSameMonth: boolean;
     month: string;
 }
-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[];
+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[];
 /**
  *
- * @param {Date} date
- * @param {Date} monthStart current month start date, using for month mode
+ * @param {value} date
  * @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, monthStart: Date | null, mode: string, locale: Locale, weekStartsOn: weekStartsOnEnum) => DateObj[];
+export declare const calcWeekData: (value: Date, mode: string, locale: Locale, weekStartsOn: weeekStartsOnEnum) => DateObj[];
 /**
  *
  * @param {object} event
@@ -75,7 +74,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: weekStartsOnEnum) => Map<string, EventObject[]>;
+export declare const filterWeeklyEvents: (events: Map<string, EventObject[]>, weekStart: Date, weekStartsOn: weeekStartsOnEnum) => Map<string, EventObject[]>;
 /**
  * @returns {arr}
  * arrange and sort all day event for a range
@@ -85,7 +84,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: weekStartsOnEnum) => ParsedRangeEvent[][];
+export declare const parseWeeklyAllDayEvent: (event: EventObject[], startDate: Date, weekStart: Date, parsed: Array<Array<ParsedRangeEvent>>, weekStartsOn: weeekStartsOnEnum) => ParsedRangeEvent[][];
 export declare const collectDailyEvents: (events: ParsedRangeEvent[][]) => ParsedRangeEvent[][];
 export declare const renderDailyEvent: (event: EventObject) => {
     startPos: number;

package/lib/es/calendar/eventUtil.js

@@ -96,23 +96,21 @@ export const calcRangeData = (value, start, rangeLen, mode, locale, weekStartsOn
 };
 /**
  *
- * @param {Date} date
- * @param {Date} monthStart current month start date, using for month mode
+ * @param {value} date
  * @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 = 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;
+export 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 start = startOfWeek(value, {
     weekStartsOn
   });
-  const realValue = monthStart || value;
-  return calcRangeData(realValue, start, 7, mode, locale, weekStartsOn);
+  return calcRangeData(value, start, 7, mode, locale, weekStartsOn);
 };
 /**
  *

package/lib/es/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 { weekStartsOnEnum } from './eventUtil';
-export { weekStartsOnEnum };
+import type { weeekStartsOnEnum } from './eventUtil';
+export { weeekStartsOnEnum };
 export interface EventObject {
     [x: string]: any;
     key: string;

package/lib/es/calendar/foundation.js

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

package/lib/es/card/card.css

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

package/lib/es/card/card.scss

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

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

@@ -149,7 +149,6 @@ 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;
@@ -197,9 +196,8 @@ 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/es/cascader/foundation.js

@@ -55,7 +55,7 @@ export default class CascaderFoundation extends BaseFoundation {
 
     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);
@@ -425,38 +425,20 @@ export default class CascaderFoundation extends BaseFoundation {
     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.focus());
+      this._adapter.toggleInputShow(isShow, () => this.focusInput());
     } else {
       this._adapter.toggleInputShow(isShow, () => undefined);
     }
   }
 
+  focusInput() {
+    this._adapter.focusInput();
+
+    this._adapter.updateFocusState(true);
+  }
+
   handleItemClick(e, item) {
     const isDisabled = this._isDisabled();
 

package/lib/es/radio/radio.css

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

package/lib/es/radio/radio.scss

@@ -416,7 +416,6 @@ $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/es/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/es/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/es/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:hover {
+.semi-steps .semi-steps-item-finish:hover {
   background-color: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-finish-hover:hover .semi-icon,
-.semi-steps .semi-steps-item-finish-hover:hover .semi-steps-item-title {
+.semi-steps .semi-steps-item-finish:hover .semi-icon,
+.semi-steps .semi-steps-item-finish: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:hover {
+.semi-steps .semi-steps-item-error:hover {
   background: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-error-hover:hover .semi-icon,
-.semi-steps .semi-steps-item-error-hover:hover .semi-steps-item-title {
+.semi-steps .semi-steps-item-error:hover .semi-icon,
+.semi-steps .semi-steps-item-error: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:hover {
+.semi-steps .semi-steps-item-warning:hover {
   background: var(--semi-color-fill-0);
 }
-.semi-steps .semi-steps-item-warning-hover:hover .semi-steps-item-title,
-.semi-steps .semi-steps-item-warning-hover:hover .semi-icon {
+.semi-steps .semi-steps-item-warning:hover .semi-steps-item-title,
+.semi-steps .semi-steps-item-warning: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:hover .semi-steps-item-title {
+.semi-steps-basic .semi-steps-item:hover .semi-steps-item-title {
   color: var(--semi-color-focus-border);
 }
-.semi-steps-basic .semi-steps-item-hover:hover .semi-steps-item-description {
+.semi-steps-basic .semi-steps-item: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:hover .semi-steps-item-left .semi-steps-item-icon .semi-steps-item-number-icon {
+.semi-steps-basic .semi-steps-item-wait: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/es/table/foundation.d.ts

@@ -32,7 +32,6 @@ export interface BaseColumnProps<RecordType> {
     title?: any;
     useFullRender?: boolean;
     width?: string | number;
-    ellipsis?: BaseEllipsis;
 }
 export interface TableAdapter<RecordType> extends DefaultAdapter {
     resetScrollY: () => void;
@@ -82,7 +81,6 @@ 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>[];
@@ -368,7 +366,4 @@ export interface BaseChangeInfoSorter<RecordType> {
 export declare type BaseIncludeGroupRecord<RecordType> = RecordType | {
     groupKey: string;
 };
-export declare type BaseEllipsis = boolean | {
-    showTitle: boolean;
-};
 export default TableFoundation;

package/lib/es/table/table.css

@@ -94,10 +94,6 @@
 .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%;
@@ -123,7 +119,8 @@
   padding-top: 8px;
   padding-bottom: 8px;
   vertical-align: middle;
-  overflow-wrap: break-word;
+  word-break: break-all;
+  word-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 {
@@ -176,16 +173,6 @@
   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;
@@ -236,7 +223,8 @@
 }
 .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   display: table-cell;
-  overflow-wrap: break-word;
+  word-wrap: break-word;
+  word-break: break-all;
   border-left: none;
   border-right: none;
   border-bottom: 1px solid var(--semi-color-border);
@@ -248,11 +236,6 @@
 .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);
 }
@@ -353,10 +336,9 @@
   text-align: center;
 }
 .semi-table .semi-table-column-sorter-wrapper {
-  display: flex;
+  display: inline-flex;
   align-items: center;
   cursor: pointer;
-  overflow: hidden;
 }
 .semi-table .semi-table-column-sorter-up, .semi-table .semi-table-column-sorter-down {
   height: 0;