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

package/lib/es/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/es/table/utils.js

@@ -510,4 +510,9 @@ export function getRTLAlign(align, direction) {
   }
 
   return align;
+}
+export function shouldShowEllipsisTitle(ellipsis) {
+  const shouldShowTitle = ellipsis === true || _get(ellipsis, 'showTitle', true);
+
+  return shouldShowTitle;
 }

package/lib/es/timePicker/foundation.js

@@ -1,3 +1,4 @@
+import _isUndefined from "lodash/isUndefined";
 import _split from "lodash/split";
 
 /* eslint-disable max-len */
@@ -359,7 +360,19 @@ class TimePickerFoundation extends BaseFoundation {
     }
 
     if (_dates && Array.isArray(_dates)) {
-      return _dates.map(date => formatToString(date, validFormat, dateFnsLocale)).join(rangeSeparator);
+      const result = _dates.map(date => {
+        let str;
+
+        if (_isUndefined(date)) {
+          str = '';
+        } else {
+          str = formatToString(date, validFormat, dateFnsLocale);
+        }
+
+        return str;
+      });
+
+      return result.join(rangeSeparator);
     }
 
     return undefined;

package/lib/es/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/es/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/es/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/es/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/es/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/es/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/navigation/itemFoundation.ts

@@ -39,9 +39,7 @@ export interface ItemAdapter<P = Record<string, any>, S = Record<string, any>> e
     notifyMouseLeave(e: any): void;
     getIsCollapsed(): boolean;
     getSelected(): boolean;
-    getIsOpen(): boolean;
-    getIsInSubNav(): boolean;
-    getMode(): string
+    getIsOpen(): boolean
 }
 
 export default class ItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<ItemAdapter<P, S>, P, S> {

package/navigation/navigation.scss

@@ -76,7 +76,7 @@ $module: #{$prefix}-navigation;
         padding: $spacing-navigation_item-paddingY $spacing-navigation_item-paddingX;
         box-sizing: border-box;
         margin-top: 0;
-        // margin-bottom: $spacing-navigation_item-marginBottom;
+        margin-bottom: $spacing-navigation_item-marginBottom;
 
         @include font-size-regular;
         font-weight: $font-navigation_item_normal-fontWeight;
@@ -257,13 +257,6 @@ $module: #{$prefix}-navigation;
         text-overflow: ellipsis;
         white-space: nowrap;
         overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        row-gap: $spacing-navigation_item-marginBottom;
-
-        &.#{$module}-sub-open {
-            margin-top: $spacing-navigation_sub_item_first_child-marginTop;
-        }
 
         .#{$module}-item {
             color: $color-navigation_itemLn-text-default;
@@ -275,9 +268,9 @@ $module: #{$prefix}-navigation;
             font-weight: $font-navigation_sub_item-fontWeight;
             width: 100%;
 
-            // &:first-child {
-            //     margin-top: $spacing-navigation_sub_item_first_child-marginTop;
-            // }
+            &:first-child {
+                margin-top: $spacing-navigation_sub_item_first_child-marginTop;
+            }
 
             & > &-text:first-child {
                 margin-left: $spacing-base-tight + $width-navigation_icon_left + $width-navigation_icon_text_between;
@@ -350,12 +343,6 @@ $module: #{$prefix}-navigation;
         transform: rotate(-180deg);
     }
 
-    &-icon-rotate-0-no-transition {
-        transform: rotate(0);
-    }
-    &-icon-rotate-180-no-transition {
-        transform: rotate(-180deg);
-    }
 }
 
 /* Header、Footer-Common */
@@ -443,12 +430,6 @@ $module: #{$prefix}-navigation;
             }
         }
 
-        &-list {
-            display: flex;
-            flex-direction: column;
-            row-gap: $spacing-navigation_item-marginBottom;
-        }
-
         &-list > .#{$module}-sub-wrap {
             & > .#{$module}-sub-title {
                 color: $color-navigation_itemL1-text-default;
@@ -502,9 +483,9 @@ $module: #{$prefix}-navigation;
         }
     }
 
-    // .#{$module}-item:last-of-type {
-    //     margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
-    // }
+    .#{$module}-item:last-of-type {
+        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
+    }
 
     .#{$module}-inner {
         flex-direction: column;
@@ -733,97 +714,4 @@ $module: #{$prefix}-navigation;
     }
 }
 
-// The following css is used for the variant generation of NavItem and NavSub in C2D
-.#{$module}-first-layer {
-    > .#{$module}-sub-title {
-        .#{$module}-item-text {
-            font-weight: 600;
-        }
-    }
-
-    > .#{$module}-item-text {
-        font-weight: 600;
-    }
-}
-
-.#{$module}-sub-title-selected {
-    .#{$module}-item-icon:first-child {
-        color: $color-navigation_itemL1_selected_icon-default;
-    }
-}
-
-.#{$module}-sub-wrap {
-    .#{$module}-sub-title {
-        margin-bottom: $spacing-navigation_sub_title-marginBottom;
-    }
-
-    .#{$module}-item:last-of-type {
-        margin-bottom: $spacing-navigation_vertical_nav_item_last-marginBottom;
-    } 
-}
-
-.#{$module}-sub-title {
-    &.#{$module}-sub-title-disabled {
-        .semi-navigation-item-text {
-            color: $color-navigation_itemL1_disabled-text-default;
-        }
-    }
-}
-
-.#{$module}-item-horizontal {
-    // The width of nav NavItem and NavSub in the horizontal direction both need fit-content
-    &.#{$module}-item { 
-        width: fit-content;
-        margin-bottom: $spacing-navigation_horizontal_nav_list_item-marginBottom;
-        margin-right: $spacing-navigation_horizontal_nav_list_item_not_last-marginRight;
-
-        &.#{$module}-item-disabled {
-            color: $color-navigation_horizontal_itemL1_disabled-text-default;
-        }
-    }
-
-    .#{$module}-sub-title {
-        .#{$module}-item-icon:first-child,
-        .#{$module}-item-text {
-            color: var(--semi-color-text-2);
-            background-color: transparent;
-        }
-
-        &.#{$module}-sub-title-selected {
-            .#{$module}-item-icon:first-child,
-            .#{$module}-item-text {
-                color: $color-navigation_horizontal_itemL1_selected-text-default;
-            }
-        }
-
-        &.#{$module}-sub-title-disabled {
-            .#{$module}-item-icon:first-child,
-            .#{$module}-item-text {
-                color: $color-navigation_horizontal_itemL1_disabled-text-default;
-            }
-        }
-    }
-
-    &.#{$module}-first-layer {
-        color: $color-navigation_horizontal_itemL1-text-default;
-    }
-
-    &.#{$module}-item-selected {
-        background-color: $color-navigation_horizontal_itemL1_selected-bg-default;
-
-        .#{$module}-item-icon:first-child,
-        .#{$module}-item-text {
-            color: $color-navigation_horizontal_itemL1_selected-text-default;
-        }
-    }
-
-    .semi-navigation-item-icon:first-child {
-        margin-right: $spacing-navigation_horizontal_icon_last-marginLeft;
-    }
-
-    .semi-navigation-item-icon:last-child {
-        margin-left: $spacing-navigation_horizontal_icon_first-marginRight;
-    }
-}
-
 @import "./rtl.scss";

package/navigation/subNavFoundation.ts

@@ -37,9 +37,7 @@ export interface SubNavAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyGlobalOnSelect(data: OnSelectData): void;
     notifyGlobalOnClick(data: OnClickData): void;
     getIsSelected(itemKey: string | number): boolean;
-    getIsOpen(): boolean;
-    getIsCollapsed(): boolean;
-    getMode(): string
+    getIsOpen(): boolean
 }
 
 export default class SubNavFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<SubNavAdapter<P, S>, P, S> {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-foundation",
-    "version": "2.34.0-alpha.1",
+    "version": "2.34.0",
     "description": "",
     "scripts": {
         "build:lib": "node ./scripts/compileLib.js",
@@ -23,7 +23,7 @@
         "*.scss",
         "*.css"
     ],
-    "gitHead": "8990c51afec33fcfc2f89234082597e484513756",
+    "gitHead": "2b01016b32a9da9a7e50424235dd5fc5c5fae3c2",
     "devDependencies": {
         "@babel/plugin-transform-runtime": "^7.15.8",
         "@babel/preset-env": "^7.15.8",

package/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;
     }