@douyinfe/semi-foundation 2.30.0-alpha.0 → 2.30.0

package/steps/fillSteps.scss

@@ -1,204 +1,198 @@
 $module: #{$prefix}-steps;
-$fill: #{$module}-item-fill;
-
-@mixin steps-item {
-    @include box-sizing;
-    display: flex;
-    height: $height-steps_item;
-    position: relative;
-    overflow: hidden;
-    margin-right: $spacing-steps_item-marginRight;
-    border: $width-steps_item-border solid $color-steps-border-default;
-    border-radius: $radius-steps_item;
-    padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
-    transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
-    transform:scale($transform_scale-step-item);
-    transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
-    
-    .#{$module}-item-title {
-        position: relative;
-        // display: inline-block;
-        @include font-size-header-5;
-        font-weight: $font-weight-bold;
-        width: $width-steps_item_title;
-        @include text-overflow-hidden;
-        color: $color-steps_main-text-default;
-        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
-                    
+
+.#{$module} {
+    .#{$prefix}-col {
+        flex: 1;
     }
 
-    .#{$module}-item-description {
-        @include font-size-regular;
-        color: $color-steps_minor-text-default;
-        width: $width-steps_item_description;
-        @include text-overflow-hidden;
+    &-vertical {
+        .#{$prefix}-row-flex {
+            flex-direction: column;
+        }
     }
 
-    &-process {
-        background-color: $color-steps_process-bg-default;
+    // .#{$module}-horizontal {
+    //     .#{$module}-item-title {
+    //         &-text {
+    //             position: relative;
+    //             &::after {
+    //                 content: '';
+    //                 display: block;
+    //                 width: 9999px;
+    //                 height: 1px;
+    //                 position: absolute;
+    //                 top: 12px;
+    //                 left: 120%;
+    //                 background-color: var(--semi-color-border);
+    //             }
+    //         }
+    //     }
+    // }
 
-        .#{$module}-item-left:not(.#{$module}-item-icon) {
-            background: $color-steps_primary-bg-default;
+    .#{$module}-item {
+        @include box-sizing;
+        display: flex;
+        height: $height-steps_item;
+        position: relative;
+        overflow: hidden;
+        margin-right: $spacing-steps_item-marginRight;
+        border: $width-steps_item-border solid $color-steps-border-default;
+        border-radius: $radius-steps_item;
+        padding: $spacing-steps_item-paddingY $spacing-steps_item-paddingX;
+        transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text; // item 字体颜色动效
+        transform:scale($transform_scale-step-item);
+        transition: background-color $transition_duration-steps_item-backgroundColor $transition_function-steps_item_backgroundColor $transition_delay-steps_item_backgroundColor; //step backgroundColor 的transition变化
+        
+        .#{$module}-item-title {
+            position: relative;
+            // display: inline-block;
+            @include font-size-header-5;
+            font-weight: $font-weight-bold;
+            width: $width-steps_item_title;
+            @include text-overflow-hidden;
+            color: $color-steps_main-text-default;
+            transition: color $transition_duration-steps_item_title-text $transition_function-steps_item_title-text $transition_delay-steps_item_title-text
+                     
         }
 
-        .#{$module}-item-title,
-        .#{$module}-item-icon {
-            color: $color-steps_primary-icon-default;
+        .#{$module}-item-description {
+            @include font-size-regular;
+            color: $color-steps_minor-text-default;
+            width: $width-steps_item_description;
+            @include text-overflow-hidden;
         }
-    }
 
-    &-wait {
-        .#{$module}-item-left:not(.#{$module}-item-icon) {
-            background: $color-steps-bg-default;
-        }
+        &-process {
+            background-color: $color-steps_process-bg-default;
 
-        .#{$module}-item-icon {
-            color: $color-steps-icon-default;
+            .#{$module}-item-left:not(.#{$module}-item-icon) {
+                background: $color-steps_primary-bg-default;
+            }
+
+            .#{$module}-item-title,
+            .#{$module}-item-icon {
+                color: $color-steps_primary-icon-default;
+            }
         }
-    }
 
-    &-finish {
+        &-wait {
+            .#{$module}-item-left:not(.#{$module}-item-icon) {
+                background: $color-steps-bg-default;
+            }
 
-        .#{$prefix}-icon,
-        .#{$module}-item-title {
-            color: $color-steps_success-text-default;
+            .#{$module}-item-icon {
+                color: $color-steps-icon-default;
+            }
         }
 
-        &:hover {
-            background-color: $color-steps-bg-hover;
+        &-finish {
 
             .#{$prefix}-icon,
             .#{$module}-item-title {
-                color: $color-steps_success-text-hover;
+                color: $color-steps_success-text-default;
             }
-        }
 
-        &:active {
-            background-color: $color-steps-bg-active;
+            &:hover {
+                background-color: $color-steps-bg-hover;
 
-            .#{$prefix}-icon,
-            .#{$module}-item-title {
-                color: $color-steps_success-text-active;
+                .#{$prefix}-icon,
+                .#{$module}-item-title {
+                    color: $color-steps_success-text-hover;
+                }
             }
-        }
-    }
 
-    &-error {
+            &:active {
+                background-color: $color-steps-bg-active;
 
-        .#{$prefix}-icon,
-        .#{$module}-item-title {
-            color: $color-steps_danger-text-default;
+                .#{$prefix}-icon,
+                .#{$module}-item-title {
+                    color: $color-steps_success-text-active;
+                }
+            }
         }
 
-        &:hover {
-            background: $color-steps-bg-hover;
+        &-error {
 
             .#{$prefix}-icon,
             .#{$module}-item-title {
-                color: $color-steps_danger-text-hover;
+                color: $color-steps_danger-text-default;
             }
-        }
 
-        &:active {
-            background-color: $color-steps-bg-active;
+            &:hover {
+                background: $color-steps-bg-hover;
 
-            .#{$prefix}-icon,
-            .#{$module}-item-title {
-                color: $color-steps_danger-text-active;
+                .#{$prefix}-icon,
+                .#{$module}-item-title {
+                    color: $color-steps_danger-text-hover;
+                }
             }
-        }
-    }
 
-    &-warning {
+            &:active {
+                background-color: $color-steps-bg-active;
 
-        .#{$module}-item-title,
-        .#{$prefix}-icon {
-            color: $color-steps_warning-text-default;
+                .#{$prefix}-icon,
+                .#{$module}-item-title {
+                    color: $color-steps_danger-text-active;
+                }
+            }
         }
 
-        &:hover {
-            background: $color-steps-bg-hover;
+        &-warning {
 
             .#{$module}-item-title,
             .#{$prefix}-icon {
-                color: $color-steps_warning-text-hover;
+                color: $color-steps_warning-text-default;
             }
-        }
 
-        &:active {
-            background-color: $color-steps-bg-active;
+            &:hover {
+                background: $color-steps-bg-hover;
 
-            .#{$module}-item-title,
-            .#{$prefix}-icon {
-                color: $color-steps_warning-text-active;
+                .#{$module}-item-title,
+                .#{$prefix}-icon {
+                    color: $color-steps_warning-text-hover;
+                }
             }
-        }
-    }
 
-    &-clickable {
-        cursor: pointer;
-    }
-    
-};
-
-@mixin steps-item-left {
-    &-left {
-        width: $width-steps_item_left;
-        height: $height-steps_item_left;
-        line-height: $font-steps_item_left-lineHeight;
-        text-align: center;
-        border-radius: $radius-steps_item_left;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        @include font-size-header-4;
-        font-weight: $font-weight-bold;
-        flex-grow: 0;
-
-        &.#{$module}-item-plain {
-            color: $color-steps-text-default;
+            &:active {
+                background-color: $color-steps-bg-active;
+
+                .#{$module}-item-title,
+                .#{$prefix}-icon {
+                    color: $color-steps_warning-text-active;
+                }
+            }
         }
 
-        &-process {
-            background: $color-steps_process-bg-default;
+        &-clickable {
+            cursor: pointer;
         }
-    }
-}
 
-@mixin steps-item-content {
-    &-content {
-        margin-left: $spacing-steps_item_content-marginLeft;
-        flex: 1;
-        overflow: hidden;
-    }
-}
+        &-left {
+            width: $width-steps_item_left;
+            height: $height-steps_item_left;
+            line-height: $font-steps_item_left-lineHeight;
+            text-align: center;
+            border-radius: $radius-steps_item_left;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            @include font-size-header-4;
+            font-weight: $font-weight-bold;
+            flex-grow: 0;
 
-.#{$module} {
-    .#{$prefix}-col {
-        flex: 1;
-    }
+            &.#{$module}-item-plain {
+                color: $color-steps-text-default;
+            }
 
-    &-vertical {
-        .#{$prefix}-row-flex {
-            flex-direction: column;
+            &-process {
+                background: $color-steps_process-bg-default;
+            }
         }
-    }
-
-    .#{$module}-item {
-        @include steps-item;
-        @include steps-item-left;
-        @include steps-item-content;
-    }
-}
 
-// 以下 css 用于 C2D 中变体生成
-.#{$fill} {
-    &.#{$module}-item {
-        @include steps-item;
-    }
-
-    .#{$module}-item {
-        @include steps-item-left;
-        @include steps-item-content;
+        &-content {
+            margin-left: $spacing-steps_item_content-marginLeft;
+            flex: 1;
+            overflow: hidden;
+        }
     }
 }

package/steps/navSteps.scss

@@ -1,83 +1,63 @@
 $module: #{$prefix}-steps;
 $item: #{$module}-item;
 $basicType: #{$module}-nav;
-$navItem: #{$item}-nav;
 
-@mixin steps-nav-item {
-    @include box-sizing;
+.#{$basicType} {
+    display: inline-flex;
+    flex-flow: row nowrap;
+
+    .#{$item} {
+        @include box-sizing;
         
-    &:last-child {
-        flex: none;
+        &:last-child {
+            flex: none;
 
-        .#{$item}-content {
-            width: auto;
+            .#{$item}-content {
+                width: auto;
+            }
         }
-    }
 
-    .#{$item}-container {
-        display: flex;
-        align-items: center;
-        color: $color-steps_nav_item_container-text;
+        .#{$item}-container {
+            display: flex;
+            align-items: center;
+            color: $color-steps_nav_item_container-text;
+
+            .#{$item}-icon {
+                display: inline-flex;
+                flex: 1;
+                justify-content: center;
+                color: $color-steps_nav_item-icon;
+                min-width: $width-steps_nav_item_icon-minWidth;
+            }
+        }
 
-        .#{$item}-icon {
-            display: inline-flex;
+        .#{$item}-content {
             flex: 1;
-            justify-content: center;
-            color: $color-steps_nav_item-icon;
-            min-width: $width-steps_nav_item_icon-minWidth;
+            display: inline-block;
         }
-    }
-
-    .#{$item}-content {
-        flex: 1;
-        display: inline-block;
-    }
 
-    .#{$item}-title {
-        @include font-size-header-6;
-        max-width: $width-steps_nav_item_title-maxWidth;
-        @include text-overflow-hidden;
-        font-weight: $font-steps_nav_item_title-fontWeight;
-    }
-
-
-    &-active {
         .#{$item}-title {
-            color: $color-steps_nav_item_title-text-active;
-            font-weight: $font-steps_nav_item_title_active-fontWeight;
+            @include font-size-header-6;
+            max-width: $width-steps_nav_item_title-maxWidth;
+            @include text-overflow-hidden;
+            font-weight: $font-steps_nav_item_title-fontWeight;
         }
-    }
-}
-
-@mixin steps-nav-small {
-    .#{$item}-title {
-        @include font-size-regular;
-    }
-}
 
-.#{$basicType} {
-    display: inline-flex;
-    flex-flow: row nowrap;
 
-    .#{$item} {
-        @include steps-nav-item;
+        &-active {
+            .#{$item}-title {
+                color: $color-steps_nav_item_title-text-active;
+                font-weight: $font-steps_nav_item_title_active-fontWeight;
+            }
+        }
     }
 
     &.#{$module}-small {
         .#{$item} {
-            @include steps-nav-small;
-        }
-    }
-}
+            .#{$item}-title {
+                @include font-size-regular;
+            }
 
-// C2D 变体生成样式
-.#{$navItem} {
-    &.#{$item} {
-        @include steps-nav-item;
-    }
-
-    &.#{$item}-small {
-        @include steps-nav-small;
+        }
     }
-
 }

package/tag/tag.scss

@@ -64,12 +64,12 @@ $types: "ghost", "solid", "light";
         padding-left: $spacing-tag_close-paddingLeft;
         cursor: pointer;
 
-        :hover {
-            color: $color-tag_close-icon-hover
+        &:hover {
+            color: $color-tag_close-icon-hover;
         }
 
-        :active {
-            color: $color-tag_close-icon-active
+        &:active {
+            color: $color-tag_close-icon-active;
         }
     }
 
@@ -208,6 +208,15 @@ $types: "ghost", "solid", "light";
 .#{$module}-solid {
     .#{$module}-close {
         color: $color-tag_close-icon_deep-default;
+        opacity: .8;
+
+        &:hover {
+            opacity: 1.0;
+        }
+
+        &:active {
+            opacity: .9;
+        }
     }
 }
 

package/tooltip/foundation.ts

@@ -387,6 +387,8 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
     calcPosStyle(props: {triggerRect: DOMRect; wrapperRect: DOMRect; containerRect: PopupContainerDOMRect; position?: Position; spacing?: number; isOverFlow?: [boolean, boolean]}) {
         const { spacing, isOverFlow } = props;
+        const { innerWidth } = window;
+        
         const triggerRect = (isEmpty(props.triggerRect) ? props.triggerRect : this._adapter.getTriggerBounding()) || { ...defaultRect as any };
         const containerRect = (isEmpty(props.containerRect) ? props.containerRect : this._adapter.getPopupContainerRect()) || {
             ...defaultRect,
@@ -427,7 +429,8 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
 
         const isTriggerNearLeft = middleX - containerRect.left < containerRect.right - middleX;
         const isTriggerNearTop = middleY - containerRect.top < containerRect.bottom - middleY;
-
+        
+        const isWrapperWidthOverflow = wrapperRect.width > innerWidth;
 
         switch (position) {
             case 'top':
@@ -441,7 +444,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             case 'topLeft':
                 // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
                 // top = triggerRect.top - SPACING;
-                left = isWidthOverFlow ? containerRect.left : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
+                left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
                 top = isHeightOverFlow ? containerRect.bottom + offsetHeight : triggerRect.top - SPACING;
                 translateY = -1;
                 break;
@@ -487,7 +490,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
             case 'bottomLeft':
                 // left = pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left;
                 // top = triggerRect.bottom + SPACING;
-                left = isWidthOverFlow ? containerRect.left : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
+                left = isWidthOverFlow ? (isWrapperWidthOverflow ? containerRect.left : containerRect.right - wrapperRect.width ) : (pointAtCenter ? middleX - offsetXWithArrow : triggerRect.left);
                 top = isHeightOverFlow ? containerRect.top + offsetYWithArrow - SPACING : triggerRect.top + triggerRect.height + SPACING;
                 break;
             case 'bottomRight':
@@ -1126,7 +1129,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
      * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
      * 因此 returnFocusOnClose 只支持 click trigger
      */
-    _focusTrigger() {
+    focusTrigger() {
         const { trigger, returnFocusOnClose, preventScroll } = this.getProps();
         if (returnFocusOnClose && trigger !== 'custom') {
             const triggerNode = this._adapter.getTriggerNode();
@@ -1141,7 +1144,7 @@ export default class Tooltip<P = Record<string, any>, S = Record<string, any>> e
         if (trigger !== 'custom') {
             // Move the focus into the trigger first and then close the pop-up layer 
             // to avoid the problem of opening the pop-up layer again when the focus returns to the trigger in the case of hover and focus
-            this._focusTrigger();
+            this.focusTrigger();
             this.hide();
         }
         this._adapter.notifyEscKeydown(event);

package/treeSelect/foundation.ts

@@ -95,6 +95,7 @@ export interface BasicTreeSelectProps extends Pick<BasicTreeProps,
 | 'disableStrictly'
 | 'aria-label'
 | 'checkRelation'
+| 'preventScroll'
 > {
     motion?: Motion;
     mouseEnterDelay?: number;
@@ -163,7 +164,7 @@ export interface BasicTreeSelectInnerData extends Pick<BasicTreeInnerData,
 > {
     inputTriggerFocus: boolean;
     isOpen: boolean;
-    isInput: boolean;
+    // isInput: boolean;
     rePosKey: number;
     dropdownMinWidth: null | number;
     isHovering: boolean;
@@ -191,7 +192,8 @@ export interface TreeSelectAdapter<P = Record<string, any>, S = Record<string, a
     toggleHovering: (bool: boolean) => void;
     notifyLoad: (newLoadedKeys: Set<string>, data: BasicTreeNodeData) => void;
     updateInputFocus: (bool: boolean) => void;
-    updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void
+    updateLoadKeys: (data: BasicTreeNodeData, resolve: (value?: any) => void) => void;
+    updateIsFocus: (bool: boolean) => void
 }
 
 // eslint-disable-next-line max-len
@@ -210,6 +212,9 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         if (isOpen) {
             this.open();
         }
+        if (triggerSearchAutoFocus) {
+            this.handleTriggerFocus(null);
+        }
     }
 
     destroy() {
@@ -424,12 +429,25 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
     }
 
+    _registerClickOutsideHandler = (e) => {
+        this._adapter.registerClickOutsideHandler(e => {
+            this.handlerTriggerBlur(e);
+            this.close(e);
+        });
+    }
+
     // Scenes that may trigger focus:
     //  1、click selection
     _notifyFocus(e: any) {
         this._adapter.notifyFocus(e);
     }
 
+    handleTriggerFocus(e: any) {
+        this._adapter.updateIsFocus(true);
+        this._notifyFocus(e);
+        this._registerClickOutsideHandler(e);
+    }
+
     // Scenes that may trigger blur
     //  1、clickOutSide
     //  2、click option / press enter, and then select complete（when multiple is false
@@ -438,6 +456,12 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         this._adapter.notifyBlur(e);
     }
 
+    handlerTriggerBlur(e) {
+        this._adapter.updateIsFocus(false);
+        this._notifyBlur(e);
+        this._adapter.unregisterClickOutsideHandler();
+    }
+
     toggleHoverState(bool: boolean) {
         this._adapter.toggleHovering(bool);
     }
@@ -445,15 +469,10 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     open() {
         this._adapter.openMenu();
         this._setDropdownWidth();
-        this._adapter.registerClickOutsideHandler(e => {
-            this.close(e);
-        });
     }
 
     close(e: any) {
         this._adapter.closeMenu();
-        this._adapter.unregisterClickOutsideHandler();
-        this._notifyBlur(e);
         if (this.getProp('motionExpand')) {
             this._adapter.updateState({ motionKeys: new Set([]) });
         }
@@ -461,18 +480,22 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     handleClick(e: any) {
         const isDisabled = this._isDisabled();
-        const { isOpen, inputValue } = this.getStates();
+        const { isOpen, inputValue, isFocus } = this.getStates();
         const { searchPosition } = this.getProps();
         if (isDisabled) {
             return;
-        } else if (!isOpen) {
-            this.open();
-            this._notifyFocus(e);
-        } else if (isOpen) {
-            if (searchPosition === 'trigger' && inputValue) {
-                return;
+        } else {
+            if (!isFocus) {
+                this.handleTriggerFocus(e);
+            }
+            if (isOpen) {
+                if (searchPosition === 'trigger' && inputValue) {
+                    return;
+                }
+                this.close(e);
+            } else {
+                this.open();
             }
-            this.close(e);
         }
     }
 
@@ -639,6 +662,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         }
         if (clickToHide && (this._isSelectToClose() || !data.children)) {
             this.close(e);
+            this.handlerTriggerBlur(e);
         }
     }