@douyinfe/semi-foundation 2.34.0-alpha.1 → 2.34.0

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

@@ -1,4 +1,5 @@
 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;
 /**
@@ -151,3 +152,4 @@ 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,6 +38,7 @@ exports.isSelected = isSelected;
 exports.isSelectionColumn = isSelectionColumn;
 exports.isTreeTable = isTreeTable;
 exports.mergeQueries = mergeQueries;
+exports.shouldShowEllipsisTitle = shouldShowEllipsisTitle;
 exports.sliceColumnsByLevel = sliceColumnsByLevel;
 exports.warnIfNoDataIndex = warnIfNoDataIndex;
 exports.withResizeWidth = withResizeWidth;
@@ -592,4 +593,9 @@ 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,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+
 var _split2 = _interopRequireDefault(require("lodash/split"));
 
 var _constants = require("./constants");
@@ -374,7 +376,19 @@ class TimePickerFoundation extends _foundation.default {
     }
 
     if (_dates && Array.isArray(_dates)) {
-      return _dates.map(date => (0, _utils.formatToString)(date, validFormat, dateFnsLocale)).join(rangeSeparator);
+      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 undefined;

package/lib/cjs/timeline/timeline.css

@@ -126,42 +126,6 @@
   width: calc(100% - 28px);
 }
 
-.semi-timeline-item-alternate .semi-timeline-item-tail, .semi-timeline-item-alternate .semi-timeline-item-head, .semi-timeline-item-alternate .semi-timeline-item-head-custom, .semi-timeline-item-mode-right .semi-timeline-item-tail, .semi-timeline-item-mode-right .semi-timeline-item-head, .semi-timeline-item-mode-right .semi-timeline-item-head-custom, .semi-timeline-item-center .semi-timeline-item-tail, .semi-timeline-item-center .semi-timeline-item-head, .semi-timeline-item-center .semi-timeline-item-head-custom {
-  left: 50%;
-}
-.semi-timeline-item-alternate .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-item-mode-right .semi-timeline-item-head.semi-timeline-item-head-custom, .semi-timeline-item-center .semi-timeline-item-head.semi-timeline-item-head-custom {
-  margin-left: 0;
-}
-.semi-timeline-item-alternate .semi-timeline-item-head, .semi-timeline-item-mode-right .semi-timeline-item-head, .semi-timeline-item-center .semi-timeline-item-head {
-  margin-left: -4px;
-}
-.semi-timeline-item-alternate.semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-item-mode-right.semi-timeline-item-left .semi-timeline-item-content, .semi-timeline-item-center.semi-timeline-item-left .semi-timeline-item-content {
-  left: calc(50% - 4px);
-  width: calc(50% - 14px);
-  text-align: left;
-}
-.semi-timeline-item-alternate.semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-content, .semi-timeline-item-center.semi-timeline-item-right .semi-timeline-item-content {
-  width: calc(50% - 20px);
-  margin: 0;
-  text-align: right;
-}
-.semi-timeline-item-alternate.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-mode-right.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-center.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail, .semi-timeline-item-left.semi-timeline-item.semi-timeline-item-not-last-child > .semi-timeline-item-tail {
-  border-left: 1px solid var(--semi-color-text-3);
-}
-.semi-timeline-item-center .semi-timeline-item-content-time {
-  position: absolute;
-  top: -2px;
-  margin-left: calc(-40px - 100%);
-  width: 100%;
-  text-align: right;
-}
-.semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-tail, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-head, .semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-head-custom {
-  left: calc(100% - 9px);
-}
-.semi-timeline-item-mode-right.semi-timeline-item-right .semi-timeline-item-content {
-  width: calc(100% - 28px);
-}
-
 .semi-rtl .semi-timeline,
 .semi-portal-rtl .semi-timeline {
   direction: rtl;

package/lib/cjs/timeline/timeline.scss

@@ -2,68 +2,6 @@
 
 $module: #{$prefix}-timeline;
 
-@mixin item-children {
-    &-tail,
-    &-head,
-    &-head-custom {
-        left: $spacing-timeline_item_head_custom-left;
-    }
-    &-head{
-        &.#{$module}-item-head-custom{
-            margin-left: 0;
-        }
-    }
-    &-head {
-        margin-left: $spacing-timeline_item_head-marginLeft;
-    }
-}
-
-@mixin item-direction {
-    &-left {
-        .#{$module}-item-content {
-            left: $spacing-timeline_item_left_item_content-left;
-            width: $width-timeline_item_left_item_content;
-            text-align: left;
-        }
-    }
-
-    &-right {
-        .#{$module}-item-content {
-            width: $width-timeline_item_right_item_content;
-            margin: $spacing-timeline_item_right_item_content;
-            text-align: right;
-        }
-    }
-}
-
-@mixin item-center {
-    &-center {
-        .#{$module}-item {
-            &-content-time {
-                position: absolute;
-                top: $spacing-timeline_time-top;
-                margin-left: $spacing-timeline_item_content_time-marginLeft;
-                width: $width-timeline_item_content_time;
-                text-align: right;
-            }
-        }
-    }
-}
-
-@mixin item-right {
-    .#{$module}-item {
-        &-tail,
-        &-head,
-        &-head-custom {
-            left: $spacing-timeline_item_right_item-left;
-        }
-
-        &-content {
-            width: $width-timeline_item_right_content;
-        }
-    }
-}
-
 .#{$module} {
     margin: $spacing-timeline-margin;
     padding: $spacing-timeline-padding;
@@ -177,53 +115,65 @@ $module: #{$prefix}-timeline;
     &-right,
     &-center {
         .#{$module}-item {
-            @include item-children;
-            @include item-direction;
-        }
-    }
+            &-tail,
+            &-head,
+            &-head-custom {
+                left: $spacing-timeline_item_head_custom-left;
+            }
+            &-head{
+                &.#{$module}-item-head-custom{
+                    margin-left: 0;
+                }
+            }
+            &-head {
+                margin-left: $spacing-timeline_item_head-marginLeft;
+            }
 
-   
-    @include item-center;
+            &-left {
+                .#{$module}-item-content {
+                    left: $spacing-timeline_item_left_item_content-left;
+                    width: $width-timeline_item_left_item_content;
+                    text-align: left;
+                }
+            }
 
-    &-right {
-        .#{$module}-item-right {
-            @include item-right;
+            &-right {
+                .#{$module}-item-content {
+                    width: $width-timeline_item_right_item_content;
+                    margin: $spacing-timeline_item_right_item_content;
+                    text-align: right;
+                }
+            }
         }
     }
-}
 
-// for c2d
-.#{$module}-item {
-    &-alternate,
-    &-mode-right,
     &-center {
         .#{$module}-item {
-            @include item-children;
-        }
-        &.#{$module}-item {
-            @include item-direction;
-        }
-    }
-
-    &-alternate,
-    &-mode-right,
-    &-center,
-    &-left {
-        &.#{$module}-item {
-            &.#{$module}-item-not-last-child {
-                & > .#{$module}-item-tail {
-                    border-left: $width-timeline_tail-border solid $color-timeline_tail-border;
-                }
+            &-content-time {
+                position: absolute;
+                top: $spacing-timeline_time-top;
+                margin-left: $spacing-timeline_item_content_time-marginLeft;
+                width: $width-timeline_item_content_time;
+                text-align: right;
             }
         }
     }
 
-    @include item-center;
+    &-right {
+        .#{$module}-item-right {
+            .#{$module}-item {
+                &-tail,
+                &-head,
+                &-head-custom {
+                    left: $spacing-timeline_item_right_item-left;
+                }
 
-    &-mode-right {
-        &.#{$module}-item-right {
-            @include item-right;
+                &-content {
+                    width: $width-timeline_item_right_content;
+                }
+            }
         }
     }
 }
+
 @import './rtl.scss';

package/lib/cjs/tree/treeUtil.d.ts

@@ -75,6 +75,6 @@ export declare function getValueOrKey(data: any): any;
 export declare function normalizeValue(value: any, withObject: boolean): any;
 export declare function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntities): string[];
 export declare function calcDisabledKeys(keyEntities: KeyEntities): Set<string>;
-export declare function calcDropRelativePosition(event: any, treeNode: any): 0 | 1 | -1;
+export declare function calcDropRelativePosition(event: any, treeNode: any): 1 | -1 | 0;
 export declare function getDragNodesKeys(key: string, keyEntities: KeyEntities): string[];
 export declare function calcDropActualPosition(pos: string, relativeDropPos: any): any;

package/lib/cjs/typography/typography.css

@@ -98,11 +98,19 @@
   -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,12 +123,25 @@ $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/cjs/upload/constants.d.ts

@@ -18,7 +18,7 @@ declare const strings: {
     DRAG_AREA_ILLEGAL: string;
     TRIGGER_AUTO: "auto";
     TRIGGER_CUSTOM: "custom";
-    UPLOAD_TRIGGER: ("custom" | "auto")[];
+    UPLOAD_TRIGGER: ("auto" | "custom")[];
     VALIDATE_STATUS: readonly ["default", "error", "warning", "success"];
     PROMPT_POSITION: readonly ["left", "right", "bottom"];
 };

package/lib/es/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/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: 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/es/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/es/calendar/eventUtil.js

@@ -96,21 +96,23 @@ export 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 }
  * create weekly object array
  */
 
-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;
+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;
   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);
 };
 /**
  *

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 { weeekStartsOnEnum } from './eventUtil';
-export { weeekStartsOnEnum };
+import type { weekStartsOnEnum } from './eventUtil';
+export { weekStartsOnEnum };
 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, 'week', dateFnsLocale, weekStartsOn);
+    data.week = calcWeekData(value, null, '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), 'month', dateFnsLocale, weekStartsOn);
+      data[ind] = calcWeekData(addDays(monthStart, ind * 7), monthStart, 'month', dateFnsLocale, weekStartsOn);
     });
 
     this._adapter.setMonthlyData(data);

package/lib/es/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/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,20 +425,38 @@ 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.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/es/navigation/itemFoundation.d.ts

@@ -34,8 +34,6 @@ export interface ItemAdapter<P = Record<string, any>, S = Record<string, any>> e
     getIsCollapsed(): boolean;
     getSelected(): boolean;
     getIsOpen(): boolean;
-    getIsInSubNav(): boolean;
-    getMode(): string;
 }
 export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ItemAdapter<P, S>, P, S> {
     _timer: number;